@linzjs/step-ag-grid 31.2.5 → 32.1.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.1.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/Grid.tsx

@@ -44,7 +44,7 @@ import { useGridCopy } from './gridHook/useGridCopy';
 import { CellLocation, useGridRangeSelection } from './gridHook/useGridRangeSelection';
 import { GridNoRowsOverlay } from './GridNoRowsOverlay';
 import { usePostSortRowsHook } from './PostSortRowsHook';
-import { GridBaseRow, GridOnRowDragEndProps } from './types';
+import { ColDefT, GridBaseRow, GridOnRowDragEndProps } from './types';
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
@@ -471,13 +471,16 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
         };
       } else {
         const colDefEditable = colDef.editable;
+        const ignoreGridReadOnly = (colDef as ColDefT<TData>).ignoreGridReadOnly === true;
         const editable = combineEditables(
-          params.loading !== true && params.readOnly !== true,
+          params.loading !== true,
+          ignoreGridReadOnly ? true : params.readOnly !== true,
           params.defaultColDef?.editable,
           colDefEditable,
         );
         return {
-          ...colDef,
+          // ag-grid warns on unrecognised colDef properties, so it can't be left on the returned colDef
+          ...omit(colDef, 'ignoreGridReadOnly'),
           editable,
           cellClassRules: {
             ...colDef.cellClassRules,

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,4 +1,3 @@
-import { isEmpty } from 'lodash-es';
 import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -126,10 +125,15 @@ export const GridFormPopoverMenu = <TData extends GridBaseRow>(props: GridFormPo
     save,
   });
 
+  // isEmpty(options) alone isn't enough: options can be a non-empty array where every item is
+  // hidden (e.g. all actions unavailable in a given mode), which must also show "No actions"
+  // rather than rendering an empty menu body.
+  const hasVisibleOption = options?.some((item) => !item.hidden && item.label !== __isMenuSeparator__);
+
   return popoverWrapper(
     <ComponentLoadingWrapper loading={!options} className={'GridFormPopupMenu'}>
       <>
-        {isEmpty(options) ? (
+        {!hasVisibleOption ? (
           <MenuItem key={`GridPopoverMenu-empty`} className={'GridPopoverMenu-noOptions'} disabled={true}>
             No actions
           </MenuItem>

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/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -20,6 +20,9 @@ export const GridPopoverMenu = <TData extends GridBaseRow>(
       editable: colDef.editable != null ? colDef.editable : true,
       exportable: false,
       cellStyle: { flex: 1, justifyContent: 'center' },
+      suppressMovable: true,
+      lockPosition: 'right',
+      resizable: false,
       cellRenderer: GridRenderPopoutMenuCell,
       // Menus open on single click, this parameter is picked up in Grid.tsx
       singleClickEdit: true,

package/src/components/types.ts

@@ -20,6 +20,8 @@ export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
 // This is so that typescript retains the row type to pass to the GridCells
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
   editable?: boolean | EditableCallback<TData, ValueType>;
+  /** When true, this column's editable state ignores the grid-level `readOnly` prop. */
+  ignoreGridReadOnly?: boolean;
   valueGetter?: string | ValueGetterFunc<TData, ValueType>;
   valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
   cellRenderer?:

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/GridReadOnly.stories.tsx

@@ -5,6 +5,7 @@ import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { expect, fn, screen, userEvent } from 'storybook/test';
 
 import {
   ColDefT,
@@ -294,3 +295,71 @@ const GridFilterLessThan = (props: {
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});
 ReadOnlySingleSelection.play = waitForGridReady;
+
+interface IIgnoreReadOnlyRow {
+  id: number;
+  name: string;
+}
+
+const disabledMenuItemAction = fn();
+
+const IgnoreGridReadOnlyTemplate: StoryFn<typeof Grid<IIgnoreReadOnlyRow>> = () => {
+  const columnDefs: ColDefT<IIgnoreReadOnlyRow>[] = useMemo(
+    () => [
+      GridCell<IIgnoreReadOnlyRow, IIgnoreReadOnlyRow['name']>({ field: 'name', headerName: 'Name' }),
+      GridPopoverMenu(
+        { colId: 'blockedActions', headerName: 'Blocked actions' },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async () => [{ label: 'Should not open', action: async () => {} }],
+          },
+        },
+      ),
+      GridPopoverMenu(
+        { colId: 'alwaysEnabledActions', headerName: 'Always enabled actions', ignoreGridReadOnly: true },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async () => [
+              { label: 'Locate feature', action: async () => {} },
+              { label: 'Other action', action: disabledMenuItemAction, disabled: 'Not available in read-only mode' },
+            ],
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<IIgnoreReadOnlyRow[]>([{ id: 1, name: 'Row 1' }]);
+
+  return (
+    <GridWrapper maxHeight={200}>
+      <Grid data-testid={'readonly-ignore-flag'} readOnly columnDefs={columnDefs} rowData={rowData} />
+    </GridWrapper>
+  );
+};
+
+export const ReadOnlyIgnoreGridReadOnlyColumn = IgnoreGridReadOnlyTemplate.bind({});
+ReadOnlyIgnoreGridReadOnlyColumn.play = async (context) => {
+  await waitForGridReady(context);
+  const { canvasElement } = context;
+
+  const alwaysEnabledCell = canvasElement.querySelector('.ag-cell[col-id="alwaysEnabledActions"]');
+  await expect(alwaysEnabledCell).toBeInTheDocument();
+  await userEvent.click(alwaysEnabledCell as HTMLElement);
+  await expect(await screen.findByRole('menuitem', { name: 'Locate feature' })).toBeInTheDocument();
+
+  const disabledItem = await screen.findByRole('menuitem', { name: 'Other action' });
+  await expect(disabledItem).toHaveAttribute('aria-disabled', 'true');
+  await userEvent.click(disabledItem);
+  await expect(disabledMenuItemAction).not.toHaveBeenCalled();
+
+  await userEvent.keyboard('{Escape}');
+
+  const blockedCell = canvasElement.querySelector('.ag-cell[col-id="blockedActions"]');
+  await expect(blockedCell).toBeInTheDocument();
+  await userEvent.click(blockedCell as HTMLElement);
+  await expect(screen.queryByRole('menuitem', { name: 'Should not open' })).not.toBeInTheDocument();
+};

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';