@sproutsocial/seeds-react-menu 0.4.1 → 0.5.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     85.79 KB
-ESM dist/esm/index.js.map 264.83 KB
-ESM ⚡️ Build success in 892ms
-CJS dist/index.js     90.75 KB
-CJS dist/index.js.map 265.73 KB
-CJS ⚡️ Build success in 925ms
+CJS dist/index.js     93.30 KB
+CJS dist/index.js.map 271.01 KB
+CJS ⚡️ Build success in 795ms
+ESM dist/esm/index.js     88.24 KB
+ESM dist/esm/index.js.map 270.17 KB
+ESM ⚡️ Build success in 802ms
 DTS Build start
-DTS ⚡️ Build success in 30662ms
-DTS dist/index.d.ts  17.70 KB
-DTS dist/index.d.mts 17.70 KB
-Done in 38.03s.
+DTS ⚡️ Build success in 27251ms
+DTS dist/index.d.ts  19.56 KB
+DTS dist/index.d.mts 19.56 KB
+Done in 34.03s.

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sproutsocial/seeds-react-menu
 
+## 0.5.0
+
+### Minor Changes
+
+- 523648e: Adds `items` and `MenuItemComponent` props to 5 Menu components
+  - The following changes have been made to several Menu components:
+    - Adds an `items` prop, so that menu items can be passed as an array of objects, instead of as children elements
+    - Adds a `MenuItemComponent` prop to allow custom rendering of menu items. This prop is optional and has a default value of the `MenuItem` component.
+    - Updates the type to require either `children` or `items`, but not both.
+    - Additionally, the `MenuItemComponent` prop can only be used with the `items` prop.
+  - Affected components:
+    - ActionMenu
+    - SingleSelectMenu
+    - MultiSelectMenu
+    - Autocomplete
+    - MenuContent
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/esm/index.js

@@ -94,9 +94,6 @@ var require_object_assign = __commonJS({
   }
 });
 
-// src/MenuItem/MenuItem.tsx
-import "react";
-
 // src/MenuContext.tsx
 import {
   createContext,
@@ -2015,15 +2012,173 @@ var StyledMenuContent = styled3(motion.ul)`
   padding: 0;
 `;
 
+// src/hooks/useMenuChildren.tsx
+import React4, { useMemo as useMemo3 } from "react";
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+var walkAllChildren = (children, callback) => {
+  const walk = (element, parents2) => {
+    if (element === null || element === void 0) return;
+    callback(element, parents2);
+    const newParents = [...parents2, element];
+    const children2 = element.props?.children;
+    React4.Children.toArray(children2).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  React4.Children.toArray(children).forEach((child) => {
+    walk(child, parents);
+  });
+};
+var getComponentName = (element) => {
+  if (element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string") {
+    return element.type.name;
+  }
+};
+var getAllMenuItems = (children) => {
+  const orderedElements = [];
+  walkAllChildren(children, (element) => {
+    switch (getComponentName(element)) {
+      case "MenuItem":
+        orderedElements.push({
+          type: "item",
+          element
+        });
+        break;
+      case "MenuGroup":
+        orderedElements.push({
+          type: "group",
+          element
+        });
+        break;
+      case "MenuContent":
+        orderedElements.push({
+          type: "content",
+          element
+        });
+        break;
+      default:
+        break;
+    }
+  });
+  return { orderedElements };
+};
+var mapMenuItems = ({
+  items,
+  MenuItemComponent
+}) => {
+  return /* @__PURE__ */ jsx5(Fragment3, { children: items.map((menuItem) => /* @__PURE__ */ jsx5(MenuItemComponent, { ...menuItem }, menuItem.id)) });
+};
+var useMenuChildren = ({
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem
+}) => {
+  const { allMenuItems, menuItemsMap, children } = useMemo3(() => {
+    let children2 = /* @__PURE__ */ jsx5(Fragment3, {});
+    let index = 0;
+    const menuItemsMap2 = {};
+    const allMenuItems2 = [];
+    if (items && items.length) {
+      items.forEach((menuItem) => {
+        const item = {
+          id: menuItem.id,
+          index: index++,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem
+        };
+        allMenuItems2.push(item);
+        menuItemsMap2[`${item.id}`] = item;
+      });
+      children2 = /* @__PURE__ */ jsx5(MenuContent, { children: mapMenuItems({ items, MenuItemComponent }) });
+    } else if (childrenProp) {
+      children2 = childrenProp;
+      const { orderedElements } = getAllMenuItems(childrenProp);
+      orderedElements.forEach(({ type, element }) => {
+        if (type === "content") {
+          const menuContent = element;
+          const items2 = menuContent.props.items;
+          if (items2) {
+            items2.forEach((menuItem) => {
+              const item = {
+                id: menuItem.id,
+                index: index++,
+                children: menuItem.children,
+                disabled: menuItem.disabled,
+                menuItemProps: menuItem
+              };
+              allMenuItems2.push(item);
+              menuItemsMap2[`${item.id}`] = item;
+            });
+          }
+        } else if (type === "group") {
+          const menuGroup = element;
+          const items2 = menuGroup.props.items;
+          if (items2) {
+            items2.forEach((menuItem) => {
+              const item = {
+                id: menuItem.id,
+                index: index++,
+                children: menuItem.children,
+                disabled: menuItem.disabled,
+                menuItemProps: menuItem,
+                menuGroupProps: element.props
+              };
+              allMenuItems2.push(item);
+              menuItemsMap2[`${item.id}`] = item;
+            });
+          } else if (menuGroup.props.children) {
+            let children3 = menuGroup.props.children;
+            if (!Array.isArray(children3)) {
+              children3 = [children3];
+            }
+            children3.forEach((menuItem) => {
+              const item = {
+                id: menuItem.props.id,
+                index: index++,
+                children: menuItem.props.children,
+                disabled: menuItem.props.disabled,
+                menuItemProps: menuItem.props,
+                menuGroupProps: element.props
+              };
+              allMenuItems2.push(item);
+              menuItemsMap2[`${item.id}`] = item;
+            });
+          }
+        } else {
+          if (menuItemsMap2[`${element.props.id}`]) return;
+          const menuItem = element;
+          const item = {
+            id: menuItem.props.id,
+            index: index++,
+            disabled: menuItem.props.disabled,
+            menuItemProps: menuItem.props
+          };
+          allMenuItems2.push(item);
+          menuItemsMap2[`${item.id}`] = item;
+        }
+      });
+    }
+    return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2, children: children2 };
+  }, [childrenProp, items, MenuItemComponent]);
+  return { allMenuItems, menuItemsMap, children };
+};
+
 // src/MenuContent/MenuContent.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var MenuContent = ({
   id = "menu_content",
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   ...rest
 }) => {
   const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
-  return /* @__PURE__ */ jsx5(
+  const children = childrenProp || !items || !items.length ? childrenProp : mapMenuItems({ items, MenuItemComponent });
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
     StyledMenuContent,
     {
       autoFocus: true,
@@ -2056,9 +2211,9 @@ var StyledMenuFooterBox = styled4(Box2)`
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx6(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ jsx7(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
@@ -2078,7 +2233,7 @@ import {
   GRID,
   TYPOGRAPHY
 } from "@sproutsocial/seeds-react-system-props";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 import "react";
 var Container = styled5.span`
   margin: 0;
@@ -2139,7 +2294,7 @@ var SmallBodyCopy = styled22(styles_default)`
 `;
 var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
   const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     styles_default,
     {
       typeScale: fontSize2,
@@ -2154,7 +2309,7 @@ var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
 var withTextLogic = (Component) => {
   return ({ children, ...props }) => {
     const qaText = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ jsx7(Component, { "data-qa-text": qaText, ...props, children });
+    return /* @__PURE__ */ jsx8(Component, { "data-qa-text": qaText, ...props, children });
   };
 };
 var HeadlineWithLogic = withTextLogic(Headline);
@@ -2208,7 +2363,7 @@ var StyledMenuGroupUl = styled6.ul`
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -2221,7 +2376,7 @@ var MenuGroup = ({
   ...rest
 }) => {
   const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
-  const children = childrenProp || !items || !items.length ? childrenProp : items.map((item) => /* @__PURE__ */ jsx8(MenuItemComponent, { ...item }, item.id));
+  const children = childrenProp || !items || !items.length ? childrenProp : mapMenuItems({ items, MenuItemComponent });
   if (!children) {
     return null;
   }
@@ -2235,8 +2390,8 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ jsx8(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ jsx8(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ jsx9(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ jsx9(StyledMenuGroupUl, { children })
       ]
     }
   );
@@ -2246,7 +2401,7 @@ var MenuGroup = ({
 import { useCallback } from "react";
 import styled7 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var CustomPopoutContent = styled7(Popout.Content)`
   padding: 0;
   margin-left: 0;
@@ -2266,13 +2421,13 @@ var MenuRoot = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ jsx9(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ jsx10(
     Popout,
     {
       menuPopout: true,
       isOpen: !!isOpen,
       setIsOpen,
-      content: /* @__PURE__ */ jsx9(CustomPopoutContent, { width: width2, children }),
+      content: /* @__PURE__ */ jsx10(CustomPopoutContent, { width: width2, children }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2289,22 +2444,22 @@ var MenuRoot = ({
 // src/MenuLabel.tsx
 import "react";
 import { Label } from "@sproutsocial/seeds-react-label";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var MenuLabel = ({ children, ...rest }) => {
   const { getLabelProps } = useMenuContext();
-  return /* @__PURE__ */ jsx10(Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
+  return /* @__PURE__ */ jsx11(Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
 };
 
 // src/MenuToggleButton.tsx
 import { useContext as useContext3 } from "react";
 import { Button } from "@sproutsocial/seeds-react-button";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var MenuToggleButton = ({
   children,
   ...rest
 }) => {
   const { getToggleButtonProps, isListbox, getDropdownProps } = useContext3(MenuContext);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Button,
     {
       appearance: "secondary",
@@ -2326,102 +2481,6 @@ import {
   useSelect as useSelect2
 } from "downshift";
 
-// src/hooks/useItemsFromChildren.tsx
-import React9, { useMemo as useMemo4 } from "react";
-var walkAllChildren = (children, callback) => {
-  const walk = (element, parents2) => {
-    if (element === null || element === void 0) return;
-    callback(element, parents2);
-    const newParents = [...parents2, element];
-    const children2 = element.props?.children;
-    React9.Children.toArray(children2).forEach((child) => {
-      walk(child, newParents);
-    });
-  };
-  const parents = [];
-  React9.Children.toArray(children).forEach((child) => {
-    walk(child, parents);
-  });
-};
-var checkIfIsElement = (element, name) => {
-  return !!(element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string" && element.type.name === name);
-};
-var getAllMenuItems = (children) => {
-  const orderedElements = [];
-  walkAllChildren(children, (element) => {
-    if (checkIfIsElement(element, "MenuItem")) {
-      orderedElements.push({
-        type: "item",
-        element
-      });
-    } else if (checkIfIsElement(element, "MenuGroup")) {
-      orderedElements.push({
-        type: "group",
-        element
-      });
-    }
-  });
-  return { orderedElements };
-};
-var useItemsFromChildren = ({
-  children
-}) => {
-  const { allMenuItems, menuItemsMap } = useMemo4(() => {
-    const { orderedElements } = getAllMenuItems(children);
-    const menuItemsMap2 = {};
-    const allMenuItems2 = [];
-    let index = 0;
-    orderedElements.forEach(({ type, element }) => {
-      if (type === "group") {
-        const menuGroup = element;
-        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
-            };
-            allMenuItems2.push(item);
-            menuItemsMap2[`${item.id}`] = item;
-          });
-        } else if (menuGroup.props.children) {
-          let children2 = menuGroup.props.children;
-          if (!Array.isArray(children2)) {
-            children2 = [children2];
-          }
-          children2.forEach((menuItem) => {
-            const item = {
-              id: menuItem.props.id,
-              index: index++,
-              disabled: menuItem.props.disabled,
-              menuItemProps: menuItem.props,
-              menuGroupProps: element.props
-            };
-            allMenuItems2.push(item);
-            menuItemsMap2[`${item.id}`] = item;
-          });
-        }
-      } else {
-        if (menuItemsMap2[`${element.props.id}`]) return;
-        const menuItem = element;
-        const item = {
-          id: menuItem.props.id,
-          index: index++,
-          disabled: menuItem.props.disabled,
-          menuItemProps: menuItem.props
-        };
-        allMenuItems2.push(item);
-        menuItemsMap2[`${item.id}`] = item;
-      }
-    });
-    return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 };
-  }, [children]);
-  return { allMenuItems, menuItemsMap };
-};
-
 // src/reducers/useSelectStateReducer.tsx
 import { useSelect } from "downshift";
 var useSelectStateReducer = (state, actionAndChanges) => {
@@ -2450,7 +2509,7 @@ var itemToString = (item) => {
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -2483,11 +2542,17 @@ var handleStateChange = (changes, currentSelectedItem) => {
   }
 };
 var ActionMenu = ({
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   stateReducer: externalStateReducer,
   ...useSelectProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent
+  });
   const [currentSelectedItem, setCurrentSelectedItem] = React10.useState(null);
   const { isOpen, ...useSelectReturnProps } = useSelect2({
     ...defaultUseSelectProps,
@@ -2507,7 +2572,7 @@ var ActionMenu = ({
   useEffect(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     MenuRoot,
     {
       ...{
@@ -2527,13 +2592,19 @@ var ActionMenu = ({
 // src/SingleSelectMenu/SingleSelectMenu.tsx
 import "react";
 import { useSelect as useSelect3 } from "downshift";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SingleSelectMenu = ({
-  children,
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  items,
+  MenuItemComponent = MenuItem,
   ...useSelectProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent
+  });
   const { isOpen, ...useSelectReturnProps } = useSelect3({
     ...defaultUseSelectProps,
     items: allMenuItems,
@@ -2548,7 +2619,7 @@ var SingleSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     MenuRoot,
     {
       ...{
@@ -2571,7 +2642,7 @@ import {
   useSelect as useSelect4,
   useMultipleSelection
 } from "downshift";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var selectReducerForMultiSelect = (state, actionAndChanges) => {
   const { changes, type } = actionAndChanges;
   switch (type) {
@@ -2591,14 +2662,20 @@ var selectReducerForMultiSelect = (state, actionAndChanges) => {
   return changes;
 };
 var MultiSelectMenu = ({
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   stateReducer: externalStateReducer,
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
   ...useSelectProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent
+  });
   const multiSelectOverrides = Object.entries({
     ...useSelectProps,
     getA11yStatusMessage: getA11yMultiStatusMessage,
@@ -2658,7 +2735,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     MenuRoot,
     {
       ...{
@@ -2711,15 +2788,21 @@ var defaultUseComboboxProps = {
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Autocomplete = ({
-  children,
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  items: itemsProp,
+  MenuItemComponent = MenuItem,
   itemToString: itemToString2 = itemToString,
   getIsItemVisible = (item, inputValue) => itemToString2(item).toLowerCase().startsWith(inputValue.toLowerCase()),
   ...useComboboxProps
 }) => {
-  const { allMenuItems } = useItemsFromChildren({ children });
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    items: itemsProp,
+    MenuItemComponent
+  });
   const [items, setItems] = React13.useState(allMenuItems);
   const { isOpen, ...useComboboxReturnProps } = useCombobox2({
     ...defaultUseComboboxProps,
@@ -2746,7 +2829,7 @@ var Autocomplete = ({
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     MenuRoot,
     {
       ...{
@@ -2768,7 +2851,7 @@ var Autocomplete = ({
 // src/Autocomplete/AutocompleteInput.tsx
 import { useContext as useContext4 } from "react";
 import { Input } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -2779,7 +2862,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputProps, inputValue } = useContext4(MenuContext);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Input,
     {
       id: "autocomplete_input",
@@ -2828,8 +2911,9 @@ export {
   StyledMenuItem,
   StyledTitle,
   defaultUseSelectProps,
-  useItemsFromChildren,
+  mapMenuItems,
   useMenu,
+  useMenuChildren,
   useMenuContext,
   useSelectStateReducer
 };