@linzjs/step-ag-grid 15.1.3 → 17.0.0

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

@@ -1,11 +1,12 @@
+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";
+import { GridNoRowsOverlay, GridNoRowsOverlayProps } from "../../components";
 
 export default {
   title: "Components / Grids / GridNoRowsOverlay",
@@ -13,24 +14,26 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridNoRowsOverlay>;
 
-const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (params) => {
+const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (params: GridNoRowsOverlayProps) => {
   return <GridNoRowsOverlay {...params} />;
 };
 
-export const GridNoRowsEmpty = GridNoRowsOverlayTemplate.bind({});
-GridNoRowsEmpty.args = {
-  rowData: [],
+export const _GridNoRowsEmpty = GridNoRowsOverlayTemplate.bind({});
+_GridNoRowsEmpty.args = {
+  rowCount: 0,
+  filteredRowCount: 0,
 };
-GridNoRowsEmpty.play = async ({ canvasElement }) => {
+_GridNoRowsEmpty.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   expect(await canvas.findByText("There are currently no rows")).toBeInTheDocument();
 };
 
-export const GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
-GridNoRowsFiltered.args = {
-  rowData: [{}],
+export const _GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
+_GridNoRowsFiltered.args = {
+  rowCount: 1,
+  filteredRowCount: 0,
 };
-GridNoRowsFiltered.play = async ({ canvasElement }) => {
+_GridNoRowsFiltered.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   expect(await canvas.findByText("All rows have been filtered")).toBeInTheDocument();
 };

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

@@ -1,11 +1,16 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 import { ColDef } from "ag-grid-community";
 import { GridPopoverEditDropDown } from "components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridPopoverTextArea } from "components/gridPopoverEdit/GridPopoverTextArea";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -20,8 +25,6 @@ import {
   MenuOption,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
@@ -175,5 +178,10 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
   );
 };
 
-export const NonEditableRow = GridNonEditableRowTemplate.bind({});
-NonEditableRow.args = { autoSelectFirstRow: true, selectable: true };
+export const _NonEditableRow = GridNonEditableRowTemplate.bind({});
+_NonEditableRow.args = { autoSelectFirstRow: true, selectable: true };
+_NonEditableRow.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,8 +1,13 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 import { ReactElement, useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ActionButton,
@@ -17,8 +22,6 @@ import {
   MenuItem,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 import { IFormTestRow } from "./FormTest";
 
 export default {
@@ -133,4 +136,9 @@ const GridPopoutContextMenuTemplate: ComponentStory<typeof Grid> = (props: GridP
   );
 };
 
-export const EditContextMenu = GridPopoutContextMenuTemplate.bind({});
+export const _EditContextMenu = GridPopoutContextMenuTemplate.bind({});
+_EditContextMenu.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,12 +1,15 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 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 {
@@ -69,4 +72,9 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   );
 };
 
-export const EditGeneric = GridPopoutEditGenericTemplate.bind({});
+export const _EditGeneric = GridPopoutEditGenericTemplate.bind({});
+_EditGeneric.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,8 +1,13 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 import { useCallback, useContext, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ActionButton,
@@ -23,8 +28,6 @@ import {
   isFloat,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 import { IFormTestRow } from "./FormTest";
 
 export default {
@@ -172,7 +175,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)));
                 },
               },
@@ -224,4 +227,9 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   );
 };
 
-export const EditGenericTextArea = GridPopoutEditGenericTemplate.bind({});
+export const _EditGenericTextArea = GridPopoutEditGenericTemplate.bind({});
+_EditGenericTextArea.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,8 +1,13 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -20,8 +25,6 @@ import {
   GridWrapper,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
@@ -121,3 +124,8 @@ const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: Grid
 };
 
 export const _GridPopoverEditBearing = GridPopoverEditBearingTemplate.bind({});
+_GridPopoverEditBearing.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,8 +1,13 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 import { useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -25,8 +30,6 @@ import {
   MenuSeparatorString,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
@@ -313,3 +316,8 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
 };
 
 export const EditDropdown = GridEditDropDownTemplate.bind({});
+EditDropdown.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,9 +1,14 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 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 +23,6 @@ import {
   MultiSelectOption,
   wait,
 } from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
@@ -193,3 +196,8 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
 };
 
 export const EditMultiSelect = GridEditMultiSelectTemplate.bind({});
+EditMultiSelect.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,15 +1,19 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { waitFor } from "@storybook/testing-library";
 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";
+import { EditMultiSelect } from "./GridPopoverEditMultiSelect.stories";
 
 export default {
   title: "Components / Grids",
@@ -107,3 +111,8 @@ const GridEditMultiSelectGridTemplate: ComponentStory<typeof Grid> = (props: Gri
 };
 
 export const EditMultiSelectGrid = GridEditMultiSelectGridTemplate.bind({});
+EditMultiSelect.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -1,8 +1,13 @@
+import "../../styles/GridTheme.scss";
+import "../../styles/index.scss";
+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 { useCallback, useMemo, useState } from "react";
+import { waitFor } from "@storybook/testing-library";
+import { ReactElement, useCallback, useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   ColDefT,
@@ -26,8 +31,6 @@ import {
 import { GridFilterColumnsToggle } from "../../components";
 import { GridFilterDownloadCsvButton } from "../../components";
 import { GridCellFiller } from "../../components/GridCellFiller";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
 
 export default {
   title: "Components / Grids",
@@ -39,6 +42,14 @@ export default {
     selectable: false,
     rowSelection: "single",
   },
+  // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: "code",
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
@@ -118,6 +129,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridCell({
         headerName: "Custom edit",
         editable: true,
+        flex: 1,
         valueFormatter: () => "Press E",
         cellRendererParams: {
           rightHoverElement: (
@@ -240,7 +252,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 };
 
-const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX.Element => {
+const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): ReactElement => {
   const [value, setValue] = useState<number>();
 
   const filter = useCallback(
@@ -268,3 +280,8 @@ const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX
 };
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});
+ReadOnlySingleSelection.play = async ({ canvasElement }) => {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".Grid-ready")).toBeInTheDocument();
+  });
+};

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

@@ -1,3 +1,7 @@
+import "../../../react-menu3/styles/index.scss";
+import "../../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { userEvent, within } from "@storybook/testing-library";
@@ -5,7 +9,6 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   GridContextProvider,
@@ -29,7 +32,7 @@ const onSelectedItem = jest
   .fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>()
   .mockImplementation(async () => undefined);
 
-const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+const Template: ComponentStory<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
   const config: GridFormDropDownProps<any> = {
     filtered: "local",
     onSelectedItem,
@@ -82,7 +85,7 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   const enabledMenuOption = await getOption("Enabled");
   expect(enabledMenuOption).toBeInTheDocument();
 
-  userEvent.click(enabledMenuOption);
+  await userEvent.click(enabledMenuOption);
   expect(updateValue).toHaveBeenCalled();
   expect(onSelectedItem).toHaveBeenCalled();
 
@@ -90,7 +93,7 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSelectedItem.mockClear();
   const disabledMenuOption = await getOption("Disabled");
-  userEvent.click(disabledMenuOption);
+  await userEvent.click(disabledMenuOption);
   expect(updateValue).not.toHaveBeenCalled();
   expect(onSelectedItem).not.toHaveBeenCalled();
 
@@ -100,38 +103,38 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
 
   expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
 
-  userEvent.click(subTextInput);
+  await userEvent.click(subTextInput);
   const textInput = await canvas.findByPlaceholderText("Text input");
   expect(textInput).toBeInTheDocument();
   expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
 
-  userEvent.type(textInput, "Hello");
+  await userEvent.type(textInput, "Hello");
   expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
 
   // Test shift+tab to save
   updateValue.mockClear();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
 
   // Test escape to not save
   updateValue.mockClear();
-  userEvent.type(textInput, "{Escape}");
+  await userEvent.type(textInput, "{Escape}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.clear(textInput);
-  userEvent.type(textInput, "{Enter}");
+  await userEvent.clear(textInput);
+  await userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test filter
   const filterText = await canvas.findByPlaceholderText("Filter...");
-  userEvent.type(filterText, "ena");
+  await userEvent.type(filterText, "ena");
   expect(canvas.queryByText("Enabled")).toBeInTheDocument();
   expect(canvas.queryByText("Disabled")).not.toBeInTheDocument();
   expect(canvas.queryByText("Sub menu...")).not.toBeInTheDocument();

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

@@ -1,3 +1,7 @@
+import "../../../react-menu3/styles/index.scss";
+import "../../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { userEvent, within } from "@storybook/testing-library";
@@ -5,9 +9,13 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
-import { GridContextProvider, GridFormEditBearing, GridPopoverEditBearingCorrectionEditorParams } from "../../..";
+import {
+  GridContextProvider,
+  GridFormEditBearing,
+  GridFormEditBearingProps,
+  GridPopoverEditBearingCorrectionEditorParams,
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -17,7 +25,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -53,39 +61,39 @@ GridFormEditBearingCorrectionInteractions_.play = async ({ canvasElement }) => {
 
   // Test formatting a bearing
   expect(inputField).toBeInTheDocument();
-  userEvent.type(inputField, "1.2345");
+  await userEvent.type(inputField, "1.2345");
   expect(await canvas.findByText("+1° 23' 45\"")).toBeInTheDocument();
 
   // Test enter to save
   updateValue.mockClear();
-  userEvent.type(inputField, "{Enter}");
+  await userEvent.type(inputField, "{Enter}");
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
 
   // Test tab to save
   updateValue.mockClear();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
 
   // Test shift+tab to save
   updateValue.mockClear();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
 
   // Test escape not to save
   updateValue.mockClear();
-  userEvent.type(inputField, "{Escape}");
+  await userEvent.type(inputField, "{Escape}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.type(inputField, "xxx");
+  await userEvent.type(inputField, "xxx");
   expect(await canvas.findByText("?")).toBeInTheDocument();
 
   expect(canvas.getByText("Bearing must be a number in D.MMSSS format")).toBeInTheDocument();
-  userEvent.type(inputField, "{Enter}");
+  await userEvent.type(inputField, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).not.toHaveBeenCalled();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).not.toHaveBeenCalled();
 };

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

@@ -1,3 +1,7 @@
+import "../../../react-menu3/styles/index.scss";
+import "../../../styles/index.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
 import { expect, jest } from "@storybook/jest";
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { userEvent, within } from "@storybook/testing-library";
@@ -5,9 +9,13 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
-import { GridContextProvider, GridFormEditBearing, GridPopoverEditBearingEditorParams } from "../../..";
+import {
+  GridContextProvider,
+  GridFormEditBearing,
+  GridFormEditBearingProps,
+  GridPopoverEditBearingEditorParams,
+} from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -17,7 +25,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -53,38 +61,38 @@ GridFormEditBearingInteractions_.play = async ({ canvasElement }) => {
 
   // Test formatting a bearing
   expect(inputField).toBeInTheDocument();
-  userEvent.type(inputField, "1.2345");
+  await userEvent.type(inputField, "1.2345");
   expect(await canvas.findByText("1° 23' 45\"")).toBeInTheDocument();
 
   // Test enter to save
   updateValue.mockClear();
-  userEvent.type(inputField, "{Enter}");
+  await userEvent.type(inputField, "{Enter}");
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
 
   // Test tab to save
   updateValue.mockClear();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
 
   // Test shift+tab to save
   updateValue.mockClear();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
 
   // Test escape not to save
   updateValue.mockClear();
-  userEvent.type(inputField, "{Escape}");
+  await userEvent.type(inputField, "{Escape}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
-  userEvent.type(inputField, "xxx");
+  await userEvent.type(inputField, "xxx");
   expect(await canvas.findByText("?")).toBeInTheDocument();
   expect(canvas.getByText("Bearing must be a number in D.MMSSS format")).toBeInTheDocument();
-  userEvent.type(inputField, "{Enter}");
+  await userEvent.type(inputField, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).not.toHaveBeenCalled();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).not.toHaveBeenCalled();
 };