@multiplatform.one/forms 7.4.1 → 7.5.0

package/dist/esm/fields/Combobox/index.mjs

@@ -2,7 +2,7 @@ import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, use
 import { useTranslation } from "../../shared/i18n.mjs";
 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-web";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.mjs";
@@ -10,13 +10,14 @@ import { Skeleton } from "../../Skeleton/index.mjs";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.mjs";
 import { Input as InputParts } from "../../InputParts/index.mjs";
 import { Spinner } from "../../Spinner/index.mjs";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps.mjs";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.mjs";
 import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
 import { zIndex } from "../../shared/zIndex.mjs";
 import { useDragScroll } from "../../shared/useDragScroll.mjs";
 import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
+import { orderOptionsBySelected } from "../selectedOrder.mjs";
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 const scrollArrowBuffer = 28;
 const ComboboxRow = styled(View, {
@@ -63,6 +64,11 @@ function listItemRingProps(keyboardRing) {
     outlineWidth: 0
   };
 }
+function useSelectedMarkColor() {
+  const theme = useTheme();
+  const entry = theme[formSelectedColors.mark.slice(1)];
+  return entry?.val ?? theme.color?.val ?? "currentColor";
+}
 const GroupHeader = styled(Text, {
   name: "ComboboxGroupHeader",
   paddingHorizontal: "$3",
@@ -212,7 +218,8 @@ const ComboboxItem = memo(function ComboboxItem2({
       flex: 1,
       children: option.label
     }), isSelected && /* @__PURE__ */jsx(CheckIcon, {
-      size: 14
+      size: 14,
+      color: ctx.markColor
     })]
   });
 });
@@ -240,6 +247,7 @@ function FloatingComboboxCore({
   trigger: triggerRender,
   knobProps,
   multiple,
+  selectedOrder,
   dismissible,
   creatable,
   onCreate,
@@ -255,6 +263,7 @@ function FloatingComboboxCore({
   } = useTranslation();
   const inTableCell = useIsInTableCell();
   const describedBy = useFieldDescribedBy();
+  const glyphColor = useGlyphColor();
   const [internalOpen, setInternalOpen] = useState(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = useCallback(nextOpen => {
@@ -268,6 +277,7 @@ function FloatingComboboxCore({
   const filter = searchValue !== void 0 ? searchValue : internalFilter;
   const [activeIndex, setActiveIndex] = useState(null);
   const textColor = knobProps.textAccentColor;
+  const markColor = useSelectedMarkColor();
   const labelCacheRef = useRef(/* @__PURE__ */new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
   const getLabel = useCallback(v => labelCacheRef.current.get(v) ?? v, []);
@@ -321,20 +331,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 = 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
   } = useMemo(() => groupComboboxOptions(sortedFiltered), [sortedFiltered]);
   const searchCleanupRef = useRef(null);
   useEffect(() => {
@@ -420,8 +423,8 @@ function FloatingComboboxCore({
   }, [open]);
   const activeIndexRef = useRef(activeIndex);
   activeIndexRef.current = activeIndex;
-  const sortedFilteredRef = useRef(sortedFiltered);
-  sortedFilteredRef.current = sortedFiltered;
+  const navigableOptionsRef = useRef(navigableOptions);
+  navigableOptionsRef.current = navigableOptions;
   const showCreateOptionRef = useRef(showCreateOption);
   showCreateOptionRef.current = showCreateOption;
   const multipleRef = useRef(multiple);
@@ -448,17 +451,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 - panelViewportPadding;
+        const availableAbove = dropupAnchor - 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 - panelViewportPadding;
+      const maxAvailable2 = isDropup ? dropupAnchor - top : viewportHeight - top - panelViewportPadding;
       let height2 = Math.min(contentHeight, maxAvailable2);
       height2 = Math.max(120, height2);
       dropdownElement.style.top = `${top}px`;
@@ -503,11 +508,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;
@@ -621,7 +627,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;
@@ -636,7 +642,7 @@ function FloatingComboboxCore({
     return () => document.removeEventListener("mousemove", onMove);
   }, [open, panel.refs]);
   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;
@@ -654,7 +660,7 @@ function FloatingComboboxCore({
     } else {
       setActiveIndex(0);
     }
-  }, [filter, sortedFiltered.length, showCreateOption]);
+  }, [filter, navigableOptions.length, showCreateOption]);
   const click = useClick(panel.context, {
     event: "mousedown",
     keyboardHandlers: false
@@ -696,7 +702,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 {
@@ -708,7 +714,7 @@ function FloatingComboboxCore({
       onValueChange?.(option.value);
       setOpen(false);
     }
-  }, [onValueChange, multiple, value, sortedFiltered]);
+  }, [onValueChange, multiple, value, navigableOptions]);
   const handleListMouseMove = useCallback(e => {
     const {
       clientX,
@@ -722,7 +728,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;
@@ -761,7 +767,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();
@@ -812,8 +818,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 = useCallback((e, _index) => {
     const isDown = e.key === "j";
     const isUp = e.key === "k";
@@ -838,6 +844,7 @@ function FloatingComboboxCore({
     onItemKeyDown: handleItemKeyDown,
     knobProps,
     textColor,
+    markColor,
     listItemsRef
   };
   const handleSearchKeyDown = useCallback(event => {
@@ -881,8 +888,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);
@@ -891,7 +898,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]);
   useEffect(() => {
     if (activeIndex == null) return;
     const scrollContainer = listScrollRef.current;
@@ -951,7 +958,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).
     {
@@ -1025,7 +1032,8 @@ function FloatingComboboxCore({
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */jsx(CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -1129,18 +1137,10 @@ function FloatingComboboxCore({
               fontWeight: knobProps.body.fontWeight,
               children: searchError
             })
-          }) : sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
-            children: [multiple ? sortedFiltered.map((option, index) => /* @__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((item, _i) => item.type === "header" ? /* @__PURE__ */jsx(GroupHeader, {
+          }) : navigableOptions.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
+            children: [groupedItems.map(item => item.type === "header" ? /* @__PURE__ */jsx(GroupHeader, {
               color: textColor,
+              "data-combobox-group-header": "",
               children: item.label
             }, `header-${item.label}`) : /* @__PURE__ */jsx(ComboboxItem, {
               option: item.option,
@@ -1309,6 +1309,7 @@ function NativeComboboxCore({
   trigger: triggerRender,
   knobProps,
   multiple,
+  selectedOrder,
   dismissible,
   creatable,
   onCreate,
@@ -1324,6 +1325,7 @@ function NativeComboboxCore({
   } = useTranslation();
   const inTableCell = useIsInTableCell();
   const describedBy = useFieldDescribedBy();
+  const glyphColor = useGlyphColor();
   const [internalOpen, setInternalOpen] = useState(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = useCallback(nextOpen => {
@@ -1345,6 +1347,7 @@ function NativeComboboxCore({
   const textColor = knobProps.textAccentColor;
   const theme = useTheme();
   const mutedColor = theme.color7?.val ?? "$color7";
+  const markColor = useSelectedMarkColor();
   const labelCacheRef = useRef(/* @__PURE__ */new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
   const getLabel = useCallback(v => labelCacheRef.current.get(v) ?? v, []);
@@ -1391,11 +1394,8 @@ function NativeComboboxCore({
   const sortedFiltered = 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 orderOptionsBySelected(filtered, current, selectedOrder);
+  }, [filtered, value, filter, selectedOrder]);
   const searchCleanupRef = useRef(null);
   useEffect(() => {
     if (!onSearch || !open) return;
@@ -1621,12 +1621,14 @@ function NativeComboboxCore({
             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: () => handleSelect(option),
@@ -1759,7 +1761,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).
     {
@@ -1846,7 +1848,8 @@ function NativeComboboxCore({
       paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */jsx(CaretDownIcon, {
-        size: 16
+        size: 16,
+        color: glyphColor
       })
     })]
   });
@@ -1917,6 +1920,7 @@ function Combobox({
   popoverWidth,
   tabIndex: tabIndexProp,
   multiple,
+  selectedOrder,
   dismissible,
   skeleton,
   compact,
@@ -2025,6 +2029,7 @@ function Combobox({
       trigger,
       knobProps,
       multiple,
+      selectedOrder,
       dismissible,
       creatable,
       onCreate,