@react-aria/grid 3.0.0-beta.1 → 3.0.0-nightly-4980928d3-240906

package/src/useGridCell.ts

@@ -10,31 +10,39 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {GridCollection} from '@react-types/grid';
-import {gridKeyboardDelegates} from './utils';
+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 {HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, RefObject} from 'react';
-import {isFocusVisible, usePress} from '@react-aria/interactions';
-import {mergeProps} from '@react-aria/utils';
-import {Node as RSNode} from '@react-types/shared';
+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';
 
-interface GridCellProps {
+export interface GridCellProps {
   /** An object representing the grid cell. Contains all the relevant information that makes up the grid cell. */
-  node: RSNode<unknown>,
+  node: GridNode<unknown>,
   /** Whether the grid cell is contained in a virtual scroller. */
   isVirtualized?: boolean,
   /** Whether the cell or its first focusable child element should be focused when the grid cell is focused. */
   focusMode?: 'child' | 'cell',
   /** Whether selection should occur on press up instead of press down. */
-  shouldSelectOnPressUp?: boolean
+  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 GridCellAria {
+export interface GridCellAria {
   /** Props for the grid cell element. */
-  gridCellProps: HTMLAttributes<HTMLElement>
+  gridCellProps: DOMAttributes,
+  /** Whether the cell is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -42,51 +50,62 @@ interface GridCellAria {
  * @param props - Props for the cell.
  * @param state - State of the parent grid, as returned by `useGridState`.
  */
-export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps, state: GridState<T, C>, ref: RefObject<HTMLElement>): GridCellAria {
+export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps, state: GridState<T, C>, ref: RefObject<FocusableElement | null>): GridCellAria {
   let {
     node,
     isVirtualized,
     focusMode = 'child',
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    onAction
   } = props;
 
   let {direction} = useLocale();
-  let keyboardDelegate = gridKeyboardDelegates.get(state);
+  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state);
+
+  // We need to track the key of the item at the time it was last focused so that we force
+  // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
+  let keyWhenFocused = useRef(null);
 
   // Handles focusing the cell. If there is a focusable child,
   // it is focused, otherwise the cell itself is focused.
   let focus = () => {
     let treeWalker = getFocusableTreeWalker(ref.current);
     if (focusMode === 'child') {
+      // If focus is already on a focusable child within the cell, early return so we don't shift focus
+      if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
+        return;
+      }
+
       let focusable = state.selectionManager.childFocusStrategy === 'last'
         ? last(treeWalker)
-        : treeWalker.firstChild() as HTMLElement;
+        : treeWalker.firstChild() as FocusableElement;
       if (focusable) {
         focusSafely(focusable);
         return;
       }
     }
 
-    if (!ref.current.contains(document.activeElement)) {
+    if (
+      (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
+      !ref.current.contains(document.activeElement)
+    ) {
       focusSafely(ref.current);
     }
   };
 
-  let {itemProps} = useSelectableItem({
+  let {itemProps, isPressed} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,
     ref,
     isVirtualized,
     focus,
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    onAction: onCellAction ? () => onCellAction(node.key) : onAction,
+    isDisabled: state.collection.size === 0
   });
 
-  // TODO: move into useSelectableItem?
-  let isDisabled = state.disabledKeys.has(node.key) || state.disabledKeys.has(node.parentKey);
-  let {pressProps} = usePress({...itemProps, isDisabled});
-
-  let onKeyDown = (e: ReactKeyboardEvent) => {
-    if (!e.currentTarget.contains(e.target as HTMLElement)) {
+  let onKeyDownCapture = (e: ReactKeyboardEvent) => {
+    if (!e.currentTarget.contains(e.target as Element) || state.isKeyboardNavigationDisabled) {
       return;
     }
 
@@ -97,18 +116,19 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
       case 'ArrowLeft': {
         // Find the next focusable element within the cell.
         let focusable = direction === 'rtl'
-          ? walker.nextNode() as HTMLElement
-          : walker.previousNode() as HTMLElement;
+          ? walker.nextNode() as FocusableElement
+          : walker.previousNode() as FocusableElement;
 
         // Don't focus the cell itself if focusMode is "child"
         if (focusMode === 'child' && focusable === ref.current) {
           focusable = null;
         }
 
+        e.preventDefault();
+        e.stopPropagation();
         if (focusable) {
-          e.preventDefault();
-          e.stopPropagation();
           focusSafely(focusable);
+          scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
         } else {
           // If there is no next focusable child, then move to the next cell to the left of this one.
           // This will be handled by useSelectableCollection. However, if there is no cell to the left
@@ -117,20 +137,26 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           // child, depending on the focus mode.
           let prev = keyboardDelegate.getKeyLeftOf(node.key);
           if (prev !== node.key) {
+            // We prevent the capturing event from reaching children of the cell, e.g. pickers.
+            // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
+            // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
+            ref.current.parentElement.dispatchEvent(
+              new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
+            );
             break;
           }
 
-          e.preventDefault();
-          e.stopPropagation();
           if (focusMode === 'cell' && direction === 'rtl') {
             focusSafely(ref.current);
+            scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
           } else {
             walker.currentNode = ref.current;
             focusable = direction === 'rtl'
-              ? walker.firstChild() as HTMLElement
+              ? walker.firstChild() as FocusableElement
               : last(walker);
             if (focusable) {
               focusSafely(focusable);
+              scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
             }
           }
         }
@@ -138,34 +164,41 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
       }
       case 'ArrowRight': {
         let focusable = direction === 'rtl'
-          ? walker.previousNode() as HTMLElement
-          : walker.nextNode() as HTMLElement;
+          ? walker.previousNode() as FocusableElement
+          : walker.nextNode() as FocusableElement;
 
         if (focusMode === 'child' && focusable === ref.current) {
           focusable = null;
         }
 
+        e.preventDefault();
+        e.stopPropagation();
         if (focusable) {
-          e.preventDefault();
-          e.stopPropagation();
           focusSafely(focusable);
+          scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
         } else {
           let next = keyboardDelegate.getKeyRightOf(node.key);
           if (next !== node.key) {
+            // We prevent the capturing event from reaching children of the cell, e.g. pickers.
+            // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
+            // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
+            ref.current.parentElement.dispatchEvent(
+              new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
+            );
             break;
           }
 
-          e.preventDefault();
-          e.stopPropagation();
           if (focusMode === 'cell' && direction === 'ltr') {
             focusSafely(ref.current);
+            scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
           } else {
             walker.currentNode = ref.current;
             focusable = direction === 'rtl'
               ? last(walker)
-              : walker.firstChild() as HTMLElement;
+              : walker.firstChild() as FocusableElement;
             if (focusable) {
               focusSafely(focusable);
+              scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
             }
           }
         }
@@ -176,7 +209,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
         // Prevent this event from reaching cell children, e.g. menu buttons. We want arrow keys to navigate
         // to the cell above/below instead. We need to re-dispatch the event from a higher parent so it still
         // bubbles and gets handled by useSelectableCollection.
-        if (!e.altKey && ref.current.contains(e.target as HTMLElement)) {
+        if (!e.altKey && ref.current.contains(e.target as Element)) {
           e.stopPropagation();
           e.preventDefault();
           ref.current.parentElement.dispatchEvent(
@@ -190,6 +223,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   // Grid cells can have focusable elements inside them. In this case, focus should
   // be marshalled to that element rather than focusing the cell itself.
   let onFocus = (e) => {
+    keyWhenFocused.current = node.key;
     if (e.target !== ref.current) {
       // useSelectableItem only handles setting the focused key when
       // the focused element is the gridcell itself. We also want to
@@ -212,26 +246,42 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     });
   };
 
-  let gridCellProps: HTMLAttributes<HTMLElement> = mergeProps(pressProps, {
+  let gridCellProps: DOMAttributes = mergeProps(itemProps, {
     role: 'gridcell',
-    onKeyDownCapture: onKeyDown,
+    onKeyDownCapture,
     onFocus
   });
 
   if (isVirtualized) {
-    gridCellProps['aria-colindex'] = node.index + 1; // aria-colindex is 1-based
+    gridCellProps['aria-colindex'] = (node.colIndex ?? node.index) + 1; // aria-colindex is 1-based
+  }
+
+  // When pressing with a pointer and cell selection is not enabled, usePress will be applied to the
+  // row rather than the cell. However, when the row is draggable, usePress cannot preventDefault
+  // on pointer down, so the browser will try to focus the cell which has a tabIndex applied.
+  // To avoid this, remove the tabIndex from the cell briefly on pointer down.
+  if (shouldSelectOnPressUp && gridCellProps.tabIndex != null && gridCellProps.onPointerDown == null) {
+    gridCellProps.onPointerDown = (e) => {
+      let el = e.currentTarget;
+      let tabindex = el.getAttribute('tabindex');
+      el.removeAttribute('tabindex');
+      requestAnimationFrame(() => {
+        el.setAttribute('tabindex', tabindex);
+      });
+    };
   }
 
   return {
-    gridCellProps
+    gridCellProps,
+    isPressed
   };
 }
 
 function last(walker: TreeWalker) {
-  let next: HTMLElement;
-  let last: HTMLElement;
+  let next: FocusableElement;
+  let last: FocusableElement;
   do {
-    last = walker.lastChild() as HTMLElement;
+    last = walker.lastChild() as FocusableElement;
     if (last) {
       next = last;
     }

package/src/useGridRow.ts

@@ -10,25 +10,33 @@
  * governing permissions and limitations under the License.
  */
 
-import {GridCollection} from '@react-types/grid';
+import {chain} from '@react-aria/utils';
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
+import {GridCollection, GridNode} from '@react-types/grid';
+import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {HTMLAttributes, RefObject} from 'react';
-import {Node} from '@react-types/shared';
-import {usePress} from '@react-aria/interactions';
-import {useSelectableItem} from '@react-aria/selection';
+import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
 
 export interface GridRowProps<T> {
   /** An object representing the grid row. Contains all the relevant information that makes up the grid row. */
-  node: Node<T>,
+  node: GridNode<T>,
   /** Whether the grid row is contained in a virtual scroller. */
   isVirtualized?: boolean,
   /** Whether selection should occur on press up instead of press down. */
-  shouldSelectOnPressUp?: boolean
+  shouldSelectOnPressUp?: boolean,
+  /**
+   * Handler that is called when a user performs an action on the row.
+   * Please use onCellAction at the collection level instead.
+   * @deprecated
+   **/
+  onAction?: () => void
 }
 
-export interface GridRowAria {
+export interface GridRowAria extends SelectableItemStates {
   /** Props for the grid row element. */
-  rowProps: HTMLAttributes<HTMLElement>
+  rowProps: DOMAttributes,
+  /** Whether the row is currently in a pressed state. */
+  isPressed: boolean
 }
 
 /**
@@ -36,31 +44,33 @@ export interface GridRowAria {
  * @param props - Props for the row.
  * @param state - State of the parent grid, as returned by `useGridState`.
  */
-export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T, C>>(props: GridRowProps<T>, state: S, ref: RefObject<HTMLElement>): GridRowAria {
+export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T, C>>(props: GridRowProps<T>, state: S, ref: RefObject<FocusableElement | null>): GridRowAria {
   let {
     node,
     isVirtualized,
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    onAction
   } = props;
 
-  let {itemProps} = useSelectableItem({
+  let {actions} = gridMap.get(state);
+  let onRowAction = actions.onRowAction ? () => actions.onRowAction(node.key) : onAction;
+  let {itemProps, ...states} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,
     ref,
     isVirtualized,
-    shouldSelectOnPressUp
+    shouldSelectOnPressUp,
+    onAction: onRowAction || node?.props?.onAction ? chain(node?.props?.onAction, onRowAction) : undefined,
+    isDisabled: state.collection.size === 0
   });
 
   let isSelected = state.selectionManager.isSelected(node.key);
-  let isDisabled = state.disabledKeys.has(node.key);
 
-  // TODO: move into useSelectableItem?
-  let {pressProps} = usePress({...itemProps, isDisabled});
-
-  let rowProps: HTMLAttributes<HTMLElement> = {
+  let rowProps: DOMAttributes = {
     role: 'row',
-    'aria-selected': isSelected,
-    ...pressProps
+    'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined,
+    'aria-disabled': states.isDisabled || undefined,
+    ...itemProps
   };
 
   if (isVirtualized) {
@@ -68,6 +78,7 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
   }
 
   return {
-    rowProps
+    rowProps,
+    ...states
   };
 }

package/src/useGridRowGroup.ts

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {HTMLAttributes} from 'react';
+import {DOMAttributes} from '@react-types/shared';
 
-interface GridRowGroupAria {
+export interface GridRowGroupAria {
   /** Props for the row group element. */
-  rowGroupProps: HTMLAttributes<HTMLElement>
+  rowGroupProps: DOMAttributes
 }
 
 /**

package/src/useGridSelectionAnnouncement.ts

@@ -0,0 +1,115 @@
+/*
+ * Copyright 2022 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 {announce} from '@react-aria/live-announcer';
+import {Collection, Key, Node, Selection} from '@react-types/shared';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {SelectionManager} from '@react-stately/selection';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useRef} from 'react';
+import {useUpdateEffect} from '@react-aria/utils';
+
+export interface GridSelectionAnnouncementProps {
+  /**
+   * A function that returns the text that should be announced by assistive technology when a row is added or removed from selection.
+   * @default (key) => state.collection.getItem(key)?.textValue
+   */
+  getRowText?: (key: Key) => string
+}
+
+interface GridSelectionState<T> {
+  /** A collection of items in the grid. */
+  collection: Collection<Node<T>>,
+  /** A set of items that are disabled. */
+  disabledKeys: Set<Key>,
+  /** A selection manager to read and update multiple selection state. */
+  selectionManager: SelectionManager
+}
+
+export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncementProps, state: GridSelectionState<T>) {
+  let {
+    getRowText = (key) => state.collection.getTextValue?.(key) ?? state.collection.getItem(key)?.textValue
+  } = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/grid');
+
+  // Many screen readers do not announce when items in a grid are selected/deselected.
+  // We do this using an ARIA live region.
+  let selection = state.selectionManager.rawSelection;
+  let lastSelection = useRef(selection);
+  useUpdateEffect(() => {
+    if (!state.selectionManager.isFocused) {
+      lastSelection.current = selection;
+
+      return;
+    }
+
+    let addedKeys = diffSelection(selection, lastSelection.current);
+    let removedKeys = diffSelection(lastSelection.current, selection);
+
+    // If adding or removing a single row from the selection, announce the name of that item.
+    let isReplace = state.selectionManager.selectionBehavior === 'replace';
+    let messages = [];
+
+    if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
+      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
+        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
+        if (currentSelectionText) {
+          messages.push(stringFormatter.format('selectedItem', {item: currentSelectionText}));
+        }
+      }
+    } else if (addedKeys.size === 1 && removedKeys.size === 0) {
+      let addedText = getRowText(addedKeys.keys().next().value);
+      if (addedText) {
+        messages.push(stringFormatter.format('selectedItem', {item: addedText}));
+      }
+    } else if (removedKeys.size === 1 && addedKeys.size === 0) {
+      if (state.collection.getItem(removedKeys.keys().next().value)) {
+        let removedText = getRowText(removedKeys.keys().next().value);
+        if (removedText) {
+          messages.push(stringFormatter.format('deselectedItem', {item: removedText}));
+        }
+      }
+    }
+
+    // Announce how many items are selected, except when selecting the first item.
+    if (state.selectionManager.selectionMode === 'multiple') {
+      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || lastSelection.current?.size > 1) {
+        messages.push(selection === 'all'
+          ? stringFormatter.format('selectedAll')
+          : stringFormatter.format('selectedCount', {count: selection.size})
+        );
+      }
+    }
+
+    if (messages.length > 0) {
+      announce(messages.join(' '));
+    }
+
+    lastSelection.current = selection;
+  }, [selection]);
+}
+
+function diffSelection(a: Selection, b: Selection): Set<Key> {
+  let res = new Set<Key>();
+  if (a === 'all' || b === 'all') {
+    return res;
+  }
+
+  for (let key of a.keys()) {
+    if (!b.has(key)) {
+      res.add(key);
+    }
+  }
+
+  return res;
+}

package/src/useGridSelectionCheckbox.ts

@@ -0,0 +1,48 @@
+import {AriaCheckboxProps} from '@react-types/checkbox';
+import {GridCollection} from '@react-types/grid';
+import {GridState} from '@react-stately/grid';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {Key} from '@react-types/shared';
+import {useId} from '@react-aria/utils';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+
+export interface AriaGridSelectionCheckboxProps {
+  /** A unique key for the checkbox. */
+  key: Key
+}
+
+export interface GridSelectionCheckboxAria {
+  /** Props for the row selection checkbox element. */
+  checkboxProps: AriaCheckboxProps
+}
+
+
+/**
+ * Provides the behavior and accessibility implementation for a selection checkbox in a grid.
+ * @param props - Props for the selection checkbox.
+ * @param state - State of the grid, as returned by `useGridState`.
+ */
+export function useGridSelectionCheckbox<T, C extends GridCollection<T>>(props: AriaGridSelectionCheckboxProps, state: GridState<T, C>): GridSelectionCheckboxAria {
+  let {key} = props;
+
+  let manager = state.selectionManager;
+  let checkboxId = useId();
+  let isDisabled = !state.selectionManager.canSelectItem(key);
+  let isSelected = state.selectionManager.isSelected(key);
+
+  // Checkbox should always toggle selection, regardless of selectionBehavior.
+  let onChange = () => manager.toggleSelection(key);
+
+  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/grid');
+
+  return {
+    checkboxProps: {
+      id: checkboxId,
+      'aria-label': stringFormatter.format('select'),
+      isSelected,
+      isDisabled,
+      onChange
+    }
+  };
+}

package/src/useHighlightSelectionDescription.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2021 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 {AriaLabelingProps} from '@react-types/shared';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {MultipleSelectionManager} from '@react-stately/selection';
+import {useDescription} from '@react-aria/utils';
+import {useInteractionModality} from '@react-aria/interactions';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useMemo} from 'react';
+
+export interface HighlightSelectionDescriptionProps {
+  selectionManager: MultipleSelectionManager,
+  hasItemActions?: boolean
+}
+
+/**
+ * Computes the description for a grid selectable collection.
+ * @param props
+ */
+export function useHighlightSelectionDescription(props: HighlightSelectionDescriptionProps): AriaLabelingProps {
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/grid');
+  let modality = useInteractionModality();
+  // null is the default if the user hasn't interacted with the table at all yet or the rest of the page
+  let shouldLongPress = (modality === 'pointer' || modality === 'virtual' || modality == null)
+    && typeof window !== 'undefined' && 'ontouchstart' in window;
+
+  let interactionDescription = useMemo(() => {
+    let selectionMode = props.selectionManager.selectionMode;
+    let selectionBehavior = props.selectionManager.selectionBehavior;
+
+    let message = undefined;
+    if (shouldLongPress) {
+      message = stringFormatter.format('longPressToSelect');
+    }
+
+    return selectionBehavior === 'replace' && selectionMode !== 'none' && props.hasItemActions ? message : undefined;
+  }, [props.selectionManager.selectionMode, props.selectionManager.selectionBehavior, props.hasItemActions, stringFormatter, shouldLongPress]);
+
+  let descriptionProps = useDescription(interactionDescription);
+  return descriptionProps;
+}

package/src/utils.ts

@@ -12,7 +12,17 @@
 
 import type {GridCollection} from '@react-types/grid';
 import type {GridState} from '@react-stately/grid';
-import type {KeyboardDelegate} from '@react-types/shared';
+import type {Key, KeyboardDelegate} from '@react-types/shared';
 
-// Used to share keyboard delegate between useGrid and useGridCell
-export const gridKeyboardDelegates = new WeakMap<GridState<unknown, GridCollection<unknown>>, KeyboardDelegate>();
+interface GridMapShared {
+  keyboardDelegate: KeyboardDelegate,
+  actions: {
+    onRowAction: (key: Key) => void,
+    onCellAction: (key: Key) => void
+  }
+}
+
+// Used to share:
+// keyboard delegate between useGrid and useGridCell
+// onRowAction/onCellAction across hooks
+export const gridMap = new WeakMap<GridState<unknown, GridCollection<unknown>>, GridMapShared>();