@sproutsocial/seeds-react-menu 0.2.3 → 0.4.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     80.44 KB
-ESM dist/esm/index.js.map 253.72 KB
-ESM ⚡️ Build success in 647ms
-CJS dist/index.js     85.04 KB
-CJS dist/index.js.map 254.58 KB
-CJS ⚡️ Build success in 676ms
+CJS dist/index.js     90.75 KB
+CJS dist/index.js.map 265.73 KB
+CJS ⚡️ Build success in 873ms
+ESM dist/esm/index.js     85.79 KB
+ESM dist/esm/index.js.map 264.83 KB
+ESM ⚡️ Build success in 888ms
 DTS Build start
-DTS ⚡️ Build success in 16400ms
-DTS dist/index.d.ts  15.61 KB
-DTS dist/index.d.mts 15.61 KB
-Done in 20.31s.
+DTS ⚡️ Build success in 28301ms
+DTS dist/index.d.ts  17.70 KB
+DTS dist/index.d.mts 17.70 KB
+Done in 36.29s.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @sproutsocial/seeds-react-menu
 
+## 0.4.0
+
+### Minor Changes
+
+- 1e8337a: Added the Autocomplete and AutocompleteInput components, which can be used to make a text-based, single-select autocomplete form input.
+- cc584e7: Adds items prop to MenuGroup
+  - Allows passing an array of `items` to the `MenuGroup` component
+  - Updates `TypeMenuGroupProps` to require either `children` or `items`
+  - Adds `MenuItemComponent` to `TypeMenuGroupProps` to allow custom rendering of menu items
+
+### Patch Changes
+
+- Updated dependencies [1e8337a]
+  - @sproutsocial/seeds-react-input@1.3.1
+
+## 0.3.0
+
+### Minor Changes
+
+- 1178353: Implements isSingleSelect prop on MenuGroup
+  - This prop allows you to specify that only one item in the MenuGroup can be selected at a time.
+    - This prop is necessary if you need to combine multiple single-select MenuGroups or a mix of single-select and multi-select MenuGroups within a single Menu.
+    - In this case, you should use MultiSelectMenu and set isSingleSelect to true on the MenuGroup(s) that should only allow one selection.
+  - By contrast, the SingleSelectMenu component only allows one item to be selected across all MenuGroups.
+    - If you only have one MenuGroup, or if you only want to allow a single selection across all MenuGroups, you should use SingleSelectMenu instead.
+    - SingleSelectMenu ignores the `isSingleSelect` prop on MenuGroup.
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/esm/index.js

@@ -95,7 +95,7 @@ var require_object_assign = __commonJS({
 });
 
 // src/MenuItem/MenuItem.tsx
-import { useContext as useContext3 } from "react";
+import "react";
 
 // src/MenuContext.tsx
 import {
@@ -112,15 +112,18 @@ var useMenu = ({
   items = [],
   isListbox = false,
   isOpen = false,
+  itemsMap: itemsMapFromProps,
   ...rest
 } = {}) => {
   const menuProps = useMemo(() => ({ ...rest }), [rest]);
   const itemsMap = useMemo(
-    () => items.reduce((map, item) => {
-      map[`${item.id}`] = item;
+    () => itemsMapFromProps || items.reduce((map, item) => {
+      map[`${item.id}`] = {
+        ...item
+      };
       return map;
     }, {}),
-    [items]
+    [items, itemsMapFromProps]
   );
   return {
     isOpen,
@@ -133,9 +136,9 @@ var useMenu = ({
 var MenuContext = createContext(defaultMenuContext);
 var MenuProvider = ({
   children,
-  ...overrides
+  menuProps
 }) => {
-  const filterContext = useMenu(overrides);
+  const filterContext = useMenu(menuProps);
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { ...filterContext }, children });
 };
 var useMenuContext = () => {
@@ -222,8 +225,7 @@ function _isNativeReflectConstruct() {
 
 // ../../node_modules/@babel/runtime/helpers/esm/construct.js
 function _construct(t, e, r) {
-  if (_isNativeReflectConstruct())
-    return Reflect.construct.apply(null, arguments);
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
   var o = [null];
   o.push.apply(o, e);
   var p = new (t.bind.apply(t, o))();
@@ -234,14 +236,12 @@ function _construct(t, e, r) {
 function _wrapNativeSuper(Class) {
   var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
   _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
-    if (Class2 === null || !_isNativeFunction(Class2))
-      return Class2;
+    if (Class2 === null || !_isNativeFunction(Class2)) return Class2;
     if (typeof Class2 !== "function") {
       throw new TypeError("Super expression must either be null or a function");
     }
     if (typeof _cache !== "undefined") {
-      if (_cache.has(Class2))
-        return _cache.get(Class2);
+      if (_cache.has(Class2)) return _cache.get(Class2);
       _cache.set(Class2, Wrapper);
     }
     function Wrapper() {
@@ -564,8 +564,7 @@ var namedColorMap = {
   yellowgreen: "9acd32"
 };
 function nameToHex(color2) {
-  if (typeof color2 !== "string")
-    return color2;
+  if (typeof color2 !== "string") return color2;
   var normalizedColorName = color2.toLowerCase();
   return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
 }
@@ -708,8 +707,7 @@ function guard(lowerBoundary, upperBoundary, value) {
   return Math.max(lowerBoundary, Math.min(upperBoundary, value));
 }
 function transparentize(amount, color2) {
-  if (color2 === "transparent")
-    return color2;
+  if (color2 === "transparent") return color2;
   var parsedColor = parseToRgb(color2);
   var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
   var colorWithAlpha = _extends({}, parsedColor, {
@@ -719,7 +717,7 @@ function transparentize(amount, color2) {
 }
 var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
 
-// ../seeds-react-mixins/src/index.ts
+// ../seeds-react-mixins/dist/esm/index.js
 import { css } from "styled-components";
 import { theme } from "@sproutsocial/seeds-react-theme";
 var visuallyHidden = css`
@@ -759,8 +757,7 @@ var merge = function merge2(a, b) {
   var result = (0, import_object_assign.default)({}, a, b);
   for (var key in a) {
     var _assign;
-    if (!a[key] || typeof b[key] !== "object")
-      continue;
+    if (!a[key] || typeof b[key] !== "object") continue;
     (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
   }
   return result;
@@ -802,8 +799,7 @@ var createParser = function createParser2(config9) {
     var shouldSort = false;
     var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
     for (var key in props) {
-      if (!config9[key])
-        continue;
+      if (!config9[key]) continue;
       var sx = config9[key];
       var raw = props[key];
       var scale = get(props.theme, sx.scale, sx.defaults);
@@ -877,8 +873,7 @@ var createStyleFunction = function createStyleFunction2(_ref) {
   var sx = function sx2(value, scale2, _props) {
     var result = {};
     var n = transform(value, scale2, _props);
-    if (n === null)
-      return;
+    if (n === null) return;
     properties.forEach(function(prop) {
       result[prop] = n;
     });
@@ -917,8 +912,7 @@ var compose = function compose2() {
     parsers[_key] = arguments[_key];
   }
   parsers.forEach(function(parser2) {
-    if (!parser2 || !parser2.config)
-      return;
+    if (!parser2 || !parser2.config) return;
     (0, import_object_assign.default)(config9, parser2.config);
   });
   var parser = createParser(config9);
@@ -1514,8 +1508,7 @@ var positiveOrNegative = function positiveOrNegative2(scale, value) {
   }
   var absolute = Math.abs(value);
   var n = get3(scale, absolute, absolute);
-  if (typeof n === "string")
-    return "-" + n;
+  if (typeof n === "string") return "-" + n;
   return n * -1;
 };
 var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
@@ -1531,8 +1524,7 @@ var responsive = function responsive2(styles) {
     }));
     for (var key in styles) {
       var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
-      if (value == null)
-        continue;
+      if (value == null) continue;
       if (!Array.isArray(value)) {
         next[key] = value;
         continue;
@@ -1544,8 +1536,7 @@ var responsive = function responsive2(styles) {
           continue;
         }
         next[media] = next[media] || {};
-        if (value[i] == null)
-          continue;
+        if (value[i] == null) continue;
         next[media][key] = value[i];
       }
     }
@@ -1887,7 +1878,7 @@ var useOptionProps = ({
 };
 
 // src/MenuItem/MenuItem.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var MenuItem = ({
   id,
   children,
@@ -1899,7 +1890,7 @@ var MenuItem = ({
   color: color2,
   ...props
 }) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useContext3(MenuContext);
+  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useMenuContext();
   const { ...optionProps } = useOptionProps({
     id,
     children,
@@ -1907,7 +1898,7 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
-  return /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
+  return item.hidden ? /* @__PURE__ */ jsx3(Fragment, {}) : /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
     StyledMenuItem,
     {
       id,
@@ -1998,7 +1989,7 @@ var MenuHeaderFeatures = styled2.div`
 `;
 
 // src/MenuHeader/MenuHeader.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var MenuHeader = ({
   children,
   title,
@@ -2006,7 +1997,7 @@ var MenuHeader = ({
   rightAction,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
+  return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
     /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
       title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
@@ -2094,9 +2085,7 @@ var Container = styled5.span`
   padding-left: 0;
   padding-right: 0;
   font-family: ${(props) => props.theme.fontFamily};
-  font-style: ${(props) => {
-  return props.isItalicized && "italic";
-}};
+  font-style: ${(props) => props.isItalicized && "italic"};
 
   ${(props) => props.truncated && css5`
       display: block;
@@ -2190,7 +2179,7 @@ var SmallBodyCopyWithLogic = withTextLogic(SmallBodyCopy);
 SmallBodyCopyWithLogic.displayName = "Text.SmallBodyCopy";
 Text.SmallBodyCopy = SmallBodyCopyWithLogic;
 var Text_default = Text;
-var src_default = Text_default;
+var index_default = Text_default;
 
 // src/MenuGroup/styles.tsx
 var StyledMenuGroup = styled6.li`
@@ -2209,7 +2198,7 @@ var StyledMenuGroup = styled6.li`
   ${layout}
   ${space}
 `;
-var StyledTitle = styled6(src_default.SmallSubHeadline)`
+var StyledTitle = styled6(index_default.SmallSubHeadline)`
   margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
     0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
@@ -2222,16 +2211,26 @@ var StyledMenuGroupUl = styled6.ul`
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var MenuGroup = ({
   titleAs = "h3",
-  children,
+  children: childrenProp,
   title,
   color: color2,
+  isSingleSelect,
+  id,
+  items,
+  MenuItemComponent = MenuItem,
   ...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));
+  if (!children) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs3(
     StyledMenuGroup,
     {
       role: "group",
+      id,
+      isSingleSelect,
       "aria-labelledby": title ? titleId : void 0,
       color: color2,
       ...rest,
@@ -2256,7 +2255,7 @@ var CustomPopoutContent = styled7(Popout.Content)`
 var MenuRoot = ({
   children,
   menuToggleElement,
-  popoutProps,
+  popoutProps: { focusLockProps, ...popoutProps } = {},
   width: width2 = "300px",
   ...contextProps
 }) => {
@@ -2267,7 +2266,7 @@ var MenuRoot = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ jsx9(MenuProvider, { ...contextProps, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ jsx9(
     Popout,
     {
       menuPopout: true,
@@ -2277,7 +2276,8 @@ var MenuRoot = ({
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
-        crossFrame: false
+        crossFrame: false,
+        ...focusLockProps
       },
       disableWrapperAria: true,
       ...popoutProps,
@@ -2288,21 +2288,22 @@ var MenuRoot = ({
 
 // src/MenuLabel.tsx
 import "react";
+import { Label } from "@sproutsocial/seeds-react-label";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var MenuLabel = ({ children, ...rest }) => {
   const { getLabelProps } = useMenuContext();
-  return /* @__PURE__ */ jsx10(Text_default, { as: "label", color: "text.body", ...getLabelProps?.(), ...rest, children });
+  return /* @__PURE__ */ jsx10(Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
 };
 
 // src/MenuToggleButton.tsx
-import { useContext as useContext4 } from "react";
+import { useContext as useContext3 } from "react";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var MenuToggleButton = ({
   children,
   ...rest
 }) => {
-  const { getToggleButtonProps, isListbox, getDropdownProps } = useContext4(MenuContext);
+  const { getToggleButtonProps, isListbox, getDropdownProps } = useContext3(MenuContext);
   return /* @__PURE__ */ jsx11(
     Button,
     {
@@ -2320,26 +2321,25 @@ var MenuToggleButton = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import React11, { useEffect } from "react";
+import React10, { useEffect } from "react";
 import {
   useSelect as useSelect2
 } from "downshift";
 
 // src/hooks/useItemsFromChildren.tsx
-import React10, { useMemo as useMemo3 } from "react";
+import React9, { useMemo as useMemo4 } from "react";
 var walkAllChildren = (children, callback) => {
   const walk = (element, parents2) => {
-    if (element === null || element === void 0)
-      return;
+    if (element === null || element === void 0) return;
     callback(element, parents2);
     const newParents = [...parents2, element];
     const children2 = element.props?.children;
-    React10.Children.toArray(children2).forEach((child) => {
+    React9.Children.toArray(children2).forEach((child) => {
       walk(child, newParents);
     });
   };
   const parents = [];
-  React10.Children.toArray(children).forEach((child) => {
+  React9.Children.toArray(children).forEach((child) => {
     walk(child, parents);
   });
 };
@@ -2347,35 +2347,76 @@ 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 allMenuItems = [];
-  walkAllChildren(children, (element, parents) => {
+  const orderedElements = [];
+  walkAllChildren(children, (element) => {
     if (checkIfIsElement(element, "MenuItem")) {
-      allMenuItems.push({
-        element,
-        parents
+      orderedElements.push({
+        type: "item",
+        element
+      });
+    } else if (checkIfIsElement(element, "MenuGroup")) {
+      orderedElements.push({
+        type: "group",
+        element
       });
     }
   });
-  return allMenuItems;
+  return { orderedElements };
 };
 var useItemsFromChildren = ({
   children
 }) => {
-  const { allMenuItems, menuItemsMap } = useMemo3(() => {
-    const allMenuItemElements = getAllMenuItems(children);
+  const { allMenuItems, menuItemsMap } = useMemo4(() => {
+    const { orderedElements } = getAllMenuItems(children);
     const menuItemsMap2 = {};
-    const allMenuItems2 = allMenuItemElements.map(
-      ({ element }, index) => {
+    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: element.props.id,
-          disabled: element.props.disabled,
-          index,
-          menuItemProps: element.props
+          id: menuItem.props.id,
+          index: index++,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props
         };
+        allMenuItems2.push(item);
         menuItemsMap2[`${item.id}`] = item;
-        return item;
       }
-    );
+    });
     return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 };
   }, [children]);
   return { allMenuItems, menuItemsMap };
@@ -2386,12 +2427,14 @@ import { useSelect } from "downshift";
 var useSelectStateReducer = (state, actionAndChanges) => {
   const { type, changes } = actionAndChanges;
   switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
     case useSelect.stateChangeTypes.ToggleButtonBlur:
       return {
         ...changes,
         // keep menu open on blur
         isOpen: true
       };
+    /** Return standard change payload */
     default:
       return changes;
   }
@@ -2413,8 +2456,7 @@ var handleStateChange = (changes, currentSelectedItem) => {
     return;
   }
   const selectedItem = changes.selectedItem || currentSelectedItem;
-  if (!selectedItem)
-    return;
+  if (!selectedItem) return;
   if (selectedItem.disabled) {
     return;
   }
@@ -2446,7 +2488,7 @@ var ActionMenu = ({
   ...useSelectProps
 }) => {
   const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const [currentSelectedItem, setCurrentSelectedItem] = React11.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = React10.useState(null);
   const { isOpen, ...useSelectReturnProps } = useSelect2({
     ...defaultUseSelectProps,
     items: allMenuItems,
@@ -2597,13 +2639,18 @@ var MultiSelectMenu = ({
         case useSelect4.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect4.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect4.stateChangeTypes.ItemClick:
-          if (!newSelectedItem)
-            break;
+          if (!newSelectedItem) break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
             removeSelectedItem(newSelectedItem);
           } else {
             addSelectedItem(newSelectedItem);
           }
+          if (newSelectedItem.menuGroupProps?.isSingleSelect) {
+            const groupItems = selectedItems.filter(
+              (item) => item.menuGroupProps?.id === newSelectedItem.menuGroupProps?.id
+            );
+            groupItems.forEach((item) => removeSelectedItem(item));
+          }
           break;
         default:
           break;
@@ -2636,8 +2683,129 @@ var MultiSelectMenu = ({
     }
   );
 };
+
+// src/Autocomplete/Autocomplete.tsx
+import React13 from "react";
+import { useCombobox as useCombobox2 } from "downshift";
+
+// src/reducers/useComboboxStateReducer.tsx
+import { useCombobox } from "downshift";
+var useComboboxStateReducer = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    case useCombobox.stateChangeTypes.InputBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true
+      };
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+var defaultUseComboboxProps = {
+  // disabling while item.hidden so that hidden items are ignored by downshift
+  isItemDisabled: (item) => Boolean(item.disabled || item.hidden)
+};
+
+// src/Autocomplete/Autocomplete.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Autocomplete = ({
+  children,
+  stateReducer: externalStateReducer,
+  itemToString: itemToString2 = itemToString,
+  getIsItemVisible = (item, inputValue) => itemToString2(item).toLowerCase().startsWith(inputValue.toLowerCase()),
+  ...useComboboxProps
+}) => {
+  const { allMenuItems } = useItemsFromChildren({ children });
+  const [items, setItems] = React13.useState(allMenuItems);
+  const { isOpen, ...useComboboxReturnProps } = useCombobox2({
+    ...defaultUseComboboxProps,
+    items,
+    itemToString: itemToString2,
+    onInputValueChange({ inputValue }) {
+      setItems(
+        inputValue ? allMenuItems.reduce(
+          (items2, item) => [
+            ...items2,
+            { ...item, hidden: !getIsItemVisible(item, inputValue) }
+          ],
+          []
+        ) : allMenuItems
+      );
+    },
+    stateReducer: (state, actionAndChanges) => {
+      let newState;
+      newState = useComboboxStateReducer(state, actionAndChanges);
+      return externalStateReducer ? externalStateReducer(state, {
+        ...actionAndChanges,
+        changes: newState
+      }) : newState;
+    },
+    ...useComboboxProps
+  });
+  return /* @__PURE__ */ jsx15(
+    MenuRoot,
+    {
+      ...{
+        isListbox: true,
+        items,
+        itemToString: itemToString2,
+        isOpen,
+        ...useComboboxProps,
+        ...useComboboxReturnProps
+      },
+      popoutProps: {
+        focusOnContent: false
+      },
+      children
+    }
+  );
+};
+
+// 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";
+var AutocompleteInput = ({
+  onKeyDown,
+  onChange,
+  onInput,
+  onBlur,
+  onClick,
+  inputProps,
+  ...rest
+}) => {
+  const { getInputProps, inputValue } = useContext4(MenuContext);
+  return /* @__PURE__ */ jsx16(
+    Input,
+    {
+      id: "autocomplete_input",
+      name: "autocomplete_input",
+      inputProps: {
+        ...getInputProps?.({
+          // refKey: "innerRef",
+          onKeyDown,
+          onChange,
+          onInput,
+          onBlur,
+          onClick,
+          value: inputValue
+        }),
+        ...inputProps
+      },
+      autoComplete: false,
+      value: inputValue,
+      ...rest
+    }
+  );
+};
 export {
   ActionMenu,
+  Autocomplete,
+  AutocompleteInput,
   INPUT_TYPES,
   MenuContent,
   MenuContext,