@linzjs/step-ag-grid 14.9.3 → 14.9.4

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

@@ -53,7 +53,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
     removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
     isExternalFilterPresent: () => boolean;
     doesExternalFilterPass: (node: RowNode) => boolean;
-    invisibleColumnIds: string[];
+    invisibleColumnIds: string[] | undefined;
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;
     setOnCellEditingComplete: (callback: (() => void) | undefined) => void;

package/dist/step-ag-grid.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, xorBy, last, difference, defer as defer$1, omit, sortBy, findIndex, debounce as debounce$1, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, sumBy, compact, remove, castArray, flatten } from 'lodash-es';
+import { negate, isEmpty, xorBy, last, difference, defer as defer$1, omit, sortBy, findIndex, debounce as debounce$1, compact, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, sumBy, remove, castArray, flatten } from 'lodash-es';
 import * as React from 'react';
 import { createContext, useContext, useRef, useEffect, useCallback, useState, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
@@ -42,7 +42,7 @@ const GridContext = createContext({
         console.error("no context provider for getColumns");
         return [];
     },
-    invisibleColumnIds: [],
+    invisibleColumnIds: undefined,
     setInvisibleColumnIds: () => {
         console.error("no context provider for setInvisibleColumnIds");
     },
@@ -518,11 +518,20 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
         needsAutoSize.current = false;
     }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
+    const lastOwnerDocumentRef = useRef();
     /**
      * Auto-size windows that had deferred auto-size
      */
     useIntervalHook({
         callback: () => {
+            // Check if window has been popped out and needs resize
+            const currentDocument = gridDivRef.current?.ownerDocument;
+            if (currentDocument !== lastOwnerDocumentRef.current) {
+                lastOwnerDocumentRef.current = currentDocument;
+                if (currentDocument) {
+                    needsAutoSize.current = true;
+                }
+            }
             if (needsAutoSize.current) {
                 needsAutoSize.current = false;
                 setInitialContentSize();
@@ -801,11 +810,19 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      * Once the grid has auto-sized we want to run fit to fit the grid in its container,
      * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
      */
-    const columnDefsAdjusted = useMemo(() => columnDefs.map((colDef) => ({
-        ...colDef,
-        suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
-        sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
-    })), [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
+    const columnDefsAdjusted = useMemo(() => {
+        const adjustColDefOrGroup = (colDef) => "children" in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
+        const adjustGroupColDef = (colDef) => ({
+            ...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,
+        });
+        return columnDefs.map((colDef) => adjustColDefOrGroup(colDef));
+    }, [columnDefs, params.defaultColDef?.sortable, sizeColumns]);
     /**
      * Set of colIds that need auto-sizing.
      */
@@ -2900,15 +2917,23 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
         if (saveState) {
             try {
                 const stored = window.localStorage.getItem(columnStorageKey);
-                const invisibleIds = JSON.parse(stored ?? "[]");
-                if (!Array.isArray(invisibleIds)) {
-                    console.error(`stored invisible ids not an array: ${stored}`);
-                }
-                else if (!invisibleIds.every((id) => typeof id === "string")) {
-                    console.error(`stored invisible ids not strings: ${stored}`);
+                if (!stored) {
+                    // infer the invisible ids from colDefs
+                    setInvisibleColumnIds(compact(getColumns()
+                        .filter((col) => col.initialHide)
+                        .map((col) => col.colId)));
                 }
                 else {
-                    invisibleIds && setInvisibleColumnIds(invisibleIds);
+                    const invisibleIds = JSON.parse(stored ?? "[]");
+                    if (!Array.isArray(invisibleIds)) {
+                        console.error(`stored invisible ids not an array: ${stored}`);
+                    }
+                    else if (!invisibleIds.every((id) => typeof id === "string")) {
+                        console.error(`stored invisible ids not strings: ${stored}`);
+                    }
+                    else {
+                        invisibleIds && setInvisibleColumnIds(invisibleIds);
+                    }
                 }
             }
             catch (ex) {
@@ -2916,7 +2941,7 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
             }
             setLoaded(true);
         }
-    }, [columnStorageKey, loaded, saveState, setInvisibleColumnIds]);
+    }, [columnStorageKey, getColumns, loaded, saveState, setInvisibleColumnIds]);
     // Save state on column visibility change
     useEffect(() => {
         loaded &&
@@ -2925,7 +2950,7 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
             window.localStorage.setItem(columnStorageKey, JSON.stringify(invisibleColumnIds));
     }, [columnStorageKey, invisibleColumnIds, loaded, saveState]);
     const toggleColumn = useCallback((colId) => {
-        if (!colId)
+        if (!colId || !invisibleColumnIds)
             return;
         setInvisibleColumnIds(invisibleColumnIds.includes(colId)
             ? invisibleColumnIds.filter((id) => id !== colId)
@@ -2948,7 +2973,7 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
                                 toggleColumn(col.colId);
                             }
                         }
-                    }, children: jsx(LuiCheckboxInput, { isChecked: !invisibleColumnIds.includes(col.colId ?? ""), value: `${col.colId}`, label: col.headerName ?? "", isDisabled: isNonManageableColumn(col), inputProps: {
+                    }, children: jsx(LuiCheckboxInput, { isChecked: !!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? ""), value: `${col.colId}`, label: col.headerName ?? "", isDisabled: isNonManageableColumn(col), inputProps: {
                             onClick: (e) => {
                                 // Click is handled by MenuItem onClick so keyboard events work
                                 e.preventDefault();
@@ -4430,7 +4455,7 @@ const GridContextProvider = (props) => {
     const [columnApi, setColumnApi] = useState();
     const [gridReady, setGridReady] = useState(false);
     const [quickFilter, setQuickFilter] = useState("");
-    const [invisibleColumnIds, setInvisibleColumnIds] = useState([]);
+    const [invisibleColumnIds, setInvisibleColumnIds] = useState();
     const testId = useRef();
     const idsBeforeUpdate = useRef([]);
     const prePopupFocusedCell = useRef();
@@ -4550,6 +4575,10 @@ const GridContextProvider = (props) => {
             .map((rowId) => gridApi.getRowNode("" + rowId)) //
             .filter((r) => r), () => []);
     }, [gridApiOp]);
+    /**
+     * Get ColDefs, with flattened ColGroupDefs
+     */
+    const getColumns = useCallback(() => columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [], [columnApi]);
     /**
      * Internal method for selecting and flashing rows.
      *
@@ -4573,9 +4602,9 @@ const GridContextProvider = (props) => {
             const firstNode = rowsThatNeedSelecting[0];
             if (firstNode) {
                 defer$1(() => gridApi.ensureNodeVisible(firstNode));
-                const colDefs = gridApi.getColumnDefs();
-                if (colDefs?.length) {
-                    const col = colDefs[0]; // We don't support ColGroupDef
+                const colDefs = getColumns();
+                if (!isEmpty(colDefs)) {
+                    const col = colDefs[0];
                     const rowIndex = firstNode.rowIndex;
                     if (rowIndex != null && col != null) {
                         const colId = col.colId;
@@ -4606,7 +4635,7 @@ const GridContextProvider = (props) => {
                 }, 250);
             }
         });
-    }, [_getNewNodes, _rowIdsToNodes, gridApiOp]);
+    }, [_getNewNodes, _rowIdsToNodes, getColumns, gridApiOp]);
     const selectRowsById = useCallback((rowIds) => _selectRowsWithOptionalFlash(rowIds, true, false), [_selectRowsWithOptionalFlash]);
     const selectRowsByIdWithFlash = useCallback((rowIds) => _selectRowsWithOptionalFlash(rowIds, true, true), [_selectRowsWithOptionalFlash]);
     const flashRows = useCallback((rowIds) => _selectRowsWithOptionalFlash(rowIds, false, true), [_selectRowsWithOptionalFlash]);
@@ -4839,9 +4868,8 @@ const GridContextProvider = (props) => {
         return externalFilters.current.every((filter) => filter(node.data, node));
     };
     const getColDef = useCallback((colId) => (!!colId && gridApi?.getColumnDef(colId)) || undefined, [gridApi]);
-    const getColumns = useCallback(() => gridApi?.getColumnDefs() ?? [], [gridApi]);
     useEffect(() => {
-        if (columnApi) {
+        if (columnApi && invisibleColumnIds) {
             // show all columns that aren't invisible
             columnApi.setColumnsVisible(compact(getColumns()
                 .filter((col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId))