@multiplatform.one/forms 7.19.0 → 7.21.0

package/dist/cjs/fields/Combobox/index.cjs

@@ -337,19 +337,18 @@ function FloatingComboboxCore({
     return !options.some(o => o.label.toLowerCase() === trimmed || o.value.toLowerCase() === trimmed);
   }, [creatable, filter, options]);
   const handleCreate = (0, import_react.useCallback)(() => {
-    if (!onCreate || !filter.trim()) return;
-    const newOption = onCreate(filter.trim());
-    if (newOption) {
-      if (multiple) {
-        const current = Array.isArray(value) ? value : value ? [value] : [];
-        onValueChange?.([...current, newOption.value]);
-      } else {
-        onValueChange?.(newOption.value);
-        setOpen(false);
-      }
+    const typed = filter.trim();
+    if (!onCreate || !typed) return;
+    const newOption = onCreate(typed);
+    if (newOption && multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      if (!current.includes(newOption.value)) onValueChange?.([...current, newOption.value]);
+    } else if (newOption) {
+      onValueChange?.(newOption.value);
     }
+    if (!multiple) setOpen(false);
     setInternalFilter("");
-  }, [onCreate, filter, multiple, value, onValueChange]);
+  }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
   const initialOrderRef = (0, import_react.useRef)(null);
   const hasSearchedRef = (0, import_react.useRef)(false);
   const sortedFiltered = (0, import_react.useMemo)(() => {
@@ -914,6 +913,7 @@ function FloatingComboboxCore({
       lastKeyboardNavTimeRef.current = Date.now();
       setActiveIndex(Math.max(0, totalNavigableItems - 1));
     } else if (event.key === "Enter" || event.key === " ") {
+      if (event.key === " " && filter.trim()) return;
       event.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
         handleCreate();
@@ -929,7 +929,7 @@ function FloatingComboboxCore({
       event.preventDefault();
       setOpen(false);
     }
-  }, [navigableOptions, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, setKeyboardNav]);
+  }, [navigableOptions, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, filter, setKeyboardNav]);
   (0, import_react.useEffect)(() => {
     if (activeIndex == null) return;
     const scrollContainer = listScrollRef.current;
@@ -1406,19 +1406,18 @@ function NativeComboboxCore({
     return !options.some(o => o.label.toLowerCase() === trimmed || o.value.toLowerCase() === trimmed);
   }, [creatable, filter, options]);
   const handleCreate = (0, import_react.useCallback)(() => {
-    if (!onCreate || !filter.trim()) return;
-    const newOption = onCreate(filter.trim());
-    if (newOption) {
-      if (multiple) {
-        const current = Array.isArray(value) ? value : value ? [value] : [];
-        onValueChange?.([...current, newOption.value]);
-      } else {
-        onValueChange?.(newOption.value);
-        setOpen(false);
-      }
+    const typed = filter.trim();
+    if (!onCreate || !typed) return;
+    const newOption = onCreate(typed);
+    if (newOption && multiple) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      if (!current.includes(newOption.value)) onValueChange?.([...current, newOption.value]);
+    } else if (newOption) {
+      onValueChange?.(newOption.value);
     }
+    if (!multiple) setOpen(false);
     setInternalFilter("");
-  }, [onCreate, filter, multiple, value, onValueChange]);
+  }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
   const hasScrollableContent = Boolean(onSearch) || filtered.length > 6;
   const sheetTransition = knobProps.transition ?? "medium";
   const sortedFiltered = (0, import_react.useMemo)(() => {
@@ -1986,6 +1985,18 @@ function Combobox({
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
   const isControlled = valueProp !== void 0;
+  const [createdOptions, setCreatedOptions] = (0, import_react.useState)([]);
+  const knownOptions = (0, import_react.useMemo)(() => {
+    const unlisted = createdOptions.filter(c => !options.some(o => o.value === c.value));
+    return unlisted.length ? [...options, ...unlisted] : options;
+  }, [options, createdOptions]);
+  const handleCreateOption = (0, import_react.useMemo)(() => onCreate && (typed => {
+    const created = onCreate(typed);
+    if (created) {
+      setCreatedOptions(prev => prev.some(o => o.value === created.value) ? prev : [...prev, created]);
+    }
+    return created;
+  }), [onCreate]);
   const viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   const shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm;
@@ -2006,7 +2017,7 @@ function Combobox({
   }
   const renderReadOnly = selectValue => {
     if (multiple && Array.isArray(selectValue)) {
-      const labels = selectValue.map(v => options.find(o => o.value === v)?.label ?? v).join(", ");
+      const labels = selectValue.map(v => knownOptions.find(o => o.value === v)?.label ?? v).join(", ");
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: knobProps.sizeToken,
         color: textColor,
@@ -2018,7 +2029,7 @@ function Combobox({
       });
     }
     const sv = typeof selectValue === "string" ? selectValue : void 0;
-    const selected = options.find(option => option.value === sv);
+    const selected = knownOptions.find(option => option.value === sv);
     const displayText = selected?.label ?? (sv ? valueLabel ?? sv : "-");
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: knobProps.sizeToken,
@@ -2034,7 +2045,7 @@ function Combobox({
     if (readOnly) return renderReadOnly(selectValue);
     const ComboboxCore = shouldUseSheet ? NativeComboboxCore : FloatingComboboxCore;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxCore, {
-      options,
+      options: onSearch ? options : knownOptions,
       value: selectValue,
       onValueChange: value => {
         if (disabled) return;
@@ -2049,7 +2060,7 @@ function Combobox({
       onSearch,
       loading,
       searchError,
-      valueLabel,
+      valueLabel: valueLabel ?? createdOptions.find(o => o.value === selectValue)?.label,
       clearable,
       onLoadMore,
       hasMore,
@@ -2066,7 +2077,7 @@ function Combobox({
       selectedOrder,
       dismissible,
       creatable,
-      onCreate,
+      onCreate: handleCreateOption,
       createLabel,
       hideSearch,
       searchValue,

package/dist/cjs/fields/Combobox/index.native.js

@@ -473,19 +473,18 @@ function FloatingComboboxCore(param) {
     });
   }, [creatable, filter, options]);
   var handleCreate = (0, import_react.useCallback)(function () {
-    if (!onCreate || !filter.trim()) return;
-    var newOption = onCreate(filter.trim());
-    if (newOption) {
-      if (multiple) {
-        var current = Array.isArray(value) ? value : value ? [value] : [];
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...current, newOption.value]);
-      } else {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOption.value);
-        setOpen(false);
-      }
+    var typed = filter.trim();
+    if (!onCreate || !typed) return;
+    var newOption = onCreate(typed);
+    if (newOption && multiple) {
+      var current = Array.isArray(value) ? value : value ? [value] : [];
+      if (!current.includes(newOption.value)) onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...current, newOption.value]);
+    } else if (newOption) {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOption.value);
     }
+    if (!multiple) setOpen(false);
     setInternalFilter("");
-  }, [onCreate, filter, multiple, value, onValueChange]);
+  }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
   var initialOrderRef = (0, import_react.useRef)(null);
   var hasSearchedRef = (0, import_react.useRef)(false);
   var sortedFiltered = (0, import_react.useMemo)(function () {
@@ -1096,6 +1095,7 @@ function FloatingComboboxCore(param) {
       lastKeyboardNavTimeRef.current = Date.now();
       setActiveIndex(Math.max(0, totalNavigableItems - 1));
     } else if (event.key === "Enter" || event.key === " ") {
+      if (event.key === " " && filter.trim()) return;
       event.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
         handleCreate();
@@ -1111,7 +1111,7 @@ function FloatingComboboxCore(param) {
       event.preventDefault();
       setOpen(false);
     }
-  }, [navigableOptions, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, setKeyboardNav]);
+  }, [navigableOptions, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, filter, setKeyboardNav]);
   (0, import_react.useEffect)(function () {
     if (activeIndex == null) return;
     var scrollContainer = listScrollRef.current;
@@ -1664,19 +1664,18 @@ function NativeComboboxCore(param) {
     });
   }, [creatable, filter, options]);
   var handleCreate = (0, import_react.useCallback)(function () {
-    if (!onCreate || !filter.trim()) return;
-    var newOption = onCreate(filter.trim());
-    if (newOption) {
-      if (multiple) {
-        var current = Array.isArray(value) ? value : value ? [value] : [];
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...current, newOption.value]);
-      } else {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOption.value);
-        setOpen(false);
-      }
+    var typed = filter.trim();
+    if (!onCreate || !typed) return;
+    var newOption = onCreate(typed);
+    if (newOption && multiple) {
+      var current = Array.isArray(value) ? value : value ? [value] : [];
+      if (!current.includes(newOption.value)) onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...current, newOption.value]);
+    } else if (newOption) {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOption.value);
     }
+    if (!multiple) setOpen(false);
     setInternalFilter("");
-  }, [onCreate, filter, multiple, value, onValueChange]);
+  }, [onCreate, filter, multiple, value, onValueChange, setOpen]);
   var hasScrollableContent = Boolean(onSearch) || filtered.length > 6;
   var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
   var sortedFiltered = (0, import_react.useMemo)(function () {
@@ -2281,6 +2280,28 @@ function Combobox(param) {
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
   var [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
   var isControlled = valueProp !== void 0;
+  var [createdOptions, setCreatedOptions] = (0, import_react.useState)([]);
+  var knownOptions = (0, import_react.useMemo)(function () {
+    var unlisted = createdOptions.filter(function (c) {
+      return !options.some(function (o) {
+        return o.value === c.value;
+      });
+    });
+    return unlisted.length ? [...options, ...unlisted] : options;
+  }, [options, createdOptions]);
+  var handleCreateOption = (0, import_react.useMemo)(function () {
+    return onCreate && function (typed) {
+      var created = onCreate(typed);
+      if (created) {
+        setCreatedOptions(function (prev) {
+          return prev.some(function (o) {
+            return o.value === created.value;
+          }) ? prev : [...prev, created];
+        });
+      }
+      return created;
+    };
+  }, [onCreate]);
   var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   var shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm;
@@ -2304,10 +2325,10 @@ function Combobox(param) {
     if (multiple && Array.isArray(selectValue)) {
       var labels = selectValue.map(function (v) {
         var _ref2;
-        var _options_find;
-        return (_ref2 = (_options_find = options.find(function (o) {
+        var _knownOptions_find;
+        return (_ref2 = (_knownOptions_find = knownOptions.find(function (o) {
           return o.value === v;
-        })) === null || _options_find === void 0 ? void 0 : _options_find.label) !== null && _ref2 !== void 0 ? _ref2 : v;
+        })) === null || _knownOptions_find === void 0 ? void 0 : _knownOptions_find.label) !== null && _ref2 !== void 0 ? _ref2 : v;
       }).join(", ");
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: knobProps.sizeToken,
@@ -2320,7 +2341,7 @@ function Combobox(param) {
       });
     }
     var sv = typeof selectValue === "string" ? selectValue : void 0;
-    var selected = options.find(function (option) {
+    var selected = knownOptions.find(function (option) {
       return option.value === sv;
     });
     var displayText = (_ref = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _ref !== void 0 ? _ref : sv ? valueLabel !== null && valueLabel !== void 0 ? valueLabel : sv : "-";
@@ -2335,10 +2356,11 @@ function Combobox(param) {
     });
   };
   var renderComboboxContent = function renderComboboxContent2(selectValue, handleValueChange, handleBlur) {
+    var _createdOptions_find;
     if (readOnly) return renderReadOnly(selectValue);
     var ComboboxCore = shouldUseSheet ? NativeComboboxCore : FloatingComboboxCore;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxCore, {
-      options,
+      options: onSearch ? options : knownOptions,
       value: selectValue,
       onValueChange: function onValueChange1(value) {
         if (disabled) return;
@@ -2353,7 +2375,9 @@ function Combobox(param) {
       onSearch,
       loading,
       searchError,
-      valueLabel,
+      valueLabel: valueLabel !== null && valueLabel !== void 0 ? valueLabel : (_createdOptions_find = createdOptions.find(function (o) {
+        return o.value === selectValue;
+      })) === null || _createdOptions_find === void 0 ? void 0 : _createdOptions_find.label,
       clearable,
       onLoadMore,
       hasMore,
@@ -2370,7 +2394,7 @@ function Combobox(param) {
       selectedOrder,
       dismissible,
       creatable,
-      onCreate,
+      onCreate: handleCreateOption,
       createLabel,
       hideSearch,
       searchValue,