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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/table",
-  "version": "3.10.1-nightly.4049+3aa6dbe3b",
+  "version": "3.10.1-nightly.4053+caab22120",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,39 +36,39 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-aria/focus": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-aria/grid": "3.8.1-nightly.4049+3aa6dbe3b",
-    "@react-aria/i18n": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-aria/interactions": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-aria/table": "3.10.1-nightly.4049+3aa6dbe3b",
-    "@react-aria/utils": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-aria/virtualizer": "3.9.1-nightly.4049+3aa6dbe3b",
-    "@react-aria/visually-hidden": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-spectrum/button": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-spectrum/checkbox": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-spectrum/dnd": "3.3.1-nightly.4049+3aa6dbe3b",
-    "@react-spectrum/layout": "3.5.4-nightly.4049+3aa6dbe3b",
-    "@react-spectrum/menu": "3.12.1-nightly.4049+3aa6dbe3b",
-    "@react-spectrum/progress": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-spectrum/tooltip": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-spectrum/utils": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-stately/collections": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-stately/flags": "3.0.0-nightly.4049+3aa6dbe3b",
-    "@react-stately/grid": "3.7.1-nightly.4049+3aa6dbe3b",
-    "@react-stately/layout": "3.12.3-nightly.4049+3aa6dbe3b",
-    "@react-stately/table": "3.10.1-nightly.4049+3aa6dbe3b",
-    "@react-stately/virtualizer": "3.6.1-nightly.4049+3aa6dbe3b",
-    "@react-types/grid": "3.1.9-nightly.4049+3aa6dbe3b",
-    "@react-types/shared": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-types/table": "3.7.1-nightly.4049+3aa6dbe3b",
-    "@spectrum-icons/ui": "3.0.0-nightly.2344+3aa6dbe3b",
+    "@react-aria/button": "3.0.0-nightly.2348+caab22120",
+    "@react-aria/focus": "3.0.0-nightly.2348+caab22120",
+    "@react-aria/grid": "3.8.1-nightly.4053+caab22120",
+    "@react-aria/i18n": "3.0.0-nightly.2348+caab22120",
+    "@react-aria/interactions": "3.0.0-nightly.2348+caab22120",
+    "@react-aria/table": "3.10.1-nightly.4053+caab22120",
+    "@react-aria/utils": "3.0.0-nightly.2348+caab22120",
+    "@react-aria/virtualizer": "3.9.1-nightly.4053+caab22120",
+    "@react-aria/visually-hidden": "3.0.0-nightly.2348+caab22120",
+    "@react-spectrum/button": "3.0.0-nightly.2348+caab22120",
+    "@react-spectrum/checkbox": "3.0.0-nightly.2348+caab22120",
+    "@react-spectrum/dnd": "3.3.1-nightly.4053+caab22120",
+    "@react-spectrum/layout": "3.5.4-nightly.4053+caab22120",
+    "@react-spectrum/menu": "3.12.1-nightly.4053+caab22120",
+    "@react-spectrum/progress": "3.0.0-nightly.2348+caab22120",
+    "@react-spectrum/tooltip": "3.0.0-nightly.2348+caab22120",
+    "@react-spectrum/utils": "3.0.0-nightly.2348+caab22120",
+    "@react-stately/collections": "3.0.0-nightly.2348+caab22120",
+    "@react-stately/flags": "3.0.0-nightly.4053+caab22120",
+    "@react-stately/grid": "3.7.1-nightly.4053+caab22120",
+    "@react-stately/layout": "3.12.3-nightly.4053+caab22120",
+    "@react-stately/table": "3.10.1-nightly.4053+caab22120",
+    "@react-stately/virtualizer": "3.6.1-nightly.4053+caab22120",
+    "@react-types/grid": "3.1.9-nightly.4053+caab22120",
+    "@react-types/shared": "3.0.0-nightly.2348+caab22120",
+    "@react-types/table": "3.7.1-nightly.4053+caab22120",
+    "@spectrum-icons/ui": "3.0.0-nightly.2348+caab22120",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2344+3aa6dbe3b",
-    "@react-aria/dnd": "3.3.1-nightly.4049+3aa6dbe3b",
-    "@react-stately/dnd": "3.2.3-nightly.4049+3aa6dbe3b"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2348+caab22120",
+    "@react-aria/dnd": "3.3.1-nightly.4053+caab22120",
+    "@react-stately/dnd": "3.2.3-nightly.4053+caab22120"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3aa6dbe3bdf1f5de94111a6e3153ace69540effa"
+  "gitHead": "caab22120fff9386db18898a0c226aaa6ba862a8"
 }

package/src/Resizer.tsx

@@ -47,7 +47,7 @@ const CURSORS = {
 
 function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let {column, showResizer} = props;
-  let {isEmpty, layout} = useTableContext();
+  let {isEmpty, layout, onFocusedResizer} = useTableContext();
   // Virtualizer re-renders, but these components are all cached
   // in order to get around that and cause a rerender here, we use context
   // but we don't actually need any value, they are available on the layout object
@@ -78,8 +78,7 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let {inputProps, resizerProps} = useTableColumnResize<unknown>(
     mergeProps(props, {
       'aria-label': stringFormatter.format('columnResizer'),
-      isDisabled: isEmpty,
-      shouldResizeOnFocus: true
+      isDisabled: isEmpty
     }), layout, ref);
 
   let isEResizable = layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key);
@@ -95,9 +94,9 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   }
 
   let style = {
+    ...resizerProps.style,
     height: '100%',
     display: showResizer ? undefined : 'none',
-    touchAction: 'none',
     cursor
   };
 
@@ -105,13 +104,13 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
     <>
       <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
         <div
+          {...resizerProps}
           role="presentation"
           style={style}
-          className={classNames(styles, 'spectrum-Table-columnResizer')}
-          {...resizerProps}>
+          className={classNames(styles, 'spectrum-Table-columnResizer')}>
           <input
             ref={ref}
-            {...inputProps} />
+            {...mergeProps(inputProps, {onFocus: onFocusedResizer})} />
         </div>
       </FocusRing>
       {/* Placeholder so that the title doesn't intersect with space reserved by the resizer when it appears. */}

package/src/TableViewBase.tsx

@@ -20,7 +20,6 @@ import {
   classNames,
   useDOMRef,
   useFocusableRef,
-  useIsMobileDevice,
   useStyleProps,
   useUnwrapDOMRef
 } from '@react-spectrum/utils';
@@ -823,7 +822,6 @@ function ResizableTableColumnHeader(props) {
     headerRowHovered,
     setIsInResizeMode,
     isEmpty,
-    onFocusedResizer,
     isInResizeMode,
     headerMenuOpen,
     setHeaderMenuOpen
@@ -877,39 +875,8 @@ function ResizableTableColumnHeader(props) {
     return options;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allowsSorting]);
-  let isMobile = useIsMobileDevice();
 
   let resizingColumn = layout.resizingColumn;
-  let prevResizingColumn = useRef(null);
-  let timeout = useRef(null);
-  useEffect(() => {
-    if (prevResizingColumn.current !== resizingColumn &&
-      resizingColumn != null &&
-      resizingColumn === column.key) {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-      // focusSafely won't actually focus because the focus moves from the menuitem to the body during the after transition wait
-      // without the immediate timeout, Android Chrome doesn't move focus to the resizer
-      let focusResizer = () => {
-        resizingRef.current.focus();
-        onFocusedResizer();
-        timeout.current = null;
-      };
-      if (isMobile) {
-        timeout.current = setTimeout(focusResizer, 400);
-        return;
-      }
-      timeout.current = setTimeout(focusResizer, 0);
-    }
-    prevResizingColumn.current = resizingColumn;
-  }, [resizingColumn, column.key, isMobile, onFocusedResizer, resizingRef, prevResizingColumn, timeout]);
-
-  // eslint-disable-next-line arrow-body-style
-  useEffect(() => {
-    return () => clearTimeout(timeout.current);
-  }, []);
-
   let showResizer = !isEmpty && ((headerRowHovered && getInteractionModality() !== 'keyboard') || resizingColumn != null);
   let alignment = 'start';
   let menuAlign = 'start' as 'start' | 'end';