@sproutsocial/seeds-react-menu 1.12.3 → 1.15.10

package/src/v3/ActionMenuStyles.tsx

@@ -0,0 +1,154 @@
+import { Menu } from "@base-ui/react/menu";
+import styled, { css } from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+
+export const ActionMenuTrigger = styled(Menu.Trigger)``;
+
+export const ActionMenuPositioner = styled(Menu.Positioner)`
+  min-width: var(--anchor-width);
+  z-index: 7;
+`;
+
+// Opt out of Base UI Drawer's swipe-to-dismiss pointer capture when the menu
+// is rendered inside a Drawer. Without this, the Drawer's viewport captures
+// pointermove/up on portaled popups and MenuItem clicks never fire.
+export const ActionMenuPopup = styled(Menu.Popup).attrs({
+  "data-base-ui-swipe-ignore": "",
+})`
+  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[300]};
+
+  &[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);
+    }
+  }
+`;
+
+export const ActionMenuGroup = styled(Menu.Group)`
+  display: block;
+`;
+
+export const ActionMenuGroupLabel = styled(Menu.GroupLabel)`
+  padding: ${({ theme }) => `${theme.space[300]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const ActionMenuSeparator = styled(Menu.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[300]} -${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+
+const 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;
+  }
+`;
+
+export const StyledMenuItem = styled(Menu.Item)`
+  ${menuItemStyles}
+`;
+
+export const StyledCheckboxItem = styled(Menu.CheckboxItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+
+export const StyledRadioItem = styled(Menu.RadioItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+
+export const StyledCheckboxItemIndicator = styled(Menu.CheckboxItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const StyledRadioItemIndicator = styled(Menu.RadioItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+
+export const StyledSubmenuTrigger = styled(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};
+  }
+`;
+
+export const StyledLinkItem = styled(Menu.LinkItem)`
+  ${menuItemStyles}
+`;

package/src/v3/Common/ComboboxStyles.tsx

@@ -1,7 +1,16 @@
 import { Combobox } from "@base-ui/react/combobox";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import Checkbox from "@sproutsocial/seeds-react-checkbox";
+import { StyledChevron } from "./SelectIcons";
+
+const invalidStyles = css`
+  border-color: ${({ theme }) => theme.colors.form.border.error};
+
+  ${StyledChevron} {
+    color: ${({ theme }) => theme.colors.icon.error};
+  }
+`;
 
 export const ComboboxLabel = styled.label`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
@@ -9,7 +18,9 @@ export const ComboboxLabel = styled.label`
   color: ${({ theme }) => theme.colors.text.body};
 `;
 
-export const ComboboxInputGroup = styled(Combobox.InputGroup)`
+export const ComboboxInputGroup = styled(Combobox.InputGroup)<{
+  $isInvalid?: boolean;
+}>`
   display: flex;
   align-items: center;
   min-width: 160px;
@@ -30,6 +41,8 @@ export const ComboboxInputGroup = styled(Combobox.InputGroup)`
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;
 
 export const ComboboxInput = styled(Combobox.Input)`
@@ -81,7 +94,7 @@ export const ComboboxActionButtons = styled.div`
   gap: ${({ theme }) => theme.space[100]};
 `;
 
-export const ComboboxClear = styled(Combobox.Clear)`
+export const ComboboxClear = styled(Combobox.Clear).attrs({ tabIndex: 0 })`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,6 +111,10 @@ export const ComboboxClear = styled(Combobox.Clear)`
     color: ${({ theme }) => theme.colors.text.body};
   }
 
+  &:focus-visible {
+    ${focusRing}
+  }
+
   &[data-empty] {
     display: none;
   }
@@ -133,7 +150,7 @@ export const ComboboxPopup = styled(Combobox.Popup)`
   box-shadow: ${({ theme }) => theme.shadows.medium};
   outline: none;
   width: 100%;
-  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  max-height: min(var(--available-height, 400px), 400px);
   overflow-y: auto;
   padding: 0;
 
@@ -315,9 +332,12 @@ export const ComboboxToken = styled(Combobox.Chips)`
   display: flex;
   width: 100%;
   flex-wrap: wrap;
+  gap: ${({ theme }) => theme.space[200]};
 `;
 
-export const ComboboxTokenInputGroup = styled(Combobox.InputGroup)`
+export const ComboboxTokenInputGroup = styled(Combobox.InputGroup)<{
+  $isInvalid?: boolean;
+}>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -341,6 +361,8 @@ export const ComboboxTokenInputGroup = styled(Combobox.InputGroup)`
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;
 
 export const Token = styled.span`
@@ -375,11 +397,17 @@ export const TokenRemove = styled.button`
   cursor: pointer;
   padding: 0;
   line-height: 1;
+
+  &:focus-visible {
+    ${focusRing}
+  }
 `;
 
 // Searchable select components
 
-export const SearchableSelectTrigger = styled(Combobox.Trigger)`
+export const SearchableSelectTrigger = styled(Combobox.Trigger)<{
+  $isInvalid?: boolean;
+}>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -411,6 +439,8 @@ export const SearchableSelectTrigger = styled(Combobox.Trigger)`
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;
 
 export const SearchableSelectTriggerIcon = styled(Combobox.Icon)`
@@ -464,7 +494,9 @@ export const SearchableSelectList = styled(Combobox.List)`
   }
 `;
 
-export const SearchableSelectTokenTrigger = styled(Combobox.Trigger)`
+export const SearchableSelectTokenTrigger = styled(Combobox.Trigger)<{
+  $isInvalid?: boolean;
+}>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -500,4 +532,6 @@ export const SearchableSelectTokenTrigger = styled(Combobox.Trigger)`
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;

package/src/v3/Common/SelectStyles.tsx

@@ -1,12 +1,22 @@
 import { Select } from "@base-ui/react/select";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { StyledChevron } from "./SelectIcons";
 
-export const Field = styled.div`
-  display: flex;
+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]};
-  width: 100%;
+  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
 `;
 
 export const SelectLabel = styled(Select.Label)`
@@ -15,7 +25,9 @@ export const SelectLabel = styled(Select.Label)`
   color: ${({ theme }) => theme.colors.text.body};
 `;
 
-export const SelectTrigger = styled(Select.Trigger)`
+export const SelectTrigger = styled(Select.Trigger)<{
+  $isInvalid?: boolean;
+}>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -50,6 +62,8 @@ export const SelectTrigger = styled(Select.Trigger)`
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;
 
 export const SelectValue = styled(Select.Value)`
@@ -96,7 +110,7 @@ export const SelectPopup = styled(Select.Popup)`
   border-radius: ${({ theme }) => theme.radii[500]};
   box-shadow: ${({ theme }) => theme.shadows.low};
   outline: none;
-  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  max-height: min(var(--available-height, 400px), 400px);
   overflow-y: auto;
   padding: ${({ theme }) => theme.space[200]};
 

package/src/v3/Common/useSuppressEscapeClear.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+// When the popup is closed, Base UI's ComboboxInput onKeyDown handler clears
+// both the typed input value and the committed selection on Escape (an
+// ARIA-permitted but destructive interpretation of the combobox pattern). We
+// suppress that path by stopping the synthetic event in capture phase before
+// it reaches the input's React bubble-phase handler. The popup-open Escape
+// (handled by Base UI's document listener in useDismiss) and the parent
+// Modal/Dialog Escape (handled by Radix's document-capture listener, which
+// runs before any React synthetic dispatch) are both unaffected.
+export function useSuppressEscapeClear(open: boolean) {
+  return React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Escape" && !open) {
+        event.stopPropagation();
+      }
+    },
+    [open]
+  );
+}

package/src/v3/MenuButton.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { MenuButton } from "./MenuButton";
+import { MenuItem } from "./ActionMenu";
+
+const meta: Meta<typeof MenuButton> = {
+  title: "Really Under Development/V3/MenuButton",
+  component: MenuButton,
+  decorators: [
+    (Story) => (
+      <Box>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuButton>;
+
+// ─── Basic ────────────────────────────────────────────────────────────────────
+
+export const Basic: Story = {
+  name: "Basic",
+  render: () => (
+    <MenuButton
+      menuButtonAriaLabel="More compose options"
+      actionMenu={
+        <>
+          <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+          <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+          <MenuItem onClick={action("Analyze post")}>Analyze post</MenuItem>
+        </>
+      }
+      onClick={action("Open Menu")}
+    >
+      Open Menu
+    </MenuButton>
+  ),
+};
+
+// ─── Primary ──────────────────────────────────────────────────────────────────
+
+export const Primary: Story = {
+  name: "Primary",
+  render: () => {
+    // The dropdown selects the action; the main button reflects and performs it.
+    const actions = [
+      { label: "Save as Draft", run: action("Save as Draft") },
+      { label: "Save and Activate", run: action("Save and Activate") },
+    ];
+    const [selected, setSelected] = React.useState(actions[0]);
+
+    return (
+      <MenuButton
+        appearance="primary"
+        menuButtonAriaLabel="More save options"
+        actionMenu={
+          <>
+            {actions.map((a) => (
+              <MenuItem key={a.label} onClick={() => setSelected(a)}>
+                {a.label}
+              </MenuItem>
+            ))}
+          </>
+        }
+        onClick={(e) => selected.run(e)}
+      >
+        {selected.label}
+      </MenuButton>
+    );
+  },
+};
+
+// ─── Secondary ────────────────────────────────────────────────────────────────
+
+export const Secondary: Story = {
+  name: "Secondary",
+  render: () => (
+    <MenuButton
+      appearance="secondary"
+      menuButtonAriaLabel="More actions"
+      actionMenu={
+        <>
+          <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+          <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+        </>
+      }
+      onClick={action("Open Menu")}
+    >
+      Open Menu
+    </MenuButton>
+  ),
+};
+
+// ─── Disabled ─────────────────────────────────────────────────────────────────
+
+export const Disabled: Story = {
+  name: "Disabled",
+  render: () => (
+    <MenuButton
+      appearance="primary"
+      disabled
+      menuButtonAriaLabel="More actions"
+      actionMenu={
+        <>
+          <MenuItem onClick={action("Compose")}>Compose</MenuItem>
+          <MenuItem onClick={action("View Messages")}>View Messages</MenuItem>
+        </>
+      }
+      onClick={action("Open Menu")}
+    >
+      Open Menu
+    </MenuButton>
+  ),
+};

package/src/v3/MenuButton.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { type TypeButtonProps } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { ActionMenu } from "./ActionMenu";
+import {
+  MenuButtonContainer,
+  MainButton,
+  TriggerButton,
+} from "./MenuButtonStyles";
+
+// ─── MenuButton ─────────────────────────────────────────────────────────────
+
+export interface MenuButtonProps extends TypeButtonProps {
+  /**
+   * Menu item content rendered inside the dropdown half — the children of an
+   * ActionMenu (MenuItems / MenuGroups).
+   */
+  actionMenu: React.ReactNode;
+  /**
+   * Accessible label for the chevron-only trigger button. Required so consumers
+   * supply a localizable label rather than relying on a hardcoded fallback.
+   */
+  menuButtonAriaLabel: string;
+}
+
+/**
+ * A "split button": a primary Button rendered immediately next to an ActionMenu
+ * whose trigger is an identical Button showing only a chevron-down icon. The
+ * two read as one control — the main button's right corners and the trigger's
+ * left corners are squared off with a 1px gap between them.
+ */
+export function MenuButton({
+  actionMenu,
+  appearance = "primary",
+  size,
+  disabled,
+  menuButtonAriaLabel,
+  children,
+  ...rest
+}: MenuButtonProps) {
+  return (
+    <MenuButtonContainer>
+      <MainButton
+        appearance={appearance}
+        size={size}
+        disabled={disabled}
+        {...rest}
+      >
+        {children}
+      </MainButton>
+      <ActionMenu
+        disabled={disabled}
+        trigger={
+          <TriggerButton
+            appearance={appearance}
+            size={size}
+            disabled={disabled}
+            ariaLabel={menuButtonAriaLabel}
+          >
+            <Icon name="chevron-down-outline" fixedWidth aria-hidden />
+          </TriggerButton>
+        }
+      >
+        {actionMenu}
+      </ActionMenu>
+    </MenuButtonContainer>
+  );
+}

package/src/v3/MenuButtonStyles.tsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { Button } from "@sproutsocial/seeds-react-button";
+
+// 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;
+`;
+
+// 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;
+  }
+`;
+
+// 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;
+  }
+
+  &[data-popup-open] .Icon-svg {
+    transform: rotate(180deg);
+  }
+`;