@multiplatform.one/forms 7.4.1 → 7.6.0

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

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
-import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, sizeRecipeForToken, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, sizeRecipeForToken, useGlyphColor, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { Pressable as RNPressable } from "react-native";
-import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Paragraph, Text, View, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.native.js";
 import { Skeleton } from "../../Skeleton/index.native.js";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.native.js";
 import { Input as InputParts, FocusContext } from "../../InputParts/index.native.js";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps.native.js";
+import { formCommonColors, formInputColors, formSelectedColors } from "../../shared/colorRamps.native.js";
 import { warnSelectTooFewOptions } from "../../shared/devWarn.native.js";
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { ScrollArrow } from "../../shared/floatingList.native.js";
@@ -18,6 +18,7 @@ import { zIndex } from "../../shared/zIndex.native.js";
 import { useDragScroll } from "../../shared/useDragScroll.native.js";
 import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
 import { t } from "../../shared/t.native.js";
+import { orderOptionsBySelected } from "../selectedOrder.native.js";
 var selectRowOutlineRest = {
   outlineWidth: 0,
   outlineStyle: "solid",
@@ -262,6 +263,13 @@ function selectItemRingProps(isActive, kbNav) {
     "data-kb-ring": void 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";
+}
 function SyncKeyboardFocusToBox(param) {
   var {
     active
@@ -375,7 +383,8 @@ var SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
       flex: 1,
       children: option.label
     }), isSelected && /* @__PURE__ */_jsx(CheckIcon, {
-      size: 14
+      size: 14,
+      color: ctx.markColor
     })]
   });
 });
@@ -393,12 +402,14 @@ function FloatingSelectCore(param) {
     knobProps,
     groupLabel,
     multiple,
+    selectedOrder,
     dismissible
   } = param;
   var _ref, _ref1, _ref2, _panel_x;
   var _overlayStyle_current;
   var inTableCell = useIsInTableCell();
   var describedBy = useFieldDescribedBy();
+  var glyphColor = useGlyphColor();
   var [open, setOpen] = useState(false);
   var [activeIndex, setActiveIndex] = useState(null);
   var [controlledScrolling, setControlledScrolling] = useState(false);
@@ -468,6 +479,7 @@ function FloatingSelectCore(param) {
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
   }, [multiple, value, onValueChange]);
   var textColor = knobProps.textAccentColor;
+  var markColor = useSelectedMarkColor();
   var listItemsRef = useRef([]);
   var listContentRef = useRef(options.map(function (option) {
     return option.label;
@@ -491,21 +503,8 @@ function FloatingSelectCore(param) {
       return;
     }
     var selected = Array.isArray(value) ? value : value ? [value] : [];
-    if (selected.length === 0) {
-      sortedOptionsRef.current = options;
-      return;
-    }
-    var selectedSet = new Set(selected);
-    var first = options.filter(function (o2) {
-      return selectedSet.has(o2.value);
-    }).sort(function (a, b) {
-      return a.label.localeCompare(b.label);
-    });
-    var rest = options.filter(function (o2) {
-      return !selectedSet.has(o2.value);
-    });
-    sortedOptionsRef.current = [...first, ...rest];
-  }, [options, value, multiple]);
+    sortedOptionsRef.current = orderOptionsBySelected(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
   var programmaticScrollRef = useRef(0);
   var pinnedTopRef = useRef(0);
   var pinnedHeightRef = useRef(0);
@@ -791,6 +790,7 @@ function FloatingSelectCore(param) {
     setOpen,
     knobProps,
     textColor,
+    markColor,
     allowSelectRef,
     allowMouseUpRef,
     selectTimeoutRef,
@@ -962,7 +962,8 @@ function FloatingSelectCore(param) {
         paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */_jsx(CaretDownIcon, {
-          size: 16
+          size: 16,
+          color: glyphColor
         })
       })]
     }), panel.mounted && /* @__PURE__ */_jsx(_Fragment, {
@@ -1097,12 +1098,14 @@ function NativeSelectCore(param) {
     knobProps,
     groupLabel,
     multiple,
+    selectedOrder,
     dismissible
   } = param;
   var _knobProps_transition, _ref, _ref1;
   var describedBy = useFieldDescribedBy();
   var fieldA11y = useFieldA11y();
   var inTableCell = useIsInTableCell();
+  var glyphColor = useGlyphColor();
   var [open, setOpen] = useState(false);
   var [activeIndex, setActiveIndex] = useState(0);
   var listRef = useRef(null);
@@ -1164,10 +1167,16 @@ function NativeSelectCore(param) {
     });
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
   }, [multiple, value, onValueChange]);
+  var displayOptions = useMemo(function () {
+    if (!multiple) return options;
+    var selected = Array.isArray(value) ? value : value ? [value] : [];
+    return orderOptionsBySelected(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
   var textColor = knobProps.textAccentColor;
+  var markColor = useSelectedMarkColor();
   var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
-  var hasScrollableContent = options.length > 6;
-  var selectedIndex = options.findIndex(function (o2) {
+  var hasScrollableContent = displayOptions.length > 6;
+  var selectedIndex = displayOptions.findIndex(function (o2) {
     return o2.value === value;
   });
   useEffect(function () {
@@ -1193,7 +1202,7 @@ function NativeSelectCore(param) {
     }
   }, [onValueChange, onBlur, multiple, value]);
   var handleListKeyDown = useCallback(function (e) {
-    var count = options.length;
+    var count = displayOptions.length;
     if (count === 0) return;
     var isDown = e.key === "ArrowDown" || e.key === "j";
     var isUp = e.key === "ArrowUp" || e.key === "k";
@@ -1215,11 +1224,11 @@ function NativeSelectCore(param) {
       e.preventDefault();
       e.stopPropagation();
       if (activeIndex != null) {
-        var option = options[activeIndex];
+        var option = displayOptions[activeIndex];
         if (option) handleSelect(option.value);
       }
     }
-  }, [options, activeIndex, handleSelect, setKbNav]);
+  }, [displayOptions, activeIndex, handleSelect, setKbNav]);
   var listContent =
   // Native sheet path: do NOT set flex={1} — inside FloatingPanel's
   // RNScrollView (flexGrow:0) flex:1 resolves to ~0 height and collapses
@@ -1247,7 +1256,7 @@ function NativeSelectCore(param) {
       opacity: 0.5,
       numberOfLines: 1,
       children: groupLabel
-    }), options.map(function (option, i) {
+    }), displayOptions.map(function (option, i) {
       var selected = isSelectedFn(option.value);
       var active = i === activeIndex;
       var row = /* @__PURE__ */_jsxs(View, {
@@ -1288,7 +1297,8 @@ function NativeSelectCore(param) {
           flex: 1,
           children: option.label
         }), selected && /* @__PURE__ */_jsx(CheckIcon, {
-          size: 14
+          size: 14,
+          color: markColor
         })]
       }, isWeb ? option.value : void 0);
       if (isWeb) return row;
@@ -1414,7 +1424,8 @@ function NativeSelectCore(param) {
         paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */_jsx(CaretDownIcon, {
-          size: 16
+          size: 16,
+          color: glyphColor
         })
       })]
     }),
@@ -1448,6 +1459,7 @@ function Select(param) {
     placeholder = t("Select an option"),
     groupLabel,
     multiple,
+    selectedOrder,
     dismissible,
     skeleton,
     compact,
@@ -1558,6 +1570,7 @@ function Select(param) {
       knobProps,
       groupLabel,
       multiple,
+      selectedOrder,
       dismissible
     });
   };