@react-aria/table 3.10.1-nightly.4049 → 3.10.1-nightly.4053

package/dist/import.mjs

@@ -1,7 +1,7 @@
 import {useGridRowGroup as $lJcFS$useGridRowGroup, useGrid as $lJcFS$useGrid, GridKeyboardDelegate as $lJcFS$GridKeyboardDelegate, useGridCell as $lJcFS$useGridCell, useGridRow as $lJcFS$useGridRow, useGridSelectionCheckbox as $lJcFS$useGridSelectionCheckbox} from "@react-aria/grid";
 import {announce as $lJcFS$announce} from "@react-aria/live-announcer";
-import {useId as $lJcFS$useId, useDescription as $lJcFS$useDescription, useUpdateEffect as $lJcFS$useUpdateEffect, mergeProps as $lJcFS$mergeProps, isAndroid as $lJcFS$isAndroid, focusWithoutScrolling as $lJcFS$focusWithoutScrolling} from "@react-aria/utils";
-import {useMemo as $lJcFS$useMemo, useRef as $lJcFS$useRef, useCallback as $lJcFS$useCallback} from "react";
+import {useId as $lJcFS$useId, useDescription as $lJcFS$useDescription, useUpdateEffect as $lJcFS$useUpdateEffect, mergeProps as $lJcFS$mergeProps, isAndroid as $lJcFS$isAndroid, useEffectEvent as $lJcFS$useEffectEvent} from "@react-aria/utils";
+import {useMemo as $lJcFS$useMemo, useRef as $lJcFS$useRef, useCallback as $lJcFS$useCallback, useEffect as $lJcFS$useEffect} from "react";
 import {useCollator as $lJcFS$useCollator, useLocale as $lJcFS$useLocale, useLocalizedStringFormatter as $lJcFS$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {getFirstItem as $lJcFS$getFirstItem, getChildNodes as $lJcFS$getChildNodes, getNthItem as $lJcFS$getNthItem, getLastItem as $lJcFS$getLastItem} from "@react-stately/collections";
 import {useFocusable as $lJcFS$useFocusable, focusSafely as $lJcFS$focusSafely} from "@react-aria/focus";
@@ -1016,64 +1016,49 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
     let isResizing = state.resizingColumn === item.key;
     let isResizingRef = (0, $lJcFS$useRef)(isResizing);
     let lastSize = (0, $lJcFS$useRef)(null);
+    let wasFocusedOnResizeStart = (0, $lJcFS$useRef)(false);
     let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
     let { direction: direction  } = (0, $lJcFS$useLocale)();
     let { keyboardProps: keyboardProps  } = (0, $lJcFS$useKeyboard)({
         onKeyDown: (e)=>{
-            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);
-                    }
+                    endResize(item);
                 }
-            } else if (!resizeOnFocus) {
+            } else {
                 // 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);
-                }
+                if (e.key === "Enter") startResize(item);
             }
         }
     });
-    let startResize = (0, $lJcFS$useCallback)((item)=>{
+    let startResize = (0, $lJcFS$useEffectEvent)((item)=>{
         if (!isResizingRef.current) {
             lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
             state.startResize(item.key);
+            state.tableState.setKeyboardNavigationDisabled(true);
             onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(lastSize.current);
         }
         isResizingRef.current = true;
-    }, [
-        isResizingRef,
-        onResizeStart,
-        state
-    ]);
-    let resize = (0, $lJcFS$useCallback)((item, newWidth)=>{
+    });
+    let resize = (0, $lJcFS$useEffectEvent)((item, newWidth)=>{
         let sizes = state.updateResizedColumns(item.key, newWidth);
         onResize === null || onResize === void 0 ? void 0 : onResize(sizes);
         lastSize.current = sizes;
-    }, [
-        onResize,
-        state
-    ]);
-    let endResize = (0, $lJcFS$useCallback)((item)=>{
+    });
+    let endResize = (0, $lJcFS$useEffectEvent)((item)=>{
         if (isResizingRef.current) {
             if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
             state.endResize();
+            state.tableState.setKeyboardNavigationDisabled(false);
             onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(lastSize.current);
+            isResizingRef.current = false;
+            if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && !wasFocusedOnResizeStart.current) // switch focus back to the column header unless the resizer was already focused when resizing started.
+            (0, $lJcFS$focusSafely)(triggerRef.current);
         }
-        isResizingRef.current = false;
         lastSize.current = null;
-    }, [
-        isResizingRef,
-        onResizeEnd,
-        state
-    ]);
+    });
     const columnResizeWidthRef = (0, $lJcFS$useRef)(0);
     const { moveProps: moveProps  } = (0, $lJcFS$useMove)({
         onMoveStart () {
@@ -1094,10 +1079,9 @@ 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" || pointerType === "touch" && !resizeOnFocus) endResize(item);
+            if (pointerType === "mouse" || pointerType === "touch" && wasFocusedOnResizeStart.current) endResize(item);
         }
     });
     let onKeyDown = (0, $lJcFS$useCallback)((e)=>{
@@ -1128,10 +1112,29 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
         ...descriptionProps
     };
     const focusInput = (0, $lJcFS$useCallback)(()=>{
-        if (ref.current) (0, $lJcFS$focusWithoutScrolling)(ref.current);
+        if (ref.current) (0, $lJcFS$focusSafely)(ref.current);
     }, [
         ref
     ]);
+    let resizingColumn = state.resizingColumn;
+    let prevResizingColumn = (0, $lJcFS$useRef)(null);
+    (0, $lJcFS$useEffect)(()=>{
+        if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
+            wasFocusedOnResizeStart.current = document.activeElement === ref.current;
+            startResize(item);
+            focusInput();
+            // VoiceOver on iOS has problems focusing the input from a menu.
+            let timeout = setTimeout(focusInput, 400);
+            return ()=>clearTimeout(timeout);
+        }
+        prevResizingColumn.current = resizingColumn;
+    }, [
+        resizingColumn,
+        item,
+        focusInput,
+        ref,
+        startResize
+    ]);
     let onChange = (e)=>{
         let currentWidth = state.getColumnWidth(item.key);
         let nextValue = parseFloat(e.target.value);
@@ -1143,9 +1146,7 @@ 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 (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
@@ -1156,8 +1157,7 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
             if (e.pointerType !== "virtual") startResize(item);
         },
         onPress: (e)=>{
-            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
-            if ((e.pointerType === "touch" && !resizeOnFocus || e.pointerType === "mouse") && state.resizingColumn != null) endResize(item);
+            if ((e.pointerType === "touch" && wasFocusedOnResizeStart.current || e.pointerType === "mouse") && state.resizingColumn != null) endResize(item);
         }
     });
     let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $lJcFS$useVisuallyHidden)();
@@ -1165,21 +1165,15 @@ function $e91ef4e5004e3774$export$52994e973806c219(props, state, ref) {
         resizerProps: (0, $lJcFS$mergeProps)(keyboardProps, {
             ...moveProps,
             onKeyDown: onKeyDown
-        }, pressProps),
+        }, pressProps, {
+            style: {
+                touchAction: "none"
+            }
+        }),
         inputProps: (0, $lJcFS$mergeProps)(visuallyHiddenProps, {
             id: id,
-            onFocus: ()=>{
-                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);
-                state.tableState.setKeyboardNavigationDisabled(false);
             },
             onChange: onChange,
             disabled: isDisabled

package/dist/main.js

@@ -1029,64 +1029,49 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
     let isResizing = state.resizingColumn === item.key;
     let isResizingRef = (0, $kJQf8$react.useRef)(isResizing);
     let lastSize = (0, $kJQf8$react.useRef)(null);
+    let wasFocusedOnResizeStart = (0, $kJQf8$react.useRef)(false);
     let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
     let { direction: direction  } = (0, $kJQf8$reactariai18n.useLocale)();
     let { keyboardProps: keyboardProps  } = (0, $kJQf8$reactariainteractions.useKeyboard)({
         onKeyDown: (e)=>{
-            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);
-                    }
+                    endResize(item);
                 }
-            } else if (!resizeOnFocus) {
+            } else {
                 // 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);
-                }
+                if (e.key === "Enter") startResize(item);
             }
         }
     });
-    let startResize = (0, $kJQf8$react.useCallback)((item)=>{
+    let startResize = (0, $kJQf8$reactariautils.useEffectEvent)((item)=>{
         if (!isResizingRef.current) {
             lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
             state.startResize(item.key);
+            state.tableState.setKeyboardNavigationDisabled(true);
             onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(lastSize.current);
         }
         isResizingRef.current = true;
-    }, [
-        isResizingRef,
-        onResizeStart,
-        state
-    ]);
-    let resize = (0, $kJQf8$react.useCallback)((item, newWidth)=>{
+    });
+    let resize = (0, $kJQf8$reactariautils.useEffectEvent)((item, newWidth)=>{
         let sizes = state.updateResizedColumns(item.key, newWidth);
         onResize === null || onResize === void 0 ? void 0 : onResize(sizes);
         lastSize.current = sizes;
-    }, [
-        onResize,
-        state
-    ]);
-    let endResize = (0, $kJQf8$react.useCallback)((item)=>{
+    });
+    let endResize = (0, $kJQf8$reactariautils.useEffectEvent)((item)=>{
         if (isResizingRef.current) {
             if (lastSize.current == null) lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key));
             state.endResize();
+            state.tableState.setKeyboardNavigationDisabled(false);
             onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(lastSize.current);
+            isResizingRef.current = false;
+            if ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) && !wasFocusedOnResizeStart.current) // switch focus back to the column header unless the resizer was already focused when resizing started.
+            (0, $kJQf8$reactariafocus.focusSafely)(triggerRef.current);
         }
-        isResizingRef.current = false;
         lastSize.current = null;
-    }, [
-        isResizingRef,
-        onResizeEnd,
-        state
-    ]);
+    });
     const columnResizeWidthRef = (0, $kJQf8$react.useRef)(0);
     const { moveProps: moveProps  } = (0, $kJQf8$reactariainteractions.useMove)({
         onMoveStart () {
@@ -1107,10 +1092,9 @@ 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" || pointerType === "touch" && !resizeOnFocus) endResize(item);
+            if (pointerType === "mouse" || pointerType === "touch" && wasFocusedOnResizeStart.current) endResize(item);
         }
     });
     let onKeyDown = (0, $kJQf8$react.useCallback)((e)=>{
@@ -1141,10 +1125,29 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
         ...descriptionProps
     };
     const focusInput = (0, $kJQf8$react.useCallback)(()=>{
-        if (ref.current) (0, $kJQf8$reactariautils.focusWithoutScrolling)(ref.current);
+        if (ref.current) (0, $kJQf8$reactariafocus.focusSafely)(ref.current);
     }, [
         ref
     ]);
+    let resizingColumn = state.resizingColumn;
+    let prevResizingColumn = (0, $kJQf8$react.useRef)(null);
+    (0, $kJQf8$react.useEffect)(()=>{
+        if (prevResizingColumn.current !== resizingColumn && resizingColumn != null && resizingColumn === item.key) {
+            wasFocusedOnResizeStart.current = document.activeElement === ref.current;
+            startResize(item);
+            focusInput();
+            // VoiceOver on iOS has problems focusing the input from a menu.
+            let timeout = setTimeout(focusInput, 400);
+            return ()=>clearTimeout(timeout);
+        }
+        prevResizingColumn.current = resizingColumn;
+    }, [
+        resizingColumn,
+        item,
+        focusInput,
+        ref,
+        startResize
+    ]);
     let onChange = (e)=>{
         let currentWidth = state.getColumnWidth(item.key);
         let nextValue = parseFloat(e.target.value);
@@ -1156,9 +1159,7 @@ 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 (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
@@ -1169,8 +1170,7 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
             if (e.pointerType !== "virtual") startResize(item);
         },
         onPress: (e)=>{
-            let resizeOnFocus = !!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current);
-            if ((e.pointerType === "touch" && !resizeOnFocus || e.pointerType === "mouse") && state.resizingColumn != null) endResize(item);
+            if ((e.pointerType === "touch" && wasFocusedOnResizeStart.current || e.pointerType === "mouse") && state.resizingColumn != null) endResize(item);
         }
     });
     let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $kJQf8$reactariavisuallyhidden.useVisuallyHidden)();
@@ -1178,21 +1178,15 @@ function $16d645f9e2153641$export$52994e973806c219(props, state, ref) {
         resizerProps: (0, $kJQf8$reactariautils.mergeProps)(keyboardProps, {
             ...moveProps,
             onKeyDown: onKeyDown
-        }, pressProps),
+        }, pressProps, {
+            style: {
+                touchAction: "none"
+            }
+        }),
         inputProps: (0, $kJQf8$reactariautils.mergeProps)(visuallyHiddenProps, {
             id: id,
-            onFocus: ()=>{
-                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);
-                state.tableState.setKeyboardNavigationDisabled(false);
             },
             onChange: onChange,
             disabled: isDisabled