@sproutsocial/seeds-react-menu 0.1.0

package/src/SingleSelectMenu/__tests__/SingleSelectMenu.test.tsx

@@ -0,0 +1,167 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import React from "react";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import {
+  SingleSelectMenu,
+  MenuToggleButton,
+  MenuContent,
+  MenuGroup,
+  MenuItemSelectable,
+  MenuFooter,
+} from "../../index";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+
+const menuItems = [
+  { id: "Select an option", index: 0, label: "Select an option" },
+  { id: "item-1", index: 1, label: "Item 1" },
+  { id: "item-2", index: 2, label: "Item 2" },
+  { id: "item-3", index: 3, label: "Item 3" },
+];
+
+describe("User Behavior", () => {
+  it("should set a selected item", async () => {
+    const checkOnChange = jest.fn();
+
+    const { user } = render(
+      <SingleSelectMenu
+        onSelectedItemChange={checkOnChange}
+        triggerElement={
+          <MenuToggleButton role="button">Click me</MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          <MenuGroup title="Menu Title">
+            {menuItems.map(({ id, label }) => (
+              <MenuItemSelectable key={id} id={id}>
+                {label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+
+    // Open the Menu
+    const toggleBtn = screen.getByRole("button", { name: "Click me" });
+    await user.click(toggleBtn);
+
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeVisible());
+
+    // Select the first option
+    const item1 = screen.getByRole("option", { name: menuItems[0].label });
+    expect(item1).toBeVisible();
+    await user.keyboard("{arrowdown}{enter}");
+
+    // Wait for menu to close
+    await waitFor(() =>
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+    );
+
+    expect(checkOnChange).toHaveBeenCalledTimes(1);
+
+    // Reopen the menu
+    await user.click(toggleBtn);
+
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeVisible());
+
+    // Check that the selected option is selected
+    expect(
+      screen.getByRole("option", { name: menuItems[0].label, selected: true })
+    ).toBeInTheDocument();
+  });
+
+  it("should keep menu open when a switch is selected in the menu footer", async () => {
+    const MenuFooterContent = () => {
+      const [isChecked, setIsChecked] = React.useState(false);
+      return (
+        <MenuFooter>
+          <ul>
+            <li>
+              <label htmlFor="switch-1">dark mode</label>
+              <Switch
+                id="switch-1"
+                checked={isChecked}
+                onClick={() => setIsChecked(!isChecked)}
+              />
+            </li>
+          </ul>
+        </MenuFooter>
+      );
+    };
+
+    const { user } = render(
+      <SingleSelectMenu
+        triggerElement={
+          <MenuToggleButton role="button">Click me</MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          <MenuGroup title="Menu Title">
+            {menuItems.map(({ id, label }) => (
+              <MenuItemSelectable key={id} id={id}>
+                {label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+        <MenuFooterContent />
+      </SingleSelectMenu>
+    );
+
+    // Open the Menu
+    const toggleBtn = screen.getByRole("button", { name: "Click me" });
+    await user.click(toggleBtn);
+
+    await waitFor(() => expect(screen.getByRole("listbox")).toBeVisible());
+
+    // Toggle the switch
+    const switchElement = screen.getByRole("switch", { name: "dark mode" });
+    await user.click(switchElement);
+
+    // Check that the switch is checked
+    expect(switchElement).toBeChecked();
+
+    // Check that the menu is still open
+    expect(screen.getByRole("listbox")).toBeVisible();
+  });
+});
+
+describe("API", () => {
+  it("should close automatically on selection", async () => {
+    const { user } = render(
+      <SingleSelectMenu
+        triggerElement={<MenuToggleButton>Click me</MenuToggleButton>}
+      >
+        <MenuContent>
+          <MenuGroup title="Menu Title">
+            {menuItems.map(({ id, label }) => (
+              <MenuItemSelectable key={id} id={id}>
+                {label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+
+    // Open the Menu
+    const menuButton = screen.getByText("Click me");
+    await user.click(menuButton);
+    expect(await screen.findByText("Menu Title")).toBeInTheDocument();
+
+    // Click one of the options
+    const menuItem = screen.getAllByRole("option")[0];
+    expect(menuItem).toBeInTheDocument();
+    await user.click(menuItem);
+
+    // Check that the menu closed
+    await waitFor(() =>
+      expect(screen.queryByText("Menu Title")).not.toBeInTheDocument()
+    );
+  });
+});

package/src/SingleSelectMenu/__tests__/SingleSelectMenu.typetest.tsx

@@ -0,0 +1,95 @@
+import {
+  SingleSelectMenu,
+  MenuContent,
+  MenuHeader,
+  MenuFooter,
+} from "../../index";
+
+export const SingleSelectMenuTypeTest = () => (
+  <>
+    {/* Valid SingleSelectMenu with minimal required props */}
+    <SingleSelectMenu triggerElement={<>test</>}>Test</SingleSelectMenu>
+    {/* Valid SingleSelectMenu allows MenuContent by itself as a child */}
+    <SingleSelectMenu triggerElement={<>test</>}>
+      <MenuContent>Test</MenuContent>
+    </SingleSelectMenu>
+    {/* Valid SingleSelectMenu allows multiple children without fragment */}
+    <SingleSelectMenu triggerElement={<>test</>}>
+      <MenuHeader>Test</MenuHeader>
+      <MenuContent>Test</MenuContent>
+      <MenuFooter>Test</MenuFooter>
+    </SingleSelectMenu>
+    {/* Valid SingleSelectMenu accepts Downshift props and functions for useSelect */}
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      onSelectedItemChange={() => {}}
+      selectedItem={null}
+      stateReducer={(c) => c}
+      onStateChange={() => {}}
+      getA11yStatusMessage={() => ""}
+      isOpen
+    >
+      Test
+    </SingleSelectMenu>
+
+    {/* @ts-expect-error - triggerElement is a required prop */}
+    <SingleSelectMenu>Test</SingleSelectMenu>
+    <SingleSelectMenu
+      /* @ts-expect-error - triggerElement must be a valid react element */
+      triggerElement="test"
+    >
+      Test
+    </SingleSelectMenu>
+    {/* @ts-expect-error - when no children provided */}
+    <SingleSelectMenu triggerElement="test" />
+
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - isOpen can't be a string */
+      isOpen="false"
+      /* @ts-expect-error - onSelectedItemChange can't be a string */
+      onSelectedItemChange="test"
+      /* @ts-expect-error - selectedItem can't be a string */
+      selectedItem="test"
+      /* @ts-expect-error - stateReducer must have a return value */
+      stateReducer={() => {}}
+    >
+      Test
+    </SingleSelectMenu>
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - onMultiSelectStateChange can't be used on SingleSelectMenu */
+      onMultiSelectStateChange={() => {}}
+    >
+      Test
+    </SingleSelectMenu>
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - selectedItems can't be used on SingleSelectMenu */
+      selectedItems={[]}
+    >
+      Test
+    </SingleSelectMenu>
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - multiSelectStateReducer can't be used on SingleSelectMenu */
+      multiSelectStateReducer={(c) => c}
+    >
+      Test
+    </SingleSelectMenu>
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - onMultiSelectStateChange can't be used on SingleSelectMenu */
+      onMultiSelectStateChange={() => {}}
+    >
+      Test
+    </SingleSelectMenu>
+    <SingleSelectMenu
+      triggerElement={<>test</>}
+      /* @ts-expect-error - getA11yMultiStatusMessage can't be used on SingleSelectMenu */
+      getA11yMultiStatusMessage={() => ""}
+    >
+      Test
+    </SingleSelectMenu>
+  </>
+);

package/src/SingleSelectMenu/index.ts

@@ -0,0 +1,3 @@
+export * from "./SingleSelectMenu";
+
+export * from "./SingleSelectMenuTypes";

package/src/__tests__/Menu.test.tsx

@@ -0,0 +1,423 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import {
+  ActionMenu,
+  MultiSelectMenu,
+  SingleSelectMenu,
+  MenuToggleButton,
+  MenuContent,
+  MenuItem,
+} from "../index";
+
+describe("Menu", () => {
+  describe.each([
+    { name: "ActionMenu", Component: ActionMenu },
+    { name: "MultiSelectMenu", Component: MultiSelectMenu },
+    { name: "SingleSelectMenu", Component: SingleSelectMenu },
+  ])("$name", ({ Component }) => {
+    it("should render the trigger button", () => {
+      render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+        >
+          Menu
+        </Component>
+      );
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(screen.queryByText("Menu")).not.toBeInTheDocument();
+    });
+
+    it("should default to open if initialIsOpen is true", () => {
+      render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          initialIsOpen
+        >
+          Menu
+        </Component>
+      );
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+        expanded: true,
+      });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(screen.getByText("Menu")).toBeInTheDocument();
+    });
+
+    it("should open when trigger button is clicked", async () => {
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+        >
+          Menu
+        </Component>
+      );
+
+      // Check that Menu is not open yet
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(screen.queryByText("Menu")).not.toBeInTheDocument();
+
+      // Click the menu trigger
+      await user.click(menuTrigger);
+
+      // Check that menu opens
+      expect(await screen.findByText("Menu")).toBeInTheDocument();
+    });
+
+    it("should open when trigger button is focused and enter key pressed", async () => {
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+        >
+          Menu
+        </Component>
+      );
+
+      // Check that Menu is not open yet
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(screen.queryByText("Menu")).not.toBeInTheDocument();
+
+      // Focus on trigger and activate with enter
+      menuTrigger.focus();
+      await user.keyboard("{enter}");
+
+      // Check that menu opens
+      expect(await screen.findByText("Menu")).toBeInTheDocument();
+    });
+
+    it("should open when trigger button is focused and space key pressed", async () => {
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+        >
+          Menu
+        </Component>
+      );
+
+      // Check that Menu is not open yet
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(screen.queryByText("Menu")).not.toBeInTheDocument();
+
+      // Focus on trigger and activate with space
+      menuTrigger.focus();
+      await user.keyboard(" ");
+
+      // Check that menu opens
+      expect(await screen.findByText("Menu")).toBeInTheDocument();
+    });
+
+    it("should close when trigger button is clicked while open", async () => {
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          initialIsOpen
+        >
+          Menu
+        </Component>
+      );
+
+      // Check that Menu is open
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(await screen.findByText("Menu")).toBeInTheDocument();
+
+      // Click the menu trigger
+      await user.click(menuTrigger);
+
+      // Check that menu closes
+      await waitFor(() =>
+        expect(screen.queryByText("Menu")).not.toBeInTheDocument()
+      );
+    });
+
+    it("should close when the ESC key is pressed", async () => {
+      const mockOnIsOpenChange = jest.fn();
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          onIsOpenChange={mockOnIsOpenChange}
+          initialIsOpen
+        >
+          Menu
+        </Component>
+      );
+
+      // Check that Menu is open
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      expect(menuTrigger).toBeInTheDocument();
+      expect(await screen.findByText("Menu")).toBeInTheDocument();
+
+      // Press esc key
+      await user.keyboard("{Esc}");
+
+      // Check that menu closes
+      await waitFor(() =>
+        expect(screen.queryByText("Menu")).not.toBeInTheDocument()
+      );
+      expect(mockOnIsOpenChange).toHaveBeenCalled();
+    });
+
+    it("should close when clicking outside of the menu", async () => {
+      const mockOnIsOpenChange = jest.fn();
+      const { user } = render(
+        <div>
+          <Component
+            triggerElement={
+              <MenuToggleButton role="button" aria-label="Open Menu">
+                Open
+              </MenuToggleButton>
+            }
+            onIsOpenChange={mockOnIsOpenChange}
+            initialIsOpen
+          >
+            Menu
+          </Component>
+          <button>Outside</button>
+        </div>
+      );
+
+      expect(await screen.findByText("Menu")).toBeInTheDocument();
+
+      // Click outside the menu
+      const otherButton = screen.getByRole("button", { name: "Outside" });
+      await user.click(otherButton);
+
+      // Check that menu closes
+      await waitFor(() =>
+        expect(screen.queryByText("Menu")).not.toBeInTheDocument()
+      );
+      expect(mockOnIsOpenChange).toHaveBeenCalled();
+    });
+
+    it("should call onSelectedItemChange when item clicked", async () => {
+      const mockOnSelectedItemChange = jest.fn();
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          onSelectedItemChange={mockOnSelectedItemChange}
+        >
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Wait till Menu is fully open
+      const menuItem = await screen.findByText("Item 1");
+
+      // Use click to activate menu item
+      await user.click(menuItem);
+
+      // Check that onSelectedItemChange is called
+      await waitFor(() => expect(mockOnSelectedItemChange).toHaveBeenCalled());
+    });
+
+    it("should call onSelectedItemChange when item selected with enter", async () => {
+      const mockOnSelectedItemChange = jest.fn();
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          onSelectedItemChange={mockOnSelectedItemChange}
+        >
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Wait till Menu is fully open
+      await screen.findByText("Item 1");
+
+      // Use enter to activate menu item
+      await user.keyboard("{arrowdown}{enter}");
+
+      // Check that onSelectedItemChange is called
+      await waitFor(() => expect(mockOnSelectedItemChange).toHaveBeenCalled());
+    });
+
+    it("should call onSelectedItemChange when item selected with space", async () => {
+      const mockOnSelectedItemChange = jest.fn();
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          onSelectedItemChange={mockOnSelectedItemChange}
+        >
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Wait till Menu is fully open
+      await screen.findByText("Item 1");
+
+      // Use space to activate menu item
+      await user.keyboard("{arrowdown} ");
+
+      // Check that onSelectedItemChange is called
+      await waitFor(() => expect(mockOnSelectedItemChange).toHaveBeenCalled());
+    });
+
+    it("should call onIsOpenChange when menu is opened or closed", async () => {
+      const mockOnIsOpenChange = jest.fn();
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          onIsOpenChange={mockOnIsOpenChange}
+        >
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open menu by clicking trigger
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Wait till menu is open
+      await screen.findByText("Item 1");
+
+      // Close menu by clicking trigger
+      await user.click(menuTrigger);
+
+      // Check that onIsOpenChange is called
+      await waitFor(() => expect(mockOnIsOpenChange).toHaveBeenCalledTimes(2));
+    });
+
+    it("should call onHighlightedIndexChange when navigating menu with the keyboard", async () => {
+      const mockOnHighlightedIndexChange = jest.fn();
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          onHighlightedIndexChange={mockOnHighlightedIndexChange}
+        >
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Wait till Menu is fully open
+      await screen.findByText("Item 1");
+
+      // Use arrowdown to navigate the menu
+      await user.keyboard("{arrowdown}");
+
+      // Check that onHighlightedIndexChange is called
+      await waitFor(() =>
+        expect(mockOnHighlightedIndexChange).toHaveBeenCalled()
+      );
+    });
+
+    it("should accept a custom stateReducer", async () => {
+      const mockStateReducer = jest.fn((state, { changes }) => changes);
+      const { user } = render(
+        <Component
+          triggerElement={
+            <MenuToggleButton role="button" aria-label="Open Menu">
+              Open
+            </MenuToggleButton>
+          }
+          stateReducer={mockStateReducer}
+        >
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Wait till Menu is fully open
+      await screen.findByText("Item 1");
+
+      // Use arrowdown and enter to select item
+      await user.keyboard("{arrowdown}{enter}");
+
+      // Check that stateReducer is called
+      await waitFor(() => expect(mockStateReducer).toHaveBeenCalledTimes(4));
+    });
+  });
+});

package/src/constants.ts

@@ -0,0 +1,17 @@
+export const MENU_ROLES = {
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox",
+} as const;
+
+export const MENU_ITEM_ROLES = {
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox",
+} as const;
+
+export type TypeMenuRoles = (typeof MENU_ROLES)[keyof typeof MENU_ROLES];
+export type TypeMenuItemRoles =
+  (typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES];