@linzjs/step-ag-grid 28.5.1 → 29.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "28.5.1",
+  "version": "29.0.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^34.1.0",
-    "ag-grid-react": "^34.1.0",
+    "ag-grid-community": "^34.2.0",
+    "ag-grid-react": "^34.2.0",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -76,21 +76,21 @@
     ]
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.46.2",
-    "@swc/core-linux-x64-gnu": "^1.13.3"
+    "@rollup/rollup-linux-x64-gnu": "^4.52.3",
+    "@swc/core-linux-x64-gnu": "^1.13.20"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^4.1.1",
     "@linzjs/lui": "^23.11.1",
     "@linzjs/style": "^5.4.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^9.1.0",
-    "@storybook/addon-links": "^9.1.0",
-    "@storybook/react": "^9.1.0",
-    "@storybook/react-vite": "^9.1.0",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-links": "^9.1.8",
+    "@storybook/react": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -100,42 +100,41 @@
     "@types/node": "^22.17.0",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/ui": "^3.2.4",
-    "ag-grid-community": "^34.1.0",
-    "ag-grid-react": "^34.1.0",
+    "ag-grid-community": "^34.2.0",
+    "ag-grid-react": "^34.2.0",
     "babel-preset-react-app": "^10.1.0",
     "canvas": "^3.2.0",
-    "chromatic": "^13.1.3",
-    "cross-env": "^10.0.0",
+    "chromatic": "^13.3.0",
+    "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.0",
+    "eslint-plugin-storybook": "^9.1.8",
     "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.6",
-    "postcss-loader": "^8.1.1",
+    "postcss-loader": "^8.2.0",
     "postcss-scss": "^4.0.9",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.46.2",
+    "rollup": "^4.52.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.90.0",
+    "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
-    "semantic-release": "^24.2.7",
-    "storybook": "^9.1.0",
+    "semantic-release": "^24.2.9",
+    "storybook": "^9.1.8",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "typescript": "^5.9.2",
-    "vite": "^6.3.5",
+    "vite": "^7.1.7",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"

package/src/components/Grid.tsx

@@ -4,13 +4,14 @@ import {
   CellClassParams,
   CellClickedEvent,
   CellDoubleClickedEvent,
-  CellEditingStartedEvent,
+  CellFocusedEvent,
   CellKeyDownEvent,
   ColDef,
   ColGroupDef,
   ColumnResizedEvent,
   EditableCallback,
   EditableCallbackParams,
+  GetRowIdParams,
   GridOptions,
   GridReadyEvent,
   ModelUpdatedEvent,
@@ -18,6 +19,7 @@ import {
   RowDragEndEvent,
   RowDragMoveEvent,
   SelectionChangedEvent,
+  SelectionColumnDef,
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import clsx from 'clsx';
@@ -25,7 +27,7 @@ import { defer, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 
-import { GridContext, useGridContext } from '../contexts/GridContext';
+import { useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
 import { fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
@@ -36,36 +38,6 @@ import { usePostSortRowsHook } from './PostSortRowsHook';
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
-let timeOfLastSingleClick = 0;
-let lastClickColId: unknown;
-let lastClickRowIndex: unknown;
-
-const resetClickDebounce = () => {
-  timeOfLastSingleClick = 0;
-  lastClickColId = '';
-  lastClickRowIndex = -1;
-};
-
-/**
- * If click is more than 200ms since last click return true.
- */
-const clickDebounceSkipClick = (colId: unknown, rowIndex: unknown): boolean => {
-  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;
-};
-
 export interface GridBaseRow {
   id: string | number;
 }
@@ -99,6 +71,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   rowClassRules?: GridOptions['rowClassRules'];
   rowSelection?: 'single' | 'multiple';
   autoSelectFirstRow?: boolean;
+  onCellFocused?: (props: { colDef: ColDef<TData>; data: TData }) => void;
   onColumnMoved?: GridOptions['onColumnMoved'];
   rowDragText?: GridOptions['rowDragText'];
   onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
@@ -126,7 +99,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
    * When pressing tab whilst editing the grid will select and edit the next cell if available.
    * Once the last cell to edit closes this callback is called.
    */
-  onCellEditingComplete?: () => void;
+  onBulkEditingComplete?: () => void;
 
   /**
    * Context menu definition if required.
@@ -182,13 +155,13 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     setExternallySelectedItemsAreInSync,
     isExternalFilterPresent,
     doesExternalFilterPass,
-    setOnCellEditingComplete,
+    setOnBulkEditingComplete,
     getColDef,
     showNoRowsOverlay,
     prePopupOps,
-    stopEditing,
-  } = useContext(GridContext);
-  const { startCellEditing } = useGridContext();
+    startCellEditing,
+  } = useGridContext<TData>();
+
   const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
@@ -441,28 +414,11 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     event.api.showNoRowsOverlay();
   }, []);
 
-  /**
-   * Force-refresh all selected rows to re-run class function, to update selection highlighting
-   */
-  const refreshSelectedRows = useCallback((_event: CellEditingStartedEvent): void => {
-    // 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: CellDoubleClickedEvent) => {
-      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() });
@@ -478,9 +434,6 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     (event: CellClickedEvent) => {
       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() });
       }
     },
@@ -590,11 +543,10 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   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
@@ -667,6 +619,27 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     [clearHighlightRowClasses],
   );
 
+  const onCellFocused = useCallback(
+    (event: CellFocusedEvent<TData>) => {
+      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: RowDragEndEvent<TData>) => {
       clearHighlightRowClasses();
@@ -698,10 +671,77 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   }, [params.setExternalSelectedItems, selectable]);
 
   // This is setting a ref in the GridContext so won't be triggering an update loop
-  setOnCellEditingComplete(params.onCellEditingComplete);
+  setOnBulkEditingComplete(params.onBulkEditingComplete);
+
+  const getRowId = useCallback((params: GetRowIdParams<TData, unknown>) => `${params.data.id}`, []);
+  const defaultColDef = useMemo(
+    (): ColDef<TData, unknown> => ({
+      minWidth: 48,
+      ...omit(params.defaultColDef, ['editable', 'field', 'colId', 'tooltipField']),
+    }),
+    [params.defaultColDef],
+  );
+
+  const noRowsOverlayComponent = useCallback(
+    (event: AgGridEvent) => {
+      const headerRowCount = columnDefs.some((c) => (c as any).children) ? 2 : 1;
+
+      let rowCount = 0;
+      event.api.forEachNode(() => rowCount++);
+      return (
+        <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((): SelectionColumnDef => {
+    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,
+  ]);
 
-  const selectWidth = params.hideSelectColumn ? 0 : selectable && params.onRowDragEnd ? 76 : 48;
-  const headerRowCount = columnDefs.some((c) => (c as any).children) ? 2 : 1;
   return (
     <div
       data-testid={dataTestId}
@@ -729,45 +769,30 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
-          getRowId={(params) => `${params.data.id}`}
+          getRowId={getRowId}
           onGridSizeChanged={onGridSizeChanged}
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onColumnVisible={setInitialContentSize}
           onRowDataUpdated={onRowDataChanged}
+          onCellFocused={onCellFocused}
           onCellKeyDown={onCellKeyPress}
           onCellClicked={onCellClicked}
           onCellDoubleClicked={onCellDoubleClick}
-          onCellEditingStarted={refreshSelectedRows}
           domLayout={params.domLayout}
           onColumnResized={onColumnResized}
-          defaultColDef={{ minWidth: 48, ...omit(params.defaultColDef, ['editable']) }}
+          defaultColDef={defaultColDef}
           columnDefs={columnDefsAdjusted}
+          selectionColumnDef={selectionColumnDef}
           rowData={rowData}
-          noRowsOverlayComponent={(event: AgGridEvent) => {
-            let rowCount = 0;
-            event.api.forEachNode(() => rowCount++);
-            return (
-              <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());
-          }}
+          postSortRows={params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows}
           onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}
           onSortChanged={ensureSelectedRowIsVisible}
-          postSortRows={params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows}
+          quickFilterParser={quickFilterParser}
           onSelectionChanged={synchroniseExternalStateToGridSelection}
           onColumnMoved={params.onColumnMoved}
+          noRowsOverlayComponent={noRowsOverlayComponent}
           alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
           isExternalFilterPresent={isExternalFilterPresent}
           doesExternalFilterPass={doesExternalFilterPass}
@@ -781,36 +806,13 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           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,
-          }}
         />
       </div>
     </div>
   );
 };
+
+const quickFilterParser = (filterStr: string) => {
+  // filter is exact matches exactly groups separated by commas
+  return filterStr.split(',').map((str) => str.trim());
+};

package/src/components/GridCell.tsx

@@ -120,6 +120,11 @@ export const defaultValueFormatter = ({ value }: ValueFormatterParams) => {
     : JSON.stringify(value);
 };
 
+// ag-grid doesn't understand the custom editor, when it stops editing it thinks
+// that _it_ was editing and overwrites the user updated data
+// _but_, it only does this if the initial value of the cell was null!?
+const blockValueSetter = () => true;
+
 /*
  * All cells should use this.
  */
@@ -132,12 +137,10 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     editorParams?: Props;
   },
 ): ColDefT<TData, TValue> => {
-  // props.field = ;
   // 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.
   const valueFormatter = props.valueFormatter ?? defaultValueFormatter;
-  // FIXME
   const filterValueGetter = props.filterValueGetter ?? generateFilterGetter(valueFormatter as any);
   const exportable = props.exportable;
   // Can't leave this here ag-grid will complain
@@ -149,6 +152,7 @@ export const GridCell = <TData extends GridBaseRow, TValue = any, Props extends
     headerTooltip: props.headerName,
     sortable: true,
     resizable: true,
+    valueSetter: custom?.editor ? blockValueSetter : undefined,
     editable: props.editable ?? false,
     ...(custom?.editor && {
       cellClassRules: GridCellMultiSelectClassRules,

package/src/components/GridPopoverHook.tsx

@@ -1,6 +1,6 @@
-import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 
-import { GridContext } from '../contexts/GridContext';
+import { useGridContext } from '../contexts/GridContext';
 import { useGridPopoverContext } from '../contexts/GridPopoverContext';
 import { ControlledMenu } from '../react-menu3';
 import { MenuCloseEvent } from '../react-menu3/types';
@@ -21,8 +21,8 @@ export interface GridPopoverHookProps<TData> {
 }
 
 export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopoverHookProps<TData>) => {
-  const { stopEditing, cancelEdit } = useContext(GridContext);
-  const { anchorRef, saving, updateValue } = useGridPopoverContext<TData>();
+  const { onBulkEditingComplete } = useGridContext<TData>();
+  const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext<TData>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
 
@@ -33,29 +33,32 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
   const triggerSave = useCallback(
     async (reason?: string) => {
       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;
+      }
+
+      if (
+        await updateValue(
+          props.save,
+          reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
+        )
+      ) {
+        stopEditing();
       }
     },
-    [cancelEdit, props, stopEditing, updateValue],
+    [onBulkEditingComplete, props, stopEditing, updateValue],
   );
 
   const popoverWrapper = useCallback(
@@ -72,7 +75,9 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
               menuClassName={'step-ag-grid-react-menu'}
               onClose={(event: MenuCloseEvent) => {
                 // Prevent menu from closing when modals are invoked
-                if (event.reason === CloseReason.BLUR) return;
+                if (event.reason === CloseReason.BLUR) {
+                  return;
+                }
                 void triggerSave(event.reason);
               }}
               viewScroll={'auto'}

package/src/components/gridFilter/useGridFilter.ts

@@ -1,10 +1,10 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 
-import { GridContext, GridFilterExternal } from '../../contexts/GridContext';
+import { GridFilterExternal, useGridContext } from '../../contexts/GridContext';
 import { GridBaseRow } from '../Grid';
 
 export const useGridFilter = <TData extends GridBaseRow>(filter: GridFilterExternal<TData> | undefined) => {
-  const { addExternalFilter, removeExternalFilter } = useContext(GridContext);
+  const { addExternalFilter, removeExternalFilter } = useGridContext<TData>();
 
   useEffect(() => {
     const thisFilter = filter;

package/src/components/gridForm/GridFormTextInput.tsx

@@ -29,11 +29,15 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
 
   const save = useCallback(
     async (selectedRows: TData[]): Promise<boolean> => {
-      if (invalid()) return false;
+      if (invalid()) {
+        return false;
+      }
 
       const trimmedValue = value.trim();
       // No change, so don't save
-      if (initValue === trimmedValue) return true;
+      if (initValue === trimmedValue) {
+        return true;
+      }
 
       if (props.onSave) {
         return await props.onSave({ selectedRows, value: trimmedValue });

package/src/components/gridHook/useGridContextMenu.tsx

@@ -24,7 +24,7 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
   contextMenuSelectRow: boolean;
   contextMenu?: GridContextMenuComponent<TData>;
 }) => {
-  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 });
@@ -47,8 +47,8 @@ export const useGridContextMenu = <TData extends GridBaseRow>({
   const closeMenu = useCallback(() => {
     setOpen(false);
     redrawRows();
-    postPopupOps();
-  }, [postPopupOps, redrawRows]);
+    resetFocusedCellAfterCellEditing();
+  }, [resetFocusedCellAfterCellEditing, redrawRows]);
 
   const cellContextMenu = useCallback(
     (event: CellContextMenuEvent) => {