Remove need for onMove events (#3858)

* Remove need for onMove events

Author: snowystinger

packages/@react-aria/table/src/useTableColumnResize.ts

@@ -12,7 +12,7 @@
 
 import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react';
 import {ColumnSize} from '@react-types/table';
-import {DOMAttributes, MoveEndEvent, MoveMoveEvent} from '@react-types/shared';
+import {DOMAttributes} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
 import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils';
 import {getColumnHeaderId} from './utils';
@@ -40,13 +40,6 @@ export interface AriaTableColumnResizeProps<T> {
   triggerRef?: RefObject<HTMLDivElement>,
   /** If resizing is disabled. */
   isDisabled?: boolean,
-  /** If the resizer was moved. Different from onResize because it is always called. */
-  onMove?: (e: MoveMoveEvent) => void,
-  /**
-   * If the resizer was moved. Different from onResizeEnd because it is always called.
-   * It also carries the interaction details in the object.
-   * */
-  onMoveEnd?: (e: MoveEndEvent) => void,
   /** Called when resizing starts. */
   onResizeStart?: (widths: Map<Key, number | string>) => void,
   /** Called for every resize event that results in new column sizes. */
@@ -138,7 +131,6 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
         }
         deltaX *= 10;
       }
-      props.onMove?.(e);
       // if moving up/down only, no need to resize
       if (deltaX !== 0) {
         columnResizeWidthRef.current += deltaX;
@@ -148,7 +140,6 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
     onMoveEnd(e) {
       let {pointerType} = e;
       columnResizeWidthRef.current = 0;
-      props.onMoveEnd?.(e);
       if (pointerType === 'mouse') {
         endResize(item);
       }
@@ -186,8 +177,6 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
     } else {
       nextValue = currentWidth - 10;
     }
-    props.onMove({pointerType: 'virtual'} as MoveMoveEvent);
-    props.onMoveEnd({pointerType: 'virtual'} as MoveEndEvent);
     resize(item, nextValue);
   };
 

packages/@react-spectrum/table/src/Resizer.tsx

@@ -2,10 +2,11 @@
 import {classNames} from '@react-spectrum/utils';
 import {ColumnSize} from '@react-types/table';
 import {FocusRing} from '@react-aria/focus';
+import {getInteractionModality} from '@react-aria/interactions';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {MoveMoveEvent} from '@react-types/shared';
+import {mergeProps} from '@react-aria/utils';
 import React, {Key, RefObject} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -19,8 +20,7 @@ interface ResizerProps<T> {
   triggerRef: RefObject<HTMLDivElement>,
   onResizeStart: (widths: Map<Key, ColumnSize>) => void,
   onResize: (widths: Map<Key, ColumnSize>) => void,
-  onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
-  onMoveResizer: (e: MoveMoveEvent) => void
+  onResizeEnd: (widths: Map<Key, ColumnSize>) => void
 }
 
 function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
@@ -33,29 +33,30 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {direction} = useLocale();
 
-  let {inputProps, resizerProps} = useTableColumnResize<unknown>({
-    ...props,
-    label: stringFormatter.format('columnResizer'),
-    isDisabled: isEmpty,
-    onMove: (e) => {
-      document.body.classList.remove(classNames(styles, 'resize-ew'));
-      document.body.classList.remove(classNames(styles, 'resize-e'));
-      document.body.classList.remove(classNames(styles, 'resize-w'));
-      if (layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key)) {
-        document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e'));
-      } else if (layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key)) {
-        document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w'));
-      } else {
-        document.body.classList.add(classNames(styles, 'resize-ew'));
+  let {inputProps, resizerProps} = useTableColumnResize<unknown>(
+    mergeProps(props, {
+      label: stringFormatter.format('columnResizer'),
+      isDisabled: isEmpty,
+      onResize: () => {
+        document.body.classList.remove(classNames(styles, 'resize-ew'));
+        document.body.classList.remove(classNames(styles, 'resize-e'));
+        document.body.classList.remove(classNames(styles, 'resize-w'));
+        if (getInteractionModality() === 'pointer') {
+          if (layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key)) {
+            document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e'));
+          } else if (layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key)) {
+            document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w'));
+          } else {
+            document.body.classList.add(classNames(styles, 'resize-ew'));
+          }
+        }
+      },
+      onResizeEnd: () => {
+        document.body.classList.remove(classNames(styles, 'resize-ew'));
+        document.body.classList.remove(classNames(styles, 'resize-e'));
+        document.body.classList.remove(classNames(styles, 'resize-w'));
       }
-      props.onMoveResizer(e);
-    },
-    onMoveEnd: () => {
-      document.body.classList.remove(classNames(styles, 'resize-ew'));
-      document.body.classList.remove(classNames(styles, 'resize-e'));
-      document.body.classList.remove(classNames(styles, 'resize-w'));
-    }
-  }, state, layout, ref);
+    }), state, layout, ref);
 
   let style = {
     cursor: undefined,

packages/@react-spectrum/table/src/TableView.tsx

@@ -23,7 +23,7 @@ import {
   useUnwrapDOMRef
 } from '@react-spectrum/utils';
 import {ColumnSize, SpectrumColumnProps, SpectrumTableProps} from '@react-types/table';
-import {DOMRef, FocusableRef, MoveMoveEvent} from '@react-types/shared';
+import {DOMRef, FocusableRef} from '@react-types/shared';
 import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus';
 import {getInteractionModality, useHover, usePress} from '@react-aria/interactions';
 import {GridNode} from '@react-types/grid';
@@ -97,7 +97,6 @@ interface TableContextValue<T> {
   onResizeStart: (widths: Map<Key, ColumnSize>) => void,
   onResize: (widths: Map<Key, ColumnSize>) => void,
   onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
-  onMoveResizer: (e: MoveMoveEvent) => void,
   headerMenuOpen: boolean,
   setHeaderMenuOpen: (val: boolean) => void
 }
@@ -361,14 +360,6 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
     bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
   };
 
-  let lastResizeInteractionModality = useRef(undefined);
-  let onMoveResizer = (e) => {
-    if (e.pointerType === 'keyboard') {
-      lastResizeInteractionModality.current = e.pointerType;
-    } else {
-      lastResizeInteractionModality.current = undefined;
-    }
-  };
   let onResizeStart = useCallback((widths) => {
     setIsResizing(true);
     propsOnResizeStart?.(widths);
@@ -380,7 +371,7 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
   }, [propsOnResizeEnd, setIsInResizeMode, setIsResizing]);
 
   return (
-    <TableContext.Provider value={{state, layout, onResizeStart, onResize: props.onResize, onResizeEnd, headerRowHovered, isInResizeMode, setIsInResizeMode, isEmpty, onFocusedResizer, onMoveResizer, headerMenuOpen, setHeaderMenuOpen}}>
+    <TableContext.Provider value={{state, layout, onResizeStart, onResize: props.onResize, onResizeEnd, headerRowHovered, isInResizeMode, setIsInResizeMode, isEmpty, onFocusedResizer, headerMenuOpen, setHeaderMenuOpen}}>
       <TableVirtualizer
         {...mergeProps(gridProps, focusProps)}
         {...styleProps}
@@ -411,15 +402,14 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
         onVisibleRectChange={onVisibleRectChange}
         domRef={domRef}
         headerRef={headerRef}
-        lastResizeInteractionModality={lastResizeInteractionModality}
         bodyRef={bodyRef}
         isFocusVisible={isFocusVisible} />
     </TableContext.Provider>
   );
 }
 
 // This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
-function TableVirtualizer({layout, collection, lastResizeInteractionModality, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, ...otherProps}) {
+function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, ...otherProps}) {
   let {direction} = useLocale();
   let loadingState = collection.body.props.loadingState;
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
@@ -466,11 +456,11 @@ function TableVirtualizer({layout, collection, lastResizeInteractionModality, fo
   // only that it changes in a resize, and when that happens, we want to sync the body to the
   // header scroll position
   useEffect(() => {
-    if (lastResizeInteractionModality.current === 'keyboard' && headerRef.current.contains(document.activeElement)) {
+    if (getInteractionModality() === 'keyboard' && headerRef.current.contains(document.activeElement)) {
       document.activeElement?.scrollIntoView?.({block: 'nearest', inline: 'nearest'});
       bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
     }
-  }, [state.contentSize, headerRef, bodyRef, lastResizeInteractionModality]);
+  }, [state.contentSize, headerRef, bodyRef]);
 
   let headerHeight = layout.getLayoutInfo('header')?.rect.height || 0;
   let visibleRect = state.virtualizer.visibleRect;
@@ -662,7 +652,6 @@ function ResizableTableColumnHeader(props) {
     setIsInResizeMode,
     isEmpty,
     onFocusedResizer,
-    onMoveResizer,
     isInResizeMode,
     headerMenuOpen,
     setHeaderMenuOpen
@@ -807,8 +796,7 @@ function ResizableTableColumnHeader(props) {
           onResizeStart={onResizeStart}
           onResize={onResize}
           onResizeEnd={onResizeEnd}
-          triggerRef={useUnwrapDOMRef(triggerRef)}
-          onMoveResizer={onMoveResizer} />
+          triggerRef={useUnwrapDOMRef(triggerRef)} />
         <div
           aria-hidden
           className={classNames(