@sproutsocial/seeds-react-menu 1.12.2 → 1.12.3

package/.turbo/turbo-build.log

@@ -10,26 +10,26 @@ $ tsup --dts
 ESM Build start
 CJS dist/index.js        92.65 KB
 CJS dist/v2/index.js     73.18 KB
-CJS dist/v3/index.js     99.79 KB
+CJS dist/v3/index.js     104.35 KB
 CJS dist/index.js.map    180.28 KB
 CJS dist/v2/index.js.map 152.19 KB
-CJS dist/v3/index.js.map 173.17 KB
-CJS ⚡️ Build success in 91ms
+CJS dist/v3/index.js.map 181.62 KB
+CJS ⚡️ Build success in 64ms
 ESM dist/esm/index.js              73.60 KB
-ESM dist/esm/v3/index.js           88.52 KB
+ESM dist/esm/v3/index.js           92.96 KB
 ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
 ESM dist/esm/v2/index.js           62.63 KB
 ESM dist/esm/index.js.map          156.29 KB
-ESM dist/esm/v3/index.js.map       173.24 KB
+ESM dist/esm/v3/index.js.map       181.70 KB
 ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
 ESM dist/esm/v2/index.js.map       132.57 KB
-ESM ⚡️ Build success in 91ms
+ESM ⚡️ Build success in 65ms
 DTS Build start
-DTS ⚡️ Build success in 6715ms
+DTS ⚡️ Build success in 6525ms
 DTS dist/index.d.ts     39.11 KB
 DTS dist/v2/index.d.ts  5.55 KB
-DTS dist/v3/index.d.ts  18.28 KB
+DTS dist/v3/index.d.ts  18.39 KB
 DTS dist/index.d.mts    39.11 KB
 DTS dist/v2/index.d.mts 5.55 KB
-DTS dist/v3/index.d.mts 18.28 KB
-Done in 7.46s.
+DTS dist/v3/index.d.mts 18.39 KB
+Done in 7.26s.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.12.3
+
+### Patch Changes
+
+- c806305: Bugfix for selecting and searching, add creatable to SearchableSelect
+
 ## 1.12.2
 
 ### Patch Changes

package/dist/esm/v3/index.js

@@ -1692,15 +1692,23 @@ function MultiCombobox(props) {
           const label = itemToString(item);
           return label.toLowerCase().includes(query.toLowerCase());
         } : filter,
-        inputValue: creatableProp ? currentInputValue : inputValue,
-        onInputValueChange: creatableProp ? (v) => {
-          if (skipNextInputChangeRef.current) {
-            skipNextInputChangeRef.current = false;
-            return;
+        inputValue: creatableProp ? currentInputValue : inputValue ?? internalInputValue,
+        onInputValueChange: (v, eventDetails) => {
+          if (eventDetails.reason === "input-clear" && open) return;
+          if (creatableProp) {
+            if (skipNextInputChangeRef.current) {
+              skipNextInputChangeRef.current = false;
+              return;
+            }
+            setInternalInputValue(v);
+            onInputValueChange?.(v);
+          } else {
+            if (inputValue === void 0) {
+              setInternalInputValue(v);
+            }
+            onInputValueChange?.(v);
           }
-          setInternalInputValue(v);
-          onInputValueChange?.(v);
-        } : onInputValueChange,
+        },
         onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
           const virt = virtualizerRef.current;
           if (!item || !virt) return;
@@ -2049,8 +2057,9 @@ function SingleSearchableSelect(props) {
 import * as React11 from "react";
 import { Combobox as Combobox6 } from "@base-ui/react/combobox";
 import "@tanstack/react-virtual";
+import Icon4 from "@sproutsocial/seeds-react-icon";
 import styled7 from "styled-components";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var SelectionText2 = styled7.span`
   flex: 1;
   overflow: hidden;
@@ -2092,12 +2101,16 @@ function MultiSearchableSelect(props) {
   const selectHeadings = isChildrenMode ? false : props.selectHeadings ?? false;
   const selectAll = isChildrenMode ? false : props.selectAll ?? false;
   const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const creatableProp = isChildrenMode ? false : props.creatable ?? false;
+  const onCreateProp = isChildrenMode ? void 0 : props.onCreate;
   const children = isChildrenMode ? props.children : void 0;
   const selectedItemIds = props.selectedItemIds;
   const defaultSelectedItemIds = props.defaultSelectedItemIds;
   const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
   const [open, setOpen] = React11.useState(false);
+  const [internalInputValue, setInternalInputValue] = React11.useState("");
+  const skipNextInputChangeRef = React11.useRef(false);
   const virtualizerRef = React11.useRef(null);
   const isControlled = selectedItemIds !== void 0;
   const idsToItems = React11.useCallback(
@@ -2116,6 +2129,18 @@ function MultiSearchableSelect(props) {
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
+  const currentInputValue = internalInputValue;
+  const creatableSentinel = React11.useMemo(() => {
+    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]);
   const flatItems = React11.useMemo(() => {
     if (!groups || !selectHeadings && !selectAll) return null;
     const rows = [];
@@ -2132,10 +2157,21 @@ function MultiSearchableSelect(props) {
       onSelectedItemIdsChange(items.map((item) => item.id));
   }
   function handleValueChange(next) {
+    const creatableClicked = next.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems2 = next.filter(
+        (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v) && !isCreatableSentinel(v)
+      );
+      setSelectedItems(newItem ? [...realItems2, newItem] : realItems2);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      return;
+    }
     const selectAllClicked = next.filter(isSelectAllSentinel3);
     const groupSentinels = next.filter(isGroupHeaderSentinel3);
     const realItems = next.filter(
-      (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v)
+      (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v) && !isCreatableSentinel(v)
     );
     if (selectAllClicked.length > 0) {
       const allSelected = data.every(
@@ -2169,6 +2205,15 @@ function MultiSearchableSelect(props) {
     setSelectedItems(updated);
   }
   function handleSimpleValueChange(newItems) {
+    const creatableClicked = newItems.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems = newItems.filter((v) => !isCreatableSentinel(v));
+      setSelectedItems(newItem ? [...realItems, newItem] : realItems);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      return;
+    }
     setSelectedItems(newItems);
   }
   function renderSentinelRow(row) {
@@ -2199,6 +2244,9 @@ function MultiSearchableSelect(props) {
         renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
       ] }, `__header-${row.groupName}`);
     }
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
     const item = row;
     return /* @__PURE__ */ jsx11(
       ComboboxItem_default,
@@ -2213,7 +2261,28 @@ function MultiSearchableSelect(props) {
       item.id
     );
   }
-  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  function renderCreatableItem(sentinel, style, index, measureRef) {
+    return /* @__PURE__ */ jsx11(
+      ComboboxItem_default,
+      {
+        value: sentinel,
+        itemId: "__creatable",
+        label: `Create "${sentinel.label}"`,
+        inputType: "none",
+        renderItem: () => /* @__PURE__ */ jsxs9(Fragment10, { children: [
+          /* @__PURE__ */ jsx11(Icon4, { name: "plus-outline", size: "mini" }),
+          `Create "${sentinel.label}"`
+        ] }),
+        style,
+        index,
+        "data-index": index,
+        ref: measureRef
+      },
+      "__creatable"
+    );
+  }
+  const baseItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
   return /* @__PURE__ */ jsxs9(Field, { children: [
@@ -2224,7 +2293,23 @@ function MultiSearchableSelect(props) {
         multiple: true,
         id,
         virtualized: isVirtualized,
-        filter,
+        filter: creatableProp ? (item, query) => {
+          if (isCreatableSentinel(item)) return true;
+          if (filter) return filter(item, query);
+          if (isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item))
+            return true;
+          const label = itemToString(item);
+          return label.toLowerCase().includes(query.toLowerCase());
+        } : filter,
+        inputValue: internalInputValue,
+        onInputValueChange: (v, eventDetails) => {
+          if (eventDetails.reason === "input-clear" && open) return;
+          if (skipNextInputChangeRef.current) {
+            skipNextInputChangeRef.current = false;
+            return;
+          }
+          setInternalInputValue(v);
+        },
         open,
         disabled: props.disabled,
         onOpenChange: setOpen,
@@ -2247,15 +2332,17 @@ function MultiSearchableSelect(props) {
           hasSentinels ? handleValueChange : handleSimpleValueChange
         ),
         itemToStringLabel: (item) => {
-          if (!item || isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item))
+          if (!item || isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item) || isCreatableSentinel(item))
             return "";
           return itemToString(item);
         },
         isItemEqualToValue: (a, b) => {
+          if (isCreatableSentinel(a) && isCreatableSentinel(b))
+            return a.label === b.label;
           if (isGroupHeaderSentinel3(a) && isGroupHeaderSentinel3(b))
             return a.groupName === b.groupName;
           if (isSelectAllSentinel3(a) && isSelectAllSentinel3(b)) return true;
-          if (!isGroupHeaderSentinel3(a) && !isSelectAllSentinel3(a) && !isGroupHeaderSentinel3(b) && !isSelectAllSentinel3(b))
+          if (!isGroupHeaderSentinel3(a) && !isSelectAllSentinel3(a) && !isCreatableSentinel(a) && !isGroupHeaderSentinel3(b) && !isSelectAllSentinel3(b) && !isCreatableSentinel(b))
             return a.id === b.id;
           return false;
         },
@@ -2318,37 +2405,55 @@ function MultiSearchableSelect(props) {
                         itemToString,
                         inputType,
                         renderItem,
-                        renderGroupHeading
+                        renderGroupHeading,
+                        renderCreatableItem: creatableProp ? (sentinel, style, index, measureRef) => renderCreatableItem(
+                          sentinel,
+                          style,
+                          index,
+                          measureRef
+                        ) : void 0
                       }
-                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ jsxs9(React11.Fragment, { children: [
-                      /* @__PURE__ */ jsxs9(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ jsx11(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ jsx11(Combobox6.Collection, { children: (item) => /* @__PURE__ */ jsx11(
-                          ComboboxItem_default,
-                          {
-                            value: item,
-                            itemId: String(item.id),
-                            label: itemToString(item),
-                            disabled: item.disabled,
-                            inputType,
-                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                          },
-                          item.id
-                        ) })
-                      ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ jsx11(ComboboxSeparator, {})
-                    ] }, group.value) : (item) => /* @__PURE__ */ jsx11(
-                      ComboboxItem_default,
-                      {
-                        value: item,
-                        itemId: String(item.id),
-                        label: itemToString(item),
-                        disabled: item.disabled,
-                        inputType,
-                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                      },
-                      item.id
-                    )
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => {
+                      if (isCreatableSentinel(group)) {
+                        return renderCreatableItem(group);
+                      }
+                      const g = group;
+                      return /* @__PURE__ */ jsxs9(React11.Fragment, { children: [
+                        /* @__PURE__ */ jsxs9(ComboboxGroup, { items: g.items, children: [
+                          /* @__PURE__ */ jsx11(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ jsx11(Combobox6.Collection, { children: (item) => /* @__PURE__ */ jsx11(
+                            ComboboxItem_default,
+                            {
+                              value: item,
+                              itemId: String(item.id),
+                              label: itemToString(item),
+                              disabled: item.disabled,
+                              inputType,
+                              renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                            },
+                            item.id
+                          ) })
+                        ] }),
+                        index < groups.length - 1 && /* @__PURE__ */ jsx11(ComboboxSeparator, {})
+                      ] }, g.value);
+                    } : (item) => {
+                      if (isCreatableSentinel(item)) {
+                        return renderCreatableItem(item);
+                      }
+                      const dataItem = item;
+                      return /* @__PURE__ */ jsx11(
+                        ComboboxItem_default,
+                        {
+                          value: dataItem,
+                          itemId: String(dataItem.id),
+                          label: itemToString(dataItem),
+                          disabled: dataItem.disabled,
+                          inputType,
+                          renderItem: renderItem ? () => renderItem(dataItem) : () => itemToString(dataItem)
+                        },
+                        dataItem.id
+                      );
+                    }
                   }
                 )
               ]