@sproutsocial/seeds-react-menu 0.4.0 → 0.5.0

package/dist/index.js

@@ -128,16 +128,14 @@ __export(index_exports, {
   StyledMenuItem: () => StyledMenuItem,
   StyledTitle: () => StyledTitle,
   defaultUseSelectProps: () => defaultUseSelectProps,
-  useItemsFromChildren: () => useItemsFromChildren,
+  mapMenuItems: () => mapMenuItems,
   useMenu: () => useMenu,
+  useMenuChildren: () => useMenuChildren,
   useMenuContext: () => useMenuContext,
   useSelectStateReducer: () => useSelectStateReducer
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/MenuItem/MenuItem.tsx
-var import_react3 = require("react");
-
 // src/MenuContext.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1960,7 +1958,7 @@ var INPUT_TYPES = {
 };
 
 // src/MenuHeader/MenuHeader.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/MenuHeader/styles.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
@@ -2039,21 +2037,179 @@ var MenuHeader = ({
 
 // src/MenuContent/styles.tsx
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_react5 = require("motion/react");
-var StyledMenuContent = (0, import_styled_components5.default)(import_react5.motion.ul)`
+var import_react4 = require("motion/react");
+var StyledMenuContent = (0, import_styled_components5.default)(import_react4.motion.ul)`
   margin: 0;
   padding: 0;
 `;
 
-// src/MenuContent/MenuContent.tsx
+// src/hooks/useMenuChildren.tsx
+var import_react5 = __toESM(require("react"));
 var import_jsx_runtime5 = require("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;
+    import_react5.default.Children.toArray(children2).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  import_react5.default.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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: items.map((menuItem) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuItemComponent, { ...menuItem }, menuItem.id)) });
+};
+var useMenuChildren = ({
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem
+}) => {
+  const { allMenuItems, menuItemsMap, children } = (0, import_react5.useMemo)(() => {
+    let children2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
+    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__ */ (0, import_jsx_runtime5.jsx)(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
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MenuContent = ({
   id = "menu_content",
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   ...rest
 }) => {
   const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const children = childrenProp || !items || !items.length ? childrenProp : mapMenuItems({ items, MenuItemComponent });
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     StyledMenuContent,
     {
       autoFocus: true,
@@ -2086,9 +2242,9 @@ var StyledMenuFooterBox = (0, import_styled_components6.default)(import_seeds_re
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
@@ -2102,7 +2258,7 @@ var import_react7 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var import_react8 = require("react");
 var Container = import_styled_components8.default.span`
   margin: 0;
@@ -2163,7 +2319,7 @@ var SmallBodyCopy = (0, import_styled_components7.default)(styles_default)`
 `;
 var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
   const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     styles_default,
     {
       typeScale: fontSize2,
@@ -2178,7 +2334,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__ */ (0, import_jsx_runtime7.jsx)(Component, { "data-qa-text": qaText, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, { "data-qa-text": qaText, ...props, children });
   };
 };
 var HeadlineWithLogic = withTextLogic(Headline);
@@ -2232,7 +2388,7 @@ var StyledMenuGroupUl = import_styled_components9.default.ul`
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -2245,11 +2401,11 @@ 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__ */ (0, import_jsx_runtime8.jsx)(MenuItemComponent, { ...item }, item.id));
+  const children = childrenProp || !items || !items.length ? childrenProp : mapMenuItems({ items, MenuItemComponent });
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     StyledMenuGroup,
     {
       role: "group",
@@ -2259,8 +2415,8 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledMenuGroupUl, { children })
       ]
     }
   );
@@ -2270,7 +2426,7 @@ var MenuGroup = ({
 var import_react10 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_react_popout.Popout.Content)`
   padding: 0;
   margin-left: 0;
@@ -2290,13 +2446,13 @@ var MenuRoot = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_seeds_react_popout.Popout,
     {
       menuPopout: true,
       isOpen: !!isOpen,
       setIsOpen,
-      content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomPopoutContent, { width: width2, children }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomPopoutContent, { width: width2, children }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2313,22 +2469,22 @@ var MenuRoot = ({
 // src/MenuLabel.tsx
 var import_react11 = require("react");
 var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var MenuLabel = ({ children, ...rest }) => {
   const { getLabelProps } = useMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_seeds_react_label.Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_label.Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
 };
 
 // src/MenuToggleButton.tsx
 var import_react12 = require("react");
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MenuToggleButton = ({
   children,
   ...rest
 }) => {
   const { getToggleButtonProps, isListbox, getDropdownProps } = (0, import_react12.useContext)(MenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_seeds_react_button.Button,
     {
       appearance: "secondary",
@@ -2345,104 +2501,8 @@ var MenuToggleButton = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_react14 = __toESM(require("react"));
-var import_downshift2 = require("downshift");
-
-// src/hooks/useItemsFromChildren.tsx
 var import_react13 = __toESM(require("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;
-    import_react13.default.Children.toArray(children2).forEach((child) => {
-      walk(child, newParents);
-    });
-  };
-  const parents = [];
-  import_react13.default.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 } = (0, import_react13.useMemo)(() => {
-    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 };
-};
+var import_downshift2 = require("downshift");
 
 // src/reducers/useSelectStateReducer.tsx
 var import_downshift = require("downshift");
@@ -2472,7 +2532,7 @@ var itemToString = (item) => {
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -2505,12 +2565,18 @@ var handleStateChange = (changes, currentSelectedItem) => {
   }
 };
 var ActionMenu = ({
-  children,
+  children: childrenProp,
+  items,
+  MenuItemComponent = MenuItem,
   stateReducer: externalStateReducer,
   ...useSelectProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const [currentSelectedItem, setCurrentSelectedItem] = import_react14.default.useState(null);
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    items,
+    MenuItemComponent
+  });
+  const [currentSelectedItem, setCurrentSelectedItem] = import_react13.default.useState(null);
   const { isOpen, ...useSelectReturnProps } = (0, import_downshift2.useSelect)({
     ...defaultUseSelectProps,
     items: allMenuItems,
@@ -2526,10 +2592,10 @@ var ActionMenu = ({
     },
     ...useSelectProps
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     MenuRoot,
     {
       ...{
@@ -2547,15 +2613,21 @@ var ActionMenu = ({
 };
 
 // src/SingleSelectMenu/SingleSelectMenu.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_downshift3 = require("downshift");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("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 } = (0, import_downshift3.useSelect)({
     ...defaultUseSelectProps,
     items: allMenuItems,
@@ -2570,7 +2642,7 @@ var SingleSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     MenuRoot,
     {
       ...{
@@ -2588,9 +2660,9 @@ var SingleSelectMenu = ({
 };
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_downshift4 = require("downshift");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var selectReducerForMultiSelect = (state, actionAndChanges) => {
   const { changes, type } = actionAndChanges;
   switch (type) {
@@ -2610,14 +2682,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,
@@ -2677,7 +2755,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     MenuRoot,
     {
       ...{
@@ -2704,7 +2782,7 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_downshift6 = require("downshift");
 
 // src/reducers/useComboboxStateReducer.tsx
@@ -2730,16 +2808,22 @@ var defaultUseComboboxProps = {
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("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 [items, setItems] = import_react17.default.useState(allMenuItems);
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    items: itemsProp,
+    MenuItemComponent
+  });
+  const [items, setItems] = import_react16.default.useState(allMenuItems);
   const { isOpen, ...useComboboxReturnProps } = (0, import_downshift6.useCombobox)({
     ...defaultUseComboboxProps,
     items,
@@ -2765,7 +2849,7 @@ var Autocomplete = ({
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuRoot,
     {
       ...{
@@ -2785,9 +2869,9 @@ var Autocomplete = ({
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -2797,8 +2881,8 @@ var AutocompleteInput = ({
   inputProps,
   ...rest
 }) => {
-  const { getInputProps, inputValue } = (0, import_react18.useContext)(MenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const { getInputProps, inputValue } = (0, import_react17.useContext)(MenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_seeds_react_input.Input,
     {
       id: "autocomplete_input",
@@ -2848,8 +2932,9 @@ var AutocompleteInput = ({
   StyledMenuItem,
   StyledTitle,
   defaultUseSelectProps,
-  useItemsFromChildren,
+  mapMenuItems,
   useMenu,
+  useMenuChildren,
   useMenuContext,
   useSelectStateReducer
 });