@react-aria/table 3.8.2-nightly.3749 → 3.8.2-nightly.3757

package/dist/import.mjs

@@ -5,7 +5,7 @@ import {useId as $lJcFS$useId, useDescription as $lJcFS$useDescription, useUpdat
 import {useMemo as $lJcFS$useMemo, useRef as $lJcFS$useRef, useCallback as $lJcFS$useCallback} from "react";
 import {useCollator as $lJcFS$useCollator, useLocale as $lJcFS$useLocale, useLocalizedStringFormatter as $lJcFS$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useFocusable as $lJcFS$useFocusable, focusSafely as $lJcFS$focusSafely} from "@react-aria/focus";
-import {usePress as $lJcFS$usePress, useKeyboard as $lJcFS$useKeyboard, useMove as $lJcFS$useMove} from "@react-aria/interactions";
+import {usePress as $lJcFS$usePress, useKeyboard as $lJcFS$useKeyboard, useMove as $lJcFS$useMove, useInteractionModality as $lJcFS$useInteractionModality} from "@react-aria/interactions";
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -154,7 +154,8 @@ $09e6b82e0d6e466a$exports = {
     "descending": `descending`,
     "ascendingSort": (args)=>`sorted by column ${args.columnName} in ascending order`,
     "descendingSort": (args)=>`sorted by column ${args.columnName} in descending order`,
-    "columnSize": (args)=>`${args.value} pixels`
+    "columnSize": (args)=>`${args.value} pixels`,
+    "resizerDescription": `Press Enter to start resizing`
 };
 
 
@@ -961,13 +962,28 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
     let id = (0, $lJcFS$useId)();
     let isResizing = (0, $lJcFS$useRef)(false);
     let lastSize = (0, $lJcFS$useRef)(null);
+    let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
     let { direction: direction  } = (0, $lJcFS$useLocale)();
     let { keyboardProps: keyboardProps  } = (0, $lJcFS$useKeyboard)({
         onKeyDown: (e)=>{
-            if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && (e.key === "Escape" || e.key === "Enter" || e.key === " " || e.key === "Tab")) {
-                e.preventDefault();
-                // switch focus back to the column header on anything that ends edit mode
-                (0, $lJcFS$focusSafely)(triggerRef.current);
+            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+            if (editModeEnabled) {
+                if (e.key === "Escape" || e.key === "Enter" || e.key === " " || e.key === "Tab") {
+                    e.preventDefault();
+                    if (resizeOnFocus) // switch focus back to the column header on anything that ends edit mode
+                    (0, $lJcFS$focusSafely)(triggerRef.current);
+                    else {
+                        endResize(item);
+                        state.tableState.setKeyboardNavigationDisabled(false);
+                    }
+                }
+            } else if (!resizeOnFocus) {
+                // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
+                e.continuePropagation();
+                if (e.key === "Enter") {
+                    startResize(item);
+                    state.tableState.setKeyboardNavigationDisabled(true);
+                }
             }
         }
     });
@@ -992,8 +1008,8 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
         state
     ]);
     let endResize = (0, $lJcFS$useCallback)((item)=>{
-        if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
         if (isResizing.current) {
+            if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
             state.endResize();
             onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(lastSize.current);
         }
@@ -1024,15 +1040,25 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
             }
         },
         onMoveEnd (e) {
+            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
             let { pointerType: pointerType  } = e;
             columnResizeWidthRef.current = 0;
-            if (pointerType === "mouse") endResize(item);
+            if (pointerType === "mouse" || pointerType === "touch" && !resizeOnFocus) endResize(item);
         }
     });
+    let onKeyDown = (0, $lJcFS$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 = (0, $lJcFS$useInteractionModality)();
+    let description = (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) == null && (modality === "keyboard" || modality === "virtual") && !isResizing.current ? stringFormatter.format("resizerDescription") : undefined;
+    let descriptionProps = (0, $lJcFS$useDescription)(description);
     let ariaProps = {
         "aria-label": props.label,
         "aria-orientation": "horizontal",
@@ -1043,7 +1069,8 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
         "type": "range",
         min: min,
         max: max,
-        value: value
+        value: value,
+        ...descriptionProps
     };
     const focusInput = (0, $lJcFS$useCallback)(()=>{
         if (ref.current) (0, $lJcFS$focusWithoutScrolling)(ref.current);
@@ -1061,28 +1088,42 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
         onPressStart: (e)=>{
             if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === "keyboard") return;
             if (e.pointerType === "virtual" && state.resizingColumn != null) {
+                let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
                 endResize(item);
-                if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) (0, $lJcFS$focusSafely)(triggerRef.current);
+                if (resizeOnFocus) (0, $lJcFS$focusSafely)(triggerRef.current);
                 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") focusInput();
-            else if (e.pointerType !== "virtual") {
-                if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) (0, $lJcFS$focusSafely)(triggerRef.current);
-            }
+            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+            if ((e.pointerType === "touch" && !resizeOnFocus || e.pointerType === "mouse") && state.resizingColumn != null) endResize(item);
         }
     });
     return {
-        resizerProps: (0, $lJcFS$mergeProps)(keyboardProps, moveProps, pressProps),
+        resizerProps: (0, $lJcFS$mergeProps)(keyboardProps, {
+            ...moveProps,
+            onKeyDown: onKeyDown
+        }, pressProps),
         inputProps: (0, $lJcFS$mergeProps)({
             id: id,
+            // Override browser default margin. Without this, scrollIntoViewport will think we need to scroll the input into view
+            style: {
+                margin: "0px"
+            },
             onFocus: ()=>{
-                // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
-                // call instead during focus and blur
-                startResize(item);
-                state.tableState.setKeyboardNavigationDisabled(true);
+                let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+                if (resizeOnFocus) {
+                    // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
+                    // call instead during focus and blur
+                    startResize(item);
+                    state.tableState.setKeyboardNavigationDisabled(true);
+                }
             },
             onBlur: ()=>{
                 endResize(item);

package/dist/main.js

@@ -167,7 +167,8 @@ $8629e38d73986227$exports = {
     "descending": `descending`,
     "ascendingSort": (args)=>`sorted by column ${args.columnName} in ascending order`,
     "descendingSort": (args)=>`sorted by column ${args.columnName} in descending order`,
-    "columnSize": (args)=>`${args.value} pixels`
+    "columnSize": (args)=>`${args.value} pixels`,
+    "resizerDescription": `Press Enter to start resizing`
 };
 
 
@@ -974,13 +975,28 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
     let id = (0, $kJQf8$reactariautils.useId)();
     let isResizing = (0, $kJQf8$react.useRef)(false);
     let lastSize = (0, $kJQf8$react.useRef)(null);
+    let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
     let { direction: direction  } = (0, $kJQf8$reactariai18n.useLocale)();
     let { keyboardProps: keyboardProps  } = (0, $kJQf8$reactariainteractions.useKeyboard)({
         onKeyDown: (e)=>{
-            if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && (e.key === "Escape" || e.key === "Enter" || e.key === " " || e.key === "Tab")) {
-                e.preventDefault();
-                // switch focus back to the column header on anything that ends edit mode
-                (0, $kJQf8$reactariafocus.focusSafely)(triggerRef.current);
+            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+            if (editModeEnabled) {
+                if (e.key === "Escape" || e.key === "Enter" || e.key === " " || e.key === "Tab") {
+                    e.preventDefault();
+                    if (resizeOnFocus) // switch focus back to the column header on anything that ends edit mode
+                    (0, $kJQf8$reactariafocus.focusSafely)(triggerRef.current);
+                    else {
+                        endResize(item);
+                        state.tableState.setKeyboardNavigationDisabled(false);
+                    }
+                }
+            } else if (!resizeOnFocus) {
+                // Continue propagation on keydown events so they still bubbles to useSelectableCollection and are handled there
+                e.continuePropagation();
+                if (e.key === "Enter") {
+                    startResize(item);
+                    state.tableState.setKeyboardNavigationDisabled(true);
+                }
             }
         }
     });
@@ -1005,8 +1021,8 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
         state
     ]);
     let endResize = (0, $kJQf8$react.useCallback)((item)=>{
-        if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
         if (isResizing.current) {
+            if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
             state.endResize();
             onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(lastSize.current);
         }
@@ -1037,15 +1053,25 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
             }
         },
         onMoveEnd (e) {
+            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
             let { pointerType: pointerType  } = e;
             columnResizeWidthRef.current = 0;
-            if (pointerType === "mouse") endResize(item);
+            if (pointerType === "mouse" || pointerType === "touch" && !resizeOnFocus) endResize(item);
         }
     });
+    let onKeyDown = (0, $kJQf8$react.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 = (0, $kJQf8$reactariainteractions.useInteractionModality)();
+    let description = (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) == null && (modality === "keyboard" || modality === "virtual") && !isResizing.current ? stringFormatter.format("resizerDescription") : undefined;
+    let descriptionProps = (0, $kJQf8$reactariautils.useDescription)(description);
     let ariaProps = {
         "aria-label": props.label,
         "aria-orientation": "horizontal",
@@ -1056,7 +1082,8 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
         "type": "range",
         min: min,
         max: max,
-        value: value
+        value: value,
+        ...descriptionProps
     };
     const focusInput = (0, $kJQf8$react.useCallback)(()=>{
         if (ref.current) (0, $kJQf8$reactariautils.focusWithoutScrolling)(ref.current);
@@ -1074,28 +1101,42 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
         onPressStart: (e)=>{
             if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === "keyboard") return;
             if (e.pointerType === "virtual" && state.resizingColumn != null) {
+                let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
                 endResize(item);
-                if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) (0, $kJQf8$reactariafocus.focusSafely)(triggerRef.current);
+                if (resizeOnFocus) (0, $kJQf8$reactariafocus.focusSafely)(triggerRef.current);
                 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") focusInput();
-            else if (e.pointerType !== "virtual") {
-                if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) (0, $kJQf8$reactariafocus.focusSafely)(triggerRef.current);
-            }
+            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+            if ((e.pointerType === "touch" && !resizeOnFocus || e.pointerType === "mouse") && state.resizingColumn != null) endResize(item);
         }
     });
     return {
-        resizerProps: (0, $kJQf8$reactariautils.mergeProps)(keyboardProps, moveProps, pressProps),
+        resizerProps: (0, $kJQf8$reactariautils.mergeProps)(keyboardProps, {
+            ...moveProps,
+            onKeyDown: onKeyDown
+        }, pressProps),
         inputProps: (0, $kJQf8$reactariautils.mergeProps)({
             id: id,
+            // Override browser default margin. Without this, scrollIntoViewport will think we need to scroll the input into view
+            style: {
+                margin: "0px"
+            },
             onFocus: ()=>{
-                // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
-                // call instead during focus and blur
-                startResize(item);
-                state.tableState.setKeyboardNavigationDisabled(true);
+                let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
+                if (resizeOnFocus) {
+                    // useMove calls onMoveStart for every keypress, but we want resize start to only be called when we start resize mode
+                    // call instead during focus and blur
+                    startResize(item);
+                    state.tableState.setKeyboardNavigationDisabled(true);
+                }
             },
             onBlur: ()=>{
                 endResize(item);