[Resizable columns] Absorb resize width in trailing columns

src/components/Table/Table.tsx

@@ -18,7 +18,7 @@ import {canMeasureText} from '@libs/measureTextWidth';
 import {acquireBackgroundInputFocusSuppression} from '@libs/ModalFocusManager';
 
 import CONST from '@src/CONST';
-import type {ColumnWidthOverrides} from '@src/types/onyx/TableColumnWidths';
+import type {StoredTableColumnWidths} from '@src/types/onyx/TableColumnWidths';
 
 import type {FlashListRef} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
@@ -145,8 +145,8 @@ function createTableHandle<DataType extends TableData, ColumnKey extends string
 }
 
 type TableContentProps<DataType extends TableData, ColumnKey extends string, FilterKey extends string> = TableProps<DataType, ColumnKey, FilterKey> & {
-    /** Stored dragged widths for this table's `columnResizingID`. */
-    columnWidthOverrides?: ColumnWidthOverrides;
+    /** Layout the last drag saved for this `columnResizingID`. */
+    storedTableColumnWidths?: StoredTableColumnWidths;
 };
 
 function TableContent<DataType extends TableData, ColumnKey extends string = string, FilterKey extends string = string>({
@@ -170,7 +170,7 @@ function TableContent<DataType extends TableData, ColumnKey extends string = str
     shouldPreserveSelectionOnSearchAndFilter,
     shouldFooterRenderAsLastRow,
     columnResizingID,
-    columnWidthOverrides,
+    storedTableColumnWidths,
     onRowSelectionChange,
     onSearchStringChange,
     onSortingChange,
@@ -278,7 +278,7 @@ function TableContent<DataType extends TableData, ColumnKey extends string = str
     // static tracks and never measure the table.
     const isDynamicSizingEnabled = shouldUseDynamicColumns && !shouldUseNarrowTableLayout && canMeasureText();
 
-    // Dragged widths are applied by the dynamic sizing resolver, so resizing requires it.
+    // The saved layout is applied by the dynamic sizing resolver, so resizing requires it.
     const {isBetaEnabled} = usePermissions();
     const isColumnResizingEnabled = isDynamicSizingEnabled && !!columnResizingID && isBetaEnabled(CONST.BETAS.RESIZABLE_TABLE_COLUMNS);
 
@@ -289,8 +289,10 @@ function TableContent<DataType extends TableData, ColumnKey extends string = str
         scrollWidth: dynamicScrollWidth,
         rowWidth: dynamicRowWidth,
         resizableColumnKeys,
+        getResizedColumnWidths,
         resolvedColumnWidths,
         dragMinWidths,
+        getStoredTableColumnWidths,
     } = useDynamicColumnWidths<DataType, ColumnKey>({
         columns,
         data,
@@ -299,14 +301,16 @@ function TableContent<DataType extends TableData, ColumnKey extends string = str
         // In the wide layout the checkbox column is rendered whenever selection is enabled.
         hasSelectionColumn: !!selectionEnabled,
         isColumnResizingEnabled,
-        columnWidthOverrides,
+        storedTableColumnWidths,
     });
 
     const columnResize = useColumnResize({
         columnResizingID: isColumnResizingEnabled ? columnResizingID : undefined,
         resizableColumnKeys,
+        getResizedColumnWidths,
         resolvedColumnWidths,
         dragMinWidths,
+        getStoredTableColumnWidths,
         columnGap: styles.gap3.gap,
     });
 
@@ -522,12 +526,12 @@ function TableContent<DataType extends TableData, ColumnKey extends string = str
 function TableWithStoredColumnWidths<DataType extends TableData, ColumnKey extends string = string, FilterKey extends string = string>(
     props: TableProps<DataType, ColumnKey, FilterKey> & {columnResizingID: string},
 ) {
-    const columnWidthOverrides = useStoredColumnWidths(props.columnResizingID);
+    const storedTableColumnWidths = useStoredColumnWidths(props.columnResizingID);
 
     return (
         <TableContent
             {...props}
-            columnWidthOverrides={columnWidthOverrides}
+            storedTableColumnWidths={storedTableColumnWidths}
         />
     );
 }

src/components/Table/columnResize/getAbsorbedColumnWidths.ts

@@ -0,0 +1,55 @@
+/** Splits a column's resize among the columns to its right, so the row keeps its width instead of overflowing. */
+import CONST from '@src/CONST';
+
+const {MIN_WIDTH} = CONST.TABLES.COLUMN_RESIZE;
+
+/** A later column that absorbs another column's resize. */
+type ColumnAbsorber = {
+    columnKey: string;
+
+    /** The layout's minimum, so a drag and a reload land on the same widths. */
+    minWidth: number;
+
+    /** Widest it may grow to, so a column meant to truncate long values never takes another column's freed width past its cap. */
+    maxWidth: number;
+};
+
+/**
+ * Splits a resize delta equally among the absorbers. An absorber that runs out of room between its minimum and maximum
+ * stops absorbing and its share moves to the rest. Whatever none of them can absorb is left over, so the row overflows
+ * and scrolls, or falls short and the growable column fills the gap. Shares are whole px and sum exactly. Absorbers without a start width are skipped. Returns each absorber's new width by column key.
+ */
+function getAbsorbedColumnWidths(absorbers: ColumnAbsorber[], startWidths: Record<string, number>, delta: number): Record<string, number> {
+    const absorbersWithRoom = absorbers.flatMap(({columnKey, minWidth, maxWidth}) => {
+        const startWidth = startWidths[columnKey];
+
+        if (startWidth === undefined) {
+            return [];
+        }
+
+        const roundedStartWidth = Math.round(startWidth);
+
+        // How far it can move in the delta's direction: shrinking down to its minimum, or growing up to its maximum.
+        const room = delta > 0 ? Math.max(roundedStartWidth - Math.max(Math.round(minWidth), MIN_WIDTH), 0) : Math.max(Math.round(maxWidth) - roundedStartWidth, 0);
+
+        return [{columnKey, startWidth: roundedStartWidth, room}];
+    });
+
+    // Settled from the least room up, so an absorber hitting its minimum leaves its unabsorbed share to the rest. Stable, so ties keep render order.
+    const settleOrder = absorbersWithRoom.toSorted((first, second) => first.room - second.room);
+    const absorbedWidths: Record<string, number> = {};
+    let remainingDelta = Math.round(delta);
+
+    for (const [position, absorber] of settleOrder.entries()) {
+        const equalShare = Math.round(remainingDelta / (settleOrder.length - position));
+        const share = Math.max(Math.min(equalShare, absorber.room), -absorber.room);
+
+        absorbedWidths[absorber.columnKey] = absorber.startWidth - share;
+        remainingDelta -= share;
+    }
+
+    return absorbedWidths;
+}
+
+export default getAbsorbedColumnWidths;
+export type {ColumnAbsorber};

src/components/Table/columnResize/getColumnsWidthSum.ts

@@ -0,0 +1,6 @@
+/** Sums a row's column widths, counting a column without a width as 0. */
+function getColumnsWidthSum(columns: Array<{key: string}>, columnWidths: Record<string, number>): number {
+    return columns.reduce((total, column) => total + (columnWidths[column.key] ?? 0), 0);
+}
+
+export default getColumnsWidthSum;

src/components/Table/columnResize/getFrozenColumnWidths.ts

@@ -0,0 +1,50 @@
+/** Repaints a saved layout, with the columns the user never dragged absorbing room that changed since the save. */
+import type {StoredTableColumnWidths} from '@src/types/onyx/TableColumnWidths';
+
+import type {ResizableColumn} from './resolveDraggedColumnWidths';
+
+import getAbsorbedColumnWidths from './getAbsorbedColumnWidths';
+import getColumnsWidthSum from './getColumnsWidthSum';
+import {getAbsorbedDelta, getColumnAbsorbers} from './resolveDraggedColumnWidths';
+
+type GetFrozenColumnWidthsParams = {
+    /** Every column, in render order. A column added since the save starts at its content width. */
+    columns: ResizableColumn[];
+
+    storedTableColumnWidths: StoredTableColumnWidths;
+
+    /** Measured like the saved one, so they can be compared. */
+    availableColumnsWidth: number;
+};
+
+/**
+ * Room gained or lost since the save, from the table width or from added and hidden columns, first offsets the saved
+ * overflow or short row, like a drag does. The rest is split equally among the auto-sized columns. Widths are recomputed
+ * from the save every time, so resizing the window back restores them exactly.
+ */
+function getFrozenColumnWidths({
+    columns,
+    storedTableColumnWidths: {availableColumnsWidth: savedAvailableColumnsWidth, columnWidths: savedColumnWidths, resizedColumnKeys},
+    availableColumnsWidth,
+}: GetFrozenColumnWidthsParams): Record<string, number> {
+    const baseColumnWidths: Record<string, number> = {};
+
+    for (const column of columns) {
+        baseColumnWidths[column.key] = column.declaredWidth ?? savedColumnWidths[column.key] ?? Math.min(column.contentWidth, column.maxWidth);
+    }
+
+    // Every saved column, hidden ones included, so a hidden column's width counts as freed room.
+    const savedColumnsWidth = Object.values(savedColumnWidths).reduce((total, width) => total + width, 0);
+    const extraRoom = availableColumnsWidth - savedAvailableColumnsWidth + savedColumnsWidth - getColumnsWidthSum(columns, baseColumnWidths);
+    const absorbers = getColumnAbsorbers(
+        columns.filter((column) => savedColumnWidths[column.key] !== undefined),
+        resizedColumnKeys,
+    );
+
+    // Negated because a positive delta shrinks absorbers.
+    const absorbedDelta = getAbsorbedDelta(-extraRoom, savedColumnsWidth - savedAvailableColumnsWidth);
+
+    return {...baseColumnWidths, ...getAbsorbedColumnWidths(absorbers, baseColumnWidths, absorbedDelta)};
+}
+
+export default getFrozenColumnWidths;