Update uncontrolled widths when columns change in aria table sizing example (#5345)

Author: devongovett

packages/@react-aria/table/test/tableResizingTests.tsx

@@ -527,6 +527,23 @@ export let resizingTests = (render, rerender, Table, ControlledTable, resizeCol,
         expect(getColumnWidths(tree)).toStrictEqual([113, 112, 113, 112, 450]);
       });
 
+      it('onResize end called with values even if no resizing took place uncontrolled', function () {
+        let allowsResizing = true;
+        let columns = [
+          {name: 'Name', id: 'name', allowsResizing},
+          {name: 'Type', id: 'type', defaultWidth: '3fr', allowsResizing},
+          {name: 'Level', id: 'level', allowsResizing},
+          {name: 'Height', id: 'height', defaultWidth: '5fr', allowsResizing}
+        ];
+        let columnNames = ['Name', 'Type', 'Level', 'Height'];
+        let onResizeEnd = jest.fn();
+        let tree = render(<Table columns={columns} rows={rows} onResizeEnd={onResizeEnd} />);
+        expect(getColumnWidths(tree)).toStrictEqual([90, 270, 90, 450]);
+        resizeCol(tree, 'Type', 0);
+        expect(getColumnWidths(tree)).toStrictEqual([90, 270, 90, 450]);
+        expect(onResizeEnd).toHaveBeenCalledWith(mapFromWidths(columnNames, [90, 270, '1fr', '5fr']));
+      });
+
       it('onResizeStart called with expected values', function () {
         let columns = [
           {name: 'Name', uid: 'name', width: '1fr'},

packages/@react-stately/table/src/useTableColumnResizeState.ts

@@ -81,6 +81,20 @@ export function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<
   let [uncontrolledWidths, setUncontrolledWidths] = useState(() =>
     columnLayout.getInitialUncontrolledWidths(uncontrolledColumns)
   );
+
+  // Update uncontrolled widths if the columns changed.
+  let [lastColumns, setLastColumns] = useState(state.collection.columns);
+  if (state.collection.columns !== lastColumns) {
+    if (
+      state.collection.columns.length !== lastColumns.length ||
+      state.collection.columns.some((c, i) => c.key !== lastColumns[i].key)
+    ) {
+      let newUncontrolledWidths = columnLayout.getInitialUncontrolledWidths(uncontrolledColumns);
+      setUncontrolledWidths(newUncontrolledWidths);
+    }
+    setLastColumns(state.collection.columns);
+  }
+
   // combine columns back into one map that maintains same order as the columns
   let colWidths = useMemo(() =>
       columnLayout.recombineColumns(state.collection.columns, uncontrolledWidths, uncontrolledColumns, controlledColumns)

packages/react-aria-components/test/Table.test.js

@@ -828,10 +828,10 @@ describe('Table', () => {
     resizingTests(render, (tree, ...args) => tree.rerender(...args), ResizableTable, ControlledResizableTable, resizeCol, resizeTable);
 
     function ResizableTable(props) {
-      let {columns, rows} = props;
+      let {columns, rows, onResizeStart, onResize, onResizeEnd, ...otherProps} = props;
       return (
-        <ResizableTableContainer>
-          <Table aria-label="Files">
+        <ResizableTableContainer onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd}>
+          <Table aria-label="Files" {...otherProps}>
             <MyTableHeader columns={columns}>
               {column => (
                 <MyColumn {...column} isRowHeader={column.id === 'name'}>