@sproutsocial/seeds-react-menu 1.12.2 → 1.13.0

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 ────────────────────────────────────────────────────────
@@ -74,6 +80,7 @@ interface MultiSearchableSelectBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  fullWidth?: boolean;
 }
 
 interface MultiSearchableSelectDataProps<T extends DataWithId>
@@ -94,6 +101,8 @@ interface MultiSearchableSelectDataProps<T extends DataWithId>
   selectAll?: boolean;
   isVirtualized?: boolean;
   removeSelectedItems?: boolean;
+  creatable?: boolean;
+  onCreate?: (value: string) => T;
   children?: never;
 }
 
@@ -116,6 +125,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>(
     isLoading = false,
     loadingText = "Loading...",
     filter,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
 
@@ -181,6 +193,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 +209,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 +248,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 +288,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 +346,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 +404,10 @@ export function MultiSearchableSelect<T extends DataWithId>(
       );
     }
 
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
+
     const item = row as T;
     return (
       <ComboboxItem
@@ -355,21 +424,74 @@ 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[])
     : (value as unknown as T[]);
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         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 +520,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 +629,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.stories.tsx

@@ -266,6 +266,23 @@ export const RemoveSelectedItems: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick books">
+      {({ id }) => (
+        <MultiSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const Children: Story = {
   name: "Children API",
   render: () => (

package/src/v3/MultiSelect.tsx

@@ -44,6 +44,7 @@ interface MultiSelectBaseProps {
   placeholder?: string;
   disabled?: boolean;
   "aria-describedby"?: string;
+  fullWidth?: boolean;
 }
 
 interface MultiSelectDataProps<T extends DataWithId>
@@ -88,7 +89,7 @@ export type MultiSelectProps<T extends DataWithId> =
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
-  const { id, placeholder = "Select..." } = props;
+  const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -171,7 +172,7 @@ export function MultiSelect<T extends DataWithId>(props: MultiSelectProps<T>) {
   }
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Select.Root
         multiple

package/src/v3/SingleCombobox.stories.tsx

@@ -192,6 +192,23 @@ export const Virtualized: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleCombobox
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Search books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const CustomSearch: Story = {
   name: "Custom search (title + author)",
   render: () => (

package/src/v3/SingleCombobox.tsx

@@ -32,6 +32,7 @@ interface SingleComboboxBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  fullWidth?: boolean;
 }
 
 interface SingleComboboxDataBaseProps<T extends DataWithId>
@@ -89,6 +90,7 @@ export function SingleCombobox<T extends DataWithId>(
     placeholder = "Search...",
     emptyText = "No results found.",
     filter,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
 
@@ -168,7 +170,7 @@ export function SingleCombobox<T extends DataWithId>(
   );
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         id={id}

package/src/v3/SingleSearchableSelect.stories.tsx

@@ -304,6 +304,24 @@ export const LoadingWithToggle: Story = {
   },
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleSearchableSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select a book"
+          searchPlaceholder="Search books..."
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const CustomSearch: Story = {
   name: "Custom search (title + author)",
   render: () => (

package/src/v3/SingleSearchableSelect.tsx

@@ -42,6 +42,7 @@ interface SingleSearchableSelectBaseProps {
   disabled?: boolean;
   filter?: ((item: unknown, query: string) => boolean) | null;
   "aria-describedby"?: string;
+  fullWidth?: boolean;
 }
 
 interface SingleSearchableSelectDataBaseProps<T extends DataWithId>
@@ -106,6 +107,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
     isLoading = false,
     loadingText = "Loading...",
     filter,
+    fullWidth = true,
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
 
@@ -190,7 +192,7 @@ export function SingleSearchableSelect<T extends DataWithId>(
   );
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Combobox.Root
         id={id}

package/src/v3/SingleSelect.stories.tsx

@@ -259,6 +259,23 @@ export const DisabledItems: Story = {
   ),
 };
 
+export const Inline: Story = {
+  name: "Inline (fullWidth=false)",
+  render: () => (
+    <FormField label="Pick a book">
+      {({ id }) => (
+        <SingleSelect
+          id={id}
+          data={books}
+          itemToString={itemToString}
+          placeholder="Select a book"
+          fullWidth={false}
+        />
+      )}
+    </FormField>
+  ),
+};
+
 export const Children: Story = {
   name: "Children API",
   render: () => (

package/src/v3/SingleSelect.tsx

@@ -40,6 +40,7 @@ interface SingleSelectBaseProps {
   includePlaceholderItem?: boolean;
   disabled?: boolean;
   "aria-describedby"?: string;
+  fullWidth?: boolean;
 }
 
 interface SingleSelectDataProps<T extends DataWithId>
@@ -80,7 +81,7 @@ export type SingleSelectProps<T extends DataWithId> =
 export function SingleSelect<T extends DataWithId>(
   props: SingleSelectProps<T>
 ) {
-  const { id, placeholder, includePlaceholderItem } = props;
+  const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
 
   const isChildrenMode = "children" in props && props.children != null;
@@ -159,7 +160,7 @@ export function SingleSelect<T extends DataWithId>(
   }
 
   return (
-    <Field>
+    <Field $fullWidth={fullWidth}>
       <div ref={containerRef} style={{ position: "relative" }} />
       <Select.Root
         items={items}

package/src/v3/index.ts

@@ -5,3 +5,4 @@ export * from "./MultiCombobox";
 export * from "./SingleSearchableSelect";
 export * from "./MultiSearchableSelect";
 export * from "./Common/ComboboxStyles";
+export * from "./ActionMenu";