@sproutsocial/seeds-react-menu 0.6.0 → 1.0.0

package/dist/index.d.mts

@@ -52,7 +52,10 @@ type TypeMenuGroupProps<I extends TypeMenuItemProps = TypeMenuItemProps> = TypeM
  *
  * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
  */
-declare const MenuGroup: <I extends TypeMenuItemProps = TypeMenuItemProps>({ titleAs, children: childrenProp, title, color, isSingleSelect, id, menuItems, MenuItemComponent, ...rest }: TypeMenuGroupProps<I>) => react_jsx_runtime.JSX.Element | null;
+declare const MenuGroup: {
+    <I extends TypeMenuItemProps = TypeMenuItemProps>({ titleAs, children: childrenProp, title, color, isSingleSelect, id, menuItems, MenuItemComponent, ...rest }: TypeMenuGroupProps<I>): react_jsx_runtime.JSX.Element | null;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupBaseProps, never>;
 declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
@@ -81,6 +84,7 @@ interface TypeMenuContextBaseProps {
     };
     isListbox?: boolean;
     hiddenItemsMap?: Record<string, boolean>;
+    hiddenItemsCount?: number;
     setHiddenItemsMap?: React__default.Dispatch<React__default.SetStateAction<Record<string, boolean>>>;
     subMenuId?: string;
     setSubMenuId?: (id: string) => void;
@@ -227,7 +231,10 @@ interface TypeMenuItemProps extends TypeMenuItemStyledProps, Omit<GetItemPropsOp
     inputLabelId?: string;
 }
 
-declare const MenuItem: ({ id, children, onClick, onKeyDown, disabled, active, innerRef, href, color, ...props }: TypeMenuItemProps) => react_jsx_runtime.JSX.Element;
+declare const MenuItem: {
+    ({ id, children, onClick, onKeyDown, disabled, active, innerRef, href, color, ...props }: TypeMenuItemProps): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 declare const MenuItemContainer: styled_components.StyledComponent<"li", styled_components.DefaultTheme, {}, never>;
 declare const StyledMenuItem: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
@@ -281,7 +288,10 @@ type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = Omi
  * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
  * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
  */
-declare const MenuContent: <I extends TypeMenuItemProps = TypeMenuItemProps>({ id, children: childrenProp, menuItems, MenuItemComponent, onKeyDown, innerRef, ...rest }: TypeMenuContentProps<I>) => react_jsx_runtime.JSX.Element | null;
+declare const MenuContent: {
+    <I extends TypeMenuItemProps = TypeMenuItemProps>({ id, children: childrenProp, menuItems, MenuItemComponent, onKeyDown, innerRef, ...rest }: TypeMenuContentProps<I>): react_jsx_runtime.JSX.Element | null;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-footer/
@@ -304,12 +314,20 @@ type TypeGetIsItemVisibleFn = (item: TypeMenuContext["items"][number], inputValu
 interface TypeMenuSearchInputProps extends TypeInputProps {
     getIsItemVisible?: TypeGetIsItemVisibleFn;
 }
+/**
+ * <input
+ *  aria-activedescendant=""
+ *  aria-autocomplete="list"
+ *  aria-controls="downshift-:r1:-menu"
+ *  aria-expanded="true"
+ * />
+ */
 /**
  * @link https://seeds.sproutsocial.com/components/menu-header/
  *
  * @description MenuSearchInput is search input that can be added to the MenuHeader to filter the items.
  */
-declare const MenuSearchInput: ({ getIsItemVisible, ...inputProps }: TypeMenuSearchInputProps) => react_jsx_runtime.JSX.Element;
+declare const MenuSearchInput: ({ getIsItemVisible, inputProps, ...restInputProps }: TypeMenuSearchInputProps) => react_jsx_runtime.JSX.Element;
 
 interface TypeMenuTokenInputProps extends TypeTokenInputProps {
     getTokenProps?: (itemId: TypeInternalItemProps["id"]) => Partial<TypeTokenSpec>;
@@ -378,7 +396,10 @@ interface TypeSubmenuItemProps<I extends TypeMenuItemProps, P extends TypeSubmen
     menuProps: Omit<P, "menuToggleElement">;
 }
 
-declare const SubmenuItem: <I extends TypeMenuItemProps, P extends TypeSubmenuValidMenuComponentProps<I>>({ MenuComponent, menuProps: { children: menuChildren, menuItems, MenuItemComponent, popoutProps: { popperProps, ...popoutProps }, onStateChange, ...menuProps }, id, children, ...rest }: TypeSubmenuItemProps<I, P>) => react_jsx_runtime.JSX.Element;
+declare const SubmenuItem: {
+    <I extends TypeMenuItemProps, P extends TypeSubmenuValidMenuComponentProps<I>>({ MenuComponent, menuProps: { children: menuChildren, menuItems, MenuItemComponent, popoutProps: { popperProps, ...popoutProps }, onStateChange, ...menuProps }, id, children, ...rest }: TypeSubmenuItemProps<I, P>): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 type TypeSingleAutocompleteProps<I extends TypeMenuItemProps = TypeMenuItemProps> = TypeMenuRootOwnProps & TypeChildrenOrItems<I> & TypeDownshiftComboboxProps & {
     getIsItemVisible?: TypeGetIsItemVisibleFn;
@@ -435,11 +456,17 @@ interface TypeNestedMenuProps<I extends TypeMenuItemProps = TypeNestedMenuItemPr
 
 declare const NestedMenu: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ initialMenuId, menus, onBackButtonClick, backArrowLabel, menuToggleElement, }: TypeNestedMenuProps<I>) => react_jsx_runtime.JSX.Element;
 
-declare const NestedMenuItem: ({ children, childMenuId, onClick: onClickProp, ...rest }: TypeNestedMenuItemProps) => react_jsx_runtime.JSX.Element;
+declare const NestedMenuItem: {
+    ({ children, childMenuId, onClick: onClickProp, ...rest }: TypeNestedMenuItemProps): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 declare const NestedMenuHeader: ({ backArrowLabel, ...props }: TypeNestedMenuHeaderProps) => react_jsx_runtime.JSX.Element;
 
-declare const NestedMenuContent: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ innerRef: innerRefProp, onKeyDown: onKeyDownProp, children, menuItems, MenuItemComponent, ...props }: TypeMenuContentProps<I>) => react_jsx_runtime.JSX.Element;
+declare const NestedMenuContent: {
+    <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ innerRef: innerRefProp, onKeyDown: onKeyDownProp, children, menuItems, MenuItemComponent, ...props }: TypeMenuContentProps<I>): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 interface TypeNestedMenuContext {
     selectedMenuPath: string[];

package/dist/index.d.ts

@@ -52,7 +52,10 @@ type TypeMenuGroupProps<I extends TypeMenuItemProps = TypeMenuItemProps> = TypeM
  *
  * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
  */
-declare const MenuGroup: <I extends TypeMenuItemProps = TypeMenuItemProps>({ titleAs, children: childrenProp, title, color, isSingleSelect, id, menuItems, MenuItemComponent, ...rest }: TypeMenuGroupProps<I>) => react_jsx_runtime.JSX.Element | null;
+declare const MenuGroup: {
+    <I extends TypeMenuItemProps = TypeMenuItemProps>({ titleAs, children: childrenProp, title, color, isSingleSelect, id, menuItems, MenuItemComponent, ...rest }: TypeMenuGroupProps<I>): react_jsx_runtime.JSX.Element | null;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 declare const StyledMenuGroup: styled_components.StyledComponent<"li", styled_components.DefaultTheme, TypeMenuGroupBaseProps, never>;
 declare const StyledTitle: styled_components.StyledComponent<React$1.FC<_sproutsocial_seeds_react_text.TypeTextProps>, styled_components.DefaultTheme, {}, never>;
@@ -81,6 +84,7 @@ interface TypeMenuContextBaseProps {
     };
     isListbox?: boolean;
     hiddenItemsMap?: Record<string, boolean>;
+    hiddenItemsCount?: number;
     setHiddenItemsMap?: React__default.Dispatch<React__default.SetStateAction<Record<string, boolean>>>;
     subMenuId?: string;
     setSubMenuId?: (id: string) => void;
@@ -227,7 +231,10 @@ interface TypeMenuItemProps extends TypeMenuItemStyledProps, Omit<GetItemPropsOp
     inputLabelId?: string;
 }
 
-declare const MenuItem: ({ id, children, onClick, onKeyDown, disabled, active, innerRef, href, color, ...props }: TypeMenuItemProps) => react_jsx_runtime.JSX.Element;
+declare const MenuItem: {
+    ({ id, children, onClick, onKeyDown, disabled, active, innerRef, href, color, ...props }: TypeMenuItemProps): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 declare const MenuItemContainer: styled_components.StyledComponent<"li", styled_components.DefaultTheme, {}, never>;
 declare const StyledMenuItem: styled_components.StyledComponent<"button", styled_components.DefaultTheme, {
@@ -281,7 +288,10 @@ type TypeMenuContentProps<I extends TypeMenuItemProps = TypeMenuItemProps> = Omi
  * @see {@link https://seeds.sproutsocial.com/components/menu-item/ | MenuItem}
  * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
  */
-declare const MenuContent: <I extends TypeMenuItemProps = TypeMenuItemProps>({ id, children: childrenProp, menuItems, MenuItemComponent, onKeyDown, innerRef, ...rest }: TypeMenuContentProps<I>) => react_jsx_runtime.JSX.Element | null;
+declare const MenuContent: {
+    <I extends TypeMenuItemProps = TypeMenuItemProps>({ id, children: childrenProp, menuItems, MenuItemComponent, onKeyDown, innerRef, ...rest }: TypeMenuContentProps<I>): react_jsx_runtime.JSX.Element | null;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 /**
  * @link https://seeds.sproutsocial.com/components/menu-footer/
@@ -304,12 +314,20 @@ type TypeGetIsItemVisibleFn = (item: TypeMenuContext["items"][number], inputValu
 interface TypeMenuSearchInputProps extends TypeInputProps {
     getIsItemVisible?: TypeGetIsItemVisibleFn;
 }
+/**
+ * <input
+ *  aria-activedescendant=""
+ *  aria-autocomplete="list"
+ *  aria-controls="downshift-:r1:-menu"
+ *  aria-expanded="true"
+ * />
+ */
 /**
  * @link https://seeds.sproutsocial.com/components/menu-header/
  *
  * @description MenuSearchInput is search input that can be added to the MenuHeader to filter the items.
  */
-declare const MenuSearchInput: ({ getIsItemVisible, ...inputProps }: TypeMenuSearchInputProps) => react_jsx_runtime.JSX.Element;
+declare const MenuSearchInput: ({ getIsItemVisible, inputProps, ...restInputProps }: TypeMenuSearchInputProps) => react_jsx_runtime.JSX.Element;
 
 interface TypeMenuTokenInputProps extends TypeTokenInputProps {
     getTokenProps?: (itemId: TypeInternalItemProps["id"]) => Partial<TypeTokenSpec>;
@@ -378,7 +396,10 @@ interface TypeSubmenuItemProps<I extends TypeMenuItemProps, P extends TypeSubmen
     menuProps: Omit<P, "menuToggleElement">;
 }
 
-declare const SubmenuItem: <I extends TypeMenuItemProps, P extends TypeSubmenuValidMenuComponentProps<I>>({ MenuComponent, menuProps: { children: menuChildren, menuItems, MenuItemComponent, popoutProps: { popperProps, ...popoutProps }, onStateChange, ...menuProps }, id, children, ...rest }: TypeSubmenuItemProps<I, P>) => react_jsx_runtime.JSX.Element;
+declare const SubmenuItem: {
+    <I extends TypeMenuItemProps, P extends TypeSubmenuValidMenuComponentProps<I>>({ MenuComponent, menuProps: { children: menuChildren, menuItems, MenuItemComponent, popoutProps: { popperProps, ...popoutProps }, onStateChange, ...menuProps }, id, children, ...rest }: TypeSubmenuItemProps<I, P>): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 type TypeSingleAutocompleteProps<I extends TypeMenuItemProps = TypeMenuItemProps> = TypeMenuRootOwnProps & TypeChildrenOrItems<I> & TypeDownshiftComboboxProps & {
     getIsItemVisible?: TypeGetIsItemVisibleFn;
@@ -435,11 +456,17 @@ interface TypeNestedMenuProps<I extends TypeMenuItemProps = TypeNestedMenuItemPr
 
 declare const NestedMenu: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ initialMenuId, menus, onBackButtonClick, backArrowLabel, menuToggleElement, }: TypeNestedMenuProps<I>) => react_jsx_runtime.JSX.Element;
 
-declare const NestedMenuItem: ({ children, childMenuId, onClick: onClickProp, ...rest }: TypeNestedMenuItemProps) => react_jsx_runtime.JSX.Element;
+declare const NestedMenuItem: {
+    ({ children, childMenuId, onClick: onClickProp, ...rest }: TypeNestedMenuItemProps): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 declare const NestedMenuHeader: ({ backArrowLabel, ...props }: TypeNestedMenuHeaderProps) => react_jsx_runtime.JSX.Element;
 
-declare const NestedMenuContent: <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ innerRef: innerRefProp, onKeyDown: onKeyDownProp, children, menuItems, MenuItemComponent, ...props }: TypeMenuContentProps<I>) => react_jsx_runtime.JSX.Element;
+declare const NestedMenuContent: {
+    <I extends TypeMenuItemProps = TypeNestedMenuItemProps>({ innerRef: innerRefProp, onKeyDown: onKeyDownProp, children, menuItems, MenuItemComponent, ...props }: TypeMenuContentProps<I>): react_jsx_runtime.JSX.Element;
+    __MENU_PRIMITIVE_TYPE: string;
+};
 
 interface TypeNestedMenuContext {
     selectedMenuPath: string[];

package/dist/index.js

@@ -203,7 +203,7 @@ var useMenu = ({
   );
   const isItemSelected = import_react.default.useCallback(
     (id) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
-    [selectedItem, selectedItemIds]
+    [selectedItem?.id, selectedItemIds]
   );
   const getInputComponentProps = import_react.default.useCallback(
     ({ inputProps, ...props }) => {
@@ -1824,8 +1824,10 @@ var highlightedStyles = import_styled_components2.css`
   text-decoration: none;
 `;
 var activeStyles = import_styled_components2.css`
-  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
-  color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.border.base};
+  background-color: ${({ theme: theme2 }) => theme2.colors.menuItem.background.active};
+  color: ${({ theme: theme2 }) => theme2.colors.text.body};
+  text-decoration: none;
 `;
 var MenuItemContainer = import_styled_components2.default.li`
   box-sizing: border-box;
@@ -1994,10 +1996,10 @@ var useOptionProps = ({
   inputLabelId,
   ...props
 }) => {
-  const { selectedItem, selectedItems, isListbox, isItemSelected } = useMenuContentContext();
+  const { selectedItem, selectedItemIds, isListbox, isItemSelected } = useMenuContentContext();
   const selected = (0, import_react2.useMemo)(
     () => isItemSelected(id),
-    [selectedItem, selectedItems]
+    [selectedItem?.id, selectedItemIds]
   );
   const label = inputLabelId || `menu-item-child-${id}`;
   return isListbox ? {
@@ -2072,6 +2074,7 @@ var MenuItem = ({
     }
   ) });
 };
+MenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/MenuItem/MenuItemTypes.ts
 var INPUT_TYPES = {
@@ -2120,6 +2123,10 @@ var MenuTitleText = import_styled_components4.default.h3`
 var MenuChildrenContainer = import_styled_components4.default.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme: theme2 }) => theme2.space[300]};
+
+  &:first-child {
+    margin-top: 0;
+  }
 `;
 var MenuHeaderFeatures = import_styled_components4.default.div`
   display: flex;
@@ -2153,8 +2160,9 @@ var MenuHeader = ({
   rightAction,
   ...rest
 }) => {
+  const showTopRow = title || leftAction || rightAction;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
+    showTopRow && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
       title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuTitleText, { $leftAction: !!leftAction, children: title }),
       rightAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "right-action", children: rightAction })
@@ -2190,8 +2198,8 @@ var walkAllChildren = (children, callback) => {
   });
 };
 var getComponentName = (element) => {
-  if (element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string") {
-    return element.type.name;
+  if (element && typeof element === "object" && "type" in element && (typeof element.type === "function" || typeof element.type === "object") && "__MENU_PRIMITIVE_TYPE" in element.type && typeof element.type.__MENU_PRIMITIVE_TYPE === "string") {
+    return element.type.__MENU_PRIMITIVE_TYPE;
   }
 };
 var addMenuItem = ({
@@ -2272,8 +2280,6 @@ var setMenuItemsFromChildren = ({
   walkAllChildren(children, (element) => {
     switch (getComponentName(element)) {
       case "MenuItem":
-      case "SubmenuItem":
-      case "NestedMenuItem":
         const menuItem = element;
         if (menuItemsMap[`${menuItem.props.id}`]) return;
         addMenuItem({
@@ -2295,7 +2301,6 @@ var setMenuItemsFromChildren = ({
         });
         break;
       case "MenuContent":
-      case "NestedMenuContent":
         addItemsFromContent({
           // Cast element to the TypeMenuContentElement since we know it's a content and is needed for addItemsFromContent.
           contentElement: element,
@@ -2390,6 +2395,7 @@ var MenuContent = ({
     }
   );
 };
+MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/MenuFooter/MenuFooter.tsx
 var import_react7 = require("react");
@@ -2398,7 +2404,7 @@ var import_react7 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
 var StyledMenuFooterBox = (0, import_styled_components6.default)(import_seeds_react_box2.Box)`
-  padding: ${(p) => p.theme.space[400]};
+  padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
@@ -2540,7 +2546,7 @@ var StyledMenuGroup = import_styled_components9.default.li`
   ${space}
 `;
 var StyledTitle = (0, import_styled_components9.default)(index_default.SmallSubHeadline)`
-  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
+  font-size: ${({ theme: theme2 }) => theme2.typography[100].fontSize};
   margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
     0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
@@ -2583,6 +2589,7 @@ var MenuGroup = ({
     }
   );
 };
+MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
 var import_react11 = require("react");
@@ -2601,13 +2608,26 @@ var MenuRoot = ({
   width: width2 = "300px",
   ...contextProps
 }) => {
-  const { isOpen, openMenu, closeMenu } = contextProps;
+  const {
+    isOpen,
+    openMenu,
+    closeMenu,
+    inputValue,
+    hiddenItemsCount = 0,
+    items
+  } = contextProps;
   const setIsOpen = (0, import_react11.useCallback)(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
     [openMenu, closeMenu]
   );
+  (0, import_react11.useEffect)(() => {
+    if (!inputValue) return;
+    if (items && hiddenItemsCount >= items.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_seeds_react_popout.Popout,
@@ -2712,7 +2732,8 @@ var useItemFiltering = ({
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var MenuSearchInput = ({
   getIsItemVisible,
-  ...inputProps
+  inputProps,
+  ...restInputProps
 }) => {
   const {
     items,
@@ -2728,14 +2749,15 @@ var MenuSearchInput = ({
     setHiddenItemsMap
   });
   import_react15.default.useEffect(() => {
-    updateFilteredItems({ inputValue: inputProps.value || "" });
-  }, [isOpen, inputProps.value]);
+    updateFilteredItems({ inputValue: restInputProps.value || "" });
+  }, [isOpen, restInputProps.value]);
+  const toggleButtonProps = getToggleButtonProps?.() || {};
   const handleKeyDown = import_react15.default.useCallback(
     (e) => {
       if (e.key === " ") return;
-      getToggleButtonProps?.()["onKeyDown"](e);
+      toggleButtonProps.onKeyDown?.(e);
     },
-    [getToggleButtonProps]
+    [toggleButtonProps.onKeyDown]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_seeds_react_input.Input,
@@ -2745,7 +2767,13 @@ var MenuSearchInput = ({
       },
       onKeyDown: handleKeyDown,
       autoComplete: false,
-      ...inputProps
+      "aria-autocomplete": "list",
+      inputProps: {
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
+        ...inputProps
+      },
+      ...restInputProps
     }
   );
 };
@@ -2879,12 +2907,13 @@ var MenuSearchTokenInput = ({
   import_react17.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
+  const toggleButtonProps = getToggleButtonProps?.() || {};
   const handleKeyDown = import_react17.default.useCallback(
     (e) => {
       if (e.key === " ") return;
-      getToggleButtonProps?.()["onKeyDown"](e);
+      toggleButtonProps.onKeyDown?.(e);
     },
-    [getToggleButtonProps]
+    [toggleButtonProps.onKeyDown]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     MenuTokenInput,
@@ -2896,6 +2925,8 @@ var MenuSearchTokenInput = ({
       onKeyDown: handleKeyDown,
       inputProps: {
         value: internalValue,
+        ["aria-activedescendant"]: toggleButtonProps["aria-activedescendant"],
+        ["aria-controls"]: toggleButtonProps["aria-controls"],
         ...inputProps
       },
       MenuContext: MenuContentContext,
@@ -3093,6 +3124,7 @@ var SubmenuItem = ({
     }
   );
 };
+SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ActionMenu/ActionMenu.tsx
 var import_react20 = __toESM(require("react"));
@@ -3217,31 +3249,40 @@ var defaultUseSelectPropsForMulti = {
 var defaultUseComboboxPropsForMulti = {
   stateReducer: useComboboxStateReducerForMulti
 };
+var itemToKey2 = (item) => item?.id;
 var useDownshiftDefaults = ({
   isCombobox = false,
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
   const [hiddenItemsMap, setHiddenItemsMap] = import_react19.default.useState({});
+  const hiddenItemsCount = import_react19.default.useMemo(
+    () => Object.keys(hiddenItemsMap).filter(Boolean).length,
+    [hiddenItemsMap]
+  );
   const isItemDisabled = import_react19.default.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
   return {
     hiddenItemsMap,
+    hiddenItemsCount,
     setHiddenItemsMap,
     defaultDownshiftProps: {
       select: !isCombobox ? {
+        itemToKey: itemToKey2,
         // disabling while item.hidden so that hidden items are ignored by downshift
         isItemDisabled,
         ...isMulti ? defaultUseSelectPropsForMulti : defaultUseSelectProps
       } : {},
       combobox: isCombobox ? {
+        itemToKey: itemToKey2,
         // disabling while item.hidden so that hidden items are ignored by downshift
         isItemDisabled,
         ...isMulti ? defaultUseComboboxPropsForMulti : defaultUseComboboxProps
       } : {},
       multi: isMulti ? {
+        itemToKey: itemToKey2,
         // handles the prop name mapping for multi select
         ...getMultiSelectOverrides(multiSelectProps)
       } : {}
@@ -3549,7 +3590,7 @@ var MultiAutocomplete = ({
   menuItems,
   MenuItemComponent,
   itemToString: itemToString2 = itemToString,
-  itemToKey: itemToKey2 = itemToKey,
+  itemToKey: itemToKey3 = itemToKey,
   getIsItemVisible = getDefaultGetIsItemVisible(itemToString2),
   showSelectedItemsInDropdown = false,
   initialSelectedItems = [],
@@ -3602,7 +3643,7 @@ var MultiAutocomplete = ({
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
     ...defaultDownshiftProps.multi,
-    itemToKey: itemToKey2,
+    itemToKey: itemToKey3,
     selectedItems,
     onSelectedItemsChange: ({ selectedItems: selectedItems2, ...changes }) => {
       setSelectedItems(selectedItems2);
@@ -3614,7 +3655,7 @@ var MultiAutocomplete = ({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
-    itemToKey: itemToKey2,
+    itemToKey: itemToKey3,
     stateReducer: reduceReducers(
       defaultDownshiftProps.combobox.stateReducer,
       externalStateReducer
@@ -3827,6 +3868,7 @@ var NestedMenuItem = ({
     childMenuId && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.Icon, { name: "arrow-right-outline" }) })
   ] }) });
 };
+NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -3876,6 +3918,7 @@ var NestedMenuContent = ({
     }
   );
 };
+NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/NestedMenu/NestedMenu.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");