@sproutsocial/seeds-react-menu 1.13.0 → 1.16.0

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/__tests__/MultiCombobox.test.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@sproutsocial/seeds-react-testing-library";
+import { MultiCombobox } from "../MultiCombobox";
+import { books, itemToString, type Book } from "../storyData";
+
+describe("MultiCombobox — disabled group headings", () => {
+  const renderCombobox = (
+    props: {
+      onSelectedItemIdsChange?: (ids: Array<Book["id"]>) => void;
+      isGroupHeaderDisabled?: (groupName: string) => boolean;
+    } = {}
+  ) =>
+    render(
+      <MultiCombobox
+        data={books}
+        itemToString={itemToString}
+        placeholder="Search books..."
+        groupBy={(book) => book.author}
+        selectHeadings
+        {...props}
+      />
+    );
+
+  const openPopup = () => {
+    fireEvent.click(screen.getByRole("button", { name: "Open popup" }));
+  };
+
+  // The group header row is the option whose accessible text is the group name.
+  const getGroupHeader = (groupName: string) =>
+    screen.getByText(groupName).closest('[role="option"]') as HTMLElement;
+
+  test("renders a header row for each group", () => {
+    renderCombobox();
+    openPopup();
+    expect(getGroupHeader("Harper Lee")).toBeInTheDocument();
+    expect(getGroupHeader("Lev Tolstoy")).toBeInTheDocument();
+  });
+
+  test("marks a disabled group's header with data-disabled", () => {
+    renderCombobox({
+      isGroupHeaderDisabled: (groupName) => groupName === "Harper Lee",
+    });
+    openPopup();
+    expect(getGroupHeader("Harper Lee")).toHaveAttribute("data-disabled");
+    expect(getGroupHeader("Lev Tolstoy")).not.toHaveAttribute("data-disabled");
+  });
+
+  test("clicking a disabled header does not select the group's items", () => {
+    const onSelectedItemIdsChange = jest.fn();
+    renderCombobox({
+      onSelectedItemIdsChange,
+      isGroupHeaderDisabled: (groupName) => groupName === "Harper Lee",
+    });
+    openPopup();
+    fireEvent.click(getGroupHeader("Harper Lee"));
+    expect(onSelectedItemIdsChange).not.toHaveBeenCalled();
+  });
+
+  test("clicking an enabled header still selects the whole group", () => {
+    const onSelectedItemIdsChange = jest.fn();
+    renderCombobox({
+      onSelectedItemIdsChange,
+      isGroupHeaderDisabled: (groupName) => groupName === "Harper Lee",
+    });
+    openPopup();
+    fireEvent.click(getGroupHeader("Lev Tolstoy"));
+    // Lev Tolstoy has two books: War and Peace + Anna Karenina.
+    expect(onSelectedItemIdsChange).toHaveBeenCalledWith(
+      expect.arrayContaining(["book-2", "book-9"])
+    );
+  });
+
+  test("items inside a disabled group remain individually selectable", () => {
+    const onSelectedItemIdsChange = jest.fn();
+    renderCombobox({
+      onSelectedItemIdsChange,
+      isGroupHeaderDisabled: (groupName) => groupName === "Harper Lee",
+    });
+    openPopup();
+    const option = screen
+      .getByText("To Kill a Mockingbird")
+      .closest('[role="option"]') as HTMLElement;
+    fireEvent.click(within(option).getByText("To Kill a Mockingbird"));
+    expect(onSelectedItemIdsChange).toHaveBeenCalledWith(["book-1"]);
+  });
+});

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";