@sproutsocial/seeds-react-menu 1.15.10 → 1.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.15.10",
+  "version": "1.16.1",
   "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.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-box": "^1.1.22",
+    "@sproutsocial/seeds-react-button": "^2.2.2",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.42",
+    "@sproutsocial/seeds-react-icon": "^2.4.1",
+    "@sproutsocial/seeds-react-input": "^1.5.27",
+    "@sproutsocial/seeds-react-label": "^1.0.23",
+    "@sproutsocial/seeds-react-popout": "^2.5.10",
+    "@sproutsocial/seeds-react-radio": "^1.3.23",
+    "@sproutsocial/seeds-react-switch": "^1.2.40",
     "@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-theme": "^4.1.1",
+    "@sproutsocial/seeds-react-token-input": "^1.4.49",
     "@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.27",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.28",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v3/Common/ComboboxStyles.tsx

@@ -288,6 +288,12 @@ export const ComboboxGroupHeaderItem = styled(Combobox.Item)`
     background: ${({ theme }) => theme.colors.listItem.background.hover};
     color: ${({ theme }) => theme.colors.text.body};
   }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 `;
 
 export const ComboboxSelectAllItem = styled(Combobox.Item)`

package/src/v3/Common/VirtualizedComboboxList.tsx

@@ -55,6 +55,7 @@ interface VirtualizedComboboxListProps<T extends DataWithId> {
   inputType: "icon" | "radio" | "checkbox" | "none";
   renderItem?: (item: T) => React.ReactNode;
   renderGroupHeading?: (label: string) => React.ReactNode;
+  isGroupHeaderDisabled?: (groupName: string) => boolean;
   renderCreatableItem?: (
     sentinel: CreatableSentinel,
     style: React.CSSProperties,
@@ -73,6 +74,7 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
   inputType,
   renderItem,
   renderGroupHeading,
+  isGroupHeaderDisabled,
   renderCreatableItem,
 }: VirtualizedComboboxListProps<T>) {
   type Row = FlatSentinelRow<T>;
@@ -198,6 +200,7 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
                 index={virtualItem.index}
                 data-index={virtualItem.index}
                 value={row}
+                disabled={isGroupHeaderDisabled?.(row.groupName)}
                 style={baseStyle}
                 ref={virtualizer.measureElement}
               >

package/src/v3/MultiCombobox.stories.tsx

@@ -196,6 +196,28 @@ export const SelectableHeadings: Story = {
   ),
 };
 
+export const DisabledGroupHeadings: Story = {
+  name: "Disabled group headings",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            groupBy={(book) => book.author}
+            selectHeadings
+            isGroupHeaderDisabled={(groupName) => groupName === "Harper Lee"}
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const SelectAll: Story = {
   name: "Select all",
   render: () => (

package/src/v3/MultiCombobox.tsx

@@ -93,6 +93,7 @@ interface MultiComboboxDataProps<T extends DataWithId>
   onSelectedItemIdsChange?: (ids: Array<T["id"]>) => void;
   groupBy?: (item: T) => string;
   renderGroupHeading?: (label: string) => React.ReactNode;
+  isGroupHeaderDisabled?: (groupName: string) => boolean;
   selectHeadings?: boolean;
   selectAll?: boolean | string;
   isVirtualized?: boolean;
@@ -116,6 +117,7 @@ interface MultiComboboxChildrenProps extends MultiComboboxBaseProps {
   inputType?: never;
   groupBy?: never;
   renderGroupHeading?: never;
+  isGroupHeaderDisabled?: never;
   selectHeadings?: never;
   selectAll?: never;
   removeSelectedItems?: never;
@@ -184,6 +186,9 @@ export function MultiCombobox<T extends DataWithId>(
   const renderGroupHeading = isChildrenMode
     ? undefined
     : (props as MultiComboboxDataProps<T>).renderGroupHeading;
+  const isGroupHeaderDisabled = isChildrenMode
+    ? undefined
+    : (props as MultiComboboxDataProps<T>).isGroupHeaderDisabled;
   const selectHeadings = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).selectHeadings ?? false;
@@ -338,6 +343,7 @@ export function MultiCombobox<T extends DataWithId>(
 
     let updated = [...realItems];
     for (const sentinel of groupSentinels) {
+      if (isGroupHeaderDisabled?.(sentinel.groupName)) continue;
       const group = groups?.find((g) => g.value === sentinel.groupName);
       if (!group) continue;
       const allSelected = group.items.every((item) =>
@@ -411,7 +417,11 @@ export function MultiCombobox<T extends DataWithId>(
           ? "all"
           : "partial";
       return (
-        <ComboboxGroupHeaderItem key={`__header-${row.groupName}`} value={row}>
+        <ComboboxGroupHeaderItem
+          key={`__header-${row.groupName}`}
+          value={row}
+          disabled={isGroupHeaderDisabled?.(row.groupName)}
+        >
           <ComboboxGroupHeaderCheckbox
             $state={state}
             id={`__header-${row.groupName}`}
@@ -687,6 +697,7 @@ export function MultiCombobox<T extends DataWithId>(
                     inputType={inputType}
                     renderItem={renderItem}
                     renderGroupHeading={renderGroupHeading}
+                    isGroupHeaderDisabled={isGroupHeaderDisabled}
                     renderCreatableItem={
                       creatableProp
                         ? (sentinel, style, index, measureRef) =>

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"]);
+  });
+});