@sproutsocial/seeds-react-menu 1.13.0 → 1.15.10

package/src/v3/MultiCombobox.tsx

@@ -3,6 +3,7 @@ import { Combobox } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import VirtualizedComboboxList from "./Common/VirtualizedComboboxList";
 import { useSeedsPortalContainer } from "./SeedsPortal";
+import { useSuppressEscapeClear } from "./Common/useSuppressEscapeClear";
 import ComboboxItem from "./Common/ComboboxItem";
 import type { DataWithId } from "./Common/types";
 import { groupItems } from "./Common/groupItems";
@@ -74,6 +75,8 @@ interface MultiComboboxBaseProps {
   inputValue?: string;
   onInputValueChange?: (value: string) => void;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
   fullWidth?: boolean;
 }
 
@@ -145,6 +148,7 @@ export function MultiCombobox<T extends DataWithId>(
     fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -213,6 +217,9 @@ export function MultiCombobox<T extends DataWithId>(
   const virtualizerRef = React.useRef<ReturnType<
     typeof useVirtualizer<HTMLDivElement, Element>
   > | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onInputKeyDownCapture = useSuppressEscapeClear(open);
 
   const isControlled = selectedItemIds !== undefined;
 
@@ -368,6 +375,7 @@ export function MultiCombobox<T extends DataWithId>(
     e.preventDefault();
     e.stopPropagation();
     setSelectedItems(value.filter((v) => v.id !== item.id));
+    inputRef.current?.focus();
   }
 
   // ─── Render sentinel item ─────────────────────────────────────────────────
@@ -492,7 +500,10 @@ export function MultiCombobox<T extends DataWithId>(
         open={open}
         disabled={props.disabled}
         onOpenChange={(nextOpen, eventDetails) => {
-          if (!nextOpen && eventDetails.reason === "item-press") return;
+          if (!nextOpen && eventDetails.reason === "item-press") {
+            eventDetails.cancel();
+            return;
+          }
           setOpen(nextOpen);
         }}
         filter={
@@ -537,13 +548,14 @@ export function MultiCombobox<T extends DataWithId>(
                 if (!item || !virt) return;
                 const isStart = index === 0;
                 const isEnd = index === virt.options.count - 1;
-                if (
-                  reason === "none" ||
-                  (reason === "keyboard" && (isStart || isEnd))
-                ) {
+                // Only handle keyboard wrap-around: when navigation loops from
+                // the last item to the first (or vice versa), the wrapped item
+                // is outside the virtualized window and standard scroll-into-
+                // view can't find it.
+                if (reason === "keyboard" && (isStart || isEnd)) {
                   queueMicrotask(() => {
                     virt.scrollToIndex(index, {
-                      align: isEnd ? "start" : "end",
+                      align: isStart ? "start" : "end",
                     });
                   });
                 }
@@ -586,7 +598,10 @@ export function MultiCombobox<T extends DataWithId>(
         }}
         items={rootItems}
       >
-        <ComboboxTokenInputGroup>
+        <ComboboxTokenInputGroup
+          $isInvalid={isInvalid}
+          onKeyDownCapture={onInputKeyDownCapture}
+        >
           <ComboboxToken>
             {renderSelection
               ? renderSelection(value)
@@ -616,9 +631,12 @@ export function MultiCombobox<T extends DataWithId>(
                   );
                 })()}
             <ComboboxTokenInput
+              ref={inputRef}
               id={id}
               placeholder={value.length > 0 ? "" : placeholder}
               aria-describedby={ariaDescribedBy}
+              aria-invalid={isInvalid || undefined}
+              aria-required={props.required || undefined}
             />
             <ComboboxActionButtons>
               <ComboboxClear aria-label="Clear all">

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -37,6 +37,30 @@ export const Basic: Story = {
   ),
 };
 
+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 }) => (
+          <MultiSearchableSelect
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const CustomRenderItem: Story = {
   name: "Custom render item",
   render: () => (

package/src/v3/MultiSearchableSelect.tsx

@@ -80,6 +80,8 @@ interface MultiSearchableSelectBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
   fullWidth?: boolean;
 }
 
@@ -149,6 +151,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
     fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -502,13 +505,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
                 if (!item || !virt) return;
                 const isStart = index === 0;
                 const isEnd = index === virt.options.count - 1;
-                if (
-                  reason === "none" ||
-                  (reason === "keyboard" && (isStart || isEnd))
-                ) {
+                if (reason === "keyboard" && (isStart || isEnd)) {
                   queueMicrotask(() => {
                     virt.scrollToIndex(index, {
-                      align: isEnd ? "start" : "end",
+                      align: isStart ? "start" : "end",
                     });
                   });
                 }
@@ -554,6 +554,9 @@ export function MultiSearchableSelect<T extends DataWithId>(
         <SearchableSelectTokenTrigger
           id={id}
           aria-describedby={ariaDescribedBy}
+          aria-invalid={isInvalid || undefined}
+          aria-required={props.required || undefined}
+          $isInvalid={isInvalid}
         >
           {renderSelection ? (
             renderSelection(value)

package/src/v3/MultiSelect.stories.tsx

@@ -37,6 +37,29 @@ export const Basic: Story = {
   ),
 };
 
+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 }) => (
+          <MultiSelect
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const CustomRenderItem: Story = {
   name: "Custom render item",
   render: () => (

package/src/v3/MultiSelect.tsx

@@ -44,6 +44,8 @@ interface MultiSelectBaseProps {
   placeholder?: string;
   disabled?: boolean;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
   fullWidth?: boolean;
 }
 
@@ -91,6 +93,7 @@ export type MultiSelectProps<T extends DataWithId> =
 export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
   const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -182,7 +185,12 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
         disabled={props.disabled}
         id={id}
       >
-        <SelectTrigger aria-describedby={ariaDescribedBy}>
+        <SelectTrigger
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={isInvalid || undefined}
+          aria-required={props.required || undefined}
+          $isInvalid={isInvalid}
+        >
           <SelectValue>
             {() => {
               if (renderSelection) return renderSelection(selectedItems);

package/src/v3/SingleCombobox.stories.tsx

@@ -36,6 +36,25 @@ export const Basic: Story = {
   ),
 };
 
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book" isInvalid error="Please pick a book.">
+        {({ id, isInvalid }) => (
+          <SingleCombobox
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const CustomRenderItem: Story = {
   name: "Custom render item",
   render: () => (

package/src/v3/SingleCombobox.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Combobox } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useSeedsPortalContainer } from "./SeedsPortal";
+import { useSuppressEscapeClear } from "./Common/useSuppressEscapeClear";
 import ComboboxItem from "./Common/ComboboxItem";
 import VirtualizedComboboxList from "./Common/VirtualizedComboboxList";
 import type { DataWithId } from "./Common/types";
@@ -32,6 +33,8 @@ interface SingleComboboxBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
   fullWidth?: boolean;
 }
 
@@ -93,6 +96,7 @@ export function SingleCombobox<T extends DataWithId>(
     fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -137,6 +141,8 @@ export function SingleCombobox<T extends DataWithId>(
     typeof useVirtualizer<HTMLDivElement, Element>
   > | null>(null);
 
+  const onInputKeyDownCapture = useSuppressEscapeClear(open);
+
   const isControlled = selectedItemId !== undefined;
 
   const idToItem = React.useCallback(
@@ -193,13 +199,10 @@ export function SingleCombobox<T extends DataWithId>(
                 if (!item || !virt) return;
                 const isStart = index === 0;
                 const isEnd = index === virt.options.count - 1;
-                if (
-                  reason === "none" ||
-                  (reason === "keyboard" && (isStart || isEnd))
-                ) {
+                if (reason === "keyboard" && (isStart || isEnd)) {
                   queueMicrotask(() => {
                     virt.scrollToIndex(index, {
-                      align: isEnd ? "start" : "end",
+                      align: isStart ? "start" : "end",
                     });
                   });
                 }
@@ -207,11 +210,16 @@ export function SingleCombobox<T extends DataWithId>(
             : undefined
         }
       >
-        <ComboboxInputGroup>
+        <ComboboxInputGroup
+          $isInvalid={isInvalid}
+          onKeyDownCapture={onInputKeyDownCapture}
+        >
           <ComboboxInput
             placeholder={placeholder}
             id={id}
             aria-describedby={ariaDescribedBy}
+            aria-invalid={isInvalid || undefined}
+            aria-required={props.required || undefined}
           />
           <ComboboxActionButtons>
             <ComboboxClear aria-label="Clear selection">

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -37,6 +37,26 @@ export const Basic: Story = {
   ),
 };
 
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book" isInvalid error="Please pick a book.">
+        {({ id, isInvalid }) => (
+          <SingleSearchableSelect
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const CustomRenderItem: Story = {
   name: "Custom render item",
   render: () => (

package/src/v3/SingleSearchableSelect.tsx

@@ -42,6 +42,8 @@ interface SingleSearchableSelectBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
   fullWidth?: boolean;
 }
 
@@ -110,6 +112,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
     fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -226,13 +229,10 @@ export function SingleSearchableSelect<T extends DataWithId>(
                 if (!item || !virt) return;
                 const isStart = index === 0;
                 const isEnd = index === virt.options.count - 1;
-                if (
-                  reason === "none" ||
-                  (reason === "keyboard" && (isStart || isEnd))
-                ) {
+                if (reason === "keyboard" && (isStart || isEnd)) {
                   queueMicrotask(() => {
                     virt.scrollToIndex(index, {
-                      align: isEnd ? "start" : "end",
+                      align: isStart ? "start" : "end",
                     });
                   });
                 }
@@ -240,7 +240,13 @@ export function SingleSearchableSelect<T extends DataWithId>(
             : undefined
         }
       >
-        <SearchableSelectTrigger id={id} aria-describedby={ariaDescribedBy}>
+        <SearchableSelectTrigger
+          id={id}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={isInvalid || undefined}
+          aria-required={props.required || undefined}
+          $isInvalid={isInvalid}
+        >
           <SearchableSelectPlaceholder>
             <Combobox.Value placeholder={placeholder}>
               {value

package/src/v3/SingleSelect.stories.tsx

@@ -37,6 +37,25 @@ export const Basic: Story = {
   ),
 };
 
+export const Invalid: Story = {
+  name: "Invalid",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book" isInvalid error="Please pick a book.">
+        {({ id, isInvalid }) => (
+          <SingleSelect
+            id={id}
+            isInvalid={isInvalid}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Empty: Story = {
   name: "Empty",
   render: () => (

package/src/v3/SingleSelect.tsx

@@ -40,6 +40,8 @@ interface SingleSelectBaseProps {
   includePlaceholderItem?: boolean;
   disabled?: boolean;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
   fullWidth?: boolean;
 }
 
@@ -83,6 +85,7 @@ export function SingleSelect<T extends DataWithId>(
 ) {
   const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -169,7 +172,12 @@ export function SingleSelect<T extends DataWithId>(
         onValueChange={handleValueChange}
         id={id}
       >
-        <SelectTrigger aria-describedby={ariaDescribedBy}>
+        <SelectTrigger
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={isInvalid || undefined}
+          aria-required={props.required || undefined}
+          $isInvalid={isInvalid}
+        >
           <StyledValue placeholder={placeholder}>
             {renderSelection && selectedItem
               ? renderSelection(selectedItem)

package/src/v3/__tests__/MenuButton.test.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import { MenuButton } from "../MenuButton";
+import { MenuItem } from "../ActionMenu";
+
+describe("MenuButton", () => {
+  const renderMenuButton = (
+    props: Partial<React.ComponentProps<typeof MenuButton>> = {}
+  ) => {
+    const onMainClick = jest.fn();
+    render(
+      <MenuButton
+        appearance="primary"
+        menuButtonAriaLabel="More actions"
+        onClick={onMainClick}
+        actionMenu={
+          <>
+            <MenuItem onClick={jest.fn()}>Compose</MenuItem>
+            <MenuItem onClick={jest.fn()}>View Messages</MenuItem>
+          </>
+        }
+        {...props}
+      >
+        Open Menu
+      </MenuButton>
+    );
+    return { onMainClick };
+  };
+
+  test("renders the main button with its children", () => {
+    renderMenuButton();
+    expect(
+      screen.getByRole("button", { name: "Open Menu" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders a separate trigger button with an accessible label", () => {
+    renderMenuButton();
+    const trigger = screen.getByRole("button", { name: "More actions" });
+    expect(trigger).toBeInTheDocument();
+    // Two distinct buttons: the main action and the menu trigger.
+    expect(screen.getAllByRole("button")).toHaveLength(2);
+  });
+
+  test("uses a custom trigger aria-label when provided", () => {
+    renderMenuButton({ menuButtonAriaLabel: "Save options" });
+    expect(
+      screen.getByRole("button", { name: "Save options" })
+    ).toBeInTheDocument();
+  });
+
+  test("marks the trigger as open so the chevron can rotate", () => {
+    renderMenuButton();
+    const trigger = screen.getByRole("button", { name: "More actions" });
+    // The chevron rotation is driven purely by the `data-popup-open` attribute
+    // base-ui sets on the trigger while the menu is open (jsdom does not compute
+    // the resulting CSS transform, so assert the driving attribute instead).
+    expect(trigger).not.toHaveAttribute("data-popup-open");
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute("data-popup-open");
+  });
+
+  test("fires the main button onClick without opening the menu", () => {
+    const { onMainClick } = renderMenuButton();
+    fireEvent.click(screen.getByRole("button", { name: "Open Menu" }));
+    expect(onMainClick).toHaveBeenCalledTimes(1);
+    // The menu items live behind the trigger and are not rendered until it opens.
+    expect(screen.queryByText("Compose")).not.toBeInTheDocument();
+  });
+
+  test("does not fire the main onClick when disabled", () => {
+    const { onMainClick } = renderMenuButton({ disabled: true });
+    fireEvent.click(screen.getByRole("button", { name: "Open Menu" }));
+    expect(onMainClick).not.toHaveBeenCalled();
+  });
+});

package/src/v3/index.ts

@@ -6,3 +6,4 @@ export * from "./SingleSearchableSelect";
 export * from "./MultiSearchableSelect";
 export * from "./Common/ComboboxStyles";
 export * from "./ActionMenu";
+export * from "./MenuButton";