@linzjs/step-ag-grid 21.0.0 → 21.0.1

package/dist/index.css

@@ -337,10 +337,9 @@
   flex: 1;
 }
 
-.Grid-sortIsStale span.ag-icon.ag-icon-desc::after {
-  content: "*";
-}
-.Grid-sortIsStale span.ag-icon.ag-icon-asc::after {
+.Grid-sortIsStale span.ag-sort-indicator-icon::before {
+  margin-left: -6px;
+  position: absolute;
   content: "*";
 }
 

package/dist/src/components/PostSortRowsHook.d.ts

@@ -7,5 +7,5 @@ interface PostSortRowsHookProps {
  * Then applies this sort until next sort column change.
  * Handles stale sort, when you edit a row but don't want to re-sort.
  */
-export declare const usePostSortRowsHook: ({ setStaleGrid }: PostSortRowsHookProps) => ({ api, columnApi, nodes }: PostSortRowsParams) => void;
+export declare const usePostSortRowsHook: ({ setStaleGrid }: PostSortRowsHookProps) => ({ api, nodes }: PostSortRowsParams) => void;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColDef, ColumnApi, GridApi, IRowNode } from "ag-grid-community";
+import { ColDef, GridApi, IRowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community";
 import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<TData extends GridBaseRow> = (data: TData, rowNode: IRowNode) => boolean;
@@ -18,7 +18,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     getColDef: (colId?: string) => ColDef | undefined;
     getColumns: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => ColDefT<TData, any>[];
     getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-    setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
+    setApis: (gridApi: GridApi | undefined, dataTestId?: string) => void;
     prePopupOps: () => void;
     postPopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;

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

@@ -302,15 +302,15 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
     // As a sort on a stale row should just resort, not change sort direction
     const previousColSort = React.useRef([]);
     const previousQuickFilter = React.useRef("");
-    return React.useCallback(({ api, columnApi, nodes }) => {
+    return React.useCallback(({ api, nodes }) => {
         // Grid is destroyed
-        if (!api || !columnApi)
+        if (!api)
             return;
         const previousRowSortIndex = previousRowSortIndexRef.current;
         const hashNode = (node) => {
             return node ? JSON.stringify(node.data) : "";
         };
-        const copyCurrentSortSettings = () => columnApi.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
+        const copyCurrentSortSettings = () => api.getColumnState().map((row) => ({ colId: row.colId, sort: row.sort, sortIndex: row.sortIndex }));
         const backupSortOrder = () => {
             for (const x in previousRowSortIndex)
                 delete previousRowSortIndex[x];
@@ -319,7 +319,7 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
         // Check if column is the first sorted column.  Note: column is preconfigured to sort its sortIndex is null not 1
         const isFirstSortColumn = (row) => row.sort && [0, null].includes(row.sortIndex ?? null);
         const isSameColumnAndDifferentSort = (col1, col2) => col1 && col2 && col1.colId === col2.colId && col1.sort != col2.sort;
-        const restorePreviousSortColumnState = () => columnApi.applyColumnState({ state: previousColSort.current });
+        const restorePreviousSortColumnState = () => api.applyColumnState({ state: previousColSort.current });
         const sortNodesByPreviousSort = () => {
             nodes.sort((a, b) => (previousRowSortIndex[`${a.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER) -
                 (previousRowSortIndex[`${b.data.id}`]?.index ?? Number.MAX_SAFE_INTEGER));
@@ -397,7 +397,7 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
                 wasStale = true;
             }
             else if (changedRowCount === 2 && newRowCount === 0) {
-                // This must be a swap rows
+                // This must be a swap rows (sometimes it's not, needs further attention)
                 backupSortOrder();
                 wasStale = false;
             }
@@ -445,13 +445,15 @@ const GridHeaderSelect = ({ api }) => {
     // This is used to force an update on selection change
     const [updateCounter, setUpdateCounter] = React.useState(0);
     const selectedNodeCount = api.getSelectedRows().length;
-    const clickHandler = React.useCallback(() => {
-        setUpdateCounter(updateCounter + 1);
-    }, [updateCounter]);
     React.useEffect(() => {
+        const clickHandler = () => {
+            setUpdateCounter(updateCounter + 1);
+        };
         api.addEventListener("selectionChanged", clickHandler);
-        return () => api.removeEventListener("selectionChanged", clickHandler);
-    }, [api, clickHandler]);
+        return () => {
+            !api.isDestroyed() && api.removeEventListener("selectionChanged", clickHandler);
+        };
+    }, [api, updateCounter]);
     const handleMultiSelect = () => {
         if (selectedNodeCount == 0) {
             api.selectAllFiltered();
@@ -460,7 +462,7 @@ const GridHeaderSelect = ({ api }) => {
             api.deselectAll();
         }
     };
-    const totalNodeCount = api.getModel().getRowCount();
+    const totalNodeCount = api.getDisplayedRowCount();
     const partialSelect = selectedNodeCount != 0 && selectedNodeCount != totalNodeCount;
     const allSelected = selectedNodeCount != 0 && selectedNodeCount == totalNodeCount;
     return (jsxRuntime.jsx("div", { className: clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", partialSelect && "ag-indeterminate", allSelected && "ag-checked"), onClick: handleMultiSelect, children: jsxRuntime.jsx("input", { type: "checkbox", className: "ag-checkbox-input-wrapper", onChange: () => {
@@ -2365,13 +2367,13 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
             if (gridRendered === "empty") {
                 if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
-                    params.onContentSize && params.onContentSize(result);
+                    params.onContentSize?.(result);
                 }
             }
             else if (gridRendered === "rows-visible") {
                 if (result && !hasSetContentSize.current) {
                     hasSetContentSize.current = true;
-                    params.onContentSize && params.onContentSize(result);
+                    params.onContentSize?.(result);
                 }
             }
             else {
@@ -2398,7 +2400,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                 needsAutoSize.current = true;
             }
         }
-        if (needsAutoSize.current) {
+        if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === "auto")) {
             needsAutoSize.current = false;
             setInitialContentSize();
         }
@@ -2558,7 +2560,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
      * When grid is ready set the apis to the grid context and sync selected items to grid.
      */
     const onGridReady = React.useCallback((event) => {
-        setApis(event.api, event.columnApi, dataTestId);
+        setApis(event.api, dataTestId);
         event.api.showNoRowsOverlay();
         synchroniseExternallySelectedItemsToGrid();
     }, [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid]);
@@ -2779,7 +2781,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
             }
             const moved = event.node.data;
             const target = event.overNode?.data;
-            moved.id != target.id && //moved over a different row
+            moved.id !== target?.id && //moved over a different row
                 event.node.rowIndex != targetIndex && //moved to a different index
                 params.onRowDragEnd &&
                 (await params.onRowDragEnd(moved, target, targetIndex));
@@ -2789,7 +2791,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
     const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
-    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, { rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    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, { reactiveCustomComponents: true, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                         setInitialContentSize();
                     }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
@@ -4553,7 +4555,6 @@ const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
 const GridContextProvider = (props) => {
     const { modifyUpdating, checkUpdating } = React.useContext(GridUpdatingContext);
     const [gridApi, setGridApi] = React.useState();
-    const [columnApi, setColumnApi] = React.useState();
     const [gridReady, setGridReady] = React.useState(false);
     const [quickFilter, setQuickFilter] = React.useState("");
     const [invisibleColumnIds, _setInvisibleColumnIds] = React.useState();
@@ -4570,7 +4571,7 @@ const GridContextProvider = (props) => {
      * Set quick filter directly on grid, based on previously save quickFilter state.
      */
     React.useEffect(() => {
-        gridApi?.setQuickFilter(quickFilter);
+        gridApi?.setGridOption("quickFilterText", quickFilter);
     }, [gridApi, quickFilter]);
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
@@ -4616,21 +4617,19 @@ const GridContextProvider = (props) => {
     /**
      * Set the grid api when the grid is ready.
      */
-    const setApis = React.useCallback((gridApi, columnApi, dataTestId) => {
+    const setApis = React.useCallback((gridApi, dataTestId) => {
         testId.current = dataTestId;
         setGridApi(gridApi);
-        setColumnApi(columnApi);
-        gridApi?.setQuickFilter(quickFilter);
+        gridApi?.setGridOption("quickFilterText", quickFilter);
         setGridReady(!!gridApi);
     }, [quickFilter]);
     /**
      * Used to check if it's OK to autosize.
      */
     const gridRenderState = React.useCallback(() => {
-        // Even though getModel can't be null, sometimes it is
-        if (!gridApi || !gridApi.getModel())
+        if (!gridApi)
             return null;
-        if (!gridApi.getModel().isRowsToRender())
+        if (!gridApi.getDisplayedRowCount())
             return "empty";
         if (!lodashEs.isEmpty(gridApi.getRenderedNodes()))
             return "rows-visible";
@@ -4703,7 +4702,7 @@ const GridContextProvider = (props) => {
     /**
      * Get ColDefs, with flattened ColGroupDefs
      */
-    const getColumns = React.useCallback((filterDef = () => true) => lodashEs.filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef), [columnApi]);
+    const getColumns = React.useCallback((filterDef = () => true) => lodashEs.filter(gridApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef), [gridApi]);
     const getColumnIds = React.useCallback((filterDef = () => true) => lodashEs.compact(getColumns(filterDef).map(getColId)), [getColumns]);
     /**
      * Internal method for selecting and flashing rows.
@@ -4826,22 +4825,22 @@ const GridContextProvider = (props) => {
      * Resize columns to fit container
      */
     const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds, includeFlex } = {}) => {
-        if (!columnApi)
+        if (!gridApi)
             return null;
         const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
-        const colsToResize = columnApi.getColumnState().filter((colState) => {
+        const colsToResize = gridApi.getColumnState().filter((colState) => {
             const colId = colState.colId;
             return ((lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
                 !userSizedColIds?.has(colId) &&
                 (includeFlex || !colState.flex));
         });
         if (!lodashEs.isEmpty(colsToResize)) {
-            columnApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
+            gridApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
         }
         return {
-            width: lodashEs.sumBy(columnApi.getColumnState().filter((col) => !col.hide), "width"),
+            width: lodashEs.sumBy(gridApi.getColumnState().filter((col) => !col.hide), "width"),
         };
-    }, [columnApi]);
+    }, [gridApi]);
     /**
      * Resize columns to fit container
      */
@@ -4890,7 +4889,7 @@ const GridContextProvider = (props) => {
      */
     const cancelEdit = React.useCallback(() => {
         stopEditing();
-        cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+        cellEditingCompleteCallbackRef.current?.();
     }, [stopEditing]);
     const cellEditingCompleteCallbackRef = React.useRef();
     const setOnCellEditingComplete = React.useCallback((cellEditingCompleteCallback) => {
@@ -4962,7 +4961,7 @@ const GridContextProvider = (props) => {
             }
             else {
                 // Don't set saving if ok as the form has already closed
-                setSaving && setSaving(false);
+                setSaving?.(false);
             }
             // Only focus next cell if user hasn't already manually changed focus
             const postPopupFocusedCell = gridApi.getFocusedCell();
@@ -5019,7 +5018,7 @@ const GridContextProvider = (props) => {
      * Apply column visibility
      */
     React.useEffect(() => {
-        if (!columnApi || !invisibleColumnIds)
+        if (!gridApi || !invisibleColumnIds)
             return;
         // show all columns that aren't invisible
         const newVisibleColumns = getColumns((col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId) && !isGridCellFiller(col));
@@ -5029,22 +5028,22 @@ const GridContextProvider = (props) => {
             const fillerColumn = getColumns(isGridCellFiller)[0];
             fillerColumn && newVisibleColumns.push(fillerColumn);
         }
-        columnApi.setColumnsVisible(lodashEs.compact(newVisibleColumns.map(getColId)), true);
+        gridApi.setColumnsVisible(lodashEs.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]);
+        gridApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
+    }, [invisibleColumnIds, getColumns, gridApi]);
     /**
      * Download visible columns as a CSV
      */
     const downloadCsv = React.useCallback((csvExportParams) => {
-        if (!gridApi || !columnApi)
+        if (!gridApi)
             return;
         const fileName = csvExportParams?.fileName && sanitiseFileName(fnOrVar(csvExportParams.fileName));
-        const columnKeys = columnApi
-            ?.getColumnState()
+        const columnKeys = gridApi
+            .getColumnState()
             .filter((cs) => {
             const colDef = gridApi.getColumnDef(cs.colId);
             return !cs.hide && colDef && !isGridCellFiller(colDef) && colDef.headerComponentParams?.exportable !== false;
@@ -5056,7 +5055,7 @@ const GridContextProvider = (props) => {
             ...csvExportParams,
             fileName,
         });
-    }, [columnApi, gridApi]);
+    }, [gridApi]);
     return (jsxRuntime.jsx(GridContext.Provider, { value: {
             gridRenderState,
             getColDef,
@@ -5138,7 +5137,7 @@ const downloadCsvUseValueFormattersProcessCellCallback = (params) => {
         console.error(`downloadCsv: String type (registered) value formatters are unsupported in downloadCsv, colId: ${colDef.colId}`);
         return encodeToString(params.value);
     }
-    const result = valueFormatter({ ...params, data: params.node?.data, colDef });
+    const result = valueFormatter({ ...params, data: params.node?.data, colDef, node: null });
     // type may not be string due to casting, leave the type check in
     if (params.value != null && typeof result !== "string") {
         console.error(`downloadCsv: valueFormatter is returning non string values, colDef:", colId: ${colDef.colId}`);