@particle-academy/react-fancy 2.3.4 → 2.4.0

package/dist/index.cjs

@@ -3292,10 +3292,14 @@ var NativeSelect = react.forwardRef(
     suffixPosition,
     onValueChange,
     onChange,
+    value,
+    defaultValue,
     ...props
   }, ref) => {
     const autoId = react.useId();
     const selectId = id ?? autoId;
+    const isControlled = value !== void 0;
+    const resolvedDefault = !isControlled && defaultValue === void 0 && placeholder ? "" : defaultValue;
     const select = /* @__PURE__ */ jsxRuntime.jsx(
       InputWrapper,
       {
@@ -3327,6 +3331,7 @@ var NativeSelect = react.forwardRef(
               onValueChange?.(e.target.value);
             },
             ...props,
+            ...isControlled ? { value } : { defaultValue: resolvedDefault },
             children: [
               placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
               list.map(
@@ -3376,6 +3381,9 @@ var ListboxSelect = react.forwardRef(
     onValueChange,
     onValuesChange,
     searchable = false,
+    creatable = false,
+    onCreate,
+    createLabel = "Create",
     selectedSuffix = "selected",
     indicator = "check",
     value: controlledSingleValue,
@@ -3383,9 +3391,11 @@ var ListboxSelect = react.forwardRef(
   }, _ref) => {
     const autoId = react.useId();
     const selectId = id ?? autoId;
+    const textInputEnabled = searchable || creatable;
     const [open, setOpen] = react.useState(false);
     const [search2, setSearch] = react.useState("");
     const [activeIndex, setActiveIndex] = react.useState(-1);
+    const [createdOptions, setCreatedOptions] = react.useState([]);
     const [singleValue, setSingleValue] = react.useState(
       controlledSingleValue ?? defaultSingleValue ?? ""
     );
@@ -3402,7 +3412,6 @@ var ListboxSelect = react.forwardRef(
     }, [controlledSingleValue]);
     const anchorRef = react.useRef(null);
     const listRef = react.useRef(null);
-    const wrapperRef = react.useRef(null);
     const searchRef = react.useRef(null);
     const position = useFloatingPosition(anchorRef, listRef, {
       placement: "bottom-start",
@@ -3414,18 +3423,24 @@ var ListboxSelect = react.forwardRef(
       setSearch("");
       setActiveIndex(-1);
     }, []);
-    useOutsideClick(wrapperRef, close, open);
+    useOutsideClick(listRef, close, open, anchorRef);
     useEscapeKey(close, open);
     react.useEffect(() => {
-      if (open && searchable) {
+      if (open && textInputEnabled) {
         requestAnimationFrame(() => searchRef.current?.focus());
       }
-    }, [open, searchable]);
-    const allOptions = flattenOptions(list);
-    const resolvedOptions = allOptions.map(resolveOption);
+    }, [open, textInputEnabled]);
+    const resolvedOptions = react.useMemo(() => {
+      const base = flattenOptions(list).map(resolveOption);
+      const created = createdOptions.map(resolveOption);
+      return [...base, ...created];
+    }, [list, createdOptions]);
     const filtered = search2 ? resolvedOptions.filter(
       (o) => o.label.toLowerCase().includes(search2.toLowerCase())
     ) : resolvedOptions;
+    const canCreate = creatable && search2.trim().length > 0 && !resolvedOptions.some(
+      (o) => o.label.toLowerCase() === search2.trim().toLowerCase() || o.value === search2.trim()
+    );
     const isSelected = (value) => {
       if (multiple) return currentMulti.includes(value);
       return currentSingle === value;
@@ -3444,6 +3459,25 @@ var ListboxSelect = react.forwardRef(
       },
       [multiple, currentMulti, onValuesChange, onValueChange, close]
     );
+    const handleCreate = react.useCallback(() => {
+      const label2 = search2.trim();
+      if (!label2) return;
+      const value = label2;
+      const newOption = { value, label: label2 };
+      setCreatedOptions((prev) => [...prev, newOption]);
+      onCreate?.(label2);
+      setSearch("");
+      if (multiple) {
+        const next = [...currentMulti, value];
+        setMultiValues(next);
+        onValuesChange?.(next);
+        requestAnimationFrame(() => searchRef.current?.focus());
+      } else {
+        setSingleValue(value);
+        onValueChange?.(value);
+        close();
+      }
+    }, [search2, multiple, currentMulti, onCreate, onValuesChange, onValueChange, close]);
     const getDisplayText = () => {
       if (multiple) {
         if (currentMulti.length === 0) return placeholder;
@@ -3472,10 +3506,15 @@ var ListboxSelect = react.forwardRef(
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         setActiveIndex((i) => Math.max(i - 1, 0));
-      } else if (e.key === "Enter" && activeIndex >= 0) {
-        e.preventDefault();
-        const item = filtered[activeIndex];
-        if (item && !item.disabled) toggleOption(item.value);
+      } else if (e.key === "Enter") {
+        if (activeIndex >= 0) {
+          e.preventDefault();
+          const item = filtered[activeIndex];
+          if (item && !item.disabled) toggleOption(item.value);
+        } else if (canCreate) {
+          e.preventDefault();
+          handleCreate();
+        }
       }
     };
     const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3535,7 +3574,7 @@ var ListboxSelect = react.forwardRef(
           width: anchorRef.current?.offsetWidth
         },
         children: [
-          searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          textInputEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               ref: searchRef,
@@ -3546,11 +3585,28 @@ var ListboxSelect = react.forwardRef(
                 setActiveIndex(-1);
               },
               onKeyDown: handleKeyDown,
-              placeholder: "Search...",
+              placeholder: creatable && !searchable ? "Type to add\u2026" : "Search\u2026",
               className: "w-full rounded-md border-0 bg-zinc-100 px-2.5 py-1.5 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
             }
           ) }),
-          filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "No results found" }) : filtered.map((option, i) => {
+          canCreate && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleCreate,
+              className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4 shrink-0", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 3a.75.75 0 01.75.75v5.5h5.5a.75.75 0 010 1.5h-5.5v5.5a.75.75 0 01-1.5 0v-5.5h-5.5a.75.75 0 010-1.5h5.5v-5.5A.75.75 0 0110 3z", clipRule: "evenodd" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+                  createLabel,
+                  ' "',
+                  search2.trim(),
+                  '"'
+                ] })
+              ]
+            }
+          ),
+          filtered.length === 0 && !canCreate ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "No results found" }) : filtered.length === 0 ? null : filtered.map((option, i) => {
             const selected = isSelected(option.value);
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -3589,7 +3645,7 @@ var ListboxSelect = react.forwardRef(
         ]
       }
     ) });
-    const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: "relative", children: [
+    const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       trigger,
       dropdown
     ] });