@react-aria/grid 3.8.9-nightly.4518 → 3.8.9-nightly.4528

package/src/GridKeyboardDelegate.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Direction, Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {Direction, DisabledBehavior, Key, KeyboardDelegate, Node} from '@react-types/shared';
 import {getChildNodes, getFirstItem, getLastItem, getNthItem} from '@react-stately/collections';
 import {GridCollection} from '@react-types/grid';
 import {Layout, Rect} from '@react-stately/virtualizer';
@@ -19,6 +19,7 @@ import {RefObject} from 'react';
 export interface GridKeyboardDelegateOptions<T, C> {
   collection: C,
   disabledKeys: Set<Key>,
+  disabledBehavior?: DisabledBehavior,
   ref?: RefObject<HTMLElement>,
   direction: Direction,
   collator?: Intl.Collator,
@@ -29,6 +30,7 @@ export interface GridKeyboardDelegateOptions<T, C> {
 export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements KeyboardDelegate {
   collection: C;
   protected disabledKeys: Set<Key>;
+  protected disabledBehavior: DisabledBehavior;
   protected ref: RefObject<HTMLElement>;
   protected direction: Direction;
   protected collator: Intl.Collator;
@@ -38,6 +40,7 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
   constructor(options: GridKeyboardDelegateOptions<T, C>) {
     this.collection = options.collection;
     this.disabledKeys = options.disabledKeys;
+    this.disabledBehavior = options.disabledBehavior || 'all';
     this.ref = options.ref;
     this.direction = options.direction;
     this.collator = options.collator;
@@ -53,6 +56,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     return node.type === 'row' || node.type === 'item';
   }
 
+  private isDisabled(item: Node<unknown>) {
+    return this.disabledBehavior === 'all' && (item.props?.isDisabled || this.disabledKeys.has(item.key));
+  }
+
   protected findPreviousKey(fromKey?: Key, pred?: (item: Node<T>) => boolean) {
     let key = fromKey != null
       ? this.collection.getKeyBefore(fromKey)
@@ -60,7 +67,7 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     while (key != null) {
       let item = this.collection.getItem(key);
-      if (!this.disabledKeys.has(key) && (!pred || pred(item))) {
+      if (!this.isDisabled(item) && (!pred || pred(item))) {
         return key;
       }
 
@@ -75,7 +82,7 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     while (key != null) {
       let item = this.collection.getItem(key);
-      if (!this.disabledKeys.has(key) && (!pred || pred(item))) {
+      if (!this.isDisabled(item) && (!pred || pred(item))) {
         return key;
       }
 

package/src/useGrid.ts

@@ -86,7 +86,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
   let disabledBehavior = state.selectionManager.disabledBehavior;
   let delegate = useMemo(() => keyboardDelegate || new GridKeyboardDelegate({
     collection: state.collection,
-    disabledKeys: disabledBehavior === 'selection' ? new Set() : state.disabledKeys,
+    disabledKeys: state.disabledKeys,
+    disabledBehavior,
     ref,
     direction,
     collator,

package/src/useGridCell.ts

@@ -124,9 +124,9 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           focusable = null;
         }
 
+        e.preventDefault();
+        e.stopPropagation();
         if (focusable) {
-          e.preventDefault();
-          e.stopPropagation();
           focusSafely(focusable);
           scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
         } else {
@@ -137,11 +137,15 @@ 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)});
@@ -167,19 +171,23 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           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)});

package/src/useGridRow.ts

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {chain} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {gridMap} from './utils';
@@ -52,14 +53,15 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
     onAction
   } = props;
 
-  let {actions: {onRowAction}} = gridMap.get(state);
+  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,
-    onAction: onRowAction ? () => onRowAction(node.key) : onAction,
+    onAction: onRowAction || node?.props?.onAction ? chain(node?.props?.onAction, onRowAction) : undefined,
     isDisabled: state.collection.size === 0
   });