@sproutsocial/seeds-react-menu 0.1.0 → 0.2.0

package/dist/esm/index.js

@@ -95,7 +95,7 @@ var require_object_assign = __commonJS({
 });
 
 // src/MenuItem/MenuItem.tsx
-import { useContext as useContext2 } from "react";
+import { useContext as useContext3 } from "react";
 
 // src/MenuContext.tsx
 import {
@@ -148,15 +148,6 @@ var useMenuContext = () => {
   return menuContextValue;
 };
 
-// src/constants.ts
-var MENU_ITEM_ROLES = {
-  MENUITEM: "menuitem",
-  LISTITEM: "listitem",
-  OPTION: "option",
-  RADIO: "menuitemradio",
-  CHECKBOX: "menuitemcheckbox"
-};
-
 // src/MenuItem/styles.tsx
 import styled, { css as css4 } from "styled-components";
 
@@ -1712,17 +1703,35 @@ var highlightedStyles = css4`
   background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.hover};
 `;
 var MenuItemContainer = styled.li`
+  box-sizing: border-box;
+  list-style-type: none;
+  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
+  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
+
+  &:first-child {
+    margin-top: ${({ theme: theme2 }) => theme2.space[300]};
+  }
+
+  &:last-child {
+    margin-bottom: ${({ theme: theme2 }) => theme2.space[300]};
+  }
+`;
+var StyledMenuItem = styled.div`
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
   border-radius: ${({ theme: theme2 }) => theme2.radii[500]};
   background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.base};
   border: 1px solid ${({ theme: theme2 }) => theme2.colors.listItem.background.base};
   color: ${({ theme: theme2 }) => theme2.colors.text.body};
   font-family: ${({ theme: theme2 }) => theme2.fontFamily};
   font-weight: ${({ theme: theme2 }) => theme2.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
   padding: ${({ theme: theme2 }) => theme2.space[300]};
-  list-style-type: none;
   outline: 0;
   ${({ theme: theme2 }) => theme2.typography[200]};
-  transition: all ${({ theme: theme2 }) => theme2.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}
@@ -1764,76 +1773,33 @@ var MenuItemContainer = styled.li`
   ${layout}
   ${space}
 `;
-
-// src/MenuItem/MenuItem.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var MenuItem = ({
-  id,
-  children,
-  role = "menuitem",
-  label,
-  onClick,
-  onKeyDown,
-  disabled: disabled2 = false,
-  ref,
-  color: color2,
-  ...props
-}) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useContext2(MenuContext);
-  const item = itemsMap[id] || { index: 0, id };
-  const highlighted = highlightedIndex === item?.index;
-  return /* @__PURE__ */ jsx2(
-    MenuItemContainer,
-    {
-      id,
-      tabIndex: role !== MENU_ITEM_ROLES.LISTITEM && !disabled2 ? -1 : void 0,
-      $highlighted: highlighted,
-      ...getItemProps?.({
-        ...isListbox ? {} : { role: "menuitem" },
-        item,
-        index: item.index,
-        // This prop no longer supported in downshift
-        // disabled,
-        onClick,
-        onKeyDown
-      }),
-      ...props,
-      children
-    }
-  );
-};
-
-// src/MenuItemSelectable/MenuItemSelectable.tsx
-import { useContext as useContext3, useMemo as useMemo2 } from "react";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
-import { Switch } from "@sproutsocial/seeds-react-switch";
-import { Radio } from "@sproutsocial/seeds-react-radio";
-import { useTheme } from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-
-// src/MenuItemSelectable/styles.tsx
-import styled2 from "styled-components";
-var MenuItemSelectableRow = styled2.div`
+var MenuItemRow = styled.div`
   display: flex;
   align-items: center;
   pointer-events: none;
 `;
-var MenuItemSelectableAction = styled2.div`
+var MenuItemAction = styled.div`
   margin-right: ${({ theme: theme2 }) => theme2.space[300]};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 `;
-var MenuItemSelectableText = styled2.div`
+var MenuItemText = styled.div`
   word-break: break-word;
   flex-grow: 1;
   min-width: 0;
 `;
 
-// src/MenuItemSelectable/MenuItemSelectable.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+// src/MenuItem/useOptionProps.tsx
+import { useContext as useContext2, useMemo as useMemo2 } from "react";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
+import { Switch } from "@sproutsocial/seeds-react-switch";
+import { Radio } from "@sproutsocial/seeds-react-radio";
+import { useTheme } from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SelectionIndicator = ({
   id,
   inputType = "icon",
@@ -1846,88 +1812,123 @@ var SelectionIndicator = ({
   };
   switch (inputType) {
     case "checkbox":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx2(
         Checkbox,
         {
           onChange: () => {
           },
           checked: selected,
           "aria-labelledby": labeledBy,
-          id: `MenuItemSelectable-${inputType}-${id}`
+          id: `MenuItem-${inputType}-${id}`
         }
       );
     case "switch":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx2(
         Switch,
         {
           onClick: inputStub,
           checked: !!selected,
           "aria-labelledby": labeledBy,
-          id: `MenuItemSelectable-${inputType}-${id}`
+          id: `MenuItem-${inputType}-${id}`
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx2(
         Radio,
         {
           checked: selected,
-          id: `MenuItemSelectable-${inputType}-${id}`,
-          name: `MenuItemSelectable-${inputType}`,
+          id: `MenuItem-${inputType}-${id}`,
+          name: `MenuItem-${inputType}`,
           "aria-labelledby": labeledBy
         }
       );
     case "icon":
       if (selected) {
-        return /* @__PURE__ */ jsx3(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
+        return /* @__PURE__ */ jsx2(Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
       } else {
-        return /* @__PURE__ */ jsx3(Box, { width: space2["400"] });
+        return /* @__PURE__ */ jsx2(Box, { width: space2["400"] });
       }
     default:
       return null;
   }
 };
-var MenuItemSelectable = ({
+var useOptionProps = ({
   id,
   children,
   inputType = "icon",
-  inputLabel,
+  inputLabelId,
   ...props
 }) => {
-  const { selectedItem, selectedItems, isListbox } = useContext3(MenuContext);
+  const { selectedItem, selectedItems, isListbox } = useContext2(MenuContext);
   const selected = useMemo2(
     () => selectedItem?.id === id || !!selectedItems?.find((item) => item?.id === id),
     [selectedItem, selectedItems]
   );
-  if (isListbox === false) {
-    console.warn(
-      "MenuItemSelectable is invalid when isListbox is false (Menu)"
-    );
-  }
-  const label = inputLabel || `menu-item-child-${id}`;
-  return /* @__PURE__ */ jsx3(
-    MenuItem,
+  const label = inputLabelId || `menu-item-child-${id}`;
+  return isListbox ? {
+    active: selected,
+    ["aria-selected"]: selected,
+    children: /* @__PURE__ */ jsxs(MenuItemRow, { children: [
+      /* @__PURE__ */ jsx2(MenuItemAction, { children: /* @__PURE__ */ jsx2(
+        SelectionIndicator,
+        {
+          id,
+          "aria-labelledby": label,
+          inputType,
+          selected: !!selected
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(MenuItemText, { id: label, children })
+    ] }),
+    ...props
+  } : {};
+};
+
+// src/MenuItem/MenuItem.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MenuItem = ({
+  id,
+  children,
+  onClick,
+  onKeyDown,
+  disabled: disabled2 = false,
+  ref,
+  href,
+  color: color2,
+  ...props
+}) => {
+  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useContext3(MenuContext);
+  const { ...optionProps } = useOptionProps({
+    id,
+    children,
+    ...props
+  });
+  const item = itemsMap[id] || { index: 0, id };
+  const highlighted = highlightedIndex === item?.index;
+  return /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
+    StyledMenuItem,
     {
-      active: selected,
       id,
-      "aria-selected": selected,
-      ...props,
-      children: /* @__PURE__ */ jsxs(MenuItemSelectableRow, { children: [
-        /* @__PURE__ */ jsx3(MenuItemSelectableAction, { children: /* @__PURE__ */ jsx3(
-          SelectionIndicator,
-          {
-            id,
-            "aria-labelledby": label,
-            inputType,
-            selected: !!selected
-          }
-        ) }),
-        /* @__PURE__ */ jsx3(MenuItemSelectableText, { id: label, children })
-      ] })
+      $highlighted: highlighted,
+      ...getItemProps?.({
+        ...isListbox ? {} : { role: "menuitem" },
+        item,
+        index: item.index,
+        // This prop no longer supported in downshift
+        // disabled,
+        onClick,
+        onKeyDown
+      }),
+      as: isListbox ? void 0 : href ? "a" : "button",
+      href,
+      children,
+      ...optionProps,
+      ...props
     }
-  );
+  ) });
 };
 
-// src/MenuItemSelectable/MenuItemSelectableTypes.ts
+// src/MenuItem/MenuItemTypes.ts
 var INPUT_TYPES = {
   CHECKBOX: "checkbox",
   RADIO: "radio",
@@ -1939,8 +1940,8 @@ var INPUT_TYPES = {
 import "react";
 
 // src/MenuHeader/styles.tsx
-import styled3 from "styled-components";
-var MenuHeaderContainer = styled3.div`
+import styled2 from "styled-components";
+var MenuHeaderContainer = styled2.div`
   border-color: ${({ theme: theme2 }) => theme2.colors.container.border.base};
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -1948,26 +1949,9 @@ var MenuHeaderContainer = styled3.div`
   width: 100%;
   font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
   display: flex;
+  flex-direction: column;
   padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
 
-  > a {
-    white-space: nowrap;
-  }
-
-  &:first-child {
-    flex-grow: 1;
-    justify-self: start;
-  }
-
-  &:last-child {
-    flex-grow: 1;
-    justify-self: end;
-  }
-
-  ${({ $leftAction, theme: theme2 }) => $leftAction && `
-			padding-left: ${theme2.space[350]};
-	`}
-
   ${border}
   ${color}
   ${flexbox}
@@ -1976,23 +1960,40 @@ var MenuHeaderContainer = styled3.div`
   ${space}
   ${position}
 `;
-var MenuTitleText = styled3.h3`
+var MenuTitleText = styled2.h3`
   color: ${({ theme: theme2 }) => theme2.colors.text.headline};
   font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
   margin: 0px;
   flex-grow: 2;
   justify-self: start;
 
+  ${({ theme: theme2 }) => theme2.typography[200]}
+
   ${({ $leftAction, theme: theme2 }) => $leftAction && `
 			padding-left: ${theme2.space[350]};
 	`}
-
-  ${({ theme: theme2 }) => theme2.typography[200]}
 `;
-var MenuChildrenContainer = styled3.div`
+var MenuChildrenContainer = styled2.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme: theme2 }) => theme2.space[300]};
 `;
+var MenuHeaderFeatures = styled2.div`
+  display: flex;
+
+  > a {
+    white-space: nowrap;
+  }
+
+  &:first-child {
+    flex-grow: 1;
+    justify-self: start;
+  }
+
+  &:last-child {
+    flex-grow: 1;
+    justify-self: end;
+  }
+`;
 
 // src/MenuHeader/MenuHeader.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -2004,21 +2005,21 @@ var MenuHeader = ({
   ...rest
 }) => {
   return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsxs2(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
-    leftAction && leftAction,
-    title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
-    rightAction && rightAction,
+    /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
+      leftAction && leftAction,
+      title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
+      rightAction && rightAction
+    ] }),
     children && /* @__PURE__ */ jsx4(MenuChildrenContainer, { children })
   ] }) });
 };
 
 // src/MenuContent/styles.tsx
-import styled4 from "styled-components";
-var StyledMenuContent = styled4.ul`
+import styled3 from "styled-components";
+import { motion } from "motion/react";
+var StyledMenuContent = styled3(motion.ul)`
   margin: 0;
-  padding: ${({ theme: theme2 }) => theme2.space[300]} 0;
-  &:focus {
-    ${focusRing}
-  }
+  padding: 0;
 `;
 
 // src/MenuContent/MenuContent.tsx
@@ -2028,7 +2029,7 @@ var MenuContent = ({
   children,
   ...rest
 }) => {
-  const { getToggleButtonProps } = useMenuContext();
+  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
   return /* @__PURE__ */ jsx5(
     StyledMenuContent,
     {
@@ -2037,6 +2038,13 @@ var MenuContent = ({
       tabIndex: 0,
       onKeyDown: getToggleButtonProps?.().onKeyDown,
       "aria-activedescendant": getToggleButtonProps?.()["aria-activedescendant"],
+      ...getMenuProps?.(
+        {
+          ...isListbox ? {} : { role: "menu" }
+        },
+        // Suppress ref error for now
+        { suppressRefError: true }
+      ),
       ...rest,
       children
     }
@@ -2047,10 +2055,10 @@ var MenuContent = ({
 import "react";
 
 // src/MenuFooter/styles.tsx
-import styled5 from "styled-components";
+import styled4 from "styled-components";
 import { Box as Box2 } from "@sproutsocial/seeds-react-box";
-var StyledMenuFooterBox = styled5(Box2)`
-  padding: ${(p) => p.theme.space[350]};
+var StyledMenuFooterBox = styled4(Box2)`
+  padding: ${(p) => p.theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
@@ -2064,12 +2072,12 @@ var MenuFooter = ({ children, ...rest }) => {
 import "react";
 
 // src/MenuGroup/styles.tsx
-import styled7 from "styled-components";
+import styled6 from "styled-components";
 
 // ../seeds-react-text/dist/esm/index.js
 import "react";
 import styled22 from "styled-components";
-import styled6, { css as css5 } from "styled-components";
+import styled5, { css as css5 } from "styled-components";
 import {
   COMMON,
   LAYOUT,
@@ -2079,7 +2087,7 @@ import {
 } from "@sproutsocial/seeds-react-system-props";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import "react";
-var Container = styled6.span`
+var Container = styled5.span`
   margin: 0;
   padding-left: 0;
   padding-right: 0;
@@ -2170,13 +2178,14 @@ var Text_default = Text;
 var src_default = Text_default;
 
 // src/MenuGroup/styles.tsx
-var StyledMenuGroup = styled7.li`
+var StyledMenuGroup = styled6.li`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme: theme2 }) => theme2.colors.container.border.base};
   }
   list-style: none;
   margin: 0;
+
   ${border}
   ${position}
   ${color}
@@ -2185,13 +2194,13 @@ var StyledMenuGroup = styled7.li`
   ${layout}
   ${space}
 `;
-var StyledTitle = styled7(src_default.SmallSubHeadline)`
-  margin: ${({ theme: theme2 }) => theme2.space[200]} 0px
-    ${({ theme: theme2 }) => theme2.space[300]} ${({ theme: theme2 }) => theme2.space[300]};
+var StyledTitle = styled6(src_default.SmallSubHeadline)`
+  margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
+    0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
-var StyledMenuGroupUl = styled7.ul`
+var StyledMenuGroupUl = styled6.ul`
   margin: 0;
-  padding: ${({ theme: theme2 }) => theme2.space[300]};
+  padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
@@ -2212,7 +2221,7 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ jsx8(StyledTitle, { as: titleAs, id: titleId, children: title }),
+        title && /* @__PURE__ */ jsx8(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
         /* @__PURE__ */ jsx8(StyledMenuGroupUl, { children })
       ]
     }
@@ -2221,22 +2230,22 @@ var MenuGroup = ({
 
 // src/MenuRoot/MenuRoot.tsx
 import { useCallback } from "react";
-import styled8 from "styled-components";
+import styled7 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var CustomPopoutContent = styled8(Popout.Content)`
+var CustomPopoutContent = styled7(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
 `;
 var MenuRoot = ({
   children,
-  triggerElement,
+  menuToggleElement,
   popoutProps,
   width: width2 = "300px",
   ...contextProps
 }) => {
-  const { isListbox, isOpen, openMenu, closeMenu, getMenuProps } = contextProps;
+  const { isOpen, openMenu, closeMenu } = contextProps;
   const setIsOpen = useCallback(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
@@ -2248,19 +2257,7 @@ var MenuRoot = ({
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: /* @__PURE__ */ jsx9(CustomPopoutContent, { width: width2, children: /* @__PURE__ */ jsx9(
-        "div",
-        {
-          ...getMenuProps?.(
-            {
-              ...isListbox ? {} : { role: "menu" }
-            },
-            // Suppress ref error for now
-            { suppressRefError: true }
-          ),
-          children
-        }
-      ) }),
+      content: /* @__PURE__ */ jsx9(CustomPopoutContent, { width: width2, children }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2268,7 +2265,7 @@ var MenuRoot = ({
       },
       disableWrapperAria: true,
       ...popoutProps,
-      children: triggerElement
+      children: menuToggleElement
     }
   ) });
 };
@@ -2307,7 +2304,7 @@ var MenuToggleButton = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import "react";
+import React11, { useEffect } from "react";
 import {
   useSelect as useSelect2
 } from "downshift";
@@ -2336,7 +2333,7 @@ var checkIfIsElement = (element, name) => {
 var getAllMenuItems = (children) => {
   const allMenuItems = [];
   walkAllChildren(children, (element, parents) => {
-    if (checkIfIsElement(element, "MenuItem") || checkIfIsElement(element, "MenuItemSelectable")) {
+    if (checkIfIsElement(element, "MenuItem")) {
       allMenuItems.push({
         element,
         parents
@@ -2396,37 +2393,50 @@ var itemToString = (item) => {
 
 // src/ActionMenu/ActionMenu.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
+var handleStateChange = (changes, currentSelectedItem) => {
+  if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
+    return;
+  }
+  const selectedItem = changes.selectedItem || currentSelectedItem;
+  if (!selectedItem)
+    return;
+  if (selectedItem.element?.props?.disabled) {
+    return;
+  }
+  const isEnterKeyDown = changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
+  const selectedItemProps = selectedItem.element?.props;
+  if (selectedItemProps?.onClick) {
+    const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
+      key: isEnterKeyDown ? "Enter" : " ",
+      code: isEnterKeyDown ? "Enter" : "Space",
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    selectedItemProps?.onClick?.(
+      syntheticKeyboardEvent
+    );
+  }
+  if (selectedItemProps?.href) {
+    if (selectedItemProps.target) {
+      window.open(selectedItemProps.href, selectedItemProps.target);
+    } else {
+      window.location.href = selectedItemProps?.href;
+    }
+  }
+};
 var ActionMenu = ({
   children,
   stateReducer: externalStateReducer,
   ...useSelectProps
 }) => {
   const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const handleStateChange = (changes) => {
-    const { selectedItem } = changes;
-    if (selectedItem.element?.props?.disabled) {
-      return;
-    }
-    if (changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton) {
-      const isEnterKeyDown = changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
-      const selectedItemProps = selectedItem.element?.props;
-      const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
-        key: isEnterKeyDown ? "Enter" : " ",
-        code: isEnterKeyDown ? "Enter" : "Space",
-        bubbles: true,
-        cancelable: true,
-        view: window
-      });
-      selectedItemProps?.onClick?.(
-        syntheticKeyboardEvent
-      );
-    }
-  };
+  const [currentSelectedItem, setCurrentSelectedItem] = React11.useState(null);
   const { isOpen, ...useSelectReturnProps } = useSelect2({
     ...defaultUseSelectProps,
     items: allMenuItems,
     itemToString,
-    onSelectedItemChange: handleStateChange,
+    onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
     stateReducer: (state, actionAndChanges) => {
       let newState;
       newState = useSelectStateReducer(state, actionAndChanges);
@@ -2437,6 +2447,9 @@ var ActionMenu = ({
     },
     ...useSelectProps
   });
+  useEffect(() => {
+    setCurrentSelectedItem(useSelectReturnProps.selectedItem);
+  }, [useSelectReturnProps.selectedItem]);
   return /* @__PURE__ */ jsx12(
     MenuRoot,
     {
@@ -2569,7 +2582,6 @@ var MultiSelectMenu = ({
         case useSelect4.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect4.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect4.stateChangeTypes.ItemClick:
-        case useSelect4.stateChangeTypes.ToggleButtonBlur:
           if (!newSelectedItem)
             break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
@@ -2618,20 +2630,19 @@ export {
   MenuGroup,
   MenuHeader,
   MenuItem,
+  MenuItemAction,
   MenuItemContainer,
-  MenuItemSelectable,
-  MenuItemSelectableAction,
-  MenuItemSelectableRow,
-  MenuItemSelectableText,
+  MenuItemRow,
+  MenuItemText,
   MenuLabel,
   MenuProvider,
   MenuRoot,
   MenuToggleButton,
   MultiSelectMenu,
-  SelectionIndicator,
   SingleSelectMenu,
   StyledMenuGroup,
   StyledMenuGroupUl,
+  StyledMenuItem,
   StyledTitle,
   defaultUseSelectProps,
   useItemsFromChildren,