@sproutsocial/seeds-react-menu 0.2.3 → 0.4.0

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

@@ -1,27 +1,26 @@
 import * as React from "react";
-import {
-  MultiSelectMenu,
-  MenuContent,
-  MenuHeader,
-  MenuFooter,
-} from "../../index";
+import { Autocomplete, MenuContent, MenuHeader, MenuFooter } from "../../index";
 
-export const MultiSelectMenuTypeTest = () => (
+export const AutocompleteTypeTest = () => (
   <>
-    {/* Valid MultiSelectMenu with minimal required props */}
-    <MultiSelectMenu menuToggleElement={<>test</>}>Test</MultiSelectMenu>
-    {/* Valid MultiSelectMenu allows MenuContent by itself as a child */}
-    <MultiSelectMenu menuToggleElement={<>test</>}>
+    {/* Valid Autocomplete with minimal required props */}
+    <Autocomplete menuToggleElement={<>test</>}>Test</Autocomplete>
+    {/* Valid Autocomplete allows MenuContent by itself as a child */}
+    <Autocomplete menuToggleElement={<>test</>}>
       <MenuContent>Test</MenuContent>
-    </MultiSelectMenu>
-    {/* Valid MultiSelectMenu allows multiple children without fragment */}
-    <MultiSelectMenu menuToggleElement={<>test</>}>
+    </Autocomplete>
+    {/* Valid Autocomplete allows multiple children without fragment */}
+    <Autocomplete menuToggleElement={<>test</>}>
       <MenuHeader>Test</MenuHeader>
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
-    </MultiSelectMenu>
-    {/* Valid MultiSelectMenu accepts Downshift props and functions for useSelect */}
-    <MultiSelectMenu
+    </Autocomplete>
+    {/* Valid Autocomplete allows getIsItemVisible function */}
+    <Autocomplete menuToggleElement={<>test</>} getIsItemVisible={() => true}>
+      Test
+    </Autocomplete>
+    {/* Valid Autocomplete accepts Downshift props and functions for useCombobox */}
+    <Autocomplete
       menuToggleElement={<>test</>}
       onSelectedItemChange={() => {}}
       selectedItem={null}
@@ -31,31 +30,18 @@ export const MultiSelectMenuTypeTest = () => (
       isOpen
     >
       Test
-    </MultiSelectMenu>
-    {/* Valid MultiSelectMenu accepts Downshift props and functions for useMultipleSelection */}
-    <MultiSelectMenu
-      menuToggleElement={<>test</>}
-      onSelectedItemsChange={() => {}}
-      selectedItems={[]}
-      multiSelectStateReducer={(c) => c}
-      onMultiSelectStateChange={() => {}}
-      getA11yMultiStatusMessage={() => ""}
-    >
-      Test
-    </MultiSelectMenu>
-
+    </Autocomplete>
     {/* @ts-expect-error - menuToggleElement is a required prop */}
-    <MultiSelectMenu>Test</MultiSelectMenu>
-    <MultiSelectMenu
+    <Autocomplete>Test</Autocomplete>
+    <Autocomplete
       /* @ts-expect-error - menuToggleElement must be a valid react element */
       menuToggleElement="test"
     >
       Test
-    </MultiSelectMenu>
+    </Autocomplete>
     {/* @ts-expect-error - when no children provided */}
-    <MultiSelectMenu menuToggleElement="test" />
-
-    <MultiSelectMenu
+    <Autocomplete menuToggleElement="test" />
+    <Autocomplete
       menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */
       isOpen="false"
@@ -65,14 +51,10 @@ export const MultiSelectMenuTypeTest = () => (
       selectedItem="test"
       /* @ts-expect-error - stateReducer must have a return value */
       stateReducer={() => {}}
-      /* @ts-expect-error - onMultiSelectStateChange can't be a string */
-      onMultiSelectStateChange="test"
-      /* @ts-expect-error - selectedItems can't be a string */
-      selectedItems="test"
-      /* @ts-expect-error - multiSelectStateReducer must have a return value */
-      multiSelectStateReducer="test"
+      /* @ts-expect-error - getIsItemVisible must be a valid function */
+      getIsItemVisible={true}
     >
       Test
-    </MultiSelectMenu>
+    </Autocomplete>
   </>
 );

package/src/Autocomplete/index.ts

@@ -1,2 +1,3 @@
 export * from "./Autocomplete";
+export * from "./AutocompleteInput";
 export * from "./AutocompleteTypes";

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/MenuContext.tsx

@@ -63,6 +63,7 @@ export interface TypeMenuContextProps
     TypeDownshiftMultiSelectReturnValue,
     TypeDownshiftMultiSelectProps {
   items: TypeDefaultItemProps[];
+  itemsMap?: { [key: string]: TypeDefaultItemProps };
   isListbox?: boolean;
   onHighlightedIndexChange?:
     | TypeDownshiftComboboxProps["onHighlightedIndexChange"]
@@ -94,8 +95,9 @@ export interface TypeMenuContext extends TypeMenuContextProps {
   itemsMap: { [key: string]: TypeDefaultItemProps };
 }
 
-export interface TypeMenuProviderProps extends Partial<TypeMenuContextProps> {
+export interface TypeMenuProviderProps {
   children: TypeNotEmptyChildren;
+  menuProps: Partial<TypeMenuContextProps>;
 }
 
 /**
@@ -113,17 +115,21 @@ export const useMenu = ({
   items = [],
   isListbox = false,
   isOpen = false,
+  itemsMap: itemsMapFromProps,
   ...rest
 }: Partial<TypeMenuContextProps> = {}): TypeMenuContext => {
   const menuProps = useMemo(() => ({ ...rest }), [rest]);
 
   const itemsMap = useMemo(
     () =>
+      itemsMapFromProps ||
       items.reduce((map, item) => {
-        map[`${item.id}`] = item;
+        map[`${item.id}`] = {
+          ...item,
+        };
         return map;
       }, {} as TypeMenuContext["itemsMap"]),
-    [items]
+    [items, itemsMapFromProps]
   );
 
   return {
@@ -145,9 +151,9 @@ export const MenuContext = createContext<TypeMenuContext>(defaultMenuContext);
  */
 export const MenuProvider = ({
   children,
-  ...overrides
+  menuProps,
 }: TypeMenuProviderProps) => {
-  const filterContext = useMenu(overrides);
+  const filterContext = useMenu(menuProps);
 
   return (
     <MenuContext.Provider value={{ ...filterContext }}>

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,26 +58,9 @@ 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
-        Then each MenuItem rendered by the MenuGroup with use this type
-
-        Examples: Prop Types
-          | menu item type      |
-          | undefined (default) |
-          | checkbox            |
-          | radio               |
-          | switch              |
-
       Scenario Outline: MenuGroup has custom content
         When <custom content> is present at the <location>
         Then <displayed content> will render
@@ -94,9 +76,9 @@ Feature: Menu Group
         Then MenuRoot expects it to be of type <propType>
 
         Examples: Prop Types
-          | propName       | propType                  |
-          | children       | ReactNode                 |
-          | title          | string                    |
-          | items          | TypeItem[]                |
-          | menuItemType   | TypeMenuItemProps['type'] |
-          | customMenuItem | tyepof MenuItem           |
+          | propName          | propType                  |
+          | children          | ReactNode                 |
+          | title             | string                    |
+          | items             | TypeMenuItemProps[]       |
+          | isSingleSelect    | boolean                   |
+          | MenuItemComponent | tyepof MenuItem           |

package/src/MenuGroup/MenuGroup.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { TypeMenuGroupProps } from "./MenuGroupTypes";
 import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
+import { MenuItem } from "../MenuItem";
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-group/
@@ -10,10 +11,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>
@@ -24,17 +25,31 @@ import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
 
 export const MenuGroup = ({
   titleAs = "h3",
-  children,
+  children: childrenProp,
   title,
   color,
+  isSingleSelect,
+  id,
+  items,
+  MenuItemComponent = MenuItem,
   ...rest
 }: TypeMenuGroupProps) => {
   // Generate a unique ID for the title
   const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
 
+  const children =
+    childrenProp || !items || !items.length
+      ? childrenProp
+      : items.map((item) => <MenuItemComponent key={item.id} {...item} />);
+
+  if (!children) {
+    return null;
+  }
   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

@@ -9,6 +9,7 @@ import type {
   TypeSpaceSystemProps,
   TypeTypographySystemProps,
 } from "@sproutsocial/seeds-react-system-props";
+import { MenuItem, type TypeMenuItemProps } from "../MenuItem/index";
 
 export interface TypeMenuGroupStyledProps
   extends TypeBorderSystemProps,
@@ -23,7 +24,11 @@ export interface TypeMenuGroupStyledProps
 export interface TypeMenuGroupProps
   extends TypeMenuGroupStyledProps,
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
+  id: string;
+  isSingleSelect?: boolean;
   title?: string;
-  children: ReactNode;
+  children?: ReactNode;
+  items?: TypeMenuItemProps[];
+  MenuItemComponent?: typeof MenuItem;
   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,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import {
   SingleSelectMenu,
+  MultiSelectMenu,
   MenuContent,
   MenuGroup,
   MenuToggleButton,
@@ -14,11 +21,162 @@ 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", async () => {
+      const { user } = 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")) {
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .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", async () => {
+      const { user } = 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")) {
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .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 () => {
+      const { user } = 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 the first option
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(options[0]);
+
+      // Confirm it is selected
+      await waitFor(() =>
+        expect(options[0]).toHaveAttribute("aria-selected", "true")
+      );
+
+      // Click on the second option
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(options[1]);
+
+      // Expect only the most recently clicked option to be selected.
+      await waitFor(() =>
+        expect(options[1]).toHaveAttribute("aria-selected", "true")
+      );
+      await waitFor(() =>
+        expect(options[0]).toHaveAttribute("aria-selected", "false")
+      );
+    });
+    it("only allows one selection per group in SingleSelectMenu, even if isSingleSelect is false", async () => {
+      const { user } = 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")) {
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .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 +187,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 +213,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 +236,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,55 @@ 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>
+    {/* MenuGroup allows children prop */}
+    <MenuGroup id="group">Test</MenuGroup>
+    {/* MenuGroup allows items prop */}
+    <MenuGroup id="group" items={[{ id: "1", children: "1" }]} />
 
-    {/* @ts-expect-error - MenuGroup requires children */}
-    <MenuGroup />
     {/* @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

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { MenuContext } from "../MenuContext";
+import { useMemo } from "react";
+import { useMenuContext } from "../MenuContext";
 import type { TypeDefaultItemProps } from "../types";
 import type { TypeMenuItemProps } from "./MenuItemTypes";
 import { MenuItemContainer, StyledMenuItem } from "./styles";
@@ -24,16 +24,19 @@ export const MenuItem = ({
   ...props
 }: TypeMenuItemProps) => {
   const { getItemProps, itemsMap, highlightedIndex, isListbox } =
-    useContext(MenuContext);
+    useMenuContext();
   const { ...optionProps } = useOptionProps({
     id,
     children,
     ...props,
   });
   const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
+
   const highlighted = highlightedIndex === item?.index;
 
-  return (
+  return item.hidden ? (
+    <></>
+  ) : (
     <MenuItemContainer role="none">
       <StyledMenuItem
         id={id}

package/src/MenuLabel.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { Text, type TypeTextProps } from "@sproutsocial/seeds-react-text";
+import { Label, type TypeLabelProps } from "@sproutsocial/seeds-react-label";
 import { useMenuContext } from "./MenuContext";
 
-export const MenuLabel = ({ children, ...rest }: TypeTextProps) => {
+export const MenuLabel = ({ children, ...rest }: Partial<TypeLabelProps>) => {
   const { getLabelProps } = useMenuContext();
   return (
-    <Text as="label" color="text.body" {...getLabelProps?.()} {...rest}>
+    <Label htmlFor="fallback_menu_label" {...getLabelProps?.()} {...rest}>
       {children}
-    </Text>
+    </Label>
   );
 };