@linzjs/step-ag-grid 28.5.0 → 29.0.0

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, compact, filter, sumBy, remove, pull, castArray, flatten } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, pull, compact, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import React, { useRef, useLayoutEffect, useEffect, createContext, useContext, useState, useMemo, memo, forwardRef, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 
@@ -447,9 +447,6 @@ const GridContext = createContext({
     prePopupOps: () => {
         console.error('no context provider for prePopupOps');
     },
-    postPopupOps: () => {
-        console.error('no context provider for prePopupOps');
-    },
     externallySelectedItemsAreInSync: false,
     setApis: () => {
         console.error('no context provider for setApis');
@@ -521,15 +518,12 @@ const GridContext = createContext({
         console.error('no context provider for editingCells');
         return false;
     },
-    cancelEdit: () => {
-        console.error('no context provider for cancelEdit');
-    },
     // eslint-disable-next-line @typescript-eslint/require-await
     startCellEditing: async () => {
         console.error('no context provider for startCellEditing');
     },
-    stopEditing: () => {
-        console.error('no context provider for stopEditing');
+    resetFocusedCellAfterCellEditing: () => {
+        console.error('no context provider for resetFocusedCellAfterCellEditing');
     },
     // eslint-disable-next-line @typescript-eslint/require-await
     updatingCells: async () => {
@@ -563,8 +557,11 @@ const GridContext = createContext({
     downloadCsv: () => {
         console.error('no context provider for downloadCsv');
     },
-    setOnCellEditingComplete: () => {
-        console.error('no context provider for setOnCellEditingComplete');
+    onBulkEditingComplete: () => {
+        console.error('no context provider for onBulkEditingComplete');
+    },
+    setOnBulkEditingComplete: () => {
+        console.error('no context provider for setOnBulkEditingComplete');
     },
     showNoRowsOverlay: () => {
         console.error('no context provider for showLoadingOverlay');
@@ -573,6 +570,10 @@ const GridContext = createContext({
 const useGridContext = () => useContext(GridContext);
 
 const GridUpdatingContext = createContext({
+    anyUpdating: () => {
+        console.error('Missing GridUpdatingContext');
+        return false;
+    },
     checkUpdating: () => {
         console.error('Missing GridUpdatingContext');
         return false;
@@ -1794,6 +1795,9 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
             return;
         }
         const callback = debounce$1(() => {
+            if (!menuRef.current) {
+                return;
+            }
             const { width, height } = menuRef.current.ownerDocument.body.getBoundingClientRect();
             if (width === 0 || height === 0)
                 return;
@@ -2539,7 +2543,7 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
 const SubMenu = withHovering('SubMenu', SubMenuFr);
 
 const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, }) => {
-    const { redrawRows, prePopupOps, postPopupOps, getSelectedRows } = useContext(GridContext);
+    const { redrawRows, prePopupOps, resetFocusedCellAfterCellEditing, getSelectedRows } = useContext(GridContext);
     const [isOpen, setOpen] = useState(false);
     const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -2556,8 +2560,8 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
     const closeMenu = useCallback(() => {
         setOpen(false);
         redrawRows();
-        postPopupOps();
-    }, [postPopupOps, redrawRows]);
+        resetFocusedCellAfterCellEditing();
+    }, [resetFocusedCellAfterCellEditing, redrawRows]);
     const cellContextMenu = useCallback((event) => {
         if (contextMenuSelectRow && !event.node.isSelected()) {
             event.node.setSelected(true, true);
@@ -2753,36 +2757,11 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
 };
 
 ModuleRegistry.registerModules([AllCommunityModule]);
-let timeOfLastSingleClick = 0;
-let lastClickColId;
-let lastClickRowIndex;
-const resetClickDebounce = () => {
-    timeOfLastSingleClick = 0;
-    lastClickColId = '';
-    lastClickRowIndex = -1;
-};
-/**
- * If click is more than 200ms since last click return true.
- */
-const clickDebounceSkipClick = (colId, rowIndex) => {
-    const doubleClickMs = 200;
-    if (Date.now() - timeOfLastSingleClick < doubleClickMs &&
-        lastClickColId === colId &&
-        lastClickRowIndex === rowIndex) {
-        // Skipping double click due to single click edit
-        return true;
-    }
-    timeOfLastSingleClick = Date.now();
-    lastClickColId = colId;
-    lastClickRowIndex = rowIndex;
-    return false;
-};
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
 const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, ...params }) => {
-    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, stopEditing, } = useContext(GridContext);
-    const { startCellEditing } = useGridContext();
+    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing, } = useGridContext();
     const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
     const lastSelectedIds = useRef([]);
@@ -2859,7 +2838,8 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 needsAutoSize.current = true;
             }
         }
-        if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === 'auto')) {
+        if (needsAutoSize.current ||
+            (!hasSetContentSize.current && (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers'))) {
             needsAutoSize.current = false;
             setInitialContentSize();
         }
@@ -3000,26 +2980,10 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const onModelUpdated = useCallback((event) => {
         event.api.showNoRowsOverlay();
     }, []);
-    /**
-     * Force-refresh all selected rows to re-run class function, to update selection highlighting
-     */
-    const refreshSelectedRows = useCallback((_event) => {
-        // MATT Disabled I don't believe these are needed anymore
-        // I've left them here just in case they are
-        /*event.api.refreshCells({
-          force: true,
-          rowNodes: event.api.getSelectedNodes(),
-        });*/
-    }, []);
     /**
      * Handle double click edit
      */
     const onCellDoubleClick = useCallback((event) => {
-        if (clickDebounceSkipClick(event.colDef.colId, event.rowIndex)) {
-            // the next click will be a single click, we want it to pass
-            resetClickDebounce();
-            return;
-        }
         const editable = fnOrVar(event.colDef?.editable, event);
         if (editable && !invokeEditAction(event)) {
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
@@ -3031,9 +2995,6 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     const onCellClicked = useCallback((event) => {
         const editable = fnOrVar(event.colDef?.editable, event);
         if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
-            if (clickDebounceSkipClick(event.colDef.colId, event.rowIndex)) {
-                return;
-            }
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
     }, [singleClickEdit, startCellEditing]);
@@ -3129,11 +3090,10 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
     useEffect(() => {
         const newLoading = !rowData || params.loading === true;
         if (newLoading && !prevLoading.current) {
-            stopEditing();
             showNoRowsOverlay();
         }
         prevLoading.current = newLoading;
-    }, [params.loading, rowData, showNoRowsOverlay, stopEditing]);
+    }, [params.loading, rowData, showNoRowsOverlay]);
     /**
      * Resize columns to fit if required on window/container resize
      */
@@ -3195,6 +3155,23 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             });
         }
     }, [clearHighlightRowClasses]);
+    const onCellFocused = useCallback((event) => {
+        if (!params.onCellFocused || event.rowIndex == null) {
+            return;
+        }
+        const api = event.api;
+        const rowNode = api.getDisplayedRowAtIndex(event.rowIndex);
+        const data = rowNode?.data;
+        const column = event.column;
+        if (!data || !column || typeof column === 'string') {
+            return;
+        }
+        const colDef = column.getColDef();
+        if (!colDef || typeof colDef === 'string') {
+            return;
+        }
+        params.onCellFocused({ colDef, data });
+    }, [params]);
     const onRowDragEnd = useCallback((event) => {
         clearHighlightRowClasses();
         gridElementRef.current = undefined;
@@ -3219,57 +3196,76 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
         }
     }, [params.setExternalSelectedItems, selectable]);
     // This is setting a ref in the GridContext so won't be triggering an update loop
-    setOnCellEditingComplete(params.onCellEditingComplete);
-    const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
-    const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
+    setOnBulkEditingComplete(params.onBulkEditingComplete);
+    const getRowId = useCallback((params) => `${params.data.id}`, []);
+    const defaultColDef = useMemo(() => ({
+        minWidth: 48,
+        ...omit(params.defaultColDef, ['editable', 'field', 'colId', 'tooltipField']),
+    }), [params.defaultColDef]);
+    const noRowsOverlayComponent = useCallback((event) => {
+        const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
+        let rowCount = 0;
+        event.api.forEachNode(() => rowCount++);
+        return (jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
+    }, [columnDefs, params.loading, params.noRowsMatchingOverlayText, params.noRowsOverlayText, rowData, rowHeight]);
+    const selectionColumnDef = useMemo(() => {
+        const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
+        return {
+            suppressNavigable: params.hideSelectColumn,
+            rowDrag: !!params.onRowDragEnd,
+            minWidth: selectWidth,
+            maxWidth: selectWidth,
+            pinned: selectColumnPinned,
+            headerComponentParams: {
+                exportable: false,
+            },
+            headerClass: clsx('ag-header-hide-default-select', params.onRowDragEnd && 'ag-header-select-draggable'),
+            headerComponent: rowSelection == 'multiple' ? GridHeaderSelect : undefined,
+            suppressHeaderKeyboardEvent: (e) => {
+                if (!selectable)
+                    return false;
+                if ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
+                    if (isEmpty(e.api.getSelectedRows())) {
+                        e.api.selectAll('filtered');
+                    }
+                    else {
+                        e.api.deselectAll();
+                    }
+                    return true;
+                }
+                return false;
+            },
+            onCellClicked: params.enableSelectionWithoutKeys || params.enableClickSelection
+                ? undefined
+                : clickInputWhenContainingCellClicked,
+        };
+    }, [
+        params.enableClickSelection,
+        params.enableSelectionWithoutKeys,
+        params.hideSelectColumn,
+        params.onRowDragEnd,
+        rowSelection,
+        selectColumnPinned,
+        selectable,
+    ]);
     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, { theme: 'legacy', rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
                             mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
                         }
-                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, 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;
-                        event.api.forEachNode(() => rowCount++);
-                        return (jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
-                    }, quickFilterParser: (filterStr) => {
-                        // filter is exact matches exactly groups separated by commas
-                        return filterStr.split(',').map((str) => str.trim());
-                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData, selectionColumnDef: {
-                        suppressNavigable: params.hideSelectColumn,
-                        rowDrag: !!params.onRowDragEnd,
-                        minWidth: selectWidth,
-                        maxWidth: selectWidth,
-                        pinned: selectColumnPinned,
-                        headerComponentParams: {
-                            exportable: false,
-                        },
-                        headerClass: clsx('ag-header-hide-default-select', params.onRowDragEnd && 'ag-header-select-draggable'),
-                        headerComponent: rowSelection == 'multiple' ? GridHeaderSelect : undefined,
-                        suppressHeaderKeyboardEvent: (e) => {
-                            if (!selectable)
-                                return false;
-                            if ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
-                                if (isEmpty(e.api.getSelectedRows())) {
-                                    e.api.selectAll('filtered');
-                                }
-                                else {
-                                    e.api.deselectAll();
-                                }
-                                return true;
-                            }
-                            return false;
-                        },
-                        onCellClicked: params.enableSelectionWithoutKeys || params.enableClickSelection
-                            ? undefined
-                            : clickInputWhenContainingCellClicked,
-                    } }) })] }));
+                        : undefined, rowHeight: rowHeight, animateRows: params.animateRows ?? false, rowClassRules: params.rowClassRules, getRowId: getRowId, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: setInitialContentSize, onRowDataUpdated: onRowDataChanged, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, selectionColumnDef: selectionColumnDef, rowData: rowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, quickFilterParser: quickFilterParser, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, noRowsOverlayComponent: noRowsOverlayComponent, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragCancel: clearHighlightRowClasses, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData }) })] }));
+};
+const quickFilterParser = (filterStr) => {
+    // filter is exact matches exactly groups separated by commas
+    return filterStr.split(',').map((str) => str.trim());
 };
 
 const GridPopoverContext = createContext({
     anchorRef: { current: null },
     saving: false,
     setSaving: () => { },
+    stopEditing: () => { },
     colId: '',
     field: '',
     value: null,
@@ -3287,7 +3283,7 @@ const GridPopoverContextProvider = (props2) => {
     const anchorRef = useRef(props.eGridCell);
     const hasSaved = useRef(false);
     const [saving, setSaving] = useState(false);
-    const { colDef } = props;
+    const { colDef, stopEditing, formatValue, data, value } = props;
     const { cellEditorParams } = colDef;
     const multiEdit = cellEditorParams?.multiEdit ?? false;
     // Then item that is clicked on will always be first in the list
@@ -3295,8 +3291,10 @@ const GridPopoverContextProvider = (props2) => {
     const field = props.colDef?.field ?? '';
     const colId = props.colDef?.colId ?? field ?? '';
     const updateValue = useCallback(async (saveFn, tabDirection) => {
-        if (hasSaved.current)
+        if (hasSaved.current) {
+            // already called save so ignore
             return true;
+        }
         hasSaved.current = true;
         return saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
     }, [field, saving, selectedRows, updatingCells]);
@@ -3307,10 +3305,11 @@ const GridPopoverContextProvider = (props2) => {
             selectedRows,
             colId,
             field,
-            data: props.data,
-            value: props.value,
+            data,
+            value,
             updateValue,
-            formatValue: props.formatValue,
+            formatValue,
+            stopEditing,
         }, children: children }));
 };
 
@@ -3460,7 +3459,7 @@ const GridCellMultiEditor = (props, cellEditorSelector) => GridCell({
 });
 
 const useGridFilter = (filter) => {
-    const { addExternalFilter, removeExternalFilter } = useContext(GridContext);
+    const { addExternalFilter, removeExternalFilter } = useGridContext();
     useEffect(() => {
         const thisFilter = filter;
         thisFilter && addExternalFilter(thisFilter);
@@ -3935,8 +3934,8 @@ const textMatch = (text, filter) => {
 };
 
 const useGridPopoverHook = (props) => {
-    const { stopEditing, cancelEdit } = useContext(GridContext);
-    const { anchorRef, saving, updateValue } = useGridPopoverContext();
+    const { onBulkEditingComplete } = useGridContext();
+    const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext();
     const saveButtonRef = useRef(null);
     const [isOpen, setOpen] = useState(false);
     useEffect(() => {
@@ -3944,30 +3943,30 @@ const useGridPopoverHook = (props) => {
     }, []);
     const triggerSave = useCallback(async (reason) => {
         if (reason == CloseReason.CANCEL) {
-            cancelEdit();
+            stopEditing();
+            onBulkEditingComplete();
             return;
         }
-        if (props.invalid && props.invalid()) {
+        if (props?.invalid?.()) {
+            // Don't close, don't do anything it's invalid
             return;
         }
         if (!props.save) {
-            cancelEdit();
-        }
-        else if (props.save) {
-            // forms that don't provide an invalid fn must wait until they have saved to close
-            if (props.invalid)
-                stopEditing();
-            if (await updateValue(props.save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
-                if (!props.invalid)
-                    stopEditing();
-            }
+            // No save method so just close
+            stopEditing();
+            onBulkEditingComplete();
+            return;
         }
-    }, [cancelEdit, props, stopEditing, updateValue]);
+        if (await updateValue(props.save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
+            stopEditing();
+        }
+    }, [onBulkEditingComplete, props, stopEditing, updateValue]);
     const popoverWrapper = useCallback((children) => {
         return (jsx(Fragment, { children: anchorRef.current && (jsxs(ControlledMenu, { state: isOpen ? 'open' : 'closed', portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: 'step-ag-grid-react-menu', onClose: (event) => {
                     // Prevent menu from closing when modals are invoked
-                    if (event.reason === CloseReason.BLUR)
+                    if (event.reason === CloseReason.BLUR) {
                         return;
+                    }
                     void triggerSave(event.reason);
                 }, viewScroll: 'auto', dontShrinkIfDirectionIsTop: true, className: props.className, children: [saving && ( // This is the overlay that prevents editing when the editor is saving
                     jsx("div", { className: 'ComponentLoadingWrapper-saveOverlay' })), children, jsx("button", { ref: saveButtonRef, "data-reason": '', onClick: (e) => {
@@ -5061,7 +5060,7 @@ const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 const GridContextProvider = (props) => {
-    const { modifyUpdating, checkUpdating } = useContext(GridUpdatingContext);
+    const { modifyUpdating, anyUpdating } = useContext(GridUpdatingContext);
     const [gridApi, setGridApi] = useState();
     const [gridReady, setGridReady] = useState(false);
     const [quickFilter, _setQuickFilter] = useState('');
@@ -5080,7 +5079,7 @@ const GridContextProvider = (props) => {
     /**
      * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
      */
-    const setInvisibleColumnIds = (invisibleColumnIds) => _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId));
+    const setInvisibleColumnIds = useCallback((invisibleColumnIds) => _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId)), []);
     /**
      * Set quick filter directly on grid, based on previously save quickFilter state.
      */
@@ -5175,17 +5174,6 @@ const GridContextProvider = (props) => {
         }
         prePopupFocusedCell.current = gridApi.getFocusedCell() ?? undefined;
     }, [gridApi]);
-    /**
-     * After a popup refocus the cell.
-     */
-    const postPopupOps = useCallback(() => {
-        if (!gridApi || gridApi.isDestroyed()) {
-            return;
-        }
-        if (prePopupFocusedCell.current) {
-            gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
-        }
-    }, [gridApi]);
     /**
      * Get all row id's in grid.
      */
@@ -5373,13 +5361,16 @@ const GridContextProvider = (props) => {
             gridApi.sizeColumnsToFit();
         }
     }, [gridApi]);
-    const stopEditing = useCallback(() => {
-        if (!gridApi || gridApi.isDestroyed()) {
+    /**
+     *
+     */
+    const resetFocusedCellAfterCellEditing = useCallback(() => {
+        if (!gridApi || gridApi.isDestroyed() || startCellEditingInProgressRef.current) {
             return;
         }
-        gridApi.stopEditing();
         if (prePopupFocusedCell.current) {
             gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
+            prePopupFocusedCell.current = undefined;
         }
     }, [gridApi]);
     // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
@@ -5400,58 +5391,65 @@ const GridContextProvider = (props) => {
             console.error('externallySelectedItems did not sync with ag-grid selection');
         }
     }, []);
+    const startCellEditingInProgressRef = useRef(false);
     const startCellEditing = useCallback(async ({ rowId, colId }) => {
-        if (!gridApi)
-            return;
-        const colDef = gridApi.getColumnDef(colId);
-        if (!colDef) {
-            return;
-        }
-        const rowNode = gridApi.getRowNode(`${rowId}`);
-        if (!rowNode) {
-            return;
-        }
-        prePopupOps();
-        const shouldSelectNode = !rowNode.isSelected();
-        if (shouldSelectNode) {
-            externallySelectedItemsAreInSyncRef.current = false;
-            setExternallySelectedItemsAreInSync(false);
-            rowNode.setSelected(true, true);
-            await waitForExternallySelectedItemsToBeInSync();
-        }
-        // Cell already being edited, so don't re-edit until finished
-        if (checkUpdating([colDef.field ?? colDef.colId ?? ''], rowId)) {
+        if (!gridApi || startCellEditingInProgressRef.current) {
             return;
         }
-        const rowIndex = rowNode.rowIndex;
-        if (rowIndex != null) {
-            defer(() => {
-                !gridApi.isDestroyed() &&
-                    gridApi.startEditingCell({
-                        rowIndex,
-                        colKey: colId,
-                    });
-            });
+        startCellEditingInProgressRef.current = true;
+        try {
+            // Edit in progress so don't edit until finished, timeout waiting after 5s
+            if (!(await waitForCondition(() => !anyUpdating(), 5000))) {
+                console.error("Could not start edit because previous edit hasn't finished after 5 seconds");
+                return;
+            }
+            const colDef = gridApi.getColumnDef(colId);
+            if (!colDef) {
+                return;
+            }
+            const rowNode = gridApi.getRowNode(`${rowId}`);
+            if (!rowNode) {
+                return;
+            }
+            prePopupOps();
+            const shouldSelectNode = !rowNode.isSelected();
+            if (shouldSelectNode) {
+                externallySelectedItemsAreInSyncRef.current = false;
+                setExternallySelectedItemsAreInSync(false);
+                rowNode.setSelected(true, true);
+                await waitForExternallySelectedItemsToBeInSync();
+            }
+            const rowIndex = rowNode.rowIndex;
+            if (rowIndex != null) {
+                defer(() => {
+                    !gridApi.isDestroyed() &&
+                        gridApi.startEditingCell({
+                            rowIndex,
+                            colKey: colId,
+                        });
+                });
+            }
         }
-    }, [checkUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
-    /**
-     * This differs from stopEdit in that it will also invoke cellEditingCompleteCallback
-     */
-    const cancelEdit = useCallback(() => {
-        stopEditing();
-        cellEditingCompleteCallbackRef.current?.();
-    }, [stopEditing]);
-    const cellEditingCompleteCallbackRef = useRef();
-    const setOnCellEditingComplete = useCallback((cellEditingCompleteCallback) => {
-        cellEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
+        finally {
+            startCellEditingInProgressRef.current = false;
+        }
+    }, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
+    const bulkEditingCompleteCallbackRef = useRef();
+    const onBulkEditingComplete = useCallback(() => {
+        resetFocusedCellAfterCellEditing();
+        bulkEditingCompleteCallbackRef.current?.();
+    }, [resetFocusedCellAfterCellEditing]);
+    const setOnBulkEditingComplete = useCallback((cellEditingCompleteCallback) => {
+        bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
     }, []);
     /**
      * Returns true if an editable cell on same row was selected, else false.
      */
     const selectNextEditableCell = useCallback(async (tabDirection) => {
         // Pretend it succeeded to prevent unwanted cellEditingCompleteCallback
-        if (!gridApi)
+        if (!gridApi) {
             return true;
+        }
         const focusedCellIsEditable = () => {
             const focusedCell = gridApi.isDestroyed() ? null : gridApi.getFocusedCell();
             const nextColumn = focusedCell?.column;
@@ -5467,16 +5465,16 @@ const GridContextProvider = (props) => {
             if (gridApi.isDestroyed()) {
                 return true;
             }
+            // Prevent resetting focus to original editing cell
+            prePopupFocusedCell.current = undefined;
             const preRow = gridApi.getFocusedCell();
             if (tabDirection === 1) {
+                gridApi.stopEditing();
                 gridApi.tabToNextCell();
             }
             else {
                 gridApi.tabToPreviousCell();
             }
-            // If we don't wait the tab to next element won't work
-            // I think this is due to the grid resizing
-            await wait(150);
             if (gridApi.isDestroyed()) {
                 return true;
             }
@@ -5489,64 +5487,71 @@ const GridContextProvider = (props) => {
             if (focusedCellIsEditable()) {
                 const focusedCell = gridApi.getFocusedCell();
                 if (focusedCell) {
-                    prePopupOps();
-                    gridApi.startEditingCell({
-                        rowIndex: focusedCell.rowIndex,
-                        colKey: focusedCell.column.getColId(),
-                    });
+                    const rowNode = gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
+                    const rowId = rowNode?.data?.id;
+                    if (rowId == null) {
+                        return false;
+                    }
+                    await startCellEditing({ rowId, colId: focusedCell.column.getColId() });
                     return true;
                 }
             }
         }
         return false;
-    }, [gridApi, prePopupOps]);
+    }, [gridApi, startCellEditing]);
     const updatingCells = useCallback(async (props, fnUpdate, setSaving, tabDirection) => {
-        setSaving && setSaving(true);
-        return await gridApiOp(async (gridApi) => {
-            const selectedRows = props.selectedRows;
-            let ok = false;
-            await modifyUpdating(props.field ?? '', selectedRows.map((data) => data.id), async () => {
+        try {
+            setSaving?.(true);
+            return await gridApiOp(async (gridApi) => {
+                const selectedRows = props.selectedRows;
+                let ok = false;
+                await modifyUpdating(props.field ?? '', selectedRows.map((data) => data.id), async () => {
+                    // MATT Disabled I don't believe these are needed anymore
+                    // I've left them here just in case they are
+                    // Need to refresh to get spinners to work on all rows
+                    // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+                    ok = await fnUpdate(selectedRows).catch((ex) => {
+                        console.error('Exception during modifyUpdating', ex);
+                        return false;
+                    });
+                });
                 // MATT Disabled I don't believe these are needed anymore
                 // I've left them here just in case they are
-                // Need to refresh to get spinners to work on all rows
-                // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
-                ok = await fnUpdate(selectedRows).catch((ex) => {
-                    console.error('Exception during modifyUpdating', ex);
-                    return false;
-                });
-            });
-            // MATT Disabled I don't believe these are needed anymore
-            // I've left them here just in case they are
-            // async processes need to refresh their own rows
-            // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
-            if (gridApi.isDestroyed()) {
-                return ok;
-            }
-            if (ok) {
-                const cell = gridApi.getFocusedCell();
-                if (cell && gridApi.getFocusedCell() == null) {
-                    !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+                // async processes need to refresh their own rows
+                // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+                if (gridApi.isDestroyed()) {
+                    return ok;
                 }
-                // This is needed to trigger postSortRowsHook
-                gridApi.refreshClientSideRowModel();
-            }
-            else {
-                // Don't set saving if ok as the form has already closed
-                setSaving?.(false);
-            }
-            // Only focus next cell if user hasn't already manually changed focus
-            const postPopupFocusedCell = gridApi.getFocusedCell();
-            if (prePopupFocusedCell.current &&
-                postPopupFocusedCell &&
-                prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
-                prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
-                if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
-                    cellEditingCompleteCallbackRef.current && cellEditingCompleteCallbackRef.current();
+                if (ok) {
+                    const cell = gridApi.getFocusedCell();
+                    if (cell && gridApi.getFocusedCell() == null) {
+                        !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+                    }
+                    // This is needed to trigger postSortRowsHook
+                    gridApi.refreshClientSideRowModel();
                 }
-            }
-            return ok;
-        });
-    }, [gridApiOp, modifyUpdating, selectNextEditableCell]);
+                void (async () => {
+                    // Only focus next cell if user hasn't already manually changed focus
+                    const postPopupFocusedCell = gridApi.getFocusedCell();
+                    if (prePopupFocusedCell.current &&
+                        postPopupFocusedCell &&
+                        prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
+                        prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
+                        if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
+                            onBulkEditingComplete();
+                        }
+                    }
+                    else {
+                        onBulkEditingComplete();
+                    }
+                })();
+                return ok;
+            });
+        }
+        finally {
+            setSaving?.(false);
+        }
+    }, [gridApiOp, modifyUpdating, onBulkEditingComplete, selectNextEditableCell]);
     const redrawRows = useMemo(() => debounce((rowNodes) => {
         try {
             gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
@@ -5577,16 +5582,16 @@ const GridContextProvider = (props) => {
             preHash !== postHash && gridApi.clearFocusedCell();
         }
     }, 200), [gridApi]);
-    const addExternalFilter = (filter) => {
+    const addExternalFilter = useCallback((filter) => {
         externalFilters.current.push(filter);
         void onFilterChanged();
-    };
-    const removeExternalFilter = (filter) => {
+    }, [onFilterChanged]);
+    const removeExternalFilter = useCallback((filter) => {
         remove(externalFilters.current, (v) => v === filter);
         void onFilterChanged();
-    };
-    const isExternalFilterPresent = () => !isEmpty(externalFilters.current);
-    const doesExternalFilterPass = (node) => externalFilters.current.every((filter) => filter(node.data, node));
+    }, [onFilterChanged]);
+    const isExternalFilterPresent = useCallback(() => !isEmpty(externalFilters.current), []);
+    const doesExternalFilterPass = useCallback((node) => externalFilters.current.every((filter) => filter(node.data, node)), []);
     const getColDef = useCallback((colId) => (!!colId && gridApi?.getColumnDef(colId)) || undefined, [gridApi]);
     const showNoRowsOverlay = useCallback(() => {
         gridApi?.showNoRowsOverlay();
@@ -5642,7 +5647,6 @@ const GridContextProvider = (props) => {
             setInvisibleColumnIds,
             gridReady,
             prePopupOps,
-            postPopupOps,
             setApis,
             setQuickFilter,
             selectRowsById,
@@ -5663,8 +5667,7 @@ const GridContextProvider = (props) => {
             sizeColumnsToFit,
             autoSizeColumns,
             startCellEditing,
-            stopEditing,
-            cancelEdit,
+            resetFocusedCellAfterCellEditing,
             updatingCells,
             redrawRows,
             externallySelectedItemsAreInSync,
@@ -5675,7 +5678,8 @@ const GridContextProvider = (props) => {
             isExternalFilterPresent,
             doesExternalFilterPass,
             downloadCsv,
-            setOnCellEditingComplete,
+            onBulkEditingComplete,
+            setOnBulkEditingComplete,
             showNoRowsOverlay,
         }, children: props.children }));
 };
@@ -5722,12 +5726,23 @@ const downloadCsvUseValueFormattersProcessCellCallback = (params) => {
     // We add an extra encodeToString here just in case valueFormatter is returning non string values
     return encodeToString(result);
 };
+const waitForCondition = async (condition, timeoutMs) => {
+    const endTime = Date.now() + timeoutMs;
+    while (Date.now() < endTime) {
+        if (condition()) {
+            return true;
+        }
+        await wait(100);
+    }
+    console.warn('waitForCondition failed');
+    return false;
+};
 
 const GridUpdatingContextProvider = (props) => {
     const updatingBlocks = useRef({});
     const updating = useRef({});
     const [updatedDep, setUpdatedDep] = useState(0);
-    const resetUpdating = () => {
+    const resetUpdating = useCallback(() => {
         const mergedUpdatingBlocks = {};
         for (const key in updatingBlocks.current) {
             const arr = flatten(updatingBlocks.current[key]);
@@ -5737,9 +5752,9 @@ const GridUpdatingContextProvider = (props) => {
         }
         updating.current = mergedUpdatingBlocks;
         setUpdatedDep((updatedDep) => updatedDep + 1);
-    };
-    const updatingCols = () => Object.keys(updating.current);
-    const modifyUpdating = async (fields, ids, fn) => {
+    }, []);
+    const updatingCols = useCallback(() => Object.keys(updating.current), []);
+    const modifyUpdating = useCallback(async (fields, ids, fn) => {
         const idRef = [...ids];
         castArray(fields).forEach((field) => {
             const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
@@ -5752,9 +5767,12 @@ const GridUpdatingContextProvider = (props) => {
             remove(fieldUpdatingIds, (idList) => idList === idRef);
         });
         resetUpdating();
-    };
-    const checkUpdating = (fields, id) => castArray(fields).some((f) => updating.current[f]?.includes(id));
-    return (jsx(GridUpdatingContext.Provider, { value: { modifyUpdating, checkUpdating, updatingCols, updatedDep }, children: props.children }));
+    }, [resetUpdating]);
+    const anyUpdating = useCallback(() => {
+        return !isEmpty(updating.current);
+    }, []);
+    const checkUpdating = useCallback((fields, id) => castArray(fields).some((f) => updating.current[f]?.includes(id)), []);
+    return (jsx(GridUpdatingContext.Provider, { value: { modifyUpdating, anyUpdating, checkUpdating, updatingCols, updatedDep }, children: props.children }));
 };
 
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-inProgress .LuiIcon{visibility:hidden}.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-fill{justify-content:center;width:100%}";