@linzjs/step-ag-grid 30.4.4 → 31.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.4.4",
+  "version": "31.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -40,21 +40,21 @@
     "matcher": "^5.0.0",
     "natsort": "^2.0.3",
     "react-transition-state": "^2.3.1",
-    "usehooks-ts": "^3.1.1",
-    "uuid": "^13.0.0"
+    "usehooks-ts": "^3.1.1"
   },
   "scripts": {
-    "build": "run-s clean linters css bundle",
+    "build": "node --eval \"fs.mkdirSync('./dist', { recursive: true })\" && run-s clean lintall css bundle",
     "yalc": "run-s clean css bundle && yalc push",
-    "clean": "rimraf dist && mkdirp ./dist",
+    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
     "bundle": "rollup -c",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
-    "test": "cross-env NODE_OPTIONS='--no-experimental-global-navigator' vitest run",
+    "test": "cross-env vitest run",
     "test:watch": "vitest --watch",
-    "linters": "run-s lint:eslint lint:circulardeps",
-    "lint:eslint": "eslint ./src --ext .js,.ts,.tsx --cache --ignore-path .gitignore",
-    "lint:circulardeps": "npx madge --circular --extensions ts,tsx ./src",
-    "lint:fix": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
+    "lintall": "run-s lint:oxlint",
+    "lint:oxlint": "oxlint ./src",
+    "lint:fix": "oxlint ./src --fix",
+    "format": "oxfmt --write ./src",
+    "format:check": "oxfmt --check ./src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
@@ -62,11 +62,6 @@
     "upgrade": "npx ncu -i --format group",
     "prepare": "husky"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -79,74 +74,53 @@
       "last 1 safari version"
     ]
   },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.53.3",
-    "@swc/core-linux-x64-gnu": "^1.15.3"
-  },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@linzjs/lui": "^24.3.1",
-    "@linzjs/style": "^5.4.0",
-    "@linzjs/windows": "^8.6.3",
+    "@linzjs/windows": "^9.5.6",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^9.1.17",
-    "@storybook/addon-links": "^9.1.17",
-    "@storybook/react": "^9.1.17",
-    "@storybook/react-vite": "^9.1.17",
+    "@storybook/addon-docs": "^9.1.20",
+    "@storybook/addon-links": "^9.1.20",
+    "@storybook/react": "^9.1.20",
+    "@storybook/react-vite": "^9.1.20",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
-    "@types/jsdom": "^21.1.7",
+    "@types/jest": "^30.0.0",
+    "@types/jsdom": "^28.0.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.19.2",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
-    "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/ui": "^3.2.4",
-    "babel-preset-react-app": "^10.1.0",
-    "canvas": "^3.2.0",
     "chromatic": "^13.3.4",
     "cross-env": "^10.1.0",
-    "css-loader": "^7.1.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.17",
     "husky": "^9.1.7",
-    "jsdom": "^26.1.0",
-    "lodash-es": "^4.17.23",
-    "mkdirp": "^3.0.1",
+    "jsdom": "28.1.0",
+    "lodash-es": "^4.18.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.6",
-    "postcss-loader": "^8.2.0",
+    "oxfmt": "^0.44.0",
+    "oxlint": "^1.59.0",
+    "postcss": "^8.5.8",
     "postcss-scss": "^4.0.9",
     "react": ">=18",
-    "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.3.1",
-    "rimraf": "^6.1.2",
-    "rollup": "^4.53.3",
+    "rollup": "^4.60.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",
+    "rollup-plugin-typescript2": "^0.37.0",
     "sass": "^1.96.0",
-    "sass-loader": "^16.0.6",
-    "storybook": "^9.1.17",
-    "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "^4.0.0",
+    "storybook": "^9.1.20",
     "typescript": "^5.9.3",
-    "vite": "^7.2.7",
-    "vite-plugin-html": "^3.2.2",
+    "vite": "^7.3.2",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-commit": "npm run lint"

package/src/components/Grid.tsx

@@ -31,10 +31,11 @@ import { AgGridReact } from 'ag-grid-react';
 import clsx from 'clsx';
 import { defer, delay, difference, isEmpty, last, omit, xorBy } from 'lodash-es';
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useInterval } from 'usehooks-ts';
 
 import { AutoSizeColumnsResult, StartCellEditingProps, useGridContext } from '../contexts/GridContext';
 import { GridUpdatingContext } from '../contexts/GridUpdatingContext';
+import { isStorybook } from '../utils/storybook';
+import { useInterval } from '../utils/useInterval';
 import { compareNaturalInsensitive, fnOrVar, isNotEmpty } from '../utils/util';
 import { clickInputWhenContainingCellClicked } from './clickInputWhenContainingCellClicked';
 import { GridHeaderSelect } from './gridHeader';
@@ -353,7 +354,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       if (autoSelectFirstRow && selectable) {
         selectRowsById([firstRowId]);
       } else {
-        focusByRowById(firstRowId, true);
+        if (!isStorybook) {
+          focusByRowById(firstRowId, true);
+        }
       }
     }
   }, [
@@ -777,7 +780,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
       const adjustedColDef = {
         ...colDef,
         // You cannot pass a width to a flex
-        width: !!colDef.flex ? undefined : colDef.width,
+        width: colDef.flex ? undefined : colDef.width,
         ...(!!colDef.flex && { flexAutoSizeWidth: colDef.width }),
         // If this is allowed flex columns don't size based on flex
         suppressSizeToFit: true,
@@ -857,11 +860,39 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     });
   }, []);
 
+  const clearDragRowClasses = useCallback(() => {
+    document.querySelectorAll(`.ag-row-dragging`)?.forEach((el) => {
+      el.classList.remove('ag-row-dragging');
+    });
+  }, []);
+
   const gridElementRef = useRef<Element>(undefined);
+  const multiDragAppliedRef = useRef(false);
+  const multiDragCountRef = useRef(0);
   const onRowDragMove = useCallback(
     (event: RowDragMoveEvent) => {
       if (startDragYRef.current === null) {
         startDragYRef.current = event.y;
+
+        // On first move event, apply ag-row-dragging class to all selected rows for multi-drag
+        if (rowSelection === 'multiple' && event.node.isSelected()) {
+          const selectedNodes = event.api.getSelectedNodes().filter((n) => n.displayed && n.data != null);
+          if (selectedNodes.length > 1) {
+            multiDragAppliedRef.current = true;
+            multiDragCountRef.current = selectedNodes.length;
+            // Find the grid body element for scoped queries
+            const targetEl = event.event.target as Element | undefined;
+            const gridElement = targetEl?.closest('.ag-body');
+            if (gridElement) {
+              gridElementRef.current = gridElement;
+              for (const node of selectedNodes) {
+                gridElement.querySelectorAll(`[row-id='${node.data.id}']`)?.forEach((el) => {
+                  el.classList.add('ag-row-dragging');
+                });
+              }
+            }
+          }
+        }
       }
 
       const yDiff = event.y - startDragYRef.current;
@@ -882,7 +913,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         });
       }
     },
-    [clearHighlightRowClasses],
+    [clearHighlightRowClasses, rowSelection],
   );
 
   const onCellFocused = useCallback(
@@ -919,6 +950,9 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
   const onRowDragEnd = useCallback(
     (event: RowDragEndEvent<TData>) => {
       clearHighlightRowClasses();
+      clearDragRowClasses();
+      multiDragAppliedRef.current = false;
+      multiDragCountRef.current = 0;
       gridElementRef.current = undefined;
       if (!params.onRowDragEnd || startDragYRef.current === null) {
         return;
@@ -931,10 +965,29 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         if (!movedRow || !targetRow || movedRow === targetRow || yDiff === 0) {
           return;
         }
-        void params.onRowDragEnd({ movedRow, targetRow, direction: yDiff > 0 ? 1 : -1 });
+
+        // Determine movedRows: if dragged row is part of a multi-selection, include all selected & displayed rows
+        let movedRows: TData[];
+        if (rowSelection === 'multiple' && event.node.isSelected()) {
+          movedRows = event.api
+            .getSelectedNodes()
+            .filter((n) => n.displayed && n.data != null)
+            .sort((a, b) => (a.rowIndex ?? 0) - (b.rowIndex ?? 0))
+            .map((n) => n.data as TData);
+        } else {
+          movedRows = [movedRow];
+        }
+
+        // If targetRow is one of the moved rows, no-op
+        if (movedRows.some((r) => r.id === targetRow.id)) {
+          return;
+        }
+
+        const direction: -1 | 1 = yDiff > 0 ? 1 : -1;
+        void params.onRowDragEnd({ movedRow, movedRows, targetRow, direction });
       }
     },
-    [params, clearHighlightRowClasses],
+    [params, clearHighlightRowClasses, clearDragRowClasses, rowSelection],
   );
 
   useEffect(
@@ -1078,7 +1131,12 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           onRowClicked={params.onRowClicked}
           onRowDataUpdated={onRowDataUpdated}
           onRowDoubleClicked={params.onRowDoubleClicked}
-          onRowDragCancel={clearHighlightRowClasses}
+          onRowDragCancel={() => {
+            clearHighlightRowClasses();
+            clearDragRowClasses();
+            multiDragAppliedRef.current = false;
+            multiDragCountRef.current = 0;
+          }}
           onRowDragEnd={onRowDragEnd}
           onRowDragMove={onRowDragMove}
           onSelectionChanged={synchroniseExternalStateToGridSelection}
@@ -1089,7 +1147,16 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
           preventDefaultOnContextMenu={true}
           quickFilterParser={quickFilterParser}
           rowClassRules={params.rowClassRules}
-          rowDragText={params.rowDragText}
+          rowDragText={
+            params.rowDragText ??
+            (rowSelection === 'multiple'
+              ? () => {
+                  const count = multiDragCountRef.current;
+                  if (count > 1) return `Moving ${count} rows`;
+                  return '';
+                }
+              : undefined)
+          }
           rowHeight={rowHeight}
           rowSelection={
             selectable

package/src/components/PostSortRowsHook.ts

@@ -160,7 +160,9 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
           };
           wasStale = true;
           // For some reason AgGrid mis-positions the inserted row.
-          lastNewNode && redrawRows();
+          if (lastNewNode) {
+            redrawRows();
+          }
         } else if (changedRowCount == 1 && newRowCount === 0) {
           // User edited one row so, do nothing, retain sort
           wasStale = true;

package/src/components/gridDragUtil.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, test } from 'vitest';
+
+import { reorderRows } from './gridDragUtil';
+
+interface TestRow {
+  id: number;
+  name: string;
+}
+
+const makeRows = (...ids: number[]): TestRow[] => ids.map((id) => ({ id, name: `row-${id}` }));
+const row = (id: number): TestRow => ({ id, name: `row-${id}` });
+const ids = (rows: TestRow[]) => rows.map((r) => r.id);
+
+describe('reorderRows', () => {
+  const rows = makeRows(1, 2, 3, 4, 5);
+
+  describe('single row move', () => {
+    test('move row down (below target)', () => {
+      // Drag row 1 below row 3: [2, 3, 1, 4, 5]
+      expect(ids(reorderRows(rows, [row(1)], row(3), 1))).toEqual([2, 3, 1, 4, 5]);
+    });
+
+    test('move row up (above target)', () => {
+      // Drag row 4 above row 2: [1, 4, 2, 3, 5]
+      expect(ids(reorderRows(rows, [row(4)], row(2), -1))).toEqual([1, 4, 2, 3, 5]);
+    });
+
+    test('move to first position', () => {
+      // Drag row 3 above row 1: [3, 1, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(3)], row(1), -1))).toEqual([3, 1, 2, 4, 5]);
+    });
+
+    test('move to last position', () => {
+      // Drag row 2 below row 5: [1, 3, 4, 5, 2]
+      expect(ids(reorderRows(rows, [row(2)], row(5), 1))).toEqual([1, 3, 4, 5, 2]);
+    });
+
+    test('move to adjacent position down', () => {
+      // Drag row 2 below row 3: [1, 3, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(2)], row(3), 1))).toEqual([1, 3, 2, 4, 5]);
+    });
+
+    test('move to adjacent position up', () => {
+      // Drag row 3 above row 2: [1, 3, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(3)], row(2), -1))).toEqual([1, 3, 2, 4, 5]);
+    });
+  });
+
+  describe('multi-row move', () => {
+    test('move multiple contiguous rows down', () => {
+      // Drag rows 1,2 below row 4: [3, 4, 1, 2, 5]
+      expect(ids(reorderRows(rows, [row(1), row(2)], row(4), 1))).toEqual([3, 4, 1, 2, 5]);
+    });
+
+    test('move multiple contiguous rows up', () => {
+      // Drag rows 4,5 above row 2: [1, 4, 5, 2, 3]
+      expect(ids(reorderRows(rows, [row(4), row(5)], row(2), -1))).toEqual([1, 4, 5, 2, 3]);
+    });
+
+    test('move rows with gaps — gaps are collapsed', () => {
+      // Drag rows 1,3,5 below row 4: [2, 4, 1, 3, 5]
+      expect(ids(reorderRows(rows, [row(1), row(3), row(5)], row(4), 1))).toEqual([2, 4, 1, 3, 5]);
+    });
+
+    test('move rows with gaps above target', () => {
+      // Drag rows 2,4 above row 5: [1, 3, 2, 4, 5]
+      expect(ids(reorderRows(rows, [row(2), row(4)], row(5), -1))).toEqual([1, 3, 2, 4, 5]);
+    });
+
+    test('move rows with gaps to first position', () => {
+      // Drag rows 3,5 above row 1: [3, 5, 1, 2, 4]
+      expect(ids(reorderRows(rows, [row(3), row(5)], row(1), -1))).toEqual([3, 5, 1, 2, 4]);
+    });
+
+    test('move rows with gaps to last position', () => {
+      // Drag rows 1,3 below row 5: [2, 4, 5, 1, 3]
+      expect(ids(reorderRows(rows, [row(1), row(3)], row(5), 1))).toEqual([2, 4, 5, 1, 3]);
+    });
+
+    test('preserves insertion order of movedRows', () => {
+      // movedRows given in display order [2,4] should insert as [2,4] not [4,2]
+      const result = reorderRows(rows, [row(2), row(4)], row(1), -1);
+      expect(ids(result)).toEqual([2, 4, 1, 3, 5]);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('target is one of the moved rows — returns original array', () => {
+      const result = reorderRows(rows, [row(2), row(3)], row(2), 1);
+      expect(result).toBe(rows);
+    });
+
+    test('empty movedRows — returns original array', () => {
+      const result = reorderRows(rows, [], row(3), 1);
+      expect(result).toBe(rows);
+    });
+
+    test('target not found in rows — returns original array', () => {
+      const result = reorderRows(rows, [row(1)], row(99), 1);
+      expect(result).toBe(rows);
+    });
+
+    test('single row array — move is no-op (target is the moved row)', () => {
+      const single = makeRows(1);
+      const result = reorderRows(single, [row(1)], row(1), 1);
+      expect(result).toBe(single);
+    });
+
+    test('two row array — swap positions', () => {
+      const two = makeRows(1, 2);
+      expect(ids(reorderRows(two, [row(1)], row(2), 1))).toEqual([2, 1]);
+      expect(ids(reorderRows(two, [row(2)], row(1), -1))).toEqual([2, 1]);
+    });
+  });
+});

package/src/components/gridDragUtil.ts

@@ -0,0 +1,32 @@
+import { GridBaseRow } from './types';
+
+/**
+ * Reorders rows by removing movedRows from the array and inserting them at the target position.
+ * @param rows - The current row array.
+ * @param movedRows - Rows to move, in desired insertion order (typically display order).
+ * @param targetRow - The row to insert relative to.
+ * @param direction - -1 inserts above targetRow, 1 inserts below targetRow.
+ * @returns A new array with the rows reordered, or the original array if the operation is a no-op.
+ */
+export function reorderRows<T extends GridBaseRow>(rows: T[], movedRows: T[], targetRow: T, direction: -1 | 1): T[] {
+  if (movedRows.length === 0) return rows;
+
+  const movedIds = new Set(movedRows.map((r) => r.id));
+
+  // If targetRow is one of the moved rows, no-op
+  if (movedIds.has(targetRow.id)) return rows;
+
+  // Remove moved rows from the array
+  const remaining = rows.filter((r) => !movedIds.has(r.id));
+
+  // Find where to insert relative to the target
+  const targetIndex = remaining.findIndex((r) => r.id === targetRow.id);
+  if (targetIndex === -1) return rows;
+
+  const insertIndex = direction === 1 ? targetIndex + 1 : targetIndex;
+
+  // Insert movedRows at the calculated position
+  const result = [...remaining];
+  result.splice(insertIndex, 0, ...movedRows);
+  return result;
+}

package/src/components/gridFilter/GridFilterColumnsMultiSelect.scss

@@ -1,24 +1,22 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
+@use '@linzjs/lui/dist/scss/Core' as lui;
 
 .GridFilterColsMultiSelect {
-    background: #fff;
-    padding: 8px;
-    @include lui.font-semibold();
+  background: #fff;
+  padding: 8px;
+  @include lui.font-semibold();
 
-    .LuiSelect-label-text {
-        color: lui.$fuscous;
-        display: inline-block;
-    }
+  .LuiSelect-label-text {
+    color: lui.$fuscous;
+    display: inline-block;
+  }
 
-    .LuiCheckboxInput-selectAll,
-    .LuiCheckboxInput-item {
-        color: lui.$charcoal;
-        line-height: 20px;
-        margin-bottom: 0;
-        font-weight: 600;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 0%;
-
-    }
-}
+  .LuiCheckboxInput-selectAll,
+  .LuiCheckboxInput-item {
+    color: lui.$charcoal;
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
+}

package/src/components/gridFilter/GridFilterColumnsToggle.tsx

@@ -45,7 +45,7 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
           } else if (!invisibleIds.every((id) => typeof id === 'string')) {
             console.error(`stored invisible ids not strings: ${stored}`);
           } else {
-            invisibleIds && setInvisibleColumnIds(invisibleIds);
+            if (invisibleIds) setInvisibleColumnIds(invisibleIds);
           }
         }
       } catch (ex) {
@@ -57,10 +57,9 @@ export const GridFilterColumnsToggle = ({ saveState = true }: GridFilterColumnsT
 
   // Save state on column visibility change
   useEffect(() => {
-    loaded &&
-      columnStorageKey &&
-      saveState &&
+    if (loaded && columnStorageKey && saveState) {
       window.localStorage.setItem(columnStorageKey, JSON.stringify(invisibleColumnIds));
+    }
   }, [columnStorageKey, invisibleColumnIds, loaded, saveState]);
 
   const toggleColumn = useCallback(

package/src/components/gridFilter/useGridFilter.ts

@@ -8,9 +8,9 @@ export const useGridFilter = <TData extends GridBaseRow>(filter: GridFilterExter
 
   useEffect(() => {
     const thisFilter = filter;
-    thisFilter && addExternalFilter(thisFilter);
+    if (thisFilter) addExternalFilter(thisFilter);
     return () => {
-      thisFilter && removeExternalFilter(thisFilter);
+      if (thisFilter) removeExternalFilter(thisFilter);
     };
   }, [addExternalFilter, filter, removeExternalFilter]);
 };

package/src/components/gridForm/GridFormDropDown.tsx

@@ -50,7 +50,7 @@ export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
 export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-  | 'GridPopoverEditDropDown-containerSmall'
+    | 'GridPopoverEditDropDown-containerSmall'
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     | 'GridPopoverEditDropDown-containerMedium'
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents

package/src/components/gridForm/GridFormInlineTextInput.tsx

@@ -11,8 +11,7 @@ import { useGridPopoverHook } from '../GridPopoverHook';
 import { GridBaseRow } from '../types';
 
 export interface GridFormInlineTextInput<TData extends GridBaseRow>
-  extends TextInputValidatorProps<TData>,
-    CellEditorCommon {
+  extends TextInputValidatorProps<TData>, CellEditorCommon {
   placeholder?: string;
   units?: string;
   onSave?: (props: { selectedRows: TData[]; selectedRowIds: TData['id'][]; value: string }) => MaybePromise<boolean>;

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -51,7 +51,7 @@ export interface GridFormMultiSelectSaveProps<TData extends GridBaseRow> {
 
 export interface GridFormMultiSelectProps<TData extends GridBaseRow> extends CellEditorCommon {
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-  | 'GridMultiSelect-containerSmall'
+    | 'GridMultiSelect-containerSmall'
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
     | 'GridMultiSelect-containerMedium'
     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
@@ -322,11 +322,15 @@ const FilterInput = (props: {
             void triggerSave();
             return;
           }
-          onSelectFilter && addCustomFilterValue();
+          if (onSelectFilter) {
+            addCustomFilterValue();
+          }
         }
         lastKeyWasEnter.current = true;
       } else if (e.key === 'Control') {
-        lastKeyWasEnter.current && setFilter('');
+        if (lastKeyWasEnter.current) {
+          setFilter('');
+        }
         lastKeyWasEnter.current = false;
       } else {
         lastKeyWasEnter.current = false;
@@ -392,7 +396,9 @@ const MenuRadioItem = (props: {
           e.keepOpen = true;
           toggleValue(item);
         }
-        item.checked && props.onChecked && props.onChecked();
+        if (item.checked) {
+          props.onChecked?.();
+        }
       }}
     >
       <LuiCheckboxInput

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -8,8 +8,7 @@ import { CellEditorCommon } from '../GridCell';
 import { GridBaseRow } from '../types';
 
 export interface GridSubComponentTextAreaProps<TData extends GridBaseRow>
-  extends TextInputValidatorProps<TData>,
-    CellEditorCommon {
+  extends TextInputValidatorProps<TData>, CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   defaultValue: string;

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -7,8 +7,7 @@ import { CellEditorCommon } from '../GridCell';
 import { GridBaseRow } from '../types';
 
 export interface GridFormSubComponentTextInputProps<TData extends GridBaseRow>
-  extends TextInputValidatorProps<TData>,
-    CellEditorCommon {
+  extends TextInputValidatorProps<TData>, CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   defaultValue: string;

package/src/components/gridForm/GridFormTextArea.tsx

@@ -8,8 +8,7 @@ import { useGridPopoverHook } from '../GridPopoverHook';
 import { GridBaseRow } from '../types';
 
 export interface GridFormTextAreaProps<TData extends GridBaseRow>
-  extends TextInputValidatorProps<TData>,
-    CellEditorCommon {
+  extends TextInputValidatorProps<TData>, CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   onSave?: (props: { selectedRows: TData[]; value: string }) => Promise<boolean>;

package/src/components/gridForm/GridFormTextInput.tsx

@@ -8,8 +8,7 @@ import { useGridPopoverHook } from '../GridPopoverHook';
 import { GridBaseRow } from '../types';
 
 export interface GridFormTextInputProps<TData extends GridBaseRow>
-  extends TextInputValidatorProps<TData>,
-    CellEditorCommon {
+  extends TextInputValidatorProps<TData>, CellEditorCommon {
   placeholder?: string;
   units?: string;
   width?: string | number;

package/src/components/gridHeader/GridHeaderSelect.tsx

@@ -19,7 +19,9 @@ export const GridHeaderSelect = ({ api }: IHeaderParams) => {
 
     api.addEventListener('selectionChanged', clickHandler);
     return () => {
-      !api.isDestroyed() && api.removeEventListener('selectionChanged', clickHandler);
+      if (!api.isDestroyed()) {
+        api.removeEventListener('selectionChanged', clickHandler);
+      }
     };
   }, [api, updateCounter]);