@sproutsocial/seeds-react-menu 1.13.0 → 1.15.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.13.0",
+  "version": "1.15.10",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -36,18 +36,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
-    "@sproutsocial/seeds-react-box": "^1.1.16",
-    "@sproutsocial/seeds-react-button": "^2.0.5",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.33",
-    "@sproutsocial/seeds-react-icon": "^2.3.7",
-    "@sproutsocial/seeds-react-input": "^1.5.16",
-    "@sproutsocial/seeds-react-label": "^1.0.16",
-    "@sproutsocial/seeds-react-popout": "^2.4.38",
-    "@sproutsocial/seeds-react-radio": "^1.3.16",
-    "@sproutsocial/seeds-react-switch": "^1.2.32",
-    "@sproutsocial/seeds-react-system-props": "^3.0.2",
-    "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-token-input": "^1.4.38",
+    "@sproutsocial/seeds-react-box": "^1.1.21",
+    "@sproutsocial/seeds-react-button": "^2.2.1",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.41",
+    "@sproutsocial/seeds-react-icon": "^2.4.0",
+    "@sproutsocial/seeds-react-input": "^1.5.26",
+    "@sproutsocial/seeds-react-label": "^1.0.22",
+    "@sproutsocial/seeds-react-popout": "^2.5.9",
+    "@sproutsocial/seeds-react-radio": "^1.3.22",
+    "@sproutsocial/seeds-react-switch": "^1.2.39",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-token-input": "^1.4.48",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@base-ui/react": "^1.3.0",
     "@tanstack/react-virtual": "^3.13.12",
@@ -57,7 +57,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.20",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.27",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v3/ActionMenuStyles.tsx

@@ -9,16 +9,21 @@ export const ActionMenuPositioner = styled(Menu.Positioner)`
   z-index: 7;
 `;
 
-export const ActionMenuPopup = styled(Menu.Popup)`
+// 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(--base-ui-available-height, 400px), 400px);
+  max-height: min(var(--available-height, 400px), 400px);
   overflow-y: auto;
-  padding: ${({ theme }) => theme.space[200]};
+  padding: ${({ theme }) => theme.space[300]};
 
   &[data-open] {
     animation: action-menu-popup-in 120ms ease-out;
@@ -56,18 +61,14 @@ export const ActionMenuGroup = styled(Menu.Group)`
 `;
 
 export const ActionMenuGroupLabel = styled(Menu.GroupLabel)`
-  padding: ${({ theme }) =>
-    `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  padding: ${({ theme }) => `${theme.space[300]}`};
   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};
+  color: ${({ theme }) => theme.colors.text.body};
 `;
 
 export const ActionMenuSeparator = styled(Menu.Separator)`
   height: 1px;
-  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  margin: ${({ theme }) => `${theme.space[300]} -${theme.space[300]}`};
   background: ${({ theme }) => theme.colors.container.border.base};
 `;
 

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,6 +1,15 @@
 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";
+
+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 }) =>
@@ -16,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;
@@ -51,6 +62,8 @@ export const SelectTrigger = styled(Select.Trigger)`
     opacity: 0.4;
     cursor: not-allowed;
   }
+
+  ${({ $isInvalid }) => $isInvalid && invalidStyles}
 `;
 
 export const SelectValue = styled(Select.Value)`
@@ -97,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);
+  }
+`;

package/src/v3/MultiCombobox.stories.tsx

@@ -1,6 +1,12 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
+import { Button } from "@sproutsocial/seeds-react-button";
+import {
+  ModalV2,
+  ModalBody,
+  ModalFooter,
+} from "@sproutsocial/seeds-react-modal";
 import { MultiCombobox } from "./MultiCombobox";
 import {
   books,
@@ -301,6 +307,28 @@ export const MaxTokens: Story = {
   ),
 };
 
+export const LargeBookSetWithMaxTokens: Story = {
+  name: "Large book set with max tokens",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            isVirtualized
+            selectAll
+            maxTokens={5}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Loading: Story = {
   name: "Loading",
   render: () => (
@@ -472,3 +500,115 @@ export const Creatable: Story = {
     );
   },
 };
+
+// Story to help visualize what the combobox component looks like when it's invalid within a FormField component
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField
+        label="Pick books"
+        isInvalid
+        error="Please pick at least one book."
+      >
+        {({ id, isInvalid }) => (
+          <MultiCombobox
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+// Story to help visualize what the combobox component looks like when it's required within a FormField component
+export const Required: Story = {
+  name: "Required",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books" required>
+        {({ id, required }) => (
+          <MultiCombobox
+            id={id}
+            required={required}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const LargeBookSetWithMaxTokensInModal: Story = {
+  name: "Large book set with max tokens (in modal)",
+  render: () => (
+    <ModalV2
+      title="Pick some books"
+      modalTrigger={<Button appearance="primary">Open Modal</Button>}
+      closeButtonAriaLabel="Close"
+    >
+      <ModalBody>
+        <div style={{ width: "300px" }}>
+          <FormField label="Pick books">
+            {({ id }) => (
+              <MultiCombobox
+                id={id}
+                data={largeBookSet}
+                itemToString={itemToString}
+                renderItem={renderItem}
+                placeholder="Search books..."
+                isVirtualized
+                selectAll
+                maxTokens={5}
+              />
+            )}
+          </FormField>
+        </div>
+      </ModalBody>
+      <ModalFooter cancelButton={<Button>Cancel</Button>} />
+    </ModalV2>
+  ),
+};
+
+// Verifies the a11y fix for Escape key containment. Open the modal, open the
+// combobox dropdown, then press Escape: the dropdown should close and focus
+// should return to the input — the modal should stay open. Pressing Escape
+// again (with the dropdown closed) should close the modal.
+export const EscapeKeyInModal: Story = {
+  name: "Escape Key in Modal (a11y)",
+  render: () => (
+    <ModalV2
+      title="Pick some books"
+      modalTrigger={<Button appearance="primary">Open Modal</Button>}
+      closeButtonAriaLabel="Close"
+    >
+      <ModalBody>
+        <div style={{ width: "300px", padding: "16px 0" }}>
+          <FormField label="Pick books">
+            {({ id }) => (
+              <MultiCombobox
+                id={id}
+                data={books}
+                itemToString={itemToString}
+                placeholder="Search books..."
+              />
+            )}
+          </FormField>
+          <p style={{ marginTop: 16, fontSize: 14 }}>
+            <strong>To verify:</strong> open the combobox, press{" "}
+            <kbd>Escape</kbd>. The dropdown should close and focus should return
+            to the input. The modal should remain open. Press <kbd>Escape</kbd>{" "}
+            again to close the modal.
+          </p>
+        </div>
+      </ModalBody>
+      <ModalFooter cancelButton={<Button>Cancel</Button>} />
+    </ModalV2>
+  ),
+};