@linzjs/step-ag-grid 31.2.5 → 32.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "31.2.5",
+  "version": "32.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -37,9 +37,9 @@
     "ag-grid-react": "34.3.1",
     "clsx": "^2.1.1",
     "debounce-promise": "^3.1.2",
-    "matcher": "^5.0.0",
+    "matcher": "^6.0.0",
     "natsort": "^2.0.3",
-    "react-transition-state": "^2.3.1",
+    "react-transition-state": "^2.4.0",
     "usehooks-ts": "^3.1.1"
   },
   "scripts": {
@@ -75,51 +75,50 @@
     ]
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@linzjs/lui": "^24.16.0",
-    "@linzjs/windows": "^9.5.6",
-    "@rollup/plugin-commonjs": "^28.0.9",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@linzjs/lui": "^24.17.0",
+    "@linzjs/windows": "^11.2.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^9.1.20",
-    "@storybook/addon-links": "^9.1.20",
-    "@storybook/react": "^9.1.20",
-    "@storybook/react-vite": "^9.1.20",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/react": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/debounce-promise": "^3.1.9",
     "@types/jest": "^30.0.0",
-    "@types/jsdom": "^28.0.1",
+    "@types/jsdom": "^28.0.3",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.19.2",
+    "@types/node": "^24.13.2",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react-swc": "^3.11.0",
-    "@vitest/ui": "^3.2.4",
-    "chromatic": "^13.3.4",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/ui": "^4.1.9",
+    "chromatic": "^17.6.0",
     "cross-env": "^10.1.0",
     "husky": "^9.1.7",
-    "jsdom": "28.1.0",
+    "jsdom": "29.1.1",
     "lodash-es": "^4.18.1",
     "npm-run-all": "^4.1.5",
-    "oxfmt": "^0.44.0",
-    "oxlint": "^1.59.0",
-    "postcss": "^8.5.8",
+    "oxfmt": "^0.56.0",
+    "oxlint": "^1.71.0",
+    "postcss": "^8.5.15",
     "postcss-scss": "^4.0.9",
-    "react": ">=18",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.60.1",
+    "react": ">=19",
+    "react-dom": "^19.2.7",
+    "rollup": "^4.62.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.37.0",
-    "sass": "^1.96.0",
-    "storybook": "^9.1.20",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.2",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
+    "sass": "^1.101.0",
+    "storybook": "^10.4.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9"
   },
   "husky": {
     "hooks": {

package/src/components/gridHook/useGridRangeSelection.ts

@@ -24,7 +24,7 @@ export const useGridRangeSelection = <TData extends GridBaseRow>({
   rangeSortedNodesRef,
 }: {
   enableRangeSelection: boolean;
-  gridDivRef: RefObject<HTMLDivElement>;
+  gridDivRef: RefObject<HTMLDivElement | null>;
   rangeStartRef: MutableRefObject<CellLocation | null>;
   rangeEndRef: MutableRefObject<CellLocation | null>;
   hasSelectedMoreThanOneCellRef: MutableRefObject<boolean>;

package/src/components/gridPopoverEdit/GridEditBoolean.tsx

@@ -1,17 +1,20 @@
-import { CellFocusedEvent } from 'ag-grid-community';
+import { CellFocusedEvent, IRowNode } from 'ag-grid-community';
 import { CustomCellEditorProps } from 'ag-grid-react';
 import clsx from 'clsx';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
+import { useGridContext } from '../../contexts/GridContext';
 import { fnOrVar } from '../../utils/util';
 import { clickInputWhenContainingCellClicked } from '../clickInputWhenContainingCellClicked';
 import { CellEditorCommon, GridCell } from '../GridCell';
 import { GenericCellColDef } from '../gridRender';
 import { ColDefT, GridBaseRow } from '../types';
+import { useSharedInterval } from '../../utils/useSharedInterval';
 
 const BooleanCellRenderer = (props: CustomCellEditorProps) => {
-  const { onValueChange, value, api, node, column, colDef, data } = props;
+  const { onValueChange, value, api, node, column, colDef, data, eGridCell } = props;
   const inputRef = useRef<HTMLInputElement>(null);
+  const { updatingCells, redrawRows, resetFocusedCellAfterCellEditing, prePopupOps } = useGridContext();
 
   useEffect(() => {
     const checkFocus = (event: CellFocusedEvent) => {
@@ -20,16 +23,67 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
       }
     };
     api.addEventListener('cellFocused', checkFocus);
-    return () => {
-      api.removeEventListener('cellFocused', checkFocus);
-    };
+    return () => void api.removeEventListener('cellFocused', checkFocus);
   }, [api, column, node.rowIndex]);
 
   const isDisabled = !fnOrVar(colDef?.editable, props);
 
+  const toggleCheckbox = useCallback(() => {
+    if (!onValueChange) {
+      return;
+    }
+
+    const params = props?.colDef?.cellEditorParams as GridEditBooleanEditorProps<any> | undefined;
+    if (!params) {
+      return;
+    }
+
+    const nodes: IRowNode[] = [];
+    api.forEachNode((n) => {
+      if (n.data.id === data.id) {
+        nodes.push(n);
+      }
+    });
+
+    prePopupOps();
+
+    const checked = !value;
+    onValueChange(checked);
+    const field = props.colDef?.field ?? props.colDef?.colId ?? '';
+    const selectedRows = nodes.map((node) => node.data);
+    void updatingCells({ selectedRows, field }, async () => {
+      redrawRows(nodes);
+      return params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked });
+    }).finally(() => {
+      resetFocusedCellAfterCellEditing();
+    });
+  }, [
+    api,
+    data.id,
+    onValueChange,
+    prePopupOps,
+    props.colDef?.cellEditorParams,
+    props.colDef?.colId,
+    props.colDef?.field,
+    redrawRows,
+    resetFocusedCellAfterCellEditing,
+    updatingCells,
+    value,
+  ]);
+
+  useSharedInterval(() => {
+    if (isDisabled) {
+      return;
+    }
+    const cell: HTMLElement | null = eGridCell?.querySelector('.ag-cell-focus .grid-edit-boolean input.ag-checkbox-input:not(:disabled)');
+    if (cell && cell.ownerDocument.activeElement !== cell) {
+      cell.focus();
+    }
+  });
+
   return (
     <div
-      className={clsx('ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {
+      className={clsx('grid-edit-boolean ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {
         'ag-checked': props.value,
         'ag-disabled': isDisabled,
       })}
@@ -43,23 +97,7 @@ const BooleanCellRenderer = (props: CustomCellEditorProps) => {
         onChange={() => {}}
         onClick={(e) => {
           e.stopPropagation();
-          // cell has to be in edit mode
-          // if in non-edit mode clickInputWhenContainingCellClicked will click to put it in edit mode
-          if (!onValueChange) return;
-          const params = props?.colDef?.cellEditorParams as GridEditBooleanEditorProps<any> | undefined;
-          if (!params) return;
-          // The data cannot be relied upon if grid changed whilst editing, data will be stale
-          // So I get the data from the node itself which will be up to date.
-          const selectedRows: { id: string | number }[] = [];
-          api.forEachNode((n) => {
-            if (n.data.id === data.id) {
-              selectedRows.push(n.data);
-            }
-          });
-
-          const checked = !value;
-          onValueChange(checked);
-          void params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked });
+          toggleCheckbox();
         }}
       />
     </div>
@@ -78,7 +116,7 @@ export const GridEditBoolean = <TData extends GridBaseRow>(
   colDef: GenericCellColDef<TData, boolean>,
   editorProps: GridEditBooleanEditorProps<TData>,
 ): ColDefT<TData> => {
-  return GridCell({
+  return GridCell<TData>({
     minWidth: 64,
     maxWidth: 64,
     cellRenderer: BooleanCellRenderer as any,
@@ -88,7 +126,7 @@ export const GridEditBoolean = <TData extends GridBaseRow>(
     singleClickEdit: true,
     resizable: false,
     editable: true,
-    cellClass: 'GridCellAlignCenter',
+    cellClass: 'GridCellAlignCenter GridCellEditableWithNoPopup',
     headerClass: 'GridHeaderAlignCenter',
     ...colDef,
   });

package/src/contexts/GridContextProvider.tsx

@@ -646,17 +646,21 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
         return true;
       }
 
-      const focusedCellIsEditable = () => {
+      /**
+       * @returns true if editable with a popup, false if editable without popup, null if not editable
+       */
+      const focusedCellIsEditable = (): true | false | null => {
         const focusedCell = gridApi.isDestroyed() ? null : gridApi.getFocusedCell();
         const nextColumn = focusedCell?.column;
         const nextColDef = nextColumn?.getColDef();
         const rowNode = focusedCell && gridApi.getDisplayedRowAtIndex(focusedCell?.rowIndex);
+        const popupable = String(nextColDef?.cellClass).indexOf("GridCellEditableWithNoPopup") === -1
         return (
           !!(rowNode && nextColumn && nextColDef) &&
           nextColumn.isCellEditable(rowNode) &&
           !nextColDef.cellEditorParams?.preventAutoEdit &&
           !nextColDef.cellRendererParams?.editAction
-        );
+        ) ? popupable : null
       };
 
       // Just in case I've missed something, we don't want the loop to hang everything
@@ -692,7 +696,10 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
           }
         }
 
-        if (focusedCellIsEditable()) {
+        // checkbox cells are editable but don't have a popup
+        // we need to end bulk editing and just select the cell
+        const editable = focusedCellIsEditable()
+        if (editable !== null) {
           const focusedCell = gridApi.getFocusedCell();
           if (focusedCell) {
             const rowNode = gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
@@ -700,8 +707,14 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
             if (rowId == null) {
               return false;
             }
-            await startCellEditing({ rowId, colId: focusedCell.column.getColId() });
-            return true;
+            if (editable) {
+              await startCellEditing({rowId, colId: focusedCell.column.getColId()});
+              // Continue bulk edit
+              return true;
+            } else {
+              // This will terminate bulk editing as there was no popup editor
+              return false;
+            }
           }
         }
       }

package/src/react-app-env.d.ts

@@ -1 +1,4 @@
-/// <reference types="react-scripts" />
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -7,7 +7,7 @@ import { Meta, StoryFn } from '@storybook/react-vite';
 import {
   createCheckboxMultiFilterParams,
   GridFilterColumnsMultiSelect,
-} from 'components/gridFilter/GridFilterColumnsMultiSelect';
+} from '../../components/gridFilter/GridFilterColumnsMultiSelect';
 import { useMemo, useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -4,8 +4,8 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverEditDropDown } from 'components/gridPopoverEdit/GridPopoverEditDropDown';
-import { GridPopoverTextArea } from 'components/gridPopoverEdit/GridPopoverTextArea';
+import { GridPopoverEditDropDown } from '../../components/gridPopoverEdit/GridPopoverEditDropDown';
+import { GridPopoverTextArea } from '../../components/gridPopoverEdit/GridPopoverTextArea';
 import { useMemo, useState } from 'react';
 
 import {

package/src/stories/grid/GridPopoutEditBoolean.stories.tsx

@@ -13,7 +13,10 @@ import {
   GridCell,
   GridContextProvider,
   GridEditBoolean,
+  GridPopoverEditDropDown,
   GridUpdatingContextProvider,
+  primitiveToSelectOption,
+  wait,
 } from '../..';
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 import { IFormTestRow } from './FormTest';
@@ -63,7 +66,40 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
           field: 'bold',
         },
         {
-          onClick: ({ selectedRowIds, checked }) => {
+          onClick: async ({ selectedRowIds, checked }) => {
+            await wait(1000);
+            setRowData((rowData) => {
+              // eslint-disable-next-line no-console
+              console.log('onchange', selectedRowIds, checked);
+              return rowData.map((row) => (selectedRowIds.includes(row.id) ? { ...row, bold: checked } : row));
+            });
+            return true;
+          },
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
+          field: 'name',
+          headerName: 'Name',
+        },
+        {
+          multiEdit: false,
+          editorParams: {
+            filtered: 'local',
+            filterPlaceholder: 'Filter this',
+            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'].map(
+              primitiveToSelectOption,
+            ),
+          },
+        },
+      ),
+      GridEditBoolean(
+        {
+          colId: 'bold2',
+          field: 'bold',
+        },
+        {
+          onClick: async ({ selectedRowIds, checked }) => {
             setRowData((rowData) => {
               // eslint-disable-next-line no-console
               console.log('onchange', selectedRowIds, checked);
@@ -78,14 +114,17 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
   );
 
   return (
-    <Grid
-      columnDefs={columnDefs}
-      rowData={rowData}
-      selectable={false}
-      singleClickEdit={true}
-      rowSelection="single"
-      domLayout={'autoHeight'}
-    />
+    <>
+      <Grid
+        theme={'ag-theme-step-view-list-default'}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        selectable={false}
+        singleClickEdit={true}
+        rowSelection="single"
+        domLayout={'autoHeight'}
+      />
+    </>
   );
 };
 

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import * as test from 'storybook/test';
 import { expect, userEvent, within } from 'storybook/test';

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormStatic/GridFormDropDown.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormDropDown, GridFormDropDownProps, MenuHeaderItem } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormEditBearing.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import {

package/src/stories/grid/gridFormStatic/GridFormEditBearingCorrection.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import {

package/src/stories/grid/gridFormStatic/GridFormMessage.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridContextProvider, GridFormMessage, GridFormMessageProps } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormMultiSelect.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormMultiSelect, GridFormMultiSelectProps } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormPopoverMenu.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import {

package/src/stories/grid/gridFormStatic/GridFormTextArea.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormTextInput.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormTextInput, GridFormTextInputProps } from '../../..';

package/src/styles/GridLoadableCell.scss

@@ -1,6 +1,10 @@
 .GridLoadableCell-container {
   width: 100%;
-  display: flex;
   align-items: center;
+  display: flex;
   margin-bottom: 6px;
 }
+
+.GridCellAlignCenter .GridLoadableCell-container {
+  justify-content: center;
+}

package/src/utils/useSharedInterval.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from 'usehooks-ts';
+
+type Callback = () => void;
+
+const isNode = typeof process !== 'undefined' && process.env.NODE_ENV === 'test';
+
+let sharedIntervalId: ReturnType<typeof setInterval> | null = null;
+const callbacks = new Set<Callback>();
+
+const startSharedInterval = () => {
+  if (isNode || sharedIntervalId !== null) {
+    return;
+  }
+  sharedIntervalId = setInterval(() => {
+    callbacks.forEach((cb) => {
+      try {
+        cb();
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }, 100);
+}
+
+const stopSharedInterval = () => {
+  if (sharedIntervalId === null) {
+    return;
+  }
+  clearInterval(sharedIntervalId);
+  sharedIntervalId = null;
+}
+
+/**
+ * Like useInterval, but all callers share a single 100ms interval.
+ * Each callback is isolated in a try/catch so a throwing callback won't prevent others from running.
+ */
+export const useSharedInterval = (callback: () => void) => {
+  const savedCallback = useRef(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const cb = () => savedCallback.current();
+    callbacks.add(cb);
+    startSharedInterval();
+
+    return () => {
+      callbacks.delete(cb);
+      if (callbacks.size === 0) {
+        stopSharedInterval();
+      }
+    };
+  }, []);
+}