@react-aria/grid 3.6.2-nightly.3749 → 3.6.2-nightly.3757

package/dist/import.mjs

@@ -1,7 +1,7 @@
 import {getNthItem as $cVkRF$getNthItem, getChildNodes as $cVkRF$getChildNodes, getLastItem as $cVkRF$getLastItem, getFirstItem as $cVkRF$getFirstItem} from "@react-stately/collections";
 import {Rect as $cVkRF$Rect} from "@react-stately/virtualizer";
 import {useId as $cVkRF$useId, filterDOMProps as $cVkRF$filterDOMProps, mergeProps as $cVkRF$mergeProps, useUpdateEffect as $cVkRF$useUpdateEffect, useDescription as $cVkRF$useDescription, scrollIntoViewport as $cVkRF$scrollIntoViewport, getScrollParent as $cVkRF$getScrollParent} from "@react-aria/utils";
-import {useMemo as $cVkRF$useMemo, useRef as $cVkRF$useRef} from "react";
+import {useMemo as $cVkRF$useMemo, useCallback as $cVkRF$useCallback, useRef as $cVkRF$useRef} from "react";
 import {useCollator as $cVkRF$useCollator, useLocale as $cVkRF$useLocale, useLocalizedStringFormatter as $cVkRF$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useSelectableCollection as $cVkRF$useSelectableCollection, useSelectableItem as $cVkRF$useSelectableItem} from "@react-aria/selection";
 import {announce as $cVkRF$announce} from "@react-aria/live-announcer";
@@ -950,6 +950,7 @@ function $5b9b5b5723db6ae1$export$be42ebdab07ae4c2(props) {
 
 function $83c6e2eafa584c67$export$f6b86a04e5d66d90(props, state, ref) {
     let { isVirtualized: isVirtualized , keyboardDelegate: keyboardDelegate , focusMode: focusMode , scrollRef: scrollRef , getRowText: getRowText , onRowAction: onRowAction , onCellAction: onCellAction  } = props;
+    let { selectionManager: manager  } = state;
     if (!props["aria-label"] && !props["aria-labelledby"]) console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
     // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
     // When virtualized, the layout object will be passed in as a prop and override this.
@@ -978,7 +979,7 @@ function $83c6e2eafa584c67$export$f6b86a04e5d66d90(props, state, ref) {
     ]);
     let { collectionProps: collectionProps  } = (0, $cVkRF$useSelectableCollection)({
         ref: ref,
-        selectionManager: state.selectionManager,
+        selectionManager: manager,
         keyboardDelegate: delegate,
         isVirtualized: isVirtualized,
         scrollRef: scrollRef
@@ -992,17 +993,37 @@ function $83c6e2eafa584c67$export$f6b86a04e5d66d90(props, state, ref) {
         }
     });
     let descriptionProps = (0, $5b9b5b5723db6ae1$export$be42ebdab07ae4c2)({
-        selectionManager: state.selectionManager,
+        selectionManager: manager,
         hasItemActions: !!(onRowAction || onCellAction)
     });
     let domProps = (0, $cVkRF$filterDOMProps)(props, {
         labelable: true
     });
+    let onFocus = (0, $cVkRF$useCallback)((e)=>{
+        if (manager.isFocused) {
+            // If a focus event bubbled through a portal, reset focus state.
+            if (!e.currentTarget.contains(e.target)) manager.setFocused(false);
+            return;
+        }
+        // Focus events can bubble through portals. Ignore these events.
+        if (!e.currentTarget.contains(e.target)) return;
+        manager.setFocused(true);
+    }, [
+        manager
+    ]);
+    // Continue to track collection focused state even if keyboard navigation is disabled
+    let navDisabledHandlers = (0, $cVkRF$useMemo)(()=>({
+            onBlur: collectionProps.onBlur,
+            onFocus: onFocus
+        }), [
+        onFocus,
+        collectionProps.onBlur
+    ]);
     let gridProps = (0, $cVkRF$mergeProps)(domProps, {
         role: "grid",
         id: id,
-        "aria-multiselectable": state.selectionManager.selectionMode === "multiple" ? "true" : undefined
-    }, state.isKeyboardNavigationDisabled ? {} : collectionProps, descriptionProps);
+        "aria-multiselectable": manager.selectionMode === "multiple" ? "true" : undefined
+    }, state.isKeyboardNavigationDisabled ? navDisabledHandlers : collectionProps, descriptionProps);
     if (isVirtualized) {
         gridProps["aria-rowcount"] = state.collection.size;
         gridProps["aria-colcount"] = state.collection.columnCount;
@@ -1238,6 +1259,18 @@ function $ab90dcbc1b5466d0$export$c7e10bfc0c59f67c(props, state, ref) {
     });
     var _node_colIndex;
     if (isVirtualized) gridCellProps["aria-colindex"] = ((_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _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: isPressed

package/dist/main.js

@@ -962,6 +962,7 @@ function $340f2fcd0ef9ce8d$export$be42ebdab07ae4c2(props) {
 
 function $11d770dfabe45077$export$f6b86a04e5d66d90(props, state, ref) {
     let { isVirtualized: isVirtualized , keyboardDelegate: keyboardDelegate , focusMode: focusMode , scrollRef: scrollRef , getRowText: getRowText , onRowAction: onRowAction , onCellAction: onCellAction  } = props;
+    let { selectionManager: manager  } = state;
     if (!props["aria-label"] && !props["aria-labelledby"]) console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
     // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
     // When virtualized, the layout object will be passed in as a prop and override this.
@@ -990,7 +991,7 @@ function $11d770dfabe45077$export$f6b86a04e5d66d90(props, state, ref) {
     ]);
     let { collectionProps: collectionProps  } = (0, $2oePb$reactariaselection.useSelectableCollection)({
         ref: ref,
-        selectionManager: state.selectionManager,
+        selectionManager: manager,
         keyboardDelegate: delegate,
         isVirtualized: isVirtualized,
         scrollRef: scrollRef
@@ -1004,17 +1005,37 @@ function $11d770dfabe45077$export$f6b86a04e5d66d90(props, state, ref) {
         }
     });
     let descriptionProps = (0, $340f2fcd0ef9ce8d$export$be42ebdab07ae4c2)({
-        selectionManager: state.selectionManager,
+        selectionManager: manager,
         hasItemActions: !!(onRowAction || onCellAction)
     });
     let domProps = (0, $2oePb$reactariautils.filterDOMProps)(props, {
         labelable: true
     });
+    let onFocus = (0, $2oePb$react.useCallback)((e)=>{
+        if (manager.isFocused) {
+            // If a focus event bubbled through a portal, reset focus state.
+            if (!e.currentTarget.contains(e.target)) manager.setFocused(false);
+            return;
+        }
+        // Focus events can bubble through portals. Ignore these events.
+        if (!e.currentTarget.contains(e.target)) return;
+        manager.setFocused(true);
+    }, [
+        manager
+    ]);
+    // Continue to track collection focused state even if keyboard navigation is disabled
+    let navDisabledHandlers = (0, $2oePb$react.useMemo)(()=>({
+            onBlur: collectionProps.onBlur,
+            onFocus: onFocus
+        }), [
+        onFocus,
+        collectionProps.onBlur
+    ]);
     let gridProps = (0, $2oePb$reactariautils.mergeProps)(domProps, {
         role: "grid",
         id: id,
-        "aria-multiselectable": state.selectionManager.selectionMode === "multiple" ? "true" : undefined
-    }, state.isKeyboardNavigationDisabled ? {} : collectionProps, descriptionProps);
+        "aria-multiselectable": manager.selectionMode === "multiple" ? "true" : undefined
+    }, state.isKeyboardNavigationDisabled ? navDisabledHandlers : collectionProps, descriptionProps);
     if (isVirtualized) {
         gridProps["aria-rowcount"] = state.collection.size;
         gridProps["aria-colcount"] = state.collection.columnCount;
@@ -1250,6 +1271,18 @@ function $cf2021be63b01ef4$export$c7e10bfc0c59f67c(props, state, ref) {
     });
     var _node_colIndex;
     if (isVirtualized) gridCellProps["aria-colindex"] = ((_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _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: isPressed