@sproutsocial/seeds-react-menu 1.11.2 → 1.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/v3/Common/ComboboxItem.tsx

@@ -11,6 +11,7 @@ interface ComboboxItemProps<T> {
   value: T;
   itemId: string;
   label: string;
+  disabled?: boolean;
   inputType?: "icon" | "radio" | "checkbox" | "none";
   renderItem?: () => React.ReactNode;
   index?: number;
@@ -23,6 +24,7 @@ function ComboboxItemInner<T>(
     value,
     itemId,
     label,
+    disabled,
     inputType = "icon",
     renderItem,
     index,
@@ -38,6 +40,7 @@ function ComboboxItemInner<T>(
       data-index={dataIndex}
       style={style}
       ref={ref}
+      disabled={disabled}
       data-qa-menu-item={label}
     >
       {inputType === "radio" ? (

package/src/v3/Common/SelectItem.tsx

@@ -57,6 +57,7 @@ function CheckIcon() {
 interface SelectItemProps {
   value: string | null;
   label: string;
+  disabled?: boolean;
   inputType?: "icon" | "radio" | "checkbox" | "none";
   renderItem?: () => React.ReactNode;
   hidden?: boolean;
@@ -65,6 +66,7 @@ interface SelectItemProps {
 export default function SelectItem({
   value,
   label,
+  disabled,
   inputType = "icon",
   renderItem,
   hidden,
@@ -72,6 +74,7 @@ export default function SelectItem({
   return (
     <StyledItem
       value={value}
+      disabled={disabled}
       style={hidden ? { display: "none" } : undefined}
       data-qa-menu-item={label}
     >

package/src/v3/Common/SelectStyles.tsx

@@ -6,6 +6,7 @@ export const Field = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
+  width: 100%;
 `;
 
 export const SelectLabel = styled(Select.Label)`

package/src/v3/Common/VirtualizedComboboxList.tsx

@@ -8,6 +8,7 @@ import {
   ComboboxSelectAllItem,
 } from "./ComboboxStyles";
 import type { DataWithId } from "./types";
+import { isPlaceholderSentinel } from "./sentinels";
 
 export const ITEM_HEIGHT = 32;
 
@@ -37,6 +38,10 @@ interface VirtualizedComboboxListProps<T extends DataWithId> {
   > | null>;
   value: T | T[] | null;
   groups: Array<{ value: string; items: T[] }> | null;
+  // `data` contains only real items (no sentinels). Sentinel rows (placeholder,
+  // group headers, select-all) come exclusively from `filteredItems` via
+  // Combobox.useFilteredItems. This means `data.length` is the correct count
+  // of selectable items for select-all logic.
   data: T[];
   itemToString: (item: T) => string;
   inputType: "icon" | "radio" | "checkbox" | "none";
@@ -109,7 +114,7 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
       >
         {virtualizer.getVirtualItems().map((virtualItem) => {
           const row = filteredItems[virtualItem.index];
-          if (!row) return null;
+          if (row == null) return null;
 
           const baseStyle: React.CSSProperties = {
             position: "absolute",
@@ -120,6 +125,22 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
             boxSizing: "border-box",
           };
 
+          if (isPlaceholderSentinel(row)) {
+            return (
+              <ComboboxItem
+                key="placeholder"
+                index={virtualItem.index}
+                data-index={virtualItem.index}
+                value={row as unknown as T}
+                itemId="placeholder"
+                label={row.label}
+                inputType={inputType}
+                style={baseStyle}
+                ref={virtualizer.measureElement}
+              />
+            );
+          }
+
           if (isSelectAllSentinel(row)) {
             const selectedCount = selectedArray.length;
             const totalCount = data.length;
@@ -185,6 +206,7 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
               value={item}
               itemId={String(item.id)}
               label={itemToString(item)}
+              disabled={item.disabled}
               inputType={inputType}
               renderItem={
                 renderItem ? () => renderItem(item) : () => itemToString(item)

package/src/v3/Common/sentinels.ts

@@ -0,0 +1,17 @@
+// ─── Shared sentinel types & predicates ────────────────────────────────────
+// Sentinels are non-data rows injected into virtualized lists for special UI
+// items (placeholder, group headers, select-all). They carry no `.id` field
+// and must never be counted toward real data totals.
+
+export interface PlaceholderSentinel {
+  __placeholder: true;
+  label: string;
+}
+
+export function makePlaceholderSentinel(label: string): PlaceholderSentinel {
+  return { __placeholder: true, label };
+}
+
+export function isPlaceholderSentinel(v: unknown): v is PlaceholderSentinel {
+  return typeof v === "object" && v !== null && "__placeholder" in v;
+}

package/src/v3/Common/types.ts

@@ -1,3 +1,4 @@
 export interface DataWithId {
   id: string | number;
+  disabled?: boolean;
 }

package/src/v3/MultiCombobox.stories.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { MultiCombobox } from "./MultiCombobox";
-import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof MultiCombobox> = {
   title: "Really Under Development/V3/Multi Combobox",
@@ -135,6 +141,24 @@ export const Controlled: Story = {
   },
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const SelectableHeadings: Story = {
   name: "Selectable headings",
   render: () => (

package/src/v3/MultiCombobox.tsx

@@ -343,6 +343,7 @@ export function MultiCombobox<T extends DataWithId>(
         value={item}
         itemId={String(item.id)}
         label={itemToString(item)}
+        disabled={item.disabled}
         inputType={inputType}
         renderItem={
           renderItem ? () => renderItem(item) : () => itemToString(item)
@@ -525,6 +526,7 @@ export function MultiCombobox<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -545,6 +547,7 @@ export function MultiCombobox<T extends DataWithId>(
                       value={item}
                       itemId={String(item.id)}
                       label={itemToString(item)}
+                      disabled={item.disabled}
                       inputType={inputType}
                       renderItem={
                         renderItem

package/src/v3/MultiSearchableSelect.stories.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { MultiSearchableSelect } from "./MultiSearchableSelect";
-import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof MultiSearchableSelect> = {
   title: "Really Under Development/V3/Multi Searchable Select",
@@ -193,6 +199,25 @@ export const CustomRenderSelections: Story = {
   ),
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSearchableSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select books"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const SelectableHeadings: Story = {
   name: "Selectable headings",
   render: () => (

package/src/v3/MultiSearchableSelect.tsx

@@ -342,6 +342,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
         value={item}
         itemId={String(item.id)}
         label={itemToString(item)}
+        disabled={item.disabled}
         inputType={inputType}
         renderItem={
           renderItem ? () => renderItem(item) : () => itemToString(item)
@@ -508,6 +509,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -528,6 +530,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
                       value={item}
                       itemId={String(item.id)}
                       label={itemToString(item)}
+                      disabled={item.disabled}
                       inputType={inputType}
                       renderItem={
                         renderItem

package/src/v3/MultiSelect.stories.tsx

@@ -4,7 +4,12 @@ import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { MultiSelect } from "./MultiSelect";
 import SelectItem from "./Common/SelectItem";
 import SelectGroup from "./Common/SelectGroup";
-import { books, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof MultiSelect> = {
   title: "Really Under Development/V3/Multi Select",
@@ -223,6 +228,24 @@ export const CustomSelection: Story = {
 //   ),
 // };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const RemoveSelectedItems: Story = {
   name: "Remove selected items",
   render: () => (

package/src/v3/MultiSelect.tsx

@@ -238,6 +238,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
                               key={item.id}
                               value={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               hidden={
                                 removeSelectedItems &&
@@ -257,6 +258,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
                         key={item.id}
                         value={String(item.id)}
                         label={itemToString(item)}
+                        disabled={item.disabled}
                         inputType={inputType}
                         hidden={
                           removeSelectedItems && value.includes(String(item.id))

package/src/v3/SingleCombobox.stories.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { SingleCombobox } from "./SingleCombobox";
-import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof SingleCombobox> = {
   title: "Really Under Development/V3/Single Combobox",
@@ -148,6 +154,24 @@ export const Controlled: Story = {
   },
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleCombobox
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Virtualized: Story = {
   name: "Virtualized",
   render: () => (

package/src/v3/SingleCombobox.tsx

@@ -267,6 +267,7 @@ export function SingleCombobox<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -287,6 +288,7 @@ export function SingleCombobox<T extends DataWithId>(
                       value={item}
                       itemId={String(item.id)}
                       label={itemToString(item)}
+                      disabled={item.disabled}
                       inputType={inputType}
                       renderItem={
                         renderItem

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { SingleSearchableSelect } from "./SingleSearchableSelect";
-import { books, largeBookSet, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  largeBookSet,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof SingleSearchableSelect> = {
   title: "Really Under Development/V3/Single Searchable Select",
@@ -163,6 +169,66 @@ export const CustomSelection: Story = {
   ),
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const IncludePlaceholderItem: Story = {
+  name: "Include placeholder item",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            includePlaceholderItem
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const IncludePlaceholderItemVirtualized: Story = {
+  name: "Include placeholder item (virtualized)",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSearchableSelect
+            id={id}
+            data={largeBookSet}
+            itemToString={itemToString}
+            placeholder="Select a book"
+            searchPlaceholder="Search books..."
+            includePlaceholderItem
+            isVirtualized
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Virtualized: Story = {
   name: "Virtualized",
   render: () => (

package/src/v3/SingleSearchableSelect.tsx

@@ -6,6 +6,11 @@ import ComboboxItem from "./Common/ComboboxItem";
 import VirtualizedComboboxList from "./Common/VirtualizedComboboxList";
 import type { DataWithId } from "./Common/types";
 import { groupItems } from "./Common/groupItems";
+import type { PlaceholderSentinel } from "./Common/sentinels";
+import {
+  makePlaceholderSentinel,
+  isPlaceholderSentinel,
+} from "./Common/sentinels";
 import { Field } from "./Common/SelectStyles";
 import {
   ComboboxGroup,
@@ -29,6 +34,7 @@ import { StyledChevron, ChevronIcon } from "./Common/SelectIcons";
 interface SingleSearchableSelectBaseProps {
   id?: string;
   placeholder?: string;
+  includePlaceholderItem?: boolean;
   searchPlaceholder?: string;
   emptyText?: string;
   isLoading?: boolean;
@@ -92,6 +98,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
   const {
     id,
     placeholder = "Select...",
+    includePlaceholderItem,
     searchPlaceholder = "Search...",
     emptyText = "No results found.",
     isLoading = false,
@@ -162,10 +169,14 @@ export function SingleSearchableSelect<T extends DataWithId>(
     ? idToItem(selectedItemId as T["id"] | null)
     : internalValue;
 
-  function handleValueChange(newItem: T | null) {
-    if (!isControlled) setInternalValue(newItem);
+  type ItemOrSentinel = T | PlaceholderSentinel;
+
+  function handleValueChange(newItem: ItemOrSentinel | null) {
+    const realItem =
+      newItem == null || isPlaceholderSentinel(newItem) ? null : newItem;
+    if (!isControlled) setInternalValue(realItem);
     if (onSelectedItemIdChange) {
-      onSelectedItemIdChange(newItem ? newItem.id : null);
+      onSelectedItemIdChange(realItem ? realItem.id : null);
     }
   }
 
@@ -181,11 +192,22 @@ export function SingleSearchableSelect<T extends DataWithId>(
         id={id}
         value={value}
         disabled={props.disabled}
-        onValueChange={handleValueChange}
-        itemToStringLabel={itemToString}
-        isItemEqualToValue={(a, b) => a != null && b != null && a.id === b.id}
+        onValueChange={handleValueChange as (item: T | null) => void}
+        itemToStringLabel={(item: T | null) =>
+          isPlaceholderSentinel(item) ? item.label : itemToString(item)
+        }
+        isItemEqualToValue={(a, b) => {
+          if (isPlaceholderSentinel(a) && isPlaceholderSentinel(b)) return true;
+          if (isPlaceholderSentinel(a)) return b == null;
+          if (isPlaceholderSentinel(b)) return a == null;
+          return a != null && b != null && a.id === b.id;
+        }}
         items={
-          isVirtualized ? data : groups ?? (isChildrenMode ? undefined : data)
+          isVirtualized
+            ? includePlaceholderItem
+              ? [makePlaceholderSentinel(placeholder) as unknown as T, ...data]
+              : data
+            : groups ?? (isChildrenMode ? undefined : data)
         }
         virtualized={isVirtualized}
         open={open}
@@ -218,7 +240,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
                 ? renderSelection
                   ? renderSelection(value)
                   : itemToString(value)
-                : null}
+                : placeholder}
             </Combobox.Value>
           </SearchableSelectPlaceholder>
           <SearchableSelectTriggerIcon>
@@ -284,6 +306,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
                               value={item}
                               itemId={String(item.id)}
                               label={itemToString(item)}
+                              disabled={item.disabled}
                               inputType={inputType}
                               renderItem={
                                 renderItem
@@ -298,18 +321,34 @@ export function SingleSearchableSelect<T extends DataWithId>(
                     </React.Fragment>
                   )
                 ) : (
-                  (item: T) => (
-                    <ComboboxItem
-                      key={item.id}
-                      value={item}
-                      itemId={String(item.id)}
-                      label={itemToString(item)}
-                      inputType={inputType}
-                      renderItem={
-                        renderItem ? () => renderItem(item) : undefined
-                      }
-                    />
-                  )
+                  <>
+                    {includePlaceholderItem && (
+                      <ComboboxItem
+                        key="placeholder"
+                        value={
+                          makePlaceholderSentinel(placeholder) as unknown as T
+                        }
+                        itemId="placeholder"
+                        label={placeholder}
+                        inputType={inputType}
+                      />
+                    )}
+                    <Combobox.Collection>
+                      {(item: T) => (
+                        <ComboboxItem
+                          key={item.id}
+                          value={item}
+                          itemId={String(item.id)}
+                          label={itemToString(item)}
+                          disabled={item.disabled}
+                          inputType={inputType}
+                          renderItem={
+                            renderItem ? () => renderItem(item) : undefined
+                          }
+                        />
+                      )}
+                    </Combobox.Collection>
+                  </>
                 )}
               </SearchableSelectList>
             </SearchableSelectPopup>

package/src/v3/SingleSelect.stories.tsx

@@ -4,7 +4,12 @@ import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { SingleSelect } from "./SingleSelect";
 import SelectItem from "./Common/SelectItem";
 import SelectGroup from "./Common/SelectGroup";
-import { books, itemToString, renderItem } from "./storyData";
+import {
+  books,
+  booksWithDisabled,
+  itemToString,
+  renderItem,
+} from "./storyData";
 
 const meta: Meta<typeof SingleSelect> = {
   title: "Really Under Development/V3/Single Select",
@@ -217,6 +222,24 @@ export const CustomSelection: Story = {
   ),
 };
 
+export const DisabledItems: Story = {
+  name: "Disabled items",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={id}
+            data={booksWithDisabled}
+            itemToString={itemToString}
+            placeholder="Select a book"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Children: Story = {
   name: "Children API",
   render: () => (

package/src/v3/SingleSelect.tsx

@@ -199,6 +199,7 @@ export function SingleSelect<T extends DataWithId>(
                             key={item.id}
                             value={String(item.id)}
                             label={itemToString(item)}
+                            disabled={item.disabled}
                             inputType={inputType}
                             renderItem={
                               renderItem
@@ -212,7 +213,6 @@ export function SingleSelect<T extends DataWithId>(
                     </React.Fragment>
                   ))
                 ) : (
-                  // TODO: need to add a placeholder item when includePlaceholderItem is true
                   <>
                     {includePlaceholderItem && (
                       <SelectItem
@@ -226,6 +226,7 @@ export function SingleSelect<T extends DataWithId>(
                         key={item.id}
                         value={String(item.id)}
                         label={itemToString(item)}
+                        disabled={item.disabled}
                         inputType={inputType}
                         renderItem={
                           renderItem