@linzjs/step-ag-grid 8.4.2 → 9.0.0

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

@@ -0,0 +1,171 @@
+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 {
+  GridFormPopoverMenu,
+  PopoutMenuSeparator,
+  SelectedMenuOptionResult,
+} from "../../../components/gridForm/GridFormPopoverMenu";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+import { GridBaseRow } from "../../../components/Grid";
+import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
+import { GridFormSubComponentTextArea } from "../../../components/gridForm/GridFormSubComponentTextArea";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormPopoverMenu,
+  args: {},
+} as ComponentMeta<typeof GridFormPopoverMenu>;
+
+const updateValue = jest
+  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
+  .mockImplementation(async (saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => {
+    await saveFn([]);
+  });
+
+const enabledAction = jest
+  .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
+  .mockResolvedValue(undefined);
+
+const disabledAction = jest
+  .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
+  .mockResolvedValue(undefined);
+
+const Template: ComponentStory<typeof GridFormPopoverMenu> = (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>
+          }
+        >
+          <GridFormPopoverMenu
+            {...props}
+            options={async () => [
+              { label: "Enabled", value: 1, action: enabledAction },
+              PopoutMenuSeparator,
+              { label: "Disabled", value: 0, disabled: true, action: disabledAction },
+              {
+                label: "Sub text input",
+                value: 0,
+                subComponent: () => (
+                  <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+                ),
+              },
+              {
+                label: "Sub text area",
+                value: 0,
+                subComponent: () => (
+                  <GridFormSubComponentTextArea placeholder={"Text area"} maxLength={5} required defaultValue={""} />
+                ),
+              },
+              { label: "ERROR! this should be hidden", value: 3, hidden: true },
+            ]}
+          />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormPopoverMenuInteractions_ = Template.bind({});
+GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const getOption = (name: string) => canvas.findByRole("menuitem", { name });
+
+  const enabledMenuOption = await getOption("Enabled");
+  expect(enabledMenuOption).toBeInTheDocument();
+  userEvent.click(enabledMenuOption);
+  expect(enabledAction).toHaveBeenCalled();
+
+  enabledAction.mockClear();
+  const disabledMenuOption = await getOption("Disabled");
+  expect(disabledMenuOption).toBeInTheDocument();
+  userEvent.click(disabledMenuOption);
+  expect(disabledAction).not.toHaveBeenCalled();
+
+  // Sub input tests
+  const subTextInput = await getOption("Sub text input");
+  expect(subTextInput).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+
+  const subTextArea = await getOption("Sub text area");
+  expect(subTextArea).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText("Text area")).not.toBeInTheDocument();
+
+  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");
+  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();
+
+  // Sub text area tests
+  subTextArea.click();
+
+  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();
+
+  userEvent.type(textArea, "Hello");
+  expect(await canvas.findByText("Press 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(textArea, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(textArea);
+  userEvent.type(textArea, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+};

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

@@ -0,0 +1,78 @@
+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 { GridFormTextArea } from "../../../components/gridForm/GridFormTextArea";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormTextArea,
+  args: {},
+} as ComponentMeta<typeof GridFormTextArea>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormTextArea> = (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>
+          }
+        >
+          <GridFormTextArea {...props} required={true} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormTextAreaInteractions_ = Template.bind({});
+GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Type here");
+  userEvent.type(inputField, "Hello");
+
+  expect(await canvas.findByText("Press 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 not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(inputField);
+
+  expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};

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

@@ -0,0 +1,85 @@
+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 { GridFormTextInput } from "../../../components/gridForm/GridFormTextInput";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormTextInput,
+  args: {},
+} as ComponentMeta<typeof GridFormTextInput>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormTextInput> = (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>
+          }
+        >
+          <GridFormTextInput {...props} required={true} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormTextInputInteractions_ = Template.bind({});
+GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Type here");
+  userEvent.type(inputField, "Hello");
+
+  expect(canvas.getByText("Press enter or tab to save")).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.clear(inputField);
+
+  expect(canvas.getByText("Must not be empty")).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/{gridForm → gridFormStatic}/GridFormDropDown.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormDropDown,
   args: {},
 } as ComponentMeta<typeof GridFormDropDown>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormEditBearing.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormEditBearing,
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormEditBearingCorrection.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormEditBearing,
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormMessage.stories.tsx

@@ -8,7 +8,7 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { useRef } from "react";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormMessage,
   args: {},
 } as ComponentMeta<typeof GridFormMessage>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormMultiSelect.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormMultiSelect,
   args: {},
 } as ComponentMeta<typeof GridFormMultiSelect>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormPopoverMenu.stories.tsx

@@ -13,7 +13,7 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormPopoverMenu,
   args: {},
 } as ComponentMeta<typeof GridFormPopoverMenu>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormTextArea.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormTextArea,
   args: {},
 } as ComponentMeta<typeof GridFormTextArea>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormTextInput.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormTextInput,
   args: {},
 } as ComponentMeta<typeof GridFormTextInput>;

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 {