@sproutsocial/seeds-react-menu 0.4.0 → 0.5.0

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</>}

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelect, type UseSelectState } from "downshift";
-import { useItemsFromChildren } from "../hooks/useItemsFromChildren";
+import { useMenuChildren } from "../hooks/useMenuChildren";
 import {
   defaultUseSelectProps,
   useSelectStateReducer,
@@ -9,6 +9,7 @@ import { itemToString } from "../utils/itemToString";
 import { MenuRoot } from "../MenuRoot";
 import type { TypeDefaultItemProps } from "../types";
 import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
+import { MenuItem } from "../MenuItem/index";
 
 /**
  * @link https://seeds.sproutsocial.com/components/singleselect-menu/
@@ -20,12 +21,18 @@ import type { TypeSingleSelectMenuProps } from "./SingleSelectMenuTypes";
  */
 
 export const SingleSelectMenu = ({
-  children,
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  items,
+  MenuItemComponent = MenuItem,
   ...useSelectProps
 }: TypeSingleSelectMenuProps) => {
   /** Get a list of items from the children */
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent,
+  });
 
   /**
    * Destructure Downshift props and call the core useSelect with items and state handler

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

@@ -1,8 +1,10 @@
-import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
+import type { TypeMenuRootOwnProps } from "../MenuRoot";
 import type { TypeDownshiftSelectProps } from "../MenuContext";
+import type { TypeChildrenOrItems } from "../types";
 
-export interface TypeSingleSelectMenuProps
+interface TypeSingleSelectMenuBaseProps
   extends TypeMenuRootOwnProps,
-    TypeDownshiftSelectProps {
-  children: TypeMenuRootProps["children"];
-}
+    Omit<TypeDownshiftSelectProps, "items"> {}
+
+export type TypeSingleSelectMenuProps = TypeSingleSelectMenuBaseProps &
+  TypeChildrenOrItems;

package/src/SingleSelectMenu/__tests__/SingleSelectMenu.typetest.tsx

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

package/src/__tests__/Menu.test.tsx

@@ -356,5 +356,43 @@ describe("Menu", () => {
       // Check that stateReducer is called
       await waitFor(() => expect(mockStateReducer).toHaveBeenCalled());
     });
+
+    it("should render the MenuItems when provided as children", async () => {
+      const { user } = render(
+        <Component menuToggleElement={toggleElement}>
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Check if both items are rendered
+      await screen.findByText("Item 1");
+      await screen.findByText("Item 2");
+    });
+
+    it("should render the MenuItems when provided as items", async () => {
+      const { user } = render(
+        <Component menuToggleElement={toggleElement}>
+          <MenuContent>
+            <MenuItem id="item-1">Item 1</MenuItem>
+            <MenuItem id="item-2">Item 2</MenuItem>
+          </MenuContent>
+        </Component>
+      );
+
+      // Open Menu
+      const menuTrigger = screen.getByRole("button", { name: "Open Menu" });
+      await user.click(menuTrigger);
+
+      // Check if both items are rendered
+      await screen.findByText("Item 1");
+      await screen.findByText("Item 2");
+    });
   });
 });

package/src/hooks/useMenuChildren.tsx

@@ -0,0 +1,210 @@
+import React, { type ReactNode, useMemo } from "react";
+import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
+import type { TypeMenuContext } from "../MenuContext";
+import type { TypeMenuGroupProps } from "../MenuGroup/index";
+import type { TypeNotEmptyChildren } from "../types";
+import { MenuContent, type TypeMenuContentProps } from "../MenuContent/index";
+
+export interface TypeUseMenuChildrenProps {
+  children?: ReactNode;
+  items?: TypeMenuItemProps[];
+  MenuItemComponent?: React.ComponentType<TypeMenuItemProps>;
+}
+export interface TypeMapMenuItemsProps {
+  items: TypeMenuItemProps[];
+  MenuItemComponent: React.ComponentType<TypeMenuItemProps>;
+}
+export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
+export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
+export type TypeMenuContentElement = React.ReactElement<TypeMenuContentProps>;
+
+export interface TypeMenuChildren {
+  type: "item" | "group" | "content";
+  element:
+    | React.ReactElement<TypeMenuGroupProps>
+    | React.ReactElement<TypeMenuItemProps>
+    | React.ReactElement<TypeMenuContentProps>;
+}
+
+// https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
+const walkAllChildren = (
+  children: ReactNode,
+  callback: (element: ReactNode, parents: readonly ReactNode[]) => void
+) => {
+  const walk = (element: ReactNode, parents: readonly ReactNode[]) => {
+    if (element === null || element === undefined) return;
+    callback(element, parents);
+    const newParents = [...parents, element];
+    const children = (element as any).props?.children;
+    React.Children.toArray(children).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  React.Children.toArray(children).forEach((child) => {
+    walk(child, parents);
+  });
+};
+
+const getComponentName = (element: ReactNode): string | undefined => {
+  if (
+    element &&
+    typeof element === "object" &&
+    "type" in element &&
+    typeof element.type !== "string" &&
+    typeof element.type.name === "string"
+  ) {
+    return element.type.name;
+  }
+};
+
+const getAllMenuItems = (children: ReactNode) => {
+  const orderedElements: TypeMenuChildren[] = [];
+  walkAllChildren(children, (element) => {
+    switch (getComponentName(element)) {
+      case "MenuItem":
+        orderedElements.push({
+          type: "item",
+          element: element as TypeItemElement,
+        });
+        break;
+      case "MenuGroup":
+        orderedElements.push({
+          type: "group",
+          element: element as TypeMenuGroupElement,
+        });
+        break;
+      case "MenuContent":
+        orderedElements.push({
+          type: "content",
+          element: element as TypeMenuContentElement,
+        });
+        break;
+      default:
+        break;
+    }
+  });
+  return { orderedElements };
+};
+
+// Returns a fragment containing a `MenuItemComponent` for each item in `items`.
+export const mapMenuItems = ({
+  items,
+  MenuItemComponent,
+}: TypeMapMenuItemsProps) => {
+  return (
+    <>
+      {items.map((menuItem) => (
+        <MenuItemComponent key={menuItem.id} {...menuItem} />
+      ))}
+    </>
+  );
+};
+
+export const useMenuChildren = ({
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
+}: TypeUseMenuChildrenProps) => {
+  const { allMenuItems, menuItemsMap, children } = useMemo(() => {
+    let children: TypeNotEmptyChildren = <></>;
+    let index = 0;
+    const menuItemsMap: TypeMenuContext["itemsMap"] = {};
+    const allMenuItems: TypeMenuContext["items"] = [];
+
+    // If an items prop was passed to the Menu, we can bypass the children traversal.
+    if (items && items.length) {
+      items.forEach((menuItem) => {
+        const item = {
+          id: menuItem.id,
+          index: index++,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem,
+        };
+        allMenuItems.push(item);
+        menuItemsMap[`${item.id}`] = item;
+      });
+      children = (
+        <MenuContent>{mapMenuItems({ items, MenuItemComponent })}</MenuContent>
+      );
+    } else if (childrenProp) {
+      children = childrenProp as TypeNotEmptyChildren;
+      const { orderedElements } = getAllMenuItems(childrenProp);
+
+      orderedElements.forEach(({ type, element }) => {
+        /*       If MenuContent has items, we need to add them to the menuItemsMap.
+         We do not need to worry about checking its children prop because
+         we are already traversing the children, and we do not need to add any
+         menuContentProps to add to the item object*/
+        if (type === "content") {
+          const menuContent = element as TypeMenuContentElement;
+          const items = menuContent.props.items;
+          if (items) {
+            items.forEach((menuItem) => {
+              const item = {
+                id: menuItem.id,
+                index: index++,
+                children: menuItem.children,
+                disabled: menuItem.disabled,
+                menuItemProps: menuItem,
+              };
+              allMenuItems.push(item);
+              menuItemsMap[`${item.id}`] = item;
+            });
+          }
+        } else if (type === "group") {
+          const menuGroup = element as TypeMenuGroupElement;
+          const items = menuGroup.props.items;
+          if (items) {
+            items.forEach((menuItem) => {
+              const item = {
+                id: menuItem.id,
+                index: index++,
+                children: menuItem.children,
+                disabled: menuItem.disabled,
+                menuItemProps: menuItem,
+                menuGroupProps: element.props as TypeMenuGroupProps,
+              };
+              allMenuItems.push(item);
+              menuItemsMap[`${item.id}`] = item;
+            });
+          } else if (menuGroup.props.children) {
+            let children = menuGroup.props.children as TypeItemElement[];
+            // If there is only one child, it will be an object. Make it an array.
+            if (!Array.isArray(children)) {
+              children = [children];
+            }
+            children.forEach((menuItem) => {
+              const item = {
+                id: menuItem.props.id,
+                index: index++,
+                children: menuItem.props.children,
+                disabled: menuItem.props.disabled,
+                menuItemProps: menuItem.props,
+                menuGroupProps: element.props as TypeMenuGroupProps,
+              };
+              allMenuItems.push(item);
+              menuItemsMap[`${item.id}`] = item;
+            });
+          }
+        } else {
+          // Items in groups would have already been added to the map.
+          if (menuItemsMap[`${element.props.id}`]) return;
+          const menuItem = element as TypeItemElement;
+          const item = {
+            id: menuItem.props.id,
+            index: index++,
+            disabled: menuItem.props.disabled,
+            menuItemProps: menuItem.props,
+          };
+          allMenuItems.push(item);
+          menuItemsMap[`${item.id}`] = item;
+        }
+      });
+    }
+
+    return { allMenuItems, menuItemsMap, children };
+  }, [childrenProp, items, MenuItemComponent]);
+
+  return { allMenuItems, menuItemsMap, children };
+};

package/src/index.ts

@@ -16,6 +16,6 @@ export * from "./Autocomplete";
 
 // Utilities
 export * from "./MenuContext";
-export * from "./hooks/useItemsFromChildren";
+export * from "./hooks/useMenuChildren";
 export * from "./reducers/useSelectStateReducer";
 export * from "./types";

package/src/types.ts

@@ -1,5 +1,6 @@
-import type { TypeMenuItemProps } from "./MenuItem";
+import { type TypeMenuItemProps } from "./MenuItem";
 import type { TypeMenuGroupProps } from "./MenuGroup";
+import type { TypeMenuRootProps } from "./MenuRoot/index";
 
 export interface TypeDefaultItemProps {
   id: string;
@@ -10,6 +11,30 @@ export interface TypeDefaultItemProps {
   menuGroupProps?: TypeMenuGroupProps;
 }
 
+/* The base type, which is narrowed to specific configurations.*/
+type TypeBaseChildrenOrItems = {
+  /** Allows menu items to be passed in as children. Cannot be used with the items prop.*/
+  children?: TypeMenuRootProps["children"];
+  /** Allows menu items to be passed in as objects. Cannot be used with the children prop.*/
+  items?: TypeMenuItemProps[];
+  /** Allows a custom MenuItem component to be used when rendering using the items prop.*/
+  MenuItemComponent?: React.ComponentType<TypeMenuItemProps>;
+};
+
+type TypePropsWithChildren = {
+  children: TypeMenuRootProps["children"];
+  items?: never;
+  MenuItemComponent?: never;
+};
+
+type TypePropsWithItems = {
+  children?: never;
+  items: TypeMenuItemProps[];
+};
+
+export type TypeChildrenOrItems = TypeBaseChildrenOrItems &
+  (TypePropsWithChildren | TypePropsWithItems);
+
 export type TypeNotEmptyChildren =
   | React.ReactChild
   | React.ReactFragment

package/src/hooks/useItemsFromChildren.tsx

@@ -1,131 +0,0 @@
-import React, { type ReactNode, useMemo } from "react";
-import { MenuItem, type TypeMenuItemProps } from "../MenuItem";
-import type { TypeMenuContext } from "../MenuContext";
-import type { TypeMenuGroupProps } from "../MenuGroup/index";
-import type { TypeDefaultItemProps } from "../types";
-
-export interface TypeUseItemsFromChildrenProps {
-  children: ReactNode;
-}
-export type TypeItemElement = React.ReactElement<TypeMenuItemProps>;
-export type TypeMenuGroupElement = React.ReactElement<TypeMenuGroupProps>;
-
-export interface TypeMenuChildren {
-  type: "item" | "group";
-  element:
-    | React.ReactElement<TypeMenuGroupProps>
-    | React.ReactElement<TypeMenuItemProps>;
-}
-
-// https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
-const walkAllChildren = (
-  children: ReactNode,
-  callback: (element: ReactNode, parents: readonly ReactNode[]) => void
-) => {
-  const walk = (element: ReactNode, parents: readonly ReactNode[]) => {
-    if (element === null || element === undefined) return;
-    callback(element, parents);
-    const newParents = [...parents, element];
-    const children = (element as any).props?.children;
-    React.Children.toArray(children).forEach((child) => {
-      walk(child, newParents);
-    });
-  };
-  const parents = [];
-  React.Children.toArray(children).forEach((child) => {
-    walk(child, parents);
-  });
-};
-
-const checkIfIsElement = (element: ReactNode, name: string): boolean => {
-  return !!(
-    element &&
-    typeof element === "object" &&
-    "type" in element &&
-    typeof element.type !== "string" &&
-    typeof element.type.name === "string" &&
-    element.type.name === name
-  );
-};
-
-const getAllMenuItems = (children: ReactNode) => {
-  const orderedElements: TypeMenuChildren[] = [];
-  walkAllChildren(children, (element) => {
-    if (checkIfIsElement(element, "MenuItem")) {
-      orderedElements.push({
-        type: "item",
-        element: element as TypeItemElement,
-      });
-    } else if (checkIfIsElement(element, "MenuGroup")) {
-      orderedElements.push({
-        type: "group",
-        element: element as TypeItemElement,
-      });
-    }
-  });
-  return { orderedElements };
-};
-
-export const useItemsFromChildren = ({
-  children,
-}: TypeUseItemsFromChildrenProps) => {
-  const { allMenuItems, menuItemsMap } = useMemo(() => {
-    const { orderedElements } = getAllMenuItems(children);
-    const menuItemsMap: TypeMenuContext["itemsMap"] = {};
-    const allMenuItems: TypeDefaultItemProps[] = [];
-    let index = 0;
-
-    orderedElements.forEach(({ type, element }) => {
-      if (type === "group") {
-        const menuGroup = element as TypeMenuGroupElement;
-        const items = menuGroup.props.items;
-        if (items) {
-          items.forEach((menuItem) => {
-            const item = {
-              id: menuItem.id,
-              index: index++,
-              disabled: menuItem.disabled,
-              menuItemProps: menuItem,
-              menuGroupProps: element.props,
-            };
-            allMenuItems.push(item);
-            menuItemsMap[`${item.id}`] = item;
-          });
-        } else if (menuGroup.props.children) {
-          let children = menuGroup.props.children as TypeItemElement[];
-          // If there is only one child, it will be an object. Make it an array.
-          if (!Array.isArray(children)) {
-            children = [children];
-          }
-          children.forEach((menuItem) => {
-            const item = {
-              id: menuItem.props.id,
-              index: index++,
-              disabled: menuItem.props.disabled,
-              menuItemProps: menuItem.props,
-              menuGroupProps: element.props,
-            };
-            allMenuItems.push(item);
-            menuItemsMap[`${item.id}`] = item;
-          });
-        }
-      } else {
-        // Items in groups would have already been added to the map.
-        if (menuItemsMap[`${element.props.id}`]) return;
-        const menuItem = element as TypeItemElement;
-        const item = {
-          id: menuItem.props.id,
-          index: index++,
-          disabled: menuItem.props.disabled,
-          menuItemProps: menuItem.props,
-        };
-        allMenuItems.push(item);
-        menuItemsMap[`${item.id}`] = item;
-      }
-    });
-
-    return { allMenuItems, menuItemsMap };
-  }, [children]);
-
-  return { allMenuItems, menuItemsMap };
-};