@linzjs/step-ag-grid 15.1.2 → 16.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "15.1.2",
+  "version": "16.0.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -56,8 +56,8 @@
     "test": "jest",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "chromatic --exit-zero-on-changes",
     "semantic-release": "semantic-release"
@@ -86,32 +86,33 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/test-runner": "^0.9.4",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@storybook/addon-essentials": "^7.2.2",
+    "@storybook/addon-interactions": "^7.2.2",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/preset-create-react-app": "^7.2.2",
+    "@storybook/react": "^7.2.2",
+    "@storybook/react-webpack5": "^7.2.2",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/debounce-promise": "^3.1.6",
     "@types/jest": "^29.5.2",
-    "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.2.5",
-    "@types/react": "^17.0.60",
-    "@types/react-dom": "^17.0.20",
-    "@types/uuid": "^9.0.1",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "^20.4.9",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/parser": "^5.60.0",
     "babel-jest": "^29.5.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.18.0",
+    "chromatic": "^6.21.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
+    "css-loader": "^6.8.1",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
@@ -122,8 +123,9 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.11.0",
-    "jest": "^29.5.0",
+    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-testing-library": "^5.11.1",
+    "jest": "^29.6.2",
     "jest-canvas-mock": "^2.5.1",
     "jest-environment-jsdom": "^29.5.0",
     "jest-expect-message": "^1.1.3",
@@ -143,6 +145,8 @@
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
     "semantic-release": "^19.0.5",
+    "storybook": "^7.2.2",
+    "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",

package/src/components/Grid.tsx

@@ -1,7 +1,7 @@
 import { CellClickedEvent, ColDef, ColGroupDef, ColumnResizedEvent, ModelUpdatedEvent } from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
-import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
+import { AgGridEvent, CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { defer, difference, isEmpty, last, omit, xorBy } from "lodash-es";
@@ -208,7 +208,7 @@ export const Grid = ({
       if (params.autoSelectFirstRow) {
         selectRowsById([firstRowId]);
       } else {
-        focusByRowById(firstRowId);
+        focusByRowById(firstRowId, true);
       }
     }
   }, [
@@ -357,6 +357,7 @@ export const Grid = ({
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
       setApis(event.api, event.columnApi, dataTestId);
+      event.api.showNoRowsOverlay();
       synchroniseExternallySelectedItemsToGrid();
     },
     [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid],
@@ -389,19 +390,8 @@ export const Grid = ({
   /**
    * Show/hide no rows overlay when model changes.
    */
-  const isShowingNoRowsOverlay = useRef(false);
   const onModelUpdated = useCallback((event: ModelUpdatedEvent) => {
-    if (event.api.getDisplayedRowCount() === 0) {
-      if (!isShowingNoRowsOverlay.current) {
-        event.api.showNoRowsOverlay();
-        isShowingNoRowsOverlay.current = true;
-      }
-    } else {
-      if (isShowingNoRowsOverlay.current) {
-        event.api.hideOverlay();
-        isShowingNoRowsOverlay.current = false;
-      }
-    }
+    event.api.showNoRowsOverlay();
   }, []);
 
   /**
@@ -622,10 +612,16 @@ export const Grid = ({
           defaultColDef={{ minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }}
           columnDefs={columnDefsAdjusted}
           rowData={params.rowData}
-          noRowsOverlayComponent={GridNoRowsOverlay}
-          noRowsOverlayComponentParams={{
-            rowData: params.rowData,
-            noRowsOverlayText: params.noRowsOverlayText,
+          noRowsOverlayComponent={(event: AgGridEvent) => {
+            let rowCount = 0;
+            event.api.forEachNode(() => rowCount++);
+            return (
+              <GridNoRowsOverlay
+                rowCount={rowCount}
+                filteredRowCount={event.api.getDisplayedRowCount()}
+                noRowsOverlayText={params.noRowsOverlayText}
+              />
+            );
           }}
           onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}

package/src/components/GridIcon.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { ReactElement } from "react";
 
 import { LuiIcon } from "@linzjs/lui";
 import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
@@ -9,7 +10,7 @@ export const GridIcon = (props: {
   size?: IconSize;
   disabled?: boolean;
   className?: string;
-}): JSX.Element => (
+}): ReactElement => (
   <LuiIcon
     name={props.icon}
     title={props.title}

package/src/components/GridNoRowsOverlay.tsx

@@ -1,12 +1,9 @@
-import { isEmpty } from "lodash-es";
-
 export const GridNoRowsOverlay = (params: {
-  rowData: any[] | null | undefined;
+  rowCount: number | undefined | null;
+  filteredRowCount: number;
   noRowsOverlayText: string | undefined;
-}) => (
-  <span>
-    {isEmpty(params.rowData)
-      ? params.noRowsOverlayText ?? "There are currently no rows"
-      : "All rows have been filtered"}
-  </span>
-);
+}) => {
+  if (params.rowCount === 0) return <span>{params.noRowsOverlayText ?? "There are currently no rows"}</span>;
+  if (params.filteredRowCount === 0) return <span>All rows have been filtered</span>;
+  return <span />;
+};

package/src/contexts/GridContext.tsx

@@ -36,7 +36,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   selectRowsByIdWithFlash: (rowIds?: number[]) => void;
   flashRows: (rowIds?: number[]) => void;
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
-  focusByRowById: (rowId: number) => void;
+  focusByRowById: (rowId: number, ifNoCellFocused?: boolean) => void;
   ensureRowVisible: (id: number | string) => boolean;
   ensureSelectedRowIsVisible: () => void;
   getFirstRowId: () => number;

package/src/contexts/GridContextProvider.tsx

@@ -218,10 +218,19 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
    */
   const _selectRowsWithOptionalFlash = useCallback(
     (
-      rowIds: number[] | undefined,
-      select: boolean,
-      flash: boolean,
-      retryCount = 15, // We retry for approximately 5x200ms=1s
+      {
+        rowIds,
+        select,
+        flash,
+        ifNoCellFocused = false,
+        retryCount = 15,
+      }: {
+        rowIds: number[] | undefined;
+        select: boolean;
+        flash: boolean;
+        ifNoCellFocused?: boolean;
+        retryCount?: number;
+      }, // We retry for approximately 5x200ms=1s
     ) => {
       return gridApiOp((gridApi) => {
         const rowNodes = rowIds ? _rowIdsToNodes(rowIds) : _getNewNodes();
@@ -230,7 +239,10 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
         const gridHasNotUpdated = gridRowIdsNotUpdatedYet || gridRowIdsNotChangedYet;
         // After retry count expires we give-up and deselect all rows, then select any subset of rows that have updated
         if (gridHasNotUpdated && retryCount > 0) {
-          delay(() => _selectRowsWithOptionalFlash(rowIds, select, flash, retryCount - 1), 250);
+          delay(
+            () => _selectRowsWithOptionalFlash({ rowIds, select, flash, ifNoCellFocused, retryCount: retryCount - 1 }),
+            250,
+          );
           return;
         }
 
@@ -249,7 +261,13 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
               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 && defer(() => isEmpty(gridApi.getEditingCells()) && gridApi.setFocusedCell(rowIndex, colId));
+              colId &&
+                delay(() => {
+                  if (isEmpty(gridApi.getEditingCells()) && (!ifNoCellFocused || gridApi.getFocusedCell() == null)) {
+                    // ifNoCellFocused
+                    gridApi.setFocusedCell(rowIndex, colId);
+                  }
+                }, 100);
             }
           }
         }
@@ -278,17 +296,17 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
   );
 
   const selectRowsById = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, false),
+    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: false }),
     [_selectRowsWithOptionalFlash],
   );
 
   const selectRowsByIdWithFlash = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, true),
+    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: true, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
   const flashRows = useCallback(
-    (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, false, true),
+    (rowIds?: number[]) => _selectRowsWithOptionalFlash({ rowIds, select: false, flash: true }),
     [_selectRowsWithOptionalFlash],
   );
 
@@ -296,7 +314,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     async (fn: () => Promise<any>) => {
       beforeUpdate();
       await fn();
-      _selectRowsWithOptionalFlash(undefined, true, false);
+      _selectRowsWithOptionalFlash({ rowIds: undefined, select: true, flash: false });
     },
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
@@ -305,7 +323,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     async (fn: () => Promise<any>) => {
       beforeUpdate();
       await fn();
-      _selectRowsWithOptionalFlash(undefined, true, true);
+      _selectRowsWithOptionalFlash({ rowIds: undefined, select: true, flash: true });
     },
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
@@ -314,13 +332,14 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: GridCont
     async (fn: () => Promise<any>) => {
       beforeUpdate();
       await fn();
-      _selectRowsWithOptionalFlash(undefined, false, true);
+      _selectRowsWithOptionalFlash({ rowIds: undefined, select: false, flash: true });
     },
     [_selectRowsWithOptionalFlash, beforeUpdate],
   );
 
   const focusByRowById = useCallback(
-    (rowId: number) => _selectRowsWithOptionalFlash([rowId], false, false),
+    (rowId: number, ifNoCellFocused?: boolean) =>
+      _selectRowsWithOptionalFlash({ rowIds: [rowId], select: false, flash: false, ifNoCellFocused }),
     [_selectRowsWithOptionalFlash],
   );
 

package/src/lui/ActionButton.tsx

@@ -1,3 +1,5 @@
+import "./ActionButton.scss";
+
 import clsx from "clsx";
 import { CSSProperties, useEffect, useState } from "react";
 
@@ -5,7 +7,6 @@ import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
 import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 
-import "./ActionButton.scss";
 import { usePrevious } from "./reactUtils";
 import { useStateDeferred } from "./stateDeferredHook";
 

package/src/lui/TextInputFormatted.tsx

@@ -1,9 +1,10 @@
+import "./TextInputFormatted.scss";
+
 import clsx from "clsx";
 import { omit } from "lodash-es";
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 
 import { FormError } from "./FormError";
-import "./TextInputFormatted.scss";
 
 export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   // overrides value in base class to be string type only

package/src/lui/reactUtils.test.tsx

@@ -1,5 +1,6 @@
 import { screen } from "@testing-library/dom";
-import { act, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { useEffect, useState } from "react";
 
 import { usePrevious } from "./reactUtils";
@@ -39,10 +40,10 @@ describe("usePrevious", () => {
 
     expect(extPrevious).toBeUndefined();
 
-    act(() => button.click());
+    await userEvent.click(button);
     expect(extPrevious).toBe(false);
 
-    act(() => button.click());
+    await userEvent.click(button);
     expect(extPrevious).toBe(true);
   });
 });

package/src/stories/components/ActionButton.stories.tsx

@@ -1,8 +1,9 @@
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useCallback } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import { ActionButton } from "../../lui/ActionButton";
 import { wait } from "../../utils/util";

package/src/stories/grid/FormTest.tsx

@@ -1,9 +1,10 @@
+import "./FormTest.scss";
+
 import { useCallback, useState } from "react";
 
 import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 
 import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from "../..";
-import "./FormTest.scss";
 
 export interface IFormTestRow {
   id: number;

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -1,8 +1,11 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -16,26 +19,13 @@ import {
   GridUpdatingContextProvider,
   GridWrapper,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
   component: Grid,
   decorators: [
     (Story) => (
-      <div
-        style={{
-          border: "1px solid #eee",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          maxHeight: 500,
-          maxWidth: "100%",
-          minWidth: "480px",
-          padding: "1em",
-        }}
-      >
+      <div style={{ width: 1024, height: 400, display: "flex" }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -1,9 +1,10 @@
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { expect } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { within } from "@storybook/testing-library";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import { GridNoRowsOverlay } from "../../components";
 
@@ -19,7 +20,8 @@ const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (par
 
 export const GridNoRowsEmpty = GridNoRowsOverlayTemplate.bind({});
 GridNoRowsEmpty.args = {
-  rowData: [],
+  rowCount: 0,
+  filteredRowCount: 0,
 };
 GridNoRowsEmpty.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
@@ -28,7 +30,8 @@ GridNoRowsEmpty.play = async ({ canvasElement }) => {
 
 export const GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
 GridNoRowsFiltered.args = {
-  rowData: [{}],
+  rowCount: 1,
+  filteredRowCount: 0,
 };
 GridNoRowsFiltered.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);

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

@@ -1,3 +1,7 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
@@ -5,7 +9,6 @@ import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextA
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -20,8 +23,6 @@ import {
   MenuOption,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -1,8 +1,11 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { ReactElement, useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ActionButton,
@@ -17,8 +20,6 @@ import {
   MenuItem,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 import { IFormTestRow } from "./FormTest";
 
 export default {

package/src/stories/grid/GridPopoutEditGeneric.stories.tsx

@@ -1,12 +1,13 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 import { FormTest, IFormTestRow } from "./FormTest";
 
 export default {

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -1,8 +1,11 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ActionButton,
@@ -23,8 +26,6 @@ import {
   isFloat,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 import { IFormTestRow } from "./FormTest";
 
 export default {
@@ -172,7 +173,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
               {
                 label: "Delete",
                 action: async ({ selectedRows }) => {
-                  await wait(1500);
+                  await wait(1000);
                   setRowData(rowData.filter((data) => !selectedRows.some((row) => row.id == data.id)));
                 },
               },

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -1,8 +1,11 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -20,8 +23,6 @@ import {
   GridWrapper,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -1,8 +1,11 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -25,8 +28,6 @@ import {
   MenuSeparatorString,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -1,9 +1,12 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { isEmpty, partition } from "lodash-es";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -18,8 +21,6 @@ import {
   MultiSelectOption,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",

package/src/stories/grid/GridPopoverEditMultiSelectGrid.stories.tsx

@@ -1,15 +1,16 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { countBy, mergeWith, pull, range, union } from "lodash-es";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from "../..";
 import { MultiSelectGridOption } from "../../components/gridForm/GridFormMultiSelectGrid";
 import { GridPopoutEditMultiSelectGrid } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelectGrid";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",