@react-aria/table 3.0.0-beta.1 → 3.0.0-nightly-641446f65-240905

package/src/useTable.ts

@@ -10,19 +10,38 @@
  * governing permissions and limitations under the License.
  */
 
+import {announce} from '@react-aria/live-announcer';
 import {GridAria, GridProps, useGrid} from '@react-aria/grid';
 import {gridIds} from './utils';
-import {Layout} from '@react-stately/virtualizer';
-import {Node} from '@react-types/shared';
-import {RefObject, useMemo} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {Key, LayoutDelegate, Rect, RefObject, Size} from '@react-types/shared';
+import {mergeProps, useDescription, useId, useUpdateEffect} from '@react-aria/utils';
 import {TableKeyboardDelegate} from './TableKeyboardDelegate';
-import {TableState} from '@react-stately/table';
-import {useCollator, useLocale} from '@react-aria/i18n';
-import {useId} from '@react-aria/utils';
+import {tableNestedRows} from '@react-stately/flags';
+import {TableState, TreeGridState} from '@react-stately/table';
+import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useMemo} from 'react';
 
-interface TableProps<T> extends GridProps {
+export interface AriaTableProps extends GridProps {
   /** The layout object for the table. Computes what content is visible and how to position and style them. */
-  layout?: Layout<Node<T>>
+  layoutDelegate?: LayoutDelegate,
+  /** @deprecated - Use layoutDelegate instead. */
+  layout?: DeprecatedLayout
+}
+
+interface DeprecatedLayout {
+  getLayoutInfo(key: Key): DeprecatedLayoutInfo,
+  getContentSize(): Size,
+  virtualizer: DeprecatedVirtualizer
+}
+
+interface DeprecatedLayoutInfo {
+  rect: Rect
+}
+
+interface DeprecatedVirtualizer {
+  visibleRect: Rect
 }
 
 /**
@@ -33,10 +52,11 @@ interface TableProps<T> extends GridProps {
  * @param state - State for the table, as returned by `useTableState`.
  * @param ref - The ref attached to the table element.
  */
-export function useTable<T>(props: TableProps<T>, state: TableState<T>, ref: RefObject<HTMLElement>): GridAria {
+export function useTable<T>(props: AriaTableProps, state: TableState<T> | TreeGridState<T>, ref: RefObject<HTMLElement | null>): GridAria {
   let {
     keyboardDelegate,
     isVirtualized,
+    layoutDelegate,
     layout
   } = props;
 
@@ -44,50 +64,24 @@ export function useTable<T>(props: TableProps<T>, state: TableState<T>, ref: Ref
   // When virtualized, the layout object will be passed in as a prop and override this.
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let {direction} = useLocale();
+  let disabledBehavior = state.selectionManager.disabledBehavior;
   let delegate = useMemo(() => keyboardDelegate || new TableKeyboardDelegate({
     collection: state.collection,
     disabledKeys: state.disabledKeys,
+    disabledBehavior,
     ref,
     direction,
     collator,
+    layoutDelegate,
     layout
-  }), [keyboardDelegate, state.collection, state.disabledKeys, ref, direction, collator, layout]);
-
-  let id = useId();
+  }), [keyboardDelegate, state.collection, state.disabledKeys, disabledBehavior, ref, direction, collator, layoutDelegate, layout]);
+  let id = useId(props.id);
   gridIds.set(state, id);
 
   let {gridProps} = useGrid({
     ...props,
     id,
-    keyboardDelegate: delegate,
-    getRowText(key) {
-      let added = state.collection.getItem(key);
-
-      // If the row has a textValue, use that.
-      if (added.textValue != null) {
-        return added.textValue;
-      }
-
-      // Otherwise combine the text of each of the row header columns.
-      let rowHeaderColumnKeys = state.collection.rowHeaderColumnKeys;
-      if (rowHeaderColumnKeys) {
-        let text = [];
-        for (let cell of added.childNodes) {
-          let column = state.collection.columns[cell.index];
-          if (rowHeaderColumnKeys.has(column.key) && cell.textValue) {
-            text.push(cell.textValue);
-          }
-
-          if (text.length === rowHeaderColumnKeys.size) {
-            break;
-          }
-        }
-
-        return text.join(' ');
-      }
-
-      return '';
-    }
+    keyboardDelegate: delegate
   }, state, ref);
 
   // Override to include header rows
@@ -95,7 +89,33 @@ export function useTable<T>(props: TableProps<T>, state: TableState<T>, ref: Ref
     gridProps['aria-rowcount'] = state.collection.size + state.collection.headerRows.length;
   }
 
+  if (tableNestedRows() && 'expandedKeys' in state) {
+    gridProps.role = 'treegrid';
+  }
+
+  let {column, direction: sortDirection} = state.sortDescriptor || {};
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');
+  let sortDescription = useMemo(() => {
+    let columnName = state.collection.columns.find(c => c.key === column)?.textValue;
+    return sortDirection && column ? stringFormatter.format(`${sortDirection}Sort`, {columnName}) : undefined;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortDirection, column, state.collection.columns]);
+
+  let descriptionProps = useDescription(sortDescription);
+
+  // Only announce after initial render, tabbing to the table will tell you the initial sort info already
+  useUpdateEffect(() => {
+    announce(sortDescription, 'assertive', 500);
+  }, [sortDescription]);
+
   return {
-    gridProps
+    gridProps: mergeProps(
+      gridProps,
+      descriptionProps,
+      {
+        // merge sort description with long press information
+        'aria-describedby': [descriptionProps['aria-describedby'], gridProps['aria-describedby']].filter(Boolean).join(' ')
+      }
+    )
   };
 }

package/src/useTableCell.ts

@@ -10,22 +10,32 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {getCellId} from './utils';
 import {GridNode} from '@react-types/grid';
-import {HTMLAttributes, RefObject} from 'react';
 import {TableState} from '@react-stately/table';
 import {useGridCell} from '@react-aria/grid';
 
-interface TableCellProps {
+export interface AriaTableCellProps {
   /** An object representing the table cell. Contains all the relevant information that makes up the row header. */
   node: GridNode<unknown>,
   /** Whether the cell is contained in a virtual scroller. */
-  isVirtualized?: boolean
+  isVirtualized?: boolean,
+  /** Whether selection should occur on press up instead of press down. */
+  shouldSelectOnPressUp?: boolean,
+  /**
+   * Handler that is called when a user performs an action on the cell.
+   * Please use onCellAction at the collection level instead.
+   * @deprecated
+   **/
+  onAction?: () => void
 }
 
-interface TableCellAria {
+export interface TableCellAria {
   /** Props for the table cell element. */
-  gridCellProps: HTMLAttributes<HTMLElement>
+  gridCellProps: DOMAttributes,
+  /** Whether the cell is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -34,9 +44,8 @@ interface TableCellAria {
  * @param state - State of the table, as returned by `useTableState`.
  * @param ref - The ref attached to the cell element.
  */
-export function useTableCell<T>(props: TableCellProps, state: TableState<T>, ref: RefObject<HTMLElement>): TableCellAria {
-  let {gridCellProps} = useGridCell(props, state, ref);
-
+export function useTableCell<T>(props: AriaTableCellProps, state: TableState<T>, ref: RefObject<FocusableElement | null>): TableCellAria {
+  let {gridCellProps, isPressed} = useGridCell(props, state, ref);
   let columnKey = props.node.column.key;
   if (state.collection.rowHeaderColumnKeys.has(columnKey)) {
     gridCellProps.role = 'rowheader';
@@ -44,6 +53,7 @@ export function useTableCell<T>(props: TableCellProps, state: TableState<T>, ref
   }
 
   return {
-    gridCellProps
+    gridCellProps,
+    isPressed
   };
 }

package/src/useTableColumnHeader.ts

@@ -10,26 +10,29 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {getColumnHeaderId} from './utils';
 import {GridNode} from '@react-types/grid';
-import {HTMLAttributes, RefObject} from 'react';
-import {mergeProps} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {isAndroid, mergeProps, useDescription} from '@react-aria/utils';
 import {TableState} from '@react-stately/table';
+import {useEffect} from 'react';
 import {useFocusable} from '@react-aria/focus';
 import {useGridCell} from '@react-aria/grid';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {usePress} from '@react-aria/interactions';
 
-
-interface ColumnHeaderProps {
+export interface AriaTableColumnHeaderProps<T> {
   /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */
-  node: GridNode<unknown>,
+  node: GridNode<T>,
   /** Whether the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) is contained in a virtual scroller. */
   isVirtualized?: boolean
 }
 
-interface ColumnHeaderAria {
+export interface TableColumnHeaderAria {
   /** Props for the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) element. */
-  columnHeaderProps: HTMLAttributes<HTMLElement>
+  columnHeaderProps: DOMAttributes
 }
 
 /**
@@ -38,33 +41,66 @@ interface ColumnHeaderAria {
  * @param state - State of the table, as returned by `useTableState`.
  * @param ref - The ref attached to the column header element.
  */
-export function useTableColumnHeader<T>(props: ColumnHeaderProps, state: TableState<T>, ref: RefObject<HTMLElement>): ColumnHeaderAria {
+export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, state: TableState<T>, ref: RefObject<FocusableElement | null>): TableColumnHeaderAria {
   let {node} = props;
-  let {gridCellProps} = useGridCell(props, state, ref);
+  let allowsSorting = node.props.allowsSorting;
+  // if there are no focusable children, the column header will focus the cell
+  let {gridCellProps} = useGridCell({...props, focusMode: 'child'}, state, ref);
 
   let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';
+
   let {pressProps} = usePress({
-    isDisabled: !node.props.allowsSorting || isSelectionCellDisabled,
+    isDisabled: !allowsSorting || isSelectionCellDisabled,
     onPress() {
       state.sort(node.key);
-    }
+    },
+    ref
   });
 
   // Needed to pick up the focusable context, enabling things like Tooltips for example
   let {focusableProps} = useFocusable({}, ref);
-  let ariaSort: HTMLAttributes<HTMLElement>['aria-sort'] = null;
-  if (node.props.allowsSorting) {
-    ariaSort = state.sortDescriptor?.column === node.key ? state.sortDescriptor.direction : 'none';
+
+  let ariaSort: DOMAttributes['aria-sort'] = null;
+  let isSortedColumn = state.sortDescriptor?.column === node.key;
+  let sortDirection = state.sortDescriptor?.direction;
+  // aria-sort not supported in Android Talkback
+  if (node.props.allowsSorting && !isAndroid()) {
+    ariaSort = isSortedColumn ? sortDirection : 'none';
+  }
+
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');
+  let sortDescription;
+  if (allowsSorting) {
+    sortDescription = `${stringFormatter.format('sortable')}`;
+    // Android Talkback doesn't support aria-sort so we add sort order details to the aria-described by here
+    if (isSortedColumn && sortDirection && isAndroid()) {
+      sortDescription = `${sortDescription}, ${stringFormatter.format(sortDirection)}`;
+    }
   }
 
+  let descriptionProps = useDescription(sortDescription);
+
+  let shouldDisableFocus = state.collection.size === 0;
+  useEffect(() => {
+    if (shouldDisableFocus && state.selectionManager.focusedKey === node.key) {
+      state.selectionManager.setFocusedKey(null);
+    }
+  }, [shouldDisableFocus, state.selectionManager, node.key]);
+
   return {
     columnHeaderProps: {
-      ...mergeProps(gridCellProps, pressProps, focusableProps),
+      ...mergeProps(
+        gridCellProps,
+        pressProps,
+        focusableProps,
+        descriptionProps,
+        // If the table is empty, make all column headers untabbable
+        shouldDisableFocus && {tabIndex: -1}
+      ),
       role: 'columnheader',
       id: getColumnHeaderId(state, node.key),
       'aria-colspan': node.colspan && node.colspan > 1 ? node.colspan : null,
-      'aria-sort': ariaSort,
-      'aria-disabled': isSelectionCellDisabled || undefined
+      'aria-sort': ariaSort
     }
   };
 }

package/src/useTableColumnResize.ts

@@ -0,0 +1,275 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ChangeEvent, useCallback, useEffect, useRef} from 'react';
+import {ColumnSize} from '@react-types/table';
+import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
+import {focusSafely} from '@react-aria/focus';
+import {getColumnHeaderId} from './utils';
+import {GridNode} from '@react-types/grid';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {mergeProps, useDescription, useEffectEvent, useId} from '@react-aria/utils';
+import {TableColumnResizeState} from '@react-stately/table';
+import {useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
+
+export interface TableColumnResizeAria {
+  /** Props for the visually hidden input element. */
+  inputProps: DOMAttributes,
+  /** Props for the resizer element. */
+  resizerProps: DOMAttributes,
+  /** Whether this column is currently being resized. */
+  isResizing: boolean
+}
+
+export interface AriaTableColumnResizeProps<T> {
+  /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */
+  column: GridNode<T>,
+  /** Aria label for the hidden input. Gets read when resizing. */
+  'aria-label': string,
+  /**
+   * Ref to the trigger if resizing was started from a column header menu. If it's provided,
+   * focus will be returned there when resizing is done. If it isn't provided, it is assumed that the resizer is
+   * visible at all time and keyboard resizing is started via pressing Enter on the resizer and not on focus.
+   * */
+  triggerRef?: RefObject<FocusableElement | null>,
+  /** If resizing is disabled. */
+  isDisabled?: boolean,
+  /** Called when resizing starts. */
+  onResizeStart?: (widths: Map<Key, ColumnSize>) => void,
+  /** Called for every resize event that results in new column sizes. */
+  onResize?: (widths: Map<Key, ColumnSize>) => void,
+  /** Called when resizing ends. */
+  onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a table column resizer element.
+ * @param props - Props for the resizer.
+ * @param state - State for the table's resizable columns, as returned by `useTableColumnResizeState`.
+ * @param ref - The ref attached to the resizer's visually hidden input element.
+ */
+export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableColumnResizeState<T>, ref: RefObject<HTMLInputElement | null>): TableColumnResizeAria {
+  let {column: item, triggerRef, isDisabled, onResizeStart, onResize, onResizeEnd, 'aria-label': ariaLabel} = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/table');
+  let id = useId();
+  let isResizing = state.resizingColumn === item.key;
+  let isResizingRef = useRef(isResizing);
+  let lastSize = useRef(null);
+  let wasFocusedOnResizeStart = useRef(false);
+  let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
+
+  let {direction} = useLocale();
+  let {keyboardProps} = useKeyboard({
+    onKeyDown: (e) => {
+      if (editModeEnabled) {
+        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {
+          e.preventDefault();
+          endResize(item);
+        }
+      } else {
+        // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
+        e.continuePropagation();
+
+        if (e.key === 'Enter') {
+          startResize(item);
+        }
+      }
+    }
+  });
+
+  let startResize = useEffectEvent((item) => {
+    if (!isResizingRef.current) {
+      lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+      state.startResize(item.key);
+      state.tableState.setKeyboardNavigationDisabled(true);
+      onResizeStart?.(lastSize.current);
+    }
+    isResizingRef.current = true;
+  });
+
+  let resize = useEffectEvent((item, newWidth) => {
+    let sizes = state.updateResizedColumns(item.key, newWidth);
+    onResize?.(sizes);
+    lastSize.current = sizes;
+  });
+
+  let endResize = useEffectEvent((item) => {
+    if (isResizingRef.current) {
+      if (lastSize.current == null) {
+        lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
+      }
+
+      state.endResize();
+      state.tableState.setKeyboardNavigationDisabled(false);
+      onResizeEnd?.(lastSize.current);
+      isResizingRef.current = false;
+
+      if (triggerRef?.current && !wasFocusedOnResizeStart.current) {
+        // switch focus back to the column header unless the resizer was already focused when resizing started.
+        focusSafely(triggerRef.current);
+      }
+    }
+    lastSize.current = null;
+  });
+
+  const columnResizeWidthRef = useRef<number>(0);
+  const {moveProps} = useMove({
+    onMoveStart() {
+      columnResizeWidthRef.current = state.getColumnWidth(item.key);
+      startResize(item);
+    },
+    onMove(e) {
+      let {deltaX, deltaY, pointerType} = e;
+      if (direction === 'rtl') {
+        deltaX *= -1;
+      }
+      if (pointerType === 'keyboard') {
+        if (deltaY !== 0 && deltaX === 0) {
+          deltaX = deltaY * -1;
+        }
+        deltaX *= 10;
+      }
+      // if moving up/down only, no need to resize
+      if (deltaX !== 0) {
+        columnResizeWidthRef.current += deltaX;
+        resize(item, columnResizeWidthRef.current);
+      }
+    },
+    onMoveEnd(e) {
+      let {pointerType} = e;
+      columnResizeWidthRef.current = 0;
+      if (pointerType === 'mouse' || (pointerType === 'touch' && wasFocusedOnResizeStart.current)) {
+        endResize(item);
+      }
+    }
+  });
+
+  let onKeyDown = useCallback((e) => {
+    if (editModeEnabled) {
+      moveProps.onKeyDown(e);
+    }
+  }, [editModeEnabled, moveProps]);
+
+
+  let min = Math.floor(state.getColumnMinWidth(item.key));
+  let max = Math.floor(state.getColumnMaxWidth(item.key));
+  if (max === Infinity) {
+    max = Number.MAX_SAFE_INTEGER;
+  }
+  let value = Math.floor(state.getColumnWidth(item.key));
+  let modality: string = useInteractionModality();
+  if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
+    modality = 'touch';
+  }
+  let description = triggerRef?.current == null && (modality === 'keyboard' || modality === 'virtual') && !isResizing ? stringFormatter.format('resizerDescription') : undefined;
+  let descriptionProps = useDescription(description);
+  let ariaProps = {
+    'aria-label': ariaLabel,
+    'aria-orientation': 'horizontal' as 'horizontal',
+    'aria-labelledby': `${id} ${getColumnHeaderId(state.tableState, item.key)}`,
+    'aria-valuetext': stringFormatter.format('columnSize', {value}),
+    'type': 'range',
+    min,
+    max,
+    value,
+    ...descriptionProps
+  };
+
+  const focusInput = useCallback(() => {
+    if (ref.current) {
+      focusSafely(ref.current);
+    }
+  }, [ref]);
+
+  let resizingColumn = state.resizingColumn;
+  let prevResizingColumn = useRef(null);
+  useEffect(() => {
+    if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
+      wasFocusedOnResizeStart.current = document.activeElement === ref.current;
+      startResize(item);
+      // Delay focusing input until Android Chrome's delayed click after touchend happens: https://bugs.chromium.org/p/chromium/issues/detail?id=1150073
+      let timeout = setTimeout(() => focusInput(), 0);
+      // VoiceOver on iOS has problems focusing the input from a menu.
+      let VOTimeout = setTimeout(focusInput, 400);
+      return () => {
+        clearTimeout(timeout);
+        clearTimeout(VOTimeout);
+      };
+    }
+    prevResizingColumn.current = resizingColumn;
+  }, [resizingColumn, item, focusInput, ref, startResize]);
+
+  let onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let currentWidth = state.getColumnWidth(item.key);
+    let nextValue = parseFloat(e.target.value);
+
+    if (nextValue > currentWidth) {
+      nextValue = currentWidth + 10;
+    } else {
+      nextValue = currentWidth - 10;
+    }
+    resize(item, nextValue);
+  };
+
+  let {pressProps} = usePress({
+    onPressStart: (e) => {
+      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === 'keyboard') {
+        return;
+      }
+      if (e.pointerType === 'virtual' && state.resizingColumn != null) {
+        endResize(item);
+        return;
+      }
+
+      // Sometimes onPress won't trigger for quick taps on mobile so we want to focus the input so blurring away
+      // can cancel resize mode for us.
+      focusInput();
+
+      // If resizer is always visible, mobile screenreader user can access the visually hidden resizer directly and thus we don't need
+      // to handle a virtual click to start the resizer.
+      if (e.pointerType !== 'virtual') {
+        startResize(item);
+      }
+    },
+    onPress: (e) => {
+      if (((e.pointerType === 'touch' && wasFocusedOnResizeStart.current) || e.pointerType === 'mouse') && state.resizingColumn != null) {
+        endResize(item);
+      }
+    }
+  });
+  let {visuallyHiddenProps} = useVisuallyHidden();
+
+  return {
+    resizerProps: mergeProps(
+      keyboardProps,
+      {...moveProps, onKeyDown},
+      pressProps,
+      {style: {touchAction: 'none'}}
+    ),
+    inputProps: mergeProps(
+      visuallyHiddenProps,
+      {
+        id,
+        onBlur: () => {
+          endResize(item);
+        },
+        onChange,
+        disabled: isDisabled
+      },
+      ariaProps
+    ),
+    isResizing
+  };
+}

package/src/useTableHeaderRow.ts

@@ -10,23 +10,29 @@
  * governing permissions and limitations under the License.
  */
 
-import {GridRowAria, GridRowProps} from '@react-aria/grid';
-import {RefObject} from 'react';
+import {DOMAttributes, RefObject} from '@react-types/shared';
+import {GridRowProps} from '@react-aria/grid';
+import {tableNestedRows} from '@react-stately/flags';
 import {TableState} from '@react-stately/table';
 
+export interface TableHeaderRowAria {
+  /** Props for the grid row element. */
+  rowProps: DOMAttributes
+}
+
 /**
  * Provides the behavior and accessibility implementation for a header row in a table.
  * @param props - Props for the row.
  * @param state - State of the table, as returned by `useTableState`.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function useTableHeaderRow<T>(props: GridRowProps<T>, state: TableState<T>, ref: RefObject<HTMLElement>): GridRowAria {
+export function useTableHeaderRow<T>(props: GridRowProps<T>, state: TableState<T>, ref: RefObject<Element | null>): TableHeaderRowAria {
   let {node, isVirtualized} = props;
   let rowProps = {
     role: 'row'
   };
 
-  if (isVirtualized) {
+  if (isVirtualized && !(tableNestedRows() && 'expandedKeys' in state)) {
     rowProps['aria-rowindex'] = node.index + 1; // aria-rowindex is 1 based
   }