npm - @react-stately/table - Versions diffs - 3.6.1-nightly.3608 → 3.6.1-nightly.3617 - Mend

@react-stately/table 3.6.1-nightly.3608 → 3.6.1-nightly.3617

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/main.js +339 -214
package/dist/main.js.map +1 -1
package/dist/module.js +340 -216
package/dist/module.js.map +1 -1
package/dist/types.d.ts +58 -42
package/dist/types.d.ts.map +1 -1
package/package.json +8 -8
package/src/TableCollection.ts +3 -1
package/src/TableColumnLayout.ts +189 -0
package/src/TableUtils.ts +174 -0
package/src/index.ts +1 -0
package/src/useTableColumnResizeState.ts +115 -211
package/src/utils.ts +0 -111

package/dist/main.js CHANGED Viewed

@@ -1,5 +1,6 @@
 var $56JBj$reactstatelycollections = require("@react-stately/collections");
 var $56JBj$react = require("react");
+var $56JBj$swchelperslib_define_propertyjs = require("@swc/helpers/lib/_define_property.js");
 var $56JBj$reactstatelygrid = require("@react-stately/grid");
 function $parcel$export(e, n, v, s) {
@@ -18,6 +19,7 @@ $parcel$export(module.exports, "Row", () => $9ec6912e32cc0d81$export$b59bdbef9ce
 $parcel$export(module.exports, "Cell", () => $ad4ab0a21c733e1f$export$f6f0c3fe4ec306ea);
 $parcel$export(module.exports, "Section", () => $56JBj$reactstatelycollections.Section);
 $parcel$export(module.exports, "TableCollection", () => $7f5a58334d8866a5$export$596e1b2e2cf93690);
+$parcel$export(module.exports, "TableColumnLayout", () => $2240a72410c17d51$export$7ff77a162970b30e);
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -28,251 +30,369 @@ $parcel$export(module.exports, "TableCollection", () => $7f5a58334d8866a5$export
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ function $3122b463430f41b1$export$f61abf052f87399f(widths) {
-    return Array.from(widths).map((e)=>e[1]).reduce((acc, cur)=>acc + cur, 0);
-}
-function $3122b463430f41b1$export$1994a077b98ee0d5(width) {
+ */ /*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ function $9e5f6a0caf75716e$export$1994a077b98ee0d5(width) {
     return width != null && (!isNaN(width) || String(width).match(/^(\d+)(?=%$)/) !== null);
 }
-function $3122b463430f41b1$var$parseFractionalUnit(width) {
+function $9e5f6a0caf75716e$export$9078bad4c3934604(width) {
     if (!width) return 1;
-    let match = width.match(/^(\d+)(?=fr$)/);
-    // if width is the incorrect format, just deafult it to a 1fr
+    let match = width.match(/^(.+)(?=fr$)/);
+    // if width is the incorrect format, just default it to a 1fr
     if (!match) {
         console.warn(`width: ${width} is not a supported format, width should be a number (ex. 150), percentage (ex. '50%') or fr unit (ex. '2fr')`, "defaulting to '1fr'");
         return 1;
     }
-    return parseInt(match[0], 10);
+    return parseFloat(match[0]);
 }
-function $3122b463430f41b1$export$7bbad27896f7ae9f(width, tableWidth) {
+function $9e5f6a0caf75716e$export$7bbad27896f7ae9f(width, tableWidth) {
     if (typeof width === "string") {
         let match = width.match(/^(\d+)(?=%$)/);
         if (!match) throw new Error("Only percentages or numbers are supported for static column widths");
-        return tableWidth * (parseInt(match[0], 10) / 100);
+        return tableWidth * (parseFloat(match[0]) / 100);
     }
     return width;
 }
-function $3122b463430f41b1$export$59185c62a7544aa0(maxWidth, tableWidth) {
-    return maxWidth != null ? $3122b463430f41b1$export$7bbad27896f7ae9f(maxWidth, tableWidth) : Number.MAX_SAFE_INTEGER;
+function $9e5f6a0caf75716e$export$59185c62a7544aa0(maxWidth, tableWidth) {
+    return maxWidth != null ? $9e5f6a0caf75716e$export$7bbad27896f7ae9f(maxWidth, tableWidth) : Number.MAX_SAFE_INTEGER;
 }
-function $3122b463430f41b1$export$f556054ce4358701(minWidth, tableWidth) {
-    return minWidth != null ? $3122b463430f41b1$export$7bbad27896f7ae9f(minWidth, tableWidth) : 75;
+function $9e5f6a0caf75716e$export$f556054ce4358701(minWidth, tableWidth) {
+    return minWidth != null ? $9e5f6a0caf75716e$export$7bbad27896f7ae9f(minWidth, tableWidth) : 0;
 }
-function $3122b463430f41b1$var$mapDynamicColumns(dynamicColumns, availableSpace, tableWidth) {
-    let fractions = dynamicColumns.reduce((sum, column)=>sum + $3122b463430f41b1$var$parseFractionalUnit(column.props.defaultWidth), 0);
-    let columns = dynamicColumns.map((column, index)=>{
-        const targetWidth = $3122b463430f41b1$var$parseFractionalUnit(column.props.defaultWidth) * availableSpace / fractions;
-        const delta = Math.max($3122b463430f41b1$export$f556054ce4358701(column.props.minWidth, tableWidth) - targetWidth, targetWidth - $3122b463430f41b1$export$59185c62a7544aa0(column.props.maxWidth, tableWidth));
+// tell us the delta between min width and target width vs max width and target width
+function $9e5f6a0caf75716e$var$mapDynamicColumns(dynamicColumns, availableSpace, tableWidth) {
+    let fractions = dynamicColumns.reduce((sum, column)=>column ? sum + $9e5f6a0caf75716e$export$9078bad4c3934604(column.column.width || column.column.defaultWidth) : sum, 0);
+    let columns = dynamicColumns.map((column)=>{
+        if (!column) return null;
+        const targetWidth = $9e5f6a0caf75716e$export$9078bad4c3934604(column.column.width || column.column.defaultWidth) * availableSpace / fractions;
+        const delta = Math.max($9e5f6a0caf75716e$export$f556054ce4358701(column.column.minWidth, tableWidth) - targetWidth, targetWidth - $9e5f6a0caf75716e$export$59185c62a7544aa0(column.column.maxWidth, tableWidth));
         return {
             ...column,
-            index: index,
             delta: delta
         };
     });
     return columns;
 }
-function $3122b463430f41b1$var$findDynamicColumnWidths(dynamicColumns, availableSpace, tableWidth) {
-    let fractions = dynamicColumns.reduce((sum, col)=>sum + $3122b463430f41b1$var$parseFractionalUnit(col.props.defaultWidth), 0);
-    const columns = dynamicColumns.map((column)=>{
-        const targetWidth = $3122b463430f41b1$var$parseFractionalUnit(column.props.defaultWidth) * availableSpace / fractions;
-        let width = Math.max($3122b463430f41b1$export$f556054ce4358701(column.props.minWidth, tableWidth), Math.min(Math.floor(targetWidth), $3122b463430f41b1$export$59185c62a7544aa0(column.props.maxWidth, tableWidth)));
-        column.calculatedWidth = width;
+// mutates columns to set their width
+function $9e5f6a0caf75716e$var$findDynamicColumnWidths(dynamicColumns, availableSpace, tableWidth) {
+    let fractions = dynamicColumns.reduce((sum, col)=>col ? sum + col.width : sum, 0);
+    dynamicColumns.forEach((column)=>{
+        if (!column) return null;
+        const targetWidth = column.width * availableSpace / fractions;
+        let width = Math.max($9e5f6a0caf75716e$export$f556054ce4358701(column.column.minWidth, tableWidth), Math.min(Math.round(targetWidth), $9e5f6a0caf75716e$export$59185c62a7544aa0(column.column.maxWidth, tableWidth)));
         availableSpace -= width;
-        fractions -= $3122b463430f41b1$var$parseFractionalUnit(column.props.defaultWidth);
-        return column;
+        fractions -= column.width;
+        column.width = width;
     });
-    return columns;
 }
-function $3122b463430f41b1$export$a870e6692ac5ccb2(dynamicColumns, availableSpace, tableWidth) {
-    let columns = $3122b463430f41b1$var$mapDynamicColumns(dynamicColumns, availableSpace, tableWidth);
-    columns.sort((a, b)=>b.delta - a.delta);
-    columns = $3122b463430f41b1$var$findDynamicColumnWidths(columns, availableSpace, tableWidth);
-    columns.sort((a, b)=>a.index - b.index);
+function $9e5f6a0caf75716e$export$a870e6692ac5ccb2(dynamicColumns, availableSpace, tableWidth) {
+    let columns = $9e5f6a0caf75716e$var$mapDynamicColumns(dynamicColumns, availableSpace, tableWidth);
+    // sort is nlogn and copying is n, so copying and sorting is faster than sorting twice
+    // sort by delta's to prioritize assigning width
+    let sorted = [
+        ...columns
+    ].sort((a, b)=>{
+        if (a && b) return b.delta - a.delta;
+        return a ? -1 : 1;
+    });
+    // this function mutates the column entries, so no need to have it return anything
+    // plus we don't need to undo the sort since we already have the correct order
+    $9e5f6a0caf75716e$var$findDynamicColumnWidths(sorted, availableSpace, tableWidth);
     return columns;
 }
+function $9e5f6a0caf75716e$export$55d50dc687385491(availableWidth, columns, changedColumns, getDefaultWidth, getDefaultMinWidth) {
+    let remainingSpace = availableWidth;
+    let { staticColumns: staticColumns , dynamicColumns: dynamicColumns  } = columns.reduce((acc, column, index)=>{
+        var _column_width, _ref, _ref1;
+        let width = changedColumns.get(column.key) != null ? changedColumns.get(column.key) : (_ref1 = (_ref = (_column_width = column.width) !== null && _column_width !== void 0 ? _column_width : column.defaultWidth) !== null && _ref !== void 0 ? _ref : getDefaultWidth === null || getDefaultWidth === void 0 ? void 0 : getDefaultWidth(index)) !== null && _ref1 !== void 0 ? _ref1 : "1fr";
+        var _column_minWidth;
+        let minWidth = (_column_minWidth = column.minWidth) !== null && _column_minWidth !== void 0 ? _column_minWidth : getDefaultMinWidth === null || getDefaultMinWidth === void 0 ? void 0 : getDefaultMinWidth(index);
+        column.minWidth = minWidth;
+        if ($9e5f6a0caf75716e$export$1994a077b98ee0d5(width)) {
+            let w = $9e5f6a0caf75716e$export$7bbad27896f7ae9f(width, availableWidth);
+            w = Math.max($9e5f6a0caf75716e$export$f556054ce4358701(column.minWidth, availableWidth), Math.min(Math.floor(w), $9e5f6a0caf75716e$export$59185c62a7544aa0(column.maxWidth, availableWidth)));
+            acc.staticColumns.push({
+                index: index,
+                column: column,
+                width: w
+            });
+            acc.dynamicColumns.push(null);
+            remainingSpace -= w;
+        } else {
+            let w1 = $9e5f6a0caf75716e$export$9078bad4c3934604(width);
+            acc.staticColumns.push(null);
+            acc.dynamicColumns.push({
+                index: index,
+                column: column,
+                width: w1
+            });
+        }
+        return acc;
+    }, {
+        staticColumns: [],
+        dynamicColumns: []
+    });
+    let newColWidths = $9e5f6a0caf75716e$export$a870e6692ac5ccb2(dynamicColumns, remainingSpace, availableWidth);
+    return staticColumns.map((col, i)=>{
+        if (col) return col.width;
+        return newColWidths[i].width;
+    });
+}
-function $7aa22d80cd4ca621$export$cb895dcf85db1319(props, state) {
-    const { getDefaultWidth: getDefaultWidth , tableWidth: defaultTableWidth = null  } = props;
-    const { columns: columns  } = state;
-    const columnsRef = (0, $56JBj$react.useRef)([]);
-    const tableWidth = (0, $56JBj$react.useRef)(defaultTableWidth);
-    const isResizing = (0, $56JBj$react.useRef)(null);
-    const startResizeContentWidth = (0, $56JBj$react.useRef)();
-    const [columnWidths, setColumnWidths] = (0, $56JBj$react.useState)(new Map(columns.map((col)=>[
-            col.key,
-            0
-        ])));
-    const columnWidthsRef = (0, $56JBj$react.useRef)(columnWidths);
-    const affectedColumnWidthsRef = (0, $56JBj$react.useRef)([]);
-    const [resizedColumns, setResizedColumns] = (0, $56JBj$react.useState)(new Set());
-    const resizedColumnsRef = (0, $56JBj$react.useRef)(resizedColumns);
-    const [currentlyResizingColumn, setCurrentlyResizingColumn] = (0, $56JBj$react.useState)(null);
-    function setColumnWidthsForRef(newWidths) {
-        columnWidthsRef.current = newWidths;
-        // new map so that change detection is triggered
-        setColumnWidths(newWidths);
+class $2240a72410c17d51$export$7ff77a162970b30e {
+    /** Takes an array of columns and splits it into 2 maps of columns with controlled and columns with uncontrolled widths. */ splitColumnsIntoControlledAndUncontrolled(columns) {
+        return columns.reduce((acc, col)=>{
+            if (col.props.width != null) acc[0].set(col.key, col);
+            else acc[1].set(col.key, col);
+            return acc;
+        }, [
+            new Map(),
+            new Map()
+        ]);
     }
-    /*
-    returns the resolved column width in this order:
-    previously calculated width -> controlled width prop -> uncontrolled defaultWidth prop -> dev assigned width -> default dynamic width
-  */ let getResolvedColumnWidth = (0, $56JBj$react.useCallback)((column)=>{
-        let columnProps = column.props;
-        var _width, ref, ref1;
-        return (resizedColumns === null || resizedColumns === void 0 ? void 0 : resizedColumns.has(column.key)) ? columnWidthsRef.current.get(column.key) : (ref1 = (ref = (_width = columnProps.width) !== null && _width !== void 0 ? _width : columnProps.defaultWidth) !== null && ref !== void 0 ? ref : getDefaultWidth === null || getDefaultWidth === void 0 ? void 0 : getDefaultWidth(column.props)) !== null && ref1 !== void 0 ? ref1 : "1fr";
-    }, [
-        getDefaultWidth,
-        resizedColumns
-    ]);
-    let getStaticAndDynamicColumns = (0, $56JBj$react.useCallback)((columns)=>columns.reduce((acc, column)=>{
-            let width = getResolvedColumnWidth(column);
-            return (0, $3122b463430f41b1$export$1994a077b98ee0d5)(width) ? {
-                ...acc,
-                staticColumns: [
-                    ...acc.staticColumns,
-                    column
-                ]
-            } : {
-                ...acc,
-                dynamicColumns: [
-                    ...acc.dynamicColumns,
-                    column
-                ]
-            };
-        }, {
-            staticColumns: [],
-            dynamicColumns: []
-        }), [
-        getResolvedColumnWidth
-    ]);
-    let buildColumnWidths = (0, $56JBj$react.useCallback)((affectedColumns, availableSpace)=>{
-        const widths = new Map();
-        let remainingSpace = availableSpace;
-        const { staticColumns: staticColumns , dynamicColumns: dynamicColumns  } = getStaticAndDynamicColumns(affectedColumns);
-        staticColumns.forEach((column)=>{
-            let width = getResolvedColumnWidth(column);
-            let w = (0, $3122b463430f41b1$export$7bbad27896f7ae9f)(width, tableWidth.current);
-            widths.set(column.key, w);
-            remainingSpace -= w;
-        });
-        // dynamic columns
-        if (dynamicColumns.length > 0) {
-            const newColumnWidths = (0, $3122b463430f41b1$export$a870e6692ac5ccb2)(dynamicColumns, remainingSpace, tableWidth.current);
-            for (let column of newColumnWidths)widths.set(column.key, column.calculatedWidth);
-        }
-        return widths;
-    }, [
-        getStaticAndDynamicColumns,
-        getResolvedColumnWidth
-    ]);
-    const prevColKeys = columnsRef.current.map((col)=>col.key);
-    const colKeys = columns.map((col)=>col.key);
-    // if the columns change, need to rebuild widths.
-    if (prevColKeys.length !== colKeys.length || !colKeys.every((col, i)=>col === prevColKeys[i])) {
-        columnsRef.current = columns;
-        const widths = buildColumnWidths(columns, tableWidth.current);
-        setColumnWidthsForRef(widths);
+    /** Takes uncontrolled and controlled widths and joins them into a single Map. */ recombineColumns(columns, uncontrolledWidths, uncontrolledColumns, controlledColumns) {
+        return new Map(columns.map((col)=>{
+            if (uncontrolledColumns.has(col.key)) return [
+                col.key,
+                uncontrolledWidths.get(col.key)
+            ];
+            else return [
+                col.key,
+                controlledColumns.get(col.key).props.width
+            ];
+        }));
     }
-    function setTableWidth(width) {
-        if (width && width !== tableWidth.current) {
-            tableWidth.current = width;
-            if (!isResizing.current) {
-                const widths = buildColumnWidths(columns, width);
-                setColumnWidthsForRef(widths);
-            }
-        }
+    /** Used to make an initial Map of the uncontrolled widths based on default widths. */ getInitialUncontrolledWidths(uncontrolledColumns) {
+        var _col_props_defaultWidth, _ref;
+        return new Map(Array.from(uncontrolledColumns).map(([key, col])=>{
+            var _this, _this_getDefaultWidth;
+            return [
+                key,
+                (_ref = (_col_props_defaultWidth = col.props.defaultWidth) !== null && _col_props_defaultWidth !== void 0 ? _col_props_defaultWidth : (_this_getDefaultWidth = (_this = this).getDefaultWidth) === null || _this_getDefaultWidth === void 0 ? void 0 : _this_getDefaultWidth.call(_this, col)) !== null && _ref !== void 0 ? _ref : "1fr"
+            ];
+        }));
     }
-    function onColumnResizeStart(column) {
-        setCurrentlyResizingColumn(column.key);
-        isResizing.current = true;
-        startResizeContentWidth.current = (0, $3122b463430f41b1$export$f61abf052f87399f)(columnWidthsRef.current);
+    getColumnWidth(key) {
+        var _this_columnWidths_get;
+        return (_this_columnWidths_get = this.columnWidths.get(key)) !== null && _this_columnWidths_get !== void 0 ? _this_columnWidths_get : 0;
     }
-    function onColumnResize(column, width) {
-        let widthsObj = resizeColumn(column, width);
-        affectedColumnWidthsRef.current = widthsObj;
-        props.onColumnResize && props.onColumnResize(affectedColumnWidthsRef.current);
+    getColumnMinWidth(key) {
+        return this.columnMinWidths.get(key);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function onColumnResizeEnd(column) {
-        props.onColumnResizeEnd && isResizing.current && props.onColumnResizeEnd(affectedColumnWidthsRef.current);
-        setCurrentlyResizingColumn(null);
-        isResizing.current = false;
-        affectedColumnWidthsRef.current = [];
-        let widths = new Map(columnWidthsRef.current);
-        setColumnWidthsForRef(widths);
+    getColumnMaxWidth(key) {
+        return this.columnMaxWidths.get(key);
     }
-    function resizeColumn(column, newWidth) {
-        let boundedWidth = Math.max((0, $3122b463430f41b1$export$f556054ce4358701)(column.props.minWidth, tableWidth.current), Math.min(Math.floor(newWidth), (0, $3122b463430f41b1$export$59185c62a7544aa0)(column.props.maxWidth, tableWidth.current)));
-        // copy the columnWidths map and set the new width for the column being resized
-        let widths = new Map(columnWidthsRef.current);
-        widths.set(column.key, boundedWidth);
-        // keep track of all columns that have been sized
-        resizedColumnsRef.current.add(column.key);
-        setResizedColumns(resizedColumnsRef.current);
-        // get the columns affected by resize and remaining space
-        const resizeIndex = columnsRef.current.findIndex((col)=>col.key === column.key);
-        let affectedColumns = columnsRef.current.slice(resizeIndex + 1);
-        // we only care about the columns that CAN be resized, we ignore static columns.
-        let { dynamicColumns: dynamicColumns  } = getStaticAndDynamicColumns(affectedColumns);
-        // available space for affected columns
-        let availableSpace = columnsRef.current.reduce((acc, column, index)=>{
-            if (index <= resizeIndex || (0, $3122b463430f41b1$export$1994a077b98ee0d5)(getResolvedColumnWidth(column))) return acc - widths.get(column.key);
-            return acc;
-        }, tableWidth.current);
-        // merge the unaffected column widths and the recalculated column widths
-        let recalculatedColumnWidths = buildColumnWidths(dynamicColumns, availableSpace);
-        widths = new Map([
-            ...widths,
-            ...recalculatedColumnWidths
-        ]);
-        setColumnWidthsForRef(widths);
-        /*
-     when getting recalculated columns above, the column being resized is not considered "recalculated"
-     so we need to add it to the list of affected columns
-    */ let allAffectedColumns = [
-            [
-                column.key,
-                boundedWidth
-            ],
-            ...recalculatedColumnWidths
-        ].map(([key, width])=>({
-                key: key,
-                width: width
-            }));
-        return allAffectedColumns;
+    resizeColumnWidth(tableWidth, collection, controlledWidths, uncontrolledWidths, col = null, width) {
+        let prevColumnWidths = this.columnWidths;
+        // resizing a column
+        let resizeIndex = Infinity;
+        let controlledArray = Array.from(controlledWidths);
+        let uncontrolledArray = Array.from(uncontrolledWidths);
+        let combinedArray = controlledArray.concat(uncontrolledArray);
+        let resizingChanged = new Map(combinedArray);
+        let frKeys = new Map();
+        let percentKeys = new Map();
+        let frKeysToTheRight = new Map();
+        let minWidths = new Map();
+        // freeze columns to the left to their previous pixel value
+        // at the same time count how many total FR's are in play and which of those FRs are
+        // to the right or left of the resizing column
+        collection.columns.forEach((column, i)=>{
+            var _column_column_props_width, _column_column_props_width_endsWith;
+            let frKey;
+            minWidths.set(column.key, this.getDefaultMinWidth(collection.columns[i]));
+            if (col !== column.key && !column.column.props.width && !(0, $9e5f6a0caf75716e$export$1994a077b98ee0d5)(uncontrolledWidths.get(column.key))) {
+                // uncontrolled don't have props.width for us, so instead get from our state
+                frKey = column.key;
+                frKeys.set(column.key, (0, $9e5f6a0caf75716e$export$9078bad4c3934604)(uncontrolledWidths.get(column.key)));
+            } else if (col !== column.key && !(0, $9e5f6a0caf75716e$export$1994a077b98ee0d5)(column.column.props.width) && !uncontrolledWidths.get(column.key)) {
+                // controlledWidths will be the same in the collection
+                frKey = column.key;
+                frKeys.set(column.key, (0, $9e5f6a0caf75716e$export$9078bad4c3934604)(column.column.props.width));
+            } else if (col !== column.key && ((_column_column_props_width = column.column.props.width) === null || _column_column_props_width === void 0 ? void 0 : (_column_column_props_width_endsWith = _column_column_props_width.endsWith) === null || _column_column_props_width_endsWith === void 0 ? void 0 : _column_column_props_width_endsWith.call(_column_column_props_width, "%"))) percentKeys.set(column.key, column.column.props.width);
+            // don't freeze columns to the right of the resizing one
+            if (resizeIndex < i) {
+                if (frKey) frKeysToTheRight.set(frKey, frKeys.get(frKey));
+                return;
+            }
+            // we already know the new size of the resizing column
+            if (column.key === col) {
+                resizeIndex = i;
+                return;
+            }
+            // freeze column to previous value
+            resizingChanged.set(column.key, prevColumnWidths.get(column.key));
+        });
+        resizingChanged.set(col, Math.floor(width));
+        // predict pixels sizes for all columns based on resize
+        let columnWidths = (0, $9e5f6a0caf75716e$export$55d50dc687385491)(tableWidth, collection.columns.map((col)=>({
+                ...col.column.props,
+                key: col.key
+            })), resizingChanged, (i)=>this.getDefaultWidth(collection.columns[i]), (i)=>this.getDefaultMinWidth(collection.columns[i]));
+        // set all new column widths for onResize event
+        // columns going in will be the same order as the columns coming out
+        let newWidths = new Map();
+        // set all column widths based on calculateColumnSize
+        columnWidths.forEach((width, index)=>{
+            let key = collection.columns[index].key;
+            newWidths.set(key, width);
+        });
+        // add FR's back as they were to columns to the right
+        Array.from(frKeys).forEach(([key])=>{
+            if (frKeysToTheRight.has(key)) newWidths.set(key, `${frKeysToTheRight.get(key)}fr`);
+        });
+        // put back in percents
+        Array.from(percentKeys).forEach(([key, width])=>{
+            // resizing locks a column to a px width
+            if (key === col) return;
+            newWidths.set(key, width);
+        });
+        return newWidths;
+    }
+    buildColumnWidths(tableWidth, collection, widths) {
+        this.columnWidths = new Map();
+        this.columnMinWidths = new Map();
+        this.columnMaxWidths = new Map();
+        // initial layout or table/window resizing
+        let columnWidths = (0, $9e5f6a0caf75716e$export$55d50dc687385491)(tableWidth, collection.columns.map((col)=>({
+                ...col.column.props,
+                key: col.key
+            })), widths, (i)=>this.getDefaultWidth(collection.columns[i]), (i)=>this.getDefaultMinWidth(collection.columns[i]));
+        // columns going in will be the same order as the columns coming out
+        columnWidths.forEach((width, index)=>{
+            let key = collection.columns[index].key;
+            let column = collection.columns[index];
+            this.columnWidths.set(key, width);
+            var _column_column_props_minWidth;
+            this.columnMinWidths.set(key, (0, $9e5f6a0caf75716e$export$f556054ce4358701)((_column_column_props_minWidth = column.column.props.minWidth) !== null && _column_column_props_minWidth !== void 0 ? _column_column_props_minWidth : this.getDefaultMinWidth(column), tableWidth));
+            this.columnMaxWidths.set(key, (0, $9e5f6a0caf75716e$export$59185c62a7544aa0)(column.column.props.maxWidth, tableWidth));
+        });
+        return this.columnWidths;
     }
-    var ref;
-    // This function is regenerated whenever columnWidthsRef.current changes in order to get the new correct ref value.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    let getColumnWidth = (0, $56JBj$react.useCallback)((key)=>(ref = columnWidthsRef.current.get(key)) !== null && ref !== void 0 ? ref : 0, [
-        columnWidthsRef.current
+    constructor(options){
+        (0, ($parcel$interopDefault($56JBj$swchelperslib_define_propertyjs)))(this, "columnWidths", new Map());
+        (0, ($parcel$interopDefault($56JBj$swchelperslib_define_propertyjs)))(this, "columnMinWidths", new Map());
+        (0, ($parcel$interopDefault($56JBj$swchelperslib_define_propertyjs)))(this, "columnMaxWidths", new Map());
+        this.getDefaultWidth = options.getDefaultWidth;
+        this.getDefaultMinWidth = options.getDefaultMinWidth;
+    }
+}
+function $7aa22d80cd4ca621$export$cb895dcf85db1319(props, state) {
+    let { getDefaultWidth: getDefaultWidth , getDefaultMinWidth: getDefaultMinWidth , onColumnResizeStart: propsOnColumnResizeStart , onColumnResizeEnd: propsOnColumnResizeEnd , tableWidth: tableWidth = 0  } = props;
+    let [resizingColumn, setResizingColumn] = (0, $56JBj$react.useState)(null);
+    let columnLayout = (0, $56JBj$react.useMemo)(()=>new (0, $2240a72410c17d51$export$7ff77a162970b30e)({
+            getDefaultWidth: getDefaultWidth,
+            getDefaultMinWidth: getDefaultMinWidth
+        }), [
+        getDefaultWidth,
+        getDefaultMinWidth
+    ]);
+    let [controlledColumns, uncontrolledColumns] = (0, $56JBj$react.useMemo)(()=>columnLayout.splitColumnsIntoControlledAndUncontrolled(state.collection.columns), [
+        state.collection.columns,
+        columnLayout
+    ]);
+    // uncontrolled column widths
+    let [uncontrolledWidths, setUncontrolledWidths] = (0, $56JBj$react.useState)(()=>columnLayout.getInitialUncontrolledWidths(uncontrolledColumns));
+    // combine columns back into one map that maintains same order as the columns
+    let colWidths = (0, $56JBj$react.useMemo)(()=>columnLayout.recombineColumns(state.collection.columns, uncontrolledWidths, uncontrolledColumns, controlledColumns), [
+        state.collection.columns,
+        uncontrolledWidths,
+        uncontrolledColumns,
+        controlledColumns,
+        columnLayout
     ]);
-    let getColumnMinWidth = (0, $56JBj$react.useCallback)((key)=>{
-        const columnIndex = columns.findIndex((col)=>col.key === key);
-        if (columnIndex === -1) return;
-        return (0, $3122b463430f41b1$export$f556054ce4358701)(columns[columnIndex].props.minWidth, tableWidth.current);
+    let onColumnResizeStart = (0, $56JBj$react.useCallback)((key)=>{
+        setResizingColumn(key);
+        propsOnColumnResizeStart === null || propsOnColumnResizeStart === void 0 ? void 0 : propsOnColumnResizeStart(key);
     }, [
-        columns
+        propsOnColumnResizeStart,
+        setResizingColumn
     ]);
-    let getColumnMaxWidth = (0, $56JBj$react.useCallback)((key)=>{
-        const columnIndex = columns.findIndex((col)=>col.key === key);
-        if (columnIndex === -1) return;
-        return (0, $3122b463430f41b1$export$59185c62a7544aa0)(columns[columnIndex].props.maxWidth, tableWidth.current);
+    let onColumnResize = (0, $56JBj$react.useCallback)((key, width)=>{
+        let newControlled = new Map(Array.from(controlledColumns).map(([key, entry])=>[
+                key,
+                entry.props.width
+            ]));
+        let newSizes = columnLayout.resizeColumnWidth(tableWidth, state.collection, newControlled, uncontrolledWidths, key, width);
+        let map = new Map(Array.from(uncontrolledColumns).map(([key])=>[
+                key,
+                newSizes.get(key)
+            ]));
+        map.set(key, width);
+        setUncontrolledWidths(map);
+        return newSizes;
     }, [
-        columns
+        controlledColumns,
+        uncontrolledColumns,
+        setUncontrolledWidths,
+        tableWidth,
+        columnLayout,
+        state.collection,
+        uncontrolledWidths
+    ]);
+    let onColumnResizeEnd = (0, $56JBj$react.useCallback)((key)=>{
+        setResizingColumn(null);
+        propsOnColumnResizeEnd === null || propsOnColumnResizeEnd === void 0 ? void 0 : propsOnColumnResizeEnd(key);
+    }, [
+        propsOnColumnResizeEnd,
+        setResizingColumn
+    ]);
+    let columnWidths = (0, $56JBj$react.useMemo)(()=>columnLayout.buildColumnWidths(tableWidth, state.collection, colWidths), [
+        tableWidth,
+        state.collection,
+        colWidths,
+        columnLayout
+    ]);
+    return (0, $56JBj$react.useMemo)(()=>({
+            resizingColumn: resizingColumn,
+            onColumnResize: onColumnResize,
+            onColumnResizeStart: onColumnResizeStart,
+            onColumnResizeEnd: onColumnResizeEnd,
+            getColumnWidth: (key)=>columnLayout.getColumnWidth(key),
+            getColumnMinWidth: (key)=>columnLayout.getColumnMinWidth(key),
+            getColumnMaxWidth: (key)=>columnLayout.getColumnMaxWidth(key),
+            widths: columnWidths
+        }), [
+        columnLayout,
+        resizingColumn,
+        onColumnResize,
+        onColumnResizeStart,
+        onColumnResizeEnd,
+        columnWidths
     ]);
-    return {
-        columnWidths: columnWidthsRef,
-        setTableWidth: setTableWidth,
-        onColumnResize: onColumnResize,
-        onColumnResizeStart: onColumnResizeStart,
-        onColumnResizeEnd: onColumnResizeEnd,
-        getColumnWidth: getColumnWidth,
-        getColumnMinWidth: getColumnMinWidth,
-        getColumnMaxWidth: getColumnMaxWidth,
-        currentlyResizingColumn: currentlyResizingColumn
-    };
 }
@@ -299,6 +419,7 @@ function $7aa22d80cd4ca621$export$cb895dcf85db1319(props, state) {
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
 const $7f5a58334d8866a5$var$ROW_HEADER_COLUMN_KEY = "row-header-column-" + Math.random().toString(36).slice(2);
 function $7f5a58334d8866a5$var$buildHeaderRows(keyMap, columnNodes) {
     let columns = [];
@@ -415,14 +536,13 @@ function $7f5a58334d8866a5$var$buildHeaderRows(keyMap, columnNodes) {
         return row;
     });
 }
+let $7f5a58334d8866a5$var$_Symbol_iterator = Symbol.iterator;
 class $7f5a58334d8866a5$export$596e1b2e2cf93690 extends (0, $56JBj$reactstatelygrid.GridCollection) {
-    *[Symbol.iterator]() {
+    *[$7f5a58334d8866a5$var$_Symbol_iterator]() {
         yield* this.body.childNodes;
     }
     get size() {
-        return [
-            ...this.body.childNodes
-        ].length;
+        return this._size;
     }
     getKeys() {
         return this.keyMap.keys();
@@ -436,17 +556,17 @@ class $7f5a58334d8866a5$export$596e1b2e2cf93690 extends (0, $56JBj$reactstatelyg
         return node ? node.nextKey : null;
     }
     getFirstKey() {
-        var ref;
-        return (ref = [
+        var _;
+        return (_ = [
             ...this.body.childNodes
-        ][0]) === null || ref === void 0 ? void 0 : ref.key;
+        ][0]) === null || _ === void 0 ? void 0 : _.key;
     }
     getLastKey() {
-        var ref;
+        var _rows_;
         let rows = [
             ...this.body.childNodes
         ];
-        return (ref = rows[rows.length - 1]) === null || ref === void 0 ? void 0 : ref.key;
+        return (_rows_ = rows[rows.length - 1]) === null || _rows_ === void 0 ? void 0 : _rows_.key;
     }
     getItem(key) {
         return this.keyMap.get(key);
@@ -510,10 +630,14 @@ class $7f5a58334d8866a5$export$596e1b2e2cf93690 extends (0, $56JBj$reactstatelyg
                 return node;
             }
         });
+        (0, ($parcel$interopDefault($56JBj$swchelperslib_define_propertyjs)))(this, "_size", 0);
         this.columns = columns;
         this.rowHeaderColumnKeys = rowHeaderColumnKeys;
         this.body = body;
         this.headerRows = headerRows;
+        this._size = [
+            ...body.childNodes
+        ].length;
         // Default row header column to the first one.
         if (this.rowHeaderColumnKeys.size === 0) this.rowHeaderColumnKeys.add(this.columns[(opts === null || opts === void 0 ? void 0 : opts.showSelectionCheckboxes) ? 1 : 0].key);
     }
@@ -552,10 +676,10 @@ function $e3f7784147dde23d$export$907bcc6c48325fd6(props) {
         isKeyboardNavigationDisabled: collection.size === 0 || isKeyboardNavigationDisabled,
         setKeyboardNavigationDisabled: setKeyboardNavigationDisabled,
         sort (columnKey, direction) {
-            var ref;
+            var _props_sortDescriptor;
             props.onSortChange({
                 column: columnKey,
-                direction: direction !== null && direction !== void 0 ? direction : ((ref = props.sortDescriptor) === null || ref === void 0 ? void 0 : ref.column) === columnKey ? $e3f7784147dde23d$var$OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction] : "ascending"
+                direction: direction !== null && direction !== void 0 ? direction : ((_props_sortDescriptor = props.sortDescriptor) === null || _props_sortDescriptor === void 0 ? void 0 : _props_sortDescriptor.column) === columnKey ? $e3f7784147dde23d$var$OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction] : "ascending"
             });
         }
     };
@@ -810,4 +934,5 @@ let $ad4ab0a21c733e1f$export$f6f0c3fe4ec306ea = $ad4ab0a21c733e1f$var$Cell;
 //# sourceMappingURL=main.js.map