@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -3,7 +3,7 @@ import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, use
 import { useTranslation } from "../../shared/i18n.native.js";
 import { CaretDownIcon, CheckIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, FloatingFocusManager } from "@floating-ui/react";
-import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, useGlyphColor } from "@multiplatform.one/theme";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.native.js";
@@ -11,13 +11,14 @@ import { Skeleton } from "../../Skeleton/index.native.js";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.native.js";
 import { Input as InputParts } from "../../InputParts/index.native.js";
 import { Spinner } from "../../Spinner/index.native.js";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps.native.js";
+import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps.native.js";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.native.js";
 import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
 import { zIndex } from "../../shared/zIndex.native.js";
 import { useDragScroll } from "../../shared/useDragScroll.native.js";
 import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
+import { orderOptionsBySelected } from "../selectedOrder.native.js";
 var scrollArrowBuffer = 28;
 var ComboboxRow = styled(View, {
   name: "ComboboxRow",
@@ -65,6 +66,13 @@ function listItemRingProps(keyboardRing) {
     outlineWidth: 0
   };
 }
+function useSelectedMarkColor() {
+  var _ref, _ref1;
+  var _theme_color;
+  var theme = useTheme();
+  var entry = theme[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 = styled(Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -300,7 +308,8 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
       flex: 1,
       children: option.label
     }), isSelected && /* @__PURE__ */_jsx(CheckIcon, {
-      size: 14
+      size: 14,
+      color: ctx.markColor
     })]
   });
 });
@@ -329,6 +338,7 @@ function FloatingComboboxCore(param) {
     trigger: triggerRender,
     knobProps,
     multiple,
+    selectedOrder,
     dismissible,
     creatable,
     onCreate,
@@ -345,6 +355,7 @@ function FloatingComboboxCore(param) {
   } = useTranslation();
   var inTableCell = useIsInTableCell();
   var describedBy = useFieldDescribedBy();
+  var glyphColor = useGlyphColor();
   var [internalOpen, setInternalOpen] = useState(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = useCallback(function (nextOpen) {
@@ -358,6 +369,7 @@ function FloatingComboboxCore(param) {
   var filter = searchValue !== void 0 ? searchValue : internalFilter;
   var [activeIndex, setActiveIndex] = useState(null);
   var textColor = knobProps.textAccentColor;
+  var markColor = useSelectedMarkColor();
   var labelCacheRef = useRef(/* @__PURE__ */new Map());
   var _iteratorNormalCompletion = true,
     _didIteratorError = false,
@@ -453,26 +465,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 = 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
   } = useMemo(function () {
     return groupComboboxOptions(sortedFiltered);
   }, [sortedFiltered]);
@@ -564,8 +563,8 @@ function FloatingComboboxCore(param) {
   }, [open]);
   var activeIndexRef = useRef(activeIndex);
   activeIndexRef.current = activeIndex;
-  var sortedFilteredRef = useRef(sortedFiltered);
-  sortedFilteredRef.current = sortedFiltered;
+  var navigableOptionsRef = useRef(navigableOptions);
+  navigableOptionsRef.current = navigableOptions;
   var showCreateOptionRef = useRef(showCreateOption);
   showCreateOptionRef.current = showCreateOption;
   var multipleRef = useRef(multiple);
@@ -593,17 +592,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 - panelViewportPadding;
+        var availableAbove = dropupAnchor - 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 - panelViewportPadding;
+      var maxAvailable = isDropup ? dropupAnchor - top : viewportHeight - top - panelViewportPadding;
       var height = Math.min(contentHeight, maxAvailable);
       height = Math.max(120, height);
       dropdownElement.style.top = `${top}px`;
@@ -650,11 +651,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;
@@ -776,7 +778,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;
@@ -794,7 +796,7 @@ function FloatingComboboxCore(param) {
   }, [open, panel.refs]);
   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;
@@ -813,7 +815,7 @@ function FloatingComboboxCore(param) {
     } else {
       setActiveIndex(0);
     }
-  }, [filter, sortedFiltered.length, showCreateOption]);
+  }, [filter, navigableOptions.length, showCreateOption]);
   var click = useClick(panel.context, {
     event: "mousedown",
     keyboardHandlers: false
@@ -854,7 +856,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]);
@@ -870,7 +872,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 = useCallback(function (e) {
     var {
       clientX,
@@ -885,7 +887,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;
@@ -924,7 +926,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();
@@ -996,8 +998,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 = useCallback(function (e, _index) {
     var isDown = e.key === "j";
     var isUp = e.key === "k";
@@ -1022,6 +1024,7 @@ function FloatingComboboxCore(param) {
     onItemKeyDown: handleItemKeyDown,
     knobProps,
     textColor,
+    markColor,
     listItemsRef
   };
   var handleSearchKeyDown = useCallback(function (event) {
@@ -1065,8 +1068,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);
@@ -1075,7 +1078,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]);
   useEffect(function () {
     if (activeIndex == null) return;
     var scrollContainer = listScrollRef.current;
@@ -1139,10 +1142,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).
     {
@@ -1224,7 +1229,8 @@ function FloatingComboboxCore(param) {
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */_jsx(CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -1333,21 +1339,11 @@ function FloatingComboboxCore(param) {
               fontWeight: knobProps.body.fontWeight,
               children: searchError
             })
-          }) : sortedFiltered.length > 0 ? /* @__PURE__ */_jsxs(Fragment, {
-            children: [multiple ? sortedFiltered.map(function (option, index) {
-              return /* @__PURE__ */_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__ */_jsxs(Fragment, {
+            children: [groupedItems.map(function (item) {
               return item.type === "header" ? /* @__PURE__ */_jsx(GroupHeader, {
                 color: textColor,
+                "data-combobox-group-header": "",
                 children: item.label
               }, `header-${item.label}`) : /* @__PURE__ */_jsx(ComboboxItem, {
                 option: item.option,
@@ -1523,6 +1519,7 @@ function NativeComboboxCore(param) {
     trigger: triggerRender,
     knobProps,
     multiple,
+    selectedOrder,
     dismissible,
     creatable,
     onCreate,
@@ -1540,6 +1537,7 @@ function NativeComboboxCore(param) {
   } = useTranslation();
   var inTableCell = useIsInTableCell();
   var describedBy = useFieldDescribedBy();
+  var glyphColor = useGlyphColor();
   var [internalOpen, setInternalOpen] = useState(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = useCallback(function (nextOpen) {
@@ -1563,6 +1561,7 @@ function NativeComboboxCore(param) {
   var textColor = knobProps.textAccentColor;
   var theme = 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 = useRef(/* @__PURE__ */new Map());
   var _iteratorNormalCompletion = true,
     _didIteratorError = false,
@@ -1651,17 +1650,13 @@ function NativeComboboxCore(param) {
   var sortedFiltered = 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 orderOptionsBySelected(filtered, current, selectedOrder);
+  }, [filtered, value, filter, selectedOrder]);
+  var {
+    flatOptions: navigableOptions
+  } = useMemo(function () {
+    return groupComboboxOptions(sortedFiltered);
+  }, [sortedFiltered]);
   var searchCleanupRef = useRef(null);
   useEffect(function () {
     if (!onSearch || !open) return;
@@ -1689,8 +1684,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 = useCallback(function (option) {
@@ -1766,12 +1761,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]);
   useEffect(function () {
     if (!open || typeof document === "undefined") return;
     var onKeyDown = function onKeyDown2(e) {
@@ -1785,8 +1780,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);
@@ -1801,7 +1796,7 @@ function NativeComboboxCore(param) {
         capture: true
       });
     };
-  }, [open, activeIndex, createOptionIndex, showCreateOption, sortedFiltered, handleCreate, handleSelect, multiple]);
+  }, [open, activeIndex, createOptionIndex, showCreateOption, navigableOptions, handleCreate, handleSelect, multiple]);
   var handleOpenChange = useCallback(function (val) {
     setOpen(val);
     if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
@@ -1836,11 +1831,11 @@ function NativeComboboxCore(param) {
         fontWeight: knobProps.body.fontWeight,
         children: searchError
       })
-    }) : sortedFiltered.length > 0 ? /* @__PURE__ */_jsxs(_Fragment, {
-      children: [sortedFiltered.map(function (option, i) {
+    }) : navigableOptions.length > 0 ? /* @__PURE__ */_jsxs(_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__ */_jsxs(View, {
           flexDirection: "row",
@@ -1902,12 +1897,14 @@ function NativeComboboxCore(param) {
             flex: 1,
             children: option.label
           }), selected && /* @__PURE__ */_jsx(CheckIcon, {
-            size: 14
+            size: 14,
+            color: markColor
           })]
         });
         return /* @__PURE__ */_jsxs(View, {
           children: [showGroupHeader && /* @__PURE__ */_jsx(GroupHeader, {
             color: textColor,
+            "data-combobox-group-header": "",
             children: option.group
           }), isWeb ? optionRow : /* @__PURE__ */_jsx(RNPressable, {
             onPress: function onPress() {
@@ -2044,10 +2041,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).
     {
@@ -2149,7 +2147,8 @@ function NativeComboboxCore(param) {
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */_jsx(CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -2223,6 +2222,7 @@ function Combobox(param) {
     popoverWidth,
     tabIndex: tabIndexProp,
     multiple,
+    selectedOrder,
     dismissible,
     skeleton,
     compact,
@@ -2340,6 +2340,7 @@ function Combobox(param) {
       trigger,
       knobProps,
       multiple,
+      selectedOrder,
       dismissible,
       creatable,
       onCreate,