@react-aria/grid 3.11.1 → 3.12.0

package/src/GridKeyboardDelegate.ts

@@ -13,7 +13,7 @@
 import {Direction, DisabledBehavior, Key, KeyboardDelegate, LayoutDelegate, Node, Rect, RefObject, Size} from '@react-types/shared';
 import {DOMLayoutDelegate} from '@react-aria/selection';
 import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections';
-import {GridCollection} from '@react-types/grid';
+import {GridCollection, GridNode} from '@react-types/grid';
 
 export interface GridKeyboardDelegateOptions<C> {
   collection: C,
@@ -103,6 +103,35 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     return null;
   }
 
+  protected getKeyForItemInRowByIndex(key: Key, index: number = 0): Key | null {
+    if (index < 0) {
+      return null;
+    }
+
+    let item = this.collection.getItem(key);
+    if (!item) {
+      return null;
+    }
+
+    let i = 0;
+    for (let child of getChildNodes(item, this.collection) as Iterable<GridNode<T>>) {
+      if (child.colSpan && child.colSpan + i > index) {
+        return child.key ?? null;
+      }
+
+      if (child.colSpan) {
+        i = i + child.colSpan - 1;
+      }
+
+      if (i === index) {
+        return child.key ?? null;
+      }
+
+      i++;
+    }
+    return null;
+  }
+
   getKeyBelow(fromKey: Key) {
     let key: Key | null = fromKey;
     let startItem = this.collection.getItem(key);
@@ -123,11 +152,8 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     if (key != null) {
       // If focus was on a cell, focus the cell with the same index in the next row.
       if (this.isCell(startItem)) {
-        let item = this.collection.getItem(key);
-        if (!item) {
-          return null;
-        }
-        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key ?? null;
+        let startIndex = startItem.colIndex ? startItem.colIndex : startItem.index;
+        return this.getKeyForItemInRowByIndex(key, startIndex);
       }
 
       // Otherwise, focus the next row
@@ -158,11 +184,8 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     if (key != null) {
       // If focus was on a cell, focus the cell with the same index in the previous row.
       if (this.isCell(startItem)) {
-        let item = this.collection.getItem(key);
-        if (!item) {
-          return null;
-        }
-        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key || null;
+        let startIndex = startItem.colIndex ? startItem.colIndex : startItem.index;
+        return this.getKeyForItemInRowByIndex(key, startIndex);
       }
 
       // Otherwise, focus the previous row

package/src/useGrid.ts

@@ -26,6 +26,11 @@ import {useSelectableCollection} from '@react-aria/selection';
 export interface GridProps extends DOMProps, AriaLabelingProps {
   /** Whether the grid uses virtual scrolling. */
   isVirtualized?: boolean,
+  /**
+   * Whether typeahead navigation is disabled.
+   * @default false
+   */
+  disallowTypeAhead?: boolean,
   /**
    * An optional keyboard delegate implementation for type to select,
    * to override the default.
@@ -66,6 +71,7 @@ export interface GridAria {
 export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<T>>, ref: RefObject<HTMLElement | null>): GridAria {
   let {
     isVirtualized,
+    disallowTypeAhead,
     keyboardDelegate,
     focusMode,
     scrollRef,
@@ -99,7 +105,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     selectionManager: manager,
     keyboardDelegate: delegate,
     isVirtualized,
-    scrollRef
+    scrollRef,
+    disallowTypeAhead
   });
 
   let id = useId(props.id);

package/src/useGridCell.ts

@@ -11,12 +11,12 @@
  */
 
 import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
-import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
+import {focusSafely, isFocusVisible} from '@react-aria/interactions';
+import {getFocusableTreeWalker} from '@react-aria/focus';
 import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {isFocusVisible} from '@react-aria/interactions';
 import {KeyboardEvent as ReactKeyboardEvent, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
 import {useSelectableItem} from '@react-aria/selection';
@@ -30,6 +30,8 @@ export interface GridCellProps {
   focusMode?: 'child' | 'cell',
   /** Whether selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean,
+  /** Indicates how many columns the data cell spans. */
+  colSpan?: number,
   /**
    * Handler that is called when a user performs an action on the cell.
    * Please use onCellAction at the collection level instead.
@@ -251,6 +253,9 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   let gridCellProps: DOMAttributes = mergeProps(itemProps, {
     role: 'gridcell',
     onKeyDownCapture,
+    'aria-colspan': node.colSpan,
+    'aria-colindex': node.colIndex != null ? node.colIndex + 1 : undefined, // aria-colindex is 1-based
+    colSpan: isVirtualized ? undefined : node.colSpan,
     onFocus
   });
 

package/src/useGridSelectionAnnouncement.ts

@@ -15,9 +15,9 @@ import {Collection, Key, Node, Selection} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {SelectionManager} from '@react-stately/selection';
+import {useEffectEvent, useUpdateEffect} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useRef} from 'react';
-import {useUpdateEffect} from '@react-aria/utils';
 
 export interface GridSelectionAnnouncementProps {
   /**
@@ -46,8 +46,8 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
   // We do this using an ARIA live region.
   let selection = state.selectionManager.rawSelection;
   let lastSelection = useRef(selection);
-  useUpdateEffect(() => {
-    if (!state.selectionManager.isFocused) {
+  let announceSelectionChange = useEffectEvent(() => {
+    if (!state.selectionManager.isFocused || selection === lastSelection.current) {
       lastSelection.current = selection;
 
       return;
@@ -96,7 +96,17 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
     }
 
     lastSelection.current = selection;
-  }, [selection]);
+  });
+
+  useUpdateEffect(() => {
+    if (state.selectionManager.isFocused) {
+      announceSelectionChange();
+    } else {
+      // Wait a frame in case the collection is about to become focused (e.g. on mouse down).
+      let raf = requestAnimationFrame(announceSelectionChange);
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [selection, state.selectionManager.isFocused]);
 }
 
 function diffSelection(a: Selection, b: Selection): Set<Key> {