@linzjs/step-ag-grid 8.4.3 → 9.0.0

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

@@ -24,7 +24,7 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
   return (
     <div className={"react-menu-inline-test"}>
       <GridContextProvider>
-        <h6 ref={anchorRef}>Test</h6>
+        <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={
             {

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

@@ -0,0 +1,153 @@
+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 {
+  GridFormMultiSelect,
+  GridFormMultiSelectProps,
+  GridFormMultiSelectSaveProps,
+  MultiSelectOption,
+} from "../../../components/gridForm/GridFormMultiSelect";
+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";
+import { wait } from "../../../utils/util";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormMultiSelect,
+  args: {},
+} as ComponentMeta<typeof GridFormMultiSelect>;
+
+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 onSave = jest.fn<Promise<boolean>, [GridFormMultiSelectSaveProps<any>]>().mockImplementation(async () => true);
+
+const options = Object.freeze([
+  { label: "Zero", value: 0 },
+  { label: "One", value: 1 },
+  {
+    label: "Sub component",
+    value: 2,
+    subComponent: () => (
+      <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+    ),
+  },
+  { label: "Other", value: 3 },
+]) as MultiSelectOption[];
+
+const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
+  const config: GridFormMultiSelectProps<any> = {
+    filtered: true,
+    onSave,
+    options,
+  };
+  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>
+            }
+          >
+            <GridFormMultiSelect {...props} {...config} />
+          </GridPopoverContext.Provider>
+        </div>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormMultiSelectInteractions_ = Template.bind({});
+GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const getOption = (name: RegExp | string) => canvas.findByRole("menuitem", { name });
+
+  // Check enabled menu handles click
+  const zeroMenuOption = await getOption(/Zero/);
+  expect(zeroMenuOption).toBeInTheDocument();
+
+  userEvent.click(zeroMenuOption);
+  userEvent.keyboard("{Tab}");
+  expect(updateValue).toHaveBeenCalled();
+  expect(onSave).toHaveBeenCalledWith({ selectedOptions: [options[0]], selectedRows: [] });
+
+  // Check sub menu works
+  const subTextInput = await getOption(/Sub component/);
+  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.click(textInput);
+  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();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+  expect(onSave).toHaveBeenCalledWith({
+    selectedRows: [],
+    selectedOptions: [
+      { label: "Zero", value: 0, checked: true },
+      { label: "Sub component", value: 2, checked: true, subValue: "Hello", subComponent: expect.anything() },
+    ],
+  });
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  onSave.mockClear();
+  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}");
+  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}");
+  expect(updateValue).not.toHaveBeenCalled();
+  expect(onSave).not.toHaveBeenCalled();
+
+  // Test filter
+  const filterText = await canvas.findByPlaceholderText("Filter...");
+  userEvent.type(filterText, "o");
+  await wait(500);
+  expect(canvas.queryByText("One")).toBeInTheDocument();
+  expect(canvas.queryByText("Other")).toBeInTheDocument();
+  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();
+};

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

@@ -42,7 +42,7 @@ const Template: ComponentStory<typeof GridFormPopoverMenu> = (props) => {
   return (
     <div className={"react-menu-inline-test"}>
       <GridContextProvider>
-        <h6 ref={anchorRef}>Test</h6>
+        <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={
             {

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

@@ -23,7 +23,7 @@ const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
   return (
     <div className={"react-menu-inline-test"}>
       <GridContextProvider>
-        <h6 ref={anchorRef}>Test</h6>
+        <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={
             {

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

@@ -23,7 +23,7 @@ const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
   return (
     <div className={"react-menu-inline-test"}>
       <GridContextProvider>
-        <h6 ref={anchorRef}>Test</h6>
+        <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={
             {

package/src/stories/react-menu/ReactMenu.stories.tsx

@@ -1,6 +1,9 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { Grid } from "../../components/Grid";
-import { Menu, MenuItem, MenuButton, MenuDivider, SubMenu } from "../../react-menu3";
+import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "../../react-menu3";
+import { userEvent, within } from "@storybook/testing-library";
+import { wait } from "../../utils/util";
+import { expect, jest } from "@storybook/jest";
 
 export default {
   title: "Components / React-menu",
@@ -11,11 +14,14 @@ export default {
   },
 } as ComponentMeta<typeof Grid>;
 
+const menuItemClickAction = jest.fn();
+const newFileAction = jest.fn();
+
 const ReactMenuTemplate: ComponentStory<typeof Grid> = () => {
   return (
     <>
-      <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
-        <MenuItem>New File</MenuItem>
+      <Menu menuButton={<MenuButton>Open menu</MenuButton>} onItemClick={menuItemClickAction}>
+        <MenuItem onClick={newFileAction}>New File</MenuItem>
         <MenuItem>Save</MenuItem>
         <SubMenu label="Edit">
           <MenuItem>Cut</MenuItem>
@@ -31,3 +37,60 @@ const ReactMenuTemplate: ComponentStory<typeof Grid> = () => {
 };
 
 export const ReactMenuControlled = ReactMenuTemplate.bind({});
+ReactMenuControlled.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const keyboard = async (key: string) => {
+    userEvent.keyboard(key);
+    await wait(100); // Wait for debounce
+  };
+
+  const menuButton = await canvas.findByRole("button");
+  expect(menuButton).toBeInTheDocument();
+
+  const openMenu = async () => {
+    await wait(500); // Wait for debounce
+    userEvent.click(menuButton);
+    expect(await canvas.findByRole("menuitem", { name: "New File" })).toBeInTheDocument();
+  };
+
+  // Check menu closes on click outside
+  await openMenu();
+  userEvent.click(menuButton.parentElement as Element);
+  expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
+
+  // Test arrow down/up
+  await openMenu();
+  await keyboard("{arrowdown}");
+  await keyboard("{arrowdown}");
+  await keyboard("{arrowdown}");
+  await keyboard("{arrowdown}");
+  await keyboard("{arrowdown}");
+  expect(document.activeElement?.innerHTML).toBe("Exit");
+
+  await keyboard("{arrowup}");
+  expect(document.activeElement?.innerHTML).toBe("Print...");
+
+  // Escape close
+  userEvent.type(menuButton.parentElement as Element, "{Escape}");
+  expect(canvas.queryByRole("menuitem", { name: "New File" })).not.toBeInTheDocument();
+
+  // Test enter to select
+  await openMenu();
+  await keyboard("{arrowdown}");
+  await keyboard("{enter}");
+  expect(menuItemClickAction).toHaveBeenCalled();
+  expect(newFileAction).toHaveBeenCalled();
+
+  menuItemClickAction.mockClear();
+  newFileAction.mockClear();
+
+  // Test tab to select
+  await openMenu();
+  await keyboard("{arrowdown}");
+  await keyboard("{Tab}");
+  expect(menuItemClickAction).toHaveBeenCalled();
+  expect(newFileAction).toHaveBeenCalled();
+
+  newFileAction.mockClear();
+};

package/src/styles/Grid.scss

@@ -5,6 +5,8 @@
 .Grid-container {
   flex: 1;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .Grid-sortIsStale {
@@ -20,6 +22,7 @@
 .Grid-quickFilter {
   width: 100%;
   margin-bottom: 16px;
+  flex: 0;
 }
 
 .Grid-quickFilterBox {

package/src/utils/testUtil.ts

@@ -128,6 +128,7 @@ export const validateMenuOptions = async (
 export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
   await act(async () => {
     const menuOption = await findMenuOption(menuOptionText);
+    // eslint-disable-next-line testing-library/await-async-utils
     userEvent.click(menuOption);
   });
 };

package/src/utils/textMatcher.test.ts

@@ -0,0 +1,38 @@
+import { textMatch } from "./textMatcher";
+
+/**
+ * "L" => L*
+ * "=L" => L
+ * "*L*" => *L*
+ * "*L" => *L
+ * "A B" => A* and B*
+ * "A B, C" => (A* and B*) or C*
+ * "!A" => all values must not match A
+ * "=!A" => all values must not match exactly A
+ * Returns true if there's a text match.
+ */
+describe("textMatch", () => {
+  test("textMatch", () => {
+    const validate = [
+      {
+        value: "",
+        matched: [""],
+        unmatched: ["a", "a*", "*a*"],
+      },
+      {
+        value: "two words",
+        matched: ["", "*wo", "*or*", "tw", "two", "tw wo", "tw, rr", "=!tw"],
+        unmatched: ["ds", "o", "=tw", "tw rr", "!two", "!tw*"],
+      },
+    ];
+
+    validate.forEach((v) => {
+      for (const filter of v.matched) {
+        expect(textMatch(v.value, filter), `Must match text: ${v.value} filter: ${filter}`).toBe(true);
+      }
+      for (const filter of v.unmatched) {
+        expect(textMatch(v.value, filter), `Mustn't match text: ${v.value} filter: ${filter}`).toBe(false);
+      }
+    });
+  });
+});

package/src/utils/textMatcher.ts

@@ -5,7 +5,7 @@ import { isMatch } from "matcher";
  * Text matching with wildcards and multiple matchers.
  *
  * "L" => L*
- * "L*" => L*
+ * "=L" => L
  * "*L*" => *L*
  * "*L" => *L
  * "A B" => A* and B*
@@ -19,8 +19,15 @@ export const textMatch = (text: string | undefined | null, filter: string): bool
   const superFilters = filter
     .split(",")
     .map((sf) => sf.trim())
-    .filter((sf) => sf);
+    .filter((sf) => sf)
+    .map((r) =>
+      r
+        .split(/\s+/)
+        .map((f) => (f.startsWith("=") ? f.slice(1) : f + "*"))
+        .join(" "),
+    );
   const [negativeFilters, positiveFilters] = partition(superFilters, (superFilters) => superFilters.startsWith("!"));
+
   const values = text.replaceAll(",", " ").trim().split(/\s+/);
   return (
     (isEmpty(positiveFilters) || // Not filtered