@linzjs/step-ag-grid 14.3.1 → 14.3.3

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnApi, GridApi, RowNode } from "ag-grid-community";
+import { ColDef, ColumnApi, GridApi, RowNode } from "ag-grid-community";
 import { CsvExportParams } from "ag-grid-community/dist/lib/interfaces/exportParams";
 import { ColDefT, GridBaseRow } from "../components";
 export type GridFilterExternal<RowType extends GridBaseRow> = (data: RowType, rowNode: RowNode) => boolean;
@@ -13,6 +13,8 @@ export type AutoSizeColumnsResult = {
 } | null;
 export interface GridContextType<RowType extends GridBaseRow> {
     gridReady: boolean;
+    getColDef: (colId?: string) => ColDef | undefined;
+    getColumns: () => ColDefT<RowType>[];
     setApis: (gridApi: GridApi | undefined, columnApi: ColumnApi | undefined, dataTestId?: string) => void;
     prePopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
@@ -47,7 +49,6 @@ export interface GridContextType<RowType extends GridBaseRow> {
     removeExternalFilter: (filter: GridFilterExternal<RowType>) => void;
     isExternalFilterPresent: () => boolean;
     doesExternalFilterPass: (node: RowNode) => boolean;
-    getColumns: () => ColDefT<RowType>[];
     invisibleColumnIds: string[];
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export type GridUpdatingContextType = {
     checkUpdating: (fields: string | string[], id: number | string) => boolean;
-    isUpdating: () => boolean;
     modifyUpdating: (fields: string | string[], ids: (number | string)[], fn: () => void | Promise<void>) => Promise<void>;
     updatedDep: number;
+    updatingCols: () => string[];
 };
 export declare const GridUpdatingContext: import("react").Context<GridUpdatingContextType>;

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

@@ -123,6 +123,10 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 var GridContext = createContext({
     gridReady: false,
+    getColDef: function () {
+        console.error("no context provider for getColDef");
+        return undefined;
+    },
     getColumns: function () {
         console.error("no context provider for getColumns");
         return [];
@@ -265,9 +269,9 @@ var GridUpdatingContext = createContext({
         console.error("Missing GridUpdatingContext");
         return false;
     },
-    isUpdating: function () {
+    updatingCols: function () {
         console.error("Missing GridUpdatingContext");
-        return false;
+        return [];
     },
     modifyUpdating: function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -714,8 +718,8 @@ var GridHeaderSelect = function (_a) {
 var Grid = function (_a) {
     var _b, _c, _d;
     var dataTestId = _a["data-testid"], _e = _a.rowSelection, rowSelection = _e === void 0 ? "multiple" : _e, _f = _a.suppressColumnVirtualization, suppressColumnVirtualization = _f === void 0 ? true : _f, _g = _a.theme, theme = _g === void 0 ? "ag-theme-alpine" : _g, _h = _a.sizeColumns, sizeColumns = _h === void 0 ? "auto" : _h, _j = _a.selectColumnPinned, selectColumnPinned = _j === void 0 ? null : _j, params = __rest(_a, ["data-testid", "rowSelection", "suppressColumnVirtualization", "theme", "sizeColumns", "selectColumnPinned"]);
-    var _k = useContext(GridContext), gridReady = _k.gridReady, setApis = _k.setApis, prePopupOps = _k.prePopupOps, ensureRowVisible = _k.ensureRowVisible, getFirstRowId = _k.getFirstRowId, selectRowsById = _k.selectRowsById, focusByRowById = _k.focusByRowById, ensureSelectedRowIsVisible = _k.ensureSelectedRowIsVisible, autoSizeColumns = _k.autoSizeColumns, sizeColumnsToFit = _k.sizeColumnsToFit, externallySelectedItemsAreInSync = _k.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _k.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _k.isExternalFilterPresent, doesExternalFilterPass = _k.doesExternalFilterPass, setOnCellEditingComplete = _k.setOnCellEditingComplete;
-    var _l = useContext(GridUpdatingContext), checkUpdating = _l.checkUpdating, updatedDep = _l.updatedDep, isUpdating = _l.isUpdating;
+    var _k = useContext(GridContext), gridReady = _k.gridReady, setApis = _k.setApis, prePopupOps = _k.prePopupOps, ensureRowVisible = _k.ensureRowVisible, getFirstRowId = _k.getFirstRowId, selectRowsById = _k.selectRowsById, focusByRowById = _k.focusByRowById, ensureSelectedRowIsVisible = _k.ensureSelectedRowIsVisible, autoSizeColumns = _k.autoSizeColumns, sizeColumnsToFit = _k.sizeColumnsToFit, externallySelectedItemsAreInSync = _k.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _k.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _k.isExternalFilterPresent, doesExternalFilterPass = _k.doesExternalFilterPass, setOnCellEditingComplete = _k.setOnCellEditingComplete, getColDef = _k.getColDef;
+    var _l = useContext(GridUpdatingContext), checkUpdating = _l.checkUpdating, updatedDep = _l.updatedDep, updatingCols = _l.updatingCols;
     var gridDivRef = useRef(null);
     var lastSelectedIds = useRef([]);
     var _m = useState(false), staleGrid = _m[0], setStaleGrid = _m[1];
@@ -944,12 +948,12 @@ var Grid = function (_a) {
             return;
         lastUpdatedDep.current = updatedDep;
         // Don't update while there are spinners
-        if (isUpdating())
+        if (!isEmpty(updatingCols()))
             return;
         var skipHeader = sizeColumns === "auto-skip-headers";
         autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
         colIdsEdited.current.clear();
-    }, [autoSizeColumns, isUpdating, (_c = params.rowData) === null || _c === void 0 ? void 0 : _c.length, setInitialContentSize, sizeColumns, updatedDep]);
+    }, [autoSizeColumns, (_c = params.rowData) === null || _c === void 0 ? void 0 : _c.length, setInitialContentSize, sizeColumns, updatedDep, updatingCols]);
     /**
      * Show/hide no rows overlay when model changes.
      */
@@ -1050,42 +1054,40 @@ var Grid = function (_a) {
      * Set of colIds that need auto-sizing.
      */
     var colIdsEdited = useRef(new Set());
+    var lastUpdatedDep = useRef(updatedDep);
     /**
-     * When cell editing has completed tag the colId as needing auto-sizing
+     * When cell editing has completed the colId as needing auto-sizing
      */
-    var onCellEditingStopped = useCallback(function (e) {
-        var skipHeader = sizeColumns === "auto-skip-headers";
-        if (sizeColumns === "auto" || skipHeader) {
-            // This may be wrong as the cell update hasn't completed?
-            var colId = e.colDef.colId;
-            if (colId && !e.colDef.flex) {
-                // This auto-sizes based on updatingContext completing
-                colIdsEdited.current.add(colId);
-                // This auto-sizes immediately in case it was an in place update
-                !isUpdating() &&
+    useEffect(function () {
+        if (lastUpdatedDep.current === updatedDep)
+            return;
+        lastUpdatedDep.current = updatedDep;
+        var colIds = updatingCols();
+        // Updating possibly completed
+        if (isEmpty(colIds)) {
+            // Columns to resize?
+            if (!isEmpty(colIdsEdited.current)) {
+                var skipHeader = sizeColumns === "auto-skip-headers";
+                if (sizeColumns === "auto" || skipHeader) {
                     autoSizeColumns({
                         skipHeader: skipHeader,
                         userSizedColIds: userSizedColIds.current,
-                        colIds: [colId]
+                        colIds: colIdsEdited.current
                     });
+                }
+                colIdsEdited.current.clear();
             }
         }
-    }, [autoSizeColumns, isUpdating, sizeColumns]);
-    var lastUpdatedDep = useRef(updatedDep);
-    /**
-     * If columns are edited, wait for the updating context to complete then auto-size them.
-     */
-    useEffect(function () {
-        if (lastUpdatedDep.current === updatedDep || isEmpty(colIdsEdited.current))
-            return;
-        lastUpdatedDep.current = updatedDep;
-        // Don't update while there are spinners
-        if (isUpdating())
-            return;
-        var skipHeader = sizeColumns === "auto-skip-headers";
-        autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
-        colIdsEdited.current.clear();
-    }, [autoSizeColumns, updatedDep, sizeColumns, isUpdating]);
+        else {
+            // Updates not complete, add them to a list of columns needing resize
+            colIds.forEach(function (colId) {
+                var _a;
+                if (colId && !((_a = getColDef(colId)) === null || _a === void 0 ? void 0 : _a.flex)) {
+                    colIdsEdited.current.add(colId);
+                }
+            });
+        }
+    }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
     /**
      * Resize columns to fit if required on window/container resize
      */
@@ -1118,7 +1120,7 @@ var Grid = function (_a) {
     setOnCellEditingComplete(params.onCellEditingComplete);
     return (jsx("div", __assign({ "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: jsx("div", __assign({ style: { flex: 1 }, ref: gridDivRef }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: function () {
                     setInitialContentSize();
-                }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onCellEditingStopped: onCellEditingStopped, onColumnResized: onColumnResized, defaultColDef: __assign({ minWidth: 48 }, omit(params.defaultColDef, ["editable"])), columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
+                }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: __assign({ minWidth: 48 }, omit(params.defaultColDef, ["editable"])), columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
                     rowData: params.rowData,
                     noRowsOverlayText: params.noRowsOverlayText
                 }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_d = params.postSortRows) !== null && _d !== void 0 ? _d : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true }) })) })));
@@ -4968,32 +4970,29 @@ var GridContextProvider = function (props) {
                 !((_a = nextColDef.cellEditorParams) === null || _a === void 0 ? void 0 : _a.preventAutoEdit) &&
                 !((_b = nextColDef.cellRendererParams) === null || _b === void 0 ? void 0 : _b.editAction));
         };
-        var foundEditableCell = false;
         // Just in case I've missed something, we don't want the loop to hang everything
-        var maxIterations = 50;
-        var preRow = null;
-        var postRow = null;
-        do {
-            preRow = gridApi.getFocusedCell();
+        for (var maxIterations = 0; maxIterations < 50; maxIterations++) {
+            var preRow = gridApi.getFocusedCell();
             tabDirection === 1 ? gridApi.tabToNextCell() : gridApi.tabToPreviousCell();
-            postRow = gridApi.getFocusedCell();
-            foundEditableCell = focusedCellIsEditable();
-        } while ((preRow === null || preRow === void 0 ? void 0 : preRow.rowIndex) === (postRow === null || postRow === void 0 ? void 0 : postRow.rowIndex) &&
-            (preRow === null || preRow === void 0 ? void 0 : preRow.column) !== (postRow === null || postRow === void 0 ? void 0 : postRow.column) &&
-            !foundEditableCell &&
-            maxIterations-- > 0);
-        if (foundEditableCell) {
-            prePopupOps();
-            var focusedCell = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell();
-            if (focusedCell) {
-                gridApi.startEditingCell({
-                    rowIndex: focusedCell.rowIndex,
-                    colKey: focusedCell.column.getColId()
-                });
-                return false;
+            var postRow = gridApi.getFocusedCell();
+            if ((preRow === null || preRow === void 0 ? void 0 : preRow.rowIndex) !== (postRow === null || postRow === void 0 ? void 0 : postRow.rowIndex) || (preRow === null || preRow === void 0 ? void 0 : preRow.column) === (postRow === null || postRow === void 0 ? void 0 : postRow.column)) {
+                // We didn't find an editable cell in the same row, or the cell column didn't change
+                // implying it was start/end of grid
+                break;
+            }
+            if (focusedCellIsEditable()) {
+                var focusedCell = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getFocusedCell();
+                if (focusedCell) {
+                    prePopupOps();
+                    gridApi.startEditingCell({
+                        rowIndex: focusedCell.rowIndex,
+                        colKey: focusedCell.column.getColId()
+                    });
+                    return true;
+                }
             }
         }
-        return true;
+        return false;
     }, [gridApi, prePopupOps]);
     var updatingCells = useCallback(function (props, fnUpdate, setSaving, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -5045,7 +5044,7 @@ var GridContextProvider = function (props) {
                                             postPopupFocusedCell &&
                                             prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
                                             prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
-                                            if (!tabDirection || selectNextEditableCell(tabDirection)) {
+                                            if (!tabDirection || !selectNextEditableCell(tabDirection)) {
                                                 cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
                                             }
                                         }
@@ -5104,6 +5103,7 @@ var GridContextProvider = function (props) {
     var doesExternalFilterPass = function (node) {
         return externalFilters.current.every(function (filter) { return filter(node.data, node); });
     };
+    var getColDef = useCallback(function (colId) { return (!!colId && (gridApi === null || gridApi === void 0 ? void 0 : gridApi.getColumnDef(colId))) || undefined; }, [gridApi]);
     var getColumns = useCallback(function () { var _a; return (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getColumnDefs()) !== null && _a !== void 0 ? _a : []; }, [gridApi]);
     useEffect(function () {
         if (columnApi) {
@@ -5126,6 +5126,7 @@ var GridContextProvider = function (props) {
         gridApi.exportDataAsCsv(__assign(__assign({ columnKeys: columnKeys, processCellCallback: downloadCsvUseValueFormattersProcessCellCallback }, csvExportParams), { fileName: fileName }));
     }, [columnApi, gridApi]);
     return (jsx(GridContext.Provider, __assign({ value: {
+            getColDef: getColDef,
             getColumns: getColumns,
             invisibleColumnIds: invisibleColumnIds,
             setInvisibleColumnIds: setInvisibleColumnIds,
@@ -5225,7 +5226,7 @@ var GridUpdatingContextProvider = function (props) {
         updating.current = mergedUpdatingBlocks;
         setUpdatedDep(function (updatedDep) { return updatedDep + 1; });
     };
-    var isUpdating = function () { return !isEmpty(updating.current); };
+    var updatingCols = function () { return Object.keys(updating.current); };
     var modifyUpdating = function (fields, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
         var idRef;
         return __generator(this, function (_a) {
@@ -5253,7 +5254,7 @@ var GridUpdatingContextProvider = function (props) {
     var checkUpdating = function (fields, id) {
         return castArray(fields).some(function (f) { var _a; return (_a = updating.current[f]) === null || _a === void 0 ? void 0 : _a.includes(id); });
     };
-    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, isUpdating: isUpdating, updatedDep: updatedDep } }, { children: props.children })));
+    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, updatingCols: updatingCols, updatedDep: updatedDep } }, { children: props.children })));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-minimal.lui-button-lg.lui-button-icon-right{padding-right:38px}.ActionButton.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) .LuiIcon{margin:0 4px}.ActionButton.ActionButton-tight.lui-button-lg.lui-button-icon-right .LuiIcon{margin:0}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight){padding:8px 5px}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right.ActionButton-tight{padding:0}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right{background-color:#e2f3f7;color:#007198;cursor:progress}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right svg *{fill:#0000}.ActionButton-fill{justify-content:center;width:100%}";