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

package/src/useTableColumnResize.ts

@@ -13,13 +13,13 @@
 import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react';
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
-import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {getColumnHeaderId} from './utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {TableColumnResizeState} from '@react-stately/table';
-import {useKeyboard, useMove, usePress} from '@react-aria/interactions';
+import {useInteractionModality, useKeyboard, useMove, usePress} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface TableColumnResizeAria {
@@ -36,7 +36,8 @@ export interface AriaTableColumnResizeProps<T> {
   label: string,
   /**
    * Ref to the trigger if resizing was started from a column header menu. If it's provided,
-   * focus will be returned there when resizing is done.
+   * focus will be returned there when resizing is done. If it isn't provided, it is assumed that the resizer is
+   * visible at all time and keyboard resizing is started via pressing Enter on the resizer and not on focus.
    * */
   triggerRef?: RefObject<FocusableElement>,
   /** If resizing is disabled. */
@@ -63,14 +64,31 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   let id = useId();
   let isResizing = useRef(false);
   let lastSize = useRef(null);
+  let editModeEnabled = state.tableState.isKeyboardNavigationDisabled;
 
   let {direction} = useLocale();
   let {keyboardProps} = useKeyboard({
     onKeyDown: (e) => {
-      if (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
-        focusSafely(triggerRef.current);
+      let resizeOnFocus = !!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
+            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);
+        }
       }
     }
   });
@@ -91,10 +109,11 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   }, [onResize, state]);
 
   let endResize = 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?.(lastSize.current);
     }
@@ -126,20 +145,31 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
       }
     },
     onMoveEnd(e) {
+      let resizeOnFocus = !!triggerRef?.current;
       let {pointerType} = e;
       columnResizeWidthRef.current = 0;
-      if (pointerType === 'mouse') {
+      if (pointerType === 'mouse' || (pointerType === 'touch' && !resizeOnFocus)) {
         endResize(item);
       }
     }
   });
 
+  let onKeyDown = 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 = useInteractionModality();
+  let description = triggerRef?.current == null && (modality === 'keyboard' || modality === 'virtual') && !isResizing.current ? stringFormatter.format('resizerDescription') : undefined;
+  let descriptionProps = useDescription(description);
   let ariaProps = {
     'aria-label': props.label,
     'aria-orientation': 'horizontal' as 'horizontal',
@@ -148,7 +178,8 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
     'type': 'range',
     min,
     max,
-    value
+    value,
+    ...descriptionProps
   };
 
   const focusInput = useCallback(() => {
@@ -175,21 +206,28 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
         return;
       }
       if (e.pointerType === 'virtual' && state.resizingColumn != null) {
+        let resizeOnFocus = !!triggerRef?.current;
         endResize(item);
-        if (triggerRef?.current) {
+        if (resizeOnFocus) {
           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?.current) {
-          focusSafely(triggerRef.current);
-        }
+      let resizeOnFocus = !!triggerRef?.current;
+      if (((e.pointerType === 'touch' && !resizeOnFocus) || e.pointerType === 'mouse') && state.resizingColumn != null) {
+        endResize(item);
       }
     }
   });
@@ -197,17 +235,24 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   return {
     resizerProps: mergeProps(
       keyboardProps,
-      moveProps,
+      {...moveProps, onKeyDown},
       pressProps
     ),
     inputProps: mergeProps(
       {
         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?.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);