@sproutsocial/seeds-react-menu 0.2.2 → 0.3.0

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/MenuItem/__tests__/MenuItem.test.tsx

@@ -4,6 +4,7 @@ import {
   screen,
   render,
   waitFor,
+  act,
 } from "@sproutsocial/seeds-react-testing-library";
 import {
   PointerEventsCheckLevel,
@@ -394,6 +395,8 @@ describe("MenuItem when isListbox", () => {
   });
 
   describe("API", () => {
+    // This test has many tests inside it due to the `each` usage, so extend the timeout.
+    jest.setTimeout(20 * 1000);
     test.each([INPUT_TYPES.CHECKBOX, INPUT_TYPES.RADIO, INPUT_TYPES.SWITCH])(
       "supports %s input types",
       (inputType) => {
@@ -491,7 +494,7 @@ describe("MenuItem when isListbox", () => {
         const menuItem = screen.getByRole("option", { selected: true });
         testByType[inputType].isSelected();
 
-        await user.click(menuItem);
+        await act(() => user.click(menuItem));
 
         expect(
           await screen.findByRole("option", {

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/MultiSelectMenuTypes.ts

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

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

@@ -9,8 +9,6 @@ import {
 import {
   render,
   screen,
-  fireEvent,
-  act,
   cleanup,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
@@ -37,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}
@@ -80,7 +78,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -138,7 +136,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -201,7 +199,7 @@ describe("MultiSelectMenu", () => {
         }
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -259,7 +257,7 @@ describe("MultiSelectMenu", () => {
         selectedItems={[menuItems[1], menuItems[2]]}
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}
@@ -312,7 +310,7 @@ describe("MultiSelectMenu", () => {
         onSelectedItemsChange={mockSelectedItemsChange}
       >
         <MenuContent>
-          <MenuGroup>
+          <MenuGroup id="group">
             {menuItems.map((item) => (
               <MenuItem
                 key={item.id}

package/src/MultiSelectMenu/index.ts

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

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

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

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/reducers/useComboboxStateReducer.tsx

@@ -0,0 +1,26 @@
+import { useCombobox } from "downshift";
+import type { UseComboboxProps } from "downshift";
+import type { TypeDefaultItemProps } from "../types";
+
+export const useComboboxStateReducer: Required<
+  UseComboboxProps<TypeDefaultItemProps>
+>["stateReducer"] = (state, actionAndChanges) => {
+  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,
+    //   };
+
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+
+export const defaultUseComboboxProps = {
+  isItemDisabled: (item) => !!item.disabled,
+};

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 =

package/src/ComboBox/TokenInput.feature

@@ -1,84 +0,0 @@
-Feature: TokenInput
-
-    A component that allows users to search, select, and manage tokens with autocomplete functionality.
-
-    Rule: User behavior
-
-        Background:
-            Given an end user is using the component
-
-        Scenario: User can add tokens
-            Given the ComboBox accepts new values
-            When text is typed
-            And a delimiter key is pressed
-            Then a new token is created from the input text
-
-        Scenario: User can not add tokens
-            Given the ComboBox does not accept new values
-            When text is typed
-            And a delimiter key is pressed
-            Then no new token is added
-
-        Scenario: User can remove tokens manually
-            Given the ComboBox has tokens
-            When token's remove button is clicked
-            Then the token is removed
-
-        Scenario: User can remove tokens with backspace
-            Given the ComboBox has tokens
-            When backspace is hit
-            Then the token is removed
-
-        Scenario: User can navigate tokens via keyboard
-            Given the ComboBox has tokens
-            And the Combobox Input has focus
-            When the tokens are navigated using arrow keys
-            Then the activeToken callback fires
-
-        Scenario: Component handles token addition
-            When a new token is added
-            Then the onAddToken callback fires
-
-        Scenario: Component handles token removal
-            Given the ComboBox is rendered with tokens
-            When a token is removed
-            Then the onRemoveToken callback fires
-
-        Scenario: Component handles token click
-            When a token is clicked
-            Then the onClickToken callback fires
-
-        Scenario: Component handles input change
-            When the input value changes
-            Then the onChange callback fires
-
-    Rule: API
-        Background:
-            Given an engineer is developing using the component
-
-        Scenario: TokenInput extends Combobox
-            When Combobox features are used in TokenInput
-            Then the TokenInput responds as a Combobox would
-
-        Scenario: ComboBox accepts tokens
-            When a token component is passed to the Combobox
-            And an item is selected
-            Then the token is rendered in the input
-
-        Scenario: ComboBox has a maximum token length
-            When 'tokenMaxLength' is set to <value>
-            Then the token string size is limited to <value>
-
-        Scenario Outline: ComboBox checks its types
-            When <propName> is passed a value
-            Then ComboBox expects it to be of type <propType>
-
-            Examples: Prop Types
-                | activeToken    | string                                                                            |
-                | tokens         | array of { id: string, iconName?: EnumIconNames, value: string, valid?: boolean } |
-                | onChangeTokens | function                                                                          |
-                | onAddToken     | function                                                                          |
-                | onRemoveToken  | function                                                                          |
-                | onClickToken   | function                                                                          |
-                | maxLength      | number                                                                            |
-                | tokenMaxLength | number                                                                            |