@multiplatform.one/forms 7.4.1 → 7.5.0

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

@@ -35,18 +35,19 @@ 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");
-var import_Skeleton = require("../../Skeleton");
+var import_Chip = require("../../Chip/index.native.js");
+var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_InputParts = require("../../InputParts");
-var import_Spinner = require("../../Spinner");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_Spinner = require("../../Spinner/index.native.js");
 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");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
 var import_zIndex = require("../../shared/zIndex.native.js");
 var import_useDragScroll = require("../../shared/useDragScroll.native.js");
 var import_tableCellContext = require("../../shared/tableCellContext.native.js");
+var import_selectedOrder = require("../selectedOrder.native.js");
 var scrollArrowBuffer = 28;
 var ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "ComboboxRow",
@@ -94,6 +95,13 @@ function listItemRingProps(keyboardRing) {
     outlineWidth: 0
   };
 }
+function useSelectedMarkColor() {
+  var _ref, _ref1;
+  var _theme_color;
+  var theme = (0, import_tamagui.useTheme)();
+  var entry = theme[import_colorRamps.formSelectedColors.mark.slice(1)];
+  return (_ref = (_ref1 = entry === null || entry === void 0 ? void 0 : entry.val) !== null && _ref1 !== void 0 ? _ref1 : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val) !== null && _ref !== void 0 ? _ref : "currentColor";
+}
 var GroupHeader = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -329,7 +337,8 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
       flex: 1,
       children: option.label
     }), isSelected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-      size: 14
+      size: 14,
+      color: ctx.markColor
     })]
   });
 });
@@ -358,6 +367,7 @@ function FloatingComboboxCore(param) {
     trigger: triggerRender,
     knobProps,
     multiple,
+    selectedOrder,
     dismissible,
     creatable,
     onCreate,
@@ -374,6 +384,7 @@ function FloatingComboboxCore(param) {
   } = (0, import_i18n.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var glyphColor = (0, import_theme.useGlyphColor)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = (0, import_react.useCallback)(function (nextOpen) {
@@ -387,6 +398,7 @@ function FloatingComboboxCore(param) {
   var filter = searchValue !== void 0 ? searchValue : internalFilter;
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   var textColor = knobProps.textAccentColor;
+  var markColor = useSelectedMarkColor();
   var labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
   var _iteratorNormalCompletion = true,
     _didIteratorError = false,
@@ -482,26 +494,13 @@ function FloatingComboboxCore(param) {
     if (hasSearchedRef.current) return filtered;
     if (initialOrderRef.current === null) {
       var current = Array.isArray(value) ? value : value ? [value] : [];
-      var snap = new Set(current);
-      if (snap.size === 0) {
-        initialOrderRef.current = filtered;
-      } else {
-        var first = filtered.filter(function (o2) {
-          return snap.has(o2.value);
-        }).sort(function (a, b) {
-          return a.label.localeCompare(b.label);
-        });
-        var rest = filtered.filter(function (o2) {
-          return !snap.has(o2.value);
-        });
-        initialOrderRef.current = [...first, ...rest];
-      }
+      initialOrderRef.current = (0, import_selectedOrder.orderOptionsBySelected)(filtered, current, selectedOrder);
     }
     return initialOrderRef.current;
-  }, [filtered, filter, open, multiple, value]);
+  }, [filtered, filter, open, multiple, value, selectedOrder]);
   var {
     items: groupedItems,
-    flatOptions: _flatOptions
+    flatOptions: navigableOptions
   } = (0, import_react.useMemo)(function () {
     return groupComboboxOptions(sortedFiltered);
   }, [sortedFiltered]);
@@ -593,8 +592,8 @@ function FloatingComboboxCore(param) {
   }, [open]);
   var activeIndexRef = (0, import_react.useRef)(activeIndex);
   activeIndexRef.current = activeIndex;
-  var sortedFilteredRef = (0, import_react.useRef)(sortedFiltered);
-  sortedFilteredRef.current = sortedFiltered;
+  var navigableOptionsRef = (0, import_react.useRef)(navigableOptions);
+  navigableOptionsRef.current = navigableOptions;
   var showCreateOptionRef = (0, import_react.useRef)(showCreateOption);
   showCreateOptionRef.current = showCreateOption;
   var multipleRef = (0, import_react.useRef)(multiple);
@@ -622,17 +621,19 @@ function FloatingComboboxCore(param) {
     var borderHeight = (parseFloat(computedStyle.borderTopWidth) || 0) + (parseFloat(computedStyle.borderBottomWidth) || 0);
     var contentHeight = searchBarHeight + listContentHeight + borderHeight;
     var isDropup = panel.placement.startsWith("top");
+    var coversTrigger = !multipleRef.current;
     var top;
     if (searchTopRef.current === null) {
+      var dropupAnchor = coversTrigger ? triggerBounds.bottom : triggerBounds.top;
       if (isDropup) {
-        var availableAbove = triggerBounds.bottom - import_FloatingPanel.panelViewportPadding;
+        var availableAbove = dropupAnchor - import_FloatingPanel.panelViewportPadding;
         var initialHeight = Math.min(contentHeight, availableAbove);
-        top = triggerBounds.bottom - initialHeight;
+        top = dropupAnchor - initialHeight;
       } else {
-        top = triggerBounds.top;
+        top = coversTrigger ? triggerBounds.top : triggerBounds.bottom;
       }
       searchTopRef.current = top;
-      var maxAvailable = isDropup ? triggerBounds.bottom - top : viewportHeight - top - import_FloatingPanel.panelViewportPadding;
+      var maxAvailable = isDropup ? dropupAnchor - top : viewportHeight - top - import_FloatingPanel.panelViewportPadding;
       var height = Math.min(contentHeight, maxAvailable);
       height = Math.max(120, height);
       dropdownElement.style.top = `${top}px`;
@@ -679,11 +680,12 @@ function FloatingComboboxCore(param) {
       var triggerTop = triggerBounds.top;
       var triggerBottom = triggerBounds.bottom;
       if (!isDropup) {
-        top = Math.min(top, triggerTop);
+        top = coversTrigger ? Math.min(top, triggerTop) : triggerBottom;
       } else {
+        var floor = coversTrigger ? triggerBottom : triggerTop;
         var panelBottom = top + height1;
-        if (panelBottom < triggerBottom) {
-          top = triggerBottom - height1;
+        if (panelBottom < floor) {
+          top = floor - height1;
         }
       }
       searchTopRef.current = top;
@@ -805,7 +807,7 @@ function FloatingComboboxCore(param) {
       if (!el || !floating.contains(el)) return;
       var row = (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-combobox-index]");
       var actualIndex = row === null || row === void 0 ? void 0 : row.getAttribute("data-combobox-index");
-      var list = sortedFilteredRef.current;
+      var list = navigableOptionsRef.current;
       var len = list.length + (showCreateOptionRef.current ? 1 : 0);
       var activeIdx = activeIndexRef.current;
       var n = actualIndex != null ? Number(actualIndex) : null;
@@ -823,7 +825,7 @@ function FloatingComboboxCore(param) {
   }, [open, panel.refs]);
   (0, import_react.useLayoutEffect)(function () {
     var _currentMousePosRef_current;
-    var len = sortedFiltered.length + (showCreateOption ? 1 : 0);
+    var len = navigableOptions.length + (showCreateOption ? 1 : 0);
     listItemsRef.current.length = len;
     justResetFromFilterRef.current = true;
     var rawPos = (_currentMousePosRef_current = currentMousePosRef.current) !== null && _currentMousePosRef_current !== void 0 ? _currentMousePosRef_current : lastMousePosRef.current;
@@ -842,7 +844,7 @@ function FloatingComboboxCore(param) {
     } else {
       setActiveIndex(0);
     }
-  }, [filter, sortedFiltered.length, showCreateOption]);
+  }, [filter, navigableOptions.length, showCreateOption]);
   var click = (0, import_react3.useClick)(panel.context, {
     event: "mousedown",
     keyboardHandlers: false
@@ -883,7 +885,7 @@ function FloatingComboboxCore(param) {
       if ((event === null || event === void 0 ? void 0 : event.shiftKey) && lastSelectedIndexRef.current != null) {
         var from = Math.min(lastSelectedIndexRef.current, index);
         var to = Math.max(lastSelectedIndexRef.current, index);
-        var rangeValues = sortedFiltered.slice(from, to + 1).map(function (o2) {
+        var rangeValues = navigableOptions.slice(from, to + 1).map(function (o2) {
           return o2.value;
         });
         var merged = /* @__PURE__ */new Set([...current, ...rangeValues]);
@@ -899,7 +901,7 @@ function FloatingComboboxCore(param) {
       onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(option.value);
       setOpen(false);
     }
-  }, [onValueChange, multiple, value, sortedFiltered]);
+  }, [onValueChange, multiple, value, navigableOptions]);
   var handleListMouseMove = (0, import_react.useCallback)(function (e) {
     var {
       clientX,
@@ -914,7 +916,7 @@ function FloatingComboboxCore(param) {
       var el = document.elementFromPoint(clientX, clientY);
       var row = el === null || el === void 0 ? void 0 : (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-combobox-index]");
       var actualIndex = row === null || row === void 0 ? void 0 : row.getAttribute("data-combobox-index");
-      var list = sortedFilteredRef.current;
+      var list = navigableOptionsRef.current;
       var len = list.length + (showCreateOptionRef.current ? 1 : 0);
       var activeIdx = activeIndexRef.current;
       var n = actualIndex != null ? Number(actualIndex) : null;
@@ -953,7 +955,7 @@ function FloatingComboboxCore(param) {
         e.preventDefault();
         e.stopPropagation();
         var idx = activeIndexRef.current;
-        var list = sortedFilteredRef.current;
+        var list = navigableOptionsRef.current;
         var createIdx = showCreateOptionRef.current ? list.length : -1;
         if (idx === createIdx && showCreateOptionRef.current) {
           handleCreate();
@@ -1025,8 +1027,8 @@ function FloatingComboboxCore(param) {
   if (id) boxEventProps.id = id;
   if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (!(hasLabel && id) && placeholder) boxEventProps["aria-label"] = placeholder;
   if (describedBy) boxEventProps["aria-describedby"] = describedBy;
-  var totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
-  var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  var totalNavigableItems = navigableOptions.length + (showCreateOption ? 1 : 0);
+  var createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   var handleItemKeyDown = (0, import_react.useCallback)(function (e, _index) {
     var isDown = e.key === "j";
     var isUp = e.key === "k";
@@ -1051,6 +1053,7 @@ function FloatingComboboxCore(param) {
     onItemKeyDown: handleItemKeyDown,
     knobProps,
     textColor,
+    markColor,
     listItemsRef
   };
   var handleSearchKeyDown = (0, import_react.useCallback)(function (event) {
@@ -1094,8 +1097,8 @@ function FloatingComboboxCore(param) {
         handleCreate();
       } else if (event.key === "Enter" && multiple && hasSelectedSinceOpenRef.current) {
         setOpen(false);
-      } else if (activeIndex != null && sortedFiltered[activeIndex]) {
-        handleSelect(sortedFiltered[activeIndex], activeIndex);
+      } else if (activeIndex != null && navigableOptions[activeIndex]) {
+        handleSelect(navigableOptions[activeIndex], activeIndex);
         if (event.key === "Enter" || !multiple) setOpen(false);
       } else {
         setOpen(false);
@@ -1104,7 +1107,7 @@ function FloatingComboboxCore(param) {
       event.preventDefault();
       setOpen(false);
     }
-  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, setKeyboardNav]);
+  }, [navigableOptions, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple, setKeyboardNav]);
   (0, import_react.useEffect)(function () {
     if (activeIndex == null) return;
     var scrollContainer = listScrollRef.current;
@@ -1168,10 +1171,12 @@ function FloatingComboboxCore(param) {
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
-    // One surface owner (OVERLAY_ANCHOR_GAP rule): the open panel covers
-    // this trigger (panel top = trigger top), so the trigger's outer focus
-    // ring must not paint — it would ghost around the panel's corners.
-    suppressFocusRing: open,
+    // One surface owner: a single-value panel COVERS this trigger (panel
+    // top = trigger top), so the trigger's outer focus ring must not paint
+    // — it would ghost around the panel's corners. A multi-select panel
+    // attaches below instead (MPO-38), leaving the trigger on screen and
+    // focusable, so it keeps its ring.
+    suppressFocusRing: open && !multiple,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1253,7 +1258,8 @@ function FloatingComboboxCore(param) {
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -1362,21 +1368,11 @@ function FloatingComboboxCore(param) {
               fontWeight: knobProps.body.fontWeight,
               children: searchError
             })
-          }) : sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-            children: [multiple ? sortedFiltered.map(function (option, index) {
-              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
-                option,
-                index,
-                optionId: comboboxOptionId(id, index),
-                isSelected: isSelected(option.value),
-                isActive: index === activeIndex,
-                keyboardRing: index === activeIndex && listKeyboardRing,
-                suppressHover: activeIndex != null,
-                handlers: handlersRef
-              }, option.value);
-            }) : groupedItems.map(function (item, _i) {
+          }) : navigableOptions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+            children: [groupedItems.map(function (item) {
               return item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
                 color: textColor,
+                "data-combobox-group-header": "",
                 children: item.label
               }, `header-${item.label}`) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
                 option: item.option,
@@ -1552,6 +1548,7 @@ function NativeComboboxCore(param) {
     trigger: triggerRender,
     knobProps,
     multiple,
+    selectedOrder,
     dismissible,
     creatable,
     onCreate,
@@ -1569,6 +1566,7 @@ function NativeComboboxCore(param) {
   } = (0, import_i18n.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var glyphColor = (0, import_theme.useGlyphColor)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = (0, import_react.useCallback)(function (nextOpen) {
@@ -1592,6 +1590,7 @@ function NativeComboboxCore(param) {
   var textColor = knobProps.textAccentColor;
   var theme = (0, import_tamagui.useTheme)();
   var mutedColor = (_ref = (_theme_color7 = theme.color7) === null || _theme_color7 === void 0 ? void 0 : _theme_color7.val) !== null && _ref !== void 0 ? _ref : "$color7";
+  var markColor = useSelectedMarkColor();
   var labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
   var _iteratorNormalCompletion = true,
     _didIteratorError = false,
@@ -1680,17 +1679,8 @@ function NativeComboboxCore(param) {
   var sortedFiltered = (0, import_react.useMemo)(function () {
     if (filter.trim()) return filtered;
     var current = Array.isArray(value) ? value : value ? [value] : [];
-    if (current.length === 0) return filtered;
-    var first = filtered.filter(function (o2) {
-      return current.includes(o2.value);
-    }).sort(function (a, b) {
-      return getLabel(a.value).localeCompare(getLabel(b.value));
-    });
-    var rest = filtered.filter(function (o2) {
-      return !current.includes(o2.value);
-    });
-    return [...first, ...rest];
-  }, [filtered, value, filter, getLabel]);
+    return (0, import_selectedOrder.orderOptionsBySelected)(filtered, current, selectedOrder);
+  }, [filtered, value, filter, selectedOrder]);
   var searchCleanupRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(function () {
     if (!onSearch || !open) return;
@@ -1931,12 +1921,14 @@ function NativeComboboxCore(param) {
             flex: 1,
             children: option.label
           }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-            size: 14
+            size: 14,
+            color: markColor
           })]
         });
         return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
           children: [showGroupHeader && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
             color: textColor,
+            "data-combobox-group-header": "",
             children: option.group
           }), import_tamagui.isWeb ? optionRow : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
             onPress: function onPress() {
@@ -2073,10 +2065,11 @@ function NativeComboboxCore(param) {
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
-    // One surface owner (OVERLAY_ANCHOR_GAP rule): the open FloatingPanel
-    // covers this trigger (panel top = trigger top), so the trigger's outer
-    // focus ring must not paint — it would ghost around the panel's corners.
-    suppressFocusRing: open,
+    // One surface owner: a single-value FloatingPanel COVERS this trigger
+    // (panel top = trigger top), so the trigger's outer focus ring must not
+    // paint — it would ghost around the panel's corners. A multi-select
+    // panel attaches below instead (MPO-38), so it keeps its ring.
+    suppressFocusRing: open && !multiple,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -2178,7 +2171,8 @@ function NativeComboboxCore(param) {
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -2252,6 +2246,7 @@ function Combobox(param) {
     popoverWidth,
     tabIndex: tabIndexProp,
     multiple,
+    selectedOrder,
     dismissible,
     skeleton,
     compact,
@@ -2369,6 +2364,7 @@ function Combobox(param) {
       trigger,
       knobProps,
       multiple,
+      selectedOrder,
       dismissible,
       creatable,
       onCreate,