@linzjs/step-ag-grid 15.1.3 → 16.0.0

package/src/stories/grid/GridReadOnly.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,
@@ -26,8 +29,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 +40,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" }}>

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,
@@ -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.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,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, GridFormEditBearing, GridPopoverEditBearingCorrectionEditorParams } from "../../..";
 
@@ -53,39 +56,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,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, GridFormEditBearing, GridPopoverEditBearingEditorParams } from "../../..";
 
@@ -53,38 +56,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();
 };

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.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, waitFor, 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,
@@ -86,8 +89,8 @@ GridFormMultiSelectGridInteractions_.play = async ({ canvasElement }) => {
   const zeroMenuOption = await getOption(/Zero/);
   expect(zeroMenuOption).toBeInTheDocument();
 
-  userEvent.click(zeroMenuOption);
-  userEvent.keyboard("{Tab}");
+  await userEvent.click(zeroMenuOption);
+  await userEvent.keyboard("{Tab}");
   expect(updateValue).toHaveBeenCalled();
   await waitFor(() => expect(onSave).toHaveBeenCalledWith({ selectedRows: [], addValues: [0], removeValues: [] }));
 
@@ -97,19 +100,19 @@ GridFormMultiSelectGridInteractions_.play = async ({ canvasElement }) => {
   };
 
   // Test left/right arrow
-  userEvent.keyboard("{ArrowRight}");
+  await userEvent.keyboard("{ArrowRight}");
   check("Three");
-  userEvent.keyboard("{ArrowRight}");
+  await userEvent.keyboard("{ArrowRight}");
   check("Zero");
-  userEvent.keyboard("{ArrowLeft}");
+  await userEvent.keyboard("{ArrowLeft}");
   check("Three");
-  userEvent.keyboard("{ArrowLeft}");
+  await userEvent.keyboard("{ArrowLeft}");
   check("Zero");
 
   // Test tab to save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
   expect(onSave).toHaveBeenCalledWith({
     selectedRows: [],
@@ -120,7 +123,7 @@ GridFormMultiSelectGridInteractions_.play = async ({ canvasElement }) => {
   // Test shift+tab to save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
   expect(onSave).toHaveBeenCalled();
 };

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.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,
@@ -92,8 +95,8 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   const zeroMenuOption = await getOption(/Zero/);
   expect(zeroMenuOption).toBeInTheDocument();
 
-  userEvent.click(zeroMenuOption);
-  userEvent.keyboard("{Tab}");
+  await userEvent.click(zeroMenuOption);
+  await userEvent.keyboard("{Tab}");
   expect(updateValue).toHaveBeenCalled();
   expect(onSave).toHaveBeenCalledWith({ selectedOptions: [options[0]], selectedRows: [] });
 
@@ -103,19 +106,19 @@ GridFormMultiSelectInteractions_.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.click(textInput);
-  userEvent.type(textInput, "Hello");
+  await userEvent.click(textInput);
+  await userEvent.type(textInput, "Hello");
   expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.tab();
+  await userEvent.tab();
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
   expect(onSave).toHaveBeenCalledWith({
     selectedRows: [],
@@ -128,14 +131,14 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   // Test shift+tab to save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.tab({ shift: true });
+  await userEvent.tab({ shift: true });
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
   expect(onSave).toHaveBeenCalled();
 
   // Test escape to not save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.type(textInput, "{Escape}");
+  await userEvent.type(textInput, "{Escape}");
   expect(updateValue).not.toHaveBeenCalled();
   expect(onSave).not.toHaveBeenCalled();
 
@@ -143,28 +146,28 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSave.mockClear();
   userEvent.clear(textInput);
-  userEvent.type(textInput, "{Enter}");
+  await userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
   expect(onSave).not.toHaveBeenCalled();
 
   // Test filter
   const filterText = await canvas.findByPlaceholderText("Filter...");
-  userEvent.type(filterText, "o");
+  await userEvent.type(filterText, "o");
   await wait(500);
   expect(canvas.queryByText("One")).toBeInTheDocument();
   expect(canvas.queryByText("Other")).toBeInTheDocument();
-  userEvent.type(filterText, "n");
+  await userEvent.type(filterText, "n");
   expect(canvas.queryByText("One")).toBeInTheDocument();
   expect(canvas.queryByText("Zero")).not.toBeInTheDocument();
   expect(canvas.queryByText("Sub component")).not.toBeInTheDocument();
   expect(canvas.queryByText("Other")).not.toBeInTheDocument();
 
-  userEvent.type(filterText, "x");
+  await userEvent.type(filterText, "x");
   expect(canvas.queryByText("One")).not.toBeInTheDocument();
   expect(canvas.queryByText("No Options")).toBeInTheDocument();
 
   // Check enter works to add custom free-text
-  userEvent.type(filterText, "{Enter}");
+  await userEvent.type(filterText, "{Enter}");
   expect(onSelectFilter).toHaveBeenCalledWith({
     filter: "onx",
     options: [

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.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 {
   GridBaseRow,
@@ -90,13 +93,13 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
 
   const enabledMenuOption = await getOption("Enabled");
   expect(enabledMenuOption).toBeInTheDocument();
-  userEvent.click(enabledMenuOption);
+  await userEvent.click(enabledMenuOption);
   expect(enabledAction).toHaveBeenCalled();
 
   enabledAction.mockClear();
   const disabledMenuOption = await getOption("Disabled");
   expect(disabledMenuOption).toBeInTheDocument();
-  userEvent.click(disabledMenuOption);
+  await userEvent.click(disabledMenuOption);
   expect(disabledAction).not.toHaveBeenCalled();
 
   // Sub input tests
@@ -108,34 +111,34 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   expect(subTextArea).toBeInTheDocument();
   expect(canvas.queryByPlaceholderText("Text area")).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();
   expect(canvas.queryByPlaceholderText("Text area")).not.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.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Sub text area tests
@@ -146,27 +149,27 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
   expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
 
-  userEvent.type(textArea, "Hello");
+  await userEvent.type(textArea, "Hello");
   expect(await canvas.findByText("Press 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(textArea, "{Escape}");
+  await userEvent.type(textArea, "{Escape}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   userEvent.clear(textArea);
-  userEvent.type(textArea, "{Enter}");
+  await userEvent.type(textArea, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
 };

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.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, GridFormTextArea } from "../../..";
 
@@ -47,23 +50,23 @@ GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
   expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
 
   const inputField = canvas.getByPlaceholderText("Type here");
-  userEvent.type(inputField, "Hello");
+  await userEvent.type(inputField, "Hello");
 
   expect(await canvas.findByText("Press 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 not to save
   updateValue.mockClear();
-  userEvent.type(inputField, "{Escape}");
+  await userEvent.type(inputField, "{Escape}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
@@ -71,8 +74,8 @@ GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
   userEvent.clear(inputField);
 
   expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
-  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/GridFormTextInputInteraction.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, GridFormTextInput } from "../../..";
 
@@ -47,28 +50,28 @@ GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
   expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
 
   const inputField = canvas.getByPlaceholderText("Type here");
-  userEvent.type(inputField, "Hello");
+  await userEvent.type(inputField, "Hello");
 
   expect(canvas.getByText("Press enter or tab to save")).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
@@ -76,10 +79,10 @@ GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
   userEvent.clear(inputField);
 
   expect(canvas.getByText("Must not be empty")).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/gridFormStatic/GridFormDropDown.stories.tsx

@@ -1,9 +1,12 @@
+import "../../../react-menu3/styles/index.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 { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import { GridBaseRow, GridContextProvider, GridFormDropDown, GridFormDropDownProps, MenuHeaderItem } from "../../..";
 

package/src/stories/grid/gridFormStatic/GridFormEditBearing.stories.tsx

@@ -1,9 +1,12 @@
+import "../../../react-menu3/styles/index.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 { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   GridContextProvider,