@linzjs/step-ag-grid 25.0.1 → 26.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "25.0.1",
+  "version": "26.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -24,12 +24,12 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^32.3.3",
-    "ag-grid-react": "^32.3.3",
+    "ag-grid-community": "^33.2.4",
+    "ag-grid-react": "^33.2.4",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -38,15 +38,14 @@
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
     "matcher": "^5.0.0",
-    "react-transition-state": "^2.3.0",
-    "usehooks-ts": "^3.1.0"
+    "react-transition-state": "^2.3.1",
+    "usehooks-ts": "^3.1.1"
   },
   "scripts": {
-    "build": "run-s clean stylelint lint css bundle",
+    "build": "run-s clean lint css bundle",
     "yalc": "run-s clean css bundle && yalc push",
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "rollup -c",
-    "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
     "test": "vitest run",
     "test:watch": "vitest --watch",
@@ -77,67 +76,62 @@
     ]
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@linzjs/lui": "^22.4.2",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@linzjs/lui": "^22.12.0",
     "@linzjs/style": "^5.4.0",
-    "@rollup/plugin-commonjs": "^26.0.3",
+    "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.5.3",
-    "@storybook/addon-interactions": "^8.5.3",
-    "@storybook/addon-links": "^8.5.3",
-    "@storybook/react": "^8.5.3",
-    "@storybook/react-vite": "^8.5.3",
-    "@storybook/test": "^8.5.3",
-    "@storybook/test-runner": "^0.21.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/test-runner": "^0.22.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.13.0",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.5",
+    "@types/node": "^22.15.3",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.7",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "@vitest/ui": "^3.0.4",
-    "ag-grid-community": "^32.3.3",
-    "ag-grid-react": "^32.3.3",
-    "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.25.2",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "@vitest/ui": "^3.1.2",
+    "ag-grid-community": "^33.2.4",
+    "ag-grid-react": "^33.2.4",
+    "babel-preset-react-app": "^10.1.0",
+    "chromatic": "^11.28.2",
     "css-loader": "^7.1.2",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.1",
-    "postcss-loader": "^7.3.4",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.34.0",
+    "rollup": "^4.40.1",
     "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.83.4",
-    "sass-loader": "^14.2.1",
-    "semantic-release": "^22.0.12",
-    "storybook": "^8.5.3",
+    "sass": "^1.87.0",
+    "sass-loader": "^16.0.5",
+    "semantic-release": "^24.2.3",
+    "storybook": "^8.6.12",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-prettier": "^4.1.0",
-    "stylelint-scss": "^5.3.2",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.11",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.4",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.4",
+    "vitest": "^3.1.2",
     "vitest-canvas-mock": "^0.3.3"
   },
   "babel": {

package/src/components/Grid.tsx

@@ -1,5 +1,6 @@
 import {
   AgGridEvent,
+  AllCommunityModule,
   CellClassParams,
   CellClickedEvent,
   CellDoubleClickedEvent,
@@ -12,13 +13,10 @@ import {
   EditableCallbackParams,
   GridOptions,
   GridReadyEvent,
-  IClientSideRowModel,
   ModelUpdatedEvent,
+  ModuleRegistry,
   RowDragEndEvent,
-  RowDragLeaveEvent,
   RowDragMoveEvent,
-  RowHighlightPosition,
-  RowNode,
   SelectionChangedEvent,
 } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
@@ -27,7 +25,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 } from '../contexts/GridContext';
+import { GridContext, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
 import { fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
@@ -36,11 +34,19 @@ import { GridContextMenuComponent, useGridContextMenu } from './gridHook';
 import { GridNoRowsOverlay } from './GridNoRowsOverlay';
 import { usePostSortRowsHook } from './PostSortRowsHook';
 
+ModuleRegistry.registerModules([AllCommunityModule]);
+
 export interface GridBaseRow {
   id: string | number;
 }
 
-export interface GridProps {
+export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+  movedRow: TData;
+  targetRow: TData;
+  direction: -1 | 1;
+}
+
+export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
   readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
   defaultPostSort?: boolean; // Retain sort order after edit, Defaults to true.
   selectable?: boolean;
@@ -50,11 +56,8 @@ export interface GridProps {
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
   defaultColDef?: GridOptions['defaultColDef'];
-  columnDefs: ColDef[];
+  columnDefs: ColDef<TData>[];
   rowData: GridOptions['rowData'];
-  /**
-   * Whether select column is pinned.  Defaults to "left".
-   */
   selectColumnPinned?: ColDef['pinned'];
   noRowsOverlayText?: string;
   noRowsMatchingOverlayText?: string;
@@ -65,7 +68,7 @@ export interface GridProps {
   autoSelectFirstRow?: boolean;
   onColumnMoved?: GridOptions['onColumnMoved'];
   rowDragText?: GridOptions['rowDragText'];
-  onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => Promise<void> | void;
+  onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
   alwaysShowVerticalScroll?: boolean;
   suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
   /**
@@ -116,20 +119,21 @@ export interface GridProps {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export const Grid = ({
+export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   'data-testid': dataTestId,
   defaultPostSort = true,
   rowSelection = 'multiple',
   suppressColumnVirtualization = true,
   theme = 'ag-theme-step-default',
   sizeColumns = 'auto',
-  selectColumnPinned = null,
+  selectColumnPinned = 'left',
   contextMenuSelectRow = false,
   singleClickEdit = false,
   rowData,
   rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
+  selectable,
   ...params
-}: GridProps): ReactElement => {
+}: GridProps<TData>): ReactElement => {
   const {
     gridReady,
     gridRenderState,
@@ -151,7 +155,8 @@ export const Grid = ({
     prePopupOps,
     stopEditing,
   } = useContext(GridContext);
-  const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
+  const { startCellEditing } = useGridContext();
+  const { updatedDep, updatingCols } = useContext(GridUpdatingContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
   const lastSelectedIds = useRef<number[]>([]);
@@ -335,7 +340,7 @@ export const Grid = ({
    * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
    */
   const columnDefs = useMemo((): (ColDef | ColGroupDef)[] => {
-    const adjustColDefs = params.columnDefs.map((colDef) => {
+    return params.columnDefs.map((colDef) => {
       const colDefEditable = colDef.editable;
       const editable = combineEditables(
         params.loading !== true && params.readOnly !== true,
@@ -351,49 +356,7 @@ export const Grid = ({
         },
       };
     });
-
-    return params.selectable || params.onRowDragEnd
-      ? [
-          {
-            colId: 'selection',
-            editable: false,
-            rowDrag: !!params.onRowDragEnd,
-            minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
-            maxWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
-            pinned: selectColumnPinned,
-            headerComponentParams: {
-              exportable: false,
-            },
-            checkboxSelection: params.selectable,
-            headerClass: params.onRowDragEnd ? 'ag-header-select-draggable' : undefined,
-            headerComponent: rowSelection === 'multiple' ? GridHeaderSelect : null,
-            suppressHeaderKeyboardEvent: (e) => {
-              if (!params.selectable) return false;
-              if ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
-                if (isEmpty(e.api.getSelectedRows())) {
-                  e.api.selectAllFiltered();
-                } else {
-                  e.api.deselectAll();
-                }
-                return true;
-              }
-              return false;
-            },
-            onCellClicked: clickInputWhenContainingCellClicked,
-          },
-          ...adjustColDefs,
-        ]
-      : adjustColDefs;
-  }, [
-    params.columnDefs,
-    params.selectable,
-    params.onRowDragEnd,
-    params.loading,
-    params.readOnly,
-    params.defaultColDef?.editable,
-    selectColumnPinned,
-    rowSelection,
-  ]);
+  }, [params.columnDefs, params.loading, params.readOnly, params.defaultColDef?.editable]);
 
   /**
    * When grid is ready set the apis to the grid context and sync selected items to grid.
@@ -443,43 +406,23 @@ export const Grid = ({
   /**
    * Force-refresh all selected rows to re-run class function, to update selection highlighting
    */
-  const refreshSelectedRows = useCallback((event: CellEditingStartedEvent): void => {
-    event.api.refreshCells({
+  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(),
-    });
+    });*/
   }, []);
 
-  /**
-   * Make sure node is selected for editing and start edit
-   */
-  const startCellEditing = useCallback(
-    (event: CellKeyDownEvent | CellClickedEvent | CellDoubleClickedEvent) => {
-      prePopupOps();
-      if (!event.node.isSelected()) {
-        event.node.setSelected(true, true);
-      }
-      // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([event.colDef.field ?? ''], event.data.id)) {
-        return;
-      }
-
-      if (event.rowIndex !== null) {
-        event.api.startEditingCell({
-          rowIndex: event.rowIndex,
-          colKey: event.column.getColId(),
-        });
-      }
-    },
-    [checkUpdating, prePopupOps],
-  );
-
   /**
    * Handle double click edit
    */
   const onCellDoubleClick = useCallback(
     (event: CellDoubleClickedEvent) => {
-      if (!invokeEditAction(event)) startCellEditing(event);
+      if (!invokeEditAction(event)) {
+        void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
+      }
     },
     [startCellEditing],
   );
@@ -490,7 +433,7 @@ export const Grid = ({
   const onCellClicked = useCallback(
     (event: CellClickedEvent) => {
       if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
-        startCellEditing(event);
+        void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
       }
     },
     [singleClickEdit, startCellEditing],
@@ -520,10 +463,11 @@ export const Grid = ({
     (e: CellKeyDownEvent) => {
       const kbe = e.event as KeyboardEvent;
       if (kbe.key === 'Enter') {
-        if (!invokeEditAction(e)) startCellEditing(e);
+        if (!invokeEditAction(e)) {
+          void startCellEditing({ rowId: e.data.id, colId: e.column.getColId() });
+        }
       }
       if (kbe.key === 'Tab') {
-        // eslint-disable-next-line
         prePopupOps();
       }
     },
@@ -535,15 +479,15 @@ export const Grid = ({
    * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
    */
   const columnDefsAdjusted = useMemo(() => {
-    const adjustColDefOrGroup = (colDef: ColDef | ColGroupDef) =>
+    const adjustColDefOrGroup = (colDef: ColDef<TData> | ColGroupDef<TData>) =>
       'children' in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
 
-    const adjustGroupColDef = (colDef: ColGroupDef): ColGroupDef => ({
+    const adjustGroupColDef = (colDef: ColGroupDef<TData>): ColGroupDef<TData> => ({
       ...colDef,
       children: colDef.children.map((colDef) => adjustColDefOrGroup(colDef)),
     });
 
-    const adjustColDef = (colDef: ColDef): ColDef => ({
+    const adjustColDef = (colDef: ColDef<TData>): ColDef<TData> => ({
       ...colDef,
       suppressSizeToFit: (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && !colDef.flex,
       sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
@@ -636,59 +580,59 @@ export const Grid = ({
 
   const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
 
-  const onRowDragLeave = useCallback((event: RowDragLeaveEvent) => {
-    const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
-    clientSideRowModel.highlightRowAtPixel(null);
-  }, []);
+  const startDragYRef = useRef<number | null>(null);
 
-  const onRowDragMove = useCallback((event: RowDragMoveEvent) => {
-    if (event.overNode && event.node.rowIndex != null) {
-      const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
+  const clearHighlightRowClasses = useCallback(() => {
+    document.querySelectorAll(`.ag-row-highlight-above`)?.forEach((el) => {
+      el.classList.remove('ag-row-highlight-above');
+    });
+    document.querySelectorAll(`.ag-row-highlight-below`)?.forEach((el) => {
+      el.classList.remove('ag-row-highlight-below');
+    });
+  }, []);
 
-      //position 0 means highlight above, 1 means below
-      const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode as RowNode);
+  const onRowDragMove = useCallback(
+    (event: RowDragMoveEvent) => {
+      if (startDragYRef.current === null) {
+        startDragYRef.current = event.y;
+      }
 
-      //we don't want to show the row highlight if it wouldn't result in the row moving
-      const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
-      if (event.node.rowIndex != targetIndex) {
-        clientSideRowModel.highlightRowAtPixel(event.node as RowNode, event.y);
+      const yDiff = event.y - startDragYRef.current;
+      const data = event.overNode?.data;
+      if (data) {
+        clearHighlightRowClasses();
+        document.querySelectorAll(`[row-id='${data.id}']`)?.forEach((el) => {
+          el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
+        });
       }
-    }
-  }, []);
+    },
+    [clearHighlightRowClasses],
+  );
 
   const onRowDragEnd = useCallback(
-    (event: RowDragEndEvent) => {
-      void (async () => {
-        const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
-        if (event.node.rowIndex != null) {
-          const lastHighlightedRowNode = clientSideRowModel.getLastHighlightedRowNode();
-          const isBelow = lastHighlightedRowNode && lastHighlightedRowNode.highlighted === RowHighlightPosition.Below;
-
-          let targetIndex = event.overIndex;
-          if (event.node.rowIndex > event.overIndex) {
-            targetIndex += isBelow ? 1 : 0;
-          } else {
-            targetIndex += isBelow ? 0 : -1;
-          }
-
-          const moved = event.node.data;
-          const target = event.overNode?.data;
-          moved.id !== target?.id && //moved over a different row
-            event.node.rowIndex != targetIndex && //moved to a different index
-            params.onRowDragEnd &&
-            (await params.onRowDragEnd(moved, target, targetIndex));
+    (event: RowDragEndEvent<TData>) => {
+      clearHighlightRowClasses();
+      if (!params.onRowDragEnd || startDragYRef.current === null) {
+        return;
+      }
+      const yDiff = event.y - startDragYRef.current;
+      startDragYRef.current = null;
+      if (event.node.rowIndex != null) {
+        const movedRow = event.node.data;
+        const targetRow = event.overNode?.data;
+        if (!movedRow || !targetRow || movedRow === targetRow || yDiff === 0) {
+          return;
         }
-        clientSideRowModel.highlightRowAtPixel(null);
-      })();
+        void params.onRowDragEnd({ movedRow, targetRow, direction: yDiff > 0 ? 1 : -1 });
+      }
     },
-    [params],
+    [params, clearHighlightRowClasses],
   );
 
   // This is setting a ref in the GridContext so won't be triggering an update loop
   setOnCellEditingComplete(params.onCellEditingComplete);
 
   const headerRowCount = columnDefs.some((c) => (c as any).children) ? 2 : 1;
-
   return (
     <div
       data-testid={dataTestId}
@@ -703,19 +647,23 @@ export const Grid = ({
       {gridContextMenu.component}
       <div style={{ flex: 1 }} ref={gridDivRef}>
         <AgGridReact
+          theme={'legacy'}
+          rowSelection={
+            selectable
+              ? {
+                  enableClickSelection: false,
+                  mode: rowSelection == 'single' ? 'singleRow' : 'multiRow',
+                }
+              : undefined
+          }
           rowHeight={rowHeight}
           animateRows={params.animateRows ?? false}
           rowClassRules={params.rowClassRules}
           getRowId={(params) => `${params.data.id}`}
-          suppressRowClickSelection={true}
-          rowSelection={rowSelection}
-          suppressBrowserResizeObserver={true}
           onGridSizeChanged={onGridSizeChanged}
           suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
-          onColumnVisible={() => {
-            setInitialContentSize();
-          }}
+          onColumnVisible={setInitialContentSize}
           onRowDataUpdated={onRowDataChanged}
           onCellKeyDown={onCellKeyPress}
           onCellClicked={onCellClicked}
@@ -753,12 +701,36 @@ export const Grid = ({
           preventDefaultOnContextMenu={true}
           onCellContextMenu={gridContextMenu.cellContextMenu}
           rowDragText={params.rowDragText}
+          onRowDragCancel={clearHighlightRowClasses}
           onRowDragMove={onRowDragMove}
           onRowDragEnd={onRowDragEnd}
-          onRowDragLeave={onRowDragLeave}
           suppressCellFocus={params.suppressCellFocus}
           pinnedTopRowData={params.pinnedTopRowData}
           pinnedBottomRowData={params.pinnedBottomRowData}
+          selectionColumnDef={{
+            rowDrag: !!params.onRowDragEnd,
+            minWidth: selectable && params.onRowDragEnd ? 76 : 48,
+            maxWidth: selectable && params.onRowDragEnd ? 76 : 48,
+            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: clickInputWhenContainingCellClicked,
+          }}
         />
       </div>
     </div>

package/src/components/GridCell.tsx

@@ -1,4 +1,4 @@
-import { ColDef, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
+import { ColDef, EditableCallback, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
 import {
   EditableCallbackParams,
   SuppressKeyboardEventParams,
@@ -92,12 +92,10 @@ export interface SAValueFormatterFunc<TData = any, TValue = any> {
 }
 
 // This is so that typescript retains the row type to pass to the GridCells
-// @ts-expect-error types
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
-  _?: TData;
-  editable?: boolean | SAEditableCallback<TData, ValueType>;
-  valueGetter?: string | SAValueGetterFunc<TData, ValueType>;
-  valueFormatter?: string | SAValueFormatterFunc<TData, ValueType>;
+  editable?: boolean | EditableCallback<TData, ValueType>;
+  valueGetter?: string | ValueGetterFunc<TData, ValueType>;
+  valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
   cellRenderer?:
     | ((props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
     | string;

package/src/components/gridForm/GridFormDropDown.tsx

@@ -39,7 +39,7 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormDropDownProps<TData extends GridBaseRow, TValue> extends CellEditorCommon {
+export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
   | 'GridPopoverEditDropDown-containerSmall'

package/src/components/gridHeader/GridHeaderSelect.tsx

@@ -25,7 +25,7 @@ export const GridHeaderSelect = ({ api }: IHeaderParams) => {
 
   const handleMultiSelect = () => {
     if (selectedNodeCount == 0) {
-      api.selectAllFiltered();
+      api.selectAll('filtered');
     } else {
       api.deselectAll();
     }

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -67,7 +67,11 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
 };
 
 export interface GridEditBooleanEditorProps<TData extends GridBaseRow> extends CellEditorCommon {
-  onClick: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; checked: boolean }) => Promise<boolean>;
+  onClick: (props: {
+    selectedRows: TData[];
+    selectedRowIds: TData['id'][];
+    checked: boolean;
+  }) => Promise<boolean> | boolean;
 }
 
 export const GridEditBoolean = <TData extends GridBaseRow>(

package/src/components/index.ts

@@ -1,4 +1,3 @@
-export * from './clickInputWhenContainingCellClicked';
 export * from './ComponentLoadingWrapper';
 export * from './Grid';
 export * from './GridCell';
@@ -7,7 +6,6 @@ export * from './GridCellMultiEditor';
 export * from './GridCellMultiSelectClassRules';
 export * from './gridFilter';
 export * from './gridForm';
-export * from './gridHeader';
 export * from './gridHook';
 export * from './GridIcon';
 export * from './GridLoadableCell';

package/src/contexts/GridContext.tsx

@@ -45,7 +45,7 @@ export interface GridContextType<TData extends GridBaseRow> {
   autoSizeColumns: (props?: AutoSizeColumnsProps) => AutoSizeColumnsResult;
   sizeColumnsToFit: () => void;
   cancelEdit: () => void;
-  startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => void;
+  startCellEditing: ({ rowId, colId }: { rowId: number; colId: string }) => Promise<void>;
   stopEditing: () => void;
   updatingCells: (
     props: { selectedRows: GridBaseRow[]; field?: string },
@@ -167,7 +167,8 @@ export const GridContext = createContext<GridContextType<any>>({
   cancelEdit: () => {
     console.error('no context provider for cancelEdit');
   },
-  startCellEditing: () => {
+  // eslint-disable-next-line @typescript-eslint/require-await
+  startCellEditing: async () => {
     console.error('no context provider for startCellEditing');
   },
   stopEditing: () => {