@linzjs/step-ag-grid 14.9.3 → 14.9.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "14.9.3",
+  "version": "14.9.4",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/Grid.tsx

@@ -1,4 +1,4 @@
-import { CellClickedEvent, ColDef, ColumnResizedEvent, ModelUpdatedEvent } from "ag-grid-community";
+import { CellClickedEvent, ColDef, ColGroupDef, ColumnResizedEvent, ModelUpdatedEvent } from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
@@ -153,11 +153,21 @@ export const Grid = ({
     needsAutoSize.current = false;
   }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
 
+  const lastOwnerDocumentRef = useRef<Document>();
+
   /**
    * 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();
@@ -277,7 +287,7 @@ export const Grid = ({
   /**
    * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
    */
-  const columnDefs = useMemo((): ColDef[] => {
+  const columnDefs = useMemo((): (ColDef | ColGroupDef)[] => {
     const adjustColDefs = params.columnDefs.map((colDef) => {
       const colDefEditable = colDef.editable;
       const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
@@ -471,15 +481,23 @@ export const Grid = ({
    * 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: ColDef | ColGroupDef) =>
+      "children" in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
+
+    const adjustGroupColDef = (colDef: ColGroupDef): ColGroupDef => ({
+      ...colDef,
+      children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
+    });
+
+    const adjustColDef = (colDef: ColDef): 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.

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash-es";
+import { compact, isEmpty } from "lodash-es";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import { LuiCheckboxInput, LuiIcon } from "@linzjs/lui";
@@ -35,20 +35,31 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
     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) {
         console.error(ex);
       }
       setLoaded(true);
     }
-  }, [columnStorageKey, loaded, saveState, setInvisibleColumnIds]);
+  }, [columnStorageKey, getColumns, loaded, saveState, setInvisibleColumnIds]);
 
   // Save state on column visibility change
   useEffect(() => {
@@ -60,7 +71,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
 
   const toggleColumn = useCallback(
     (colId?: string) => {
-      if (!colId) return;
+      if (!colId || !invisibleColumnIds) return;
       setInvisibleColumnIds(
         invisibleColumnIds.includes(colId)
           ? invisibleColumnIds.filter((id) => id !== colId)
@@ -104,7 +115,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
               }}
             >
               <LuiCheckboxInput
-                isChecked={!invisibleColumnIds.includes(col.colId ?? "")}
+                isChecked={!!invisibleColumnIds && !invisibleColumnIds.includes(col.colId ?? "")}
                 value={`${col.colId}`}
                 label={col.headerName ?? ""}
                 isDisabled={isNonManageableColumn(col)}

package/src/contexts/GridContext.tsx

@@ -55,7 +55,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;
@@ -71,7 +71,7 @@ export const GridContext = createContext<GridContextType<any>>({
     console.error("no context provider for getColumns");
     return [];
   },
-  invisibleColumnIds: [],
+  invisibleColumnIds: undefined,
   setInvisibleColumnIds: () => {
     console.error("no context provider for setInvisibleColumnIds");
   },

package/src/contexts/GridContextProvider.tsx

@@ -26,7 +26,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const [columnApi, setColumnApi] = useState<ColumnApi>();
   const [gridReady, setGridReady] = useState(false);
   const [quickFilter, setQuickFilter] = useState("");
-  const [invisibleColumnIds, setInvisibleColumnIds] = useState<string[]>([]);
+  const [invisibleColumnIds, setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
@@ -178,6 +178,14 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     [gridApiOp],
   );
 
+  /**
+   * Get ColDefs, with flattened ColGroupDefs
+   */
+  const getColumns: () => ColDefT<RowType>[] = useCallback(
+    () => columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [],
+    [columnApi],
+  );
+
   /**
    * Internal method for selecting and flashing rows.
    *
@@ -211,9 +219,9 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         const firstNode = rowsThatNeedSelecting[0];
         if (firstNode) {
           defer(() => gridApi.ensureNodeVisible(firstNode));
-          const colDefs = gridApi.getColumnDefs();
-          if (colDefs?.length) {
-            const col = colDefs[0] as ColDef; // 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;
@@ -244,7 +252,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         }
       });
     },
-    [_getNewNodes, _rowIdsToNodes, gridApiOp],
+    [_getNewNodes, _rowIdsToNodes, getColumns, gridApiOp],
   );
 
   const selectRowsById = useCallback(
@@ -585,10 +593,8 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     [gridApi],
   );
 
-  const getColumns: () => ColDefT<RowType>[] = useCallback(() => gridApi?.getColumnDefs() ?? [], [gridApi]);
-
   useEffect(() => {
-    if (columnApi) {
+    if (columnApi && invisibleColumnIds) {
       // show all columns that aren't invisible
       columnApi.setColumnsVisible(
         compact(

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -55,6 +55,7 @@ interface ITestRow {
   id: number;
   position: string;
   age: number;
+  height: number;
   desc: string;
   dd: string;
 }
@@ -76,14 +77,25 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           info: (props) => props.value === "Developer" && "Developers are awesome",
         },
       }),
-      GridCell({
-        field: "age",
-        headerName: "Age",
-      }),
+      {
+        headerName: "Metrics",
+        marryChildren: true,
+        children: [
+          GridCell({
+            field: "age",
+            headerName: "Age",
+          }),
+          GridCell({
+            field: "height",
+            headerName: "Height",
+          }),
+        ],
+      },
       GridCell({
         field: "desc",
         headerName: "Description",
         flex: 1,
+        initialHide: true,
       }),
       GridPopoverMessage(
         {
@@ -187,9 +199,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 
   const [rowData] = useState([
-    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
-    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
-    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+    { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
   ]);
 
   return (