@linzjs/step-ag-grid 8.4.2 → 9.0.0

package/src/stories/grid/GridKeyboardInteractions.stories.tsx

@@ -0,0 +1,261 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useMemo, useState } from "react";
+import { wait } from "../../utils/util";
+import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
+import { ColDefT, GridCell } from "../../components/GridCell";
+import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
+import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
+import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
+import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
+import { GridIcon } from "../../components/GridIcon";
+import { userEvent, waitFor } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: "",
+    quickFilterPlaceholder: "Quick filter...",
+    selectable: false,
+    rowSelection: "single",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400 }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  desc: string;
+  dd: string;
+}
+
+const multiEditAction = jest.fn().mockImplementation(async () => {
+  await wait(500);
+});
+
+const eAction = jest.fn<boolean, []>().mockReturnValue(true);
+
+const GridKeyboardInteractionsTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        initialWidth: 65,
+        maxWidth: 150,
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        initialWidth: 150,
+        maxWidth: 200,
+      }),
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          maxWidth: 150,
+          cellRenderer: () => <>Single Click me!</>,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            message: async (selectedRows): Promise<string> => {
+              await wait(1000);
+              return `There are ${selectedRows.length} row(s) selected`;
+            },
+          },
+        },
+      ),
+      GridCell({
+        headerName: "Custom edit",
+        maxWidth: 100,
+        editable: true,
+        valueFormatter: () => "Press E",
+        cellRendererParams: {
+          rightHoverElement: (
+            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+          ),
+          editAction: () => {
+            //
+          },
+          shortcutKeys: {
+            e: eAction,
+          },
+        },
+      }),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            defaultAction: async ({ menuOption }) => {
+              // eslint-disable-next-line no-console
+              console.log("clicked", { menuOption });
+            },
+            options: async (selectedItems) => {
+              // Just doing a timeout here to demonstrate deferred loading
+              await wait(500);
+              return [
+                {
+                  label: "Single edit only",
+                  action: async () => {
+                    //
+                  },
+                  disabled: selectedItems.length > 1,
+                },
+                {
+                  label: "Multi-edit",
+                  action: multiEditAction,
+                },
+                {
+                  label: "Disabled item",
+                  disabled: "Disabled for test",
+                },
+                {
+                  label: "Developer Only",
+                  hidden: selectedItems.some((x) => x.position != "Developer"),
+                },
+                {
+                  label: "Other (TextInput)",
+                  action: async () => {
+                    //
+                  },
+                  subComponent: () => (
+                    <GridFormSubComponentTextInput placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                  ),
+                },
+                {
+                  label: "Other (TextArea)",
+                  action: async ({ menuOption }) => {
+                    // eslint-disable-next-line no-console
+                    console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
+                    await wait(500);
+                  },
+                  subComponent: () => (
+                    <GridFormSubComponentTextArea placeholder={"Other"} maxLength={5} required defaultValue={""} />
+                  ),
+                },
+              ] as MenuOption<ITestRow>[];
+            },
+          },
+        },
+      ),
+      GridPopoverMenu(
+        {
+          editable: () => false,
+        },
+        {
+          editorParams: {
+            options: async () => {
+              return [];
+            },
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+  ]);
+
+  return (
+    <Grid
+      {...props}
+      selectable={true}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+      domLayout={"autoHeight"}
+      autoSelectFirstRow={true}
+    />
+  );
+};
+
+export const GridKeyboardInteractions = GridKeyboardInteractionsTemplate.bind({});
+GridKeyboardInteractions.play = async ({ canvasElement }) => {
+  // Ensure first row/cell is selected on render
+  await waitFor(async () => {
+    const activeCell = canvasElement.ownerDocument.activeElement;
+    expect(activeCell).toHaveClass("ag-cell-focus");
+    expect(activeCell).toHaveAttribute("aria-colindex", "1");
+    expect(activeCell?.parentElement).toHaveAttribute("row-index", "0");
+  });
+  userEvent.keyboard("{arrowdown}{arrowdown}");
+  userEvent.keyboard("{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}");
+
+  // Test enter post focus
+  const test = async (fn: () => any, colId: string, rowId: string) => {
+    userEvent.keyboard("{Enter}");
+    await wait(1000);
+    userEvent.keyboard("{arrowdown}{arrowdown}");
+    fn();
+    await waitFor(async () => {
+      expect(multiEditAction).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      const activeCell = canvasElement.ownerDocument.activeElement;
+      expect(activeCell).toHaveClass("ag-cell-focus");
+      expect(activeCell).toHaveAttribute("aria-colindex", colId);
+      expect(activeCell?.parentElement).toHaveAttribute("row-index", rowId);
+    });
+    await wait(1000);
+  };
+
+  await test(() => userEvent.keyboard("{Enter}"), "8", "2");
+  await test(() => userEvent.tab(), "9", "2");
+  userEvent.tab({ shift: true });
+  await test(() => userEvent.tab({ shift: true }), "7", "2");
+
+  userEvent.keyboard("{Enter}");
+  await wait(250);
+  expect(eAction).not.toHaveBeenCalled();
+
+  userEvent.keyboard("e");
+  await waitFor(async () => {
+    expect(eAction).toHaveBeenCalled();
+  });
+};

package/src/stories/grid/{GridPopoutBearing.stories.tsx → GridPopoverEditBearing.stories.tsx}

@@ -42,7 +42,7 @@ interface ITestRow {
   bearing: string | number | null;
 }
 
-const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+const GridPopoverEditBearingTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
@@ -57,8 +57,8 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           field: "bearingCorrection",
           headerName: "Bearing correction",
           cellRendererParams: {
-            warning: (props) => props.data.id == 1002 && "Testers are testing",
-            info: (props) => props.data.id == 1001 && "Developers are developing",
+            warning: ({ data }) => data.id == 1002 && "Testers are testing",
+            info: ({ data }) => data.id == 1001 && "Developers are developing",
           },
         },
         {
@@ -108,4 +108,4 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 };
 
-export const Bearings = GridReadOnlyTemplate.bind({});
+export const _GridPopoverEditBearing = GridPopoverEditBearingTemplate.bind({});

package/src/stories/grid/{GridPopoutEditDropDown.stories.tsx → GridPopoverEditDropDown.stories.tsx}

@@ -14,6 +14,7 @@ import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
 import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
+import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 
 export default {
   title: "Components / Grids",
@@ -234,9 +235,16 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
                 },
                 {
                   value: "oth",
-                  label: "Other",
+                  label: "Other text input",
                   subComponent: () => (
-                    <GridFormSubComponentTextInput placeholder={"Other..."} defaultValue={""} required={true} />
+                    <GridFormSubComponentTextInput placeholder={"Other..."} defaultValue={"a"} required={true} />
+                  ),
+                },
+                {
+                  value: "oth",
+                  label: "Other text area",
+                  subComponent: () => (
+                    <GridFormSubComponentTextArea placeholder={"Other..."} defaultValue={"b"} required={true} />
                   ),
                 },
               ];

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

@@ -0,0 +1,137 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { useRef } from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import {
+  GridFormDropDown,
+  GridFormDropDownProps,
+  GridPopoutEditDropDownSelectedItem,
+} from "../../../components/gridForm/GridFormDropDown";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormDropDown,
+  args: {},
+} as ComponentMeta<typeof GridFormDropDown>;
+
+const updateValue = jest
+  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
+  .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
+
+const onSelectedItem = jest
+  .fn<Promise<void>, [GridPopoutEditDropDownSelectedItem<any>]>()
+  .mockImplementation(async () => undefined);
+
+const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+  const config: GridFormDropDownProps<any> = {
+    filtered: "local",
+    onSelectedItem,
+    options: [
+      { label: "Enabled", value: 1 },
+      { label: "Disabled", value: 0, disabled: true },
+      {
+        label: "Sub menu",
+        value: 0,
+        subComponent: () => (
+          <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+        ),
+      },
+    ],
+  };
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <div>
+          <h6 ref={anchorRef}>Interaction test</h6>
+          <GridPopoverContext.Provider
+            value={
+              {
+                anchorRef: anchorRef,
+                updateValue,
+                data: { value: "" },
+                value: "",
+                field: "value",
+                selectedRows: [],
+              } as any as GridPopoverContextType<any>
+            }
+          >
+            <GridFormDropDown {...props} {...config} />
+          </GridPopoverContext.Provider>
+        </div>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormDropDownInteractions_ = Template.bind({});
+GridFormDropDownInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const getOption = (name: string) => canvas.findByRole("menuitem", { name });
+
+  // Check enabled menu handles click
+  const enabledMenuOption = await getOption("Enabled");
+  expect(enabledMenuOption).toBeInTheDocument();
+
+  userEvent.click(enabledMenuOption);
+  expect(updateValue).toHaveBeenCalled();
+  expect(onSelectedItem).toHaveBeenCalled();
+
+  // Check disabled menu ignores click
+  updateValue.mockClear();
+  onSelectedItem.mockClear();
+  const disabledMenuOption = await getOption("Disabled");
+  userEvent.click(disabledMenuOption);
+  expect(updateValue).not.toHaveBeenCalled();
+  expect(onSelectedItem).not.toHaveBeenCalled();
+
+  // Check sub menu works
+  const subTextInput = await getOption("Sub menu...");
+  expect(subTextInput).toBeInTheDocument();
+
+  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+
+  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");
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape to not save
+  updateValue.mockClear();
+  userEvent.type(textInput, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(textInput);
+  userEvent.type(textInput, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test filter
+  const filterText = await canvas.findByPlaceholderText("Filter...");
+  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

@@ -0,0 +1,92 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormEditBearing,
+  args: {},
+} as ComponentMeta<typeof GridFormEditBearing>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Interaction Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormEditBearingCorrectionInteractions_ = Template.bind({});
+GridFormEditBearingCorrectionInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Enter bearing correction");
+
+  // Test formatting null
+  expect(await canvas.findByText("–")).toBeInTheDocument();
+
+  // Test formatting a bearing
+  expect(inputField).toBeInTheDocument();
+  userEvent.type(inputField, "1.2345");
+  expect(await canvas.findByText("+1° 23' 45.0\"")).toBeInTheDocument();
+
+  // Test enter to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  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}");
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};

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

@@ -0,0 +1,91 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormEditBearing,
+  args: {},
+} as ComponentMeta<typeof GridFormEditBearing>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Interaction Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormEditBearingInteractions_ = Template.bind({});
+GridFormEditBearingInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Enter bearing");
+
+  // Test formatting null
+  expect(await canvas.findByText("–")).toBeInTheDocument();
+
+  // Test formatting a bearing
+  expect(inputField).toBeInTheDocument();
+  userEvent.type(inputField, "1.2345");
+  expect(await canvas.findByText("1° 23' 45\"")).toBeInTheDocument();
+
+  // Test enter to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  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}");
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};