@react-stately/table 3.2.0 → 3.2.1-nightly.3287

package/dist/module.js

@@ -1,18 +1,294 @@
 import {Section as $6555104ff085bef4$re_export$Section, useCollection as $1BfjW$useCollection} from "@react-stately/collections";
+import $1BfjW$react, {useRef as $1BfjW$useRef, useState as $1BfjW$useState, useCallback as $1BfjW$useCallback, useMemo as $1BfjW$useMemo} from "react";
 import {useGridState as $1BfjW$useGridState, GridCollection as $1BfjW$GridCollection} from "@react-stately/grid";
-import $1BfjW$react, {useMemo as $1BfjW$useMemo} from "react";
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
+var $292bc4e09cd0eb62$exports = {};
+
+$parcel$export($292bc4e09cd0eb62$exports, "useTableColumnResizeState", () => $292bc4e09cd0eb62$export$cb895dcf85db1319);
+var $30561577df230a30$exports = {};
+
+$parcel$export($30561577df230a30$exports, "getContentWidth", () => $30561577df230a30$export$f61abf052f87399f);
+$parcel$export($30561577df230a30$exports, "isStatic", () => $30561577df230a30$export$1994a077b98ee0d5);
+$parcel$export($30561577df230a30$exports, "parseStaticWidth", () => $30561577df230a30$export$7bbad27896f7ae9f);
+$parcel$export($30561577df230a30$exports, "getMaxWidth", () => $30561577df230a30$export$59185c62a7544aa0);
+$parcel$export($30561577df230a30$exports, "getMinWidth", () => $30561577df230a30$export$f556054ce4358701);
+$parcel$export($30561577df230a30$exports, "getDynamicColumnWidths", () => $30561577df230a30$export$a870e6692ac5ccb2);
+function $30561577df230a30$export$f61abf052f87399f(widths) {
+    return Array.from(widths).map((e)=>e[1]
+    ).reduce((acc, cur)=>acc + cur
+    , 0);
+}
+function $30561577df230a30$export$1994a077b98ee0d5(width) {
+    return width != null && (!isNaN(width) || String(width).match(/^(\d+)(?=%$)/) !== null);
+}
+function $30561577df230a30$var$parseFractionalUnit(width) {
+    if (!width) return 1;
+    let match = width.match(/^(\d+)(?=fr$)/);
+    // if width is the incorrect format, just deafult 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);
+}
+function $30561577df230a30$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 width;
+}
+function $30561577df230a30$export$59185c62a7544aa0(maxWidth, tableWidth) {
+    return maxWidth != null ? $30561577df230a30$export$7bbad27896f7ae9f(maxWidth, tableWidth) : Infinity;
+}
+function $30561577df230a30$export$f556054ce4358701(minWidth, tableWidth) {
+    return minWidth != null ? $30561577df230a30$export$7bbad27896f7ae9f(minWidth, tableWidth) : 75;
+}
+function $30561577df230a30$var$mapDynamicColumns(dynamicColumns, availableSpace, tableWidth) {
+    let fractions = dynamicColumns.reduce((sum, column)=>sum + $30561577df230a30$var$parseFractionalUnit(column.props.defaultWidth)
+    , 0);
+    let columns = dynamicColumns.map((column, index)=>{
+        const targetWidth = $30561577df230a30$var$parseFractionalUnit(column.props.defaultWidth) * availableSpace / fractions;
+        const delta = Math.max($30561577df230a30$export$f556054ce4358701(column.props.minWidth, tableWidth) - targetWidth, targetWidth - $30561577df230a30$export$59185c62a7544aa0(column.props.maxWidth, tableWidth));
+        return {
+            ...column,
+            index: index,
+            delta: delta
+        };
+    });
+    return columns;
+}
+function $30561577df230a30$var$findDynamicColumnWidths(dynamicColumns, availableSpace, tableWidth) {
+    let fractions = dynamicColumns.reduce((sum, col)=>sum + $30561577df230a30$var$parseFractionalUnit(col.props.defaultWidth)
+    , 0);
+    const columns = dynamicColumns.map((column)=>{
+        const targetWidth = $30561577df230a30$var$parseFractionalUnit(column.props.defaultWidth) * availableSpace / fractions;
+        let width = Math.max($30561577df230a30$export$f556054ce4358701(column.props.minWidth, tableWidth), Math.min(Math.floor(targetWidth), $30561577df230a30$export$59185c62a7544aa0(column.props.maxWidth, tableWidth)));
+        column.calculatedWidth = width;
+        availableSpace -= width;
+        fractions -= $30561577df230a30$var$parseFractionalUnit(column.props.defaultWidth);
+        return column;
+    });
+    return columns;
+}
+function $30561577df230a30$export$a870e6692ac5ccb2(dynamicColumns, availableSpace, tableWidth) {
+    let columns = $30561577df230a30$var$mapDynamicColumns(dynamicColumns, availableSpace, tableWidth);
+    columns.sort((a, b)=>b.delta - a.delta
+    );
+    columns = $30561577df230a30$var$findDynamicColumnWidths(columns, availableSpace, tableWidth);
+    columns.sort((a, b)=>a.index - b.index
+    );
+    return columns;
+}
+
+
+
+function $292bc4e09cd0eb62$export$cb895dcf85db1319(props) {
+    const { columns: columns1 , getDefaultWidth: getDefaultWidth , tableWidth: defaultTableWidth = null  } = props;
+    const columnsRef = $1BfjW$useRef([]);
+    const tableWidth = $1BfjW$useRef(defaultTableWidth);
+    const isResizing = $1BfjW$useRef(null);
+    const startResizeContentWidth = $1BfjW$useRef();
+    const [columnWidths, setColumnWidths] = $1BfjW$useState(new Map(columns1.map((col)=>[
+            col.key,
+            0
+        ]
+    )));
+    const columnWidthsRef = $1BfjW$useRef(columnWidths);
+    const affectedColumnWidthsRef = $1BfjW$useRef([]);
+    const [resizedColumns, setResizedColumns] = $1BfjW$useState(new Set());
+    const resizedColumnsRef = $1BfjW$useRef(resizedColumns);
+    function setColumnWidthsForRef(newWidths) {
+        columnWidthsRef.current = newWidths;
+        // new map so that change detection is triggered
+        setColumnWidths(newWidths);
+    }
+    /*
+    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 = $1BfjW$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 = $1BfjW$useCallback((columns)=>columns.reduce((acc, column)=>{
+            let width = getResolvedColumnWidth(column);
+            return $30561577df230a30$export$1994a077b98ee0d5(width) ? {
+                ...acc,
+                staticColumns: [
+                    ...acc.staticColumns,
+                    column
+                ]
+            } : {
+                ...acc,
+                dynamicColumns: [
+                    ...acc.dynamicColumns,
+                    column
+                ]
+            };
+        }, {
+            staticColumns: [],
+            dynamicColumns: []
+        })
+    , [
+        getResolvedColumnWidth
+    ]);
+    let buildColumnWidths = $1BfjW$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 = $30561577df230a30$export$7bbad27896f7ae9f(width, tableWidth.current);
+            widths.set(column.key, w);
+            remainingSpace -= w;
+        });
+        // dynamic columns
+        if (dynamicColumns.length > 0) {
+            const newColumnWidths = $30561577df230a30$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 = columns1.map((col)=>col.key
+    );
+    // if the columns change, need to rebuild widths.
+    if (!colKeys.every((col, i)=>col === prevColKeys[i]
+    )) {
+        columnsRef.current = columns1;
+        const widths = buildColumnWidths(columns1, tableWidth.current);
+        setColumnWidthsForRef(widths);
+    }
+    function setTableWidth(width) {
+        if (width && width !== tableWidth.current) {
+            tableWidth.current = width;
+            if (!isResizing.current) {
+                const widths = buildColumnWidths(columns1, width);
+                setColumnWidthsForRef(widths);
+            }
+        }
+    }
+    function onColumnResizeStart() {
+        isResizing.current = true;
+        startResizeContentWidth.current = $30561577df230a30$export$f61abf052f87399f(columnWidthsRef.current);
+    }
+    function onColumnResize(column, width) {
+        let widthsObj = resizeColumn(column, width);
+        affectedColumnWidthsRef.current = widthsObj;
+        props.onColumnResize && props.onColumnResize(affectedColumnWidthsRef.current);
+    }
+    function onColumnResizeEnd() {
+        isResizing.current = false;
+        props.onColumnResizeEnd && props.onColumnResizeEnd(affectedColumnWidthsRef.current);
+        affectedColumnWidthsRef.current = [];
+        let widths = new Map(columnWidthsRef.current);
+        // Need to set the resizeBufferColumn or "spooky column" back to 0 since done resizing;
+        const bufferColumnKey = columnsRef.current[columnsRef.current.length - 1].key;
+        widths.set(bufferColumnKey, 0);
+        setColumnWidthsForRef(widths);
+    }
+    function resizeColumn(column1, newWidth) {
+        let boundedWidth = Math.max($30561577df230a30$export$f556054ce4358701(column1.props.minWidth, tableWidth.current), Math.min(Math.floor(newWidth), $30561577df230a30$export$59185c62a7544aa0(column1.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(columnsRef.current[columnsRef.current.length - 1].key, 0);
+        widths.set(column1.key, boundedWidth);
+        // keep track of all columns that have been sized
+        resizedColumnsRef.current.add(column1.key);
+        setResizedColumns(resizedColumnsRef.current);
+        // get the columns affected by resize and remaining space
+        const resizeIndex = columnsRef.current.findIndex((col)=>col.key === column1.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 || $30561577df230a30$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
+        ]);
+        if (startResizeContentWidth.current > tableWidth.current) widths.set(columnsRef.current[columnsRef.current.length - 1].key, Math.max(0, startResizeContentWidth.current - $30561577df230a30$export$f61abf052f87399f(widths)));
+        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 = [
+            [
+                column1.key,
+                boundedWidth
+            ],
+            ...recalculatedColumnWidths
+        ].map(([key, width])=>({
+                key: key,
+                width: width
+            })
+        );
+        return allAffectedColumns;
+    }
+    var ref2;
+    // This function is regenerated whenever columnWidthsRef.current changes in order to get the new correct ref value.
+    let getColumnWidth = $1BfjW$useCallback((key)=>(ref2 = columnWidthsRef.current.get(key)) !== null && ref2 !== void 0 ? ref2 : 0
+    , [
+        columnWidthsRef.current
+    ]);
+    let getColumnMinWidth = $1BfjW$useCallback((key)=>{
+        const columnIndex = columns1.findIndex((col)=>col.key === key
+        );
+        if (columnIndex === -1) return;
+        return $30561577df230a30$export$f556054ce4358701(columns1[columnIndex].props.minWidth, tableWidth.current);
+    }, [
+        columns1
+    ]);
+    let getColumnMaxWidth = $1BfjW$useCallback((key)=>{
+        const columnIndex = columns1.findIndex((col)=>col.key === key
+        );
+        if (columnIndex === -1) return;
+        return $30561577df230a30$export$59185c62a7544aa0(columns1[columnIndex].props.maxWidth, tableWidth.current);
+    }, [
+        columns1
+    ]);
+    return {
+        columnWidths: columnWidthsRef,
+        setTableWidth: setTableWidth,
+        onColumnResize: onColumnResize,
+        onColumnResizeStart: onColumnResizeStart,
+        onColumnResizeEnd: onColumnResizeEnd,
+        getColumnWidth: getColumnWidth,
+        getColumnMinWidth: getColumnMinWidth,
+        getColumnMaxWidth: getColumnMaxWidth,
+        isResizingColumn: isResizing.current
+    };
+}
+
+
+
 var $4a0dd036d492cee4$exports = {};
 
 $parcel$export($4a0dd036d492cee4$exports, "useTableState", () => $4a0dd036d492cee4$export$907bcc6c48325fd6);
 
 
 
+
 const $788781baa30117fa$var$ROW_HEADER_COLUMN_KEY = 'row-header-column-' + Math.random().toString(36).slice(2);
-// const RESIZE_BUFFER_COLUMN_KEY = 'resize-buffer-column' + Math.random().toString(36).slice(2);
+const $788781baa30117fa$var$RESIZE_BUFFER_COLUMN_KEY = 'resize-buffer-column' + Math.random().toString(36).slice(2);
 function $788781baa30117fa$var$buildHeaderRows(keyMap, columnNodes) {
     let columns = [];
     let seen = new Map();
@@ -216,35 +492,38 @@ class $788781baa30117fa$export$596e1b2e2cf93690 extends $1BfjW$GridCollection {
             for (let child of node.childNodes)visit(child);
         };
         for (let node1 of nodes)visit(node1);
-        // if (Array.from(nodes).some(node => node.props?.allowsResizing)) {
-        //   /*
-        //   If the table content width > table width, a horizontal scroll bar is present.
-        //   If a user tries to resize a column, making it smaller while they are scrolled to the
-        //   end of the content horizontally, it shrinks the total table content width, causing
-        //   things to snap around and breaks the resize behavior.
-        //   To fix this, we add a resize buffer column (aka "spooky column") to the end of the table.
-        //   The width of this column defaults to 0. If you try and shrink a column and the width of the
-        //   table contents > table width, then the "spooky column" will grow to take up the difference
-        //   so that the total table content width remains constant while you are resizing. Once you
-        //   finish resizing, the "spooky column" snaps back to 0.
-        //   */
-        //   let resizeBufferColumn: GridNode<T> = {
-        //     type: 'column',
-        //     key: RESIZE_BUFFER_COLUMN_KEY,
-        //     value: null,
-        //     textValue: '',
-        //     level: 0,
-        //     index: columns.length,
-        //     hasChildNodes: false,
-        //     rendered: null,
-        //     childNodes: [],
-        //     props: {
-        //       isResizeBuffer: true,
-        //       defaultWidth: 0
-        //     }
-        //   };
-        //   columns.push(resizeBufferColumn);
-        // }
+        if (Array.from(nodes).some((node)=>{
+            var ref;
+            return (ref = node.props) === null || ref === void 0 ? void 0 : ref.allowsResizing;
+        })) {
+            /* 
+      If the table content width > table width, a horizontal scroll bar is present.
+      If a user tries to resize a column, making it smaller while they are scrolled to the
+      end of the content horizontally, it shrinks the total table content width, causing
+      things to snap around and breaks the resize behavior.
+      
+      To fix this, we add a resize buffer column (aka "spooky column") to the end of the table.
+      The width of this column defaults to 0. If you try and shrink a column and the width of the
+      table contents > table width, then the "spooky column" will grow to take up the difference
+      so that the total table content width remains constant while you are resizing. Once you
+      finish resizing, the "spooky column" snaps back to 0.
+      */ let resizeBufferColumn = {
+                type: 'column',
+                key: $788781baa30117fa$var$RESIZE_BUFFER_COLUMN_KEY,
+                value: null,
+                textValue: '',
+                level: 0,
+                index: columns.length,
+                hasChildNodes: false,
+                rendered: null,
+                childNodes: [],
+                props: {
+                    isResizeBuffer: true,
+                    defaultWidth: 0
+                }
+            };
+            columns.push(resizeBufferColumn);
+        }
         let headerRows = $788781baa30117fa$var$buildHeaderRows(columnKeyMap, columns);
         headerRows.forEach((row, i)=>rows.splice(i, 0, row)
         );
@@ -289,7 +568,12 @@ function $4a0dd036d492cee4$export$907bcc6c48325fd6(props) {
         ...props,
         collection: collection
     });
-    // const tableColumnResizeState = useTableColumnResizeState({columns: collection.columns, getDefaultWidth: props.getDefaultWidth, onColumnResize: props.onColumnResize, onColumnResizeEnd: props.onColumnResizeEnd});
+    const tableColumnResizeState = $292bc4e09cd0eb62$export$cb895dcf85db1319({
+        columns: collection.columns,
+        getDefaultWidth: props.getDefaultWidth,
+        onColumnResize: props.onColumnResize,
+        onColumnResizeEnd: props.onColumnResizeEnd
+    });
     return {
         collection: collection,
         disabledKeys: disabledKeys,
@@ -302,7 +586,8 @@ function $4a0dd036d492cee4$export$907bcc6c48325fd6(props) {
                 column: columnKey,
                 direction: direction !== null && direction !== void 0 ? direction : ((ref = props.sortDescriptor) === null || ref === void 0 ? void 0 : ref.column) === columnKey ? $4a0dd036d492cee4$var$OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction] : 'ascending'
             });
-        }
+        },
+        ...tableColumnResizeState
     };
 }
 
@@ -520,5 +805,5 @@ let $941d1d9a6a28982a$export$f6f0c3fe4ec306ea = $941d1d9a6a28982a$var$Cell;
 
 
 
-export {$6555104ff085bef4$re_export$Section as Section, $4a0dd036d492cee4$export$907bcc6c48325fd6 as useTableState, $312ae3b56a94a86e$export$f850895b287ef28e as TableHeader, $4ae5314bf50db1a3$export$76ccd210b9029917 as TableBody, $1cd244557c2f97d5$export$816b5d811295e6bc as Column, $70d70eb16ea48428$export$b59bdbef9ce70de2 as Row, $941d1d9a6a28982a$export$f6f0c3fe4ec306ea as Cell};
+export {$6555104ff085bef4$re_export$Section as Section, $292bc4e09cd0eb62$export$cb895dcf85db1319 as useTableColumnResizeState, $30561577df230a30$export$f61abf052f87399f as getContentWidth, $30561577df230a30$export$1994a077b98ee0d5 as isStatic, $30561577df230a30$export$7bbad27896f7ae9f as parseStaticWidth, $30561577df230a30$export$59185c62a7544aa0 as getMaxWidth, $30561577df230a30$export$f556054ce4358701 as getMinWidth, $30561577df230a30$export$a870e6692ac5ccb2 as getDynamicColumnWidths, $4a0dd036d492cee4$export$907bcc6c48325fd6 as useTableState, $312ae3b56a94a86e$export$f850895b287ef28e as TableHeader, $4ae5314bf50db1a3$export$76ccd210b9029917 as TableBody, $1cd244557c2f97d5$export$816b5d811295e6bc as Column, $70d70eb16ea48428$export$b59bdbef9ce70de2 as Row, $941d1d9a6a28982a$export$f6f0c3fe4ec306ea as Cell};
 //# sourceMappingURL=module.js.map