@sproutsocial/seeds-react-menu 1.16.16 → 1.18.0

package/src/v3/Common/SelectIcons.tsx

@@ -1,17 +1,26 @@
 import * as React from "react";
-import styled from "styled-components";
 import { Icon } from "@sproutsocial/seeds-react-icon";
+import { cn } from "./cn";
 
-export interface StyledChevronProps {
+export interface StyledChevronProps extends React.ComponentProps<"div"> {
   $isOpen?: boolean;
 }
 
-export const StyledChevron = styled.div<StyledChevronProps>`
-  display: flex;
-  align-items: center;
-  transition: transform 0.15s;
-  ${({ $isOpen }) => $isOpen && "transform: rotate(-180deg);"}
-`;
+export const StyledChevron = React.forwardRef<
+  HTMLDivElement,
+  StyledChevronProps
+>(({ $isOpen, className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "seeds-menu-chevron",
+      { "seeds-menu-chevron--open": !!$isOpen },
+      className
+    )}
+    {...rest}
+  />
+));
+StyledChevron.displayName = "StyledChevron";
 
 export function ChevronIcon() {
   return <Icon name="chevron-down-outline" fixedWidth aria-hidden />;

package/src/v3/Common/SelectItem.tsx

@@ -1,50 +1,37 @@
 import * as React from "react";
 import { Select } from "@base-ui/react/select";
-import styled from "styled-components";
 import Radio from "@sproutsocial/seeds-react-radio";
 import Checkbox from "@sproutsocial/seeds-react-checkbox";
 import { Icon } from "@sproutsocial/seeds-react-icon";
+import { cn, type WithStringClassName } from "./cn";
 
-// ─── Styled components ────────────────────────────────────────────────────────
+// ─── CSS-class components (see menu.css) ────────────────────────────────────
 
-export const StyledItem = styled(Select.Item)`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  font-size: 14px;
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
+export const StyledItem = React.forwardRef<
+  React.ElementRef<typeof Select.Item>,
+  WithStringClassName<React.ComponentProps<typeof Select.Item>>
+>(({ className, ...rest }, ref) => (
+  <Select.Item
+    ref={ref}
+    className={cn("seeds-select-item", className)}
+    {...rest}
+  />
+));
+StyledItem.displayName = "StyledItem";
 
-  &[data-highlighted] {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
+export const StyledItemIndicator = React.forwardRef<
+  React.ElementRef<typeof Select.ItemIndicator>,
+  WithStringClassName<React.ComponentProps<typeof Select.ItemIndicator>>
+>(({ className, ...rest }, ref) => (
+  <Select.ItemIndicator
+    ref={ref}
+    className={cn("seeds-select-item-indicator", className)}
+    {...rest}
+  />
+));
+StyledItemIndicator.displayName = "StyledItemIndicator";
 
-  &[data-selected] {
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-export const StyledItemIndicator = styled(Select.ItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-  visibility: hidden;
-
-  &[data-selected] {
-    visibility: visible;
-  }
-`;
-
-export const StyledItemText = styled(Select.ItemText)``;
+export const StyledItemText = Select.ItemText;
 
 // ─── Icons ────────────────────────────────────────────────────────────────────
 

package/src/v3/Common/SelectStyles.tsx

@@ -1,146 +1,148 @@
+import * as React from "react";
 import { Select } from "@base-ui/react/select";
-import styled, { css } from "styled-components";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
-import { StyledChevron } from "./SelectIcons";
-
-const invalidStyles = css`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-
-  ${StyledChevron} {
-    color: ${({ theme }) => theme.colors.icon.error};
-  }
-`;
-
-export const Field = styled.div<{ $fullWidth?: boolean }>`
-  display: ${({ $fullWidth }) =>
-    $fullWidth === false ? "inline-flex" : "flex"};
-  flex-direction: column;
-  gap: ${({ theme }) => theme.space[200]};
-  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
-`;
-
-export const SelectLabel = styled(Select.Label)`
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-
-export const SelectTrigger = styled(Select.Trigger)<{
+import { cn, type WithStringClassName } from "./cn";
+
+/**
+ * v3 Select surface, rendered with CSS classes from menu.css (imported via
+ * @sproutsocial/seeds-react-menu/base/css) instead of styled-components. Each
+ * export keeps its previous name and forwards props/refs to the underlying
+ * Base UI component; the transient `$isInvalid` / `$fullWidth` props are
+ * translated to modifier classes here so call sites are unchanged.
+ */
+
+type FieldProps = WithStringClassName<React.ComponentProps<"div">> & {
+  $fullWidth?: boolean;
+};
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ $fullWidth, className, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "seeds-menu-field",
+        { "seeds-menu-field--inline": $fullWidth === false },
+        className
+      )}
+      {...rest}
+    />
+  )
+);
+Field.displayName = "Field";
+
+export const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof Select.Label>,
+  WithStringClassName<React.ComponentProps<typeof Select.Label>>
+>(({ className, ...rest }, ref) => (
+  <Select.Label
+    ref={ref}
+    className={cn("seeds-menu-label", className)}
+    {...rest}
+  />
+));
+SelectLabel.displayName = "SelectLabel";
+
+type SelectTriggerProps = WithStringClassName<
+  React.ComponentProps<typeof Select.Trigger>
+> & {
   $isInvalid?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => `${theme.space[300]}`};
-  min-width: 160px;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
-  background: ${({ theme }) => theme.colors.form.background.base};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
-  transition: border-color ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in},
-    box-shadow ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in};
-
-  &:focus-visible {
-    ${focusRing}
-  }
-
-  &[data-popup-open] {
-    ${focusRing}
-  }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-
-export const SelectValue = styled(Select.Value)`
-  min-width: 0;
-  overflow: hidden;
-`;
-
-export const SelectIcon = styled(Select.Icon)`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.colors.icon.base};
-  flex-shrink: 0;
-`;
-
-export const SelectGroup = styled(Select.Group)`
-  display: block;
-`;
-
-export const SelectGroupLabel = styled(Select.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};
-`;
-
-export const SelectSeparator = styled(Select.Separator)`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-
-export const SelectPositioner = styled(Select.Positioner)`
-  width: var(--anchor-width);
-  z-index: 7;
-`;
-
-export const SelectPopup = styled(Select.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(--available-height, 400px), 400px);
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.space[200]};
-
-  &[data-open] {
-    animation: select-popup-in 120ms ease-out;
-  }
-
-  &[data-closed] {
-    animation: select-popup-out 100ms ease-in;
-  }
-
-  @keyframes select-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes select-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-`;
+};
+
+export const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof Select.Trigger>,
+  SelectTriggerProps
+>(({ $isInvalid, className, ...rest }, ref) => (
+  <Select.Trigger
+    ref={ref}
+    className={cn(
+      "seeds-select-trigger",
+      { "seeds-select-trigger--invalid": !!$isInvalid },
+      className
+    )}
+    {...rest}
+  />
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+export const SelectValue = React.forwardRef<
+  React.ElementRef<typeof Select.Value>,
+  WithStringClassName<React.ComponentProps<typeof Select.Value>>
+>(({ className, ...rest }, ref) => (
+  <Select.Value
+    ref={ref}
+    className={cn("seeds-select-value", className)}
+    {...rest}
+  />
+));
+SelectValue.displayName = "SelectValue";
+
+export const SelectIcon = React.forwardRef<
+  React.ElementRef<typeof Select.Icon>,
+  WithStringClassName<React.ComponentProps<typeof Select.Icon>>
+>(({ className, ...rest }, ref) => (
+  <Select.Icon
+    ref={ref}
+    className={cn("seeds-select-icon", className)}
+    {...rest}
+  />
+));
+SelectIcon.displayName = "SelectIcon";
+
+export const SelectGroup = React.forwardRef<
+  React.ElementRef<typeof Select.Group>,
+  WithStringClassName<React.ComponentProps<typeof Select.Group>>
+>(({ className, ...rest }, ref) => (
+  <Select.Group
+    ref={ref}
+    className={cn("seeds-select-group", className)}
+    {...rest}
+  />
+));
+SelectGroup.displayName = "SelectGroup";
+
+export const SelectGroupLabel = React.forwardRef<
+  React.ElementRef<typeof Select.GroupLabel>,
+  WithStringClassName<React.ComponentProps<typeof Select.GroupLabel>>
+>(({ className, ...rest }, ref) => (
+  <Select.GroupLabel
+    ref={ref}
+    className={cn("seeds-select-group-label", className)}
+    {...rest}
+  />
+));
+SelectGroupLabel.displayName = "SelectGroupLabel";
+
+export const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof Select.Separator>,
+  WithStringClassName<React.ComponentProps<typeof Select.Separator>>
+>(({ className, ...rest }, ref) => (
+  <Select.Separator
+    ref={ref}
+    className={cn("seeds-select-separator", className)}
+    {...rest}
+  />
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+export const SelectPositioner = React.forwardRef<
+  React.ElementRef<typeof Select.Positioner>,
+  WithStringClassName<React.ComponentProps<typeof Select.Positioner>>
+>(({ className, ...rest }, ref) => (
+  <Select.Positioner
+    ref={ref}
+    className={cn("seeds-select-positioner", className)}
+    {...rest}
+  />
+));
+SelectPositioner.displayName = "SelectPositioner";
+
+export const SelectPopup = React.forwardRef<
+  React.ElementRef<typeof Select.Popup>,
+  WithStringClassName<React.ComponentProps<typeof Select.Popup>>
+>(({ className, ...rest }, ref) => (
+  <Select.Popup
+    ref={ref}
+    className={cn("seeds-select-popup", className)}
+    {...rest}
+  />
+));
+SelectPopup.displayName = "SelectPopup";

package/src/v3/Common/cn.ts

@@ -0,0 +1,38 @@
+/**
+ * Local class-name merge helper for the v3 menu CSS-class components.
+ *
+ * `cn` is not exported from @sproutsocial/seeds-react-utilities, so — mirroring
+ * ButtonTailwind/MessageTailwind — the menu package keeps a local copy. Accepts
+ * strings and { className: boolean } records; falsy entries are dropped.
+ */
+/**
+ * Narrow a Base UI component's props so `className` is a plain string. Base UI
+ * types `className` as `string | ((state) => string)`; the v3 CSS-class
+ * wrappers only ever forward a string (no consumer uses the function form), and
+ * a string is what `cn` accepts.
+ */
+export type WithStringClassName<P> = Omit<P, "className"> & {
+  className?: string;
+};
+
+export function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}

package/src/v3/MenuButton.stories.tsx

@@ -6,7 +6,7 @@ import { MenuButton } from "./MenuButton";
 import { MenuItem } from "./ActionMenu";
 
 const meta: Meta<typeof MenuButton> = {
-  title: "Really Under Development/V3/MenuButton",
+  title: "Components/Menus/v3/MenuButton",
   component: MenuButton,
   decorators: [
     (Story) => (

package/src/v3/MenuButtonStyles.tsx

@@ -1,38 +1,59 @@
-import styled from "styled-components";
-import { Button } from "@sproutsocial/seeds-react-button";
+import * as React from "react";
+import { Button, type TypeButtonProps } from "@sproutsocial/seeds-react-button";
+import { cn } from "./Common/cn";
 
-// A 1px gap separates the two halves of the split button (fixed pixel value
-// per the design, not a theme token).
-export const MenuButtonContainer = styled.div`
-  display: inline-flex;
-  gap: 1px;
-`;
+/**
+ * v3 MenuButton (split button) surface, rendered with CSS classes from menu.css
+ * (imported via @sproutsocial/seeds-react-menu/base/css) instead of
+ * styled-components. Each export keeps its previous name.
+ *
+ * MainButton / TriggerButton square off the inner corners so the two halves
+ * read as one control. The class rules use doubled selectors to reproduce the
+ * old `&&` specificity bump; Button forwards `className` and spreads `data-*`
+ * (including Base UI's `data-popup-open`) onto its root DOM node, so the chevron
+ * rotation selector `.seeds-menu-button-trigger[data-popup-open] .Icon-svg`
+ * still resolves.
+ *
+ * These forward refs and spread all props so Base UI's `Menu.Trigger render`
+ * can inject its ref, `data-popup-open`, and event handlers onto the trigger —
+ * matching what `styled(Button)` did previously.
+ */
 
-// Square off the inner (right) corners of the main button so it reads as one
-// control with the trigger. The `&&` specificity bump beats the base Button
-// Container's own `border-radius` (equal-specificity, source-order dependent).
-export const MainButton = styled(Button)`
-  && {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
+export const MenuButtonContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cn("seeds-menu-button-container", className)}
+    {...rest}
+  />
+));
+MenuButtonContainer.displayName = "MenuButtonContainer";
 
-// Square off the inner (left) corners of the chevron trigger button. The
-// chevron rotates 180° while the menu is open: base-ui's Menu.Trigger sets
-// `data-popup-open` on this element (the base Button spreads it onto its root
-// DOM node), mirroring the open-state selector convention in ActionMenuStyles.
-export const TriggerButton = styled(Button)`
-  && {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .Icon-svg {
-    transition: transform ${({ theme }) => theme.duration.fast} ease;
-  }
+// Square off the inner (right) corners of the main button.
+export const MainButton = React.forwardRef<HTMLButtonElement, TypeButtonProps>(
+  ({ className, ...rest }, ref) => (
+    <Button
+      ref={ref}
+      className={cn("seeds-menu-button-main", className)}
+      {...rest}
+    />
+  )
+);
+MainButton.displayName = "MainButton";
 
-  &[data-popup-open] .Icon-svg {
-    transform: rotate(180deg);
-  }
-`;
+// Square off the inner (left) corners of the chevron trigger button. The
+// chevron rotates 180° while the menu is open: Base UI's Menu.Trigger sets
+// `data-popup-open` on this element (Button spreads it onto its root DOM node).
+export const TriggerButton = React.forwardRef<
+  HTMLButtonElement,
+  TypeButtonProps
+>(({ className, ...rest }, ref) => (
+  <Button
+    ref={ref}
+    className={cn("seeds-menu-button-trigger", className)}
+    {...rest}
+  />
+));
+TriggerButton.displayName = "TriggerButton";

package/src/v3/ModalStories.stories.tsx

@@ -138,7 +138,7 @@ function AllComponents() {
 // ─── Meta ─────────────────────────────────────────────────────────────────────
 
 const meta: Meta = {
-  title: "Really Under Development/V3/In Modal",
+  title: "Components/Menus/v3/In Modal",
 };
 
 export default meta;

package/src/v3/MultiCombobox.stories.tsx

@@ -18,7 +18,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof MultiCombobox> = {
-  title: "Really Under Development/V3/Multi Combobox",
+  title: "Components/Menus/v3/Multi Combobox",
   component: MultiCombobox,
 };
 

package/src/v3/MultiCombobox.tsx

@@ -74,6 +74,9 @@ interface MultiComboboxBaseProps {
   filter?: ((item: unknown, query: string) => boolean) | null;
   inputValue?: string;
   onInputValueChange?: (value: string) => void;
+  "aria-label"?: string;
+  /** Id of a visible label. Preferred over `aria-label`. */
+  "aria-labelledby"?: string;
   "aria-describedby"?: string;
   isInvalid?: boolean;
   required?: boolean;
@@ -150,6 +153,8 @@ export function MultiCombobox<T extends DataWithId>(
     fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"];
   const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -674,6 +679,8 @@ export function MultiCombobox<T extends DataWithId>(
               <ComboboxStatus>{isLoading ? loadingText : null}</ComboboxStatus>
               <ComboboxEmpty>{isLoading ? null : emptyText}</ComboboxEmpty>
               <ComboboxList
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
                 style={
                   isVirtualized
                     ? {

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from "./storyData";
 
 const meta: Meta<typeof MultiSearchableSelect> = {
-  title: "Really Under Development/V3/Multi Searchable Select",
+  title: "Components/Menus/v3/Multi Searchable Select",
   component: MultiSearchableSelect,
 };