@sproutsocial/seeds-react-menu 1.12.2 → 1.12.3

package/package.json

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

package/src/v3/MultiCombobox.tsx

@@ -506,19 +506,28 @@ export function MultiCombobox<T extends DataWithId>(
               }
             : filter
         }
-        inputValue={creatableProp ? currentInputValue : inputValue}
-        onInputValueChange={
-          creatableProp
-            ? (v) => {
-                if (skipNextInputChangeRef.current) {
-                  skipNextInputChangeRef.current = false;
-                  return;
-                }
-                setInternalInputValue(v);
-                onInputValueChange?.(v);
-              }
-            : onInputValueChange
+        inputValue={
+          creatableProp ? currentInputValue : inputValue ?? internalInputValue
         }
+        onInputValueChange={(v, eventDetails) => {
+          // Preserve search query when an item is selected. Base UI fires
+          // 'input-clear' on item-press; ignore it while the popup stays open.
+          if (eventDetails.reason === "input-clear" && open) return;
+
+          if (creatableProp) {
+            if (skipNextInputChangeRef.current) {
+              skipNextInputChangeRef.current = false;
+              return;
+            }
+            setInternalInputValue(v);
+            onInputValueChange?.(v);
+          } else {
+            if (inputValue === undefined) {
+              setInternalInputValue(v);
+            }
+            onInputValueChange?.(v);
+          }
+        }}
         onItemHighlighted={
           isVirtualized
             ? (item, { reason, index }) => {

package/src/v3/MultiSearchableSelect.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 {
   ComboboxGroup,
@@ -26,6 +31,7 @@ import {
   SearchableSelectList,
 } from "./Common/ComboboxStyles";
 import { ClearIcon, StyledChevron, ChevronIcon } from "./Common/SelectIcons";
+import Icon from "@sproutsocial/seeds-react-icon";
 import styled from "styled-components";
 
 // ─── Styled components ────────────────────────────────────────────────────────
@@ -94,6 +100,8 @@ interface MultiSearchableSelectDataProps<T extends DataWithId>
   selectAll?: boolean;
   isVirtualized?: boolean;
   removeSelectedItems?: boolean;
+  creatable?: boolean;
+  onCreate?: (value: string) => T;
   children?: never;
 }
 
@@ -116,6 +124,8 @@ interface MultiSearchableSelectChildrenProps
   selectAll?: never;
   isVirtualized?: never;
   removeSelectedItems?: never;
+  creatable?: never;
+  onCreate?: never;
 }
 
 export type MultiSearchableSelectProps<T extends DataWithId> =
@@ -181,6 +191,12 @@ export function MultiSearchableSelect<T extends DataWithId>(
   const isVirtualized = isChildrenMode
     ? false
     : (props as MultiSearchableSelectDataProps<T>).isVirtualized ?? false;
+  const creatableProp = isChildrenMode
+    ? false
+    : (props as MultiSearchableSelectDataProps<T>).creatable ?? false;
+  const onCreateProp = isChildrenMode
+    ? undefined
+    : (props as MultiSearchableSelectDataProps<T>).onCreate;
   const children = isChildrenMode
     ? (props as MultiSearchableSelectChildrenProps).children
     : undefined;
@@ -191,6 +207,8 @@ export function MultiSearchableSelect<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);
@@ -228,9 +246,27 @@ export function MultiSearchableSelect<T extends DataWithId>(
     [visibleData, groupBy]
   );
 
+  const currentInputValue = 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 ───────────────────────────────────────────────────
 
-  type FlatRow = T | GroupHeaderSentinel | SelectAllSentinel;
+  type FlatRow =
+    | T
+    | GroupHeaderSentinel
+    | SelectAllSentinel
+    | CreatableSentinel;
 
   const flatItems = React.useMemo<FlatRow[] | null>(() => {
     if (!groups || (!selectHeadings && !selectAll)) return null;
@@ -250,10 +286,28 @@ export function MultiSearchableSelect<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("");
+      return;
+    }
+
     const selectAllClicked = next.filter(isSelectAllSentinel);
     const groupSentinels = next.filter(isGroupHeaderSentinel);
     const realItems = next.filter(
-      (v): v is T => !isGroupHeaderSentinel(v) && !isSelectAllSentinel(v)
+      (v): v is T =>
+        !isGroupHeaderSentinel(v) &&
+        !isSelectAllSentinel(v) &&
+        !isCreatableSentinel(v)
     );
 
     if (selectAllClicked.length > 0) {
@@ -290,8 +344,17 @@ export function MultiSearchableSelect<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("");
+      return;
+    }
+    setSelectedItems(newItems as T[]);
   }
 
   // ─── Render sentinel row ──────────────────────────────────────────────────
@@ -339,6 +402,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
       );
     }
 
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
+
     const item = row as T;
     return (
       <ComboboxItem
@@ -355,8 +422,39 @@ export function MultiSearchableSelect<T extends DataWithId>(
     );
   }
 
-  const rootItems =
+  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}
+      />
+    );
+  }
+
+  const baseItems =
     flatItems ?? groups ?? (isChildrenMode ? undefined : visibleData);
+  const rootItems =
+    creatableSentinel && Array.isArray(baseItems)
+      ? ([...baseItems, creatableSentinel] as FlatRow[])
+      : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels
     ? ([...value] as FlatRow[])
@@ -369,7 +467,29 @@ export function MultiSearchableSelect<T extends DataWithId>(
         multiple
         id={id}
         virtualized={isVirtualized}
-        filter={filter}
+        filter={
+          creatableProp
+            ? (item: unknown, query: string) => {
+                if (isCreatableSentinel(item)) return true;
+                if (filter) return filter(item, query);
+                if (isGroupHeaderSentinel(item) || isSelectAllSentinel(item))
+                  return true;
+                const label = itemToString(item as T);
+                return label.toLowerCase().includes(query.toLowerCase());
+              }
+            : filter
+        }
+        inputValue={internalInputValue}
+        onInputValueChange={(v, eventDetails) => {
+          // Preserve search query when an item is selected. Base UI fires
+          // 'input-clear' on item-press; ignore it while the popup stays open.
+          if (eventDetails.reason === "input-clear" && open) return;
+          if (skipNextInputChangeRef.current) {
+            skipNextInputChangeRef.current = false;
+            return;
+          }
+          setInternalInputValue(v);
+        }}
         open={open}
         disabled={props.disabled}
         onOpenChange={setOpen}
@@ -398,20 +518,31 @@ export function MultiSearchableSelect<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;
@@ -496,57 +627,83 @@ export function MultiSearchableSelect<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)
+                        }
+                      />
+                    );
+                  }
                 )}
               </SearchableSelectList>
             </SearchableSelectPopup>