@linzjs/step-ag-grid 17.7.0 → 17.9.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "17.7.0",
+  "version": "17.9.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -28,23 +28,24 @@
   },
   "peerDependencies": {
     "@linzjs/lui": ">=18",
-    "ag-grid-community": ">=28",
-    "ag-grid-react": ">=28",
+    "ag-grid-community": ">=29",
+    "ag-grid-react": ">=29",
     "lodash-es": ">=4",
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
     "@linzjs/lui": ">=18",
-    "ag-grid-community": ">=28",
-    "ag-grid-react": ">=28",
+    "ag-grid-community": ">=29",
+    "ag-grid-react": ">=29",
     "clsx": "^2.0.0",
     "debounce-promise": "^3.1.2",
     "lodash-es": ">=4",
     "matcher": "^5.0.0",
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": ">=18",
+    "react-dom": ">=18",
     "react-transition-state": "^2.1.1",
+    "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.1"
   },
   "scripts": {
@@ -83,71 +84,71 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.2.3",
-    "@storybook/addon-interactions": "^7.2.3",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/preset-create-react-app": "^7.2.3",
-    "@storybook/react": "^7.2.3",
-    "@storybook/react-webpack5": "^7.2.3",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/preset-create-react-app": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
     "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/dom": "^9.3.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.1",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
-    "@types/debounce-promise": "^3.1.6",
-    "@types/jest": "^29.5.3",
-    "@types/lodash-es": "^4.17.8",
-    "@types/node": "^18.17.5",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@types/uuid": "^9.0.2",
+    "@types/debounce-promise": "^3.1.7",
+    "@types/jest": "^29.5.5",
+    "@types/lodash-es": "^4.17.9",
+    "@types/node": "^18.18.4",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.11",
+    "@types/uuid": "^9.0.5",
     "@typescript-eslint/parser": "^5.62.0",
-    "babel-jest": "^29.6.2",
+    "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^6.24.1",
+    "chromatic": "^7.2.3",
     "conventional-changelog-conventionalcommits": "^6.1.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.47.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-deprecation": "^1.5.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-deprecation": "^1.6.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-testing-library": "^6.0.0",
-    "jest": "^29.6.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-testing-library": "^6.0.2",
+    "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
-    "postcss-scss": "^4.0.6",
+    "postcss-scss": "^4.0.9",
     "prettier": "^2.8.8",
     "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
-    "rollup": "^3.28.0",
-    "rollup-plugin-copy": "^3.4.0",
+    "rollup": "^4.0.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.35.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "1.66.1",
     "sass-loader": "^13.3.2",
-    "semantic-release": "^21.1.1",
-    "storybook": "^7.2.3",
+    "semantic-release": "^22.0.5",
+    "storybook": "^7.4.6",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.3",

package/src/components/Grid.tsx

@@ -23,10 +23,10 @@ import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { defer, difference, isEmpty, last, omit, xorBy } from "lodash-es";
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useInterval } from "usehooks-ts";
 
 import { GridContext } from "../contexts/GridContext";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
-import { useIntervalHook } from "../lui/timeoutHook";
 import { fnOrVar, isNotEmpty } from "../utils/util";
 import { GridNoRowsOverlay } from "./GridNoRowsOverlay";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
@@ -101,6 +101,8 @@ export interface GridProps {
    * Defaults to false.
    */
   singleClickEdit?: boolean;
+
+  loading?: boolean;
 }
 
 /**
@@ -116,7 +118,7 @@ export const Grid = ({
   contextMenuSelectRow = false,
   singleClickEdit = false,
   rowData,
-  rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined,
+  rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : 40,
   ...params
 }: GridProps): ReactElement => {
   const {
@@ -136,9 +138,11 @@ export const Grid = ({
     doesExternalFilterPass,
     setOnCellEditingComplete,
     getColDef,
+    showNoRowsOverlay,
+    prePopupOps,
+    stopEditing,
   } = useContext(GridContext);
   const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
-  const { prePopupOps } = useContext(GridContext);
 
   const gridDivRef = useRef<HTMLDivElement>(null);
   const lastSelectedIds = useRef<number[]>([]);
@@ -202,23 +206,20 @@ export const Grid = ({
   /**
    * Auto-size windows that had deferred auto-size
    */
-  useIntervalHook({
-    callback: () => {
-      // Check if window has been popped out and needs resize
-      const currentDocument = gridDivRef.current?.ownerDocument;
-      if (currentDocument !== lastOwnerDocumentRef.current) {
-        lastOwnerDocumentRef.current = currentDocument;
-        if (currentDocument) {
-          needsAutoSize.current = true;
-        }
-      }
-      if (needsAutoSize.current) {
-        needsAutoSize.current = false;
-        setInitialContentSize();
+  useInterval(() => {
+    // Check if window has been popped out and needs resize
+    const currentDocument = gridDivRef.current?.ownerDocument;
+    if (currentDocument !== lastOwnerDocumentRef.current) {
+      lastOwnerDocumentRef.current = currentDocument;
+      if (currentDocument) {
+        needsAutoSize.current = true;
       }
-    },
-    timeoutMs: 200,
-  });
+    }
+    if (needsAutoSize.current) {
+      needsAutoSize.current = false;
+      setInitialContentSize();
+    }
+  }, 200);
 
   /**
    * On data load select the first row of the grid if required.
@@ -326,7 +327,11 @@ export const Grid = ({
   const columnDefs = useMemo((): (ColDef | ColGroupDef)[] => {
     const adjustColDefs = params.columnDefs.map((colDef) => {
       const colDefEditable = colDef.editable;
-      const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
+      const editable = combineEditables(
+        params.loading !== true && params.readOnly !== true,
+        params.defaultColDef?.editable,
+        colDefEditable,
+      );
       return {
         ...colDef,
         editable,
@@ -372,6 +377,7 @@ export const Grid = ({
     params.columnDefs,
     params.selectable,
     params.onRowDragEnd,
+    params.loading,
     params.readOnly,
     params.defaultColDef?.editable,
     selectColumnPinned,
@@ -569,6 +575,16 @@ export const Grid = ({
     }
   }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
 
+  const prevLoading = useRef(false);
+  useEffect(() => {
+    const newLoading = !rowData || params.loading === true;
+    if (newLoading && !prevLoading.current) {
+      stopEditing();
+      showNoRowsOverlay();
+    }
+    prevLoading.current = newLoading;
+  }, [params.loading, rowData, showNoRowsOverlay, stopEditing]);
+
   /**
    * Resize columns to fit if required on window/container resize
    */
@@ -611,12 +627,12 @@ export const Grid = ({
       const clientSideRowModel = event.api.getModel() as IClientSideRowModel;
 
       //position 0 means highlight above, 1 means below
-      const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode as RowNode<any>);
+      const position = clientSideRowModel.getHighlightPosition(event.y, event.overNode as RowNode);
 
       //we don't want to show the row highlight if it wouldn't result in the row moving
       const targetIndex = event.overIndex + position - (event.node.rowIndex < event.overIndex ? 1 : 0);
       if (event.node.rowIndex != targetIndex) {
-        clientSideRowModel.highlightRowAtPixel(event.node as RowNode<any>, event.y);
+        clientSideRowModel.highlightRowAtPixel(event.node as RowNode, event.y);
       }
     }
   }, []);
@@ -650,6 +666,8 @@ export const Grid = ({
   // This is setting a ref in the GridContext so won't be triggering an update loop
   setOnCellEditingComplete(params.onCellEditingComplete);
 
+  const headerRowCount = columnDefs.some((c) => (c as any).children) ? 2 : 1;
+
   return (
     <div
       data-testid={dataTestId}
@@ -692,7 +710,9 @@ export const Grid = ({
             event.api.forEachNode(() => rowCount++);
             return (
               <GridNoRowsOverlay
+                loading={!rowData || params.loading === true}
                 rowCount={rowCount}
+                headerRowHeight={headerRowCount * rowHeight}
                 filteredRowCount={event.api.getDisplayedRowCount()}
                 noRowsOverlayText={params.noRowsOverlayText}
               />

package/src/components/GridNoRowsOverlay.tsx

@@ -1,11 +1,35 @@
+import { LuiStatusSpinner } from "@linzjs/lui";
+
+const GridLoadingOverlayComponent = (props: { headerRowHeight: number }) => (
+  <div
+    style={{
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      position: "absolute",
+      backgroundColor: "rgba(255,255,255,0.5)",
+    }}
+  >
+    <div style={{ height: "100%", position: "relative" }}>
+      <div style={{ position: "absolute", left: 0, top: props.headerRowHeight, right: 0, bottom: 0 }}>
+        <LuiStatusSpinner />
+      </div>
+    </div>
+  </div>
+);
+
 export interface GridNoRowsOverlayProps {
+  loading: boolean;
   rowCount: number | undefined | null;
   filteredRowCount: number;
   noRowsOverlayText: string | undefined;
+  headerRowHeight: number;
 }
 
-export const GridNoRowsOverlay = (params: GridNoRowsOverlayProps) => {
-  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>;
+export const GridNoRowsOverlay = (props: GridNoRowsOverlayProps) => {
+  if (props.loading) return <GridLoadingOverlayComponent headerRowHeight={props.headerRowHeight} />;
+  if (props.rowCount === 0) return <div>{props.noRowsOverlayText ?? "There are currently no rows"}</div>;
+  if (props.filteredRowCount === 0) return <div>All rows have been filtered</div>;
   return <span />;
 };

package/src/contexts/GridContext.tsx

@@ -65,6 +65,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
   setInvisibleColumnIds: (colIds: string[]) => void;
   downloadCsv: (csvExportParams?: CsvExportParams) => void;
   setOnCellEditingComplete: (callback: (() => void) | undefined) => void;
+  showNoRowsOverlay: () => void;
 }
 
 export const GridContext = createContext<GridContextType<any>>({
@@ -201,6 +202,9 @@ export const GridContext = createContext<GridContextType<any>>({
   setOnCellEditingComplete: () => {
     console.error("no context provider for setOnCellEditingComplete");
   },
+  showNoRowsOverlay: () => {
+    console.error("no context provider for showLoadingOverlay");
+  },
 });
 
 export const useGridContext = <RowType extends GridBaseRow>() => useContext<GridContextType<RowType>>(GridContext);

package/src/contexts/GridContextProvider.tsx

@@ -659,6 +659,10 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
     [gridApi],
   );
 
+  const showNoRowsOverlay = useCallback((): void => {
+    gridApi?.showNoRowsOverlay();
+  }, [gridApi]);
+
   /**
    * Apply column visibility
    */
@@ -755,6 +759,7 @@ export const GridContextProvider = <RowType extends GridBaseRow>(props: PropsWit
         doesExternalFilterPass,
         downloadCsv,
         setOnCellEditingComplete,
+        showNoRowsOverlay,
       }}
     >
       {props.children}

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

@@ -1,6 +1,6 @@
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { Meta, StoryFn } from "@storybook/react";
 import { useCallback } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -12,9 +12,9 @@ export default {
   title: "Components / ActionButton",
   component: ActionButton,
   args: {},
-} as ComponentMeta<typeof ActionButton>;
+} as Meta<typeof ActionButton>;
 
-const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
+const ActionButtonTemplate: StoryFn<typeof ActionButton> = () => {
   const performAction = useCallback(async () => {
     await wait(1000);
   }, []);

package/src/stories/grid/GridDragRow.stories.tsx

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -47,7 +47,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 interface ITestRow {
   id: number;
@@ -58,7 +58,7 @@ interface ITestRow {
   dd: string;
 }
 
-const GridDragRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -35,7 +35,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 interface ITestRow {
   id: number;
@@ -43,7 +43,7 @@ interface ITestRow {
   desc: string;
 }
 
-const GridFilterButtonsTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridFilterButtonsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({

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

@@ -1,7 +1,7 @@
 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 { Meta, StoryFn } from "@storybook/react";
 import { within } from "@storybook/testing-library";
 
 import "@linzjs/lui/dist/fonts";
@@ -12,9 +12,9 @@ export default {
   title: "Components / Grids / GridNoRowsOverlay",
   component: GridNoRowsOverlay,
   args: {},
-} as ComponentMeta<typeof GridNoRowsOverlay>;
+} as Meta<typeof GridNoRowsOverlay>;
 
-const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (params: GridNoRowsOverlayProps) => {
+const GridNoRowsOverlayTemplate: StoryFn<typeof GridNoRowsOverlay> = (params: GridNoRowsOverlayProps) => {
   return <GridNoRowsOverlay {...params} />;
 };
 

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
@@ -44,7 +44,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 interface ITestRow {
   id: number;
@@ -53,7 +53,7 @@ interface ITestRow {
   desc: string;
 }
 
-const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { ReactElement, useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -41,7 +41,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 const ContextMenu = ({ clickedRow, colDef, close }: GridContextMenuComponentProps<IFormTestRow>): ReactElement => {
   const onClick = useCallback(() => {
@@ -64,7 +64,7 @@ const ContextMenu = ({ clickedRow, colDef, close }: GridContextMenuComponentProp
   );
 };
 
-const GridPopoutContextMenuTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const { selectRowsWithFlashDiff } = useContext(GridContext);
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [rowData, setRowData] = useState([

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -29,9 +29,9 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
-const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -47,9 +47,9 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
-const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const { selectRowsWithFlashDiff } = useContext(GridContext);
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [rowData, setRowData] = useState([

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -44,7 +44,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 interface ITestRow {
   id: number;
@@ -52,7 +52,7 @@ interface ITestRow {
   bearing: string | number | null;
 }
 
-const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridPopoverEditBearingTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -48,7 +48,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 interface ITestRow {
   id: number;
@@ -65,7 +65,7 @@ interface ICode {
   desc: string;
 }
 
-const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
   const optionsFn = useCallback(async (selectedRows: ITestRow[], filter?: string) => {

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

@@ -2,7 +2,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 { Meta, StoryFn } from "@storybook/react";
 import { isEmpty, partition } from "lodash-es";
 import { useMemo, useState } from "react";
 
@@ -41,7 +41,7 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Grid>;
+} as Meta<typeof Grid>;
 
 interface ITestRow {
   id: number;
@@ -50,7 +50,7 @@ interface ITestRow {
   position3: string | null;
 }
 
-const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
   const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {