@sproutsocial/seeds-react-menu 1.12.3 → 1.13.0

package/.turbo/turbo-build.log

@@ -10,26 +10,26 @@ $ tsup --dts
 ESM Build start
 CJS dist/index.js        92.65 KB
 CJS dist/v2/index.js     73.18 KB
-CJS dist/v3/index.js     104.35 KB
-CJS dist/index.js.map    180.28 KB
+CJS dist/v3/index.js     115.61 KB
 CJS dist/v2/index.js.map 152.19 KB
-CJS dist/v3/index.js.map 181.62 KB
-CJS ⚡️ Build success in 64ms
+CJS dist/index.js.map    180.28 KB
+CJS dist/v3/index.js.map 201.45 KB
+CJS ⚡️ Build success in 79ms
 ESM dist/esm/index.js              73.60 KB
-ESM dist/esm/v3/index.js           92.96 KB
 ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
+ESM dist/esm/v3/index.js           102.60 KB
 ESM dist/esm/v2/index.js           62.63 KB
 ESM dist/esm/index.js.map          156.29 KB
-ESM dist/esm/v3/index.js.map       181.70 KB
 ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
 ESM dist/esm/v2/index.js.map       132.57 KB
-ESM ⚡️ Build success in 65ms
+ESM dist/esm/v3/index.js.map       201.49 KB
+ESM ⚡️ Build success in 80ms
 DTS Build start
-DTS ⚡️ Build success in 6525ms
-DTS dist/index.d.ts     39.11 KB
+DTS ⚡️ Build success in 7281ms
+DTS dist/index.d.ts     39.12 KB
 DTS dist/v2/index.d.ts  5.55 KB
-DTS dist/v3/index.d.ts  18.39 KB
-DTS dist/index.d.mts    39.11 KB
+DTS dist/v3/index.d.ts  22.42 KB
+DTS dist/index.d.mts    39.12 KB
 DTS dist/v2/index.d.mts 5.55 KB
-DTS dist/v3/index.d.mts 18.39 KB
-Done in 7.26s.
+DTS dist/v3/index.d.mts 22.42 KB
+Done in 8.09s.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.13.0
+
+### Minor Changes
+
+- 677f2f8: Add base-ui ActionMenu
+
+### Patch Changes
+
+- efc9156: Allow inline combobox components
+
 ## 1.12.3
 
 ### Patch Changes

package/dist/esm/v3/index.js

@@ -137,10 +137,10 @@ import { Select as Select2 } from "@base-ui/react/select";
 import styled2 from "styled-components";
 import { focusRing } from "@sproutsocial/seeds-react-mixins";
 var Field = styled2.div`
-  display: flex;
+  display: ${({ $fullWidth }) => $fullWidth === false ? "inline-flex" : "flex"};
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
-  width: 100%;
+  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
 `;
 var SelectLabel = styled2(Select2.Label)`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
@@ -290,7 +290,7 @@ var StyledValue = styled4(Select3.Value)`
   }
 `;
 function SingleSelect(props) {
-  const { id, placeholder, includePlaceholderItem } = props;
+  const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
@@ -338,7 +338,7 @@ function SingleSelect(props) {
       }
     }
   }
-  return /* @__PURE__ */ jsxs2(Field, { children: [
+  return /* @__PURE__ */ jsxs2(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ jsx3("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs2(
       Select3.Root,
@@ -420,7 +420,7 @@ var Placeholder = styled5.div`
   margin: 2px 8px 0px 0px;
 `;
 function MultiSelect(props) {
-  const { id, placeholder = "Select..." } = props;
+  const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -466,7 +466,7 @@ function MultiSelect(props) {
       onSelectedItemIdsChange(ids);
     }
   }
-  return /* @__PURE__ */ jsxs3(Field, { children: [
+  return /* @__PURE__ */ jsxs3(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs3(
       Select4.Root,
@@ -1275,7 +1275,8 @@ function SingleCombobox(props) {
     id,
     placeholder = "Search...",
     emptyText = "No results found.",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -1317,7 +1318,7 @@ function SingleCombobox(props) {
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ jsxs6(Field, { children: [
+  return /* @__PURE__ */ jsxs6(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ jsx8("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs6(
       Combobox3.Root,
@@ -1455,7 +1456,8 @@ function MultiCombobox(props) {
     loadingText = "Loading...",
     filter,
     inputValue,
-    onInputValueChange
+    onInputValueChange,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -1670,7 +1672,7 @@ function MultiCombobox(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ jsxs7(Field, { children: [
+  return /* @__PURE__ */ jsxs7(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs7(
       Combobox4.Root,
@@ -1883,7 +1885,8 @@ function SingleSearchableSelect(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -1925,7 +1928,7 @@ function SingleSearchableSelect(props) {
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ jsxs8(Field, { children: [
+  return /* @__PURE__ */ jsxs8(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ jsx10("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs8(
       Combobox5.Root,
@@ -2084,7 +2087,8 @@ function MultiSearchableSelect(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -2285,7 +2289,7 @@ function MultiSearchableSelect(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ jsxs9(Field, { children: [
+  return /* @__PURE__ */ jsxs9(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ jsx11("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ jsxs9(
       Combobox6.Root,
@@ -2464,7 +2468,352 @@ function MultiSearchableSelect(props) {
     )
   ] });
 }
+
+// src/v3/ActionMenu.tsx
+import * as React12 from "react";
+import { Menu as Menu2 } from "@base-ui/react/menu";
+import Radio3 from "@sproutsocial/seeds-react-radio";
+import Checkbox4 from "@sproutsocial/seeds-react-checkbox";
+import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
+
+// src/v3/ActionMenuStyles.tsx
+import { Menu } from "@base-ui/react/menu";
+import styled8, { css } from "styled-components";
+import "@sproutsocial/seeds-react-mixins";
+var ActionMenuTrigger = styled8(Menu.Trigger)``;
+var ActionMenuPositioner = styled8(Menu.Positioner)`
+  min-width: var(--anchor-width);
+  z-index: 7;
+`;
+var ActionMenuPopup = styled8(Menu.Popup)`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.low};
+  outline: none;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+
+  &[data-open] {
+    animation: action-menu-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: action-menu-popup-out 100ms ease-in;
+  }
+
+  @keyframes action-menu-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes action-menu-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+var ActionMenuGroup = styled8(Menu.Group)`
+  display: block;
+`;
+var ActionMenuGroupLabel = styled8(Menu.GroupLabel)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+var ActionMenuSeparator = styled8(Menu.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+var menuItemStyles = css`
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
+  padding: ${({ theme }) => theme.space[300]};
+  outline: 0;
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration.fast};
+  cursor: pointer;
+  user-select: none;
+
+  &[data-highlighted] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+    color: ${({ theme }) => theme.colors.text.body};
+    text-decoration: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+`;
+var StyledMenuItem = styled8(Menu.Item)`
+  ${menuItemStyles}
+`;
+var StyledCheckboxItem = styled8(Menu.CheckboxItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var StyledRadioItem = styled8(Menu.RadioItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var StyledCheckboxItemIndicator = styled8(Menu.CheckboxItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var StyledRadioItemIndicator = styled8(Menu.RadioItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var StyledSubmenuTrigger = styled8(Menu.SubmenuTrigger)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  justify-content: space-between;
+
+  &[data-popup-open] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+var StyledLinkItem = styled8(Menu.LinkItem)`
+  ${menuItemStyles}
+`;
+
+// src/v3/ActionMenu.tsx
+import { Fragment as Fragment11, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function ActionMenu({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled
+}) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  return /* @__PURE__ */ jsxs10(
+    Menu2.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx12("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ jsx12(ActionMenuTrigger, { render: trigger, disabled }),
+        /* @__PURE__ */ jsx12(Menu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ jsx12(ActionMenuPopup, { children }) }) })
+      ]
+    }
+  );
+}
+function MenuGroup({
+  children,
+  label,
+  showSeparator = false
+}) {
+  return /* @__PURE__ */ jsxs10(Fragment11, { children: [
+    /* @__PURE__ */ jsxs10(ActionMenuGroup, { children: [
+      label && /* @__PURE__ */ jsx12(ActionMenuGroupLabel, { children: label }),
+      children
+    ] }),
+    showSeparator && /* @__PURE__ */ jsx12(ActionMenuSeparator, {})
+  ] });
+}
+function MenuRadioGroup({
+  children,
+  value,
+  defaultValue,
+  onValueChange
+}) {
+  return /* @__PURE__ */ jsx12(
+    Menu2.RadioGroup,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      children
+    }
+  );
+}
+function MenuItem(props) {
+  const generatedId = React12.useId();
+  if (props.type === "checkbox") {
+    const {
+      children: children2,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      disabled: disabled2,
+      closeOnClick: closeOnClick2 = false,
+      id
+    } = props;
+    const itemId = id ?? `checkbox-menu-item-${generatedId}`;
+    return /* @__PURE__ */ jsxs10(
+      StyledCheckboxItem,
+      {
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled: disabled2,
+        closeOnClick: closeOnClick2,
+        children: [
+          /* @__PURE__ */ jsx12(
+            StyledCheckboxItemIndicator,
+            {
+              keepMounted: true,
+              render: (_indicatorProps, state) => /* @__PURE__ */ jsx12(
+                Checkbox4,
+                {
+                  checked: state.checked,
+                  onChange: () => {
+                  },
+                  tabIndex: -1,
+                  id: itemId,
+                  name: "menu-checkbox-item"
+                }
+              )
+            }
+          ),
+          children2
+        ]
+      }
+    );
+  }
+  if (props.type === "radio") {
+    const { children: children2, value, disabled: disabled2, closeOnClick: closeOnClick2 = false } = props;
+    return /* @__PURE__ */ jsxs10(
+      StyledRadioItem,
+      {
+        value,
+        disabled: disabled2,
+        closeOnClick: closeOnClick2,
+        children: [
+          /* @__PURE__ */ jsx12(
+            StyledRadioItemIndicator,
+            {
+              keepMounted: true,
+              render: (_indicatorProps, state) => /* @__PURE__ */ jsx12(
+                Radio3,
+                {
+                  checked: state.checked,
+                  onChange: () => {
+                  },
+                  tabIndex: -1,
+                  id: `radio-menu-item-${value}`,
+                  name: "menu-radio-item"
+                }
+              )
+            }
+          ),
+          children2
+        ]
+      }
+    );
+  }
+  const {
+    children,
+    onClick,
+    disabled,
+    closeOnClick = true,
+    href,
+    target
+  } = props;
+  if (href) {
+    return /* @__PURE__ */ jsx12(StyledLinkItem, { href, target, closeOnClick, children });
+  }
+  return /* @__PURE__ */ jsx12(
+    StyledMenuItem,
+    {
+      onClick,
+      disabled,
+      closeOnClick,
+      children
+    }
+  );
+}
+function MenuSub({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeParentOnEsc = false
+}) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  return /* @__PURE__ */ jsxs10(
+    Menu2.SubmenuRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      closeParentOnEsc,
+      children: [
+        /* @__PURE__ */ jsx12("div", { ref: containerRef, style: { position: "relative" } }),
+        trigger,
+        /* @__PURE__ */ jsx12(Menu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx12(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ jsx12(ActionMenuPopup, { children }) }) })
+      ]
+    }
+  );
+}
+function getOffset({ side }) {
+  return side === "top" || side === "bottom" ? 4 : -8;
+}
+function MenuSubTrigger({
+  children,
+  disabled,
+  label,
+  openOnHover = true
+}) {
+  return /* @__PURE__ */ jsxs10(
+    StyledSubmenuTrigger,
+    {
+      disabled,
+      label,
+      openOnHover,
+      children: [
+        children,
+        /* @__PURE__ */ jsx12(Icon5, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
+      ]
+    }
+  );
+}
 export {
+  ActionMenu,
   ComboboxActionButtons,
   ComboboxClear,
   ComboboxEmpty,
@@ -2487,6 +2836,11 @@ export {
   ComboboxTokenInput,
   ComboboxTokenInputGroup,
   ComboboxTrigger,
+  MenuGroup,
+  MenuItem,
+  MenuRadioGroup,
+  MenuSub,
+  MenuSubTrigger,
   MultiCombobox,
   MultiSearchableSelect,
   MultiSelect,