@linzjs/step-ag-grid 21.0.0 → 21.0.1

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

@@ -300,15 +300,15 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
     // As a sort on a stale row should just resort, not change sort direction
     const previousColSort = useRef([]);
     const previousQuickFilter = useRef("");
-    return useCallback(({ api, columnApi, nodes }) => {
+    return 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];
@@ -317,7 +317,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));
@@ -395,7 +395,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;
             }
@@ -443,13 +443,15 @@ const GridHeaderSelect = ({ api }) => {
     // This is used to force an update on selection change
     const [updateCounter, setUpdateCounter] = useState(0);
     const selectedNodeCount = api.getSelectedRows().length;
-    const clickHandler = useCallback(() => {
-        setUpdateCounter(updateCounter + 1);
-    }, [updateCounter]);
     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();
@@ -458,7 +460,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 (jsx("div", { className: clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", partialSelect && "ag-indeterminate", allSelected && "ag-checked"), onClick: handleMultiSelect, children: jsx("input", { type: "checkbox", className: "ag-checkbox-input-wrapper", onChange: () => {
@@ -2363,13 +2365,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 {
@@ -2396,7 +2398,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();
         }
@@ -2556,7 +2558,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 = useCallback((event) => {
-        setApis(event.api, event.columnApi, dataTestId);
+        setApis(event.api, dataTestId);
         event.api.showNoRowsOverlay();
         synchroniseExternallySelectedItemsToGrid();
     }, [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid]);
@@ -2777,7 +2779,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));
@@ -2787,7 +2789,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 (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(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 (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(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, ...omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
@@ -4551,7 +4553,6 @@ const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
 const GridContextProvider = (props) => {
     const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
     const [gridApi, setGridApi] = useState();
-    const [columnApi, setColumnApi] = useState();
     const [gridReady, setGridReady] = useState(false);
     const [quickFilter, setQuickFilter] = useState("");
     const [invisibleColumnIds, _setInvisibleColumnIds] = useState();
@@ -4568,7 +4569,7 @@ const GridContextProvider = (props) => {
      * Set quick filter directly on grid, based on previously save quickFilter state.
      */
     useEffect(() => {
-        gridApi?.setQuickFilter(quickFilter);
+        gridApi?.setGridOption("quickFilterText", quickFilter);
     }, [gridApi, quickFilter]);
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
@@ -4614,21 +4615,19 @@ const GridContextProvider = (props) => {
     /**
      * Set the grid api when the grid is ready.
      */
-    const setApis = useCallback((gridApi, columnApi, dataTestId) => {
+    const setApis = 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 = 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 (!isEmpty(gridApi.getRenderedNodes()))
             return "rows-visible";
@@ -4701,7 +4700,7 @@ const GridContextProvider = (props) => {
     /**
      * Get ColDefs, with flattened ColGroupDefs
      */
-    const getColumns = useCallback((filterDef = () => true) => filter(columnApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef), [columnApi]);
+    const getColumns = useCallback((filterDef = () => true) => filter(gridApi?.getColumns()?.map((col) => col.getColDef()) ?? [], filterDef), [gridApi]);
     const getColumnIds = useCallback((filterDef = () => true) => compact(getColumns(filterDef).map(getColId)), [getColumns]);
     /**
      * Internal method for selecting and flashing rows.
@@ -4824,22 +4823,22 @@ const GridContextProvider = (props) => {
      * Resize columns to fit container
      */
     const autoSizeColumns = 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 ((isEmpty(colIdsSet) || colIdsSet.has(colId)) &&
                 !userSizedColIds?.has(colId) &&
                 (includeFlex || !colState.flex));
         });
         if (!isEmpty(colsToResize)) {
-            columnApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
+            gridApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
         }
         return {
-            width: sumBy(columnApi.getColumnState().filter((col) => !col.hide), "width"),
+            width: sumBy(gridApi.getColumnState().filter((col) => !col.hide), "width"),
         };
-    }, [columnApi]);
+    }, [gridApi]);
     /**
      * Resize columns to fit container
      */
@@ -4888,7 +4887,7 @@ const GridContextProvider = (props) => {
      */
     const cancelEdit = useCallback(() => {
         stopEditing();
-        cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+        cellEditingCompleteCallbackRef.current?.();
     }, [stopEditing]);
     const cellEditingCompleteCallbackRef = useRef();
     const setOnCellEditingComplete = useCallback((cellEditingCompleteCallback) => {
@@ -4960,7 +4959,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();
@@ -5017,7 +5016,7 @@ const GridContextProvider = (props) => {
      * Apply column visibility
      */
     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));
@@ -5027,22 +5026,22 @@ const GridContextProvider = (props) => {
             const fillerColumn = getColumns(isGridCellFiller)[0];
             fillerColumn && newVisibleColumns.push(fillerColumn);
         }
-        columnApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
+        gridApi.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]);
+        gridApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
+    }, [invisibleColumnIds, getColumns, gridApi]);
     /**
      * Download visible columns as a CSV
      */
     const downloadCsv = 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;
@@ -5054,7 +5053,7 @@ const GridContextProvider = (props) => {
             ...csvExportParams,
             fileName,
         });
-    }, [columnApi, gridApi]);
+    }, [gridApi]);
     return (jsx(GridContext.Provider, { value: {
             gridRenderState,
             getColDef,
@@ -5136,7 +5135,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}`);