@sproutsocial/seeds-react-menu 1.12.2 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/v3/ActionMenu.stories.tsx

@@ -0,0 +1,260 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import {
+  ActionMenu,
+  MenuGroup,
+  MenuItem,
+  MenuRadioGroup,
+  MenuSub,
+  MenuSubTrigger,
+} from "./ActionMenu";
+
+const meta: Meta<typeof ActionMenu> = {
+  title: "Really Under Development/V3/ActionMenu",
+  component: ActionMenu,
+  decorators: [
+    (Story) => (
+      <Box>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionMenu>;
+
+// ─── Basic ────────────────────────────────────────────────────────────────────
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <ActionMenu trigger={<Button appearance="secondary">Open Menu</Button>}>
+      <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+      <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+      <MenuItem onClick={action("Analyze post")}>Analyze post</MenuItem>
+    </ActionMenu>
+  ),
+};
+
+// ─── With Groups ──────────────────────────────────────────────────────────────
+
+export const WithGroups: Story = {
+  name: "With Groups",
+  render: () => (
+    <ActionMenu trigger={<Button appearance="secondary">Open Menu</Button>}>
+      <MenuGroup label="Actions" showSeparator>
+        <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+        <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+      </MenuGroup>
+      <MenuGroup label="Settings">
+        <MenuItem onClick={action("Settings")}>Settings</MenuItem>
+        <MenuItem onClick={action("Help")}>Help</MenuItem>
+      </MenuGroup>
+    </ActionMenu>
+  ),
+};
+
+// ─── With Icons ───────────────────────────────────────────────────────────────
+
+export const WithIcons: Story = {
+  name: "With Icons",
+  render: () => (
+    <ActionMenu trigger={<Button appearance="secondary">Open Menu</Button>}>
+      <MenuItem onClick={action("Compose")}>
+        <Box display="flex" alignItems="center" gap="300">
+          <Icon name="pencil-to-square-outline" aria-hidden />
+          Compose
+        </Box>
+      </MenuItem>
+      <MenuItem onClick={action("View Messages")}>
+        <Box display="flex" alignItems="center" gap="300">
+          <Icon name="envelope-outline" aria-hidden />
+          View Messages
+        </Box>
+      </MenuItem>
+      <MenuItem href="https://sproutsocial.com" target="_blank">
+        <Box display="flex" alignItems="center" gap="300">
+          <Icon name="circle-question-outline" aria-hidden />
+          Visit Help Center
+          <Icon
+            name="arrow-right-up"
+            aria-label="open in a new window"
+            style={{ marginLeft: "auto" }}
+          />
+        </Box>
+      </MenuItem>
+    </ActionMenu>
+  ),
+};
+
+// ─── With Disabled Items ──────────────────────────────────────────────────────
+
+export const WithDisabledItems: Story = {
+  name: "With Disabled Items",
+  render: () => (
+    <ActionMenu trigger={<Button appearance="secondary">Open Menu</Button>}>
+      <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+      <MenuItem onClick={action("View Messages")} disabled>
+        View Messages (disabled)
+      </MenuItem>
+      <MenuItem onClick={action("Analyze post")}>Analyze post</MenuItem>
+    </ActionMenu>
+  ),
+};
+
+// ─── Checkbox Items ───────────────────────────────────────────────────────────
+
+export const CheckboxItems: Story = {
+  name: "Checkbox Items",
+  render: () => {
+    const [highContrast, setHighContrast] = React.useState(false);
+    const [darkMode, setDarkMode] = React.useState(false);
+    const [notifications, setNotifications] = React.useState(true);
+    return (
+      <ActionMenu trigger={<Button appearance="secondary">Preferences</Button>}>
+        <MenuItem
+          type="checkbox"
+          checked={highContrast}
+          onCheckedChange={setHighContrast}
+        >
+          High contrast
+        </MenuItem>
+        <MenuItem
+          type="checkbox"
+          checked={darkMode}
+          onCheckedChange={setDarkMode}
+        >
+          Dark mode
+        </MenuItem>
+        <MenuItem
+          type="checkbox"
+          checked={notifications}
+          onCheckedChange={setNotifications}
+        >
+          Notifications
+        </MenuItem>
+      </ActionMenu>
+    );
+  },
+};
+
+// ─── Radio Items ──────────────────────────────────────────────────────────────
+
+export const RadioItems: Story = {
+  name: "Radio Items",
+  render: () => {
+    const [theme, setTheme] = React.useState("system");
+    return (
+      <ActionMenu trigger={<Button appearance="secondary">Theme</Button>}>
+        <MenuGroup label="Appearance">
+          <MenuRadioGroup value={theme} onValueChange={setTheme}>
+            <MenuItem type="radio" value="light">
+              Light
+            </MenuItem>
+            <MenuItem type="radio" value="dark">
+              Dark
+            </MenuItem>
+            <MenuItem type="radio" value="system">
+              System default
+            </MenuItem>
+          </MenuRadioGroup>
+        </MenuGroup>
+      </ActionMenu>
+    );
+  },
+};
+
+// ─── Controlled Open ──────────────────────────────────────────────────────────
+
+export const ControlledOpen: Story = {
+  name: "Controlled Open",
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <Box>
+        <Button appearance="primary" onClick={() => setOpen(true)} mb={300}>
+          Open programmatically
+        </Button>
+        <ActionMenu
+          trigger={<Button appearance="secondary">Menu</Button>}
+          open={open}
+          onOpenChange={(isOpen) => {
+            setOpen(isOpen);
+          }}
+        >
+          <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+          <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+          <MenuItem onClick={action("Analyze post")}>Analyze post</MenuItem>
+        </ActionMenu>
+      </Box>
+    );
+  },
+};
+
+// ─── Nested Submenu ───────────────────────────────────────────────────────────
+
+export const NestedSubmenu: Story = {
+  name: "Nested Submenu",
+  render: () => (
+    <ActionMenu trigger={<Button appearance="secondary">Open Menu</Button>}>
+      <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+      <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+      <MenuSub trigger={<MenuSubTrigger>Share</MenuSubTrigger>}>
+        <MenuItem onClick={action("Share to Twitter")}>Twitter</MenuItem>
+        <MenuItem onClick={action("Share to LinkedIn")}>LinkedIn</MenuItem>
+        <MenuSub trigger={<MenuSubTrigger>More platforms</MenuSubTrigger>}>
+          <MenuItem onClick={action("Share to Facebook")}>Facebook</MenuItem>
+          <MenuItem onClick={action("Share to Instagram")}>Instagram</MenuItem>
+        </MenuSub>
+      </MenuSub>
+      <MenuItem onClick={action("Delete")} disabled>
+        Delete
+      </MenuItem>
+    </ActionMenu>
+  ),
+};
+
+// ─── Mixed Item Types ─────────────────────────────────────────────────────────
+
+export const MixedItemTypes: Story = {
+  name: "Mixed Item Types",
+  render: () => {
+    const [notifications, setNotifications] = React.useState(true);
+    const [theme, setTheme] = React.useState("system");
+    return (
+      <ActionMenu trigger={<Button appearance="secondary">Settings</Button>}>
+        <MenuGroup label="Actions" showSeparator>
+          <MenuItem onClick={action("Edit profile")}>Edit profile</MenuItem>
+          <MenuItem onClick={action("Manage team")}>Manage team</MenuItem>
+        </MenuGroup>
+        <MenuGroup label="Preferences" showSeparator>
+          <MenuItem
+            type="checkbox"
+            checked={notifications}
+            onCheckedChange={setNotifications}
+          >
+            Email notifications
+          </MenuItem>
+        </MenuGroup>
+        <MenuGroup label="Appearance">
+          <MenuRadioGroup value={theme} onValueChange={setTheme}>
+            <MenuItem type="radio" value="light">
+              Light
+            </MenuItem>
+            <MenuItem type="radio" value="dark">
+              Dark
+            </MenuItem>
+            <MenuItem type="radio" value="system">
+              System
+            </MenuItem>
+          </MenuRadioGroup>
+        </MenuGroup>
+      </ActionMenu>
+    );
+  },
+};

package/src/v3/ActionMenu.tsx

@@ -0,0 +1,345 @@
+import * as React from "react";
+import { Menu, type MenuRootChangeEventDetails } from "@base-ui/react/menu";
+import Radio from "@sproutsocial/seeds-react-radio";
+import Checkbox from "@sproutsocial/seeds-react-checkbox";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { useSeedsPortalContainer } from "./SeedsPortal";
+import {
+  ActionMenuTrigger,
+  ActionMenuPositioner,
+  ActionMenuPopup,
+  ActionMenuGroup,
+  ActionMenuGroupLabel,
+  ActionMenuSeparator,
+  StyledMenuItem,
+  StyledCheckboxItem,
+  StyledCheckboxItemIndicator,
+  StyledRadioItem,
+  StyledRadioItemIndicator,
+  StyledLinkItem,
+  StyledSubmenuTrigger,
+} from "./ActionMenuStyles";
+
+// ─── ActionMenu ───────────────────────────────────────────────────────────────
+
+export interface ActionMenuProps {
+  /** The button element that opens the menu */
+  trigger: React.ReactElement;
+  /** Menu items and groups */
+  children: React.ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Uncontrolled default open state */
+  defaultOpen?: boolean;
+  /** Called when open state changes */
+  onOpenChange?: (
+    open: boolean,
+    eventDetails: MenuRootChangeEventDetails
+  ) => void;
+  /** Disable the trigger */
+  disabled?: boolean;
+}
+
+export function ActionMenu({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+}: ActionMenuProps) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+
+  return (
+    <Menu.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <div ref={containerRef} style={{ position: "relative" }} />
+      <ActionMenuTrigger render={trigger} disabled={disabled} />
+      <Menu.Portal container={portalContainer}>
+        <ActionMenuPositioner sideOffset={8}>
+          <ActionMenuPopup>{children}</ActionMenuPopup>
+        </ActionMenuPositioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+// ─── MenuGroup ────────────────────────────────────────────────────────────────
+
+export interface MenuGroupProps {
+  children: React.ReactNode;
+  /** Optional group label shown above items */
+  label?: string;
+  /** Render a separator line after this group */
+  showSeparator?: boolean;
+}
+
+export function MenuGroup({
+  children,
+  label,
+  showSeparator = false,
+}: MenuGroupProps) {
+  return (
+    <>
+      <ActionMenuGroup>
+        {label && <ActionMenuGroupLabel>{label}</ActionMenuGroupLabel>}
+        {children}
+      </ActionMenuGroup>
+      {showSeparator && <ActionMenuSeparator />}
+    </>
+  );
+}
+
+// ─── MenuRadioGroup ───────────────────────────────────────────────────────────
+
+export interface MenuRadioGroupProps {
+  children: React.ReactNode;
+  /** Controlled selected value */
+  value?: string;
+  /** Uncontrolled default value */
+  defaultValue?: string;
+  /** Called when selected value changes */
+  onValueChange?: (value: string) => void;
+}
+
+export function MenuRadioGroup({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+}: MenuRadioGroupProps) {
+  return (
+    <Menu.RadioGroup
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+    >
+      {children}
+    </Menu.RadioGroup>
+  );
+}
+
+// ─── MenuItem ─────────────────────────────────────────────────────────────────
+
+interface MenuItemActionProps {
+  type?: "action";
+  children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  disabled?: boolean;
+  /** Close the menu when this item is clicked. Defaults to true. */
+  closeOnClick?: boolean;
+  /** Render as a link */
+  href?: string;
+  target?: string;
+}
+
+interface MenuItemCheckboxProps {
+  type: "checkbox";
+  children: React.ReactNode;
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Uncontrolled default checked state */
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Close the menu when clicked. Defaults to false for checkbox items. */
+  closeOnClick?: boolean;
+  id?: string;
+}
+
+interface MenuItemRadioProps {
+  type: "radio";
+  /** Value submitted to the parent MenuRadioGroup */
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  /** Close the menu when clicked. Defaults to false for radio items. */
+  closeOnClick?: boolean;
+}
+
+export type MenuItemProps =
+  | MenuItemActionProps
+  | MenuItemCheckboxProps
+  | MenuItemRadioProps;
+
+export function MenuItem(props: MenuItemProps) {
+  const generatedId = React.useId();
+
+  if (props.type === "checkbox") {
+    const {
+      children,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      disabled,
+      closeOnClick = false,
+      id,
+    } = props;
+    const itemId = id ?? `checkbox-menu-item-${generatedId}`;
+    return (
+      <StyledCheckboxItem
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        closeOnClick={closeOnClick}
+      >
+        <StyledCheckboxItemIndicator
+          keepMounted
+          render={(_indicatorProps, state) => (
+            <Checkbox
+              checked={state.checked}
+              onChange={() => {}}
+              tabIndex={-1}
+              id={itemId}
+              name="menu-checkbox-item"
+            />
+          )}
+        />
+        {children}
+      </StyledCheckboxItem>
+    );
+  }
+
+  if (props.type === "radio") {
+    const { children, value, disabled, closeOnClick = false } = props;
+    return (
+      <StyledRadioItem
+        value={value}
+        disabled={disabled}
+        closeOnClick={closeOnClick}
+      >
+        <StyledRadioItemIndicator
+          keepMounted
+          render={(_indicatorProps, state) => (
+            <Radio
+              checked={state.checked}
+              onChange={() => {}}
+              tabIndex={-1}
+              id={`radio-menu-item-${value}`}
+              name="menu-radio-item"
+            />
+          )}
+        />
+        {children}
+      </StyledRadioItem>
+    );
+  }
+
+  // Default: action item
+  const {
+    children,
+    onClick,
+    disabled,
+    closeOnClick = true,
+    href,
+    target,
+  } = props as MenuItemActionProps;
+
+  if (href) {
+    return (
+      <StyledLinkItem href={href} target={target} closeOnClick={closeOnClick}>
+        {children}
+      </StyledLinkItem>
+    );
+  }
+
+  return (
+    <StyledMenuItem
+      onClick={onClick}
+      disabled={disabled}
+      closeOnClick={closeOnClick}
+    >
+      {children}
+    </StyledMenuItem>
+  );
+}
+
+// ─── MenuSub ──────────────────────────────────────────────────────────────────
+
+export interface MenuSubProps {
+  /** The MenuSubTrigger element that opens the submenu */
+  trigger: React.ReactNode;
+  /** Submenu items */
+  children: React.ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Uncontrolled default open state */
+  defaultOpen?: boolean;
+  /** Called when open state changes */
+  onOpenChange?: (
+    open: boolean,
+    eventDetails: MenuRootChangeEventDetails
+  ) => void;
+  /**
+   * When true, pressing Escape closes the entire menu tree.
+   * When false (default), Escape only closes the submenu.
+   */
+  closeParentOnEsc?: boolean;
+}
+
+export function MenuSub({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeParentOnEsc = false,
+}: MenuSubProps) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+
+  return (
+    <Menu.SubmenuRoot
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      closeParentOnEsc={closeParentOnEsc}
+    >
+      <div ref={containerRef} style={{ position: "relative" }} />
+      {trigger}
+      <Menu.Portal container={portalContainer}>
+        <ActionMenuPositioner sideOffset={getOffset} alignOffset={getOffset}>
+          <ActionMenuPopup>{children}</ActionMenuPopup>
+        </ActionMenuPositioner>
+      </Menu.Portal>
+    </Menu.SubmenuRoot>
+  );
+}
+function getOffset({ side }: { side: Menu.Positioner.Props["side"] }) {
+  return side === "top" || side === "bottom" ? 4 : -8;
+}
+
+// ─── MenuSubTrigger ───────────────────────────────────────────────────────────
+
+export interface MenuSubTriggerProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  /** Custom label for keyboard text navigation */
+  label?: string;
+  /**
+   * Whether the submenu opens on hover.
+   * @default true
+   */
+  openOnHover?: boolean;
+}
+
+export function MenuSubTrigger({
+  children,
+  disabled,
+  label,
+  openOnHover = true,
+}: MenuSubTriggerProps) {
+  return (
+    <StyledSubmenuTrigger
+      disabled={disabled}
+      label={label}
+      openOnHover={openOnHover}
+    >
+      {children}
+      <Icon name="chevron-right-outline" fixedWidth aria-hidden />
+    </StyledSubmenuTrigger>
+  );
+}