diff --git a/packages/@react-aria/table/stories/example-resizing.tsx b/packages/@react-aria/table/stories/example-resizing.tsx index 3c84031676b..15318265baf 100644 --- a/packages/@react-aria/table/stories/example-resizing.tsx +++ b/packages/@react-aria/table/stories/example-resizing.tsx @@ -26,7 +26,7 @@ import { import {classNames} from '@react-spectrum/utils'; import {FocusRing, useFocusRing} from '@react-aria/focus'; import {mergeProps, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; -import React, {useCallback, useState} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useCheckbox} from '@react-aria/checkbox'; import {useRef} from 'react'; @@ -69,6 +69,7 @@ export function Table(props) { state, ref ); + let layout = useMemo(() => ({...layoutState, tableState: state}), [layoutState, state]); useLayoutEffect(() => { if (bodyRef && bodyRef.current) { @@ -85,7 +86,7 @@ export function Table(props) { {[...headerRow.childNodes].map(column => column.props.isSelectionCell ? - : + : )} ))} @@ -125,16 +126,15 @@ export function TableHeaderRow({item, state, children, className}) { ); } -function Resizer({column, state, layoutState, onResizeStart, onResize, onResizeEnd}) { +function Resizer({column, layout, onResizeStart, onResize, onResizeEnd}) { let ref = useRef(null); let {resizerProps, inputProps} = useTableColumnResize({ column, label: 'Resizer', onResizeStart, onResize, - onResizeEnd, - tableState: state - } as AriaTableColumnResizeProps, layoutState, ref); + onResizeEnd + } as AriaTableColumnResizeProps, layout, ref); return ( <> @@ -163,7 +163,7 @@ function Resizer({column, state, layoutState, onResizeStart, onResize, onResizeE ); } -export function TableColumnHeader({column, state, widths, layoutState, onResizeStart, onResize, onResizeEnd}) { +export function TableColumnHeader({column, state, widths, layout, onResizeStart, onResize, onResizeEnd}) { let ref = useRef(); let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref); let {isFocusVisible, focusProps} = useFocusRing(); @@ -197,7 +197,7 @@ export function TableColumnHeader({column, state, widths, layoutState, onResizeS { column.props.allowsResizing && - + } diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx index 91c91d0f9f3..922ae69d5eb 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -192,6 +192,9 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { let proxy = new Proxy(tableLayout, { get(target, prop, receiver) {