@sproutsocial/seeds-react-menu 1.12.1 → 1.12.3

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 ────────────────────────────────────────────────────────
@@ -73,6 +79,7 @@ interface MultiSearchableSelectBaseProps {
   loadingText?: string;
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
+  "aria-describedby"?: string;
 }
 
 interface MultiSearchableSelectDataProps<T extends DataWithId>
@@ -93,6 +100,8 @@ interface MultiSearchableSelectDataProps<T extends DataWithId>
   selectAll?: boolean;
   isVirtualized?: boolean;
   removeSelectedItems?: boolean;
+  creatable?: boolean;
+  onCreate?: (value: string) => T;
   children?: never;
 }
 
@@ -115,6 +124,8 @@ interface MultiSearchableSelectChildrenProps
   selectAll?: never;
   isVirtualized?: never;
   removeSelectedItems?: never;
+  creatable?: never;
+  onCreate?: never;
 }
 
 export type MultiSearchableSelectProps<T extends DataWithId> =
@@ -135,6 +146,7 @@ export function MultiSearchableSelect<T extends DataWithId>(
     loadingText = "Loading...",
     filter,
   } = props;
+  const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
 
@@ -179,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;
@@ -189,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);
@@ -226,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;
@@ -248,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) {
@@ -288,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 ──────────────────────────────────────────────────
@@ -337,6 +402,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
       );
     }
 
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
+
     const item = row as T;
     return (
       <ComboboxItem
@@ -353,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[])
@@ -367,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}
@@ -396,27 +518,41 @@ 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;
         }}
         items={rootItems}
       >
-        <SearchableSelectTokenTrigger id={id}>
+        <SearchableSelectTokenTrigger
+          id={id}
+          aria-describedby={ariaDescribedBy}
+        >
           {renderSelection ? (
             renderSelection(value)
           ) : value.length > 0 ? (
@@ -491,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>

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)