@linzjs/step-ag-grid 23.0.0 → 24.0.0

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

@@ -1,13 +1,12 @@
-import "../../../react-menu3/styles/index.scss";
-import "../../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../../react-menu3/styles/index.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { StoryFn } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
-import { GridPopoverContext } from "contexts/GridPopoverContext";
-import { useRef } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { StoryFn } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { useRef } from 'react';
 
 import {
   GridContext,
@@ -16,10 +15,10 @@ import {
   GridFormSubComponentTextInput,
   MultiSelectOption,
   wait,
-} from "../../..";
+} from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormMultiSelect,
   args: {},
 };
@@ -32,28 +31,28 @@ const onSelectFilter = fn();
 let options: MultiSelectOption[] = [];
 const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelectProps<any>) => {
   options = [
-    { label: "Zero", value: 0 },
-    { label: "One", value: 1 },
+    { label: 'Zero', value: 0 },
+    { label: 'One', value: 1 },
     {
-      label: "Sub component",
+      label: 'Sub component',
       value: 2,
       subComponent: () => (
-        <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+        <GridFormSubComponentTextInput placeholder={'Text input'} maxLength={5} required defaultValue={''} />
       ),
     },
-    { label: "Other", value: 3 },
+    { label: 'Other', value: 3 },
   ];
   const config: GridFormMultiSelectProps<any> = {
     filtered: true,
     onSelectFilter,
-    filterHelpText: "Press enter to add free-text",
+    filterHelpText: 'Press enter to add free-text',
     onSave,
     options,
   };
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -67,10 +66,10 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
           value={{
             anchorRef,
             updateValue,
-            data: { value: "" },
-            colId: "",
-            value: "",
-            field: "value",
+            data: { value: '' },
+            colId: '',
+            value: '',
+            field: 'value',
             selectedRows: [],
             saving: false,
             setSaving: () => {},
@@ -92,14 +91,14 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
 
   const canvas = within(canvasElement);
 
-  const getOption = (name: RegExp | string) => canvas.findByRole("menuitem", { name });
+  const getOption = (name: RegExp | string) => canvas.findByRole('menuitem', { name });
 
   // Check enabled menu handles click
   const zeroMenuOption = await getOption(/Zero/);
   expect(zeroMenuOption).toBeInTheDocument();
 
   await userEvent.click(zeroMenuOption);
-  await userEvent.keyboard("{Tab}");
+  await userEvent.keyboard('{Tab}');
   expect(updateValue).toHaveBeenCalled();
   expect(onSave).toHaveBeenCalledWith({ selectedOptions: [options[0]], selectedRows: [] });
 
@@ -107,16 +106,16 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   const subTextInput = await getOption(/Sub component/);
   expect(subTextInput).toBeInTheDocument();
 
-  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText('Text input')).not.toBeInTheDocument();
 
   await userEvent.click(subTextInput);
-  const textInput = await canvas.findByPlaceholderText("Text input");
+  const textInput = await canvas.findByPlaceholderText('Text input');
   expect(textInput).toBeInTheDocument();
-  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
 
   // textInput should be autofocus
-  await userEvent.type(textInput, "Hello");
-  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+  await userEvent.type(textInput, 'Hello');
+  expect(await canvas.findByText('Press enter or tab to save')).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
@@ -126,8 +125,8 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   expect(onSave).toHaveBeenCalledWith({
     selectedRows: [],
     selectedOptions: [
-      { label: "Zero", value: 0, checked: true },
-      { label: "Sub component", value: 2, checked: true, subValue: "Hello", subComponent: expect.anything() },
+      { label: 'Zero', value: 0, checked: true },
+      { label: 'Sub component', value: 2, checked: true, subValue: 'Hello', subComponent: expect.anything() },
     ],
   });
 
@@ -141,7 +140,7 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   // Test escape to not save
   updateValue.mockClear();
   onSave.mockClear();
-  await userEvent.type(textInput, "{Escape}");
+  await userEvent.type(textInput, '{Escape}');
   expect(updateValue).not.toHaveBeenCalled();
   expect(onSave).not.toHaveBeenCalled();
 
@@ -149,30 +148,30 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSave.mockClear();
   await userEvent.clear(textInput);
-  await 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...");
-  await userEvent.type(filterText, "o");
+  const filterText = await canvas.findByPlaceholderText('Filter...');
+  await userEvent.type(filterText, 'o');
   await wait(500);
-  expect(canvas.queryByText("One")).toBeInTheDocument();
-  expect(canvas.queryByText("Other")).toBeInTheDocument();
-  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();
-
-  await userEvent.type(filterText, "x");
-  expect(canvas.queryByText("One")).not.toBeInTheDocument();
-  expect(canvas.queryByText("No Options")).toBeInTheDocument();
+  expect(canvas.queryByText('One')).toBeInTheDocument();
+  expect(canvas.queryByText('Other')).toBeInTheDocument();
+  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();
+
+  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
-  await userEvent.type(filterText, "{Enter}");
+  await userEvent.type(filterText, '{Enter}');
   expect(onSelectFilter).toHaveBeenCalledWith({
-    filter: "onx",
+    filter: 'onx',
     options: [
       {
         ...options[0],

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

@@ -1,14 +1,13 @@
-import "../../../react-menu3/styles/index.scss";
-import "../../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../../react-menu3/styles/index.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { StoryFn } from "@storybook/react";
-import * as test from "@storybook/test";
-import { expect, userEvent, within } from "@storybook/test";
-import { GridPopoverContext } from "contexts/GridPopoverContext";
-import { useRef } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { StoryFn } from '@storybook/react';
+import * as test from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
+import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { useRef } from 'react';
 
 import {
   GridBaseRow,
@@ -19,10 +18,10 @@ import {
   GridFormSubComponentTextInput,
   PopoutMenuSeparator,
   SelectedMenuOptionResult,
-} from "../../..";
+} from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormPopoverMenu,
   args: {},
 };
@@ -43,7 +42,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -58,9 +57,9 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
             anchorRef,
             value: null,
             updateValue,
-            data: { value: "" },
-            colId: "",
-            field: "value",
+            data: { value: '' },
+            colId: '',
+            field: 'value',
             selectedRows: [],
             saving: false,
             setSaving: () => {},
@@ -69,25 +68,25 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
         >
           <GridFormPopoverMenu
             {...props}
-            options={async () => [
-              { label: "Enabled", value: 1, action: enabledAction },
+            options={() => [
+              { label: 'Enabled', value: 1, action: enabledAction },
               PopoutMenuSeparator,
-              { label: "Disabled", value: 0, disabled: true, action: disabledAction },
+              { label: 'Disabled', value: 0, disabled: true, action: disabledAction },
               {
-                label: "Sub text input",
+                label: 'Sub text input',
                 value: 0,
                 subComponent: () => (
-                  <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+                  <GridFormSubComponentTextInput placeholder={'Text input'} maxLength={5} required defaultValue={''} />
                 ),
               },
               {
-                label: "Sub text area",
+                label: 'Sub text area',
                 value: 0,
                 subComponent: () => (
-                  <GridFormSubComponentTextArea placeholder={"Text area"} maxLength={5} required defaultValue={""} />
+                  <GridFormSubComponentTextArea placeholder={'Text area'} maxLength={5} required defaultValue={''} />
                 ),
               },
-              { label: "ERROR! this should be hidden", value: 3, hidden: true },
+              { label: 'ERROR! this should be hidden', value: 3, hidden: true },
             ]}
           />
         </GridPopoverContext.Provider>
@@ -100,36 +99,36 @@ export const GridFormPopoverMenuInteractions_: typeof Template = Template.bind({
 GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  const getOption = (name: string) => canvas.findByRole("menuitem", { name });
+  const getOption = (name: string) => canvas.findByRole('menuitem', { name });
 
-  const enabledMenuOption = await getOption("Enabled");
+  const enabledMenuOption = await getOption('Enabled');
   expect(enabledMenuOption).toBeInTheDocument();
   await userEvent.click(enabledMenuOption);
   expect(enabledAction).toHaveBeenCalled();
 
   enabledAction.mockClear();
-  const disabledMenuOption = await getOption("Disabled");
+  const disabledMenuOption = await getOption('Disabled');
   expect(disabledMenuOption).toBeInTheDocument();
   await userEvent.click(disabledMenuOption);
   expect(disabledAction).not.toHaveBeenCalled();
 
   // Sub input tests
-  const subTextInput = await getOption("Sub text input");
+  const subTextInput = await getOption('Sub text input');
   expect(subTextInput).toBeInTheDocument();
-  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText('Text input')).not.toBeInTheDocument();
 
-  const subTextArea = await getOption("Sub text area");
+  const subTextArea = await getOption('Sub text area');
   expect(subTextArea).toBeInTheDocument();
-  expect(canvas.queryByPlaceholderText("Text area")).not.toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText('Text area')).not.toBeInTheDocument();
 
   await userEvent.click(subTextInput);
-  const textInput = await canvas.findByPlaceholderText("Text input");
+  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();
+  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText('Text area')).not.toBeInTheDocument();
 
-  await userEvent.type(textInput, "Hello");
-  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+  await userEvent.type(textInput, 'Hello');
+  expect(await canvas.findByText('Press enter or tab to save')).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
@@ -143,25 +142,25 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
 
   // Test escape to not save
   updateValue.mockClear();
-  await userEvent.type(textInput, "{Escape}");
+  await userEvent.type(textInput, '{Escape}');
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   await userEvent.clear(textInput);
-  await userEvent.type(textInput, "{Enter}");
+  await userEvent.type(textInput, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
 
   // Sub text area tests
   subTextArea.click();
 
-  const textArea = await canvas.findByPlaceholderText("Text area");
+  const textArea = await canvas.findByPlaceholderText('Text area');
   expect(textArea).toBeInTheDocument();
-  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
-  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText('Text input')).not.toBeInTheDocument();
 
-  await userEvent.type(textArea, "Hello");
-  expect(await canvas.findByText("Press tab to save")).toBeInTheDocument();
+  await userEvent.type(textArea, 'Hello');
+  expect(await canvas.findByText('Press tab to save')).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
@@ -175,12 +174,12 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
 
   // Test escape to not save
   updateValue.mockClear();
-  await userEvent.type(textArea, "{Escape}");
+  await userEvent.type(textArea, '{Escape}');
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   await userEvent.clear(textArea);
-  await userEvent.type(textArea, "{Enter}");
+  await userEvent.type(textArea, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
 };

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

@@ -1,18 +1,17 @@
-import "../../../react-menu3/styles/index.scss";
-import "../../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../../react-menu3/styles/index.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { StoryFn } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
-import { GridPopoverContext } from "contexts/GridPopoverContext";
-import { useRef } from "react";
+import { StoryFn } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { useRef } from 'react';
 
-import "@linzjs/lui/dist/fonts";
-
-import { GridContext, GridFormTextArea, GridFormTextAreaProps } from "../../..";
+import { GridContext, GridFormTextArea, GridFormTextAreaProps } from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormTextArea,
   args: {},
 };
@@ -23,7 +22,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -39,8 +38,8 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
             value: null,
             updateValue,
             data: { value: null },
-            colId: "",
-            field: "value",
+            colId: '',
+            field: 'value',
             selectedRows: [],
             saving: false,
             setSaving: () => {},
@@ -58,12 +57,12 @@ export const GridFormTextAreaInteractions_: typeof Template = Template.bind({});
 GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
 
-  const inputField = canvas.getByPlaceholderText("Type here");
-  await userEvent.type(inputField, "Hello");
+  const inputField = canvas.getByPlaceholderText('Type here');
+  await userEvent.type(inputField, 'Hello');
 
-  expect(await canvas.findByText("Press tab to save")).toBeInTheDocument();
+  expect(await canvas.findByText('Press tab to save')).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
@@ -77,14 +76,14 @@ GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
 
   // Test escape not to save
   updateValue.mockClear();
-  await userEvent.type(inputField, "{Escape}");
+  await userEvent.type(inputField, '{Escape}');
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   await userEvent.clear(inputField);
 
-  expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
+  expect(canvas.getByText('Must not be empty')).toBeInTheDocument();
   await userEvent.tab();
   expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab({ shift: true });

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

@@ -1,18 +1,17 @@
-import "../../../react-menu3/styles/index.scss";
-import "../../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../../react-menu3/styles/index.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { StoryFn } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
-import { GridPopoverContext } from "contexts/GridPopoverContext";
-import { useRef } from "react";
+import { StoryFn } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { useRef } from 'react';
 
-import "@linzjs/lui/dist/fonts";
-
-import { GridContext, GridFormTextInput, GridFormTextInputProps } from "../../..";
+import { GridContext, GridFormTextInput, GridFormTextInputProps } from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormTextInput,
   args: {},
 };
@@ -23,7 +22,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -39,8 +38,8 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
             value: null,
             updateValue,
             data: { value: null },
-            colId: "",
-            field: "value",
+            colId: '',
+            field: 'value',
             selectedRows: [],
             saving: false,
             setSaving: () => {},
@@ -58,16 +57,16 @@ export const GridFormTextInputInteractions_: typeof Template = Template.bind({})
 GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
 
-  const inputField = canvas.getByPlaceholderText("Type here");
-  await userEvent.type(inputField, "Hello");
+  const inputField = canvas.getByPlaceholderText('Type here');
+  await userEvent.type(inputField, 'Hello');
 
-  expect(canvas.getByText("Press enter or tab to save")).toBeInTheDocument();
+  expect(canvas.getByText('Press enter or tab to save')).toBeInTheDocument();
 
   // Test enter to save
   updateValue.mockClear();
-  await userEvent.type(inputField, "{Enter}");
+  await userEvent.type(inputField, '{Enter}');
   expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
 
   // Test tab to save
@@ -82,15 +81,15 @@ GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
 
   // Test escape not to save
   updateValue.mockClear();
-  await userEvent.type(inputField, "{Escape}");
+  await userEvent.type(inputField, '{Escape}');
   expect(updateValue).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   await userEvent.clear(inputField);
 
-  expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
-  await userEvent.type(inputField, "{Enter}");
+  expect(canvas.getByText('Must not be empty')).toBeInTheDocument();
+  await userEvent.type(inputField, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab();
   expect(updateValue).not.toHaveBeenCalled();