@sproutsocial/seeds-react-menu 0.5.0 → 0.6.0

package/src/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -5,9 +5,10 @@ import {
   waitFor,
   act,
 } from "@sproutsocial/seeds-react-testing-library";
-import { MenuContent, MenuItem } from "../../index";
+import { MenuContent, MenuItem, type TypeMenuRootProps } from "../../index";
 import { Autocomplete } from "../Autocomplete";
 import { AutocompleteInput } from "../AutocompleteInput";
+import { AutocompleteTokenInput } from "../AutocompleteTokenInput";
 import type { TypeAutocompleteProps } from "../AutocompleteTypes";
 
 const menuItems = [
@@ -74,6 +75,7 @@ describe("Autocomplete Component", () => {
     const suggestion = screen.getByRole("option", { name: menuItems[0].label });
     await act(() => user.click(suggestion));
     await waitFor(() => expect(inputElement.value).toBe(menuItems[0].label));
+    await act(async () => await user.click(inputElement));
     expect(suggestion).toHaveAttribute("aria-selected", "true");
   });
 
@@ -145,7 +147,8 @@ describe("Autocomplete Component", () => {
 
   it("should use the custom filter function when getIsItemVisible is passed", async () => {
     const customFilter: TypeAutocompleteProps["getIsItemVisible"] = jest.fn(
-      (item, inputValue) => itemToString(item).includes(inputValue)
+      (item, inputValue) =>
+        itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase())
     );
     const { user } = render(
       <Autocomplete
@@ -156,11 +159,176 @@ describe("Autocomplete Component", () => {
     const inputElement = screen.getByRole("combobox");
     await act(async () => {
       await user.click(inputElement);
+      await user.type(inputElement, "item 0");
+    });
+
+    await waitFor(() => expect(screen.queryAllByRole("option").length).toBe(1));
+
+    await act(async () => {
+      await user.clear(inputElement);
       await user.type(inputElement, "0");
     });
 
-    await waitFor(() => expect(screen.getAllByRole("option").length).toBe(1));
+    await waitFor(() => expect(screen.queryAllByRole("option").length).toBe(0));
 
     expect(customFilter).toHaveBeenCalled();
   });
+
+  describe("in multiSelect mode", () => {
+    it("should render multiple selected items", () => {
+      render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          initialSelectedItems={[menuItems[0], menuItems[1]]}
+          multiSelect
+        />
+      );
+      const selectedItems = screen.getAllByRole("button");
+      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(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          initialSelectedItems={[menuItems[0]]}
+          multiSelect
+        />
+      );
+      const inputElement = screen.getByRole("combobox");
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item 1");
+      });
+      const suggestion = screen.getByRole("option", {
+        name: menuItems[1].label,
+      });
+      await act(() => user.click(suggestion));
+      const selectedItems = screen.getAllByRole("button");
+      expect(selectedItems.length).toBe(2);
+      expect(selectedItems[1]).toHaveTextContent(menuItems[1].label);
+    });
+
+    it("should remove an item from the selected items list", async () => {
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          initialSelectedItems={[menuItems[0], menuItems[1]]}
+          multiSelect
+        />
+      );
+      const token = screen.getByRole("button", {
+        name: menuItems[0].label,
+      });
+      await act(() => user.click(token));
+      const selectedItems = screen.getAllByRole("button");
+      expect(selectedItems.length).toBe(1);
+      expect(selectedItems[0]).toHaveTextContent(menuItems[1].label);
+    });
+
+    it("should call onSelectedItemsChange when an item is added", async () => {
+      const handleChange = jest.fn();
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          onSelectedItemsChange={handleChange}
+          multiSelect
+        />
+      );
+
+      const testOption = menuItems[1];
+      const inputElement = screen.getByRole("combobox");
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, testOption.label);
+      });
+
+      const suggestion = screen.getByRole("option", {
+        name: testOption.label,
+      });
+      await act(() => user.click(suggestion));
+      await waitFor(() => expect(handleChange).toHaveBeenCalled());
+    });
+
+    it("should call onSelectedItemsChange when an item is removed", async () => {
+      const testOption = menuItems[0];
+      const handleChange = jest.fn();
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          initialSelectedItems={[testOption]}
+          onSelectedItemsChange={handleChange}
+          multiSelect
+        />
+      );
+
+      const token = screen.getByRole("button", {
+        name: testOption.label,
+      });
+      await act(() => user.click(token));
+      await waitFor(() => expect(handleChange).toHaveBeenCalled());
+    });
+
+    it("hides selected items in the suggestions list", async () => {
+      const testOption = menuItems[0];
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          initialSelectedItems={[testOption]}
+          multiSelect
+        />
+      );
+
+      const inputElement = screen.getByRole("combobox");
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item");
+      });
+
+      waitFor(() =>
+        expect(screen.getAllByRole("option")).toHaveLength(menuItems.length - 1)
+      );
+      expect(
+        screen.queryByRole("option", {
+          name: testOption.label,
+        })
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows selected items in the suggestions list when showSelectedItemsInDropdown is true", async () => {
+      const testOption = menuItems[0];
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteTokenInput />}
+          initialSelectedItems={[testOption]}
+          multiSelect
+          showSelectedItemsInDropdown
+        />
+      );
+
+      const inputElement = screen.getByRole("combobox");
+      await act(async () => {
+        await user.click(inputElement);
+        await user.type(inputElement, "item");
+      });
+
+      waitFor(() =>
+        expect(screen.getAllByRole("option")).toHaveLength(menuItems.length)
+      );
+      expect(
+        screen.getByRole("option", {
+          name: testOption.label,
+        })
+      ).toBeInTheDocument();
+    });
+  });
 });

package/src/Autocomplete/__tests__/Autocomplete.typetest.tsx

@@ -5,6 +5,7 @@ import {
   MenuHeader,
   MenuFooter,
   MenuItem,
+  type TypeMenuItemProps,
 } from "../../index";
 
 export const AutocompleteTypeTest = () => (
@@ -21,15 +22,15 @@ export const AutocompleteTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </Autocomplete>
-    {/* Valid Autocomplete allows items to be passed using the items prop */}
+    {/* Valid Autocomplete allows menuItems to be passed using the menuItems prop */}
     <Autocomplete
       menuToggleElement={<>test</>}
-      items={[{ children: "Item Name", id: "item-1" }]}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
     />
-    {/* Valid Autocomplete allows items to be rendered using MenuItemComponent */}
+    {/* Valid Autocomplete allows menuItems to be rendered using MenuItemComponent */}
     <Autocomplete
       menuToggleElement={<>test</>}
-      items={[{ children: "Item Name", id: "item-1" }]}
+      menuItems={[{ children: "Item Name", id: "item-1" }]}
       MenuItemComponent={MenuItem}
     />
     {/* Valid Autocomplete allows getIsItemVisible function */}
@@ -48,6 +49,27 @@ export const AutocompleteTypeTest = () => (
     >
       Test
     </Autocomplete>
+    {/* Valid Autocomplete allows multiSelect false */}
+    <Autocomplete menuToggleElement={<>test</>} multiSelect={false}>
+      Test
+    </Autocomplete>
+    {/* Valid Autocomplete allows multiSelect true */}
+    <Autocomplete menuToggleElement={<>test</>} multiSelect={true}>
+      Test
+    </Autocomplete>
+    {/* Valid Autocomplete allows multiSelect with valid multiSelect props */}
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect
+      showSelectedItemsInDropdown
+      onSelectedItemsChange={() => {}}
+      selectedItems={[]}
+      multiSelectStateReducer={(c) => c}
+      onMultiSelectStateChange={() => {}}
+      getA11yMultiStatusMessage={() => ""}
+    >
+      Test
+    </Autocomplete>
     {/* @ts-expect-error - menuToggleElement is a required prop */}
     <Autocomplete>Test</Autocomplete>
     <Autocomplete
@@ -58,8 +80,8 @@ export const AutocompleteTypeTest = () => (
     </Autocomplete>
     {/* @ts-expect-error - when no children or items provided */}
     <Autocomplete menuToggleElement={<>test</>} />
-    {/* @ts-expect-error - when both children and items provided */}
-    <Autocomplete menuToggleElement={<>test</>} items={[]}>
+    {/* @ts-expect-error - when both children and menuItems provided */}
+    <Autocomplete menuToggleElement={<>test</>} menuItems={[]}>
       Test
     </Autocomplete>
     {/* @ts-expect-error - when MenuItemComponent is passed with children */}
@@ -68,10 +90,13 @@ export const AutocompleteTypeTest = () => (
     </Autocomplete>
     <Autocomplete
       menuToggleElement={<>test</>}
-      items={[]}
+      menuItems={[] as TypeMenuItemProps[]}
       /* @ts-expect-error - when MenuItemComponent has the wrong type */
-      MenuItemComponent={MenuFooter}
+      MenuItemComponent={true}
+      // TODO: Fix TypeChildrenOrItems so this fails
+      // MenuItemComponent={MenuFooter}
     ></Autocomplete>
+    {/* Valid Autocomplete rejects invalid props when not multiSelect */}
     <Autocomplete
       menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */
@@ -87,5 +112,62 @@ export const AutocompleteTypeTest = () => (
     >
       Test
     </Autocomplete>
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect={false}
+      /* @ts-expect-error - onSelectedItemsChange is not valid for multiSelect false */
+      onSelectedItemsChange={() => {}}
+    >
+      Test
+    </Autocomplete>
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect={false}
+      /* @ts-expect-error - selectedItems is not valid for multiSelect false */
+      selectedItems={[]}
+    >
+      Test
+    </Autocomplete>
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect={false}
+      /* @ts-expect-error - multiSelectStateReducer is not valid for multiSelect false */
+      multiSelectStateReducer={(c) => c}
+    >
+      Test
+    </Autocomplete>
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect={false}
+      /* @ts-expect-error - onMultiSelectStateChange is not valid for multiSelect false */
+      onMultiSelectStateChange={() => {}}
+    >
+      Test
+    </Autocomplete>
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect={false}
+      /* @ts-expect-error - getA11yMultiStatusMessage is not valid for multiSelect false */
+      getA11yMultiStatusMessage={() => ""}
+    >
+      Test
+    </Autocomplete>
+    {/* Valid Autocomplete rejects invalid props for multiSelect */}
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      multiSelect
+      /* @ts-expect-error - showSelectedItemsInDropdown can't be a string */
+      showSelectedItemsInDropdown="true"
+      /* @ts-expect-error - onSelectedItemsChange can't be a string */
+      onSelectedItemsChange="test"
+      /* @ts-expect-error - selectedItems can't null */
+      selectedItems={null}
+      /* @ts-expect-error - multiSelectStateReducer must have a return value */
+      multiSelectStateReducer={() => {}}
+      /* @ts-expect-error - onMultiSelectStateChange can't be a string */
+      onMultiSelectStateChange="test"
+    >
+      Test
+    </Autocomplete>
   </>
 );

package/src/MenuContent/MenuContent.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Link } from "@sproutsocial/seeds-react-link";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+import { StorybookMenuToggleButton } from "../storybookUtilities/menu-storybook-components";
+import {
+  MenuHeader,
+  MenuLabel,
+  MenuContent,
+  MenuItem,
+  SingleSelectMenu,
+  MenuFooter,
+  MenuGroup,
+} from "../index";
+
+const meta: Meta<typeof MenuContent> = {
+  title: "Under Development/Primitives/MenuContent",
+  component: MenuContent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuContent>;
+
+interface TypeBook {
+  id: string;
+  author: string;
+  title: string;
+}
+
+const books: TypeBook[] = [
+  { id: "book-1", author: "Harper Lee", title: "To Kill a Mockingbird" },
+  { id: "book-2", author: "Lev Tolstoy", title: "War and Peace" },
+  { id: "book-3", author: "Fyodor Dostoyevsy", title: "The Idiot" },
+  { id: "book-4", author: "Oscar Wilde", title: "A Picture of Dorian Gray" },
+  { id: "book-5", author: "George Orwell", title: "1984" },
+  { id: "book-6", author: "Jane Austen", title: "Pride and Prejudice" },
+  { id: "book-7", author: "Marcus Aurelius", title: "Meditations" },
+  {
+    id: "book-8",
+    author: "Fyodor Dostoevsky",
+    title: "The Brothers Karamazov",
+  },
+  { id: "book-9", author: "Lev Tolstoy", title: "Anna Karenina" },
+  {
+    id: "book-10",
+    author: "Fyodor Dostoevsky",
+    title: "Crime and Punishment",
+  },
+];
+
+export const MenuContentStory: Story = {
+  name: "Standard Content",
+  args: {},
+  render: function MenuContentStory() {
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={
+            <>
+              <VisuallyHidden>
+                <MenuLabel>Select your favorite book:</MenuLabel>
+              </VisuallyHidden>
+              <StorybookMenuToggleButton />
+            </>
+          }
+        >
+          {/* Header */}
+          <MenuHeader
+            leftAction={
+              <Button
+                width="24px"
+                height="24px"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Icon name="arrow-left" />
+              </Button>
+            }
+            rightAction={<Link href="#">Help</Link>}
+            title="Sprout menu"
+          />
+          {/* All Menu List */}
+          <MenuContent>
+            <MenuGroup id="books">
+              {books.map((book) => (
+                <MenuItem key={book.id} id={book.id}>
+                  {book.title}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+          {/* Footer */}
+          <MenuFooter display="flex" alignItems="right" justifyContent="right">
+            <Button display="flex" justifyContent="center" alignItems="center">
+              <Text color="text.body" mr={200}>
+                Do Something
+              </Text>
+              <Icon name="arrow-right" />
+            </Button>
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};
+
+export const MenuContentWithItemsAsProps: Story = {
+  name: "With Items as Props",
+  render: function MenuContentWithItemsAsProps() {
+    const menuItems = books.map((book) => ({
+      id: book.id,
+      children: book.title,
+    }));
+    return (
+      <Box display="flex" gap="16px" flexDirection="column" maxWidth={300}>
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={
+            <>
+              <VisuallyHidden>
+                <MenuLabel>Select your favorite book:</MenuLabel>
+              </VisuallyHidden>
+              <StorybookMenuToggleButton />
+            </>
+          }
+        >
+          {/* Header */}
+          <MenuHeader
+            leftAction={
+              <Button
+                width="24px"
+                height="24px"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+              >
+                <Icon name="arrow-left" />
+              </Button>
+            }
+            rightAction={<Link href="#">Help</Link>}
+            title="Sprout menu"
+          />
+          {/* All Menu List */}
+          <MenuContent menuItems={menuItems} />
+          {/* Footer */}
+          <MenuFooter display="flex" alignItems="right" justifyContent="right">
+            <Button display="flex" justifyContent="center" alignItems="center">
+              <Text color="text.body" mr={200}>
+                Do Something
+              </Text>
+              <Icon name="arrow-right" />
+            </Button>
+          </MenuFooter>
+        </SingleSelectMenu>
+      </Box>
+    );
+  },
+};

package/src/MenuContent/MenuContent.tsx

@@ -1,8 +1,9 @@
 import type { TypeMenuContentProps } from "./MenuContentTypes";
 import { StyledMenuContent } from "./styles";
-import { useMenuContext } from "../MenuContext";
-import { MenuItem } from "../MenuItem/index";
+import { useMenuContentContext } from "../MenuContext";
 import { mapMenuItems } from "../hooks/useMenuChildren";
+import { useCallback } from "react";
+import type { TypeMenuItemProps } from "../MenuItem";
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-content/
@@ -27,36 +28,49 @@ import { mapMenuItems } from "../hooks/useMenuChildren";
  * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
  */
 
-const MenuContent = ({
+const MenuContent = <I extends TypeMenuItemProps = TypeMenuItemProps>({
   id = "menu_content",
   children: childrenProp,
-  items,
-  MenuItemComponent = MenuItem,
+  menuItems,
+  MenuItemComponent,
+  onKeyDown,
+  innerRef = null,
   ...rest
-}: TypeMenuContentProps) => {
-  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
+}: TypeMenuContentProps<I>) => {
+  const { getToggleButtonProps, getMenuProps, isListbox } =
+    useMenuContentContext();
+  const toggleButtonProps = getToggleButtonProps?.();
 
   const children =
-    childrenProp || !items || !items.length
+    childrenProp || !menuItems || !menuItems.length
       ? childrenProp
-      : mapMenuItems({ items, MenuItemComponent });
+      : mapMenuItems({ menuItems, MenuItemComponent });
 
   if (!children) {
     return null;
   }
 
+  // Memoize the onKeyDown handler to prevent unnecessary re-renders
+  const handleKeyDown = useCallback(
+    (e) => {
+      toggleButtonProps?.["onKeyDown"]?.(e);
+      onKeyDown?.(e);
+    },
+    [onKeyDown, toggleButtonProps?.["onKeyDown"]]
+  );
+
   return (
     <StyledMenuContent
       autoFocus
       id={id}
       tabIndex={0}
       // apply onKeyDown logic for downshift keyboard accessibility support
-      onKeyDown={getToggleButtonProps?.()["onKeyDown"] || undefined}
+      onKeyDown={handleKeyDown}
       // apply active descendent updates to container for proper accessibility
-      aria-activedescendant={getToggleButtonProps?.()["aria-activedescendant"]}
+      aria-activedescendant={toggleButtonProps?.["aria-activedescendant"]}
       {...getMenuProps?.(
         {
-          ...(isListbox ? {} : { role: "menu" }),
+          ...(isListbox ? { ref: innerRef } : { ref: innerRef, role: "menu" }),
         },
         // Suppress ref error for now
         { suppressRefError: true }

package/src/MenuContent/MenuContentTypes.ts

@@ -1,7 +1,9 @@
 import { type HTMLMotionProps } from "motion/react";
+import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeChildrenOrItems } from "../types";
 
-interface TypeMenuContentBaseProps extends HTMLMotionProps<"ul"> {}
-
-export type TypeMenuContentProps = TypeMenuContentBaseProps &
-  TypeChildrenOrItems;
+export type TypeMenuContentProps<
+  I extends TypeMenuItemProps = TypeMenuItemProps
+> = Omit<HTMLMotionProps<"ul">, "children"> & {
+  innerRef?: React.Ref<HTMLUListElement>;
+} & TypeChildrenOrItems<I>;

package/src/MenuContent/__tests__/MenuContent.typetest.tsx

@@ -1,14 +1,14 @@
-import { MenuContent, MenuItem } from "../../index";
+import { MenuContent, MenuItem, type TypeMenuItemProps } from "../../index";
 
 export const MenuContentTypeTest = () => (
   <>
     {/* MenuContent allows children */}
     <MenuContent>Test</MenuContent>
-    {/* MenuContent allows items prop*/}
-    <MenuContent items={[{ id: "1", children: "1" }]} />
-    {/* MenuContent allows items prop with MenuItemComponent*/}
+    {/* MenuContent allows menuItems prop*/}
+    <MenuContent menuItems={[{ id: "1", children: "1" }]} />
+    {/* MenuContent allows menuItems prop with MenuItemComponent*/}
     <MenuContent
-      items={[{ id: "1", children: "1" }]}
+      menuItems={[{ id: "1", children: "1" }]}
       MenuItemComponent={MenuItem}
     />
     {/* MenuContent allows children with MenuItems */}
@@ -21,12 +21,12 @@ export const MenuContentTypeTest = () => (
 
     {/* @ts-expect-error - MenuContent requires children or items */}
     <MenuContent />
-    {/* @ts-expect-error - when both children and items provided */}
-    <MenuContent items={[]}>Test</MenuContent>
+    {/* @ts-expect-error - when both children and menuItems provided */}
+    <MenuContent menuItems={[]}>Test</MenuContent>
     {/* @ts-expect-error - when MenuItemComponent is passed with children */}
     <MenuContent MenuItemComponent={MenuItem}>Test</MenuContent>
     <MenuContent
-      items={[]}
+      menuItems={[] as TypeMenuItemProps[]}
       /* @ts-expect-error - when MenuItemComponent has the wrong type */
       MenuItemComponent={({ text }) => <div>{text}</div>}
     ></MenuContent>