@sproutsocial/seeds-react-menu 0.5.0 → 1.0.0

package/src/MenuSearchInput/MenuSearchInput.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Input, type TypeInputProps } from "@sproutsocial/seeds-react-input";
+import {
+  useItemFiltering,
+  type TypeGetIsItemVisibleFn,
+} from "../hooks/useItemFiltering";
+import {
+  useMenuContentContext,
+  type TypeDownshiftSelectReturnValue,
+} from "../MenuContext";
+
+export interface TypeMenuSearchInputProps extends TypeInputProps {
+  /* A function that can be passed to override the default filtering logic */
+  getIsItemVisible?: TypeGetIsItemVisibleFn;
+}
+
+/**
+ * <input
+ *  aria-activedescendant=""
+ *  aria-autocomplete="list"
+ *  aria-controls="downshift-:r1:-menu"
+ *  aria-expanded="true"
+ * />
+ */
+
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-header/
+ *
+ * @description MenuSearchInput is search input that can be added to the MenuHeader to filter the items.
+ */
+export const MenuSearchInput = ({
+  getIsItemVisible,
+  inputProps,
+  ...restInputProps
+}: TypeMenuSearchInputProps) => {
+  const {
+    items,
+    itemToString,
+    setHiddenItemsMap,
+    isOpen,
+    getToggleButtonProps,
+  } = useMenuContentContext();
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems: items,
+    itemToString,
+    getIsItemVisible,
+    setHiddenItemsMap,
+  });
+
+  React.useEffect(() => {
+    // handles when open/close state changes or if input is controlled
+    updateFilteredItems({ inputValue: restInputProps.value || "" });
+  }, [isOpen, restInputProps.value]);
+
+  const toggleButtonProps: Partial<
+    ReturnType<Required<TypeDownshiftSelectReturnValue>["getToggleButtonProps"]>
+  > = getToggleButtonProps?.() || {};
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      // prevents selecting items with space key when input is focused
+      if (e.key === " ") return;
+      toggleButtonProps.onKeyDown?.(e);
+    },
+    [toggleButtonProps.onKeyDown]
+  );
+
+  return (
+    <Input
+      onChange={(e, value) => {
+        updateFilteredItems({ inputValue: value });
+      }}
+      // apply onKeyDown logic for downshift keyboard accessibility support
+      onKeyDown={handleKeyDown}
+      autoComplete={false}
+      aria-autocomplete="list"
+      inputProps={{
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
+        ...inputProps,
+      }}
+      {...restInputProps}
+    />
+  );
+};

package/src/MenuSearchInput/__tests__/MenuSearchInput.test.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import {
+  MenuHeader,
+  MenuContent,
+  MenuItem,
+  MenuToggleButton,
+  ActionMenu,
+  MultiSelectMenu,
+  SingleSelectMenu,
+  type TypeSingleSelectMenuProps,
+  type TypeMenuRootProps,
+} from "../../index";
+import {
+  MenuSearchInput,
+  type TypeMenuSearchInputProps,
+} from "../MenuSearchInput";
+
+const menuItems = [
+  { id: "item-0", index: 0, label: "Item 0" },
+  { id: "item-1", index: 1, label: "Item 1" },
+  { id: "item-2", index: 2, label: "Item 2" },
+  { id: "item-3", index: 3, label: "Item 3" },
+];
+
+const itemToString = (item) => (item ? menuItems[item.index].label : "");
+const defaultProps = (
+  props: Partial<TypeMenuSearchInputProps> = {}
+): TypeSingleSelectMenuProps => ({
+  menuToggleElement: (
+    <MenuToggleButton role="button" aria-label="Open Menu">
+      Open
+    </MenuToggleButton>
+  ),
+  itemToString: (item) => (item ? menuItems[item.index].label : ""),
+  children: (
+    <>
+      <MenuHeader title="Select Items">
+        <MenuSearchInput
+          id="search"
+          name="search"
+          type="search"
+          aria-label="Search"
+          {...props}
+        />
+      </MenuHeader>
+      <MenuContent>
+        {menuItems.map(({ id, label }) => (
+          <MenuItem key={id} id={id}>
+            {label}
+          </MenuItem>
+        ))}
+      </MenuContent>
+    </>
+  ),
+});
+
+describe("MenuSearchInput", () => {
+  describe.each([
+    { name: "ActionMenu", Component: ActionMenu },
+    { name: "MultiSelectMenu", Component: MultiSelectMenu },
+    { name: "SingleSelectMenu", Component: SingleSelectMenu },
+  ])("when in a $name", ({ name, Component }) => {
+    const menuItemRole = name === "ActionMenu" ? "menuitem" : "option";
+    it("should display suggestions when typing", async () => {
+      const { user } = render(<Component {...defaultProps()} />);
+
+      // Click the menu trigger
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+      });
+      await user.click(menuTrigger);
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item");
+      });
+      await waitFor(() => {
+        const suggestions = screen.getAllByRole(menuItemRole);
+        expect(suggestions.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("should select a suggestion when activated by the keyboard", async () => {
+      const handleSelectedItemChange = jest.fn();
+      const { user } = render(
+        <Component
+          onSelectedItemChange={handleSelectedItemChange}
+          {...defaultProps()}
+        />
+      );
+
+      // Click the menu trigger
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+      });
+      await user.click(menuTrigger);
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item");
+      });
+      await act(async () => {
+        await user.keyboard("{arrowdown}");
+        await user.keyboard("{enter}");
+      });
+      await waitFor(() => expect(handleSelectedItemChange).toHaveBeenCalled());
+    });
+
+    it("should use the custom filter function when getIsItemVisible is passed", async () => {
+      const customFilter: TypeMenuSearchInputProps["getIsItemVisible"] =
+        jest.fn((item, inputValue) =>
+          itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase())
+        );
+      const { user } = render(
+        <Component {...defaultProps({ getIsItemVisible: customFilter })} />
+      );
+
+      // Click the menu trigger
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+      });
+      await user.click(menuTrigger);
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item 0");
+      });
+
+      await waitFor(() =>
+        expect(screen.queryAllByRole(menuItemRole).length).toBe(1)
+      );
+
+      await act(async () => {
+        await user.clear(inputElement);
+        await user.type(inputElement, "0");
+      });
+
+      await waitFor(() =>
+        expect(screen.queryAllByRole(menuItemRole).length).toBe(0)
+      );
+
+      expect(customFilter).toHaveBeenCalled();
+    });
+  });
+});

package/src/MenuSearchInput/__tests__/MenuSearchInput.typetest.tsx

@@ -0,0 +1,31 @@
+import { MenuSearchInput } from "../MenuSearchInput";
+
+export const MenuSearchInputTypeTest = () => (
+  <>
+    {/* Valid with required props */}
+    <MenuSearchInput id="id" name="name" />
+    {/* Valid with optional input props */}
+    <MenuSearchInput
+      id="id"
+      name="name"
+      type="text"
+      aria-label="Search"
+      value=""
+      onChange={() => {}}
+    />
+    {/* Valid with optional getIsItemVisible prop */}
+    <MenuSearchInput
+      id="id"
+      name="name"
+      getIsItemVisible={(item, inputValue) => item.id.includes(inputValue)}
+    />
+    <MenuSearchInput
+      id="id"
+      name="name"
+      /* @ts-expect-error - getIsItemVisible must be a valid function */
+      getIsItemVisible=""
+      /* @ts-expect-error - onChange must be a valid function */
+      onChange=""
+    />
+  </>
+);

package/src/MenuSearchInput/index.ts

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

package/src/MenuSearchTokenInput/MenuSearchTokenInput.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import {
+  useItemFiltering,
+  type TypeGetIsItemVisibleFn,
+} from "../hooks/useItemFiltering";
+import {
+  MenuContentContext,
+  useMenuContentContext,
+  type TypeDownshiftSelectReturnValue,
+} from "../MenuContext";
+import {
+  MenuTokenInput,
+  type TypeMenuTokenInputProps,
+} from "../MenuTokenInput";
+
+export interface TypeMenuSearchTokenInputProps extends TypeMenuTokenInputProps {
+  /* A function that can be passed to override the default filtering logic */
+  getIsItemVisible?: TypeGetIsItemVisibleFn;
+}
+
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-search-token-input/
+ *
+ * @description MenuSearchTokenInput is search token input that can be added to the MenuHeader to filter the items.
+ */
+export const MenuSearchTokenInput = ({
+  getIsItemVisible,
+  getTokenProps,
+  onChange,
+  inputProps: { value: inputPropsValue, ...inputProps } = {},
+  value,
+  ...tokenInputProps
+}: TypeMenuSearchTokenInputProps) => {
+  const {
+    items,
+    itemToString,
+    setHiddenItemsMap,
+    isOpen,
+    getToggleButtonProps,
+  } = useMenuContentContext();
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems: items,
+    itemToString,
+    getIsItemVisible,
+    setHiddenItemsMap,
+  });
+
+  // set controlled value
+  const controlledValue =
+    value || inputPropsValue !== undefined ? `${inputPropsValue}` : undefined;
+
+  // internal state helps to keep track of the input value since it sometimes resets on its own
+  const [internalValue, setInternalValue] = React.useState(
+    controlledValue || ""
+  );
+
+  // any time state is updated, also update the filtered items
+  const updateFilteredState = React.useCallback(
+    // defaults to an empty string if no value is passed
+    (value: string = "") => {
+      setInternalValue(value);
+      updateFilteredItems({ inputValue: value });
+    },
+    [updateFilteredItems]
+  );
+
+  React.useEffect(() => {
+    // handles when input is controlled to keep internal state updated
+    updateFilteredState(controlledValue);
+  }, [controlledValue]);
+
+  React.useEffect(() => {
+    // handles when open/close state changes
+    updateFilteredState(controlledValue);
+  }, [isOpen]);
+
+  const toggleButtonProps: Partial<
+    ReturnType<Required<TypeDownshiftSelectReturnValue>["getToggleButtonProps"]>
+  > = getToggleButtonProps?.() || {};
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      // prevents selecting items with space key when input is focused
+      if (e.key === " ") return;
+      toggleButtonProps.onKeyDown?.(e);
+    },
+    [toggleButtonProps.onKeyDown]
+  );
+
+  return (
+    <MenuTokenInput
+      onChange={(e, value) => {
+        updateFilteredState(value);
+        onChange?.(e, value);
+      }}
+      // apply onKeyDown logic for downshift keyboard accessibility support
+      onKeyDown={handleKeyDown}
+      inputProps={{
+        value: internalValue,
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
+        ...inputProps,
+      }}
+      MenuContext={MenuContentContext}
+      {...tokenInputProps}
+    />
+  );
+};

package/src/MenuSearchTokenInput/__tests__/MenuSearchTokenInput.test.tsx

@@ -0,0 +1,247 @@
+import React from "react";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import {
+  MenuHeader,
+  MenuContent,
+  MenuItem,
+  MenuToggleButton,
+  ActionMenu,
+  MultiSelectMenu,
+  SingleSelectMenu,
+  type TypeSingleSelectMenuProps,
+  type TypeMenuRootProps,
+} from "../../index";
+import {
+  MenuSearchTokenInput,
+  type TypeMenuSearchTokenInputProps,
+} from "../MenuSearchTokenInput";
+
+const menuItems = [
+  { id: "item-0", index: 0, label: "Item 0" },
+  { id: "item-1", index: 1, label: "Item 1" },
+  { id: "item-2", index: 2, label: "Item 2" },
+  { id: "item-3", index: 3, label: "Item 3" },
+];
+
+const itemToString = (item) => (item ? menuItems[item.index].label : "");
+const defaultProps = (
+  props: Partial<TypeMenuSearchTokenInputProps> = {}
+): TypeSingleSelectMenuProps => ({
+  menuToggleElement: (
+    <MenuToggleButton role="button" aria-label="Open Menu">
+      Open
+    </MenuToggleButton>
+  ),
+  itemToString: (item) => (item ? menuItems[item.index].label : ""),
+  children: (
+    <>
+      <MenuHeader title="Select Items">
+        <MenuSearchTokenInput
+          id="search"
+          name="search"
+          aria-label="Search"
+          {...props}
+        />
+      </MenuHeader>
+      <MenuContent>
+        {menuItems.map(({ id, label }) => (
+          <MenuItem key={id} id={id}>
+            {label}
+          </MenuItem>
+        ))}
+      </MenuContent>
+    </>
+  ),
+});
+
+describe("MenuSearchTokenInput", () => {
+  describe.each([
+    { name: "ActionMenu", Component: ActionMenu },
+    { name: "MultiSelectMenu", Component: MultiSelectMenu },
+    { name: "SingleSelectMenu", Component: SingleSelectMenu },
+  ])("when in a $name", ({ name, Component }) => {
+    const menuItemRole = name === "ActionMenu" ? "menuitem" : "option";
+    it("should display suggestions when typing", async () => {
+      const { user } = render(<Component {...defaultProps()} />);
+
+      // Click the menu trigger
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+      });
+      await user.click(menuTrigger);
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item");
+      });
+      await waitFor(() => {
+        const suggestions = screen.getAllByRole(menuItemRole);
+        expect(suggestions.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("should select a suggestion when activated by the keyboard", async () => {
+      const handleSelectedItemChange = jest.fn();
+      const { user } = render(
+        <Component
+          onSelectedItemChange={handleSelectedItemChange}
+          {...defaultProps()}
+        />
+      );
+
+      // Click the menu trigger
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+      });
+      await user.click(menuTrigger);
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item");
+      });
+      await act(async () => {
+        await user.keyboard("{arrowdown}");
+        await user.keyboard("{enter}");
+      });
+      await waitFor(() => expect(handleSelectedItemChange).toHaveBeenCalled());
+    });
+
+    it("should use the custom filter function when getIsItemVisible is passed", async () => {
+      const customFilter: TypeMenuSearchTokenInputProps["getIsItemVisible"] =
+        jest.fn((item, inputValue) =>
+          itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase())
+        );
+      const { user } = render(
+        <Component {...defaultProps({ getIsItemVisible: customFilter })} />
+      );
+
+      // Click the menu trigger
+      const menuTrigger = screen.getByRole("button", {
+        name: "Open Menu",
+      });
+      await user.click(menuTrigger);
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item 0");
+      });
+
+      await waitFor(() =>
+        expect(screen.queryAllByRole(menuItemRole).length).toBe(1)
+      );
+
+      await act(async () => {
+        await user.clear(inputElement);
+        await user.type(inputElement, "0");
+      });
+
+      await waitFor(() =>
+        expect(screen.queryAllByRole(menuItemRole).length).toBe(0)
+      );
+
+      expect(customFilter).toHaveBeenCalled();
+    });
+  });
+
+  describe("when in a MultiSelectMenu", () => {
+    it("should render multiple selected items", () => {
+      render(
+        <MultiSelectMenu
+          {...defaultProps()}
+          initialSelectedItems={[menuItems[0], menuItems[1]]}
+          isOpen
+        />
+      );
+
+      // The menu trigger is also a button so can't be queried by the role
+      const selectedItems = screen.getAllByDataQaLabel({
+        "token-isdisabled": "false",
+      });
+      expect(selectedItems.length).toBe(2);
+      expect(selectedItems[0]).toHaveTextContent(menuItems[0].label);
+      expect(selectedItems[1]).toHaveTextContent(menuItems[1].label);
+    });
+
+    it("should add an item to the selected items list", async () => {
+      const { user } = render(
+        <MultiSelectMenu
+          {...defaultProps()}
+          initialSelectedItems={[menuItems[0]]}
+          isOpen
+        />
+      );
+
+      // Wait for the popout to finish opening
+      await waitFor(() =>
+        expect(
+          screen.getAllByDataQaLabel({
+            "popout-isopen": "true",
+          }).length
+        ).toBe(1)
+      );
+
+      // Type into the search input
+      const inputElement = screen.getByRole("searchbox") as HTMLInputElement;
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item 1");
+        await user.keyboard("{arrowdown}");
+        await user.keyboard("{enter}");
+      });
+
+      // The menu trigger is also a button so can't be queried by the role
+      const selectedItems = screen.getAllByDataQaLabel({
+        "token-isdisabled": "false",
+      });
+      screen.debug();
+      expect(selectedItems.length).toBe(2);
+      expect(selectedItems[1]).toHaveTextContent(menuItems[1].label);
+    });
+
+    it("should remove an item from the selected items list", async () => {
+      const handleChange = jest.fn();
+      const { user } = render(
+        <MultiSelectMenu
+          {...defaultProps()}
+          initialSelectedItems={[menuItems[0], menuItems[1]]}
+          onSelectedItemsChange={handleChange}
+          isOpen
+        />
+      );
+
+      // Wait for the popout to finish opening
+      await waitFor(() =>
+        expect(
+          screen.getAllByDataQaLabel({
+            "popout-isopen": "true",
+          }).length
+        ).toBe(1)
+      );
+
+      // Click on the first token to remove it
+      const token = screen.getByRole("button", {
+        name: menuItems[0].label,
+      });
+      await act(() => user.click(token));
+
+      // The menu trigger is also a button so can't be queried by the role
+      const selectedItems = screen.getAllByDataQaLabel({
+        "token-isdisabled": "false",
+      });
+      expect(selectedItems.length).toBe(1);
+      expect(selectedItems[0]).toHaveTextContent(menuItems[1].label);
+      await waitFor(() => expect(handleChange).toHaveBeenCalled());
+    });
+  });
+});

package/src/MenuSearchTokenInput/__tests__/MenuSearchTokenInput.typetest.tsx

@@ -0,0 +1,33 @@
+import { MenuSearchTokenInput } from "../MenuSearchTokenInput";
+
+export const MenuSearchTokenInputTypeTest = () => (
+  <>
+    {/* Valid with required props */}
+    <MenuSearchTokenInput id="id" name="name" />
+    {/* Valid with optional input props */}
+    <MenuSearchTokenInput
+      id="id"
+      name="name"
+      aria-label="Search"
+      value=""
+      onChange={() => {}}
+    />
+    {/* Valid with optional getIsItemVisible and getTokenProps prop */}
+    <MenuSearchTokenInput
+      id="id"
+      name="name"
+      getIsItemVisible={(item, inputValue) => item.id.includes(inputValue)}
+      getTokenProps={(itemId) => ({})}
+    />
+    <MenuSearchTokenInput
+      id="id"
+      name="name"
+      /* @ts-expect-error - getIsItemVisible must be a valid function */
+      getIsItemVisible=""
+      /* @ts-expect-error - getTokenProps must be a valid function */
+      getTokenProps=""
+      /* @ts-expect-error - onChange must be a valid function */
+      onChange=""
+    />
+  </>
+);

package/src/MenuSearchTokenInput/index.ts

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