@sproutsocial/seeds-react-menu 1.12.3 → 1.15.10

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: () => (
@@ -192,6 +211,23 @@ export const Virtualized: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleCombobox
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Search books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const CustomSearch: Story = {
   name: "Custom search (title + author)",
   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,9 @@ interface SingleComboboxBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
 }
 
 interface SingleComboboxDataBaseProps<T extends DataWithId>
@@ -89,8 +93,10 @@ export function SingleCombobox<T extends DataWithId>(
     placeholder = "Search...",
     emptyText = "No results found.",
     filter,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -135,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(
@@ -168,7 +176,7 @@ export function SingleCombobox<T extends DataWithId>(
   );
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         id={id}
@@ -191,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",
                     });
                   });
                 }
@@ -205,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: () => (
@@ -304,6 +324,24 @@ export const LoadingWithToggle: Story = {
   },
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleSearchableSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select a book"
+          searchPlaceholder="Search books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const CustomSearch: Story = {
   name: "Custom search (title + author)",
   render: () => (

package/src/v3/SingleSearchableSelect.tsx

@@ -42,6 +42,9 @@ interface SingleSearchableSelectBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
 }
 
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
@@ -106,8 +109,10 @@ export function SingleSearchableSelect<T extends DataWithId>(
     isLoading = false,
     loadingText = "Loading...",
     filter,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -190,7 +195,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
   );
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         id={id}
@@ -224,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",
                     });
                   });
                 }
@@ -238,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: () => (
@@ -259,6 +278,23 @@ export const DisabledItems: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select a book"
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const Children: Story = {
   name: "Children API",
   render: () => (

package/src/v3/SingleSelect.tsx

@@ -40,6 +40,9 @@ interface SingleSelectBaseProps {
   includePlaceholderItem?: boolean;
   disabled?: boolean;
   "aria-describedby"?: string;
+  isInvalid?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
 }
 
 interface SingleSelectDataProps<T extends DataWithId>
@@ -80,8 +83,9 @@ export type SingleSelectProps<T extends DataWithId> =
 export function SingleSelect<T extends DataWithId>(
   props: SingleSelectProps<T>
 ) {
-  const { id, placeholder, includePlaceholderItem } = props;
+  const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
+  const isInvalid = props.isInvalid;
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -159,7 +163,7 @@ export function SingleSelect<T extends DataWithId>(
   }
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Select.Root
         items={items}
@@ -168,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

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