@linzjs/step-ag-grid 14.1.2 → 14.3.0

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, xorBy, last, difference, sortBy, findIndex, debounce as debounce$1, delay, partition, omit, pick, groupBy, fromPairs, toPairs, defer as defer$1, sumBy, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
+import { negate, isEmpty, xorBy, last, difference, omit, sortBy, findIndex, debounce as debounce$1, delay, partition, pick, groupBy, fromPairs, toPairs, defer as defer$1, sumBy, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
 import * as React from 'react';
-import { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import { createContext, useContext, useEffect, useRef, useCallback, useState, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 import require$$0$1 from 'util';
 import * as testUtils from 'react-dom/test-utils';
@@ -201,8 +201,8 @@ var GridContext = createContext({
         console.error("no context provider for getFirstRowId");
         return -1;
     },
-    autoSizeAllColumns: function () {
-        console.error("no context provider for autoSizeAllColumns");
+    autoSizeColumns: function () {
+        console.error("no context provider for autoSizeColumns");
         return null;
     },
     sizeColumnsToFit: function () {
@@ -213,6 +213,9 @@ var GridContext = createContext({
         console.error("no context provider for editingCells");
         return false;
     },
+    cancelEdit: function () {
+        console.error("no context provider for cancelEdit");
+    },
     stopEditing: function () {
         console.error("no context provider for stopEditing");
     },
@@ -250,6 +253,9 @@ var GridContext = createContext({
     },
     downloadCsv: function () {
         console.error("no context provider for downloadCsv");
+    },
+    setOnCellEditingComplete: function () {
+        console.error("no context provider for setOnCellEditingComplete");
     }
 });
 var useGridContext = function () { return useContext(GridContext); };
@@ -259,6 +265,10 @@ var GridUpdatingContext = createContext({
         console.error("Missing GridUpdatingContext");
         return false;
     },
+    isUpdating: function () {
+        console.error("Missing GridUpdatingContext");
+        return false;
+    },
     modifyUpdating: function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             console.error("Missing GridUpdatingContext");
@@ -268,6 +278,50 @@ var GridUpdatingContext = createContext({
     updatedDep: 0
 });
 
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+var useTimeoutHook = function () {
+    var timeout = useRef();
+    /**
+     * Clear any pending timeouts.
+     */
+    var clearTimeouts = function () {
+        if (timeout.current) {
+            var tc = timeout.current;
+            timeout.current = undefined;
+            clearTimeout(tc);
+        }
+    };
+    /**
+     * Call this when your action has completed.
+     */
+    var invoke = useCallback(function (fn, waitTimeMs) {
+        clearTimeouts();
+        timeout.current = setTimeout(fn, waitTimeMs);
+    }, []);
+    /**
+     * Clear timeout on loss of scope.
+     */
+    useEffect(function () {
+        return function () { return clearTimeouts(); };
+    }, []);
+    return invoke;
+};
+var useIntervalHook = function (_a) {
+    var callback = _a.callback, timeoutMs = _a.timeoutMs;
+    useEffect(function () {
+        var interval = setInterval(callback, timeoutMs);
+        return function () {
+            clearInterval(interval);
+        };
+    });
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -659,36 +713,67 @@ 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-skip-headers" : _h, params = __rest(_a, ["data-testid", "rowSelection", "suppressColumnVirtualization", "theme", "sizeColumns"]);
-    var _j = useContext(GridContext), gridReady = _j.gridReady, setApis = _j.setApis, prePopupOps = _j.prePopupOps, ensureRowVisible = _j.ensureRowVisible, getFirstRowId = _j.getFirstRowId, selectRowsById = _j.selectRowsById, focusByRowById = _j.focusByRowById, ensureSelectedRowIsVisible = _j.ensureSelectedRowIsVisible, autoSizeAllColumns = _j.autoSizeAllColumns, sizeColumnsToFit = _j.sizeColumnsToFit, externallySelectedItemsAreInSync = _j.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _j.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _j.isExternalFilterPresent, doesExternalFilterPass = _j.doesExternalFilterPass;
-    var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
+    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 ? "left" : _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 gridDivRef = useRef(null);
     var lastSelectedIds = useRef([]);
-    var _k = useState(false), staleGrid = _k[0], setStaleGrid = _k[1];
+    var _m = useState(false), staleGrid = _m[0], setStaleGrid = _m[1];
     var postSortRows = usePostSortRowsHook({ setStaleGrid: setStaleGrid });
+    /**
+     * onContentSize should only be called at maximum twice.
+     * Once when an empty grid is loaded.
+     * And again when the grid has content.
+     */
     var hasSetContentSize = useRef(false);
     var hasSetContentSizeEmpty = useRef(false);
+    var needsAutoSize = useRef(false);
     var setInitialContentSize = useCallback(function () {
-        if ((!isEmpty(params.rowData) && !hasSetContentSize.current) ||
-            (isEmpty(params.rowData) && !hasSetContentSizeEmpty.current)) {
-            var skipHeaders = sizeColumns === "auto-skip-headers";
-            if (sizeColumns === "auto" || skipHeaders) {
-                // If we aren't skipping headers and there's no data, then don't skip headers
-                var result = autoSizeAllColumns({ skipHeader: skipHeaders && !isEmpty(params.rowData) });
-                if (isEmpty(params.rowData)) {
+        var _a;
+        if (!((_a = gridDivRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+            // Don't resize grids if they are offscreen as it doesn't work.
+            needsAutoSize.current = true;
+            return;
+        }
+        var skipHeader = sizeColumns === "auto-skip-headers" && !isEmpty(params.rowData);
+        if (sizeColumns === "auto" || skipHeader) {
+            var result = autoSizeColumns({ skipHeader: skipHeader, userSizedColIds: userSizedColIds.current });
+            if (isEmpty(params.rowData)) {
+                if (!hasSetContentSizeEmpty.current && result && !hasSetContentSize.current) {
                     hasSetContentSizeEmpty.current = true;
+                    params.onContentSize && params.onContentSize(result);
                 }
-                else {
+            }
+            else {
+                if (result && !hasSetContentSize.current) {
                     hasSetContentSize.current = true;
+                    params.onContentSize && params.onContentSize(result);
                 }
-                params.onContentSize && result && params.onContentSize(result);
             }
         }
         if (sizeColumns !== "none") {
             sizeColumnsToFit();
         }
-    }, [autoSizeAllColumns, params, sizeColumns, sizeColumnsToFit]);
+        needsAutoSize.current = false;
+    }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
+    /**
+     * Auto-size windows that had deferred auto-size
+     */
+    useIntervalHook({
+        callback: function () {
+            if (needsAutoSize.current) {
+                needsAutoSize.current = false;
+                setInitialContentSize();
+            }
+        },
+        timeoutMs: 1000
+    });
+    var previousGridReady = useRef(gridReady);
     useEffect(function () {
-        gridReady && setInitialContentSize();
+        if (!previousGridReady.current && gridReady) {
+            previousGridReady.current = true;
+            setInitialContentSize();
+        }
     }, [gridReady, setInitialContentSize]);
     /**
      * On data load select the first row of the grid if required.
@@ -761,12 +846,16 @@ var Grid = function (_a) {
         }
         var selectedIds = params.externalSelectedItems.map(function (row) { return row.id; });
         var lastNewId = last(difference(selectedIds, lastSelectedIds.current));
-        if (lastNewId != null)
+        if (lastNewId != null) {
             ensureRowVisible(lastNewId);
+        }
         lastSelectedIds.current = selectedIds;
         selectRowsById(selectedIds);
         setExternallySelectedItemsAreInSync(true);
     }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
+    /**
+     * Combine grid and cell editable into one function
+     */
     var combineEditables = function () {
         var editables = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -784,9 +873,10 @@ var Grid = function (_a) {
     /**
      * Synchronise externally selected items to grid on externalSelectedItems change
      */
-    useEffect(function () {
-        synchroniseExternallySelectedItemsToGrid();
-    }, [synchroniseExternallySelectedItemsToGrid]);
+    useEffect(synchroniseExternallySelectedItemsToGrid, [synchroniseExternallySelectedItemsToGrid]);
+    /**
+     * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
+     */
     var columnDefs = useMemo(function () {
         var adjustColDefs = params.columnDefs.map(function (colDef) {
             var _a;
@@ -801,6 +891,7 @@ var Grid = function (_a) {
                     editable: false,
                     minWidth: 42,
                     maxWidth: 42,
+                    pinned: selectColumnPinned,
                     headerComponentParams: {
                         exportable: false
                     },
@@ -826,9 +917,13 @@ var Grid = function (_a) {
         params.selectable,
         params.readOnly,
         (_b = params.defaultColDef) === null || _b === void 0 ? void 0 : _b.editable,
+        selectColumnPinned,
         rowSelection,
         clickSelectorCheckboxWhenContainingCellClicked,
     ]);
+    /**
+     * When grid is ready set the apis to the grid context and sync selected items to grid.
+     */
     var onGridReady = useCallback(function (event) {
         setApis(event.api, event.columnApi, dataTestId);
         synchroniseExternallySelectedItemsToGrid();
@@ -838,28 +933,53 @@ var Grid = function (_a) {
      * This will resize columns when we have at least one row.
      */
     var previousRowDataLength = useRef(0);
-    useEffect(function () {
+    var onRowDataChanged = useCallback(function () {
         var _a, _b;
-        if (!gridReady)
-            return;
         var length = (_b = (_a = params.rowData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         if (previousRowDataLength.current !== length) {
-            if (previousRowDataLength.current === 0 && length > 0) {
-                setInitialContentSize();
-            }
+            setInitialContentSize();
             previousRowDataLength.current = length;
         }
-    }, [gridReady, (_c = params.rowData) === null || _c === void 0 ? void 0 : _c.length, setInitialContentSize]);
+        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, isUpdating, (_c = params.rowData) === null || _c === void 0 ? void 0 : _c.length, setInitialContentSize, sizeColumns, updatedDep]);
+    /**
+     * Show/hide no rows overlay when model changes.
+     */
+    var isShowingNoRowsOverlay = useRef(false);
     var onModelUpdated = useCallback(function (event) {
-        event.api.getDisplayedRowCount() === 0 ? event.api.showNoRowsOverlay() : event.api.hideOverlay();
+        if (event.api.getDisplayedRowCount() === 0) {
+            if (!isShowingNoRowsOverlay.current) {
+                event.api.showNoRowsOverlay();
+                isShowingNoRowsOverlay.current = true;
+            }
+        }
+        else {
+            if (isShowingNoRowsOverlay.current) {
+                event.api.hideOverlay();
+                isShowingNoRowsOverlay.current = false;
+            }
+        }
     }, []);
+    /**
+     * Force-refresh all selected rows to re-run class function, to update selection highlighting
+     */
     var refreshSelectedRows = useCallback(function (event) {
-        // Force-refresh all selected rows to re-run class function, to update selection highlighting
         event.api.refreshCells({
             force: true,
             rowNodes: event.api.getSelectedNodes()
         });
     }, []);
+    /**
+     * Make sure node is selected for editing and start edit
+     */
     var startCellEditing = useCallback(function (event) {
         var _a;
         prePopupOps();
@@ -877,16 +997,25 @@ var Grid = function (_a) {
             });
         }
     }, [checkUpdating, prePopupOps]);
+    /**
+     * Handle double click edit
+     */
     var onCellDoubleClick = useCallback(function (event) {
         if (!invokeEditAction(event))
             startCellEditing(event);
     }, [startCellEditing]);
+    /**
+     * Handle single click edits
+     */
     var onCellClicked = useCallback(function (event) {
         var _a, _b;
         if ((_b = (_a = event.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.singleClickEdit) {
             startCellEditing(event);
         }
     }, [startCellEditing]);
+    /**
+     * If cell has an edit action invoke it (if editable)
+     */
     var invokeEditAction = function (e) {
         var _a, _b, _c;
         var editAction = (_b = (_a = e.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.editAction;
@@ -901,6 +1030,9 @@ var Grid = function (_a) {
         }
         return true;
     };
+    /**
+     * Start editing on pressing Enter
+     */
     var onCellKeyPress = useCallback(function (e) {
         if (e.event.key === "Enter") {
             if (!invokeEditAction(e))
@@ -914,7 +1046,82 @@ var Grid = function (_a) {
     var columnDefsAdjusted = useMemo(function () {
         return columnDefs.map(function (colDef) { return (__assign(__assign({}, colDef), { suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex })); });
     }, [columnDefs, sizeColumns]);
-    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 } }, { children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: setInitialContentSize, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, 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 }) })) })));
+    /**
+     * Set of colIds that need auto-sizing.
+     */
+    var colIdsEdited = useRef(new Set());
+    /**
+     * When cell editing has completed tag 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() &&
+                    autoSizeColumns({
+                        skipHeader: skipHeader,
+                        userSizedColIds: userSizedColIds.current,
+                        colIds: [colId]
+                    });
+            }
+        }
+    }, [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]);
+    /**
+     * Resize columns to fit if required on window/container resize
+     */
+    var onGridSizeChanged = useCallback(function () {
+        if (sizeColumns !== "none") {
+            sizeColumnsToFit();
+        }
+    }, [sizeColumns, sizeColumnsToFit]);
+    /**
+     * Set of column Id's that are prevented from auto-sizing as they are user set
+     */
+    var userSizedColIds = useRef(new Set());
+    /**
+     * Lock/unlock column width on user edit/reset.
+     */
+    var onColumnResized = useCallback(function (e) {
+        var _a;
+        var colId = (_a = e.column) === null || _a === void 0 ? void 0 : _a.getColId();
+        if (colId == null)
+            return;
+        switch (e.source) {
+            case "uiColumnDragged":
+                userSizedColIds.current.add(colId);
+                break;
+            case "autosizeColumns":
+                userSizedColIds.current["delete"](colId);
+                break;
+        }
+    }, []);
+    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: {
+                    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 }) })) })));
 };
 
 var GridPopoverContext = createContext({
@@ -1054,7 +1261,7 @@ var generateFilterGetter = function (field, filterValueGetter, valueFormatter) {
  * All cells should use this.
  */
 var GridCell = function (props, custom) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // Generate a default filter value getter which uses the formatted value plus
     // the editable value if it's a string and different from the formatted value.
     // This is so that e.g. bearings can be searched for by DMS or raw number.
@@ -1063,12 +1270,12 @@ var GridCell = function (props, custom) {
     var exportable = props.exportable;
     // Can't leave this here ag-grid will complain
     delete props.exportable;
-    return __assign(__assign(__assign(__assign(__assign(__assign({ colId: (_a = props.field) !== null && _a !== void 0 ? _a : props.field, headerTooltip: props.headerName, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true, minWidth: props.flex ? 150 : 48, editable: (_b = props.editable) !== null && _b !== void 0 ? _b : false }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
+    return __assign(__assign(__assign(__assign(__assign(__assign({ colId: (_a = props.field) !== null && _a !== void 0 ? _a : props.field, headerTooltip: props.headerName, sortable: !!((props === null || props === void 0 ? void 0 : props.field) || (props === null || props === void 0 ? void 0 : props.valueGetter)), resizable: true, editable: (_b = props.editable) !== null && _b !== void 0 ? _b : false }, ((custom === null || custom === void 0 ? void 0 : custom.editor) && {
         cellClassRules: GridCellMultiSelectClassRules,
         editable: (_c = props.editable) !== null && _c !== void 0 ? _c : true,
         cellEditor: GenericCellEditorComponentWrapper(custom === null || custom === void 0 ? void 0 : custom.editor)
     })), { suppressKeyboardEvent: suppressCellKeyboardEvents }), ((custom === null || custom === void 0 ? void 0 : custom.editorParams) && {
-        cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit })
+        cellEditorParams: __assign(__assign({}, custom.editorParams), { multiEdit: custom.multiEdit, preventAutoEdit: (_d = custom.preventAutoEdit) !== null && _d !== void 0 ? _d : false })
     })), { 
         // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
         filterValueGetter: filterValueGetter, 
@@ -2274,7 +2481,21 @@ var MenuList = function (_a) {
             }
             : undefined;
     }, [dontShrinkIfDirectionIsTop, expandedDirection, isSubmenuOpen]);
-    return (jsxs("ul", __assign({ role: "menu", "aria-label": ariaLabel }, mergeProps({ onKeyDown: onKeyDown, onAnimationEnd: onAnimationEnd }, restProps), commonProps(isDisabled), { ref: useCombinedRef(externalRef, menuRef), className: useBEM({ block: menuClass, modifiers: modifiers, className: menuClassName }), style: __assign(__assign(__assign(__assign({}, menuStyle), overflowStyle), dontShrinkOps), { margin: 0, display: state === "closed" ? "none" : undefined, position: "absolute", left: menuPosition.x, top: menuPosition.y }) }, { children: [jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 } }), arrow && (jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
+    return (jsxs("ul", __assign({ role: "menu", "aria-label": ariaLabel }, mergeProps({ onKeyDown: onKeyDown, onAnimationEnd: onAnimationEnd }, restProps), commonProps(isDisabled), { ref: useCombinedRef(externalRef, menuRef), className: useBEM({ block: menuClass, modifiers: modifiers, className: menuClassName }), style: __assign(__assign(__assign(__assign({}, menuStyle), overflowStyle), dontShrinkOps), { margin: 0, display: state === "closed" ? "none" : undefined, position: "absolute", left: menuPosition.x, top: menuPosition.y }) }, { children: [jsx("div", { ref: focusRef, tabIndex: -1, style: { position: "absolute", left: 0, top: 0 }, onKeyDown: function (event) {
+                    if (event.key == "Tab") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        safeCall(onClose, {
+                            key: event.key,
+                            shiftKey: event.shiftKey,
+                            reason: event.key === "Tab"
+                                ? event.shiftKey
+                                    ? CloseReason.TAB_BACKWARD
+                                    : CloseReason.TAB_FORWARD
+                                : CloseReason.CLICK
+                        });
+                    }
+                } }), arrow && (jsx("div", { className: _arrowClass, style: __assign(__assign({}, arrowStyle), { position: "absolute", left: arrowPosition.x, top: arrowPosition.y }), ref: arrowRef })), jsx(MenuListContext.Provider, __assign({ value: listContext }, { children: jsx(MenuListItemContext.Provider, __assign({ value: itemContext }, { children: jsx(HoverItemContext.Provider, __assign({ value: hoverItem }, { children: children })) })) }))] })));
 };
 
 var ControlledMenuFr = function (_a, externalRef) {
@@ -2991,41 +3212,6 @@ var GridFilters = function (_a) {
     return jsx("div", __assign({ className: "Grid-container-filters" }, { children: children }));
 };
 
-/**
- * Cancels timeouts on scope being destroyed.
- *
- * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
- * This could have been implemented using debounce if the callers function was wrapped in useCallback,
- * but there's no way to enforce that, so  it would lead to bugs.
- */
-var useTimeoutHook = function () {
-    var timeout = useRef();
-    /**
-     * Clear any pending timeouts.
-     */
-    var clearTimeouts = function () {
-        if (timeout.current) {
-            var tc = timeout.current;
-            timeout.current = undefined;
-            clearTimeout(tc);
-        }
-    };
-    /**
-     * Call this when your action has completed.
-     */
-    var invoke = useCallback(function (fn, waitTimeMs) {
-        clearTimeouts();
-        timeout.current = setTimeout(fn, waitTimeMs);
-    }, []);
-    /**
-     * Clear timeout on loss of scope.
-     */
-    useEffect(function () {
-        return function () { return clearTimeouts(); };
-    }, []);
-    return invoke;
-};
-
 /**
  * Defers state change up to a minimum time since last state change.
  */
@@ -3349,10 +3535,10 @@ var textMatch = function (text, filter) {
 };
 
 var useGridPopoverHook = function (props) {
-    var stopEditing = useContext(GridContext).stopEditing;
-    var _a = useGridPopoverContext(), anchorRef = _a.anchorRef, saving = _a.saving, updateValue = _a.updateValue;
+    var _a = useContext(GridContext), stopEditing = _a.stopEditing, cancelEdit = _a.cancelEdit;
+    var _b = useGridPopoverContext(), anchorRef = _b.anchorRef, saving = _b.saving, updateValue = _b.updateValue;
     var saveButtonRef = useRef(null);
-    var _b = useState(false), isOpen = _b[0], setOpen = _b[1];
+    var _c = useState(false), isOpen = _c[0], setOpen = _c[1];
     useEffect(function () {
         setOpen(true);
     }, []);
@@ -3361,14 +3547,14 @@ var useGridPopoverHook = function (props) {
             switch (_a.label) {
                 case 0:
                     if (reason == CloseReason.CANCEL) {
-                        stopEditing();
+                        cancelEdit();
                         return [2 /*return*/];
                     }
                     if (props.invalid && props.invalid()) {
                         return [2 /*return*/];
                     }
                     if (!!props.save) return [3 /*break*/, 1];
-                    stopEditing();
+                    cancelEdit();
                     return [3 /*break*/, 3];
                 case 1:
                     if (!props.save) return [3 /*break*/, 3];
@@ -3385,7 +3571,7 @@ var useGridPopoverHook = function (props) {
                 case 3: return [2 /*return*/];
             }
         });
-    }); }, [props, stopEditing, updateValue]);
+    }); }, [cancelEdit, props, stopEditing, updateValue]);
     var popoverWrapper = useCallback(function (children) {
         return (jsx(Fragment, { children: anchorRef.current && (jsxs(ControlledMenu, __assign({ state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: function (event) {
                     // Prevent menu from closing when modals are invoked
@@ -3475,15 +3661,7 @@ var GridFormDropDown = function (props) {
                                     }
                                     : item;
                             });
-                            if (props.filtered) {
-                                // This is needed otherwise when filter input is rendered and sets autofocus
-                                // the mouse up of the double click edit triggers the cell to cancel editing
-                                setOptions(optionsList);
-                                //delay(() => setOptions(optionsList), 100);
-                            }
-                            else {
-                                setOptions(optionsList);
-                            }
+                            setOptions(optionsList);
                         }
                         return [2 /*return*/];
                 }
@@ -4411,7 +4589,7 @@ var GridPopoverMenu = function (colDef, custom) {
     return GridCell(__assign(__assign({ minWidth: 48, maxWidth: 48, width: 40, editable: colDef.editable != null ? colDef.editable : true, exportable: false, cellStyle: { flex: 1, justifyContent: "center" }, cellRenderer: GridRenderPopoutMenuCell }, colDef), { cellRendererParams: {
             // Menus open on single click, this parameter is picked up in Grid.tsx
             singleClickEdit: true
-        } }), __assign({ editor: GridFormPopoverMenu }, custom));
+        } }), __assign({ editor: GridFormPopoverMenu, preventAutoEdit: true }, custom));
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
@@ -4503,14 +4681,14 @@ var GridContextProvider = function (props) {
      * @return true if row is found, else false
      */
     var ensureRowVisible = useCallback(function (id) {
-        return gridApiOp(function (gridApi) {
-            var node = gridApi.getRowNode("".concat(id));
-            if (!node)
-                return false;
-            gridApi.ensureNodeVisible(node);
-            return true;
-        });
-    }, [gridApiOp]);
+        if (!gridApi)
+            return false;
+        var node = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getRowNode("".concat(id));
+        if (!node)
+            return false;
+        defer$1(function () { return gridApi.ensureNodeVisible(node); });
+        return true;
+    }, [gridApi]);
     var getFirstRowId = useCallback(function () {
         var id = 0;
         try {
@@ -4622,17 +4800,16 @@ var GridContextProvider = function (props) {
             var rowsThatNeedSelecting = sortBy(rowNodes.filter(function (node) { return !node.isSelected(); }), function (node) { return node.data.id; });
             var firstNode = rowsThatNeedSelecting[0];
             if (firstNode) {
-                gridApi.ensureNodeVisible(firstNode);
+                defer$1(function () { return gridApi.ensureNodeVisible(firstNode); });
                 var colDefs = gridApi.getColumnDefs();
-                if (colDefs && colDefs.length) {
+                if (colDefs === null || colDefs === void 0 ? void 0 : colDefs.length) {
                     var col = colDefs[0]; // We don't support ColGroupDef
                     var rowIndex_1 = firstNode.rowIndex;
                     if (rowIndex_1 != null && col != null) {
                         var colId_1 = col.colId;
                         // We need to make sure we aren't currently editing a cell otherwise tests will fail
                         // as they will start to edit the cell before this stuff has a chance to run
-                        colId_1 != null &&
-                            defer$1(function () { return isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex_1, colId_1); });
+                        colId_1 && defer$1(function () { return isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex_1, colId_1); });
                     }
                 }
             }
@@ -4727,45 +4904,97 @@ var GridContextProvider = function (props) {
             var selectedNodes = gridApi.getSelectedNodes();
             if (isEmpty(selectedNodes))
                 return;
-            gridApi.ensureNodeVisible(last(selectedNodes));
+            defer$1(function () { return gridApi.ensureNodeVisible(last(selectedNodes)); });
         });
     }, [gridApiOp]);
     /**
      * Resize columns to fit container
      */
-    var autoSizeAllColumns = useCallback(function (_a) {
-        var skipHeader = _a.skipHeader;
-        if (columnApi) {
-            columnApi.autoSizeAllColumns(skipHeader);
-            return {
-                width: sumBy(columnApi.getColumnState().filter(function (col) { return col.hide !== true; }), "width")
-            };
-        }
-        return null;
+    var autoSizeColumns = useCallback(function (_a) {
+        var _b = _a === void 0 ? {} : _a, skipHeader = _b.skipHeader, colIds = _b.colIds, userSizedColIds = _b.userSizedColIds;
+        if (!columnApi)
+            return null;
+        var colIdsSet = colIds instanceof Set ? colIds : new Set(colIds !== null && colIds !== void 0 ? colIds : []);
+        columnApi.getColumnState().forEach(function (col) {
+            var colId = col.colId;
+            if ((isEmpty(colIdsSet) || colIdsSet.has(colId)) && !(userSizedColIds === null || userSizedColIds === void 0 ? void 0 : userSizedColIds.has(colId))) {
+                columnApi.autoSizeColumn(colId, skipHeader);
+            }
+        });
+        return {
+            width: sumBy(columnApi.getColumnState().filter(function (col) { return !col.hide; }), "width")
+        };
     }, [columnApi]);
     /**
      * Resize columns to fit container
      */
     var sizeColumnsToFit = useCallback(function () {
-        if (gridApi) {
-            gridApi.sizeColumnsToFit();
-        }
+        gridApi && gridApi.sizeColumnsToFit();
     }, [gridApi]);
     var stopEditing = useCallback(function () {
+        if (!gridApi)
+            return;
         if (prePopupFocusedCell.current) {
             gridApi === null || gridApi === void 0 ? void 0 : gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
         }
-        gridApiOp(function (gridApi) { return gridApi.stopEditing(); });
-    }, [gridApi, gridApiOp]);
-    var selectNextCell = useCallback(function (tabDirection) {
-        if (tabDirection === void 0) { tabDirection = 0; }
-        gridApiOp(function (gridApi) {
-            if (tabDirection == 1)
-                gridApi.tabToNextCell();
-            if (tabDirection == -1)
-                gridApi.tabToPreviousCell();
-        });
-    }, [gridApiOp]);
+        gridApi.stopEditing();
+    }, [gridApi]);
+    /**
+     * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
+     */
+    var cancelEdit = useCallback(function () {
+        stopEditing();
+        cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+    }, [stopEditing]);
+    var cellEditingCompleteCallbackRef = useRef();
+    var setOnCellEditingComplete = useCallback(function (cellEditingCompleteCallback) {
+        cellEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
+    }, []);
+    /**
+     * Returns true if an editable cell on same row was selected, else false.
+     */
+    var selectNextEditableCell = useCallback(function (tabDirection) {
+        // Pretend it succeeded to prevent unwanted cellEditingCompleteCallback
+        if (!gridApi)
+            return true;
+        var focusedCellIsEditable = function () {
+            var _a, _b;
+            var focusedCell = gridApi.getFocusedCell();
+            var nextColumn = focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell.column;
+            var nextColDef = nextColumn === null || nextColumn === void 0 ? void 0 : nextColumn.getColDef();
+            var rowNode = focusedCell && gridApi.getDisplayedRowAtIndex(focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell.rowIndex);
+            return (!!(rowNode && nextColumn && nextColDef) &&
+                nextColumn.isCellEditable(rowNode) &&
+                !((_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();
+            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;
+            }
+        }
+        return true;
+    }, [gridApi, prePopupOps]);
     var updatingCells = useCallback(function (props, fnUpdate, setSaving, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -4812,12 +5041,13 @@ var GridContextProvider = function (props) {
                                             setSaving && setSaving(false);
                                         }
                                         postPopupFocusedCell = gridApi.getFocusedCell();
-                                        if (tabDirection &&
-                                            prePopupFocusedCell.current &&
+                                        if (prePopupFocusedCell.current &&
                                             postPopupFocusedCell &&
                                             prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
                                             prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
-                                            selectNextCell(tabDirection);
+                                            if (!tabDirection || selectNextEditableCell(tabDirection)) {
+                                                cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+                                            }
                                         }
                                         return [2 /*return*/, ok];
                                 }
@@ -4826,7 +5056,7 @@ var GridContextProvider = function (props) {
                 case 1: return [2 /*return*/, _a.sent()];
             }
         });
-    }); }, [gridApiOp, modifyUpdating, selectNextCell]);
+    }); }, [gridApiOp, modifyUpdating, selectNextEditableCell]);
     var redrawRows = useCallback(function (rowNodes) {
         gridApiOp(function (gridApi) {
             gridApi.redrawRows(rowNodes ? { rowNodes: rowNodes } : undefined);
@@ -4864,11 +5094,11 @@ var GridContextProvider = function (props) {
     }, [gridApi]);
     var addExternalFilter = function (filter) {
         externalFilters.current.push(filter);
-        onFilterChanged();
+        onFilterChanged().then();
     };
     var removeExternalFilter = function (filter) {
         remove(externalFilters.current, function (v) { return v === filter; });
-        onFilterChanged();
+        onFilterChanged().then();
     };
     var isExternalFilterPresent = function () { return externalFilters.current.length > 0; };
     var doesExternalFilterPass = function (node) {
@@ -4919,8 +5149,9 @@ var GridContextProvider = function (props) {
             ensureRowVisible: ensureRowVisible,
             ensureSelectedRowIsVisible: ensureSelectedRowIsVisible,
             sizeColumnsToFit: sizeColumnsToFit,
-            autoSizeAllColumns: autoSizeAllColumns,
+            autoSizeColumns: autoSizeColumns,
             stopEditing: stopEditing,
+            cancelEdit: cancelEdit,
             updatingCells: updatingCells,
             redrawRows: redrawRows,
             externallySelectedItemsAreInSync: externallySelectedItemsAreInSync,
@@ -4930,7 +5161,8 @@ var GridContextProvider = function (props) {
             removeExternalFilter: removeExternalFilter,
             isExternalFilterPresent: isExternalFilterPresent,
             doesExternalFilterPass: doesExternalFilterPass,
-            downloadCsv: downloadCsv
+            downloadCsv: downloadCsv,
+            setOnCellEditingComplete: setOnCellEditingComplete
         } }, { children: props.children })));
 };
 /**
@@ -4970,6 +5202,7 @@ var downloadCsvUseValueFormattersProcessCellCallback = function (params) {
         return encodeToString(params.value);
     }
     var result = valueFormatter(__assign(__assign({}, params), { data: (_b = params.node) === null || _b === void 0 ? void 0 : _b.data, colDef: colDef }));
+    // 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: ".concat(colDef.colId));
     }
@@ -4984,11 +5217,15 @@ var GridUpdatingContextProvider = function (props) {
     var resetUpdating = function () {
         var mergedUpdatingBlocks = {};
         for (var key in updatingBlocks.current) {
-            mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
+            var arr = flatten(updatingBlocks.current[key]);
+            if (arr.length) {
+                mergedUpdatingBlocks[key] = arr;
+            }
         }
         updating.current = mergedUpdatingBlocks;
         setUpdatedDep(function (updatedDep) { return updatedDep + 1; });
     };
+    var isUpdating = function () { return !isEmpty(updating.current); };
     var modifyUpdating = function (fields, ids, fn) { return __awaiter(void 0, void 0, void 0, function () {
         var idRef;
         return __generator(this, function (_a) {
@@ -5016,7 +5253,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, updatedDep: updatedDep } }, { children: props.children })));
+    return (jsx(GridUpdatingContext.Provider, __assign({ value: { modifyUpdating: modifyUpdating, checkUpdating: checkUpdating, isUpdating: isUpdating, 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%}";