chore: revert focus loading indicators and table scroll events for patch (#8376)

* Revert "Revert "Revert "feat: focus loading indicator in rac tree (#8270)" (#8336)" (#8351)"

This reverts commit ea7f3e6.

* Revert "feat: Allow scroll events to be added on certain table components (#8150)"

This reverts commit 4150364.

Author: LFDanLu

packages/@react-aria/selection/src/ListKeyboardDelegate.ts

@@ -78,7 +78,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     let nextKey = key;
     while (nextKey != null) {
       let item = this.collection.getItem(nextKey);
-      if (item?.type === 'loader' || (item?.type === 'item' && !this.isDisabled(item))) {
+      if (item?.type === 'item' && !this.isDisabled(item)) {
         return nextKey;
       }
 

packages/react-aria-components/example/index.css

@@ -27,7 +27,6 @@ html {
   }
 }
 
-.tree-loader,
 .tree-item {
   padding: 4px 5px;
   outline: none;

packages/react-aria-components/src/Table.tsx

@@ -540,7 +540,7 @@ export interface TableHeaderRenderProps {
   isHovered: boolean
 }
 
-export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents, Pick<React.HTMLAttributes<HTMLTableSectionElement>, 'onScroll'> {
+export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents {
   /** A list of table columns. */
   columns?: Iterable<T>,
   /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
@@ -589,7 +589,6 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
       <THead
         {...mergeProps(filterDOMProps(props as any), rowGroupProps, hoverProps)}
         {...renderProps}
-        onScroll={props.onScroll}
         ref={ref}
         data-hovered={isHovered || undefined}>
         {headerRows}
@@ -916,7 +915,7 @@ export interface TableBodyRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps>, Pick<React.HTMLAttributes<HTMLTableSectionElement>, 'onScroll'> {
+export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps> {
   /** Provides content to display when there are no rows in the table. */
   renderEmptyState?: (props: TableBodyRenderProps) => ReactNode
 }
@@ -980,7 +979,6 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
     <TBody
       {...mergeProps(filterDOMProps(props as any), rowGroupProps)}
       {...renderProps}
-      onScroll={props.onScroll}
       ref={ref}
       data-empty={isEmpty || undefined}>
       {isDroppable && <RootDropIndicator />}

packages/react-aria-components/src/Tree.tsx

@@ -695,7 +695,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   );
 });
 
-export interface UNSTABLE_TreeLoadingIndicatorRenderProps extends Pick<TreeItemRenderProps, 'isFocused' | 'isFocusVisible'> {
+export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
   /**
    * What level the tree item has within the tree.
    * @selector [data-level]
@@ -707,44 +707,36 @@ export interface TreeLoaderProps extends RenderProps<UNSTABLE_TreeLoadingIndicat
 
 export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader<T extends object>(props: TreeLoaderProps,  ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
   let state = useContext(TreeStateContext)!;
-  ref = useObjectRef<HTMLDivElement>(ref);
-  let {rowProps, gridCellProps, ...states} = useTreeItem({node: item}, state, ref);
+  // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
+  // @ts-ignore
+  let {rowProps} = useTreeItem({node: item}, state, ref);
   let level = rowProps['aria-level'] || 1;
 
   let ariaProps = {
-    role: 'row',
     'aria-level': rowProps['aria-level'],
     'aria-posinset': rowProps['aria-posinset'],
-    'aria-setsize': rowProps['aria-setsize'],
-    tabIndex: rowProps.tabIndex
+    'aria-setsize': rowProps['aria-setsize']
   };
 
-  let {isFocusVisible, focusProps} = useFocusRing();
-
   let renderProps = useRenderProps({
     ...props,
     id: undefined,
     children: item.rendered,
     defaultClassName: 'react-aria-TreeLoader',
     values: {
-      level,
-      isFocused: states.isFocused,
-      isFocusVisible
+      level
     }
   });
 
   return (
     <>
       <div
+        role="row"
         ref={ref}
-        {...mergeProps(filterDOMProps(props as any), ariaProps, focusProps)}
+        {...mergeProps(filterDOMProps(props as any), ariaProps)}
         {...renderProps}
-        data-key={rowProps['data-key']}
-        data-collection={rowProps['data-collection']}
-        data-focused={states.isFocused || undefined}
-        data-focus-visible={isFocusVisible || undefined}
         data-level={level}>
-        <div {...gridCellProps}>
+        <div role="gridcell" aria-colindex={1}>
           {renderProps.children}
         </div>
       </div>

packages/react-aria-components/stories/Tree.stories.tsx

@@ -322,11 +322,7 @@ let rows = [
 
 const MyTreeLoader = () => {
   return (
-    <UNSTABLE_TreeLoadingIndicator
-      className={({isFocused, isFocusVisible}) => classNames(styles, 'tree-loader', {
-        focused: isFocused,
-        'focus-visible': isFocusVisible
-      })}>      
+    <UNSTABLE_TreeLoadingIndicator>
       {({level}) => {
         let message = `Level ${level} loading spinner`;
         if (level === 1) {

packages/react-aria-components/test/Table.test.js

@@ -300,14 +300,12 @@ describe('Table', () => {
     }
   });
 
-  it('should support DOM props', async () => {
-    const onScrollHeader = jest.fn();
-    const onScrollBody = jest.fn();
+  it('should support DOM props', () => {
     let {getByRole, getAllByRole} = renderTable({
       tableProps: {'data-testid': 'table'},
-      tableHeaderProps: {'data-testid': 'table-header', onScroll: onScrollHeader},
+      tableHeaderProps: {'data-testid': 'table-header'},
       columnProps: {'data-testid': 'column'},
-      tableBodyProps: {'data-testid': 'table-body', onScroll: onScrollBody},
+      tableBodyProps: {'data-testid': 'table-body'},
       rowProps: {'data-testid': 'row'},
       cellProps: {'data-testid': 'cell'}
     });
@@ -334,12 +332,6 @@ describe('Table', () => {
     for (let cell of getAllByRole('gridcell')) {
       expect(cell).toHaveAttribute('data-testid', 'cell');
     }
-
-    // trigger scrolls
-    fireEvent.scroll(rowGroups[0]);
-    fireEvent.scroll(rowGroups[1]);
-    expect(onScrollHeader).toBeCalledTimes(1);
-    expect(onScrollBody).toBeCalledTimes(1);
   });
 
   it('should render checkboxes for selection', async () => {

packages/react-aria-components/test/Tree.test.tsx

@@ -1149,7 +1149,7 @@ describe('Tree', () => {
       expect(cell).toHaveAttribute('aria-colindex', '1');
     });
 
-    it('should focus the load more row when using ArrowDown/ArrowUp', async () => {
+    it('should not focus the load more row when using ArrowDown/ArrowUp', async () => {
       let {getAllByRole} = render(<LoadingMoreTree isLoading />);
 
       let rows = getAllByRole('row');
@@ -1158,18 +1158,19 @@ describe('Tree', () => {
 
       await user.tab();
       expect(document.activeElement).toBe(rows[0]);
-      for (let i = 1; i < 8; i++) {
+      for (let i = 0; i < 5; i++) {
         await user.keyboard('{ArrowDown}');
-        expect(document.activeElement).toBe(rows[i]);
       }
+      expect(document.activeElement).toBe(rows[5]);
 
-      for (let i = 6; i >= 0; i--) {
-        await user.keyboard('{ArrowUp}');
-        expect(document.activeElement).toBe(rows[i]);
-      }
+      await user.keyboard('{ArrowDown}');
+      expect(document.activeElement).toBe(rows[7]);
+
+      await user.keyboard('{ArrowUp}');
+      expect(document.activeElement).toBe(rows[5]);
     });
 
-    it('should focus the load more row when using End', async () => {
+    it('should not focus the load more row when using End', async () => {
       let {getAllByRole} = render(<LoadingMoreTree isLoading />);
 
       let rows = getAllByRole('row');
@@ -1179,14 +1180,14 @@ describe('Tree', () => {
       await user.tab();
       expect(document.activeElement).toBe(rows[0]);
       await user.keyboard('{End}');
-      expect(document.activeElement).toBe(rows[21]);
+      expect(document.activeElement).toBe(rows[20]);
 
       // Check that it didn't shift the focusedkey to the loader key even if DOM focus didn't shift to the loader
       await user.keyboard('{ArrowUp}');
-      expect(document.activeElement).toBe(rows[20]);
+      expect(document.activeElement).toBe(rows[19]);
     });
 
-    it('should focus the load more row when using PageDown', async () => {
+    it('should not focus the load more row when using PageDown', async () => {
       let {getAllByRole} = render(<LoadingMoreTree isLoading />);
 
       let rows = getAllByRole('row');
@@ -1196,11 +1197,11 @@ describe('Tree', () => {
       await user.tab();
       expect(document.activeElement).toBe(rows[0]);
       await user.keyboard('{PageDown}');
-      expect(document.activeElement).toBe(rows[21]);
+      expect(document.activeElement).toBe(rows[20]);
 
       // Check that it didn't shift the focusedkey to the loader key even if DOM focus didn't shift to the loader
       await user.keyboard('{ArrowUp}');
-      expect(document.activeElement).toBe(rows[20]);
+      expect(document.activeElement).toBe(rows[19]);
     });
 
     it('should not render no results state and the loader at the same time', () => {