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

* feat: Allow scroll and context menu events to be added on certain table components

* add types for the props

* fix lint

* Code review comments

* self review comments

* another self review comment

Author: lukpsaxo

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

@@ -540,7 +540,7 @@ export interface TableHeaderRenderProps {
   isHovered: boolean
 }
 
-export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents {
+export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents, Pick<React.HTMLAttributes<HTMLTableSectionElement>, 'onScroll'> {
   /** 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,6 +589,7 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
       <THead
         {...mergeProps(filterDOMProps(props as any), rowGroupProps, hoverProps)}
         {...renderProps}
+        onScroll={props.onScroll}
         ref={ref}
         data-hovered={isHovered || undefined}>
         {headerRows}
@@ -915,7 +916,7 @@ export interface TableBodyRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps> {
+export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps>, Pick<React.HTMLAttributes<HTMLTableSectionElement>, 'onScroll'> {
   /** Provides content to display when there are no rows in the table. */
   renderEmptyState?: (props: TableBodyRenderProps) => ReactNode
 }
@@ -979,6 +980,7 @@ 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/test/Table.test.js

@@ -300,12 +300,14 @@ describe('Table', () => {
     }
   });
 
-  it('should support DOM props', () => {
+  it('should support DOM props', async () => {
+    const onScrollHeader = jest.fn();
+    const onScrollBody = jest.fn();
     let {getByRole, getAllByRole} = renderTable({
       tableProps: {'data-testid': 'table'},
-      tableHeaderProps: {'data-testid': 'table-header'},
+      tableHeaderProps: {'data-testid': 'table-header', onScroll: onScrollHeader},
       columnProps: {'data-testid': 'column'},
-      tableBodyProps: {'data-testid': 'table-body'},
+      tableBodyProps: {'data-testid': 'table-body', onScroll: onScrollBody},
       rowProps: {'data-testid': 'row'},
       cellProps: {'data-testid': 'cell'}
     });
@@ -332,6 +334,12 @@ 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 () => {