@linzjs/step-ag-grid 14.9.3 → 14.10.0

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.10.0",
   "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/GridCellFiller.tsx

@@ -0,0 +1,11 @@
+import { ColDef } from "ag-grid-community";
+
+export const GridCellFillerColId = "gridCellFiller";
+
+export const isGridCellFiller = (col: ColDef) => col.colId === GridCellFillerColId;
+
+export const GridCellFiller = (): ColDef => ({
+  colId: GridCellFillerColId,
+  headerName: "",
+  flex: 1,
+});

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -16,17 +16,20 @@ export interface GridFilterColumnsToggleProps {
 
 export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsToggleProps): JSX.Element => {
   const [loaded, setLoaded] = useState(false);
-  const { getColumns, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
+  const { getColumns, getColumnIds, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
 
   const columnStorageKey = useMemo(
     () =>
-      isEmpty(getColumns())
+      isEmpty(getColumnIds())
         ? null // Grid hasn't been initialised yet
-        : "stepAgGrid_invisibleColumnIds_" +
-          getColumns()
-            .map((col) => col.colId || "")
-            .join("_"),
-    [getColumns],
+        : "stepAgGrid_invisibleColumnIds_" + getColumnIds().join("_"),
+    [getColumnIds],
+  );
+
+  // infer the invisible ids from colDefs
+  const resetColumns = useCallback(
+    () => setInvisibleColumnIds(getColumnIds("initialHide")),
+    [getColumnIds, setInvisibleColumnIds],
   );
 
   // Load state on start
@@ -35,20 +38,24 @@ 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) {
+          resetColumns();
         } 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, resetColumns, saveState, setInvisibleColumnIds]);
 
   // Save state on column visibility change
   useEffect(() => {
@@ -60,7 +67,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)
@@ -70,10 +77,6 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
     [invisibleColumnIds, setInvisibleColumnIds],
   );
 
-  const resetColumns = () => {
-    setInvisibleColumnIds([]);
-  };
-
   const numericRegExp = /^\d+$/;
   const isNonManageableColumn = (col: ColDefT<GridBaseRow>) => {
     return col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
@@ -87,40 +90,38 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
       unmountOnClose={true}
     >
       <div className={"GridFilterColumnsToggle-container"}>
-        {getColumns()
-          .filter((col) => !!col.headerName)
-          .map((col) => (
-            <MenuItem
-              key={col.colId}
-              disabled={isNonManageableColumn(col)}
-              onClick={(e: ClickEvent) => {
-                // Global react-menu MenuItem handler handles tabs
-                if (e.key !== "Tab") {
-                  e.keepOpen = true;
-                  if (e.key !== "Enter") {
-                    toggleColumn(col.colId);
-                  }
+        {getColumns("headerName").map((col) => (
+          <MenuItem
+            key={col.colId}
+            disabled={isNonManageableColumn(col)}
+            onClick={(e: ClickEvent) => {
+              // Global react-menu MenuItem handler handles tabs
+              if (e.key !== "Tab") {
+                e.keepOpen = true;
+                if (e.key !== "Enter") {
+                  toggleColumn(col.colId);
                 }
+              }
+            }}
+          >
+            <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();
+                  e.stopPropagation();
+                },
+              }}
+              onChange={() => {
+                /*Do nothing, change handled by menuItem*/
               }}
-            >
-              <LuiCheckboxInput
-                isChecked={!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();
-                    e.stopPropagation();
-                  },
-                }}
-                onChange={() => {
-                  /*Do nothing, change handled by menuItem*/
-                }}
-              />
-            </MenuItem>
-          ))}
+            />
+          </MenuItem>
+        ))}
       </div>
       <MenuDivider key={`$$divider_reset_columns`} />
       <MenuItem

package/src/components/gridUtil.ts

@@ -0,0 +1,6 @@
+import { ColDef } from "ag-grid-community";
+
+import { isGridCellFiller } from "./GridCellFiller";
+
+export const getColId = (colDef: ColDef): string => colDef.colId ?? "";
+export const isFlexColumn = (colDef: ColDef): boolean => !!colDef.flex && !isGridCellFiller(colDef);

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./ComponentLoadingWrapper";
 export * from "./Grid";
 export * from "./GridCell";
+export * from "./GridCellFiller";
 export * from "./GridCellMultiEditor";
 export * from "./GridCellMultiSelectClassRules";
 export * from "./gridFilter";

package/src/contexts/GridContext.tsx

@@ -17,7 +17,10 @@ export type AutoSizeColumnsResult = { width: number } | null;
 export interface GridContextType<RowType extends GridBaseRow> {
   gridReady: boolean;
   getColDef: (colId?: string) => ColDef | undefined;
-  getColumns: () => ColDefT<RowType>[];
+  getColumns: (
+    filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
+  ) => ColDefT<RowType>[];
+  getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
   setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
   prePopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;
@@ -55,7 +58,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 +74,11 @@ export const GridContext = createContext<GridContextType<any>>({
     console.error("no context provider for getColumns");
     return [];
   },
-  invisibleColumnIds: [],
+  getColumnIds: () => {
+    console.error("no context provider for getColumnIds");
+    return [];
+  },
+  invisibleColumnIds: undefined,
   setInvisibleColumnIds: () => {
     console.error("no context provider for setInvisibleColumnIds");
   },

package/src/contexts/GridContextProvider.tsx

@@ -3,10 +3,12 @@ import { CellPosition } from "ag-grid-community/dist/lib/entities/cellPosition";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { CsvExportParams, ProcessCellForExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import debounce from "debounce-promise";
-import { compact, defer, delay, difference, isEmpty, last, remove, sortBy, sumBy } from "lodash-es";
+import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from "lodash-es";
 import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { ColDefT, GridBaseRow } from "../components";
+import { GridCellFillerColId, isGridCellFiller } from "../components/GridCellFiller";
+import { getColId, isFlexColumn } from "../components/gridUtil";
 import { isNotEmpty, sanitiseFileName, wait } from "../utils/util";
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from "./GridContext";
 import { GridUpdatingContext } from "./GridUpdatingContext";
@@ -26,13 +28,19 @@ 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>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
   const externalFilters = useRef<GridFilterExternal<RowType>[]>([]);
 
+  /**
+   * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
+   */
+  const setInvisibleColumnIds = (invisibleColumnIds: string[]) =>
+    _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId));
+
   /**
    * Set quick filter directly on grid, based on previously save quickFilter state.
    */
@@ -152,9 +160,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const _getNewNodes = useCallback((): RowNode[] => {
     return gridApiOp(
       (gridApi) =>
-        difference(_getAllRowIds(), idsBeforeUpdate.current)
-          .map((rowId) => gridApi.getRowNode("" + rowId)) //
-          .filter((r) => r) as RowNode[],
+        compact(difference(_getAllRowIds(), idsBeforeUpdate.current).map((rowId) => gridApi.getRowNode("" + rowId))),
       () => [],
     );
   }, [_getAllRowIds, gridApiOp]);
@@ -168,16 +174,30 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   const _rowIdsToNodes = useCallback(
     (rowIds: number[]): RowNode[] => {
       return gridApiOp(
-        (gridApi) =>
-          rowIds
-            .map((rowId) => gridApi.getRowNode("" + rowId)) //
-            .filter((r) => r) as RowNode[],
+        (gridApi) => compact(rowIds.map((rowId) => gridApi.getRowNode("" + rowId))),
         () => [] as RowNode[],
       );
     },
     [gridApiOp],
   );
 
+  /**
+   * Get ColDefs, with flattened ColGroupDefs
+   */
+  const getColumns = useCallback(
+    (
+      filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true,
+    ): ColDefT<RowType>[] =>
+      filter(columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [], filterDef) as ColDefT<RowType>[],
+    [columnApi],
+  );
+
+  const getColumnIds = useCallback(
+    (filterDef: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string) = () => true): string[] =>
+      compact(getColumns(filterDef).map(getColId)),
+    [getColumns],
+  );
+
   /**
    * Internal method for selecting and flashing rows.
    *
@@ -211,9 +231,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 +264,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         }
       });
     },
-    [_getNewNodes, _rowIdsToNodes, gridApiOp],
+    [_getNewNodes, _rowIdsToNodes, getColumns, gridApiOp],
   );
 
   const selectRowsById = useCallback(
@@ -536,9 +556,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
 
   const redrawRows = useCallback(
     (rowNodes?: RowNode[]) => {
-      gridApiOp((gridApi) => {
-        gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
-      });
+      gridApiOp((gridApi) => gridApi.redrawRows(rowNodes ? { rowNodes } : undefined));
     },
     [gridApiOp],
   );
@@ -574,33 +592,39 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     onFilterChanged().then();
   };
 
-  const isExternalFilterPresent = (): boolean => externalFilters.current.length > 0;
+  const isExternalFilterPresent = (): boolean => !isEmpty(externalFilters.current);
 
-  const doesExternalFilterPass = (node: RowNode): boolean => {
-    return externalFilters.current.every((filter) => filter(node.data, node));
-  };
+  const doesExternalFilterPass = (node: RowNode): boolean =>
+    externalFilters.current.every((filter) => filter(node.data, node));
 
   const getColDef = useCallback(
     (colId?: string): ColDef | undefined => (!!colId && gridApi?.getColumnDef(colId)) || undefined,
     [gridApi],
   );
 
-  const getColumns: () => ColDefT<RowType>[] = useCallback(() => gridApi?.getColumnDefs() ?? [], [gridApi]);
-
+  /**
+   * Apply column visibility
+   */
   useEffect(() => {
-    if (columnApi) {
-      // show all columns that aren't invisible
-      columnApi.setColumnsVisible(
-        compact(
-          getColumns()
-            .filter((col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId))
-            .map((col) => col.colId),
-        ),
-        true,
-      );
-      // hide all invisible columns
-      columnApi.setColumnsVisible(invisibleColumnIds, false);
+    if (!columnApi || !invisibleColumnIds) return;
+
+    // show all columns that aren't invisible
+    const newVisibleColumns = getColumns(
+      (col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId) && !isGridCellFiller(col),
+    );
+    // If there's no flex column showing add the filler column if defined
+    const visibleColumnsContainsAFlex = newVisibleColumns.some(isFlexColumn);
+    if (!visibleColumnsContainsAFlex) {
+      const fillerColumn = getColumns(isGridCellFiller)[0];
+      fillerColumn && newVisibleColumns.push(fillerColumn);
     }
+    columnApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
+
+    // Hide the filler column if there's already a flex column
+    const invisibleColumnIdsWithOptionalFiller = visibleColumnsContainsAFlex
+      ? [...invisibleColumnIds, GridCellFillerColId]
+      : invisibleColumnIds;
+    columnApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
   }, [invisibleColumnIds, columnApi, getColumns]);
 
   /**
@@ -614,7 +638,10 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
 
       const columnKeys = columnApi
         ?.getColumnState()
-        .filter((cs) => !cs.hide && gridApi.getColumnDef(cs.colId)?.headerComponentParams?.exportable !== false)
+        .filter((cs) => {
+          const colDef = gridApi.getColumnDef(cs.colId);
+          return !cs.hide && colDef && !isGridCellFiller(colDef) && colDef.headerComponentParams?.exportable !== false;
+        })
         .map((cs) => cs.colId);
       gridApi.exportDataAsCsv({
         columnKeys,
@@ -631,6 +658,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
       value={{
         getColDef,
         getColumns,
+        getColumnIds,
         invisibleColumnIds,
         setInvisibleColumnIds,
         gridReady,

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

@@ -25,6 +25,7 @@ import {
 } from "../..";
 import { GridFilterColumnsToggle } from "../../components";
 import { GridFilterDownloadCsvButton } from "../../components";
+import { GridCellFiller } from "../../components/GridCellFiller";
 import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 
@@ -55,6 +56,7 @@ interface ITestRow {
   id: number;
   position: string;
   age: number;
+  height: number;
   desc: string;
   dd: string;
 }
@@ -76,15 +78,27 @@ 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,
       }),
+      GridCellFiller(),
       GridPopoverMessage(
         {
           headerName: "Popout message",
@@ -187,9 +201,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 (