@linzjs/step-ag-grid 2.1.2 → 2.2.0

package/src/lui/reactUtils.tsx

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+export const usePrevious = <T extends unknown>(value: T): T | undefined => {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};

package/src/lui/stateDeferredHook.tsx

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+import { useTimeoutHook } from "./timeoutHook";
+
+/**
+ * Defers state change up to a minimum time since last state change.
+ */
+export const useStateDeferred = <T extends unknown>(
+  initialValue: T,
+): [T, (v: T) => void, (v: T, w: number) => void] => {
+  const startTime = useRef<number>(0);
+  const timeoutHook = useTimeoutHook();
+
+  const [value, _setValue] = useState(initialValue);
+
+  const setValue = useCallback((newValue: T) => {
+    startTime.current = Date.now();
+    _setValue(newValue);
+  }, []);
+
+  const setValueDeferred = useCallback(
+    (newValue: T, minimumWaitTimeMs: number) => {
+      const waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);
+      timeoutHook(() => _setValue(newValue), waitTimeMs);
+    },
+    [timeoutHook],
+  );
+
+  return [value, setValue, setValueDeferred];
+};

package/src/lui/timeoutHook.test.tsx

@@ -0,0 +1,38 @@
+import { useTimeoutHook } from "./timeoutHook";
+import { render } from "@testing-library/react";
+
+describe("useTimeoutHook", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  const TestComponent = (props: { callback: () => void; repeat?: number }) => {
+    const timeoutHook = useTimeoutHook();
+    for (let i = 0; i < (props.repeat ?? 1); i++) {
+      timeoutHook(() => props.callback(), 1000);
+    }
+    return <div />;
+  };
+
+  test("invokes on timeout", async () => {
+    const callback = jest.fn();
+
+    render(<TestComponent callback={callback} />);
+    expect(callback).toHaveBeenCalledTimes(0);
+    jest.runAllTimers();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  test("invokes once on double invocation", async () => {
+    const callback = jest.fn();
+
+    render(<TestComponent callback={callback} repeat={2} />);
+    expect(callback).toHaveBeenCalledTimes(0);
+    jest.runAllTimers();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lui/timeoutHook.tsx

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+export const useTimeoutHook = () => {
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  /**
+   * Clear any pending timeouts.
+   */
+  const clearTimeouts = () => {
+    if (timeout.current) {
+      const tc = timeout.current;
+      timeout.current = undefined;
+      clearTimeout(tc);
+    }
+  };
+
+  /**
+   * Call this when your action has completed.
+   */
+  const invoke = useCallback((fn: () => void, waitTimeMs: number) => {
+    clearTimeouts();
+    timeout.current = setTimeout(fn, waitTimeMs);
+  }, []);
+
+  /**
+   * Clear timeout on loss of scope.
+   */
+  useEffect(() => {
+    return () => clearTimeouts();
+  }, []);
+
+  return invoke;
+};

package/src/react-menu3/components/ControlledMenu.tsx

@@ -13,7 +13,7 @@ import { createPortal } from "react-dom";
 import { MenuList } from "./MenuList";
 import { useBEM } from "../hooks";
 import { menuContainerClass, mergeProps, safeCall, isMenuOpen, getTransition, CloseReason, Keys } from "../utils";
-import { hasParentClass } from "@utils/util";
+import { hasParentClass } from "../../utils/util";
 import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from "../types";
 import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
 import { SettingsContext } from "../contexts/SettingsContext";

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

@@ -0,0 +1,33 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { ActionButton } from "../../lui/ActionButton";
+import { useCallback, useState } from "react";
+import { wait } from "../../utils/util";
+
+export default {
+  title: "Components / ButtonTextWithIcon",
+  component: ActionButton,
+  args: {},
+} as ComponentMeta<typeof ActionButton>;
+
+const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
+  const [inProgress, setInProgress] = useState(false);
+  const performAction = useCallback(async () => {
+    setInProgress(true);
+    await wait(1000);
+    setInProgress(false);
+  }, []);
+  return (
+    <ActionButton
+      icon={"ic_add"}
+      name={"Add new row"}
+      inProgressName={"Adding..."}
+      inProgress={inProgress}
+      onClick={performAction}
+    />
+  );
+};
+
+export const ActionButtonSimple = ActionButtonTemplate.bind({});

package/src/stories/{components → grid}/FormTest.tsx

@@ -2,10 +2,10 @@ import "./FormTest.scss";
 
 import { useCallback, useState } from "react";
 import { LuiTextInput } from "@linzjs/lui";
-import { wait } from "@utils/util";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
-import { useGridPopoverHook } from "@components/GridPopoverHook";
-import { GridBaseRow } from "@components/Grid";
+import { wait } from "../../utils/util";
+import { CellEditorCommon, CellParams } from "../../components/GridCell";
+import { useGridPopoverHook } from "../../components/GridPopoverHook";
+import { GridBaseRow } from "../../components/Grid";
 
 export interface IFormTestRow {
   id: number;

package/src/stories/{components → grid}/GridPopoutBearing.stories.tsx

@@ -5,15 +5,15 @@ import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useMemo, useState } from "react";
-import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "@contexts/GridContextProvider";
-import { Grid, GridProps } from "@components/Grid";
-import { ColDefT, GridCell } from "@components/GridCell";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { ColDefT, GridCell } from "../../components/GridCell";
 import {
   GridPopoverEditBearing,
   GridPopoverEditBearingCorrection,
-} from "@components/gridPopoverEdit/GridPopoverEditBearing";
-import { wait } from "@utils/util";
+} from "../../components/gridPopoverEdit/GridPopoverEditBearing";
+import { wait } from "../../utils/util";
 
 export default {
   title: "Components / Grids",
@@ -24,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -83,15 +83,11 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
-        { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
-        { id: 1002, bearing1: null, bearingCorrection: 355.1 },
-      ] as ITestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
+    { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
+    { id: 1002, bearing1: null, bearingCorrection: 355.1 },
+  ] as ITestRow[]);
 
   return (
     <Grid
@@ -100,6 +96,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridPopoutEditDropDown.stories.tsx

@@ -4,14 +4,14 @@ import "../../styles/index.scss";
 import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "@contexts/GridContextProvider";
-import { Grid, GridProps } from "@components/Grid";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
 import { useCallback, useMemo, useState } from "react";
-import { MenuHeaderItem, MenuSeparator, MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
-import { wait } from "@utils/util";
-import { ColDefT, GridCell } from "@components/GridCell";
-import { GridPopoverEditDropDown } from "@components/gridPopoverEdit/GridPopoverEditDropDown";
+import { MenuHeaderItem, MenuSeparator, MenuSeparatorString } from "../../components/gridForm/GridFormDropDown";
+import { wait } from "../../utils/util";
+import { ColDefT, GridCell } from "../../components/GridCell";
+import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
 
 export default {
   title: "Components / Grids",
@@ -22,7 +22,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -245,28 +245,24 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
     [optionsFn, optionsObjects],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        {
-          id: 1000,
-          position: "Tester",
-          position2: "1",
-          position3: "Tester",
-          position4: { code: "O1", desc: "Object One" },
-          code: "O1",
-        },
-        {
-          id: 1001,
-          position: "Developer",
-          position2: "2",
-          position3: "Developer",
-          position4: { code: "O2", desc: "Object Two" },
-          code: "O2",
-        },
-      ] as ITestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    {
+      id: 1000,
+      position: "Tester",
+      position2: "1",
+      position3: "Tester",
+      position4: { code: "O1", desc: "Object One" },
+      code: "O1",
+    },
+    {
+      id: 1001,
+      position: "Developer",
+      position2: "2",
+      position3: "Developer",
+      position4: { code: "O2", desc: "Object Two" },
+      code: "O2",
+    },
+  ] as ITestRow[]);
 
   return (
     <Grid
@@ -275,6 +271,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridPopoutEditGeneric.stories.tsx

@@ -4,11 +4,11 @@ import "../../styles/index.scss";
 import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "@contexts/GridContextProvider";
-import { Grid, GridProps } from "@components/Grid";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { ColDefT, GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "../../components/GridCell";
 import { FormTest, IFormTestRow } from "./FormTest";
 
 export default {
@@ -20,7 +20,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -57,14 +57,10 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
     [],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
-        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
-      ] as IFormTestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
+    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
+  ] as IFormTestRow[]);
 
   return (
     <Grid
@@ -73,6 +69,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridPopoutEditGenericTextArea.stories.tsx

@@ -4,15 +4,17 @@ import "../../styles/index.scss";
 import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "@contexts/GridContextProvider";
-import { Grid, GridProps } from "@components/Grid";
-import { useMemo, useState } from "react";
-import { ColDefT, GridCell } from "@components/GridCell";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useCallback, useMemo, useState } from "react";
+import { ColDefT, GridCell } from "../../components/GridCell";
 import { IFormTestRow } from "./FormTest";
-import { isFloat, wait } from "@utils/util";
-import { GridPopoverTextArea } from "@components/gridPopoverEdit/GridPopoverTextArea";
-import { GridPopoverTextInput } from "@components/gridPopoverEdit/GridPopoverTextInput";
+import { isFloat, wait } from "../../utils/util";
+import { GridPopoverTextArea } from "../../components/gridPopoverEdit/GridPopoverTextArea";
+import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopoverTextInput";
+import { ActionButton } from "../../lui/ActionButton";
+import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 
 export default {
   title: "Components / Grids",
@@ -23,7 +25,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -36,6 +38,11 @@ export default {
 
 const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [rowData, setRowData] = useState([
+    { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
+    { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
+  ] as IFormTestRow[]);
+
   const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
@@ -123,27 +130,59 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       ),
+      GridPopoverMenu(
+        {
+          headerName: "Delete menu",
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async (_) => [
+              {
+                label: "Delete",
+                action: async (selectedRows) => {
+                  await wait(1500);
+                  setRowData(rowData.filter((data) => !selectedRows.some((row) => row.id == data.id)));
+                  return true;
+                },
+                supportsMultiEdit: true,
+              },
+            ],
+          },
+        },
+      ),
     ],
-    [],
+    [rowData],
   );
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
-        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
-      ] as IFormTestRow[],
-    [],
-  );
+  const [inProgress, setInProgress] = useState(false);
+
+  const addRowAction = useCallback(async () => {
+    setInProgress(true);
+    await wait(1000);
+    const lastRow = rowData[rowData.length - 1];
+    setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
+    setInProgress(false);
+  }, [rowData]);
 
   return (
-    <Grid
-      {...props}
-      externalSelectedItems={externalSelectedItems}
-      setExternalSelectedItems={setExternalSelectedItems}
-      columnDefs={columnDefs}
-      rowData={rowData}
-    />
+    <>
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        domLayout={"autoHeight"}
+      />
+      <ActionButton
+        icon={"ic_add"}
+        name={"Add new row"}
+        inProgressName={"Adding..."}
+        inProgress={inProgress}
+        onClick={addRowAction}
+      />
+    </>
   );
 };
 

package/src/stories/{components → grid}/GridPopoutEditMultiSelect.stories.tsx

@@ -4,16 +4,16 @@ import "../../styles/index.scss";
 import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "@contexts/GridContextProvider";
-import { Grid, GridProps } from "@components/Grid";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { MenuSeparator } from "@components/gridForm/GridFormDropDown";
-import { wait } from "@utils/util";
-import { MultiSelectResult } from "@components/gridForm/GridFormMultiSelect";
-import { GridSubComponentTextArea } from "@components/GridSubComponentTextArea";
-import { ColDefT, GridCell } from "@components/GridCell";
-import { GridPopoutEditMultiSelect } from "@components/gridPopoverEdit/GridPopoutEditMultiSelect";
+import { MenuSeparator } from "../../components/gridForm/GridFormDropDown";
+import { wait } from "../../utils/util";
+import { MultiSelectResult } from "../../components/gridForm/GridFormMultiSelect";
+import { GridSubComponentTextArea } from "../../components/GridSubComponentTextArea";
+import { ColDefT, GridCell } from "../../components/GridCell";
+import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
 
 export default {
   title: "Components / Grids",
@@ -24,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -119,14 +119,10 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
     ];
   }, []);
 
-  const rowData = useMemo(
-    () =>
-      [
-        { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
-        { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
-      ] as ITestRow[],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
+    { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+  ] as ITestRow[]);
 
   return (
     <Grid
@@ -135,6 +131,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → grid}/GridReadOnly.stories.tsx

@@ -4,14 +4,14 @@ import "../../styles/index.scss";
 import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
-import { GridContextProvider } from "@contexts/GridContextProvider";
-import { Grid, GridProps } from "@components/Grid";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
 import { useMemo, useState } from "react";
-import { wait } from "@utils/util";
-import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
-import { ColDefT, GridCell } from "@components/GridCell";
-import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
+import { wait } from "../../utils/util";
+import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
+import { ColDefT, GridCell } from "../../components/GridCell";
+import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
 
 export default {
   title: "Components / Grids",
@@ -24,7 +24,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1200, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -151,13 +151,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const rowData: ITestRow[] = useMemo(
-    () => [
-      { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
-      { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
-    ],
-    [],
-  );
+  const [rowData, setRowData] = useState([
+    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+  ]);
 
   return (
     <Grid
@@ -166,6 +163,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}
       rowData={rowData}
+      domLayout={"autoHeight"}
     />
   );
 };

package/src/stories/{components → react-menu}/ReactMenu.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { Grid } from "@components/Grid";
-import { Menu, MenuItem, MenuButton, MenuDivider, SubMenu } from "@react-menu3";
+import { Grid } from "../../components/Grid";
+import { Menu, MenuItem, MenuButton, MenuDivider, SubMenu } from "../../react-menu3";
 
 export default {
   title: "Components / React-menu",