@sproutsocial/seeds-react-menu 1.12.0 → 1.12.2

package/src/v3/MultiCombobox.tsx

@@ -6,6 +6,11 @@ import { useSeedsPortalContainer } from "./SeedsPortal";
 import ComboboxItem from "./Common/ComboboxItem";
 import type { DataWithId } from "./Common/types";
 import { groupItems } from "./Common/groupItems";
+import {
+  isCreatableSentinel,
+  makeCreatableSentinel,
+  type CreatableSentinel,
+} from "./Common/sentinels";
 import { Field } from "./Common/SelectStyles";
 import {
   ComboboxTokenInputGroup,
@@ -66,6 +71,9 @@ interface MultiComboboxBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  inputValue?: string;
+  onInputValueChange?: (value: string) => void;
+  "aria-describedby"?: string;
 }
 
 interface MultiComboboxDataProps<T extends DataWithId>
@@ -82,10 +90,12 @@ interface MultiComboboxDataProps<T extends DataWithId>
   groupBy?: (item: T) => string;
   renderGroupHeading?: (label: string) => React.ReactNode;
   selectHeadings?: boolean;
-  selectAll?: boolean;
+  selectAll?: boolean | string;
   isVirtualized?: boolean;
   removeSelectedItems?: boolean;
   maxTokens?: number;
+  creatable?: boolean;
+  onCreate?: (value: string) => T;
   children?: never;
 }
 
@@ -105,6 +115,8 @@ interface MultiComboboxChildrenProps extends MultiComboboxBaseProps {
   selectHeadings?: never;
   selectAll?: never;
   removeSelectedItems?: never;
+  creatable?: never;
+  onCreate?: never;
 }
 
 export type MultiComboboxProps<T extends DataWithId> =
@@ -127,7 +139,10 @@ export function MultiCombobox<T extends DataWithId>(
     isLoading = false,
     loadingText = "Loading...",
     filter,
+    inputValue,
+    onInputValueChange,
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -166,12 +181,21 @@ export function MultiCombobox<T extends DataWithId>(
   const selectHeadings = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).selectHeadings ?? false;
-  const selectAll = isChildrenMode
+  const selectAllProp = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).selectAll ?? false;
+  const selectAll = Boolean(selectAllProp);
+  const selectAllLabel =
+    typeof selectAllProp === "string" ? selectAllProp : "Select all";
   const isVirtualized = isChildrenMode
     ? false
     : (props as MultiComboboxDataProps<T>).isVirtualized ?? false;
+  const creatableProp = isChildrenMode
+    ? false
+    : (props as MultiComboboxDataProps<T>).creatable ?? false;
+  const onCreateProp = isChildrenMode
+    ? undefined
+    : (props as MultiComboboxDataProps<T>).onCreate;
   const children = isChildrenMode
     ? (props as MultiComboboxChildrenProps).children
     : undefined;
@@ -182,6 +206,8 @@ export function MultiCombobox<T extends DataWithId>(
 
   const { containerRef, portalContainer } = useSeedsPortalContainer();
   const [open, setOpen] = React.useState(false);
+  const [internalInputValue, setInternalInputValue] = React.useState("");
+  const skipNextInputChangeRef = React.useRef(false);
   const virtualizerRef = React.useRef<ReturnType<
     typeof useVirtualizer<HTMLDivElement, Element>
   > | null>(null);
@@ -219,22 +245,45 @@ export function MultiCombobox<T extends DataWithId>(
     [visibleData, groupBy]
   );
 
+  const currentInputValue = inputValue ?? internalInputValue;
+
+  const creatableSentinel = React.useMemo<CreatableSentinel | null>(() => {
+    if (!creatableProp) return null;
+    const trimmed = currentInputValue.trim();
+    if (!trimmed) return null;
+    const lowered = trimmed.toLocaleLowerCase();
+    const exactExists = data.some(
+      (d) => itemToString(d).trim().toLocaleLowerCase() === lowered
+    );
+    if (exactExists) return null;
+    return makeCreatableSentinel(trimmed);
+  }, [creatableProp, currentInputValue, data, itemToString]);
+
   // ─── Sentinel flat list ───────────────────────────────────────────────────
   // Used when selectHeadings or selectAll. selectAll implies selectHeadings —
   // group headers are always selectable when the list is flattened.
 
-  type FlatRow = T | GroupHeaderSentinel | SelectAllSentinel;
+  type FlatRow =
+    | T
+    | GroupHeaderSentinel
+    | SelectAllSentinel
+    | CreatableSentinel;
 
   const flatItems = React.useMemo<FlatRow[] | null>(() => {
-    if (!groups || (!selectHeadings && !selectAll)) return null;
+    if (!selectHeadings && !selectAll) return null;
+    if (!groups && !selectAll) return null;
     const rows: FlatRow[] = [];
     if (selectAll) rows.push(SELECT_ALL_SENTINEL);
-    for (const group of groups) {
-      rows.push(makeGroupHeaderSentinel(group.value));
-      rows.push(...group.items);
+    if (groups) {
+      for (const group of groups) {
+        rows.push(makeGroupHeaderSentinel(group.value));
+        rows.push(...group.items);
+      }
+    } else {
+      rows.push(...visibleData);
     }
     return rows;
-  }, [groups, selectHeadings, selectAll]);
+  }, [groups, visibleData, selectHeadings, selectAll]);
 
   function setSelectedItems(items: T[]) {
     if (!isControlled) setInternalValue(items);
@@ -243,6 +292,22 @@ export function MultiCombobox<T extends DataWithId>(
   }
 
   function handleValueChange(next: FlatRow[]) {
+    const creatableClicked = next.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems = next.filter(
+        (v): v is T =>
+          !isGroupHeaderSentinel(v) &&
+          !isSelectAllSentinel(v) &&
+          !isCreatableSentinel(v)
+      );
+      setSelectedItems(newItem ? [...realItems, newItem] : realItems);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      onInputValueChange?.("");
+      return;
+    }
+
     const selectAllClicked = next.filter(isSelectAllSentinel);
     const groupSentinels = next.filter(isGroupHeaderSentinel);
     const realItems = next.filter(
@@ -283,8 +348,18 @@ export function MultiCombobox<T extends DataWithId>(
     setSelectedItems(updated);
   }
 
-  function handleSimpleValueChange(newItems: T[]) {
-    setSelectedItems(newItems);
+  function handleSimpleValueChange(newItems: FlatRow[]) {
+    const creatableClicked = newItems.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems = newItems.filter((v): v is T => !isCreatableSentinel(v));
+      setSelectedItems(newItem ? [...realItems, newItem] : realItems);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      onInputValueChange?.("");
+      return;
+    }
+    setSelectedItems(newItems as T[]);
   }
 
   function removeItem(item: T, e: React.MouseEvent) {
@@ -308,7 +383,7 @@ export function MultiCombobox<T extends DataWithId>(
       return (
         <ComboboxSelectAllItem key="__selectAll" value={row}>
           <ComboboxGroupHeaderCheckbox $state={state} id="__selectAll" />
-          Select all
+          {selectAllLabel}
         </ComboboxSelectAllItem>
       );
     }
@@ -338,6 +413,10 @@ export function MultiCombobox<T extends DataWithId>(
       );
     }
 
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
+
     const item = row as T;
     return (
       <ComboboxItem
@@ -354,6 +433,33 @@ export function MultiCombobox<T extends DataWithId>(
     );
   }
 
+  function renderCreatableItem(
+    sentinel: CreatableSentinel,
+    style?: React.CSSProperties,
+    index?: number,
+    measureRef?: (el: Element | null) => void
+  ) {
+    return (
+      <ComboboxItem
+        key="__creatable"
+        value={sentinel}
+        itemId="__creatable"
+        label={`Create "${sentinel.label}"`}
+        inputType="none"
+        renderItem={() => (
+          <>
+            <Icon name="plus-outline" size="mini" />
+            {`Create "${sentinel.label}"`}
+          </>
+        )}
+        style={style}
+        index={index}
+        data-index={index}
+        ref={measureRef}
+      />
+    );
+  }
+
   // ─── Items passed to Combobox.Root ────────────────────────────────────────
   // When selectHeadings: flatItems (flat array of group header sentinels + items).
   // When selectAll only: prepend SELECT_ALL_SENTINEL to data so Base UI tracks
@@ -361,8 +467,12 @@ export function MultiCombobox<T extends DataWithId>(
   // The sentinel is never in flatItems — it is always rendered manually above
   // Combobox.List, so we must not prepend it when flatItems is used.
 
-  const rootItems =
+  const baseItems =
     flatItems ?? groups ?? (isChildrenMode ? undefined : visibleData);
+  const rootItems =
+    creatableSentinel && Array.isArray(baseItems)
+      ? ([...baseItems, creatableSentinel] as FlatRow[])
+      : baseItems;
 
   const hasSentinels = selectAll || selectHeadings;
 
@@ -379,8 +489,36 @@ export function MultiCombobox<T extends DataWithId>(
         virtualized={isVirtualized}
         open={open}
         disabled={props.disabled}
-        onOpenChange={setOpen}
-        filter={filter}
+        onOpenChange={(nextOpen, eventDetails) => {
+          if (!nextOpen && eventDetails.reason === "item-press") return;
+          setOpen(nextOpen);
+        }}
+        filter={
+          creatableProp
+            ? (item: unknown, query: string) => {
+                if (isCreatableSentinel(item)) return true;
+                if (filter) return filter(item, query);
+                // Default Base UI filter: match against itemToStringLabel
+                if (isGroupHeaderSentinel(item) || isSelectAllSentinel(item))
+                  return true;
+                const label = itemToString(item as T);
+                return label.toLowerCase().includes(query.toLowerCase());
+              }
+            : filter
+        }
+        inputValue={creatableProp ? currentInputValue : inputValue}
+        onInputValueChange={
+          creatableProp
+            ? (v) => {
+                if (skipNextInputChangeRef.current) {
+                  skipNextInputChangeRef.current = false;
+                  return;
+                }
+                setInternalInputValue(v);
+                onInputValueChange?.(v);
+              }
+            : onInputValueChange
+        }
         onItemHighlighted={
           isVirtualized
             ? (item, { reason, index }) => {
@@ -406,20 +544,31 @@ export function MultiCombobox<T extends DataWithId>(
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (hasSentinels ? handleValueChange : handleSimpleValueChange) as any
         }
-        itemToStringLabel={(item: FlatRow | null) => {
-          if (!item || isGroupHeaderSentinel(item) || isSelectAllSentinel(item))
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        itemToStringLabel={(item: any) => {
+          if (
+            !item ||
+            isGroupHeaderSentinel(item) ||
+            isSelectAllSentinel(item) ||
+            isCreatableSentinel(item)
+          )
             return "";
           return itemToString(item as T);
         }}
-        isItemEqualToValue={(a: FlatRow, b: FlatRow) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isItemEqualToValue={(a: any, b: any) => {
+          if (isCreatableSentinel(a) && isCreatableSentinel(b))
+            return a.label === b.label;
           if (isGroupHeaderSentinel(a) && isGroupHeaderSentinel(b))
             return a.groupName === b.groupName;
           if (isSelectAllSentinel(a) && isSelectAllSentinel(b)) return true;
           if (
             !isGroupHeaderSentinel(a) &&
             !isSelectAllSentinel(a) &&
+            !isCreatableSentinel(a) &&
             !isGroupHeaderSentinel(b) &&
-            !isSelectAllSentinel(b)
+            !isSelectAllSentinel(b) &&
+            !isCreatableSentinel(b)
           )
             return (a as T).id === (b as T).id;
           return false;
@@ -458,6 +607,7 @@ export function MultiCombobox<T extends DataWithId>(
             <ComboboxTokenInput
               id={id}
               placeholder={value.length > 0 ? "" : placeholder}
+              aria-describedby={ariaDescribedBy}
             />
             <ComboboxActionButtons>
               <ComboboxClear aria-label="Clear all">
@@ -508,57 +658,83 @@ export function MultiCombobox<T extends DataWithId>(
                     inputType={inputType}
                     renderItem={renderItem}
                     renderGroupHeading={renderGroupHeading}
+                    renderCreatableItem={
+                      creatableProp
+                        ? (sentinel, style, index, measureRef) =>
+                            renderCreatableItem(
+                              sentinel,
+                              style,
+                              index,
+                              measureRef
+                            )
+                        : undefined
+                    }
                   />
                 ) : children ? (
                   children
                 ) : flatItems ? (
                   (row: FlatRow) => renderSentinelRow(row)
                 ) : groups ? (
-                  (group: { value: string; items: T[] }, index: number) => (
-                    <React.Fragment key={group.value}>
-                      <ComboboxGroup items={group.items}>
-                        <ComboboxGroupLabel>
-                          {renderGroupHeading
-                            ? renderGroupHeading(group.value)
-                            : group.value}
-                        </ComboboxGroupLabel>
-                        <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)
-                                  : () => itemToString(item)
-                              }
-                            />
-                          )}
-                        </Combobox.Collection>
-                      </ComboboxGroup>
-                      {index < groups.length - 1 && <ComboboxSeparator />}
-                    </React.Fragment>
-                  )
+                  (
+                    group: { value: string; items: T[] } | CreatableSentinel,
+                    index: number
+                  ) => {
+                    if (isCreatableSentinel(group)) {
+                      return renderCreatableItem(group);
+                    }
+                    const g = group as { value: string; items: T[] };
+                    return (
+                      <React.Fragment key={g.value}>
+                        <ComboboxGroup items={g.items}>
+                          <ComboboxGroupLabel>
+                            {renderGroupHeading
+                              ? renderGroupHeading(g.value)
+                              : g.value}
+                          </ComboboxGroupLabel>
+                          <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)
+                                    : () => itemToString(item)
+                                }
+                              />
+                            )}
+                          </Combobox.Collection>
+                        </ComboboxGroup>
+                        {index < groups.length - 1 && <ComboboxSeparator />}
+                      </React.Fragment>
+                    );
+                  }
                 ) : (
-                  (item: T) => (
-                    <ComboboxItem
-                      key={item.id}
-                      value={item}
-                      itemId={String(item.id)}
-                      label={itemToString(item)}
-                      disabled={item.disabled}
-                      inputType={inputType}
-                      renderItem={
-                        renderItem
-                          ? () => renderItem(item)
-                          : () => itemToString(item)
-                      }
-                    />
-                  )
+                  (item: T | CreatableSentinel) => {
+                    if (isCreatableSentinel(item)) {
+                      return renderCreatableItem(item);
+                    }
+                    const dataItem = item as T;
+                    return (
+                      <ComboboxItem
+                        key={dataItem.id}
+                        value={dataItem}
+                        itemId={String(dataItem.id)}
+                        label={itemToString(dataItem)}
+                        disabled={dataItem.disabled}
+                        inputType={inputType}
+                        renderItem={
+                          renderItem
+                            ? () => renderItem(dataItem)
+                            : () => itemToString(dataItem)
+                        }
+                      />
+                    );
+                  }
                 )}
               </ComboboxList>
             </ComboboxPopup>

package/src/v3/MultiSearchableSelect.tsx

@@ -73,6 +73,7 @@ interface MultiSearchableSelectBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-describedby"?: string;
 }
 
 interface MultiSearchableSelectDataProps<T extends DataWithId>
@@ -135,6 +136,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
     loadingText = "Loading...",
     filter,
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -416,7 +418,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
         }}
         items={rootItems}
       >
-        <SearchableSelectTokenTrigger id={id}>
+        <SearchableSelectTokenTrigger
+          id={id}
+          aria-describedby={ariaDescribedBy}
+        >
           {renderSelection ? (
             renderSelection(value)
           ) : value.length > 0 ? (

package/src/v3/MultiSelect.tsx

@@ -43,6 +43,7 @@ interface MultiSelectBaseProps {
   id?: string;
   placeholder?: string;
   disabled?: boolean;
+  "aria-describedby"?: string;
 }
 
 interface MultiSelectDataProps<T extends DataWithId>
@@ -88,6 +89,7 @@ export type MultiSelectProps<T extends DataWithId> =
 
 export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
   const { id, placeholder = "Select..." } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -179,7 +181,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
         disabled={props.disabled}
         id={id}
       >
-        <SelectTrigger>
+        <SelectTrigger aria-describedby={ariaDescribedBy}>
           <SelectValue>
             {() => {
               if (renderSelection) return renderSelection(selectedItems);

package/src/v3/SingleCombobox.tsx

@@ -31,6 +31,7 @@ interface SingleComboboxBaseProps {
   emptyText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-describedby"?: string;
 }
 
 interface SingleComboboxDataBaseProps<T extends DataWithId>
@@ -89,6 +90,7 @@ export function SingleCombobox<T extends DataWithId>(
     emptyText = "No results found.",
     filter,
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -204,7 +206,11 @@ export function SingleCombobox<T extends DataWithId>(
         }
       >
         <ComboboxInputGroup>
-          <ComboboxInput placeholder={placeholder} id={id} />
+          <ComboboxInput
+            placeholder={placeholder}
+            id={id}
+            aria-describedby={ariaDescribedBy}
+          />
           <ComboboxActionButtons>
             <ComboboxClear aria-label="Clear selection">
               <ClearIcon />

package/src/v3/SingleSearchableSelect.tsx

@@ -41,6 +41,7 @@ interface SingleSearchableSelectBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-describedby"?: string;
 }
 
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
@@ -106,6 +107,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
     loadingText = "Loading...",
     filter,
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -236,7 +238,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
             : undefined
         }
       >
-        <SearchableSelectTrigger id={id}>
+        <SearchableSelectTrigger id={id} aria-describedby={ariaDescribedBy}>
           <SearchableSelectPlaceholder>
             <Combobox.Value placeholder={placeholder}>
               {value

package/src/v3/SingleSelect.stories.tsx

@@ -37,6 +37,25 @@ export const Basic: Story = {
   ),
 };
 
+export const Empty: Story = {
+  name: "Empty",
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <FormField label="Pick a book">
+        {({ id }) => (
+          <SingleSelect
+            id={"placeholder"}
+            disabled
+            data={[]}
+            itemToString={() => ""}
+            placeholder=""
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Disabled: Story = {
   name: "Disabled",
   render: () => (

package/src/v3/SingleSelect.tsx

@@ -39,6 +39,7 @@ interface SingleSelectBaseProps {
   placeholder?: string;
   includePlaceholderItem?: boolean;
   disabled?: boolean;
+  "aria-describedby"?: string;
 }
 
 interface SingleSelectDataProps<T extends DataWithId>
@@ -80,6 +81,7 @@ export function SingleSelect<T extends DataWithId>(
   props: SingleSelectProps<T>
 ) {
   const { id, placeholder, includePlaceholderItem } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -166,7 +168,7 @@ export function SingleSelect<T extends DataWithId>(
         onValueChange={handleValueChange}
         id={id}
       >
-        <SelectTrigger>
+        <SelectTrigger aria-describedby={ariaDescribedBy}>
           <StyledValue placeholder={placeholder}>
             {renderSelection && selectedItem
               ? renderSelection(selectedItem)