@sproutsocial/seeds-react-menu 0.3.0 → 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/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

@@ -61,23 +61,6 @@ Feature: Menu Group
         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
@@ -93,10 +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[]                |
-          | isSingleSelect | boolean                   |
-          | 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/
@@ -24,16 +25,26 @@ 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"

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,
@@ -26,6 +27,8 @@ export interface TypeMenuGroupProps
   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

@@ -2,9 +2,9 @@ import {
   render,
   screen,
   waitFor,
-  fireEvent,
   act,
 } from "@sproutsocial/seeds-react-testing-library";
+import { PointerEventsCheckLevel } from "@testing-library/user-event";
 import {
   SingleSelectMenu,
   MultiSelectMenu,
@@ -22,8 +22,8 @@ const menuItems = [
 
 describe("MenuGroup", () => {
   describe("User Behavior", () => {
-    it("allows multiple selections per group when isSingleSelect is undefined", () => {
-      render(
+    it("allows multiple selections per group when isSingleSelect is undefined", async () => {
+      const { user } = render(
         <MultiSelectMenu
           defaultIsOpen
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
@@ -44,7 +44,11 @@ describe("MenuGroup", () => {
 
       // Click on each option
       for (const option of screen.getAllByRole("option")) {
-        fireEvent.click(option);
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .click(option);
       }
 
       // Expect all options to be selected.
@@ -52,8 +56,8 @@ describe("MenuGroup", () => {
         expect(option).toHaveAttribute("aria-selected", "true");
       }
     });
-    it("allows multiple selections per group when isSingleSelect is false", () => {
-      render(
+    it("allows multiple selections per group when isSingleSelect is false", async () => {
+      const { user } = render(
         <MultiSelectMenu
           defaultIsOpen
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
@@ -74,7 +78,11 @@ describe("MenuGroup", () => {
 
       // Click on each option
       for (const option of screen.getAllByRole("option")) {
-        fireEvent.click(option);
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .click(option);
       }
 
       // Expect all options to be selected.
@@ -83,7 +91,7 @@ describe("MenuGroup", () => {
       }
     });
     it("only allows one selection per group when isSingleSelect is true", async () => {
-      render(
+      const { user } = render(
         <MultiSelectMenu
           defaultIsOpen
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
@@ -102,24 +110,35 @@ describe("MenuGroup", () => {
 
       const options = screen.getAllByRole("option");
 
-      // Click on each option
-      for (const option of screen.getAllByRole("option")) {
-        fireEvent.click(option);
-      }
+      // Click on the first option
+      await user
+        .setup({
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        })
+        .click(options[0]);
 
-      // Expect only the last option to be selected.
+      // Confirm it is selected
       await waitFor(() =>
-        expect(options[0]).toHaveAttribute("aria-selected", "false")
+        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", "false")
+        expect(options[1]).toHaveAttribute("aria-selected", "true")
       );
       await waitFor(() =>
-        expect(options[2]).toHaveAttribute("aria-selected", "true")
+        expect(options[0]).toHaveAttribute("aria-selected", "false")
       );
     });
     it("only allows one selection per group in SingleSelectMenu, even if isSingleSelect is false", async () => {
-      render(
+      const { user } = render(
         <SingleSelectMenu
           defaultIsOpen
           menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
@@ -140,7 +159,11 @@ describe("MenuGroup", () => {
 
       // Click on each option
       for (const option of screen.getAllByRole("option")) {
-        fireEvent.click(option);
+        await user
+          .setup({
+            pointerEventsCheck: PointerEventsCheckLevel.Never,
+          })
+          .click(option);
       }
 
       // Expect only the last option to be selected.

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

@@ -34,9 +34,11 @@ export const MenuGroupTypeTest = () => (
     <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 id="group" />
     {/* @ts-expect-error - MenuGroup title is invalid as number */}
     <MenuGroup id="group" title={123}>
       Test

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);
-  const item = (itemsMap[id] || { index: 0, id }) as TypeDefaultItemProps;
+    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>
   );
 };

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/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/__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" },
+];