@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "23.0.1",
+  "version": "24.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=21",
-    "ag-grid-community": "^32.2.0",
-    "ag-grid-react": "^32.2.0",
+    "ag-grid-community": "^32.3.3",
+    "ag-grid-react": "^32.3.3",
     "lodash-es": ">=4",
     "react": ">=18",
     "react-dom": ">=18"
@@ -50,12 +50,14 @@
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
     "test": "jest",
-    "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
+    "lint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
+    "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "upgrade": "npx ncu -i --format group"
   },
   "eslintConfig": {
     "extends": [
@@ -78,53 +80,37 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^3.2.4",
-    "@linzjs/lui": "^22.2.1",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@linzjs/lui": "^22.4.2",
+    "@linzjs/style": "^5.4.0",
+    "@rollup/plugin-commonjs": "^26.0.3",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.4",
-    "@semantic-release/changelog": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.3.1",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-vite": "^8.5.0",
-    "@storybook/test": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-links": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test": "^8.5.2",
     "@storybook/test-runner": "^0.21.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.6.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
     "@types/jest": "^29.5.14",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.12.0",
     "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.5",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react-swc": "^3.7.2",
-    "ag-grid-community": "^32.2.0",
-    "ag-grid-react": "^32.2.0",
+    "ag-grid-community": "^32.3.3",
+    "ag-grid-react": "^32.3.3",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^11.25.0",
+    "chromatic": "^11.25.1",
     "css-loader": "^7.1.2",
-    "esbuild": "^0.24.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.11.2",
-    "eslint-plugin-testing-library": "^6.3.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
@@ -134,11 +120,10 @@
     "postcss": "^8.5.1",
     "postcss-loader": "^7.3.4",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.4.2",
     "react": ">=18",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rollup": "^4.31.0",
+    "rollup": "^4.32.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -146,7 +131,7 @@
     "sass": "^1.83.4",
     "sass-loader": "^14.2.1",
     "semantic-release": "^22.0.12",
-    "storybook": "^8.5.0",
+    "storybook": "^8.5.2",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^4.0.0",
     "stylelint": "^15.11.0",
@@ -155,7 +140,7 @@
     "stylelint-prettier": "^4.1.0",
     "stylelint-scss": "^5.3.2",
     "typescript": "^5.7.3",
-    "vite": "^6.0.10",
+    "vite": "^6.0.11",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4"
   },

package/src/components/ComponentLoadingWrapper.tsx

@@ -1,6 +1,5 @@
-import { PropsWithChildren, ReactElement } from "react";
-
-import { LuiMiniSpinner } from "@linzjs/lui";
+import { LuiMiniSpinner } from '@linzjs/lui';
+import { PropsWithChildren, ReactElement } from 'react';
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
@@ -13,10 +12,10 @@ export const ComponentLoadingWrapper = (
   }>,
 ): ReactElement => {
   return props.loading ? (
-    <LuiMiniSpinner size={22} divProps={{ role: "status", ["aria-label"]: "Loading", style: { padding: 16 } }} />
+    <LuiMiniSpinner size={22} divProps={{ role: 'status', ['aria-label']: 'Loading', style: { padding: 16 } }} />
   ) : (
-    <div style={{ pointerEvents: props.saving ? "none" : "inherit" }} className={props.className}>
-      {props.saving && <div className={"ComponentLoadingWrapper-saveOverlay"} />}
+    <div style={{ pointerEvents: props.saving ? 'none' : 'inherit' }} className={props.className}>
+      {props.saving && <div className={'ComponentLoadingWrapper-saveOverlay'} />}
       {props.children}
     </div>
   );

package/src/components/Grid.tsx

@@ -20,21 +20,21 @@ import {
   RowHighlightPosition,
   RowNode,
   SelectionChangedEvent,
-} from "ag-grid-community";
-import { AgGridReact } from "ag-grid-react";
-import clsx from "clsx";
-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 { GridUpdatingContext } from "../contexts/GridUpdatingContext";
-import { fnOrVar, isNotEmpty } from "../utils/util";
-import { GridNoRowsOverlay } from "./GridNoRowsOverlay";
-import { usePostSortRowsHook } from "./PostSortRowsHook";
-import { GridHeaderSelect } from "./gridHeader";
-import { GridContextMenuComponent, useGridContextMenu } from "./gridHook";
-import { clickInputWhenContainingCellClicked } from "./clickInputWhenContainingCellClicked";
+} from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import clsx from 'clsx';
+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 { GridUpdatingContext } from '../contexts/GridUpdatingContext';
+import { fnOrVar, isNotEmpty } from '../utils/util';
+import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
+import { GridHeaderSelect } from './gridHeader';
+import { GridContextMenuComponent, useGridContextMenu } from './gridHook';
+import { GridNoRowsOverlay } from './GridNoRowsOverlay';
+import { usePostSortRowsHook } from './PostSortRowsHook';
 
 export interface GridBaseRow {
   id: string | number;
@@ -45,29 +45,29 @@ export interface GridProps {
   defaultPostSort?: boolean; // Retain sort order after edit, Defaults to true.
   selectable?: boolean;
   theme?: string; // should have prefix ag-theme-
-  ["data-testid"]?: string;
-  domLayout?: GridOptions["domLayout"];
+  ['data-testid']?: string;
+  domLayout?: GridOptions['domLayout'];
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
-  defaultColDef?: GridOptions["defaultColDef"];
+  defaultColDef?: GridOptions['defaultColDef'];
   columnDefs: ColDef[];
-  rowData: GridOptions["rowData"];
+  rowData: GridOptions['rowData'];
   /**
    * Whether select column is pinned.  Defaults to "left".
    */
-  selectColumnPinned?: ColDef["pinned"];
+  selectColumnPinned?: ColDef['pinned'];
   noRowsOverlayText?: string;
   noRowsMatchingOverlayText?: string;
   animateRows?: boolean;
   rowHeight?: number;
-  rowClassRules?: GridOptions["rowClassRules"];
-  rowSelection?: "single" | "multiple";
+  rowClassRules?: GridOptions['rowClassRules'];
+  rowSelection?: 'single' | 'multiple';
   autoSelectFirstRow?: boolean;
-  onColumnMoved?: GridOptions["onColumnMoved"];
-  rowDragText?: GridOptions["rowDragText"];
-  onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => Promise<void>;
+  onColumnMoved?: GridOptions['onColumnMoved'];
+  rowDragText?: GridOptions['rowDragText'];
+  onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => Promise<void> | void;
   alwaysShowVerticalScroll?: boolean;
-  suppressColumnVirtualization?: GridOptions["suppressColumnVirtualisation"];
+  suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
   /**
    * When the grid is rendered using sizeColumns=="auto" this is called initially with the required container size to fit all content.
    * This allows you set the size of the panel to fit perfectly.
@@ -85,7 +85,7 @@ export interface GridProps {
    *
    * If you want to stretch to container width if width is greater than the container add a flex column.
    */
-  sizeColumns?: "fit" | "auto" | "auto-skip-headers" | "none";
+  sizeColumns?: 'fit' | 'auto' | 'auto-skip-headers' | 'none';
   /**
    * 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.
@@ -109,25 +109,25 @@ export interface GridProps {
 
   loading?: boolean;
   suppressCellFocus?: boolean;
-  pinnedTopRowData?: GridOptions["pinnedTopRowData"];
-  pinnedBottomRowData?: GridOptions["pinnedBottomRowData"];
+  pinnedTopRowData?: GridOptions['pinnedTopRowData'];
+  pinnedBottomRowData?: GridOptions['pinnedBottomRowData'];
 }
 
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
 export const Grid = ({
-  "data-testid": dataTestId,
+  'data-testid': dataTestId,
   defaultPostSort = true,
-  rowSelection = "multiple",
+  rowSelection = 'multiple',
   suppressColumnVirtualization = true,
-  theme = "ag-theme-step-default",
-  sizeColumns = "auto",
+  theme = 'ag-theme-step-default',
+  sizeColumns = 'auto',
   selectColumnPinned = null,
   contextMenuSelectRow = false,
   singleClickEdit = false,
   rowData,
-  rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : 40,
+  rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40,
   ...params
 }: GridProps): ReactElement => {
   const {
@@ -186,19 +186,19 @@ export const Grid = ({
       return;
     }
 
-    const skipHeader = sizeColumns === "auto-skip-headers" && gridRendered === "rows-visible";
-    if (sizeColumns === "auto" || skipHeader) {
+    const skipHeader = sizeColumns === 'auto-skip-headers' && gridRendered === 'rows-visible';
+    if (sizeColumns === 'auto' || skipHeader) {
       const result = autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, includeFlex: true });
       if (!result) {
         needsAutoSize.current = true;
         return;
       }
-      if (gridRendered === "empty") {
+      if (gridRendered === 'empty') {
         if (!hasSetContentSizeEmpty.current && !hasSetContentSize.current) {
           hasSetContentSizeEmpty.current = true;
           params.onContentSize?.(result);
         }
-      } else if (gridRendered === "rows-visible") {
+      } else if (gridRendered === 'rows-visible') {
         if (!hasSetContentSize.current) {
           if (lastFullResize.current === result.width) {
             hasSetContentSize.current = true;
@@ -210,11 +210,11 @@ export const Grid = ({
         }
       } else {
         // It should be impossible to get here
-        console.error("Unknown value returned from hasGridRendered");
+        console.error('Unknown value returned from hasGridRendered');
       }
     }
 
-    if (sizeColumns !== "none") {
+    if (sizeColumns !== 'none') {
       sizeColumnsToFit();
     }
     setAutoSized(true);
@@ -235,7 +235,7 @@ export const Grid = ({
         needsAutoSize.current = true;
       }
     }
-    if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === "auto")) {
+    if (needsAutoSize.current || (!hasSetContentSize.current && sizeColumns === 'auto')) {
       needsAutoSize.current = false;
       setInitialContentSize();
     }
@@ -280,7 +280,7 @@ export const Grid = ({
       const selectedRows = api.getSelectedRows();
       // We don't want to update selected Items if it hasn't changed to prevent excess renders
       if (
-        params.externalSelectedItems.length != selectedRows.length ||
+        params.externalSelectedItems.length !== selectedRows.length ||
         isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
       ) {
         setExternallySelectedItemsAreInSync(false);
@@ -347,7 +347,7 @@ export const Grid = ({
         editable,
         cellClassRules: {
           ...colDef.cellClassRules,
-          "GridCell-readonly": (ccp: CellClassParams) => !editable(ccp as any as EditableCallbackParams),
+          'GridCell-readonly': (ccp: CellClassParams) => !editable(ccp as any as EditableCallbackParams),
         },
       };
     });
@@ -355,7 +355,7 @@ export const Grid = ({
     return params.selectable || params.onRowDragEnd
       ? [
           {
-            colId: "selection",
+            colId: 'selection',
             editable: false,
             rowDrag: !!params.onRowDragEnd,
             minWidth: params.selectable && params.onRowDragEnd ? 76 : 48,
@@ -365,11 +365,11 @@ export const Grid = ({
               exportable: false,
             },
             checkboxSelection: params.selectable,
-            headerClass: params.onRowDragEnd ? "ag-header-select-draggable" : undefined,
-            headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
+            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 ((e.event.key === 'Enter' || e.event.key === ' ') && !e.event.repeat) {
                 if (isEmpty(e.api.getSelectedRows())) {
                   e.api.selectAllFiltered();
                 } else {
@@ -426,7 +426,7 @@ export const Grid = ({
     // Don't update while there are spinners
     if (!isEmpty(updatingCols())) return;
 
-    const skipHeader = sizeColumns === "auto-skip-headers";
+    const skipHeader = sizeColumns === 'auto-skip-headers';
     if (hasSetContentSize.current) {
       autoSizeColumns({ skipHeader, userSizedColIds: userSizedColIds.current, colIds: colIdsEdited.current });
     }
@@ -460,7 +460,7 @@ export const Grid = ({
         event.node.setSelected(true, true);
       }
       // Cell already being edited, so don't re-edit until finished
-      if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
+      if (checkUpdating([event.colDef.field ?? ''], event.data.id)) {
         return;
       }
 
@@ -519,10 +519,10 @@ export const Grid = ({
   const onCellKeyPress = useCallback(
     (e: CellKeyDownEvent) => {
       const kbe = e.event as KeyboardEvent;
-      if (kbe.key === "Enter") {
+      if (kbe.key === 'Enter') {
         if (!invokeEditAction(e)) startCellEditing(e);
       }
-      if (kbe.key === "Tab") {
+      if (kbe.key === 'Tab') {
         // eslint-disable-next-line
         prePopupOps();
       }
@@ -536,7 +536,7 @@ export const Grid = ({
    */
   const columnDefsAdjusted = useMemo(() => {
     const adjustColDefOrGroup = (colDef: ColDef | ColGroupDef) =>
-      "children" in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
+      'children' in colDef ? adjustGroupColDef(colDef) : adjustColDef(colDef);
 
     const adjustGroupColDef = (colDef: ColGroupDef): ColGroupDef => ({
       ...colDef,
@@ -545,7 +545,7 @@ export const Grid = ({
 
     const adjustColDef = (colDef: ColDef): ColDef => ({
       ...colDef,
-      suppressSizeToFit: (sizeColumns === "auto" || sizeColumns === "auto-skip-headers") && !colDef.flex,
+      suppressSizeToFit: (sizeColumns === 'auto' || sizeColumns === 'auto-skip-headers') && !colDef.flex,
       sortable: colDef.sortable && params.defaultColDef?.sortable !== false,
     });
 
@@ -570,8 +570,8 @@ export const Grid = ({
     if (isEmpty(colIds)) {
       // Columns to resize?
       if (!isEmpty(colIdsEdited.current)) {
-        const skipHeader = sizeColumns === "auto-skip-headers";
-        if (sizeColumns === "auto" || skipHeader) {
+        const skipHeader = sizeColumns === 'auto-skip-headers';
+        if (sizeColumns === 'auto' || skipHeader) {
           defer(() => {
             if (hasSetContentSize.current) {
               autoSizeColumns({
@@ -608,7 +608,7 @@ export const Grid = ({
    * Resize columns to fit if required on window/container resize
    */
   const onGridSizeChanged = useCallback(() => {
-    if (sizeColumns !== "none") {
+    if (sizeColumns !== 'none') {
       sizeColumnsToFit();
     }
   }, [sizeColumns, sizeColumnsToFit]);
@@ -625,10 +625,10 @@ export const Grid = ({
     const colId = e.column?.getColId();
     if (colId == null) return;
     switch (e.source) {
-      case "uiColumnDragged":
+      case 'uiColumnDragged':
         userSizedColIds.current.add(colId);
         break;
-      case "autosizeColumns":
+      case 'autosizeColumns':
         userSizedColIds.current.delete(colId);
         break;
     }
@@ -657,27 +657,29 @@ export const Grid = ({
   }, []);
 
   const onRowDragEnd = useCallback(
-    async (event: RowDragEndEvent) => {
-      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;
-        }
+    (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));
-      }
-      clientSideRowModel.highlightRowAtPixel(null);
+          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));
+        }
+        clientSideRowModel.highlightRowAtPixel(null);
+      })();
     },
     [params],
   );
@@ -691,11 +693,11 @@ export const Grid = ({
     <div
       data-testid={dataTestId}
       className={clsx(
-        "Grid-container",
+        'Grid-container',
         theme,
-        "theme-specific",
-        staleGrid && "Grid-sortIsStale",
-        gridReady && rowData && autoSized && "Grid-ready",
+        'theme-specific',
+        staleGrid && 'Grid-sortIsStale',
+        gridReady && rowData && autoSized && 'Grid-ready',
       )}
     >
       {gridContextMenu.component}
@@ -721,7 +723,7 @@ export const Grid = ({
           onCellEditingStarted={refreshSelectedRows}
           domLayout={params.domLayout}
           onColumnResized={onColumnResized}
-          defaultColDef={{ minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }}
+          defaultColDef={{ minWidth: 48, ...omit(params.defaultColDef, ['editable']) }}
           columnDefs={columnDefsAdjusted}
           rowData={rowData}
           noRowsOverlayComponent={(event: AgGridEvent) => {

package/src/components/GridCell.test.tsx

@@ -1,29 +1,29 @@
-import { GridBaseRow } from "./Grid";
-import { generateFilterGetter, SAValueGetterParams } from "./GridCell";
+import { GridBaseRow } from './Grid';
+import { generateFilterGetter, SAValueGetterParams } from './GridCell';
 
-describe("GridCell", () => {
-  test("generateFilterGetter returns passed filterValueGetter", () => {
-    const filterValueGetter = () => "a";
-    expect(generateFilterGetter(undefined, filterValueGetter, () => "b")).toBe(filterValueGetter);
-    expect(generateFilterGetter("xxx", filterValueGetter, undefined)).toBe(filterValueGetter);
+describe('GridCell', () => {
+  test('generateFilterGetter returns passed filterValueGetter', () => {
+    const filterValueGetter = () => 'a';
+    expect(generateFilterGetter(undefined, filterValueGetter, () => 'b')).toBe(filterValueGetter);
+    expect(generateFilterGetter('xxx', filterValueGetter, undefined)).toBe(filterValueGetter);
     expect(generateFilterGetter(undefined, filterValueGetter, undefined)).toBe(filterValueGetter);
   });
 
-  test("generateFilterGetter", () => {
-    expect(generateFilterGetter("xxx", undefined, undefined)).toBeUndefined();
+  test('generateFilterGetter', () => {
+    expect(generateFilterGetter('xxx', undefined, undefined)).toBeUndefined();
 
     const tests = [
-      { formatted: "f1", value: "v1", expected: "f1 v1" },
-      { formatted: "f2", value: {}, expected: "f2" },
-      { formatted: "", value: "v3", expected: "v3" },
+      { formatted: 'f1', value: 'v1', expected: 'f1 v1' },
+      { formatted: 'f2', value: {}, expected: 'f2' },
+      { formatted: '', value: 'v3', expected: 'v3' },
     ];
 
     tests.forEach((test) => {
-      const field = "xxx";
+      const field = 'xxx';
       const valueFormatter = test.formatted == null ? undefined : () => test.formatted;
       const filterGetter = generateFilterGetter(field, undefined, valueFormatter);
-      expect(typeof filterGetter).toBe("function");
-      if (typeof filterGetter !== "function") return;
+      expect(typeof filterGetter).toBe('function');
+      if (typeof filterGetter !== 'function') return;
       expect(filterGetter({ getValue: () => test.value } as any as SAValueGetterParams<GridBaseRow>)).toBe(
         test.expected,
       );