@sproutsocial/seeds-react-menu 1.11.3 → 1.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -37,17 +37,17 @@
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
     "@sproutsocial/seeds-react-box": "^1.1.16",
-    "@sproutsocial/seeds-react-button": "^2.0.1",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.29",
-    "@sproutsocial/seeds-react-icon": "^2.3.3",
-    "@sproutsocial/seeds-react-input": "^1.5.12",
+    "@sproutsocial/seeds-react-button": "^2.0.2",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.30",
+    "@sproutsocial/seeds-react-icon": "^2.3.4",
+    "@sproutsocial/seeds-react-input": "^1.5.13",
     "@sproutsocial/seeds-react-label": "^1.0.16",
-    "@sproutsocial/seeds-react-popout": "^2.4.34",
+    "@sproutsocial/seeds-react-popout": "^2.4.35",
     "@sproutsocial/seeds-react-radio": "^1.3.16",
-    "@sproutsocial/seeds-react-switch": "^1.2.28",
+    "@sproutsocial/seeds-react-switch": "^1.2.29",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
     "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-token-input": "^1.4.34",
+    "@sproutsocial/seeds-react-token-input": "^1.4.35",
     "@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.16",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.17",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

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/SingleSearchableSelect.stories.tsx

@@ -208,6 +208,27 @@ export const IncludePlaceholderItem: Story = {
   ),
 };
 
+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,
@@ -164,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);
     }
   }
 
@@ -183,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}
@@ -220,7 +240,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
                 ? renderSelection
                   ? renderSelection(value)
                   : itemToString(value)
-                : null}
+                : placeholder}
             </Combobox.Value>
           </SearchableSelectPlaceholder>
           <SearchableSelectTriggerIcon>
@@ -305,9 +325,12 @@ export function SingleSearchableSelect<T extends DataWithId>(
                     {includePlaceholderItem && (
                       <ComboboxItem
                         key="placeholder"
-                        value={null as unknown as T}
+                        value={
+                          makePlaceholderSentinel(placeholder) as unknown as T
+                        }
                         itemId="placeholder"
                         label={placeholder}
+                        inputType={inputType}
                       />
                     )}
                     <Combobox.Collection>