Refactor column resizing for controlled state resizing (adobe#3672)

Controlled state column resizing. Use resizing state hook + TableLayout implementation. Fix aria values on resizer. Aria example.

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -41,7 +41,7 @@ svg.spectrum-Table-sortedIcon {
               color var(--spectrum-global-animation-duration-100) ease-in-out;
 }
 
-.spectrum-Table-menuChevron {
+.spectrum-Table-menuChevron.spectrum-Table-menuChevron {
   display: none;
   flex: 0 0 auto;
   margin-inline-start: var(--spectrum-table-header-sort-icon-gap);
@@ -51,10 +51,10 @@ svg.spectrum-Table-sortedIcon {
 }
 
 .spectrum-Table-headWrapper {
-  border-left-width: 1px;
-  border-left-style: solid;
-  border-right-width: 1px;
-  border-right-style: solid;
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-end-width: 1px;
+  border-inline-end-style: solid;
   flex: 0 0 auto;
   padding-bottom: 1px;
   margin-bottom: -1px;
@@ -472,6 +472,7 @@ svg.spectrum-Table-sortedIcon {
 }
 .spectrum-Table-colResizeNubbin {
   display: none;
+  pointer-events: none;
   position: absolute;
   /* svg top pixel is anti-aliased, this lets through the blue bar in the background, so we move the bar
    down one pixel and the nubbin circle up one pixel to cover it completely */

packages/@adobe/spectrum-css-temp/components/table/skin.css

@@ -15,8 +15,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Table-headWrapper {
-  border-left-color: transparent;
-  border-right-color: transparent;
+  border-inline-start-color: transparent;
+  border-inline-end-color: transparent;
 }
 
 .spectrum-Table-headCell {

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

@@ -23,15 +23,11 @@ import {useGridCell} from '@react-aria/grid';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {usePress} from '@react-aria/interactions';
 
-export interface AriaTableColumnHeaderProps {
+export interface AriaTableColumnHeaderProps<T> {
   /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */
-  node: GridNode<unknown>,
+  node: GridNode<T>,
   /** Whether the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) is contained in a virtual scroller. */
-  isVirtualized?: boolean,
-  /** Whether the column has a menu in the header, this changes interactions with the header.
-   * @private
-  */
-  hasMenu?: boolean
+  isVirtualized?: boolean
 }
 
 export interface TableColumnHeaderAria {
@@ -45,11 +41,11 @@ export interface TableColumnHeaderAria {
  * @param state - State of the table, as returned by `useTableState`.
  * @param ref - The ref attached to the column header element.
  */
-export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps, state: TableState<T>, ref: RefObject<FocusableElement>): TableColumnHeaderAria {
+export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps<T>, state: TableState<T>, ref: RefObject<FocusableElement>): TableColumnHeaderAria {
   let {node} = props;
   let allowsSorting = node.props.allowsSorting;
-  // the selection cell column header needs to focus the checkbox within it but the other columns should focus the cell so that focus doesn't land on the resizer
-  let {gridCellProps} = useGridCell({...props, focusMode: node.props.isSelectionCell || props.hasMenu || node.props.allowsSorting ? 'child' : 'cell'}, state, ref);
+  // if there are no focusable children, the column header will focus the cell
+  let {gridCellProps} = useGridCell({...props, focusMode: 'child'}, state, ref);
 
   let isSelectionCellDisabled = node.props.isSelectionCell && state.selectionManager.selectionMode === 'single';
 
@@ -64,10 +60,6 @@ export function useTableColumnHeader<T>(props: AriaTableColumnHeaderProps, state
   // Needed to pick up the focusable context, enabling things like Tooltips for example
   let {focusableProps} = useFocusable({}, ref);
 
-  if (props.hasMenu) {
-    pressProps = {};
-  }
-
   let ariaSort: DOMAttributes['aria-sort'] = null;
   let isSortedColumn = state.sortDescriptor?.column === node.key;
   let sortDirection = state.sortDescriptor?.direction;

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

@@ -10,15 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {ChangeEvent, RefObject, useCallback, useRef} from 'react';
+import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react';
+import {ColumnSize} from '@react-types/table';
 import {DOMAttributes, MoveEndEvent, MoveMoveEvent} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
 import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils';
 import {getColumnHeaderId} from './utils';
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {TableColumnResizeState, TableState} from '@react-stately/table';
+import {TableState} from '@react-stately/table';
 import {useKeyboard, useMove, usePress} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -28,37 +29,102 @@ export interface TableColumnResizeAria {
 }
 
 export interface AriaTableColumnResizeProps<T> {
+  /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */
   column: GridNode<T>,
+  /** Aria label for the hidden input. Gets read when resizing. */
   label: string,
-  triggerRef: RefObject<HTMLDivElement>,
+  /**
+   * 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.
+   * */
+  triggerRef?: RefObject<HTMLDivElement>,
+  /** If resizing is disabled. */
   isDisabled?: boolean,
-  onMove: (e: MoveMoveEvent) => void,
-  onMoveEnd: (e: MoveEndEvent) => void
+  /** 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: (key: Key) => void,
+  /** Called for every resize event that results in new column sizes. */
+  onResize: (widths: Map<Key, number | string>) => void,
+  /** Called when resizing ends. */
+  onResizeEnd: (key: Key) => void
 }
 
-export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableState<T>, columnState: TableColumnResizeState<T>, ref: RefObject<HTMLInputElement>): TableColumnResizeAria {
-  let {column: item, triggerRef, isDisabled} = props;
-  const stateRef = useRef<TableColumnResizeState<T>>(null);
-  stateRef.current = columnState;
+
+export interface TableLayoutState {
+  /** Get the current width of the specified column. */
+  getColumnWidth: (key: Key) => number,
+  /** Get the current min width of the specified column. */
+  getColumnMinWidth: (key: Key) => number,
+  /** Get the current max width of the specified column. */
+  getColumnMaxWidth: (key: Key) => number,
+  /** Get the currently resizing column. */
+  resizingColumn: Key,
+  /** Called to update the state that resizing has started. */
+  onColumnResizeStart: (key: Key) => void,
+  /**
+   * Called to update the state that a resize event has occurred.
+   * Returns the new widths for all columns based on the resized column.
+   **/
+  onColumnResize: (column: Key, width: number) => Map<Key, ColumnSize>,
+  /** Called to update the state that resizing has ended. */
+  onColumnResizeEnd: (key: Key) => void
+}
+
+export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, state: TableState<T>, layoutState: TableLayoutState, ref: RefObject<HTMLInputElement>): TableColumnResizeAria {
+  let {column: item, triggerRef, isDisabled, onResizeStart, onResize, onResizeEnd} = props;
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   let id = useId();
+  let isResizing = useRef(false);
+  let lastSize = useRef(null);
 
   let {direction} = useLocale();
   let {keyboardProps} = useKeyboard({
     onKeyDown: (e) => {
-      if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ' || e.key === 'Tab') {
+      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 startResize = useCallback((item) => {
+    if (!isResizing.current) {
+      layoutState.onColumnResizeStart(item.key);
+      onResizeStart?.(item.key);
+    }
+    isResizing.current = true;
+  }, [isResizing, onResizeStart, layoutState]);
+
+  let resize = useCallback((item, newWidth) => {
+    let sizes = layoutState.onColumnResize(item.key, newWidth);
+    onResize?.(sizes);
+    lastSize.current = sizes;
+  }, [onResize, layoutState]);
+
+  let endResize = useCallback((item) => {
+    if (lastSize.current == null) {
+      lastSize.current = layoutState.onColumnResize(item.key, layoutState.getColumnWidth(item.key));
+    }
+    if (isResizing.current) {
+      layoutState.onColumnResizeEnd(item.key);
+      onResizeEnd?.(lastSize.current);
+    }
+    isResizing.current = false;
+    lastSize.current = null;
+  }, [isResizing, onResizeEnd, layoutState]);
+
   const columnResizeWidthRef = useRef<number>(0);
   const {moveProps} = useMove({
     onMoveStart() {
-      columnResizeWidthRef.current = stateRef.current.getColumnWidth(item.key);
-      stateRef.current.onColumnResizeStart(item);
+      columnResizeWidthRef.current = layoutState.getColumnWidth(item.key);
+      startResize(item);
     },
     onMove(e) {
       let {deltaX, deltaY, pointerType} = e;
@@ -71,29 +137,29 @@ 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;
-        stateRef.current.onColumnResize(item, columnResizeWidthRef.current);
-        props.onMove(e);
+        resize(item, columnResizeWidthRef.current);
       }
     },
     onMoveEnd(e) {
       let {pointerType} = e;
       columnResizeWidthRef.current = 0;
-      props.onMoveEnd(e);
+      props.onMoveEnd?.(e);
       if (pointerType === 'mouse') {
-        stateRef.current.onColumnResizeEnd(item);
+        endResize(item);
       }
     }
   });
-  let min = Math.floor(stateRef.current.getColumnMinWidth(item.key));
-  let max = Math.floor(stateRef.current.getColumnMaxWidth(item.key));
+
+  let min = Math.floor(layoutState.getColumnMinWidth(item.key));
+  let max = Math.floor(layoutState.getColumnMaxWidth(item.key));
   if (max === Infinity) {
     max = Number.MAX_SAFE_INTEGER;
   }
-  let value = Math.floor(stateRef.current.getColumnWidth(item.key));
-
+  let value = Math.floor(layoutState.getColumnWidth(item.key));
   let ariaProps = {
     'aria-label': props.label,
     'aria-orientation': 'horizontal' as 'horizontal',
@@ -111,25 +177,29 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
   }, [ref]);
 
   let onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    let currentWidth = stateRef.current.getColumnWidth(item.key);
+    let currentWidth = layoutState.getColumnWidth(item.key);
     let nextValue = parseFloat(e.target.value);
 
     if (nextValue > currentWidth) {
       nextValue = currentWidth + 10;
     } else {
       nextValue = currentWidth - 10;
     }
-    stateRef.current.onColumnResize(item, nextValue);
+    props.onMove({pointerType: 'virtual'} as MoveMoveEvent);
+    props.onMoveEnd({pointerType: 'virtual'} as MoveEndEvent);
+    resize(item, nextValue);
   };
 
   let {pressProps} = usePress({
     onPressStart: (e) => {
       if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey || e.pointerType === 'keyboard') {
         return;
       }
-      if (e.pointerType === 'virtual' && columnState.currentlyResizingColumn != null) {
-        stateRef.current.onColumnResizeEnd(item);
-        focusSafely(triggerRef.current);
+      if (e.pointerType === 'virtual' && layoutState.resizingColumn != null) {
+        endResize(item);
+        if (triggerRef?.current) {
+          focusSafely(triggerRef.current);
+        }
         return;
       }
       focusInput();
@@ -138,7 +208,9 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
       if (e.pointerType === 'touch') {
         focusInput();
       } else if (e.pointerType !== 'virtual') {
-        focusSafely(triggerRef.current);
+        if (triggerRef?.current) {
+          focusSafely(triggerRef.current);
+        }
       }
     }
   });
@@ -155,11 +227,11 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
         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
-          stateRef.current.onColumnResizeStart(item);
+          startResize(item);
           state.setKeyboardNavigationDisabled(true);
         },
         onBlur: () => {
-          stateRef.current.onColumnResizeEnd(item);
+          endResize(item);
           state.setKeyboardNavigationDisabled(false);
         },
         onChange,