@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -44,6 +44,7 @@ var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_zIndex = require("../../shared/zIndex.cjs");
 var import_useDragScroll = require("../../shared/useDragScroll.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
+var import_selectedOrder = require("../selectedOrder.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const scrollArrowBuffer = 28;
 const ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
@@ -90,6 +91,11 @@ function listItemRingProps(keyboardRing) {
     outlineWidth: 0
   };
 }
+function useSelectedMarkColor() {
+  const theme = (0, import_tamagui.useTheme)();
+  const entry = theme[import_colorRamps.formSelectedColors.mark.slice(1)];
+  return entry?.val ?? theme.color?.val ?? "currentColor";
+}
 const GroupHeader = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -239,7 +245,8 @@ const ComboboxItem = (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
     })]
   });
 });
@@ -267,6 +274,7 @@ function FloatingComboboxCore({
   trigger: triggerRender,
   knobProps,
   multiple,
+  selectedOrder,
   dismissible,
   creatable,
   onCreate,
@@ -282,6 +290,7 @@ function FloatingComboboxCore({
   } = (0, import_i18n.useTranslation)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const glyphColor = (0, import_theme.useGlyphColor)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = (0, import_react.useCallback)(nextOpen => {
@@ -295,6 +304,7 @@ function FloatingComboboxCore({
   const filter = searchValue !== void 0 ? searchValue : internalFilter;
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   const textColor = knobProps.textAccentColor;
+  const markColor = useSelectedMarkColor();
   const labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
   const getLabel = (0, import_react.useCallback)(v => labelCacheRef.current.get(v) ?? v, []);
@@ -348,20 +358,13 @@ function FloatingComboboxCore({
     if (hasSearchedRef.current) return filtered;
     if (initialOrderRef.current === null) {
       const current = Array.isArray(value) ? value : value ? [value] : [];
-      const snap = new Set(current);
-      if (snap.size === 0) {
-        initialOrderRef.current = filtered;
-      } else {
-        const first = filtered.filter(o => snap.has(o.value)).sort((a, b) => a.label.localeCompare(b.label));
-        const rest = filtered.filter(o => !snap.has(o.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]);
   const {
     items: groupedItems,
-    flatOptions: _flatOptions
+    flatOptions: navigableOptions
   } = (0, import_react.useMemo)(() => groupComboboxOptions(sortedFiltered), [sortedFiltered]);
   const searchCleanupRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
@@ -447,8 +450,8 @@ function FloatingComboboxCore({
   }, [open]);
   const activeIndexRef = (0, import_react.useRef)(activeIndex);
   activeIndexRef.current = activeIndex;
-  const sortedFilteredRef = (0, import_react.useRef)(sortedFiltered);
-  sortedFilteredRef.current = sortedFiltered;
+  const navigableOptionsRef = (0, import_react.useRef)(navigableOptions);
+  navigableOptionsRef.current = navigableOptions;
   const showCreateOptionRef = (0, import_react.useRef)(showCreateOption);
   showCreateOptionRef.current = showCreateOption;
   const multipleRef = (0, import_react.useRef)(multiple);
@@ -475,17 +478,19 @@ function FloatingComboboxCore({
     const borderHeight = (parseFloat(computedStyle.borderTopWidth) || 0) + (parseFloat(computedStyle.borderBottomWidth) || 0);
     const contentHeight = searchBarHeight + listContentHeight + borderHeight;
     const isDropup = panel.placement.startsWith("top");
+    const coversTrigger = !multipleRef.current;
     let top;
     if (searchTopRef.current === null) {
+      const dropupAnchor = coversTrigger ? triggerBounds.bottom : triggerBounds.top;
       if (isDropup) {
-        const availableAbove = triggerBounds.bottom - import_FloatingPanel.panelViewportPadding;
+        const availableAbove = dropupAnchor - import_FloatingPanel.panelViewportPadding;
         const 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;
-      const maxAvailable2 = isDropup ? triggerBounds.bottom - top : viewportHeight - top - import_FloatingPanel.panelViewportPadding;
+      const maxAvailable2 = isDropup ? dropupAnchor - top : viewportHeight - top - import_FloatingPanel.panelViewportPadding;
       let height2 = Math.min(contentHeight, maxAvailable2);
       height2 = Math.max(120, height2);
       dropdownElement.style.top = `${top}px`;
@@ -530,11 +535,12 @@ function FloatingComboboxCore({
       const triggerTop = triggerBounds.top;
       const triggerBottom = triggerBounds.bottom;
       if (!isDropup) {
-        top = Math.min(top, triggerTop);
+        top = coversTrigger ? Math.min(top, triggerTop) : triggerBottom;
       } else {
+        const floor = coversTrigger ? triggerBottom : triggerTop;
         const panelBottom = top + height2;
-        if (panelBottom < triggerBottom) {
-          top = triggerBottom - height2;
+        if (panelBottom < floor) {
+          top = floor - height2;
         }
       }
       searchTopRef.current = top;
@@ -648,7 +654,7 @@ function FloatingComboboxCore({
       if (!el || !floating.contains(el)) return;
       const row = el.closest?.("[data-combobox-index]");
       const actualIndex = row?.getAttribute("data-combobox-index");
-      const list = sortedFilteredRef.current;
+      const list = navigableOptionsRef.current;
       const len = list.length + (showCreateOptionRef.current ? 1 : 0);
       const activeIdx = activeIndexRef.current;
       const n = actualIndex != null ? Number(actualIndex) : null;
@@ -663,7 +669,7 @@ function FloatingComboboxCore({
     return () => document.removeEventListener("mousemove", onMove);
   }, [open, panel.refs]);
   (0, import_react.useLayoutEffect)(() => {
-    const len = sortedFiltered.length + (showCreateOption ? 1 : 0);
+    const len = navigableOptions.length + (showCreateOption ? 1 : 0);
     listItemsRef.current.length = len;
     justResetFromFilterRef.current = true;
     const rawPos = currentMousePosRef.current ?? lastMousePosRef.current;
@@ -681,7 +687,7 @@ function FloatingComboboxCore({
     } else {
       setActiveIndex(0);
     }
-  }, [filter, sortedFiltered.length, showCreateOption]);
+  }, [filter, navigableOptions.length, showCreateOption]);
   const click = (0, import_react3.useClick)(panel.context, {
     event: "mousedown",
     keyboardHandlers: false
@@ -723,7 +729,7 @@ function FloatingComboboxCore({
       if (event?.shiftKey && lastSelectedIndexRef.current != null) {
         const from = Math.min(lastSelectedIndexRef.current, index);
         const to = Math.max(lastSelectedIndexRef.current, index);
-        const rangeValues = sortedFiltered.slice(from, to + 1).map(o => o.value);
+        const rangeValues = navigableOptions.slice(from, to + 1).map(o => o.value);
         const merged = /* @__PURE__ */new Set([...current, ...rangeValues]);
         onValueChange?.([...merged]);
       } else {
@@ -735,7 +741,7 @@ function FloatingComboboxCore({
       onValueChange?.(option.value);
       setOpen(false);
     }
-  }, [onValueChange, multiple, value, sortedFiltered]);
+  }, [onValueChange, multiple, value, navigableOptions]);
   const handleListMouseMove = (0, import_react.useCallback)(e => {
     const {
       clientX,
@@ -749,7 +755,7 @@ function FloatingComboboxCore({
       const el = document.elementFromPoint(clientX, clientY);
       const row = el?.closest?.("[data-combobox-index]");
       const actualIndex = row?.getAttribute("data-combobox-index");
-      const list = sortedFilteredRef.current;
+      const list = navigableOptionsRef.current;
       const len = list.length + (showCreateOptionRef.current ? 1 : 0);
       const activeIdx = activeIndexRef.current;
       const n = actualIndex != null ? Number(actualIndex) : null;
@@ -788,7 +794,7 @@ function FloatingComboboxCore({
         e.preventDefault();
         e.stopPropagation();
         const idx = activeIndexRef.current;
-        const list = sortedFilteredRef.current;
+        const list = navigableOptionsRef.current;
         const createIdx = showCreateOptionRef.current ? list.length : -1;
         if (idx === createIdx && showCreateOptionRef.current) {
           handleCreate();
@@ -839,8 +845,8 @@ function FloatingComboboxCore({
   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;
-  const totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
-  const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const totalNavigableItems = navigableOptions.length + (showCreateOption ? 1 : 0);
+  const createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   const handleItemKeyDown = (0, import_react.useCallback)((e, _index) => {
     const isDown = e.key === "j";
     const isUp = e.key === "k";
@@ -865,6 +871,7 @@ function FloatingComboboxCore({
     onItemKeyDown: handleItemKeyDown,
     knobProps,
     textColor,
+    markColor,
     listItemsRef
   };
   const handleSearchKeyDown = (0, import_react.useCallback)(event => {
@@ -908,8 +915,8 @@ function FloatingComboboxCore({
         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);
@@ -918,7 +925,7 @@ function FloatingComboboxCore({
       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)(() => {
     if (activeIndex == null) return;
     const scrollContainer = listScrollRef.current;
@@ -978,7 +985,7 @@ function FloatingComboboxCore({
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
-    suppressFocusRing: open,
+    suppressFocusRing: open && !multiple,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1052,7 +1059,8 @@ function FloatingComboboxCore({
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -1156,18 +1164,10 @@ function FloatingComboboxCore({
               fontWeight: knobProps.body.fontWeight,
               children: searchError
             })
-          }) : sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-            children: [multiple ? sortedFiltered.map((option, index) => /* @__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((item, _i) => item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+          }) : navigableOptions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+            children: [groupedItems.map(item => 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,
@@ -1336,6 +1336,7 @@ function NativeComboboxCore({
   trigger: triggerRender,
   knobProps,
   multiple,
+  selectedOrder,
   dismissible,
   creatable,
   onCreate,
@@ -1351,6 +1352,7 @@ function NativeComboboxCore({
   } = (0, import_i18n.useTranslation)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const glyphColor = (0, import_theme.useGlyphColor)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = (0, import_react.useCallback)(nextOpen => {
@@ -1372,6 +1374,7 @@ function NativeComboboxCore({
   const textColor = knobProps.textAccentColor;
   const theme = (0, import_tamagui.useTheme)();
   const mutedColor = theme.color7?.val ?? "$color7";
+  const markColor = useSelectedMarkColor();
   const labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
   const getLabel = (0, import_react.useCallback)(v => labelCacheRef.current.get(v) ?? v, []);
@@ -1418,11 +1421,11 @@ function NativeComboboxCore({
   const sortedFiltered = (0, import_react.useMemo)(() => {
     if (filter.trim()) return filtered;
     const current = Array.isArray(value) ? value : value ? [value] : [];
-    if (current.length === 0) return filtered;
-    const first = filtered.filter(o => current.includes(o.value)).sort((a, b) => getLabel(a.value).localeCompare(getLabel(b.value)));
-    const rest = filtered.filter(o => !current.includes(o.value));
-    return [...first, ...rest];
-  }, [filtered, value, filter, getLabel]);
+    return (0, import_selectedOrder.orderOptionsBySelected)(filtered, current, selectedOrder);
+  }, [filtered, value, filter, selectedOrder]);
+  const {
+    flatOptions: navigableOptions
+  } = (0, import_react.useMemo)(() => groupComboboxOptions(sortedFiltered), [sortedFiltered]);
   const searchCleanupRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (!onSearch || !open) return;
@@ -1445,8 +1448,8 @@ function NativeComboboxCore({
       setInternalFilter("");
     }
   }, [open]);
-  const totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
-  const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
+  const createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   const listboxId = comboboxListboxId(id);
   const activeDescendant = open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : void 0;
   const handleSelect = (0, import_react.useCallback)(option => {
@@ -1518,12 +1521,12 @@ function NativeComboboxCore({
       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)(() => {
     if (!open || typeof document === "undefined") return;
     const onKeyDown = e => {
@@ -1537,8 +1540,8 @@ function NativeComboboxCore({
         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);
@@ -1551,7 +1554,7 @@ function NativeComboboxCore({
     return () => document.removeEventListener("keydown", onKeyDown, {
       capture: true
     });
-  }, [open, activeIndex, createOptionIndex, showCreateOption, sortedFiltered, handleCreate, handleSelect, multiple]);
+  }, [open, activeIndex, createOptionIndex, showCreateOption, navigableOptions, handleCreate, handleSelect, multiple]);
   const handleOpenChange = (0, import_react.useCallback)(val => {
     setOpen(val);
     if (!val) onBlur?.();
@@ -1584,11 +1587,11 @@ function NativeComboboxCore({
         fontWeight: knobProps.body.fontWeight,
         children: searchError
       })
-    }) : sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [sortedFiltered.map((option, i) => {
+    }) : navigableOptions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [navigableOptions.map((option, i) => {
         const selected = isSelectedFn(option.value);
         const active = i === activeIndex;
-        const prevGroup = i > 0 ? sortedFiltered[i - 1].group : void 0;
+        const prevGroup = i > 0 ? navigableOptions[i - 1].group : void 0;
         const showGroupHeader = option.group && option.group !== prevGroup;
         const optionRow = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
           flexDirection: "row",
@@ -1648,12 +1651,14 @@ function NativeComboboxCore({
             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: () => handleSelect(option),
@@ -1786,7 +1791,7 @@ function NativeComboboxCore({
     cursor: disabled ? "not-allowed" : "pointer",
     disabled,
     size: knobProps.sizeToken,
-    suppressFocusRing: open,
+    suppressFocusRing: open && !multiple,
     ...(inTableCell ?
     // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
     {
@@ -1873,7 +1878,8 @@ function NativeComboboxCore({
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -1944,6 +1950,7 @@ function Combobox({
   popoverWidth,
   tabIndex: tabIndexProp,
   multiple,
+  selectedOrder,
   dismissible,
   skeleton,
   compact,
@@ -2052,6 +2059,7 @@ function Combobox({
       trigger,
       knobProps,
       multiple,
+      selectedOrder,
       dismissible,
       creatable,
       onCreate,