@sproutsocial/seeds-react-menu 0.2.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/MenuContent/MenuContent.tsx

@@ -11,10 +11,10 @@ import { useMenuContext } from "../MenuContext";
  * <ActionMenu>
  *   <MenuHeader>Header</MenuHeader>
  *   <MenuContent>
- *     <MenuGroup>
+ *     <MenuGroup id="1">
  *       <MenuItem>Item 1</MenuItem>
  *     </MenuGroup>
- *     <MenuGroup>
+ *     <MenuGroup id="2">
  *       <MenuItem>Item 2</MenuItem>
  *     </MenuGroup>
  *   </MenuContent>

package/src/MenuGroup/MenuGroup.feature

@@ -6,20 +6,19 @@ Feature: Menu Group
     Background:
       Given an end user is using the component
 
-    Scenario: MenuGroup has isSingleSelect true
-      When the MenuGroup isSingleSelect is true
-      And MenuContext is set to multiple selection
-      Then the group behaves like a single select
+      Scenario Outline: MenuGroup can be single select
+        When the MenuGroup has isSingleSelect set to <value>
+        And MenuContext is set to <menu type>
+        Then <selection behavior>
 
-    Scenario: MenuGroup has isSingleSelect undefined
-      When the MenuGroup isSingleSelect is undefined
-      And MenuContext is set to multiple selection
-      Then the group behaves like a multi select
-
-    Scenario: MenuGroup has isSingleSelect false
-      When the MenuGroup isSingleSelect is false
-      And MenuContext is set to multiple selection
-      Then the group behaves like a multi select
+        Examples:
+          | value    | menu type | selection behavior                                   |
+          | true     | single    | the group behaves like a single select               |
+          | false    | single    | the group behaves like a single select               |
+          | undefined | single    | the group behaves like a single select               |
+          | true     | multiple  | the group behaves like a single select               |
+          | false    | multiple  | the group behaves like a multi select                |
+          | undefined | multiple  | the group behaves like a multi select                |
 
   Rule: API
     Background:
@@ -59,14 +58,14 @@ Feature: Menu Group
         Given a list of items is not empty
         And the items are a valid object shape
         When that list of items is provided to the items prop on a MenuGroup
-        And a valid component is provided to the customMenuItem prop 
+        And a valid component is provided to the customMenuItem prop
         Then the MenuGroup will render the items using the customMenuItem component
 
       Scenario: MenuGroup ignores the menuItemType without items prop
         When a MenuGroup has menuItemType set
         And is not provided with a valid items prop
         Then the menuItemType will be ignored
-      
+
       Scenario Outline: MenuGroup can set the type for all MenuItems
         When menuItemType is set to <menu item type>
         And MenuGroup is provided with a valid items prop
@@ -98,5 +97,6 @@ Feature: Menu Group
           | children       | ReactNode                 |
           | title          | string                    |
           | items          | TypeItem[]                |
+          | isSingleSelect | boolean                   |
           | menuItemType   | TypeMenuItemProps['type'] |
           | customMenuItem | tyepof MenuItem           |

package/src/MenuGroup/MenuGroup.tsx

@@ -10,10 +10,10 @@ import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
  * @example
  * <ActionMenu>
  *   <MenuContent>
- *     <MenuGroup title="Group 1">
+ *     <MenuGroup title="Group 1" id="1">
  *       <MenuItem>Item 1</MenuItem>
  *     </MenuGroup>
- *     <MenuGroup title="Group 1">
+ *     <MenuGroup title="Group 2" id="2">
  *       <MenuItem>Item 2</MenuItem>
  *     </MenuGroup>
  *   </MenuContent>
@@ -27,6 +27,8 @@ export const MenuGroup = ({
   children,
   title,
   color,
+  isSingleSelect,
+  id,
   ...rest
 }: TypeMenuGroupProps) => {
   // Generate a unique ID for the title
@@ -35,6 +37,8 @@ export const MenuGroup = ({
   return (
     <StyledMenuGroup
       role="group"
+      id={id}
+      isSingleSelect={isSingleSelect}
       aria-labelledby={title ? titleId : undefined}
       // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/src/MenuGroup/MenuGroupTypes.ts

@@ -23,6 +23,8 @@ export interface TypeMenuGroupStyledProps
 export interface TypeMenuGroupProps
   extends TypeMenuGroupStyledProps,
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
+  id: string;
+  isSingleSelect?: boolean;
   title?: string;
   children: ReactNode;
   titleAs?: string | React.ComponentType<any>;

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -1,6 +1,13 @@
-import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import {
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
 import {
   SingleSelectMenu,
+  MultiSelectMenu,
   MenuContent,
   MenuGroup,
   MenuToggleButton,
@@ -14,11 +21,139 @@ const menuItems = [
 ];
 
 describe("MenuGroup", () => {
-  xdescribe("User Behavior", () => {
-    // To be enabled when isSingleSelect prop added
-    xit("behaves as it normally would when isSingleSelect is undefined", () => {});
-    xit("behaves as it normally would when isSingleSelect is false", () => {});
-    xit("behaves like a single select when isSingleSelect is true", () => {});
+  describe("User Behavior", () => {
+    it("allows multiple selections per group when isSingleSelect is undefined", () => {
+      render(
+        <MultiSelectMenu
+          defaultIsOpen
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup id="group">
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </MultiSelectMenu>
+      );
+
+      const options = screen.getAllByRole("option");
+
+      // Click on each option
+      for (const option of screen.getAllByRole("option")) {
+        fireEvent.click(option);
+      }
+
+      // Expect all options to be selected.
+      for (const option of options) {
+        expect(option).toHaveAttribute("aria-selected", "true");
+      }
+    });
+    it("allows multiple selections per group when isSingleSelect is false", () => {
+      render(
+        <MultiSelectMenu
+          defaultIsOpen
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup id="group" isSingleSelect={false}>
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </MultiSelectMenu>
+      );
+
+      const options = screen.getAllByRole("option");
+
+      // Click on each option
+      for (const option of screen.getAllByRole("option")) {
+        fireEvent.click(option);
+      }
+
+      // Expect all options to be selected.
+      for (const option of options) {
+        expect(option).toHaveAttribute("aria-selected", "true");
+      }
+    });
+    it("only allows one selection per group when isSingleSelect is true", async () => {
+      render(
+        <MultiSelectMenu
+          defaultIsOpen
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup id="group" isSingleSelect={true}>
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </MultiSelectMenu>
+      );
+
+      const options = screen.getAllByRole("option");
+
+      // Click on each option
+      for (const option of screen.getAllByRole("option")) {
+        fireEvent.click(option);
+      }
+
+      // Expect only the last option to be selected.
+      await waitFor(() =>
+        expect(options[0]).toHaveAttribute("aria-selected", "false")
+      );
+      await waitFor(() =>
+        expect(options[1]).toHaveAttribute("aria-selected", "false")
+      );
+      await waitFor(() =>
+        expect(options[2]).toHaveAttribute("aria-selected", "true")
+      );
+    });
+    it("only allows one selection per group in SingleSelectMenu, even if isSingleSelect is false", async () => {
+      render(
+        <SingleSelectMenu
+          defaultIsOpen
+          menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
+        >
+          <MenuContent>
+            <MenuGroup id="group" isSingleSelect={false}>
+              {menuItems.map(({ id, label }) => (
+                <MenuItem key={id} id={id}>
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuGroup>
+          </MenuContent>
+        </SingleSelectMenu>
+      );
+
+      const options = screen.getAllByRole("option");
+
+      // Click on each option
+      for (const option of screen.getAllByRole("option")) {
+        fireEvent.click(option);
+      }
+
+      // Expect only the last option to be selected.
+      await waitFor(() =>
+        expect(options[0]).toHaveAttribute("aria-selected", "false")
+      );
+      await waitFor(() =>
+        expect(options[1]).toHaveAttribute("aria-selected", "false")
+      );
+      await waitFor(() =>
+        expect(options[2]).toHaveAttribute("aria-selected", "true")
+      );
+    });
   });
   describe("API", () => {
     it("renders a group with a title", () => {
@@ -29,7 +164,7 @@ describe("MenuGroup", () => {
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
         >
           <MenuContent>
-            <MenuGroup title={menuTitle}>
+            <MenuGroup title={menuTitle} id={menuTitle}>
               {menuItems.map(({ id, label }) => (
                 <MenuItem key={id} id={id}>
                   {label}
@@ -55,7 +190,7 @@ describe("MenuGroup", () => {
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
         >
           <MenuContent>
-            <MenuGroup>
+            <MenuGroup id="group">
               {menuItems.map(({ id, label }) => (
                 <MenuItem key={id} id={id}>
                   {label}
@@ -78,7 +213,7 @@ describe("MenuGroup", () => {
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
         >
           <MenuContent>
-            <MenuGroup>
+            <MenuGroup id="group">
               {menuItems.map(({ id, label }) => (
                 <MenuItem key={id} id={id}>
                   {label}

package/src/MenuGroup/__tests__/MenuGroup.typetest.tsx

@@ -4,41 +4,53 @@ import { Text } from "@sproutsocial/seeds-react-text";
 export const MenuGroupTypeTest = () => (
   <>
     {/* MenuGroup allows children */}
-    <MenuGroup>Test</MenuGroup>
+    <MenuGroup id="group">Test</MenuGroup>
     {/* MenuGroup allows children with MenuItems */}
-    <MenuGroup>
+    <MenuGroup id="group">
       <MenuItem id="1">Test 1</MenuItem>
       <MenuItem id="2">Test 2</MenuItem>
     </MenuGroup>
+    {/* MenuGroup allows isSingleSelect prop */}
+    <MenuGroup id="group-1" isSingleSelect={true}>
+      <MenuItem id="1">Test 1</MenuItem>
+    </MenuGroup>
     {/* MenuGroup allows title as a string */}
-    <MenuGroup title="title">Test</MenuGroup>
+    <MenuGroup id="group" title="title">
+      Test
+    </MenuGroup>
     {/* MenuGroup allows titleAs as a string */}
-    <MenuGroup title="title" titleAs="h3">
+    <MenuGroup id="group" title="title" titleAs="h3">
       Test
     </MenuGroup>
     {/* MenuGroup allows titleAs as a component */}
-    <MenuGroup title="title" titleAs={Text}>
+    <MenuGroup id="group" title="title" titleAs={Text}>
       Test
     </MenuGroup>
     {/* MenuGroup accepts ul props */}
-    <MenuGroup aria-label="test label">Test</MenuGroup>
+    <MenuGroup id="group" aria-label="test label">
+      Test
+    </MenuGroup>
     {/* MenuGroup accepts style props */}
-    <MenuGroup border="1px solid black" bg="white" width="150px">
+    <MenuGroup id="group" border="1px solid black" bg="white" width="150px">
       Test
     </MenuGroup>
 
     {/* @ts-expect-error - MenuGroup requires children */}
-    <MenuGroup />
+    <MenuGroup id="group" />
     {/* @ts-expect-error - MenuGroup title is invalid as number */}
-    <MenuGroup title={123}>Test</MenuGroup>
+    <MenuGroup id="group" title={123}>
+      Test
+    </MenuGroup>
     {/* @ts-expect-error - MenuGroup title is invalid as boolean */}
-    <MenuGroup title={false}>Test</MenuGroup>
+    <MenuGroup id="group" title={false}>
+      Test
+    </MenuGroup>
     {/* @ts-expect-error - MenuGroup titleAs is invalid as number */}
-    <MenuGroup title="title" titleAs={123}>
+    <MenuGroup id="group" title="title" titleAs={123}>
       Test
     </MenuGroup>
     {/* @ts-expect-error - MenuGroup titleAs is invalid as boolean */}
-    <MenuGroup title="title" titleAs={false}>
+    <MenuGroup id="group" title="title" titleAs={false}>
       Test
     </MenuGroup>
   </>

package/src/MenuItem/MenuItem.tsx

@@ -25,12 +25,12 @@ export const MenuItem = ({
 }: TypeMenuItemProps) => {
   const { getItemProps, itemsMap, highlightedIndex, isListbox } =
     useContext(MenuContext);
+  const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
   const { ...optionProps } = useOptionProps({
     id,
     children,
     ...props,
   });
-  const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
   const highlighted = highlightedIndex === item?.index;
 
   return (

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/__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/hooks/useItemsFromChildren.tsx

@@ -1,14 +1,18 @@
 import React, { type ReactNode, useMemo } from "react";
 import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeMenuContext } from "../MenuContext";
+import type { TypeMenuGroupProps } from "../MenuGroup/index";
 
 export interface TypeUseItemsFromChildrenProps {
   children: ReactNode;
 }
-export interface TypeItemElements {
+export interface TypeItemElement {
   element: React.ReactElement<TypeMenuItemProps>;
   parents: readonly React.ReactNode[];
 }
+export interface TypeMenuGroupElement {
+  element: React.ReactElement<TypeMenuGroupProps>;
+}
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
 const walkAllChildren = (
@@ -43,12 +47,11 @@ const checkIfIsElement = (element: ReactNode, name: string): boolean => {
 };
 
 const getAllMenuItems = (children: ReactNode) => {
-  const allMenuItems: TypeItemElements[] = [];
-  // console.log("children", children);
+  const allMenuItems: TypeItemElement[] = [];
   walkAllChildren(children, (element, parents) => {
     if (checkIfIsElement(element, "MenuItem")) {
       allMenuItems.push({
-        element: element as TypeItemElements["element"],
+        element: element as TypeItemElement["element"],
         parents,
       });
     }
@@ -63,12 +66,16 @@ export const useItemsFromChildren = ({
     const allMenuItemElements = getAllMenuItems(children);
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
     const allMenuItems: TypeMenuContext["items"] = allMenuItemElements.map(
-      ({ element }, index) => {
+      ({ element, parents }, index) => {
+        const parentMenuGroup = parents.find((parent) =>
+          checkIfIsElement(parent, "MenuGroup")
+        ) as TypeMenuGroupElement["element"];
         const item = {
           id: element.props.id,
           disabled: element.props.disabled,
           index,
           menuItemProps: element.props,
+          menuGroupProps: parentMenuGroup ? parentMenuGroup.props : undefined,
         };
         menuItemsMap[`${item.id}`] = item;
         return item;

package/src/types.ts

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