@sproutsocial/seeds-react-menu 0.1.0

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import {
+  useSelect,
+  useMultipleSelection,
+  type UseSelectState,
+} from "downshift";
+import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import {
+  defaultUseSelectProps,
+  useSelectStateReducer,
+} from "../reducers/useSelectStateReducer";
+import { itemToString } from "../utils/itemToString";
+import { MenuRoot } from "../MenuRoot";
+import type { TypeMultiSelectMenuProps } from "./MultiSelectMenuTypes";
+import type { TypeDefaultItemProps } from "../types";
+
+const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
+  state,
+  actionAndChanges
+) => {
+  const { changes, type } = actionAndChanges;
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true, // keep the menu open after selection.
+        // TODO: Confirm that keeping highlightedIndex the same is the desired UX
+        // highlightedIndex: 0, // with the first option highlighted.
+        highlightedIndex: state.highlightedIndex, // keep highlightedIndex the same instead of returning to 0
+      };
+  }
+  return changes;
+};
+
+export const MultiSelectMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  getA11yMultiStatusMessage,
+  onMultiSelectStateChange,
+  multiSelectStateReducer,
+  ...useSelectProps
+}: TypeMultiSelectMenuProps) => {
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+
+  const multiSelectOverrides = Object.entries({
+    ...useSelectProps,
+    getA11yStatusMessage: getA11yMultiStatusMessage,
+    onStateChange: onMultiSelectStateChange,
+    stateReducer: multiSelectStateReducer,
+  }).reduce(
+    (a, [k, v]) => (v ? ((a[k] = v), a) : a),
+    {} as {
+      getA11yStatusMessage?: TypeMultiSelectMenuProps["getA11yMultiStatusMessage"];
+      onStateChange?: TypeMultiSelectMenuProps["onMultiSelectStateChange"];
+      stateReducer?: TypeMultiSelectMenuProps["multiSelectStateReducer"];
+    }
+  );
+  const {
+    getSelectedItemProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    getDropdownProps,
+    ...useMultipleSelectionReturnProps
+  } = useMultipleSelection<TypeDefaultItemProps>(multiSelectOverrides);
+
+  const { isOpen, ...useSelectReturnProps } = useSelect({
+    ...defaultUseSelectProps,
+    items: allMenuItems,
+    itemToString,
+    selectedItem: null,
+    defaultHighlightedIndex: 0,
+    stateReducer: (state, actionAndChanges) => {
+      let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      newState = useSelectStateReducer(state, actionAndChanges);
+      newState = selectReducerForMultiSelect(state, {
+        ...actionAndChanges,
+        changes: newState,
+      });
+      return externalStateReducer
+        ? externalStateReducer(state, {
+            ...actionAndChanges,
+            changes: newState,
+          })
+        : newState;
+    },
+    onStateChange: ({ type, selectedItem: newSelectedItem }) => {
+      switch (type) {
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+        case useSelect.stateChangeTypes.ItemClick:
+        case useSelect.stateChangeTypes.ToggleButtonBlur:
+          if (!newSelectedItem) break;
+          if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
+            removeSelectedItem(newSelectedItem);
+          } else {
+            addSelectedItem(newSelectedItem);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    ...useSelectProps,
+  });
+
+  return (
+    <MenuRoot
+      {...{
+        isListbox: true,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        getSelectedItemProps,
+        addSelectedItem,
+        removeSelectedItem,
+        selectedItems,
+        getDropdownProps,
+        getA11yMultiStatusMessage,
+        onMultiSelectStateChange,
+        multiSelectStateReducer,
+        ...useSelectProps,
+        ...useSelectReturnProps,
+        ...useMultipleSelectionReturnProps,
+      }}
+    >
+      {children}
+    </MenuRoot>
+  );
+};

package/src/MultiSelectMenu/MultiSelectMenuTypes.ts

@@ -0,0 +1,8 @@
+import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeDownshiftMultiSelectProps } from "../MenuContext";
+
+export interface TypeMultiSelectMenuProps
+  extends TypeMenuRootOwnProps,
+    TypeDownshiftMultiSelectProps {
+  children: TypeMenuRootProps["children"];
+}

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx

@@ -0,0 +1,349 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import {
+  MultiSelectMenu,
+  MenuContent,
+  MenuToggleButton,
+  MenuItemSelectable,
+  MenuGroup,
+} from "../../index";
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  cleanup,
+  waitFor,
+} from "@sproutsocial/seeds-react-testing-library";
+
+const menuItems = [
+  { id: "test-item-1", index: 0, label: "Item 1" },
+  { id: "test-item-2", index: 1, label: "Item 2" },
+  { id: "test-item-3", index: 2, label: "Item 3" },
+  { id: "test-item-4", index: 3, label: "Item 4" },
+];
+
+describe("MultiSelectMenu", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render the menuItemSelectables when provided as children", async () => {
+    const { user } = render(
+      <MultiSelectMenu
+        triggerElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItemSelectable key={item.id} id={item.id} label={item.label}>
+                {item.label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    // Check that the menu is closed
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    const toggleButton = screen.getByRole("button", { name: "testable menu" });
+
+    // Open Menu
+    await user.click(toggleButton);
+
+    await waitFor(() => {
+      // Check that the menu is open
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+      // Check that the menu items are present
+      expect(
+        screen.getByRole("option", { name: "Item 1" })
+      ).toBeInTheDocument();
+      expect(
+        // Check that the menu items are present
+        screen.getByRole("option", { name: "Item 2" })
+      ).toBeInTheDocument();
+    });
+  });
+
+  xit("should allow for multiple items to be selected", async () => {
+    const { user } = render(
+      <MultiSelectMenu
+        triggerElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItemSelectable
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    const toggleButton = screen.getByRole("button", { name: "testable menu" });
+
+    await user.click(toggleButton);
+
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+    const item2 = screen.getByRole("option", { name: "Item 2" });
+
+    // For some reason the pointer-events are not being set to none on render. This essentially waits for the pointer-events to be set to none before getting to the actual tests.
+    await waitFor(() => {
+      expect(item1).not.toHaveStyle("pointer-events: none");
+    });
+
+    // Select first item
+    await user.click(item1);
+
+    await waitFor(() => {
+      // Check that the first item is selected
+      expect(item1).toHaveAttribute("aria-checked", "true");
+    });
+
+    // Select second item
+    // TODO: can this be done in the same act as the first item?
+    await user.click(item2);
+
+    await waitFor(() => {
+      // Check that the second item is selected
+      expect(item2).toHaveAttribute("aria-checked", "true");
+    });
+  });
+
+  xit("Should maintain selected state when closed and reopened", async () => {
+    const { user } = render(
+      <MultiSelectMenu
+        triggerElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItemSelectable
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    const toggleButton = screen.getByRole("button", { name: "testable menu" });
+
+    // Open Menu
+    await user.click(toggleButton);
+
+    const item1 = screen.getByRole("option", { name: "Item 1" });
+
+    await waitFor(() => {
+      expect(item1).not.toHaveStyle("pointer-events: none");
+    });
+
+    // Select Item 1
+    await user.click(item1);
+
+    await waitFor(() => {
+      expect(item1).toHaveAttribute("aria-checked", "true");
+    });
+
+    // Close Menu (MultiSelect does not close automatically)
+    await user.click(toggleButton);
+
+    // Make sure the menu is closed
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    // Open menu again
+    await user.click(toggleButton);
+
+    await waitFor(() => {
+      // Make sure the menu is open
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+      // Make sure the item is still selected
+      expect(item1).toHaveAttribute("aria-checked", "true");
+    });
+  });
+
+  xit("should be able to navigate using the keyboard", async () => {
+    const { user } = render(
+      <MultiSelectMenu
+        triggerElement={
+          <MenuToggleButton aria-label="testable menu" role="button">
+            Testable Menu
+          </MenuToggleButton>
+        }
+      >
+        <MenuContent>
+          <MenuGroup>
+            {menuItems.map((item) => (
+              <MenuItemSelectable
+                key={item.id}
+                id={item.id}
+                data-testid={item.id}
+                label={item.label}
+              >
+                {item.label}
+              </MenuItemSelectable>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </MultiSelectMenu>
+    );
+
+    const toggleButton = screen.getByRole("button", { name: "testable menu" });
+
+    // Open Menu;
+    fireEvent.focus(toggleButton);
+    await user.keyboard("{Enter}");
+    await user.keyboard("{ArrowDown}");
+
+    await waitFor(() => {
+      // Check that the first item is highlighted
+      const item1 = screen.getByRole("option", { name: "Item 1" });
+      expect(item1).toHaveFocus();
+    });
+
+    // Select the first item
+    await user.keyboard("{Enter}");
+    await user.keyboard("{ArrowDown}");
+    // select the second item
+    await user.keyboard(" ");
+
+    await waitFor(() => {
+      // Check that the second item is focused and selected
+      const item2 = screen.getByRole("option", { name: "Item 2" });
+      expect(item2).toHaveFocus();
+      expect(item2).toBeChecked();
+
+      // Check that the first item is still selected
+      const item1 = screen.getByRole("menuitem", { name: "Item 1" });
+      expect(item1).toBeChecked();
+    });
+
+    xit("should stay open after menu item selection", async () => {
+      const { user } = render(
+        <MultiSelectMenu
+          triggerElement={
+            <MenuToggleButton aria-label="testable menu" role="button">
+              Testable Menu
+            </MenuToggleButton>
+          }
+        >
+          <MenuContent>
+            <MenuGroup>
+              {menuItems.map((item) => (
+                <MenuItemSelectable
+                  key={item.id}
+                  id={item.id}
+                  data-testid={item.id}
+                  label={item.label}
+                >
+                  {item.label}
+                </MenuItemSelectable>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </MultiSelectMenu>
+      );
+
+      const menuContentContainer = screen.queryByRole("listbox");
+
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+      const toggleButton = screen.getByRole("button", {
+        name: "testable menu",
+      });
+
+      // Open Menu
+      await user.click(toggleButton);
+
+      const item1 = screen.getByRole("option", { name: "Item 1" });
+
+      await waitFor(() => {
+        expect(item1).not.toHaveStyle("pointer-events: none");
+      });
+
+      // Select Item 1
+      await user.click(item1);
+
+      await waitFor(() => {
+        expect(menuContentContainer).toBeInTheDocument();
+      });
+    });
+
+    xit("Should work with a initially selected items", async () => {
+      const { user } = render(
+        <MultiSelectMenu
+          triggerElement={
+            <MenuToggleButton aria-label="testable menu" role="button">
+              Testable Menu
+            </MenuToggleButton>
+          }
+          defaultSelectedItems={[menuItems[1], menuItems[2]]}
+        >
+          <MenuContent>
+            <MenuGroup>
+              {menuItems.map((item) => (
+                <MenuItemSelectable
+                  key={item.id}
+                  id={item.id}
+                  data-testid={item.id}
+                  label={item.label}
+                >
+                  {item.label}
+                </MenuItemSelectable>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </MultiSelectMenu>
+      );
+
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+      const toggleButton = screen.getByRole("button", {
+        name: "testable menu",
+      });
+
+      // Open Menu
+      await user.click(toggleButton);
+
+      const item1 = screen.getByRole("option", { name: "Item 1" });
+      const item2 = screen.getByRole("option", { name: "Item 2" });
+      const item3 = screen.getByRole("option", { name: "Item 3" });
+
+      await waitFor(() => {
+        expect(item1).not.toHaveStyle("pointer-events: none");
+      });
+
+      act(() => {
+        // Check that the second item is selected
+        expect(item2).toHaveAttribute("aria-checked", "true");
+        // Check that the third item is selected
+        expect(item3).toHaveAttribute("aria-checked", "true");
+      });
+    });
+  });
+});

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.typetest.tsx

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

package/src/MultiSelectMenu/index.ts

@@ -0,0 +1 @@
+export * from "./MultiSelectMenu";

package/src/SingleSelectMenu/SingleSelectMenu.feature

@@ -0,0 +1,23 @@
+Feature: Single Select Menu
+
+  A Menu for selecting a single item from a list of items.
+
+	Rule: User Behavior
+		Background: 
+			Given an end user is interacting with the component
+
+			Scenario: SingleSelectMenu sets a selected item
+        When an item is selected
+        Then a selectedItem is set
+
+  Rule: API
+    Background:
+      Given an engineer is implementing a SingleSelectMenu
+
+      Scenario: SingleSelectMenu extends Menu
+        When Menu features are used in SingleSelectMenu
+        Then the SingleSelectMenu responds as a Menu would
+
+      Scenario: SingleSelectMenu can be set to automatically close after selection
+        When the closeMenuOnSelection prop is set to true
+        Then the menu automatically closes after an item is selected

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useSelect, type UseSelectState } from "downshift";
+import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import {
+  defaultUseSelectProps,
+  useSelectStateReducer,
+} from "../reducers/useSelectStateReducer";
+import { itemToString } from "../utils/itemToString";
+import { MenuRoot } from "../MenuRoot";
+import type { TypeDefaultItemProps } from "../types";
+import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
+
+export const SingleSelectMenu = ({
+  children,
+  stateReducer: externalStateReducer,
+  ...useSelectProps
+}: TypeSingleSelectMenuProps) => {
+  /** Import the manipulated map of menu items from the context */
+  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+
+  /**
+   * Destructure Downshift props and call the core useSelect with the new menu items and state handler
+   */
+  const { isOpen, ...useSelectReturnProps } = useSelect({
+    ...defaultUseSelectProps,
+    items: allMenuItems,
+    itemToString,
+    stateReducer: (state, actionAndChanges) => {
+      let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
+      newState = useSelectStateReducer(state, actionAndChanges);
+      return externalStateReducer
+        ? externalStateReducer(state, {
+            ...actionAndChanges,
+            changes: newState,
+          })
+        : newState;
+    },
+    ...useSelectProps,
+  });
+
+  return (
+    <MenuRoot
+      {...{
+        isListbox: true,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        ...useSelectProps,
+        ...useSelectReturnProps,
+      }}
+    >
+      {children}
+    </MenuRoot>
+  );
+};

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

@@ -0,0 +1,9 @@
+import type { UseSelectProps } from "downshift";
+import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeDefaultItemProps } from "../types";
+
+export interface TypeSingleSelectMenuProps
+  extends TypeMenuRootOwnProps,
+    Partial<UseSelectProps<TypeDefaultItemProps>> {
+  children: TypeMenuRootProps["children"];
+}