@multiplatform.one/forms 7.7.4 → 7.8.0

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

@@ -2,11 +2,12 @@ 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, useGlyphColor, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, sizeRecipeForToken, useGlyphColor, wasKeyboardFocus } from "@multiplatform.one/theme";
 import * as ReactNative from "react-native";
 import { Platform, Pressable as RNPressable } from "react-native";
 import { Paragraph, Text, View, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.native.js";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract.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";
@@ -22,10 +23,13 @@ import { t } from "../../shared/t.native.js";
 import { orderOptionsBySelected } from "../selectedOrder.native.js";
 import { shouldUseIosNativeSelect } from "../nativeSelect.native.js";
 var actionSheetIOS = ReactNative.ActionSheetIOS;
-var selectRowOutlineRest = {
+var selectOutlineRest = {
   outlineWidth: 0,
   outlineStyle: "solid",
-  outlineColor: "transparent",
+  outlineColor: "transparent"
+};
+var selectRowOutlineRest = {
+  ...selectOutlineRest,
   borderRadius: 0
 };
 var SelectRow = styled(View, {
@@ -244,7 +248,7 @@ function selectTriggerRingProps(kbTrigger, open) {
     };
   }
   return {
-    ...selectRowOutlineRest,
+    ...selectOutlineRest,
     "data-kb-ring": void 0
   };
 }
@@ -333,6 +337,8 @@ var SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
       },
       onPointerDown() {
         ctx.setKbNav(false);
+        ctx.allowMouseUpRef.current = true;
+        ctx.allowSelectRef.current = true;
       },
       onMouseUp() {
         if (!ctx.allowMouseUpRef.current) {
@@ -356,7 +362,7 @@ var SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    size: ctx.knobProps.sizeToken,
+    height: ctx.knobProps.control.height,
     // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the space knob —
     // horizontal inset from the panelPadding token (SP-EDGE, sidebar-row
     // precedent) over menuRowFrame's static $3; in-row gap rides the gap
@@ -538,7 +544,16 @@ function FloatingSelectCore(param) {
     scrollRef: dragScrollRef,
     dragProps
   } = useDragScroll({
-    direction: "vertical"
+    direction: "vertical",
+    onDragEnd: function onDragEnd() {
+      allowSelectRef.current = false;
+      allowMouseUpRef.current = false;
+      if (selectTimeoutRef.current) clearTimeout(selectTimeoutRef.current);
+      selectTimeoutRef.current = setTimeout(function () {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = true;
+      });
+    }
   });
   useEffect(function () {
     if (panel.refs.floating.current) {
@@ -909,13 +924,10 @@ function FloatingSelectCore(param) {
       // must not paint — it would ghost around the panel's corners.
       suppressFocusRing: open,
       size: knobProps.sizeToken,
-      // LC-54 PRESS-FLOOR: the size knob may shrink chrome (compact → $3
-      // = 36px) but the trigger's press target never drops below 44 —
-      // same minHeight floor the house Button holds. Without it a compact
-      // Select sat 36px beside 44px Inputs/Buttons in one control row.
-      minHeight: MIN_PRESS_TARGET,
+      ...pickerTriggerContract(knobProps.control.height),
+      paddingHorizontal: knobProps.panelPadding.padding,
       ...(inTableCell ?
-      // Chromeless in cells (the floor above still applies).
+      // Chromeless in cells.
       {} : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
@@ -924,9 +936,8 @@ function FloatingSelectCore(param) {
         active: kbTrigger && !open
       }), /* @__PURE__ */_jsx(View, {
         flex: 1,
-        // LC-18 (UX-021): trigger inset rides the space knob so trigger text
-        // stays column-aligned with the menu rows at every density.
-        paddingHorizontal: knobProps.panelPadding.padding,
+        // The Box owns the same horizontal inset as the option rows.
+        minWidth: 0,
         paddingVertical: "$2",
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
@@ -954,6 +965,7 @@ function FloatingSelectCore(param) {
             }, v);
           })
         }) : /* @__PURE__ */_jsx(Text, {
+          ...knobProps.controlType,
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
           color: selectedOption ? textColor : formCommonColors.muted,
@@ -962,7 +974,7 @@ function FloatingSelectCore(param) {
           children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder
         })
       }), /* @__PURE__ */_jsx(View, {
-        paddingInlineEnd: "$2",
+        flexShrink: 0,
         alignSelf: "center",
         children: /* @__PURE__ */_jsx(CaretDownIcon, {
           size: 16,
@@ -1105,7 +1117,7 @@ function NativeSelectCore(param) {
     dismissible,
     native
   } = param;
-  var _knobProps_transition, _ref, _ref1;
+  var _knobProps_transition, _ref, _ref1, _ref2;
   var describedBy = useFieldDescribedBy();
   var fieldA11y = useFieldA11y();
   var inTableCell = useIsInTableCell();
@@ -1113,6 +1125,10 @@ function NativeSelectCore(param) {
   var [open, setOpen] = useState(false);
   var [activeIndex, setActiveIndex] = useState(0);
   var listRef = useRef(null);
+  var listboxId = `${id}-listbox`;
+  var optionId = function optionId2(index) {
+    return `${listboxId}-option-${index}`;
+  };
   var {
     kbTrigger,
     kbNav,
@@ -1243,8 +1259,15 @@ function NativeSelectCore(param) {
   /* @__PURE__ */
   _jsxs(View, {
     ref: listRef,
+    // React Native's Role type omits listbox; these are DOM-only attributes.
     ...(isWeb ? {
-      tabIndex: 0,
+      id: listboxId,
+      role: "listbox",
+      "aria-label": (_ref = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label) !== null && _ref !== void 0 ? _ref : placeholder,
+      "aria-multiselectable": multiple || void 0,
+      "aria-hidden": !open,
+      "aria-activedescendant": activeIndex != null && displayOptions[activeIndex] ? optionId(activeIndex) : void 0,
+      tabIndex: open ? 0 : -1,
       onKeyDown: handleListKeyDown,
       onFocus: function onFocus() {
         return setKbNav(wasKeyboardFocus());
@@ -1264,6 +1287,11 @@ function NativeSelectCore(param) {
       var selected = isSelectedFn(option.value);
       var active = i === activeIndex;
       var row = /* @__PURE__ */_jsxs(View, {
+        ...(isWeb ? {
+          id: optionId(i),
+          role: "option",
+          "aria-selected": selected
+        } : void 0),
         flexDirection: "row",
         alignItems: "center",
         borderRadius: 0,
@@ -1271,7 +1299,7 @@ function NativeSelectCore(param) {
         // menu rows — panelPadding inset + gap fragment.
         ...knobProps.gap,
         paddingHorizontal: knobProps.panelPadding.padding,
-        height: knobProps.sizeToken,
+        height: knobProps.control.height,
         onPress: isWeb ? function () {
           return handleSelect(option.value);
         } : void 0,
@@ -1319,7 +1347,7 @@ function NativeSelectCore(param) {
       }, option.value);
     })]
   });
-  var triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder;
+  var triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : placeholder;
   if (shouldUseIosNativeSelect({
     native,
     multiple,
@@ -1360,7 +1388,8 @@ function NativeSelectCore(param) {
       children: /* @__PURE__ */_jsxs(InputParts.Box, {
         disabled,
         size: knobProps.sizeToken,
-        minHeight: MIN_PRESS_TARGET,
+        ...pickerTriggerContract(knobProps.control.height),
+        paddingHorizontal: knobProps.panelPadding.padding,
         pointerEvents: "none",
         ...(inTableCell ? {} : {
           borderRadius: knobProps.borderRadius.borderRadius,
@@ -1370,11 +1399,12 @@ function NativeSelectCore(param) {
         id,
         children: [/* @__PURE__ */_jsx(View, {
           flex: 1,
-          paddingHorizontal: knobProps.panelPadding.padding,
+          minWidth: 0,
           paddingVertical: "$2",
           justifyContent: "flex-start",
           alignItems: "flex-start",
           children: /* @__PURE__ */_jsx(Text, {
+            ...knobProps.controlType,
             fontFamily: knobProps.body.fontFamily,
             fontWeight: knobProps.body.fontWeight,
             color: selectedOption ? formCommonColors.text : formCommonColors.muted,
@@ -1382,7 +1412,7 @@ function NativeSelectCore(param) {
             children: triggerValueText
           })
         }), /* @__PURE__ */_jsx(View, {
-          paddingInlineEnd: "$2",
+          flexShrink: 0,
           alignSelf: "center",
           children: /* @__PURE__ */_jsx(CaretDownIcon, {
             size: 16
@@ -1406,9 +1436,8 @@ function NativeSelectCore(param) {
     trigger: /* @__PURE__ */_jsxs(InputParts.Box, {
       disabled,
       size: knobProps.sizeToken,
-      // LC-54 PRESS-FLOOR: ≥44px trigger target at every size (matches
-      // the web trigger branch above).
-      minHeight: MIN_PRESS_TARGET,
+      ...pickerTriggerContract(knobProps.control.height),
+      paddingHorizontal: knobProps.panelPadding.padding,
       ...(inTableCell ? {} : {
         borderRadius: knobProps.borderRadius.borderRadius,
         borderWidth: knobProps.borderRadius.borderWidth
@@ -1425,6 +1454,7 @@ function NativeSelectCore(param) {
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
         "aria-autocomplete": "none",
         // Standalone (no label): fall back to placeholder so the
         // trigger still has a name (axe button-name). Labelled: the
@@ -1436,14 +1466,10 @@ function NativeSelectCore(param) {
       } : {
         importantForAccessibility: "no"
       }),
-      // Web: trigger owns toggle. Native: FloatingPanel.native owns the
-      // open gesture (pointerEvents="none" on the trigger) — a second
-      // setOpen(prev => !prev) here double-toggles and the sheet never
-      // appears (batched true then !prev → false).
+      // The web sheet shares this gesture with FloatingPanel's capture
+      // opener. Both must open idempotently. Native owns its own press.
       onPress: isWeb && !disabled ? function () {
-        return setOpen(function (prev) {
-          return !prev;
-        });
+        return setOpen(true);
       } : void 0,
       onFocus: isWeb ? onTriggerFocus : void 0,
       onBlur: isWeb ? onTriggerBlur : void 0,
@@ -1459,9 +1485,8 @@ function NativeSelectCore(param) {
         active: kbTrigger && !open
       }), /* @__PURE__ */_jsx(View, {
         flex: 1,
-        // LC-18 (UX-021): trigger inset rides the space knob (matches the
-        // floating trigger and sheet rows).
-        paddingHorizontal: knobProps.panelPadding.padding,
+        // The Box owns the same horizontal inset as the option rows.
+        minWidth: 0,
         paddingVertical: "$2",
         justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
         alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
@@ -1489,14 +1514,15 @@ function NativeSelectCore(param) {
             }, v);
           })
         }) : /* @__PURE__ */_jsx(Text, {
+          ...knobProps.controlType,
           fontFamily: knobProps.body.fontFamily,
           fontWeight: knobProps.body.fontWeight,
           color: selectedOption ? textColor : formCommonColors.muted,
           numberOfLines: 1,
-          children: (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : placeholder
+          children: (_ref2 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref2 !== void 0 ? _ref2 : placeholder
         })
       }), /* @__PURE__ */_jsx(View, {
-        paddingInlineEnd: "$2",
+        flexShrink: 0,
         alignSelf: "center",
         children: /* @__PURE__ */_jsx(CaretDownIcon, {
           size: 16,