@sproutsocial/seeds-react-menu 0.4.1 → 0.5.0

package/package.json

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

package/src/ActionMenu/ActionMenu.tsx

@@ -5,7 +5,7 @@ import {
   type UseSelectStateChange,
 } from "downshift";
 import type { TypeDefaultItemProps } from "../types";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import { useMenuChildren } from "../hooks/useMenuChildren";
 import {
   defaultUseSelectProps,
   useSelectStateReducer,
@@ -13,6 +13,7 @@ import {
 import { MenuRoot } from "../MenuRoot";
 import { itemToString } from "../utils/itemToString";
 import type { TypeActionMenuProps } from "./ActionMenuTypes";
+import { MenuItem } from "../MenuItem/index";
 
 // Manually fire the onClick handler when Enter or Space is pressed
 const handleStateChange = (
@@ -82,11 +83,17 @@ const handleStateChange = (
  * @see {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MultiSelectMenu | MultiSelectMenu}
  */
 export const ActionMenu = ({
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   stateReducer: externalStateReducer,
   ...useSelectProps
 }: TypeActionMenuProps) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent,
+  });
   const [currentSelectedItem, setCurrentSelectedItem] =
     React.useState<UseSelectState<TypeDefaultItemProps>["selectedItem"]>(null);
 

package/src/ActionMenu/ActionMenuTypes.ts

@@ -1,12 +1,16 @@
-import { type TypeMenuRootProps, type TypeMenuRootOwnProps } from "../MenuRoot";
+import { type TypeMenuRootOwnProps } from "../MenuRoot";
 import type { TypeDownshiftSelectProps } from "../MenuContext";
+import type { TypeChildrenOrItems } from "../types";
 
 type TypeInvalidMenuProps =
   | "initialSelectedItem"
   | "defaultSelectedItem"
-  | "selectedItem";
-export interface TypeActionMenuProps
+  | "selectedItem"
+  // We omit this so we can retype it.
+  | "items";
+
+interface TypeActionMenuBaseProps
   extends TypeMenuRootOwnProps,
-    Omit<TypeDownshiftSelectProps, TypeInvalidMenuProps> {
-  children: TypeMenuRootProps["children"];
-}
+    Omit<TypeDownshiftSelectProps, TypeInvalidMenuProps> {}
+
+export type TypeActionMenuProps = TypeActionMenuBaseProps & TypeChildrenOrItems;

package/src/ActionMenu/__tests__/ActionMenu.test.tsx

@@ -11,28 +11,6 @@ import { ActionMenu } from "../ActionMenu";
 import { MenuContent, MenuItem, MenuToggleButton } from "../../index";
 
 describe("ActionMenu", () => {
-  it("should render the MenuItems when provided as children", async () => {
-    render(
-      <ActionMenu
-        menuToggleElement={<MenuToggleButton>Test Menu</MenuToggleButton>}
-      >
-        <MenuContent>
-          <MenuItem id="test-item-1">Item 1</MenuItem>
-          <MenuItem id="test-item-2">Item 2</MenuItem>
-        </MenuContent>
-      </ActionMenu>
-    );
-
-    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-
-    const toggleBtn = screen.getByRole("button", { name: "Test Menu" });
-    fireEvent.click(toggleBtn);
-
-    await waitFor(() => expect(screen.getByRole("menu")).toBeVisible());
-    expect(screen.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
-    expect(screen.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
-  });
-
   test.each([
     {
       action: "click",

package/src/ActionMenu/__tests__/ActionMenu.typetest.tsx

@@ -1,4 +1,10 @@
-import { ActionMenu, MenuContent, MenuHeader, MenuFooter } from "../../index";
+import {
+  ActionMenu,
+  MenuContent,
+  MenuHeader,
+  MenuFooter,
+  MenuItem,
+} from "../../index";
 
 export const ActionMenuTypeTest = () => (
   <>
@@ -14,6 +20,17 @@ export const ActionMenuTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </ActionMenu>
+    {/* Valid ActionMenu allows items to be passed using the items prop */}
+    <ActionMenu
+      menuToggleElement={<>test</>}
+      items={[{ children: "Item Name", id: "item-1" }]}
+    />
+    {/* Valid ActionMenu allows items prop to be rendered using a MenuItemComponent prop */}
+    <ActionMenu
+      menuToggleElement={<>test</>}
+      items={[{ children: "Item Name", id: "item-1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* Valid ActionMenu accepts Downshift props and functions for useSelect other than selectedItem */}
     <ActionMenu
       menuToggleElement={<>test</>}
@@ -34,8 +51,20 @@ export const ActionMenuTypeTest = () => (
     >
       Test
     </ActionMenu>
-    {/* @ts-expect-error - when no children provided */}
-    <ActionMenu menuToggleElement="test" />
+    {/* @ts-expect-error - when no children or items provided */}
+    <ActionMenu menuToggleElement={<>test</>} />
+    {/* @ts-expect-error - when both children and MenuItemComponent provided */}
+    <ActionMenu menuToggleElement={<>test</>} MenuItemComponent={MenuItem}>
+      Children
+    </ActionMenu>
+    {/* @ts-expect-error - when both children and items provided */}
+    <ActionMenu menuToggleElement={<>test</>} items={[]}>
+      Children
+    </ActionMenu>
+    {/* @ts-expect-error - when MenuItemComponent is of the wrong type */}
+    <ActionMenu menuToggleElement={<>test</>} MenuItemComponent={MenuContent}>
+      Children
+    </ActionMenu>
 
     <ActionMenu
       menuToggleElement={<>test</>}

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -62,6 +62,30 @@ export const AutocompleteTextInputExample: Story = {
   },
 };
 
+export const AutocompleteWithItemsAsProps: Story = {
+  name: "With Items as Props",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <AutocompleteInput />
+          </>
+        }
+        items={TEST_BOOKS.map(({ id, title }) => ({
+          children: title,
+          id,
+        }))}
+        {...(args as object)}
+      />
+    );
+  },
+};
+
 export const AutocompleteTextWithButtonExample: Story = {
   name: "Text Input w/ Button",
   render: (args) => {

package/src/Autocomplete/Autocomplete.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useCombobox, type UseComboboxState } from "downshift";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import { useMenuChildren } from "../hooks/useMenuChildren";
 import {
   defaultUseComboboxProps,
   useComboboxStateReducer,
@@ -9,6 +9,7 @@ import { itemToString as defaultItemToString } from "../utils/itemToString";
 import { MenuRoot } from "../MenuRoot";
 import type { TypeAutocompleteProps } from "./AutocompleteTypes";
 import type { TypeDefaultItemProps } from "../types";
+import { MenuItem } from "../MenuItem/index";
 
 /**
  * @link https://seeds.sproutsocial.com/components/multiselect-menu/
@@ -19,15 +20,20 @@ import type { TypeDefaultItemProps } from "../types";
  */
 
 export const Autocomplete = ({
-  children,
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  items: itemsProp,
+  MenuItemComponent = MenuItem,
   itemToString = defaultItemToString,
   getIsItemVisible = (item, inputValue) =>
     itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()),
   ...useComboboxProps
 }: TypeAutocompleteProps) => {
-  /** Get a list of items from the children */
-  const { allMenuItems } = useItemsFromChildren({ children });
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    items: itemsProp,
+    MenuItemComponent,
+  });
   const [items, setItems] = React.useState(allMenuItems);
 
   /**

package/src/Autocomplete/AutocompleteTypes.ts

@@ -3,13 +3,16 @@ import type {
   TypeDownshiftComboboxProps,
   TypeMenuContext,
 } from "../MenuContext";
+import type { TypeChildrenOrItems } from "../types";
 
-export interface TypeAutocompleteProps
+interface TypeAutocompleteBaseProps
   extends TypeMenuRootOwnProps,
-    TypeDownshiftComboboxProps {
-  children: TypeMenuRootProps["children"];
+    Omit<TypeDownshiftComboboxProps, "items"> {
   getIsItemVisible?: (
     item: TypeMenuContext["items"][number],
     inputValue: string
   ) => boolean;
 }
+
+export type TypeAutocompleteProps = TypeAutocompleteBaseProps &
+  TypeChildrenOrItems;

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

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { Autocomplete, MenuContent, MenuHeader, MenuFooter } from "../../index";
+import {
+  Autocomplete,
+  MenuContent,
+  MenuHeader,
+  MenuFooter,
+  MenuItem,
+} from "../../index";
 
 export const AutocompleteTypeTest = () => (
   <>
@@ -15,6 +21,17 @@ export const AutocompleteTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </Autocomplete>
+    {/* Valid Autocomplete allows items to be passed using the items prop */}
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      items={[{ children: "Item Name", id: "item-1" }]}
+    />
+    {/* Valid Autocomplete allows items to be rendered using MenuItemComponent */}
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      items={[{ children: "Item Name", id: "item-1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* Valid Autocomplete allows getIsItemVisible function */}
     <Autocomplete menuToggleElement={<>test</>} getIsItemVisible={() => true}>
       Test
@@ -39,8 +56,22 @@ export const AutocompleteTypeTest = () => (
     >
       Test
     </Autocomplete>
-    {/* @ts-expect-error - when no children provided */}
-    <Autocomplete menuToggleElement="test" />
+    {/* @ts-expect-error - when no children or items provided */}
+    <Autocomplete menuToggleElement={<>test</>} />
+    {/* @ts-expect-error - when both children and items provided */}
+    <Autocomplete menuToggleElement={<>test</>} items={[]}>
+      Test
+    </Autocomplete>
+    {/* @ts-expect-error - when MenuItemComponent is passed with children */}
+    <Autocomplete menuToggleElement={<>test</>} MenuItemComponent={MenuItem}>
+      Test
+    </Autocomplete>
+    <Autocomplete
+      menuToggleElement={<>test</>}
+      items={[]}
+      /* @ts-expect-error - when MenuItemComponent has the wrong type */
+      MenuItemComponent={MenuFooter}
+    ></Autocomplete>
     <Autocomplete
       menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */

package/src/MenuContent/MenuContent.tsx

@@ -1,6 +1,8 @@
 import type { TypeMenuContentProps } from "./MenuContentTypes";
 import { StyledMenuContent } from "./styles";
 import { useMenuContext } from "../MenuContext";
+import { MenuItem } from "../MenuItem/index";
+import { mapMenuItems } from "../hooks/useMenuChildren";
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-content/
@@ -27,11 +29,22 @@ import { useMenuContext } from "../MenuContext";
 
 const MenuContent = ({
   id = "menu_content",
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   ...rest
 }: TypeMenuContentProps) => {
   const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
 
+  const children =
+    childrenProp || !items || !items.length
+      ? childrenProp
+      : mapMenuItems({ items, MenuItemComponent });
+
+  if (!children) {
+    return null;
+  }
+
   return (
     <StyledMenuContent
       autoFocus

package/src/MenuContent/MenuContentTypes.ts

@@ -1,7 +1,7 @@
-import React from "react";
 import { type HTMLMotionProps } from "motion/react";
-import type { ReactNode, RefObject } from "react";
+import type { TypeChildrenOrItems } from "../types";
 
-export interface TypeMenuContentProps extends HTMLMotionProps<"ul"> {
-  children: ReactNode;
-}
+interface TypeMenuContentBaseProps extends HTMLMotionProps<"ul"> {}
+
+export type TypeMenuContentProps = TypeMenuContentBaseProps &
+  TypeChildrenOrItems;

package/src/MenuContent/__tests__/MenuContent.typetest.tsx

@@ -4,6 +4,13 @@ export const MenuContentTypeTest = () => (
   <>
     {/* MenuContent allows children */}
     <MenuContent>Test</MenuContent>
+    {/* MenuContent allows items prop*/}
+    <MenuContent items={[{ id: "1", children: "1" }]} />
+    {/* MenuContent allows items prop with MenuItemComponent*/}
+    <MenuContent
+      items={[{ id: "1", children: "1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* MenuContent allows children with MenuItems */}
     <MenuContent>
       <MenuItem id="1">Test 1</MenuItem>
@@ -12,7 +19,16 @@ export const MenuContentTypeTest = () => (
     {/* MenuContent accepts ul props */}
     <MenuContent aria-label="test label">Test</MenuContent>
 
-    {/* @ts-expect-error - MenuContent requires children */}
+    {/* @ts-expect-error - MenuContent requires children or items */}
     <MenuContent />
+    {/* @ts-expect-error - when both children and items provided */}
+    <MenuContent items={[]}>Test</MenuContent>
+    {/* @ts-expect-error - when MenuItemComponent is passed with children */}
+    <MenuContent MenuItemComponent={MenuItem}>Test</MenuContent>
+    <MenuContent
+      items={[]}
+      /* @ts-expect-error - when MenuItemComponent has the wrong type */
+      MenuItemComponent={({ text }) => <div>{text}</div>}
+    ></MenuContent>
   </>
 );

package/src/MenuGroup/MenuGroup.feature

@@ -76,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             | TypeMenuItemProps[]       |
-          | isSingleSelect    | boolean                   |
-          | MenuItemComponent | tyepof MenuItem           |
+          | propName          | propType                                         |
+          | children          | ReactNode                                        |
+          | title             | string                                           |
+          | items             | TypeMenuItemProps[]                              |
+          | isSingleSelect    | boolean                                          |
+          | MenuItemComponent | React.ComponentType<TypeMenuItemProps>           |

package/src/MenuGroup/MenuGroup.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import type { TypeMenuGroupProps } from "./MenuGroupTypes";
 import { StyledMenuGroup, StyledTitle, StyledMenuGroupUl } from "./styles";
 import { MenuItem } from "../MenuItem";
+import { mapMenuItems } from "../hooks/useMenuChildren";
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-group/
@@ -40,7 +41,7 @@ export const MenuGroup = ({
   const children =
     childrenProp || !items || !items.length
       ? childrenProp
-      : items.map((item) => <MenuItemComponent key={item.id} {...item} />);
+      : mapMenuItems({ items, MenuItemComponent });
 
   if (!children) {
     return null;

package/src/MenuGroup/MenuGroupTypes.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import type {
   TypeBorderSystemProps,
   TypeColorSystemProps,
@@ -9,7 +8,7 @@ import type {
   TypeSpaceSystemProps,
   TypeTypographySystemProps,
 } from "@sproutsocial/seeds-react-system-props";
-import { MenuItem, type TypeMenuItemProps } from "../MenuItem/index";
+import type { TypeChildrenOrItems } from "../types";
 
 export interface TypeMenuGroupStyledProps
   extends TypeBorderSystemProps,
@@ -21,14 +20,13 @@ export interface TypeMenuGroupStyledProps
     TypeSpaceSystemProps,
     TypeTypographySystemProps {}
 
-export interface TypeMenuGroupProps
+interface TypeBaseMenuGroupProps
   extends TypeMenuGroupStyledProps,
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
   id: string;
   isSingleSelect?: boolean;
   title?: string;
-  children?: ReactNode;
-  items?: TypeMenuItemProps[];
-  MenuItemComponent?: typeof MenuItem;
   titleAs?: string | React.ComponentType<any>;
 }
+
+export type TypeMenuGroupProps = TypeBaseMenuGroupProps & TypeChildrenOrItems;

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

@@ -10,6 +10,14 @@ export const MenuGroupTypeTest = () => (
       <MenuItem id="1">Test 1</MenuItem>
       <MenuItem id="2">Test 2</MenuItem>
     </MenuGroup>
+    {/* MenuGroup allows items prop */}
+    <MenuGroup id="group" items={[{ id: "1", children: "1" }]} />
+    {/* MenuGroup allows items prop with MenuItemComponent */}
+    <MenuGroup
+      id="group"
+      items={[{ id: "1", children: "1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* MenuGroup allows isSingleSelect prop */}
     <MenuGroup id="group-1" isSingleSelect={true}>
       <MenuItem id="1">Test 1</MenuItem>
@@ -34,10 +42,21 @@ 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 or items */}
+    <MenuGroup id="group" />
+    {/* @ts-expect-error - MenuGroup does not allow children and items together */}
+    <MenuGroup id="group" items={[{ id: "1", children: "1" }]}>
+      Test
+    </MenuGroup>
+    {/* @ts-expect-error - MenuGroup does not allow MenuItemComponent without items */}
+    <MenuGroup id="group" MenuItemComponent={MenuItem}>
+      Test
+    </MenuGroup>
+    {/* @ts-expect-error - MenuGroup validates the type of MenuItemComponent */}
+    <MenuGroup id="group" MenuItemComponent={Text}>
+      Test
+    </MenuGroup>
 
     {/* @ts-expect-error - MenuGroup title is invalid as number */}
     <MenuGroup id="group" title={123}>

package/src/MenuItem/MenuItem.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { useMenuContext } from "../MenuContext";
 import type { TypeDefaultItemProps } from "../types";
 import type { TypeMenuItemProps } from "./MenuItemTypes";

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -4,7 +4,7 @@ import {
   useMultipleSelection,
   type UseSelectState,
 } from "downshift";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import { useMenuChildren } from "../hooks/useMenuChildren";
 import {
   defaultUseSelectProps,
   useSelectStateReducer,
@@ -13,6 +13,7 @@ import { itemToString } from "../utils/itemToString";
 import { MenuRoot } from "../MenuRoot";
 import type { TypeMultiSelectMenuProps } from "./MultiSelectMenuTypes";
 import type { TypeDefaultItemProps } from "../types";
+import { MenuItem } from "../MenuItem/index";
 
 const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
   state,
@@ -43,14 +44,20 @@ const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
  */
 
 export const MultiSelectMenu = ({
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   stateReducer: externalStateReducer,
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
   ...useSelectProps
 }: TypeMultiSelectMenuProps) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent,
+  });
 
   const multiSelectOverrides = Object.entries({
     ...useSelectProps,

package/src/MultiSelectMenu/MultiSelectMenuTypes.ts

@@ -1,12 +1,14 @@
-import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeMenuRootOwnProps } from "../MenuRoot";
 import type {
   TypeDownshiftSelectProps,
   TypeDownshiftMultiSelectProps,
 } from "../MenuContext";
+import type { TypeChildrenOrItems } from "../types";
 
-export interface TypeMultiSelectMenuProps
+interface TypeMultiSelectMenuBaseProps
   extends TypeMenuRootOwnProps,
-    TypeDownshiftSelectProps,
-    TypeDownshiftMultiSelectProps {
-  children: TypeMenuRootProps["children"];
-}
+    Omit<TypeDownshiftSelectProps, "items">,
+    Omit<TypeDownshiftMultiSelectProps, "items"> {}
+
+export type TypeMultiSelectMenuProps = TypeMultiSelectMenuBaseProps &
+  TypeChildrenOrItems;

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

@@ -25,49 +25,6 @@ describe("MultiSelectMenu", () => {
     cleanup();
   });
 
-  it("should render the MenuItems when provided as children", async () => {
-    const { user } = render(
-      <MultiSelectMenu
-        menuToggleElement={
-          <MenuToggleButton aria-label="testable menu" role="button">
-            Testable Menu
-          </MenuToggleButton>
-        }
-      >
-        <MenuContent>
-          <MenuGroup id="group">
-            {menuItems.map((item) => (
-              <MenuItem key={item.id} id={item.id} label={item.label}>
-                {item.label}
-              </MenuItem>
-            ))}
-          </MenuGroup>
-        </MenuContent>
-      </MultiSelectMenu>
-    );
-
-    // Check that the menu is closed
-    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-
-    const toggleButton = screen.getByRole("button", { name: "testable menu" });
-
-    // Open Menu
-    await user.click(toggleButton);
-
-    await waitFor(() => {
-      // Check that the menu is open
-      expect(screen.getByRole("listbox")).toBeInTheDocument();
-      // Check that the menu items are present
-      expect(
-        screen.getByRole("option", { name: "Item 1" })
-      ).toBeInTheDocument();
-      expect(
-        // Check that the menu items are present
-        screen.getByRole("option", { name: "Item 2" })
-      ).toBeInTheDocument();
-    });
-  });
-
   it("should allow for multiple items to be selected", async () => {
     const { user } = render(
       <MultiSelectMenu

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.typetest.tsx

@@ -3,6 +3,7 @@ import {
   MultiSelectMenu,
   MenuContent,
   MenuHeader,
+  MenuItem,
   MenuFooter,
 } from "../../index";
 
@@ -20,6 +21,17 @@ export const MultiSelectMenuTypeTest = () => (
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </MultiSelectMenu>
+    {/* Valid MultiSelectMenu allows items to be passed using the items prop */}
+    <MultiSelectMenu
+      menuToggleElement={<>test</>}
+      items={[{ children: "Item Name", id: "item-1" }]}
+    />
+    {/* Valid MultiSelectMenu allows items prop to be rendered using a MenuItemComponent prop */}
+    <MultiSelectMenu
+      menuToggleElement={<>test</>}
+      items={[{ children: "Item Name", id: "item-1" }]}
+      MenuItemComponent={MenuItem}
+    />
     {/* Valid MultiSelectMenu accepts Downshift props and functions for useSelect */}
     <MultiSelectMenu
       menuToggleElement={<>test</>}
@@ -52,8 +64,23 @@ export const MultiSelectMenuTypeTest = () => (
     >
       Test
     </MultiSelectMenu>
-    {/* @ts-expect-error - when no children provided */}
-    <MultiSelectMenu menuToggleElement="test" />
+    {/* @ts-expect-error - when no children or items provided */}
+    <MultiSelectMenu menuToggleElement={<>test</>} />
+    {/* @ts-expect-error - when both children and MenuItemComponent provided */}
+    <MultiSelectMenu menuToggleElement={<>test</>} MenuItemComponent={MenuItem}>
+      Children
+    </MultiSelectMenu>
+    {/* @ts-expect-error - when both children and items provided */}
+    <MultiSelectMenu menuToggleElement={<>test</>} items={[]}>
+      Children
+    </MultiSelectMenu>
+    <MultiSelectMenu
+      menuToggleElement={<>test</>}
+      /* @ts-expect-error - when MenuItemComponent is of the wrong type */
+      MenuItemComponent={MenuContent}
+    >
+      Children
+    </MultiSelectMenu>
 
     <MultiSelectMenu
       menuToggleElement={<>test</>}