@multiplatform.one/forms 7.5.0 → 7.6.0

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

@@ -35,15 +35,15 @@ var import_react3 = require("@floating-ui/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
-var import_Chip = require("../../Chip/index.native.js");
-var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_Chip = require("../../Chip");
+var import_Skeleton = require("../../Skeleton");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_InputParts = require("../../InputParts/index.native.js");
-var import_Spinner = require("../../Spinner/index.native.js");
+var import_InputParts = require("../../InputParts");
+var import_Spinner = require("../../Spinner");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_floatingList = require("../../shared/floatingList.native.js");
-var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
+var import_FloatingPanel = require("../../FloatingPanel");
 var import_zIndex = require("../../shared/zIndex.native.js");
 var import_useDragScroll = require("../../shared/useDragScroll.native.js");
 var import_tableCellContext = require("../../shared/tableCellContext.native.js");
@@ -1681,6 +1681,11 @@ function NativeComboboxCore(param) {
     var current = Array.isArray(value) ? value : value ? [value] : [];
     return (0, import_selectedOrder.orderOptionsBySelected)(filtered, current, selectedOrder);
   }, [filtered, value, filter, selectedOrder]);
+  var {
+    flatOptions: navigableOptions
+  } = (0, import_react.useMemo)(function () {
+    return groupComboboxOptions(sortedFiltered);
+  }, [sortedFiltered]);
   var searchCleanupRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(function () {
     if (!onSearch || !open) return;
@@ -1708,8 +1713,8 @@ function NativeComboboxCore(param) {
       setInternalFilter("");
     }
   }, [open]);
-  var totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
-  var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  var totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
+  var createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   var listboxId = comboboxListboxId(id);
   var activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   var handleSelect = (0, import_react.useCallback)(function (option) {
@@ -1785,12 +1790,12 @@ function NativeComboboxCore(param) {
       e.preventDefault();
       if (activeIndex === createOptionIndex && showCreateOption) {
         handleCreate();
-      } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
-        handleSelect(sortedFiltered[activeIndex]);
+      } else if (activeIndex != null && activeIndex >= 0 && navigableOptions[activeIndex]) {
+        handleSelect(navigableOptions[activeIndex]);
         if (e.key === "Enter" || !multiple) setOpen(false);
       }
     }
-  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple, setKeyboardNav]);
+  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, navigableOptions, handleCreate, handleSelect, multiple, setKeyboardNav]);
   (0, import_react.useEffect)(function () {
     if (!open || typeof document === "undefined") return;
     var onKeyDown = function onKeyDown2(e) {
@@ -1804,8 +1809,8 @@ function NativeComboboxCore(param) {
         e.stopPropagation();
         if (activeIndex === createOptionIndex && showCreateOption) {
           handleCreate();
-        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
-          handleSelect(sortedFiltered[activeIndex]);
+        } else if (activeIndex != null && activeIndex >= 0 && navigableOptions[activeIndex]) {
+          handleSelect(navigableOptions[activeIndex]);
           if (e.key === "Enter" || !multiple) setOpen(false);
         } else {
           setOpen(false);
@@ -1820,7 +1825,7 @@ function NativeComboboxCore(param) {
         capture: true
       });
     };
-  }, [open, activeIndex, createOptionIndex, showCreateOption, sortedFiltered, handleCreate, handleSelect, multiple]);
+  }, [open, activeIndex, createOptionIndex, showCreateOption, navigableOptions, handleCreate, handleSelect, multiple]);
   var handleOpenChange = (0, import_react.useCallback)(function (val) {
     setOpen(val);
     if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
@@ -1855,11 +1860,11 @@ function NativeComboboxCore(param) {
         fontWeight: knobProps.body.fontWeight,
         children: searchError
       })
-    }) : sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [sortedFiltered.map(function (option, i) {
+    }) : navigableOptions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [navigableOptions.map(function (option, i) {
         var selected = isSelectedFn(option.value);
         var active = i === activeIndex;
-        var prevGroup = i > 0 ? sortedFiltered[i - 1].group : void 0;
+        var prevGroup = i > 0 ? navigableOptions[i - 1].group : void 0;
         var showGroupHeader = option.group && option.group !== prevGroup;
         var optionRow = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
           flexDirection: "row",