@linzjs/step-ag-grid 15.1.3 → 17.0.0

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,
@@ -31,7 +34,7 @@ const onSave = jest
 const onSelectFilter = jest.fn();
 
 let options: MultiSelectGridOption[] = [];
-const Template: ComponentStory<typeof GridFormMultiSelectGrid> = (props) => {
+const Template: ComponentStory<typeof GridFormMultiSelectGrid> = (props: GridFormMultiSelectGridProps<any>) => {
   options = [
     { label: "Zero", value: 0 },
     { label: "One", value: 1 },
@@ -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,
@@ -31,7 +34,7 @@ const onSave = jest.fn<Promise<boolean>, [GridFormMultiSelectSaveProps<any>]>().
 const onSelectFilter = jest.fn();
 
 let options: MultiSelectOption[] = [];
-const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
+const Template: ComponentStory<typeof GridFormMultiSelect> = (props: GridFormMultiSelectProps<any>) => {
   options = [
     { label: "Zero", value: 0 },
     { label: "One", value: 1 },
@@ -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,43 +131,43 @@ 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();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   onSave.mockClear();
-  userEvent.clear(textInput);
-  userEvent.type(textInput, "{Enter}");
+  await userEvent.clear(textInput);
+  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,12 +9,12 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
-import "@linzjs/lui/dist/scss/base.scss";
 
 import {
   GridBaseRow,
   GridContextProvider,
   GridFormPopoverMenu,
+  GridFormPopoverMenuProps,
   GridFormSubComponentTextArea,
   GridFormSubComponentTextInput,
   PopoutMenuSeparator,
@@ -37,7 +41,7 @@ const disabledAction = jest
   .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
   .mockResolvedValue(undefined);
 
-const Template: ComponentStory<typeof GridFormPopoverMenu> = (props) => {
+const Template: ComponentStory<typeof GridFormPopoverMenu> = (props: GridFormPopoverMenuProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -90,13 +94,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 +112,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.clear(textInput);
+  await userEvent.type(textInput, "{Enter}");
   expect(updateValue).not.toHaveBeenCalled();
 
   // Sub text area tests
@@ -146,27 +150,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.clear(textArea);
+  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,9 +9,8 @@ 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 "../../..";
+import { GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -17,7 +20,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
+const Template: ComponentStory<typeof GridFormTextArea> = (props: GridFormTextAreaProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -47,32 +50,32 @@ 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
   updateValue.mockClear();
-  userEvent.clear(inputField);
+  await 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,9 +9,8 @@ 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 "../../..";
+import { GridContextProvider, GridFormTextInput, GridFormTextInputProps } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
@@ -17,7 +20,7 @@ export default {
 
 const updateValue = jest.fn();
 
-const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
+const Template: ComponentStory<typeof GridFormTextInput> = (props: GridFormTextInputProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
@@ -47,39 +50,39 @@ 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
   updateValue.mockClear();
-  userEvent.clear(inputField);
+  await 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 "../../..";
 
@@ -13,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormDropDown>;
 
-const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+const Template: ComponentStory<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
   const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [
     ["No options", { options: [] }],
     ["Custom no options", { options: [], noOptionsMessage: "Custom no options" }],

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,
@@ -18,7 +21,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const values: [string, GridFormEditBearingProps<any>, number | null][] = [
     ["Null value", {}, null],
     ["Custom placeholder", { placeHolder: "Custom placeholder" }, null],

package/src/stories/grid/gridFormStatic/GridFormEditBearingCorrection.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,
@@ -18,7 +21,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;
 
-const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+const Template: ComponentStory<typeof GridFormEditBearing> = (props: GridFormEditBearingProps<any>) => {
   const values: [string, GridFormEditBearingProps<any>, number | null][] = [
     ["Null value", {}, null],
     ["Custom placeholder", { placeHolder: "Custom placeholder" }, null],

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

@@ -1,11 +1,14 @@
+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, GridFormMessage } from "../../..";
+import { GridContextProvider, GridFormMessage, GridFormMessageProps } from "../../..";
 
 export default {
   title: "GridForm / Static Tests",
@@ -13,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormMessage>;
 
-const Template: ComponentStory<typeof GridFormMessage> = (props) => {
+const Template: ComponentStory<typeof GridFormMessage> = (props: GridFormMessageProps<any>) => {
   const anchorRef1 = useRef<HTMLHeadingElement>(null);
 
   return (

package/src/stories/grid/gridFormStatic/GridFormMultiSelect.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, GridFormMultiSelect, GridFormMultiSelectProps } from "../../..";
 

package/src/stories/grid/gridFormStatic/GridFormPopoverMenu.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,

package/src/stories/grid/gridFormStatic/GridFormTextArea.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, GridFormTextArea, GridFormTextAreaProps } from "../../..";
 
@@ -13,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormTextArea>;
 
-const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
+const Template: ComponentStory<typeof GridFormTextArea> = (props: GridFormTextAreaProps<any>) => {
   const configs: [string, GridFormTextAreaProps<GridBaseRow>, string?][] = [
     ["Text area", {}],
     ["Text area with text", {}, "Some text"],

package/src/stories/grid/gridFormStatic/GridFormTextInput.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, GridFormTextInput, GridFormTextInputProps } from "../../..";
 
@@ -13,7 +16,7 @@ export default {
   args: {},
 } as ComponentMeta<typeof GridFormTextInput>;
 
-const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
+const Template: ComponentStory<typeof GridFormTextInput> = (props: GridFormTextInputProps<any>) => {
   const configs: [string, GridFormTextInputProps<GridBaseRow>, string?][] = [
     ["Text input", {}],
     ["Text input with text", {}, "Some text"],