@sproutsocial/seeds-react-menu 0.2.3 → 0.4.0

package/src/MenuRoot/MenuRoot.tsx

@@ -12,7 +12,8 @@ export interface TypeMenuRootOwnProps {
   width?: TypePopoutProps["width"];
 }
 export interface TypeMenuRootProps
-  extends Partial<TypeMenuProviderProps>,
+  extends Partial<TypeMenuProviderProps["menuProps"]>,
+    Pick<TypeMenuProviderProps, "children">,
     TypeMenuRootOwnProps {}
 
 const CustomPopoutContent = styled(Popout.Content)`
@@ -30,7 +31,7 @@ const CustomPopoutContent = styled(Popout.Content)`
 export const MenuRoot = ({
   children,
   menuToggleElement,
-  popoutProps,
+  popoutProps: { focusLockProps, ...popoutProps } = {},
   width = "300px",
   ...contextProps
 }: TypeMenuRootProps) => {
@@ -43,7 +44,7 @@ export const MenuRoot = ({
   );
 
   return (
-    <MenuProvider {...contextProps}>
+    <MenuProvider menuProps={contextProps}>
       <Popout
         menuPopout
         isOpen={!!isOpen}
@@ -55,6 +56,7 @@ export const MenuRoot = ({
           // correct jerking motion when scrolling while the Popout is open
           // returnFocus: false,
           crossFrame: false,
+          ...focusLockProps,
         }}
         disableWrapperAria
         {...popoutProps}

package/src/MenuRoot/__tests__/MenuRoot.test.tsx

@@ -219,7 +219,7 @@ describe("MenuRoot", () => {
       >
         <MenuHeader title="Menu Header" />
         <div>Custom Banner</div>
-        <MenuGroup title="Menu Group">
+        <MenuGroup title="Menu Group" id="group">
           <MenuItem id="1">Item 1</MenuItem>
         </MenuGroup>
         <MenuFooter>Menu Footer</MenuFooter>

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -105,6 +105,14 @@ export const MultiSelectMenu = ({
           } else {
             addSelectedItem(newSelectedItem);
           }
+          // If the newly selected item's group is single select, remove any other selected items in that group.
+          if (newSelectedItem.menuGroupProps?.isSingleSelect) {
+            const groupItems = selectedItems.filter(
+              (item) =>
+                item.menuGroupProps?.id === newSelectedItem.menuGroupProps?.id
+            );
+            groupItems.forEach((item) => removeSelectedItem(item));
+          }
           break;
         default:
           break;

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

@@ -35,7 +35,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem key={item.id} id={item.id} label={item.label}>
                 {item.label}
@@ -78,7 +78,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -136,7 +136,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -199,7 +199,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -257,7 +257,7 @@ describe("MultiSelectMenu", () => {
         selectedItems={[menuItems[1], menuItems[2]]}
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -310,7 +310,7 @@ describe("MultiSelectMenu", () => {
         onSelectedItemsChange={mockSelectedItemsChange}
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -24,11 +24,11 @@ export const SingleSelectMenu = ({
   stateReducer: externalStateReducer,
   ...useSelectProps
 }: TypeSingleSelectMenuProps) => {
-  /** Import the manipulated map of menu items from the context */
+  /** Get a list of items from the children */
   const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
 
   /**
-   * Destructure Downshift props and call the core useSelect with the new menu items and state handler
+   * Destructure Downshift props and call the core useSelect with items and state handler
    */
   const { isOpen, ...useSelectReturnProps } = useSelect({
     ...defaultUseSelectProps,

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

@@ -34,7 +34,7 @@ describe("User Behavior", () => {
         }
       >
         <MenuContent>
-          <MenuGroup title="Menu Title">
+          <MenuGroup title="Menu Title" id="menu-title">
             {menuItems.map(({ id, label }) => (
               <MenuItem key={id} id={id}>
                 {label}
@@ -100,7 +100,7 @@ describe("User Behavior", () => {
         }
       >
         <MenuContent>
-          <MenuGroup title="Menu Title">
+          <MenuGroup title="Menu Title" id="menu-title">
             {menuItems.map(({ id, label }) => (
               <MenuItem key={id} id={id}>
                 {label}
@@ -135,7 +135,7 @@ describe("User Behavior", () => {
         menuToggleElement={<MenuToggleButton>Click me</MenuToggleButton>}
       >
         <MenuContent>
-          <MenuGroup title="Menu Title">
+          <MenuGroup title="Menu Title" id="menu-title">
             {menuItems.map(({ id, label }) => (
               <MenuItem key={id} id={id}>
                 {label}

package/src/__fixtures__/menu-test-data.ts

@@ -0,0 +1,36 @@
+interface TypeBook {
+  id: string;
+  author: string;
+  title: string;
+}
+
+export const TEST_BOOKS: TypeBook[] = [
+  { id: "book-1", author: "Harper Lee", title: "To Kill a Mockingbird" },
+  { id: "book-2", author: "Leo 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: "Nineteen Eighty Four" },
+  { 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 EXTRA_BOOKS: TypeBook[] = [
+  { id: "book-11", author: "F. Scott Fitzgerald", title: "The Great Gatsby" },
+  { id: "book-12", author: "J. D. Salinger", title: "The Catcher in the Rye" },
+  { id: "book-13", author: "J. R. R. Tolkien", title: "The Lord of the Rings" },
+  { id: "book-14", author: "John Steinbeck", title: "The Grapes of Wrath" },
+  { id: "book-15", author: "George Orwell", title: "Animal Farm" },
+  { id: "book-16", author: "Jack Kerouac", title: "On the Road" },
+  { id: "book-17", author: "Aldous Huxley", title: "Brave New World" },
+];

package/src/__tests__/Menu.test.tsx

@@ -9,6 +9,8 @@ import {
   ActionMenu,
   MultiSelectMenu,
   SingleSelectMenu,
+  Autocomplete,
+  AutocompleteInput,
   MenuToggleButton,
   MenuContent,
   MenuItem,
@@ -19,19 +21,18 @@ describe("Menu", () => {
     { name: "ActionMenu", Component: ActionMenu },
     { name: "MultiSelectMenu", Component: MultiSelectMenu },
     { name: "SingleSelectMenu", Component: SingleSelectMenu },
-  ])("$name", ({ Component }) => {
+    { name: "Autocomplete", Component: Autocomplete },
+  ])("$name", ({ name, Component }) => {
+    const toggleElement = (
+      <>
+        {name === "Autocomplete" && <AutocompleteInput />}
+        <MenuToggleButton role="button" aria-label="Open Menu">
+          Open
+        </MenuToggleButton>
+      </>
+    );
     it("should render the trigger button", () => {
-      render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
-      );
+      render(<Component menuToggleElement={toggleElement}>Menu</Component>);
       const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
       expect(menuTrigger).toBeInTheDocument();
       expect(screen.queryByText("Menu")).not.toBeInTheDocument();
@@ -39,14 +40,7 @@ describe("Menu", () => {
 
     it("should default to open if initialIsOpen is true", () => {
       render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-          initialIsOpen
-        >
+        <Component menuToggleElement={toggleElement} initialIsOpen>
           Menu
         </Component>
       );
@@ -60,15 +54,7 @@ describe("Menu", () => {
 
     it("should open when trigger button is clicked", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
+        <Component menuToggleElement={toggleElement}>Menu</Component>
       );
 
       // Check that Menu is not open yet
@@ -85,15 +71,7 @@ describe("Menu", () => {
 
     it("should open when trigger button is focused and enter key pressed", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
+        <Component menuToggleElement={toggleElement}>Menu</Component>
       );
 
       // Check that Menu is not open yet
@@ -111,15 +89,7 @@ describe("Menu", () => {
 
     it("should open when trigger button is focused and space key pressed", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-        >
-          Menu
-        </Component>
+        <Component menuToggleElement={toggleElement}>Menu</Component>
       );
 
       // Check that Menu is not open yet
@@ -137,14 +107,7 @@ describe("Menu", () => {
 
     it("should close when trigger button is clicked while open", async () => {
       const { user } = render(
-        <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
-          initialIsOpen
-        >
+        <Component menuToggleElement={toggleElement} initialIsOpen>
           Menu
         </Component>
       );
@@ -167,11 +130,7 @@ describe("Menu", () => {
       const mockOnIsOpenChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onIsOpenChange={mockOnIsOpenChange}
           initialIsOpen
         >
@@ -199,11 +158,7 @@ describe("Menu", () => {
       const { user } = render(
         <div>
           <Component
-            menuToggleElement={
-              <MenuToggleButton role="button" aria-label="Open Menu">
-                Open
-              </MenuToggleButton>
-            }
+            menuToggleElement={toggleElement}
             onIsOpenChange={mockOnIsOpenChange}
             initialIsOpen
           >
@@ -230,11 +185,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onSelectedItemChange={mockOnSelectedItemChange}
         >
           <MenuContent>
@@ -266,11 +217,7 @@ describe("Menu", () => {
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onSelectedItemChange={mockOnSelectedItemChange}
         >
           <MenuContent>
@@ -295,14 +242,12 @@ describe("Menu", () => {
     });
 
     it("should call onSelectedItemChange when item selected with space", async () => {
+      if (name === "Autocomplete") return;
+
       const mockOnSelectedItemChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onSelectedItemChange={mockOnSelectedItemChange}
         >
           <MenuContent>
@@ -330,11 +275,7 @@ describe("Menu", () => {
       const mockOnIsOpenChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onIsOpenChange={mockOnIsOpenChange}
         >
           <MenuContent>
@@ -362,11 +303,7 @@ describe("Menu", () => {
       const mockOnHighlightedIndexChange = jest.fn();
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           onHighlightedIndexChange={mockOnHighlightedIndexChange}
         >
           <MenuContent>
@@ -396,11 +333,7 @@ describe("Menu", () => {
       const mockStateReducer = jest.fn((state, { changes }) => changes);
       const { user } = render(
         <Component
-          menuToggleElement={
-            <MenuToggleButton role="button" aria-label="Open Menu">
-              Open
-            </MenuToggleButton>
-          }
+          menuToggleElement={toggleElement}
           stateReducer={mockStateReducer}
         >
           <MenuContent>
@@ -421,7 +354,7 @@ describe("Menu", () => {
       await user.keyboard("{arrowdown}{enter}");
 
       // Check that stateReducer is called
-      await waitFor(() => expect(mockStateReducer).toHaveBeenCalledTimes(4));
+      await waitFor(() => expect(mockStateReducer).toHaveBeenCalled());
     });
   });
 });

package/src/hooks/useItemsFromChildren.tsx

@@ -1,13 +1,20 @@
 import React, { type ReactNode, useMemo } from "react";
-import type { TypeMenuItemProps } from "../MenuItem";
+import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
 import type { TypeMenuContext } from "../MenuContext";
+import type { TypeMenuGroupProps } from "../MenuGroup/index";
+import type { TypeDefaultItemProps } from "../types";
 
 export interface TypeUseItemsFromChildrenProps {
   children: ReactNode;
 }
-export interface TypeItemElements {
-  element: React.ReactElement<TypeMenuItemProps>;
-  parents: readonly React.ReactNode[];
+export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
+export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
+
+export interface TypeMenuChildren {
+  type: "item" | "group";
+  element:
+    | React.ReactElement<TypeMenuGroupProps>
+    | React.ReactElement<TypeMenuItemProps>;
 }
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
@@ -17,7 +24,6 @@ const walkAllChildren = (
 ) => {
   const walk = (element: ReactNode, parents: readonly ReactNode[]) => {
     if (element === null || element === undefined) return;
-    // console.log("element", element);
     callback(element, parents);
     const newParents = [...parents, element];
     const children = (element as any).props?.children;
@@ -43,37 +49,81 @@ const checkIfIsElement = (element: ReactNode, name: string): boolean => {
 };
 
 const getAllMenuItems = (children: ReactNode) => {
-  const allMenuItems: TypeItemElements[] = [];
-  // console.log("children", children);
-  walkAllChildren(children, (element, parents) => {
+  const orderedElements: TypeMenuChildren[] = [];
+  walkAllChildren(children, (element) => {
     if (checkIfIsElement(element, "MenuItem")) {
-      allMenuItems.push({
-        element: element as TypeItemElements["element"],
-        parents,
+      orderedElements.push({
+        type: "item",
+        element: element as TypeItemElement,
+      });
+    } else if (checkIfIsElement(element, "MenuGroup")) {
+      orderedElements.push({
+        type: "group",
+        element: element as TypeItemElement,
       });
     }
   });
-  return allMenuItems;
+  return { orderedElements };
 };
 
 export const useItemsFromChildren = ({
   children,
 }: TypeUseItemsFromChildrenProps) => {
   const { allMenuItems, menuItemsMap } = useMemo(() => {
-    const allMenuItemElements = getAllMenuItems(children);
+    const { orderedElements } = getAllMenuItems(children);
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
-    const allMenuItems: TypeMenuContext["items"] = allMenuItemElements.map(
-      ({ element }, index) => {
+    const allMenuItems: TypeDefaultItemProps[] = [];
+    let index = 0;
+
+    orderedElements.forEach(({ type, element }) => {
+      if (type === "group") {
+        const menuGroup = element as TypeMenuGroupElement;
+        const items = menuGroup.props.items;
+        if (items) {
+          items.forEach((menuItem) => {
+            const item = {
+              id: menuItem.id,
+              index: index++,
+              disabled: menuItem.disabled,
+              menuItemProps: menuItem,
+              menuGroupProps: element.props,
+            };
+            allMenuItems.push(item);
+            menuItemsMap[`${item.id}`] = item;
+          });
+        } else if (menuGroup.props.children) {
+          let children = menuGroup.props.children as TypeItemElement[];
+          // If there is only one child, it will be an object. Make it an array.
+          if (!Array.isArray(children)) {
+            children = [children];
+          }
+          children.forEach((menuItem) => {
+            const item = {
+              id: menuItem.props.id,
+              index: index++,
+              disabled: menuItem.props.disabled,
+              menuItemProps: menuItem.props,
+              menuGroupProps: element.props,
+            };
+            allMenuItems.push(item);
+            menuItemsMap[`${item.id}`] = item;
+          });
+        }
+      } else {
+        // Items in groups would have already been added to the map.
+        if (menuItemsMap[`${element.props.id}`]) return;
+        const menuItem = element as TypeItemElement;
         const item = {
-          id: element.props.id,
-          disabled: element.props.disabled,
-          index,
-          menuItemProps: element.props,
+          id: menuItem.props.id,
+          index: index++,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props,
         };
+        allMenuItems.push(item);
         menuItemsMap[`${item.id}`] = item;
-        return item;
       }
-    );
+    });
+
     return { allMenuItems, menuItemsMap };
   }, [children]);
 

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./MenuToggleButton";
 export * from "./ActionMenu";
 export * from "./SingleSelectMenu";
 export * from "./MultiSelectMenu";
+export * from "./Autocomplete";
 
 // Utilities
 export * from "./MenuContext";

package/src/reducers/useComboboxStateReducer.tsx

@@ -8,12 +8,12 @@ export const useComboboxStateReducer: Required<
   const { type, changes } = actionAndChanges;
   switch (type) {
     /** If downshift is blurred by tabbing within the menu, stay open */
-    // case useCombobox.stateChangeTypes.InputBlur:
-    //   return {
-    //     ...changes,
-    //     // keep menu open on blur
-    //     isOpen: true,
-    //   };
+    case useCombobox.stateChangeTypes.InputBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true,
+      };
 
     /** Return standard change payload */
     default:
@@ -21,6 +21,9 @@ export const useComboboxStateReducer: Required<
   }
 };
 
-export const defaultUseComboboxProps = {
-  isItemDisabled: (item) => !!item.disabled,
+export const defaultUseComboboxProps: Partial<
+  UseComboboxProps<TypeDefaultItemProps>
+> = {
+  // disabling while item.hidden so that hidden items are ignored by downshift
+  isItemDisabled: (item) => Boolean(item.disabled || item.hidden),
 };

package/src/storybookUtilities/menu-storybook-components.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { useMenuContext, MenuToggleButton } from "../index";
+
+export interface TypeStyledChevronProps {
+  $isOpen?: boolean;
+}
+
+const StyledChevron = styled.div<TypeStyledChevronProps>`
+  margin-left: ${({ theme }) => theme.space[300]};
+  ${({ $isOpen }) =>
+    $isOpen &&
+    `
+		transform: rotate(-180deg);
+	`}
+  transition: transform 0.15s;
+`;
+
+interface StorybookMenuToggleButtonProps {
+  buttonText?: string;
+}
+
+export const StorybookMenuToggleButton = ({
+  buttonText,
+}: StorybookMenuToggleButtonProps) => {
+  const { isOpen } = useMenuContext();
+
+  return (
+    <MenuToggleButton appearance="secondary">
+      <Box display="flex" justifyContent="space-between">
+        {buttonText ? buttonText : <span>Select book</span>}
+        <StyledChevron $isOpen={isOpen}>
+          <Icon name="chevron-down" />
+        </StyledChevron>
+      </Box>
+    </MenuToggleButton>
+  );
+};

package/src/types.ts

@@ -1,10 +1,13 @@
 import type { TypeMenuItemProps } from "./MenuItem";
+import type { TypeMenuGroupProps } from "./MenuGroup";
 
 export interface TypeDefaultItemProps {
   id: string;
   index: number;
   disabled?: boolean;
+  hidden?: boolean;
   menuItemProps?: TypeMenuItemProps;
+  menuGroupProps?: TypeMenuGroupProps;
 }
 
 export type TypeNotEmptyChildren =