@sproutsocial/seeds-react-menu 0.1.0 → 0.2.0

package/dist/index.js

@@ -111,20 +111,19 @@ __export(src_exports, {
   MenuGroup: () => MenuGroup,
   MenuHeader: () => MenuHeader,
   MenuItem: () => MenuItem,
+  MenuItemAction: () => MenuItemAction,
   MenuItemContainer: () => MenuItemContainer,
-  MenuItemSelectable: () => MenuItemSelectable,
-  MenuItemSelectableAction: () => MenuItemSelectableAction,
-  MenuItemSelectableRow: () => MenuItemSelectableRow,
-  MenuItemSelectableText: () => MenuItemSelectableText,
+  MenuItemRow: () => MenuItemRow,
+  MenuItemText: () => MenuItemText,
   MenuLabel: () => MenuLabel,
   MenuProvider: () => MenuProvider,
   MenuRoot: () => MenuRoot,
   MenuToggleButton: () => MenuToggleButton,
   MultiSelectMenu: () => MultiSelectMenu,
-  SelectionIndicator: () => SelectionIndicator,
   SingleSelectMenu: () => SingleSelectMenu,
   StyledMenuGroup: () => StyledMenuGroup,
   StyledMenuGroupUl: () => StyledMenuGroupUl,
+  StyledMenuItem: () => StyledMenuItem,
   StyledTitle: () => StyledTitle,
   defaultUseSelectProps: () => defaultUseSelectProps,
   useItemsFromChildren: () => useItemsFromChildren,
@@ -135,7 +134,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/MenuItem/MenuItem.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/MenuContext.tsx
 var import_react = require("react");
@@ -184,15 +183,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
 var import_styled_components2 = __toESM(require("styled-components"));
 
@@ -1741,17 +1731,35 @@ var highlightedStyles = import_styled_components2.css`
   background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.hover};
 `;
 var MenuItemContainer = import_styled_components2.default.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 = import_styled_components2.default.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}
@@ -1793,170 +1801,162 @@ var MenuItemContainer = import_styled_components2.default.li`
   ${layout}
   ${space}
 `;
-
-// src/MenuItem/MenuItem.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MenuItem = ({
-  id,
-  children,
-  role = "menuitem",
-  label,
-  onClick,
-  onKeyDown,
-  disabled: disabled2 = false,
-  ref,
-  color: color2,
-  ...props
-}) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } = (0, import_react2.useContext)(MenuContext);
-  const item = itemsMap[id] || { index: 0, id };
-  const highlighted = highlightedIndex === item?.index;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    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
-var import_react3 = require("react");
-var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
-var import_seeds_react_checkbox2 = require("@sproutsocial/seeds-react-checkbox");
-var import_seeds_react_switch = require("@sproutsocial/seeds-react-switch");
-var import_seeds_react_radio = require("@sproutsocial/seeds-react-radio");
-var import_styled_components4 = require("styled-components");
-var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
-
-// src/MenuItemSelectable/styles.tsx
-var import_styled_components3 = __toESM(require("styled-components"));
-var MenuItemSelectableRow = import_styled_components3.default.div`
+var MenuItemRow = import_styled_components2.default.div`
   display: flex;
   align-items: center;
   pointer-events: none;
 `;
-var MenuItemSelectableAction = import_styled_components3.default.div`
+var MenuItemAction = import_styled_components2.default.div`
   margin-right: ${({ theme: theme2 }) => theme2.space[300]};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 `;
-var MenuItemSelectableText = import_styled_components3.default.div`
+var MenuItemText = import_styled_components2.default.div`
   word-break: break-word;
   flex-grow: 1;
   min-width: 0;
 `;
 
-// src/MenuItemSelectable/MenuItemSelectable.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+// src/MenuItem/useOptionProps.tsx
+var import_react2 = require("react");
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_checkbox2 = require("@sproutsocial/seeds-react-checkbox");
+var import_seeds_react_switch = require("@sproutsocial/seeds-react-switch");
+var import_seeds_react_radio = require("@sproutsocial/seeds-react-radio");
+var import_styled_components3 = require("styled-components");
+var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var SelectionIndicator = ({
   id,
   inputType = "icon",
   "aria-labelledby": labeledBy,
   selected
 }) => {
-  const { space: space2 } = (0, import_styled_components4.useTheme)();
+  const { space: space2 } = (0, import_styled_components3.useTheme)();
   const inputStub = (e) => {
     e.stopPropagation();
   };
   switch (inputType) {
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_seeds_react_checkbox2.Checkbox,
         {
           onChange: () => {
           },
           checked: selected,
           "aria-labelledby": labeledBy,
-          id: `MenuItemSelectable-${inputType}-${id}`
+          id: `MenuItem-${inputType}-${id}`
         }
       );
     case "switch":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_seeds_react_switch.Switch,
         {
           onClick: inputStub,
           checked: !!selected,
           "aria-labelledby": labeledBy,
-          id: `MenuItemSelectable-${inputType}-${id}`
+          id: `MenuItem-${inputType}-${id}`
         }
       );
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_seeds_react_radio.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__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon.Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon.Icon, { name: "check-solid", "aria-hidden": true, size: "small" });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box.Box, { width: space2["400"] });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box.Box, { width: space2["400"] });
       }
     default:
       return null;
   }
 };
-var MenuItemSelectable = ({
+var useOptionProps = ({
   id,
   children,
   inputType = "icon",
-  inputLabel,
+  inputLabelId,
   ...props
 }) => {
-  const { selectedItem, selectedItems, isListbox } = (0, import_react3.useContext)(MenuContext);
-  const selected = (0, import_react3.useMemo)(
+  const { selectedItem, selectedItems, isListbox } = (0, import_react2.useContext)(MenuContext);
+  const selected = (0, import_react2.useMemo)(
     () => 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__ */ (0, import_jsx_runtime3.jsx)(
-    MenuItem,
+  const label = inputLabelId || `menu-item-child-${id}`;
+  return isListbox ? {
+    active: selected,
+    ["aria-selected"]: selected,
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(MenuItemRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuItemAction, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        SelectionIndicator,
+        {
+          id,
+          "aria-labelledby": label,
+          inputType,
+          selected: !!selected
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuItemText, { id: label, children })
+    ] }),
+    ...props
+  } : {};
+};
+
+// src/MenuItem/MenuItem.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MenuItem = ({
+  id,
+  children,
+  onClick,
+  onKeyDown,
+  disabled: disabled2 = false,
+  ref,
+  href,
+  color: color2,
+  ...props
+}) => {
+  const { getItemProps, itemsMap, highlightedIndex, isListbox } = (0, import_react3.useContext)(MenuContext);
+  const { ...optionProps } = useOptionProps({
+    id,
+    children,
+    ...props
+  });
+  const item = itemsMap[id] || { index: 0, id };
+  const highlighted = highlightedIndex === item?.index;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    StyledMenuItem,
     {
-      active: selected,
       id,
-      "aria-selected": selected,
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuItemSelectableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemSelectableAction, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          SelectionIndicator,
-          {
-            id,
-            "aria-labelledby": label,
-            inputType,
-            selected: !!selected
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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",
@@ -1968,8 +1968,8 @@ var INPUT_TYPES = {
 var import_react4 = require("react");
 
 // src/MenuHeader/styles.tsx
-var import_styled_components5 = __toESM(require("styled-components"));
-var MenuHeaderContainer = import_styled_components5.default.div`
+var import_styled_components4 = __toESM(require("styled-components"));
+var MenuHeaderContainer = import_styled_components4.default.div`
   border-color: ${({ theme: theme2 }) => theme2.colors.container.border.base};
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -1977,26 +1977,9 @@ var MenuHeaderContainer = import_styled_components5.default.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}
@@ -2005,23 +1988,40 @@ var MenuHeaderContainer = import_styled_components5.default.div`
   ${space}
   ${position}
 `;
-var MenuTitleText = import_styled_components5.default.h3`
+var MenuTitleText = import_styled_components4.default.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 = import_styled_components5.default.div`
+var MenuChildrenContainer = import_styled_components4.default.div`
   grid-column: 1 / -1;
   margin-top: ${({ theme: theme2 }) => theme2.space[300]};
 `;
+var MenuHeaderFeatures = import_styled_components4.default.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
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -2033,21 +2033,21 @@ var MenuHeader = ({
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuHeaderContainer, { $leftAction: !!leftAction, ...rest, children: [
-    leftAction && leftAction,
-    title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuTitleText, { $leftAction: !!leftAction, children: title }),
-    rightAction && rightAction,
+    /* @__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 && rightAction
+    ] }),
     children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuChildrenContainer, { children })
   ] }) });
 };
 
 // src/MenuContent/styles.tsx
-var import_styled_components6 = __toESM(require("styled-components"));
-var StyledMenuContent = import_styled_components6.default.ul`
+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)`
   margin: 0;
-  padding: ${({ theme: theme2 }) => theme2.space[300]} 0;
-  &:focus {
-    ${focusRing}
-  }
+  padding: 0;
 `;
 
 // src/MenuContent/MenuContent.tsx
@@ -2057,7 +2057,7 @@ var MenuContent = ({
   children,
   ...rest
 }) => {
-  const { getToggleButtonProps } = useMenuContext();
+  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     StyledMenuContent,
     {
@@ -2066,6 +2066,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
     }
@@ -2073,13 +2080,13 @@ var MenuContent = ({
 };
 
 // src/MenuFooter/MenuFooter.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/MenuFooter/styles.tsx
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
-var StyledMenuFooterBox = (0, import_styled_components7.default)(import_seeds_react_box2.Box)`
-  padding: ${(p) => p.theme.space[350]};
+var StyledMenuFooterBox = (0, import_styled_components6.default)(import_seeds_react_box2.Box)`
+  padding: ${(p) => p.theme.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
@@ -2090,19 +2097,19 @@ var MenuFooter = ({ children, ...rest }) => {
 };
 
 // src/MenuGroup/MenuGroup.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/MenuGroup/styles.tsx
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 
 // ../seeds-react-text/dist/esm/index.js
-var import_react6 = require("react");
+var import_react7 = require("react");
+var import_styled_components7 = __toESM(require("styled-components"));
 var import_styled_components8 = __toESM(require("styled-components"));
-var import_styled_components9 = __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_react7 = require("react");
-var Container = import_styled_components9.default.span`
+var import_react8 = require("react");
+var Container = import_styled_components8.default.span`
   margin: 0;
   padding-left: 0;
   padding-right: 0;
@@ -2111,14 +2118,14 @@ var Container = import_styled_components9.default.span`
   return props.isItalicized && "italic";
 }};
 
-  ${(props) => props.truncated && import_styled_components9.css`
+  ${(props) => props.truncated && import_styled_components8.css`
       display: block;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     `}
 
-  ${(props) => props.breakWord && import_styled_components9.css`
+  ${(props) => props.breakWord && import_styled_components8.css`
       word-break: break-word;
       hyphens: auto;
     `}
@@ -2130,34 +2137,34 @@ var Container = import_styled_components9.default.span`
   ${import_seeds_react_system_props.TYPOGRAPHY}
 `;
 var styles_default = Container;
-var Headline = (0, import_styled_components8.default)(styles_default)`
+var Headline = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[400]}
 `;
-var SubHeadline = (0, import_styled_components8.default)(styles_default)`
+var SubHeadline = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[300]}
 `;
-var SmallSubHeadline = (0, import_styled_components8.default)(styles_default)`
+var SmallSubHeadline = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[200]}
 `;
-var Byline = (0, import_styled_components8.default)(styles_default)`
+var Byline = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.subtext};
   ${(props) => props.theme.typography[200]}
 `;
-var SmallByline = (0, import_styled_components8.default)(styles_default)`
+var SmallByline = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.subtext};
   ${(props) => props.theme.typography[100]}
 `;
-var BodyCopy = (0, import_styled_components8.default)(styles_default)`
+var BodyCopy = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.body};
   ${(props) => props.theme.typography[300]}
 `;
-var SmallBodyCopy = (0, import_styled_components8.default)(styles_default)`
+var SmallBodyCopy = (0, import_styled_components7.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.body};
   ${(props) => props.theme.typography[200]}
 `;
@@ -2193,13 +2200,14 @@ var Text_default = Text;
 var src_default = Text_default;
 
 // src/MenuGroup/styles.tsx
-var StyledMenuGroup = import_styled_components10.default.li`
+var StyledMenuGroup = import_styled_components9.default.li`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme: theme2 }) => theme2.colors.container.border.base};
   }
   list-style: none;
   margin: 0;
+
   ${border}
   ${position}
   ${color}
@@ -2208,13 +2216,13 @@ var StyledMenuGroup = import_styled_components10.default.li`
   ${layout}
   ${space}
 `;
-var StyledTitle = (0, import_styled_components10.default)(src_default.SmallSubHeadline)`
-  margin: ${({ theme: theme2 }) => theme2.space[200]} 0px
-    ${({ theme: theme2 }) => theme2.space[300]} ${({ theme: theme2 }) => theme2.space[300]};
+var StyledTitle = (0, import_styled_components9.default)(src_default.SmallSubHeadline)`
+  margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
+    0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
-var StyledMenuGroupUl = import_styled_components10.default.ul`
+var StyledMenuGroupUl = import_styled_components9.default.ul`
   margin: 0;
-  padding: ${({ theme: theme2 }) => theme2.space[300]};
+  padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
@@ -2235,7 +2243,7 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledTitle, { as: titleAs, id: titleId, children: title }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledMenuGroupUl, { children })
       ]
     }
@@ -2243,24 +2251,24 @@ var MenuGroup = ({
 };
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react9 = require("react");
-var import_styled_components11 = __toESM(require("styled-components"));
+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 CustomPopoutContent = (0, import_styled_components11.default)(import_seeds_react_popout.Popout.Content)`
+var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_react_popout.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 setIsOpen = (0, import_react9.useCallback)(
+  const { isOpen, openMenu, closeMenu } = contextProps;
+  const setIsOpen = (0, import_react10.useCallback)(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
@@ -2271,19 +2279,7 @@ var MenuRoot = ({
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomPopoutContent, { width: width2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "div",
-        {
-          ...getMenuProps?.(
-            {
-              ...isListbox ? {} : { role: "menu" }
-            },
-            // Suppress ref error for now
-            { suppressRefError: true }
-          ),
-          children
-        }
-      ) }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomPopoutContent, { width: width2, children }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2291,13 +2287,13 @@ var MenuRoot = ({
       },
       disableWrapperAria: true,
       ...popoutProps,
-      children: triggerElement
+      children: menuToggleElement
     }
   ) });
 };
 
 // src/MenuLabel.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var MenuLabel = ({ children, ...rest }) => {
   const { getLabelProps } = useMenuContext();
@@ -2305,14 +2301,14 @@ var MenuLabel = ({ children, ...rest }) => {
 };
 
 // src/MenuToggleButton.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var MenuToggleButton = ({
   children,
   ...rest
 }) => {
-  const { getToggleButtonProps, isListbox, getDropdownProps } = (0, import_react11.useContext)(MenuContext);
+  const { getToggleButtonProps, isListbox, getDropdownProps } = (0, import_react12.useContext)(MenuContext);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_seeds_react_button.Button,
     {
@@ -2330,11 +2326,11 @@ var MenuToggleButton = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_react13 = require("react");
+var import_react14 = __toESM(require("react"));
 var import_downshift2 = require("downshift");
 
 // src/hooks/useItemsFromChildren.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var walkAllChildren = (children, callback) => {
   const walk = (element, parents2) => {
     if (element === null || element === void 0)
@@ -2342,12 +2338,12 @@ var walkAllChildren = (children, callback) => {
     callback(element, parents2);
     const newParents = [...parents2, element];
     const children2 = element.props?.children;
-    import_react12.default.Children.toArray(children2).forEach((child) => {
+    import_react13.default.Children.toArray(children2).forEach((child) => {
       walk(child, newParents);
     });
   };
   const parents = [];
-  import_react12.default.Children.toArray(children).forEach((child) => {
+  import_react13.default.Children.toArray(children).forEach((child) => {
     walk(child, parents);
   });
 };
@@ -2357,7 +2353,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
@@ -2369,7 +2365,7 @@ var getAllMenuItems = (children) => {
 var useItemsFromChildren = ({
   children
 }) => {
-  const { allMenuItems, menuItemsMap } = (0, import_react12.useMemo)(() => {
+  const { allMenuItems, menuItemsMap } = (0, import_react13.useMemo)(() => {
     const allMenuItemElements = getAllMenuItems(children);
     const menuItemsMap2 = {};
     const allMenuItems2 = allMenuItemElements.map(
@@ -2417,37 +2413,50 @@ var itemToString = (item) => {
 
 // src/ActionMenu/ActionMenu.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var handleStateChange = (changes, currentSelectedItem) => {
+  if (!(changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
+    return;
+  }
+  const selectedItem = changes.selectedItem || currentSelectedItem;
+  if (!selectedItem)
+    return;
+  if (selectedItem.element?.props?.disabled) {
+    return;
+  }
+  const isEnterKeyDown = changes.type === import_downshift2.useSelect.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 === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton) {
-      const isEnterKeyDown = changes.type === import_downshift2.useSelect.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] = import_react14.default.useState(null);
   const { isOpen, ...useSelectReturnProps } = (0, import_downshift2.useSelect)({
     ...defaultUseSelectProps,
     items: allMenuItems,
     itemToString,
-    onSelectedItemChange: handleStateChange,
+    onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
     stateReducer: (state, actionAndChanges) => {
       let newState;
       newState = useSelectStateReducer(state, actionAndChanges);
@@ -2458,6 +2467,9 @@ var ActionMenu = ({
     },
     ...useSelectProps
   });
+  (0, import_react14.useEffect)(() => {
+    setCurrentSelectedItem(useSelectReturnProps.selectedItem);
+  }, [useSelectReturnProps.selectedItem]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     MenuRoot,
     {
@@ -2476,7 +2488,7 @@ var ActionMenu = ({
 };
 
 // src/SingleSelectMenu/SingleSelectMenu.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_downshift3 = require("downshift");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var SingleSelectMenu = ({
@@ -2517,7 +2529,7 @@ var SingleSelectMenu = ({
 };
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_downshift4 = require("downshift");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var selectReducerForMultiSelect = (state, actionAndChanges) => {
@@ -2587,7 +2599,6 @@ var MultiSelectMenu = ({
         case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case import_downshift4.useSelect.stateChangeTypes.ItemClick:
-        case import_downshift4.useSelect.stateChangeTypes.ToggleButtonBlur:
           if (!newSelectedItem)
             break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
@@ -2637,20 +2648,19 @@ var MultiSelectMenu = ({
   MenuGroup,
   MenuHeader,
   MenuItem,
+  MenuItemAction,
   MenuItemContainer,
-  MenuItemSelectable,
-  MenuItemSelectableAction,
-  MenuItemSelectableRow,
-  MenuItemSelectableText,
+  MenuItemRow,
+  MenuItemText,
   MenuLabel,
   MenuProvider,
   MenuRoot,
   MenuToggleButton,
   MultiSelectMenu,
-  SelectionIndicator,
   SingleSelectMenu,
   StyledMenuGroup,
   StyledMenuGroupUl,
+  StyledMenuItem,
   StyledTitle,
   defaultUseSelectProps,
   useItemsFromChildren,