@linzjs/step-ag-grid 29.11.2 → 29.11.4

package/dist/src/contexts/GridContext.d.ts

@@ -38,7 +38,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     ensureRowVisible: (id: number | string) => boolean;
     ensureSelectedRowIsVisible: () => void;
     getFirstRowId: () => number;
-    autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
+    autoSizeColumns: (props?: AutoSizeColumnsProps) => Promise<AutoSizeColumnsResult>;
     sizeColumnsToFit: (paramsOrGridWidth?: ISizeColumnsToFitParams) => void;
     startCellEditing: ({ rowId, colId }: StartCellEditingProps) => Promise<void>;
     resetFocusedCellAfterCellEditing: () => void;

package/dist/step-ag-grid.cjs

@@ -509,9 +509,9 @@ const GridContext = React.createContext({
         console.error('no context provider for getFirstRowId');
         return -1;
     },
-    autoSizeColumns: () => {
+    autoSizeColumns: async () => {
         console.error('no context provider for autoSizeColumns');
-        return null;
+        return Promise.resolve(null);
     },
     sizeColumnsToFit: () => {
         console.error('no context provider for autoSizeAllColumns');
@@ -2787,67 +2787,77 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const needsAutoSize = React.useRef(true);
     const autoSizeResultRef = React.useRef(null);
     const prevRowsVisibleRef = React.useRef(false);
-    const setInitialContentSize = React.useCallback(() => {
-        if (!gridDivRef.current?.clientWidth || rowData == null) {
-            // Don't resize grids if they are offscreen as it doesn't work.
-            needsAutoSize.current = true;
-            return;
-        }
-        const gridRendered = gridRenderState();
-        if (gridRendered === null) {
-            // Don't resize until grid has rendered, or it has 0 rows.
-            needsAutoSize.current = true;
+    const initialContentSizeInProgressRef = React.useRef(false);
+    const setInitialContentSize = React.useCallback(async () => {
+        if (initialContentSizeInProgressRef.current) {
             return;
         }
-        // 1. First we autosize to get the size of the columns on an infinite grid.
-        if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
-            // You can't skip headers until the grid has content
-            const rowsVisible = gridRendered === 'rows-visible';
-            const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
-            // If grid was empty and now has content we need to autosize
-            if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
-                prevRowsVisibleRef.current = rowsVisible;
-                autoSizeResultRef.current = null;
+        initialContentSizeInProgressRef.current = true;
+        try {
+            needsAutoSize.current = false;
+            if (!gridDivRef.current?.clientWidth || rowData == null) {
+                // Don't resize grids if they are offscreen as it doesn't work.
+                needsAutoSize.current = true;
+                return;
             }
-            const autoSizeResult = autoSizeResultRef.current ??
-                autoSizeColumns({
-                    skipHeader,
-                    userSizedColIds: new Set(userSizedColIds.current.keys()),
-                });
-            // Auto-size failed retry later
-            if (!autoSizeResult) {
+            const gridRendered = gridRenderState();
+            if (gridRendered === null) {
+                // Don't resize until grid has rendered, or it has 0 rows.
                 needsAutoSize.current = true;
                 return;
             }
-            autoSizeResultRef.current = autoSizeResult;
-            // Calculate the auto-sized width, limit it to maxInitialWidth
-            autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
-            if (gridRendered === 'empty') {
-                // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
-                // We don't do this callback if we have previously had row data, or have already called back for empty
-                if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
-                    hasSetContentSizeEmpty.current = true;
-                    params.onContentSize?.(autoSizeResult);
+            // 1. First we autosize to get the size of the columns on an infinite grid.
+            if (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') {
+                // You can't skip headers until the grid has content
+                const rowsVisible = gridRendered === 'rows-visible';
+                const skipHeader = sizeColumns === 'auto-skip-headers' && rowsVisible;
+                // If grid was empty and now has content we need to autosize
+                if (rowsVisible !== prevRowsVisibleRef.current && rowsVisible) {
+                    prevRowsVisibleRef.current = rowsVisible;
+                    autoSizeResultRef.current = null;
                 }
-            }
-            else if (gridRendered === 'rows-visible') {
-                // we have rows now so callback grid size
-                if (!hasSetContentSize.current) {
-                    hasSetContentSize.current = true;
-                    params.onContentSize?.(autoSizeResult);
+                const autoSizeResult = autoSizeResultRef.current ??
+                    (await autoSizeColumns({
+                        skipHeader,
+                        userSizedColIds: new Set(userSizedColIds.current.keys()),
+                    }));
+                // Auto-size failed retry later
+                if (!autoSizeResult) {
+                    needsAutoSize.current = true;
+                    return;
+                }
+                autoSizeResultRef.current = autoSizeResult;
+                // Calculate the auto-sized width, limit it to maxInitialWidth
+                autoSizeResult.width = maxInitialWidth ? Math.min(autoSizeResult.width, maxInitialWidth) : autoSizeResult.width;
+                if (gridRendered === 'empty') {
+                    // If the grid is empty we still do an onContentSize callback, we will do another callback when grid has data
+                    // We don't do this callback if we have previously had row data, or have already called back for empty
+                    if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
+                        hasSetContentSizeEmpty.current = true;
+                        params.onContentSize?.(autoSizeResult);
+                    }
+                }
+                else if (gridRendered === 'rows-visible') {
+                    // we have rows now so callback grid size
+                    if (!hasSetContentSize.current) {
+                        hasSetContentSize.current = true;
+                        params.onContentSize?.(autoSizeResult);
+                    }
+                }
+                else {
+                    // It should be impossible to get here
+                    console.error('Unknown value returned from hasGridRendered');
                 }
             }
             else {
-                // It should be impossible to get here
-                console.error('Unknown value returned from hasGridRendered');
+                sizeColumnsToFit();
             }
+            setAutoSized(true);
+            needsAutoSize.current = false;
         }
-        else {
-            console.log('sizeColumnsToFit 3');
-            sizeColumnsToFit();
+        finally {
+            initialContentSizeInProgressRef.current = false;
         }
-        setAutoSized(true);
-        needsAutoSize.current = false;
     }, [autoSizeColumns, gridRenderState, maxInitialWidth, params, rowData, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = React.useRef();
     const wasVisibleRef = React.useRef(false);
@@ -2881,8 +2891,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         if (needsAutoSize.current ||
             (!hasSetContentSize.current && (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers'))) {
-            needsAutoSize.current = false;
-            setInitialContentSize();
+            void setInitialContentSize();
         }
     }, 200);
     /**
@@ -3011,11 +3020,13 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         if (previousRowDataLength.current !== length) {
             // We need to autosize all cells again
             autoSizeResultRef.current = null;
-            setInitialContentSize();
             previousRowDataLength.current = length;
+            void setInitialContentSize();
+            return;
         }
-        if (lastUpdatedDep.current === updatedDep || lodashEs.isEmpty(colIdsEdited.current))
+        if (lastUpdatedDep.current === updatedDep || lodashEs.isEmpty(colIdsEdited.current)) {
             return;
+        }
         lastUpdatedDep.current = updatedDep;
         // Don't update while there are spinners
         if (anyUpdating()) {
@@ -3023,7 +3034,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
         const skipHeader = sizeColumns === 'auto-skip-headers';
         if ((sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && hasSetContentSize.current) {
-            autoSizeColumns({
+            void autoSizeColumns({
                 skipHeader,
                 userSizedColIds: new Set(userSizedColIds.current.keys()),
                 colIds: colIdsEdited.current,
@@ -3113,11 +3124,21 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             ...colDef,
             children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
         });
-        const adjustColDef = (colDef) => ({
-            ...colDef,
-            suppressSizeToFit: (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && !colDef.flex,
-            sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
-        });
+        const adjustColDef = (colDef) => {
+            const flex = colDef.flex ?? (sizeColumns === 'fit' ? 1 : undefined);
+            return {
+                ...colDef,
+                // You cannot pass a width to a flex
+                width: !!colDef.flex ? undefined : colDef.width,
+                flexAutoSizeWidth: colDef.width,
+                // If this is allowed flex columns don't size based on flex
+                suppressSizeToFit: true,
+                // Auto-sizing flex columns breaks everything
+                flex,
+                suppressAutoSize: !!flex,
+                sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
+            };
+        };
         return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
     }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
     /**
@@ -3142,7 +3163,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 if (sizeColumns === 'auto' || skipHeader) {
                     lodashEs.defer(() => {
                         if (hasSetContentSize.current) {
-                            autoSizeColumns({
+                            void autoSizeColumns({
                                 skipHeader,
                                 userSizedColIds: new Set(userSizedColIds.current.keys()),
                                 colIds: colIdsEdited.current,
@@ -3297,7 +3318,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     }, [columnDefs, params.loading, params.noRowsMatchingOverlayText, params.noRowsOverlayText, rowData, rowHeight]);
     const selectionColumnDef = React.useMemo(() => {
         // Note this has to be 1 for hidden otherwise ag-grid does crazy things whilst resizing
-        const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
+        const selectWidth = params.onRowDragEnd ? 76 : 48;
         return {
             suppressNavigable: params.hideSelectColumn,
             rowDrag: !!params.onRowDragEnd,
@@ -3307,6 +3328,8 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             headerComponentParams: {
                 exportable: false,
             },
+            suppressAutoSize: true,
+            suppressSizeToFit: true,
             headerClass: clsx('ag-header-hide-default-select', params.onRowDragEnd && 'ag-header-select-draggable'),
             headerComponent: rowSelection == 'multiple' ? GridHeaderSelect : undefined,
             suppressHeaderKeyboardEvent: (e) => {
@@ -3336,13 +3359,22 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         selectColumnPinned,
         selectable,
     ]);
+    const onGridSizeChanged = React.useCallback((event) => {
+        if (sizeColumns === 'fit' || (['auto', 'auto-skip-headers'].includes(sizeColumns) && hasSetContentSize.current)) {
+            event.api.sizeColumnsToFit();
+        }
+    }, [sizeColumns]);
     return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { theme: 'legacy', rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
                             mode: rowSelection === 'single' ? 'singleRow' : 'multiRow',
+                            ...(params.hideSelectColumn && {
+                                checkboxes: false,
+                                headerCheckbox: false,
+                            }),
                         }
-                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
+                        : undefined, selectionColumnDef: selectionColumnDef, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onGridSizeChanged: onGridSizeChanged, onColumnVisible: () => void setInitialContentSize(), onRowDataUpdated: onRowDataUpdated, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, onRowClicked: params.onRowClicked, onRowDoubleClicked: params.onRowDoubleClicked, suppressStartEditOnTab: true }) })] }));
 };
 const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas
@@ -5606,7 +5638,7 @@ const GridContextProvider = (props) => {
      * If you don't clear flex column widths ag-grid gets confused and does random sizing's.
      * Then we size the flexed columns.
      */
-    const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds } = {}) => {
+    const autoSizeColumns = React.useCallback(async ({ skipHeader, colIds, userSizedColIds } = {}) => {
         if (!gridApi || !gridApi.getColumnState()) {
             return null;
         }
@@ -5620,23 +5652,34 @@ const GridContextProvider = (props) => {
         };
         const getFlexColStates = () => getVisibleColStates().filter(colStateFlexed);
         const getNonFlexColStates = () => getVisibleColStates().filter(colStateNotFlexed);
-        // If we don't reset the flex columns auto size it causes issues with random resizing of flex columns
-        let flexColumns = getFlexColStates();
+        // You cannot autosize flex columns it will break layout randomly
+        // So, a flex column is assumed to be 150 wide, unless width is provided
+        const flexColumns = getFlexColStates().map(colStateId);
         let width = 0;
-        if (!lodashEs.isEmpty(flexColumns)) {
-            gridApi.autoSizeColumns(flexColumns.map(colStateId), skipHeader);
-            const flexColumnIds = flexColumns.map(colStateId);
-            flexColumns = getVisibleColStates().filter((colState) => flexColumnIds.includes(colState.colId));
-            width += lodashEs.sumBy(flexColumns.filter((col) => !col.hide), 'width');
-            gridApi.resetColumnState();
-        }
-        let nonFlexColumns = getNonFlexColStates();
-        if (!lodashEs.isEmpty(nonFlexColumns)) {
-            gridApi.autoSizeColumns(nonFlexColumns.map(colStateId), skipHeader);
-            const nonFlexColumnIds = nonFlexColumns.map(colStateId);
-            nonFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
-            width += lodashEs.sumBy(nonFlexColumns.filter((col) => !col.hide), 'width');
+        flexColumns.forEach((colId) => {
+            const colDef = gridApi.getColumnDef(colId);
+            width += colDef?.flexAutoSizeWidth ?? 200;
+        });
+        const nonFlexColumns = getNonFlexColStates();
+        const nonFlexColumnIds = nonFlexColumns.map(colStateId);
+        gridApi.autoSizeColumns({ colIds: nonFlexColumnIds, skipHeader });
+        const calcSubWidth = () => {
+            const updatedFlexColumns = getVisibleColStates().filter((colState) => nonFlexColumnIds.includes(colState.colId));
+            return lodashEs.sumBy(updatedFlexColumns.filter((col) => !col.hide), 'width');
+        };
+        // ag-grid updates widths asynchronously, so we wait here for the default calculated width to change
+        let lastSubWidth = calcSubWidth();
+        const endTime = Date.now() + 1000;
+        while (Date.now() < endTime) {
+            await wait(40);
+            const newSubWidth = calcSubWidth();
+            if (lastSubWidth !== newSubWidth) {
+                lastSubWidth = newSubWidth;
+                break;
+            }
         }
+        width += lastSubWidth;
+        gridApi.sizeColumnsToFit();
         return {
             width,
         };