@sproutsocial/seeds-react-menu 1.12.0 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "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.4",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.32",
-    "@sproutsocial/seeds-react-icon": "^2.3.6",
-    "@sproutsocial/seeds-react-input": "^1.5.15",
+    "@sproutsocial/seeds-react-button": "^2.0.5",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.33",
+    "@sproutsocial/seeds-react-icon": "^2.3.7",
+    "@sproutsocial/seeds-react-input": "^1.5.16",
     "@sproutsocial/seeds-react-label": "^1.0.16",
-    "@sproutsocial/seeds-react-popout": "^2.4.37",
+    "@sproutsocial/seeds-react-popout": "^2.4.38",
     "@sproutsocial/seeds-react-radio": "^1.3.16",
-    "@sproutsocial/seeds-react-switch": "^1.2.31",
+    "@sproutsocial/seeds-react-switch": "^1.2.32",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
     "@sproutsocial/seeds-react-theme": "^3.6.2",
-    "@sproutsocial/seeds-react-token-input": "^1.4.37",
+    "@sproutsocial/seeds-react-token-input": "^1.4.38",
     "@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.19",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.20",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v3/Common/VirtualizedComboboxList.tsx

@@ -8,7 +8,11 @@ import {
   ComboboxSelectAllItem,
 } from "./ComboboxStyles";
 import type { DataWithId } from "./types";
-import { isPlaceholderSentinel } from "./sentinels";
+import {
+  isPlaceholderSentinel,
+  isCreatableSentinel,
+  type CreatableSentinel,
+} from "./sentinels";
 
 export const ITEM_HEIGHT = 32;
 
@@ -29,7 +33,11 @@ export function isSelectAllSentinel(v: unknown): v is SelectAllSentinel {
   return typeof v === "object" && v !== null && "__selectAll" in v;
 }
 
-export type FlatSentinelRow<T> = T | GroupHeaderSentinel | SelectAllSentinel;
+export type FlatSentinelRow<T> =
+  | T
+  | GroupHeaderSentinel
+  | SelectAllSentinel
+  | CreatableSentinel;
 
 interface VirtualizedComboboxListProps<T extends DataWithId> {
   open: boolean;
@@ -47,6 +55,12 @@ interface VirtualizedComboboxListProps<T extends DataWithId> {
   inputType: "icon" | "radio" | "checkbox" | "none";
   renderItem?: (item: T) => React.ReactNode;
   renderGroupHeading?: (label: string) => React.ReactNode;
+  renderCreatableItem?: (
+    sentinel: CreatableSentinel,
+    style: React.CSSProperties,
+    index: number,
+    measureRef: (el: Element | null) => void
+  ) => React.ReactNode;
 }
 
 export default function VirtualizedComboboxList<T extends DataWithId>({
@@ -59,6 +73,7 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
   inputType,
   renderItem,
   renderGroupHeading,
+  renderCreatableItem,
 }: VirtualizedComboboxListProps<T>) {
   type Row = FlatSentinelRow<T>;
 
@@ -197,6 +212,18 @@ export default function VirtualizedComboboxList<T extends DataWithId>({
             );
           }
 
+          if (isCreatableSentinel(row)) {
+            if (renderCreatableItem) {
+              return renderCreatableItem(
+                row,
+                baseStyle,
+                virtualItem.index,
+                virtualizer.measureElement
+              );
+            }
+            return null;
+          }
+
           const item = row as T;
           return (
             <ComboboxItem

package/src/v3/Common/sentinels.ts

@@ -15,3 +15,16 @@ export function makePlaceholderSentinel(label: string): PlaceholderSentinel {
 export function isPlaceholderSentinel(v: unknown): v is PlaceholderSentinel {
   return typeof v === "object" && v !== null && "__placeholder" in v;
 }
+
+export interface CreatableSentinel {
+  __creatable: true;
+  label: string;
+}
+
+export function makeCreatableSentinel(label: string): CreatableSentinel {
+  return { __creatable: true, label };
+}
+
+export function isCreatableSentinel(v: unknown): v is CreatableSentinel {
+  return typeof v === "object" && v !== null && "__creatable" in v;
+}

package/src/v3/MultiCombobox.stories.tsx

@@ -8,6 +8,7 @@ import {
   largeBookSet,
   itemToString,
   renderItem,
+  type Book,
 } from "./storyData";
 
 const meta: Meta<typeof MultiCombobox> = {
@@ -99,6 +100,7 @@ export const Controlled: Story = {
   name: "Controlled",
   render: () => {
     const [selectedIds, setSelectedIds] = React.useState<string[]>(["book-2"]);
+    const [inputValue, setInputValue] = React.useState("");
     const selected = books.filter((b) => selectedIds.includes(b.id));
     return (
       <div
@@ -119,9 +121,14 @@ export const Controlled: Story = {
               placeholder="Search books..."
               selectedItemIds={selectedIds}
               onSelectedItemIdsChange={(ids: string[]) => setSelectedIds(ids)}
+              inputValue={inputValue}
+              onInputValueChange={setInputValue}
             />
           )}
         </FormField>
+        <div style={{ fontSize: 13 }}>
+          Input: <strong>"{inputValue}"</strong>
+        </div>
         <div style={{ fontSize: 13 }}>
           Selected:{" "}
           <strong>
@@ -130,11 +137,14 @@ export const Controlled: Story = {
               : "none"}
           </strong>
         </div>
-        <div style={{ display: "flex", gap: 8 }}>
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
           <button onClick={() => setSelectedIds([])}>Clear all</button>
           <button onClick={() => setSelectedIds(["book-5", "book-7"])}>
             Select 1984 &amp; Meditations
           </button>
+          <button onClick={() => setInputValue("War")}>
+            Set input to "War"
+          </button>
         </div>
       </div>
     );
@@ -182,6 +192,27 @@ export const SelectableHeadings: Story = {
 
 export const SelectAll: Story = {
   name: "Select all",
+  render: () => (
+    <div style={{ width: "600px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            selectHeadings
+            selectAll
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
+export const SelectAllWithGrouping: Story = {
+  name: "Select all with grouping",
   render: () => (
     <div style={{ width: "600px" }}>
       <FormField label="Pick books">
@@ -202,6 +233,26 @@ export const SelectAll: Story = {
   ),
 };
 
+export const SelectAllLocalized: Story = {
+  name: "Select all (localized label)",
+  render: () => (
+    <div style={{ width: "600px" }}>
+      <FormField label="Pick books">
+        {({ id }) => (
+          <MultiCombobox
+            id={id}
+            data={books}
+            itemToString={itemToString}
+            renderItem={renderItem}
+            placeholder="Search books..."
+            selectAll="Tout sélectionner"
+          />
+        )}
+      </FormField>
+    </div>
+  ),
+};
+
 export const Virtualized: Story = {
   name: "Virtualized",
   render: () => (
@@ -371,3 +422,36 @@ export const CustomSearch: Story = {
     </div>
   ),
 };
+
+export const Creatable: Story = {
+  name: "Creatable",
+  render: () => {
+    const [bookList, setBookList] = React.useState<Book[]>(books);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <FormField label="Pick or create books">
+          {({ id }) => (
+            <MultiCombobox
+              id={id}
+              data={bookList}
+              itemToString={itemToString}
+              placeholder="Search or create..."
+              isVirtualized
+              creatable
+              onCreate={(value) => {
+                const newBook: Book = {
+                  id: `book-custom-${value.toLowerCase().replace(/\s+/g, "-")}`,
+                  title: value,
+                  author: "Unknown",
+                };
+                setBookList((prev) => [...prev, newBook]);
+                return newBook;
+              }}
+            />
+          )}
+        </FormField>
+      </div>
+    );
+  },
+};