@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/fields/Select/index.cjs

@@ -44,6 +44,7 @@ var import_zIndex = require("../../shared/zIndex.cjs");
 var import_useDragScroll = require("../../shared/useDragScroll.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_t = require("../../shared/t.cjs");
+var import_selectedOrder = require("../selectedOrder.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const selectRowOutlineRest = {
   outlineWidth: 0,
@@ -201,6 +202,11 @@ function selectItemRingProps(isActive, kbNav) {
     "data-kb-ring": void 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";
+}
 function SyncKeyboardFocusToBox({
   active
 }) {
@@ -302,7 +308,8 @@ const SelectItem = (0, import_react.memo)(function SelectItem2({
       flex: 1,
       children: option.label
     }), isSelected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-      size: 14
+      size: 14,
+      color: ctx.markColor
     })]
   });
 });
@@ -319,10 +326,12 @@ function FloatingSelectCore({
   knobProps,
   groupLabel,
   multiple,
+  selectedOrder,
   dismissible
 }) {
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  const glyphColor = (0, import_theme.useGlyphColor)();
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   const [controlledScrolling, setControlledScrolling] = (0, import_react.useState)(false);
@@ -356,6 +365,7 @@ function FloatingSelectCore({
     onValueChange?.(next);
   }, [multiple, value, onValueChange]);
   const textColor = knobProps.textAccentColor;
+  const markColor = useSelectedMarkColor();
   const listItemsRef = (0, import_react.useRef)([]);
   const listContentRef = (0, import_react.useRef)(options.map(option => option.label));
   const allowSelectRef = (0, import_react.useRef)(false);
@@ -375,15 +385,8 @@ function FloatingSelectCore({
       return;
     }
     const selected = Array.isArray(value) ? value : value ? [value] : [];
-    if (selected.length === 0) {
-      sortedOptionsRef.current = options;
-      return;
-    }
-    const selectedSet = new Set(selected);
-    const first = options.filter(o => selectedSet.has(o.value)).sort((a, b) => a.label.localeCompare(b.label));
-    const rest = options.filter(o => !selectedSet.has(o.value));
-    sortedOptionsRef.current = [...first, ...rest];
-  }, [options, value, multiple]);
+    sortedOptionsRef.current = (0, import_selectedOrder.orderOptionsBySelected)(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
   const programmaticScrollRef = (0, import_react.useRef)(0);
   const pinnedTopRef = (0, import_react.useRef)(0);
   const pinnedHeightRef = (0, import_react.useRef)(0);
@@ -661,6 +664,7 @@ function FloatingSelectCore({
     setOpen,
     knobProps,
     textColor,
+    markColor,
     allowSelectRef,
     allowMouseUpRef,
     selectTimeoutRef,
@@ -794,7 +798,8 @@ function FloatingSelectCore({
         paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16
+          size: 16,
+          color: glyphColor
         })
       })]
     }), panel.mounted && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
@@ -920,11 +925,13 @@ function NativeSelectCore({
   knobProps,
   groupLabel,
   multiple,
+  selectedOrder,
   dismissible
 }) {
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const glyphColor = (0, import_theme.useGlyphColor)();
   const [open, setOpen] = (0, import_react.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
   const listRef = (0, import_react.useRef)(null);
@@ -952,10 +959,16 @@ function NativeSelectCore({
     const next = current.filter(v => v !== valueToRemove);
     onValueChange?.(next);
   }, [multiple, value, onValueChange]);
+  const displayOptions = (0, import_react.useMemo)(() => {
+    if (!multiple) return options;
+    const selected = Array.isArray(value) ? value : value ? [value] : [];
+    return (0, import_selectedOrder.orderOptionsBySelected)(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
   const textColor = knobProps.textAccentColor;
+  const markColor = useSelectedMarkColor();
   const sheetTransition = knobProps.transition ?? "medium";
-  const hasScrollableContent = options.length > 6;
-  const selectedIndex = options.findIndex(o => o.value === value);
+  const hasScrollableContent = displayOptions.length > 6;
+  const selectedIndex = displayOptions.findIndex(o => o.value === value);
   (0, import_react.useEffect)(() => {
     if (open) {
       setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
@@ -974,7 +987,7 @@ function NativeSelectCore({
     }
   }, [onValueChange, onBlur, multiple, value]);
   const handleListKeyDown = (0, import_react.useCallback)(e => {
-    const count = options.length;
+    const count = displayOptions.length;
     if (count === 0) return;
     const isDown = e.key === "ArrowDown" || e.key === "j";
     const isUp = e.key === "ArrowUp" || e.key === "k";
@@ -996,11 +1009,11 @@ function NativeSelectCore({
       e.preventDefault();
       e.stopPropagation();
       if (activeIndex != null) {
-        const option = options[activeIndex];
+        const option = displayOptions[activeIndex];
         if (option) handleSelect(option.value);
       }
     }
-  }, [options, activeIndex, handleSelect, setKbNav]);
+  }, [displayOptions, activeIndex, handleSelect, setKbNav]);
   const listContent =
   // Native sheet path: do NOT set flex={1} — inside FloatingPanel's
   // RNScrollView (flexGrow:0) flex:1 resolves to ~0 height and collapses
@@ -1026,7 +1039,7 @@ function NativeSelectCore({
       opacity: 0.5,
       numberOfLines: 1,
       children: groupLabel
-    }), options.map((option, i) => {
+    }), displayOptions.map((option, i) => {
       const selected = isSelectedFn(option.value);
       const active = i === activeIndex;
       const row = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
@@ -1058,7 +1071,8 @@ function NativeSelectCore({
           flex: 1,
           children: option.label
         }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-          size: 14
+          size: 14,
+          color: markColor
         })]
       }, import_tamagui.isWeb ? option.value : void 0);
       if (import_tamagui.isWeb) return row;
@@ -1160,7 +1174,8 @@ function NativeSelectCore({
         paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16
+          size: 16,
+          color: glyphColor
         })
       })]
     }),
@@ -1193,6 +1208,7 @@ function Select({
   placeholder = (0, import_t.t)("Select an option"),
   groupLabel,
   multiple,
+  selectedOrder,
   dismissible,
   skeleton,
   compact,
@@ -1292,6 +1308,7 @@ function Select({
       knobProps,
       groupLabel,
       multiple,
+      selectedOrder,
       dismissible
     });
   };

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

@@ -47,6 +47,7 @@ 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_t = require("../../shared/t.native.js");
+var import_selectedOrder = require("../selectedOrder.native.js");
 var selectRowOutlineRest = {
   outlineWidth: 0,
   outlineStyle: "solid",
@@ -291,6 +292,13 @@ function selectItemRingProps(isActive, kbNav) {
     "data-kb-ring": void 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";
+}
 function SyncKeyboardFocusToBox(param) {
   var {
     active
@@ -404,7 +412,8 @@ var SelectItem = /* @__PURE__ */(0, import_react.memo)(function SelectItem2(para
       flex: 1,
       children: option.label
     }), isSelected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-      size: 14
+      size: 14,
+      color: ctx.markColor
     })]
   });
 });
@@ -422,12 +431,14 @@ function FloatingSelectCore(param) {
     knobProps,
     groupLabel,
     multiple,
+    selectedOrder,
     dismissible
   } = param;
   var _ref, _ref1, _ref2, _panel_x;
   var _overlayStyle_current;
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var glyphColor = (0, import_theme.useGlyphColor)();
   var [open, setOpen] = (0, import_react.useState)(false);
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
   var [controlledScrolling, setControlledScrolling] = (0, import_react.useState)(false);
@@ -497,6 +508,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 = (0, import_react.useRef)([]);
   var listContentRef = (0, import_react.useRef)(options.map(function (option) {
     return option.label;
@@ -520,21 +532,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 = (0, import_selectedOrder.orderOptionsBySelected)(options, selected, selectedOrder);
+  }, [options, value, multiple, selectedOrder]);
   var programmaticScrollRef = (0, import_react.useRef)(0);
   var pinnedTopRef = (0, import_react.useRef)(0);
   var pinnedHeightRef = (0, import_react.useRef)(0);
@@ -820,6 +819,7 @@ function FloatingSelectCore(param) {
     setOpen,
     knobProps,
     textColor,
+    markColor,
     allowSelectRef,
     allowMouseUpRef,
     selectTimeoutRef,
@@ -991,7 +991,8 @@ function FloatingSelectCore(param) {
         paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16
+          size: 16,
+          color: glyphColor
         })
       })]
     }), panel.mounted && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
@@ -1126,12 +1127,14 @@ function NativeSelectCore(param) {
     knobProps,
     groupLabel,
     multiple,
+    selectedOrder,
     dismissible
   } = param;
   var _knobProps_transition, _ref, _ref1;
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var glyphColor = (0, import_theme.useGlyphColor)();
   var [open, setOpen] = (0, import_react.useState)(false);
   var [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
   var listRef = (0, import_react.useRef)(null);
@@ -1193,10 +1196,16 @@ function NativeSelectCore(param) {
     });
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
   }, [multiple, value, onValueChange]);
+  var displayOptions = (0, import_react.useMemo)(function () {
+    if (!multiple) return options;
+    var selected = Array.isArray(value) ? value : value ? [value] : [];
+    return (0, import_selectedOrder.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;
   });
   (0, import_react.useEffect)(function () {
@@ -1222,7 +1231,7 @@ function NativeSelectCore(param) {
     }
   }, [onValueChange, onBlur, multiple, value]);
   var handleListKeyDown = (0, import_react.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";
@@ -1244,11 +1253,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
@@ -1276,7 +1285,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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
@@ -1317,7 +1326,8 @@ function NativeSelectCore(param) {
           flex: 1,
           children: option.label
         }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
-          size: 14
+          size: 14,
+          color: markColor
         })]
       }, import_tamagui.isWeb ? option.value : void 0);
       if (import_tamagui.isWeb) return row;
@@ -1443,7 +1453,8 @@ function NativeSelectCore(param) {
         paddingInlineEnd: "$2",
         alignSelf: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
-          size: 16
+          size: 16,
+          color: glyphColor
         })
       })]
     }),
@@ -1477,6 +1488,7 @@ function Select(param) {
     placeholder = (0, import_t.t)("Select an option"),
     groupLabel,
     multiple,
+    selectedOrder,
     dismissible,
     skeleton,
     compact,
@@ -1587,6 +1599,7 @@ function Select(param) {
       knobProps,
       groupLabel,
       multiple,
+      selectedOrder,
       dismissible
     });
   };