Add separate mode for triggering resizing manually via Enter

[LFDanLu]

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

RSP

[LFDanLu]

One problem with this approach: how to convey to the user the difference between the resizer having focus vs the resizer being "active"/movable via the arrow keys? At the moment there isn't a difference visually, not sure the best way to do so tbh since usually a slider is always "active"

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[snowystinger]

why is this needed?

[LFDanLu]

When editMode is disabled, I need the keyboard events for ArrowLeft/Right to bubble up to useSelectableCollection to handle moving from table header to table header. They get propagation stopped below if I don't special case it here somehow.

Handling it here also means I can also stop triggerKeyboardMove from being called (aka stopping resizing from handling on ArrowRight) but I could handle that in the onMove handlers provided to useMove

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[LFDanLu]

The changes made in this PR mean that onResizeStart/End aren't triggered unless a resize operation actually happens. Entering and leaving resize mode without changing the size doesn't cause those event to fire.

Open to opinions on this change. Note that If we want to preserve this behavior then we'll need a new prop like in a691280 so we can start resizing when the resizer is focused by some external action

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

@internationalized/date

parseDuration

-parseDuration {
-  value: string
-  returnVal: undefined
-}
+

---

@react-stately/layout

TableLayout

 TableLayout<T> {
   addVisibleLayoutInfos: (Array<LayoutInfo>, LayoutNode, Rect) => void
   binarySearch: (Array<LayoutNode>, Point, 'x' | 'y') => void
   buildBody: (number) => LayoutNode
   buildCell: (GridNode<T>, number, number) => LayoutNode
   buildCollection: () => Array<LayoutNode>
   buildColumn: (GridNode<T>, number, number) => LayoutNode
   buildHeader: () => LayoutNode
   buildHeaderRow: (GridNode<T>, number, number) => LayoutNode
   buildNode: (GridNode<T>, number, number) => LayoutNode
   buildPersistedIndices: () => void
   buildRow: (GridNode<T>, number, number) => LayoutNode
   collection: TableCollection<T>
   columnLayout: TableColumnLayout<T>
   columnWidths: Map<Key, number>
   constructor: (TableLayoutOptions<T>) => void
   controlledColumns: Map<Key, GridNode<unknown>>
-  endResize: () => void
   getColumnMaxWidth: (Key) => number
   getColumnMinWidth: (Key) => number
   getColumnWidth: (Key) => number
   getEstimatedHeight: (GridNode<T>, number, number, number) => void
   getInitialLayoutInfo: (LayoutInfo) => void
   getRenderedColumnWidth: (GridNode<T>) => void
   getResizerPosition: () => Key
   getVisibleLayoutInfos: (Rect) => void
   isLoading: any
   lastCollection: TableCollection<T>
   lastPersistedKeys: Set<Key>
+  onColumnResize: (Key, number) => Map<Key, ColumnSize>
+  onColumnResizeEnd: () => void
+  onColumnResizeStart: (Key) => void
   persistedIndices: Map<Key, Array<number>>
   resizingColumn: Key | null
   setChildHeights: (Array<LayoutNode>, number) => void
-  startResize: (Key) => void
   stickyColumnIndices: Array<number>
   uncontrolledColumns: Map<Key, GridNode<unknown>>
   uncontrolledWidths: Map<Key, ColumnSize>
-  updateResizedColumns: (Key, number) => Map<Key, ColumnSize>
   wasLoading: any
 }

---

@react-stately/table

TableColumnResizeState

 TableColumnResizeState<T> {
-  endResize: () => void
   getColumnMaxWidth: (Key) => number
   getColumnMinWidth: (Key) => number
   getColumnWidth: (Key) => number
+  onColumnResize: (Key, number) => Map<Key, ColumnSize>
+  onColumnResizeEnd: () => void
+  onColumnResizeStart: (Key) => void
   resizingColumn: Key | null
-  startResize: (Key) => void
   tableState: TableState<T>
-  updateResizedColumns: (Key, number) => Map<Key, ColumnSize>
   widths: Map<Key, number>
 }

it changed:

• useTableColumnResizeState

---

[LFDanLu]

Gonna merge this into the original aria table docs branch since we've decided on the path forward for the aria example. Will get rid of code changes once #4077 is finalized