@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.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, GridFormDropDown, GridFormDropDownProps, GridFormSubComponentTextInput } from "../../..";
+import { GridContext, GridFormDropDown, GridFormDropDownProps, GridFormSubComponentTextInput } from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormDropDown,
   args: {},
 };
@@ -25,16 +24,16 @@ const onSelectedItem = fn(async () => {});
 
 const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps<any>) => {
   const config: GridFormDropDownProps<any> = {
-    filtered: "local",
+    filtered: 'local',
     onSelectedItem,
     options: [
-      { label: "Enabled", value: 1 },
-      { label: "Disabled", value: 0, disabled: true },
+      { label: 'Enabled', value: 1 },
+      { label: 'Disabled', value: 0, disabled: true },
       {
-        label: "Sub menu",
+        label: 'Sub menu',
         value: 0,
         subComponent: () => (
-          <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+          <GridFormSubComponentTextInput placeholder={'Text input'} maxLength={5} required defaultValue={''} />
         ),
       },
     ],
@@ -42,7 +41,7 @@ const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -56,12 +55,12 @@ const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps
           value={{
             anchorRef,
             updateValue,
-            data: { value: "" },
-            colId: "",
-            value: "",
-            field: "value",
+            data: { value: '' },
+            colId: '',
+            value: '',
+            field: 'value',
             selectedRows: [],
-            formatValue: () => "",
+            formatValue: () => '',
             saving: false,
             setSaving: () => {},
           }}
@@ -78,10 +77,10 @@ export const GridFormDropDownInteractions_: typeof Template = Template.bind({});
 GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  const getOption = (name: string) => canvas.findByRole("menuitem", { name });
+  const getOption = (name: string) => canvas.findByRole('menuitem', { name });
 
   // Check enabled menu handles click
-  const enabledMenuOption = await getOption("Enabled");
+  const enabledMenuOption = await getOption('Enabled');
   expect(enabledMenuOption).toBeInTheDocument();
 
   await userEvent.click(enabledMenuOption);
@@ -91,24 +90,24 @@ GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
   // Check disabled menu ignores click
   updateValue.mockClear();
   onSelectedItem.mockClear();
-  const disabledMenuOption = await getOption("Disabled");
+  const disabledMenuOption = await getOption('Disabled');
   await userEvent.click(disabledMenuOption);
   expect(updateValue).not.toHaveBeenCalled();
   expect(onSelectedItem).not.toHaveBeenCalled();
 
   // Check sub menu works
-  const subTextInput = await getOption("Sub menu...");
+  const subTextInput = await getOption('Sub menu...');
   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();
 
-  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();
@@ -122,19 +121,19 @@ GridFormDropDownInteractions_.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();
 
   // Test filter
-  const filterText = await canvas.findByPlaceholderText("Filter...");
-  await userEvent.type(filterText, "ena");
-  expect(canvas.queryByText("Enabled")).toBeInTheDocument();
-  expect(canvas.queryByText("Disabled")).not.toBeInTheDocument();
-  expect(canvas.queryByText("Sub menu...")).not.toBeInTheDocument();
+  const filterText = await canvas.findByPlaceholderText('Filter...');
+  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,23 +1,22 @@
-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,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingCorrectionEditorParams,
-} from "../../..";
+} from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormEditBearing,
   args: {},
 };
@@ -28,7 +27,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -41,15 +40,15 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         <GridPopoverContext.Provider
           value={{
             anchorRef,
-            colId: "",
+            colId: '',
             value: null,
             updateValue,
             formatValue: (value) => value,
             setSaving: () => {},
             saving: false,
             selectedRows: [],
-            data: { value: "" },
-            field: "value",
+            data: { value: '' },
+            field: 'value',
           }}
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
@@ -63,21 +62,21 @@ export const GridFormEditBearingCorrectionInteractions_: typeof Template = Templ
 GridFormEditBearingCorrectionInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+  expect(await canvas.findByText('Press enter or tab to save')).toBeInTheDocument();
 
-  const inputField = canvas.getByPlaceholderText("Enter bearing correction");
+  const inputField = canvas.getByPlaceholderText('Enter bearing correction');
 
   // Test formatting null
-  expect(await canvas.findByText("–")).toBeInTheDocument();
+  expect(await canvas.findByText('–')).toBeInTheDocument();
 
   // Test formatting a bearing
   expect(inputField).toBeInTheDocument();
-  await userEvent.type(inputField, "1.2345");
-  expect(await canvas.findByText("+1° 23' 45\"")).toBeInTheDocument();
+  await userEvent.type(inputField, '1.2345');
+  expect(await canvas.findByText('+1° 23\' 45"')).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
@@ -92,16 +91,16 @@ GridFormEditBearingCorrectionInteractions_.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.type(inputField, "xxx");
-  expect(await canvas.findByText("?")).toBeInTheDocument();
+  await userEvent.type(inputField, 'xxx');
+  expect(await canvas.findByText('?')).toBeInTheDocument();
 
-  expect(canvas.getByText("Bearing must be a number in D.MMSSS format")).toBeInTheDocument();
-  await userEvent.type(inputField, "{Enter}");
+  expect(canvas.getByText('Bearing must be a number in D.MMSSS format')).toBeInTheDocument();
+  await userEvent.type(inputField, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab();
   expect(updateValue).not.toHaveBeenCalled();

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

@@ -1,23 +1,22 @@
-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,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingEditorParams,
-} from "../../..";
+} from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormEditBearing,
   args: {},
 };
@@ -28,7 +27,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -41,15 +40,15 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         <GridPopoverContext.Provider
           value={{
             anchorRef,
-            colId: "",
+            colId: '',
             value: null,
             updateValue,
             formatValue: (value) => value,
             setSaving: () => {},
             saving: false,
             selectedRows: [],
-            data: { value: "" },
-            field: "value",
+            data: { value: '' },
+            field: 'value',
           }}
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
@@ -63,21 +62,21 @@ export const GridFormEditBearingInteractions_: typeof Template = Template.bind({
 GridFormEditBearingInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+  expect(await canvas.findByText('Press enter or tab to save')).toBeInTheDocument();
 
-  const inputField = canvas.getByPlaceholderText("Enter bearing");
+  const inputField = canvas.getByPlaceholderText('Enter bearing');
 
   // Test formatting null
-  expect(await canvas.findByText("–")).toBeInTheDocument();
+  expect(await canvas.findByText('–')).toBeInTheDocument();
 
   // Test formatting a bearing
   expect(inputField).toBeInTheDocument();
-  await userEvent.type(inputField, "1.2345");
-  expect(await canvas.findByText("1° 23' 45\"")).toBeInTheDocument();
+  await userEvent.type(inputField, '1.2345');
+  expect(await canvas.findByText('1° 23\' 45"')).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
@@ -92,15 +91,15 @@ GridFormEditBearingInteractions_.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.type(inputField, "xxx");
-  expect(await canvas.findByText("?")).toBeInTheDocument();
-  expect(canvas.getByText("Bearing must be a number in D.MMSSS format")).toBeInTheDocument();
-  await userEvent.type(inputField, "{Enter}");
+  await userEvent.type(inputField, 'xxx');
+  expect(await canvas.findByText('?')).toBeInTheDocument();
+  expect(canvas.getByText('Bearing must be a number in D.MMSSS format')).toBeInTheDocument();
+  await userEvent.type(inputField, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab();
   expect(updateValue).not.toHaveBeenCalled();

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

@@ -1,24 +1,24 @@
-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, waitFor, within } from "@storybook/test";
-import { GridPopoverContext } from "contexts/GridPopoverContext";
-import { useRef } from "react";
+import { StoryFn } from '@storybook/react';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { useRef } from 'react';
 
-import "@linzjs/lui/dist/fonts";
-
-import { GridContext, GridFormMultiSelectGrid, GridFormMultiSelectGridProps, MultiSelectGridOption } from "../../..";
+import { GridContext, GridFormMultiSelectGrid, GridFormMultiSelectGridProps, MultiSelectGridOption } from '../../..';
 
 export default {
-  title: "GridForm / Interactions",
+  title: 'GridForm / Interactions',
   component: GridFormMultiSelectGrid,
   args: {},
 };
 
 const updateValue = fn((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
 
+// eslint-disable-next-line @typescript-eslint/require-await
 const onSave = fn(async () => true);
 const onSelectFilter = fn();
 
@@ -26,11 +26,11 @@ const five = <div>Five</div>;
 let options: MultiSelectGridOption[] = [];
 const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiSelectGridProps<any>) => {
   options = [
-    { label: "Zero", value: 0 },
-    { label: "One", value: 1 },
-    { label: "Two", value: 2 },
-    { label: "Three", value: 3 },
-    { label: "Four", value: 4 },
+    { label: 'Zero', value: 0 },
+    { label: 'One', value: 1 },
+    { label: 'Two', value: 2 },
+    { label: 'Three', value: 3 },
+    { label: 'Four', value: 4 },
     { label: five, value: 5 },
   ];
   const config: GridFormMultiSelectGridProps<any> = {
@@ -41,7 +41,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div className={"react-menu-inline-test"}>
+    <div className={'react-menu-inline-test'}>
       <GridContext.Provider
         value={
           {
@@ -55,14 +55,14 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
           value={{
             anchorRef: anchorRef,
             updateValue,
-            colId: "",
-            value: "",
+            colId: '',
+            value: '',
             selectedRows: [],
             formatValue: (value) => value,
             setSaving: () => {},
             saving: false,
-            data: { value: "" },
-            field: "value",
+            data: { value: '' },
+            field: 'value',
           }}
         >
           <GridFormMultiSelectGrid {...props} {...config} />
@@ -80,14 +80,14 @@ GridFormMultiSelectGridInteractions_.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();
   await waitFor(() => expect(onSave).toHaveBeenCalledWith({ selectedRows: [], addValues: [0], removeValues: [] }));
 
@@ -97,14 +97,14 @@ GridFormMultiSelectGridInteractions_.play = async ({ canvasElement }) => {
   };
 
   // Test left/right arrow
-  await userEvent.keyboard("{ArrowRight}");
-  check("Three");
-  await userEvent.keyboard("{ArrowRight}");
-  check("Zero");
-  await userEvent.keyboard("{ArrowLeft}");
-  check("Three");
-  await userEvent.keyboard("{ArrowLeft}");
-  check("Zero");
+  await userEvent.keyboard('{ArrowRight}');
+  check('Three');
+  await userEvent.keyboard('{ArrowRight}');
+  check('Zero');
+  await userEvent.keyboard('{ArrowLeft}');
+  check('Three');
+  await userEvent.keyboard('{ArrowLeft}');
+  check('Zero');
 
   // Test tab to save
   updateValue.mockClear();