@linzjs/step-ag-grid 30.4.3 → 31.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "30.4.3",
+  "version": "31.1.1",
   "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,

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/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]);
 

package/src/components/gridHook/useGridCopy.ts

@@ -219,7 +219,17 @@ export const useGridCopy = <TData extends GridBaseRow>({
         void navigator.clipboard.writeText(result).catch((err) => console.error('Failed to copy: ', err));
       }
     },
-    [getCellValue, ranges, copyType],
+    [
+      getCellValue,
+      ranges,
+      copyType,
+      rangeStartRef,
+      hasSelectedMoreThanOneCellRef,
+      rangeEndRef,
+      showToast,
+      getColDef,
+      getSelectedRowIds,
+    ],
   );
 
   const onCopyEvent = useCallback(
@@ -240,7 +250,7 @@ export const useGridCopy = <TData extends GridBaseRow>({
 
       onCopy();
     },
-    [onCopy],
+    [onCopy, rangeStartRef, rangeEndRef, hasSelectedMoreThanOneCellRef],
   );
 
   const { cellContextMenu: rangeSelectContextMenu, contextMenuComponent: rangeSelectContextMenuComponent } =
@@ -255,7 +265,7 @@ export const useGridCopy = <TData extends GridBaseRow>({
         ? rangeSelectContextMenu(event)
         : cellContextMenu(event);
     },
-    [cellContextMenu, rangeSelectContextMenu],
+    [cellContextMenu, rangeSelectContextMenu, rangeStartRef, hasSelectedMoreThanOneCellRef],
   );
 
   return {

package/src/components/gridHook/useGridRangeSelection.ts

@@ -1,7 +1,7 @@
 import { CellMouseDownEvent, CellMouseOverEvent, IRowNode } from 'ag-grid-community';
 import { MutableRefObject, RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { useInterval } from 'usehooks-ts';
 
+import { useInterval } from '../../utils/useInterval';
 import { GridBaseRow } from '../types';
 
 export interface CellLocation {
@@ -79,7 +79,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
     );
 
     return { selectedColIds, selectedNodes };
-  }, []);
+  }, [gridDivRef, rangeSortedNodesRef, rangeStartRef, rangeEndRef]);
 
   const redrawSelectedRanges = useCallback(() => {
     const gridElement = gridDivRef.current!;
@@ -106,7 +106,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
         }
       });
     });
-  }, []);
+  }, [ranges, gridDivRef]);
 
   const updateRangeSelectionCellClasses = useCallback(
     (justRefresh?: boolean) => {
@@ -158,7 +158,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
 
       redrawSelectedRanges();
     },
-    [ranges, redrawSelectedRanges],
+    [redrawSelectedRanges, rangeStartRef, rangeEndRef, gridDivRef, hasSelectedMoreThanOneCellRef, rangeSortedNodesRef],
   );
 
   // Handle updates after scroll / grid refresh
@@ -178,18 +178,24 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
     rangeEndRef.current = null;
 
     updateRangeSelectionCellClasses();
-  }, [updateRangeSelectionCellClasses]);
+  }, [updateRangeSelectionCellClasses, hasSelectedMoreThanOneCellRef, rangeStartRef, rangeEndRef]);
 
   const mouseDownRef = useRef<[number, number]>([0, 0]);
-  const trackMouseDown = useCallback((e: MouseEvent) => {
-    mouseDownRef.current = [e.screenX, e.screenY];
-  }, []);
+  const trackMouseDown = useCallback(
+    (e: MouseEvent) => {
+      mouseDownRef.current = [e.screenX, e.screenY];
+    },
+    [mouseDownRef],
+  );
 
-  const trackMouseUp = useCallback((e: MouseEvent) => {
-    if (rangeEndRef.current) {
-      rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
-    }
-  }, []);
+  const trackMouseUp = useCallback(
+    (e: MouseEvent) => {
+      if (rangeEndRef.current) {
+        rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
+      }
+    },
+    [rangeEndRef],
+  );
 
   useEffect(() => {
     document.addEventListener('mousedown', trackMouseDown, { capture: true });
@@ -198,7 +204,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
       document.removeEventListener('mousemove', trackMouseDown, { capture: true });
       document.removeEventListener('mouseup', trackMouseUp, { capture: true });
     };
-  }, []);
+  }, [trackMouseDown, trackMouseUp]);
 
   const onCellMouseOver = useCallback(
     (e: CellMouseOverEvent, mouseDown?: boolean) => {
@@ -238,7 +244,14 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
 
       updateRangeSelectionCellClasses();
     },
-    [enableRangeSelection, updateRangeSelectionCellClasses],
+    [
+      enableRangeSelection,
+      updateRangeSelectionCellClasses,
+      hasSelectedMoreThanOneCellRef,
+      rangeEndRef,
+      rangeSortedNodesRef,
+      rangeStartRef,
+    ],
   );
 
   const onCellMouseDown = useCallback(
@@ -249,7 +262,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
       }
       onCellMouseOver(e as unknown as CellMouseOverEvent, true);
     },
-    [onCellMouseOver],
+    [onCellMouseOver, clearRangeSelection],
   );
 
   return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };

package/src/contexts/GridContextProvider.tsx

@@ -122,7 +122,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         // this is the only way to get out of the loop
         throw 'expected exception - exit_loop';
       });
-    } catch (ex) {
+    } catch {
       // ignore
     }
     return id;
@@ -312,7 +312,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
               const colId = col.colId;
               // We need to make sure we aren't currently editing a cell otherwise tests will fail
               // as they will start to edit the cell before this stuff has a chance to run
-              colId &&
+              if (colId) {
                 delay(() => {
                   if (
                     !gridApi.isDestroyed() &&
@@ -326,6 +326,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
                     gridApi.setFocusedCell(rowIndex, agGridSelectRowColId);
                   }
                 }, 100);
+              }
             }
           }
         }
@@ -342,7 +343,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         if (flash) {
           delay(() => {
             try {
-              !gridApi.isDestroyed() && gridApi.flashCells({ rowNodes });
+              if (!gridApi.isDestroyed()) {
+                gridApi.flashCells({ rowNodes });
+              }
             } catch {
               // ignore, flash cells sometimes throws errors as nodes have gone out of scope
             }
@@ -749,7 +752,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
             // }
 
             // This is needed to trigger postSortRowsHook
-            !gridApi.isDestroyed && gridApi.refreshClientSideRowModel();
+            if (!gridApi.isDestroyed) {
+              gridApi.refreshClientSideRowModel();
+            }
           }
 
           void (async () => {
@@ -782,7 +787,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     () =>
       debounce((rowNodes?: IRowNode[]) => {
         try {
-          gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
+          if (gridApi) {
+            gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
+          }
         } catch (ex) {
           console.error(ex);
         }
@@ -812,7 +819,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           const postHash = hasFocusedCell && getDisplayedRowsHash();
           // Ag-grid has a bug where if a focused cell comes into view after a filter the filter loses focus
           // So the focus is cleared to prevent this
-          preHash !== postHash && gridApi.clearFocusedCell();
+          if (preHash !== postHash) {
+            gridApi.clearFocusedCell();
+          }
         }
       }, 200),
     [gridApi],
@@ -864,7 +873,9 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
     const visibleColumnsContainsAFlex = newVisibleColumns.some(isFlexColumn);
     if (!visibleColumnsContainsAFlex) {
       const fillerColumn = getColumns(isGridCellFiller)[0];
-      fillerColumn && newVisibleColumns.push(fillerColumn);
+      if (fillerColumn) {
+        newVisibleColumns.push(fillerColumn);
+      }
     }
     gridApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
 

package/src/lui/ActionButton.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .ActionButton {
   display: flex;

package/src/lui/ActionButton.tsx

@@ -50,7 +50,11 @@ export const ActionButton = ({
 
   useEffect(() => {
     if (inProgress == lastInProgress) return;
-    inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+    if (inProgress) {
+      setLocalInProgress(true);
+    } else {
+      setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+    }
   }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
 
   const buttonText = (

package/src/lui/FormError.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .FormError {
   display: flex;

package/src/lui/TextAreaInput.tsx

@@ -45,7 +45,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
                 e.currentTarget.focus();
                 e.currentTarget.selectionStart = e.currentTarget.value.length;
               }
-              props.onMouseEnter && props.onMouseEnter(e);
+              props.onMouseEnter?.(e);
             }}
             data-allowtabtosave={props.allowTabToSave}
           >