@multiplatform.one/forms 7.7.4 → 7.8.0

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

@@ -6,7 +6,9 @@ import { useClick, useDismiss, useInteractions, useListNavigation, useRole, Floa
 import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, useGlyphColor } from "@multiplatform.one/theme";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
+import { Button } from "../../Button/index.native.js";
 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 } from "../../InputParts/index.native.js";
@@ -263,7 +265,7 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    size: ctx.knobProps.sizeToken,
+    height: ctx.knobProps.control.height,
     ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
@@ -336,6 +338,7 @@ function FloatingComboboxCore(param) {
     tabIndexOverride,
     popoverWidth,
     trigger: triggerRender,
+    triggerSizing = "stretch",
     knobProps,
     multiple,
     selectedOrder,
@@ -1121,7 +1124,7 @@ function FloatingComboboxCore(param) {
   _jsx(View, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -1131,7 +1134,7 @@ function FloatingComboboxCore(param) {
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */_jsxs(InputParts.Box, {
@@ -1148,18 +1151,12 @@ function FloatingComboboxCore(param) {
     // attaches below instead (MPO-38), leaving the trigger on screen and
     // focusable, so it keeps its ring.
     suppressFocusRing: open && !multiple,
+    ...pickerTriggerContract(knobProps.control.height),
     ...(inTableCell ?
-    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-    {
-      minHeight: 44
-    } : {
+    // Chromeless in cells.
+    {} : {
       borderRadius: knobProps.borderRadius.borderRadius,
-      borderWidth: knobProps.borderRadius.borderWidth,
-      // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
-      // trigger (the 36px "Allocated To" quick filter breaking the
-      // list's 44px control row) — same floor the house Select holds
-      // on both its trigger variants.
-      minHeight: 44
+      borderWidth: knobProps.borderRadius.borderWidth
     }),
     children: [/* @__PURE__ */_jsx(SyncFocusToOpen, {
       open
@@ -1193,6 +1190,7 @@ function FloatingComboboxCore(param) {
           }, v);
         })
       }) : /* @__PURE__ */_jsx(Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : formCommonColors.muted,
@@ -1200,11 +1198,15 @@ function FloatingComboboxCore(param) {
         userSelect: "none",
         children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : !multiple && value && valueLabel ? valueLabel : placeholder
       })
-    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */_jsx(View, {
-      paddingInlineEnd: "$1",
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */_jsx(Button, {
+      size: knobProps.control.height,
+      chromeless: true,
+      ...pickerTriggerContract(knobProps.control.height),
+      icon: /* @__PURE__ */_jsx(XIcon, {
+        size: 14
+      }),
       alignSelf: "center",
       cursor: "pointer",
-      role: "button",
       tabIndex: -1,
       "aria-label": t("Clear"),
       opacity: 0.6,
@@ -1221,10 +1223,7 @@ function FloatingComboboxCore(param) {
         var _e_stopPropagation;
         (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
-      },
-      children: /* @__PURE__ */_jsx(XIcon, {
-        size: 14
-      })
+      }
     }), /* @__PURE__ */_jsx(View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1361,7 +1360,7 @@ function FloatingComboboxCore(param) {
               id: comboboxOptionId(id, createOptionIndex),
               selected: false,
               active: createOptionIndex === activeIndex,
-              size: knobProps.sizeToken,
+              height: knobProps.control.height,
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
               ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
@@ -1391,7 +1390,7 @@ function FloatingComboboxCore(param) {
             id: comboboxOptionId(id, createOptionIndex),
             selected: false,
             active: createOptionIndex === activeIndex,
-            size: knobProps.sizeToken,
+            height: knobProps.control.height,
             "data-combobox-index": createOptionIndex,
             "data-active": createOptionIndex === activeIndex,
             ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
@@ -1461,7 +1460,7 @@ var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, set
     alignItems: "center",
     gap: "$2",
     paddingHorizontal: "$3",
-    height: knobProps.sizeToken,
+    height: knobProps.control.height,
     borderBottomWidth: 1,
     borderBottomColor: formCommonColors.divider,
     children: [/* @__PURE__ */_jsx(MagnifyingGlassIcon, {
@@ -1517,6 +1516,7 @@ function NativeComboboxCore(param) {
     "aria-label": ariaLabel,
     hasLabel,
     trigger: triggerRender,
+    triggerSizing = "stretch",
     knobProps,
     multiple,
     selectedOrder,
@@ -1849,10 +1849,10 @@ function NativeComboboxCore(param) {
           "data-active": active,
           ...listItemRingProps(active && listKeyboardRing),
           ...(option.description ? {
-            minHeight: knobProps.sizeToken,
+            minHeight: knobProps.control.height,
             paddingVertical: "$2"
           } : {
-            height: knobProps.sizeToken
+            height: knobProps.control.height
           }),
           onPress: isWeb ? function () {
             return handleSelect(option);
@@ -1923,7 +1923,7 @@ function NativeComboboxCore(param) {
         alignItems: "center",
         gap: "$2",
         paddingHorizontal: "$3",
-        height: knobProps.sizeToken,
+        height: knobProps.control.height,
         role: "option",
         id: comboboxOptionId(id, createOptionIndex),
         "data-combobox-index": createOptionIndex,
@@ -1960,7 +1960,7 @@ function NativeComboboxCore(param) {
       alignItems: "center",
       gap: "$2",
       paddingHorizontal: "$3",
-      height: knobProps.sizeToken,
+      height: knobProps.control.height,
       role: "option",
       id: comboboxOptionId(id, createOptionIndex),
       "data-combobox-index": createOptionIndex,
@@ -2019,9 +2019,36 @@ function NativeComboboxCore(param) {
       })
     })]
   });
+  var triggerProps = {
+    id,
+    ...(isWeb ? {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
+      "aria-autocomplete": hideSearch ? "list" : void 0,
+      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : !hasLabel ? placeholder : void 0,
+      "aria-describedby": describedBy,
+      tabIndex: disabled ? -1 : 0
+    } : {
+      importantForAccessibility: "no"
+    }),
+    onPress: isWeb && !disabled ? function () {
+      return handleOpenChange(true);
+    } : void 0,
+    onKeyDown: function onKeyDown(event) {
+      if (disabled) return;
+      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(event.key) || event.code === "Space") {
+        event.preventDefault();
+        setKeyboardNav(true);
+        if (!open) handleOpenChange(true);
+      }
+    }
+  };
   var triggerContent = triggerRender ? /* @__PURE__ */_jsx(View, {
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -2031,8 +2058,9 @@ function NativeComboboxCore(param) {
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
+    ...triggerProps,
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */_jsxs(InputParts.Box, {
     "data-testid": "combobox-trigger",
@@ -2046,48 +2074,14 @@ function NativeComboboxCore(param) {
     // paint — it would ghost around the panel's corners. A multi-select
     // panel attaches below instead (MPO-38), so it keeps its ring.
     suppressFocusRing: open && !multiple,
+    ...pickerTriggerContract(knobProps.control.height),
     ...(inTableCell ?
-    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-    {
-      minHeight: 44
-    } : {
+    // Chromeless in cells.
+    {} : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
-    id,
-    // Web: the box is the combobox control (ARIA + keyboard). Native:
-    // FloatingPanel's trigger Pressable (triggerA11y) is the single
-    // accessible node — role/aria props here surface the box as a
-    // duplicate TalkBack stop on Android, so exclude it from the tree
-    // (descendants stay reachable; "no", not "no-hide-descendants").
-    ...(isWeb ? {
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      "aria-expanded": open,
-      "aria-controls": listboxId,
-      "aria-activedescendant": hideSearch ? activeDescendant : void 0,
-      "aria-autocomplete": hideSearch ? "list" : void 0,
-      // Standalone (no label): fall back to placeholder for the name.
-      // Labelled: the sibling Label wires `aria-labelledby` onto this id
-      // itself — naming it here too doubles the spoken name.
-      "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : !hasLabel ? placeholder : void 0,
-      "aria-describedby": describedBy,
-      tabIndex: disabled ? -1 : 0
-    } : {
-      importantForAccessibility: "no"
-    }),
-    // Web: trigger owns toggle. Native: FloatingPanel.native owns open
-    // (avoid double-toggle that batches open then immediately closed).
-    onPress: isWeb && !disabled ? function () {
-      return handleOpenChange(!open);
-    } : void 0,
-    onKeyDown: function onKeyDown(e) {
-      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
-        e.preventDefault();
-        setKeyboardNav(true);
-        if (!open) handleOpenChange(true);
-      }
-    },
+    ...triggerProps,
     children: [/* @__PURE__ */_jsx(View, {
       flex: 1,
       paddingHorizontal: "$3",
@@ -2118,31 +2112,13 @@ function NativeComboboxCore(param) {
           }, v);
         })
       }) : /* @__PURE__ */_jsx(Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : formCommonColors.muted,
         numberOfLines: 1,
         children: (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : !multiple && value && valueLabel ? valueLabel : placeholder
       })
-    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */_jsx(View, {
-      paddingInlineEnd: "$1",
-      alignSelf: "center",
-      cursor: "pointer",
-      role: "button",
-      tabIndex: -1,
-      "aria-label": t("Clear"),
-      opacity: 0.6,
-      hoverStyle: {
-        opacity: 1
-      },
-      onPress: function onPress(e) {
-        var _e_stopPropagation;
-        (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
-      },
-      children: /* @__PURE__ */_jsx(XIcon, {
-        size: 14
-      })
     }), /* @__PURE__ */_jsx(View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -2161,6 +2137,20 @@ function NativeComboboxCore(param) {
     // the user types, so a content-fit sheet would open as a sliver.
     sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerSizing,
+    triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */_jsx(Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      minWidth: 44,
+      minHeight: 44,
+      "aria-label": t("Clear"),
+      icon: /* @__PURE__ */_jsx(XIcon, {
+        size: 14
+      }),
+      onPress: function onPress() {
+        return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("");
+      }
+    }) : void 0,
     triggerA11y: {
       label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : fieldA11y === null || fieldA11y === void 0 ? void 0 : fieldA11y.label,
       value: triggerValueText,
@@ -2206,6 +2196,7 @@ function Combobox(param) {
     onLoadMore,
     hasMore,
     trigger,
+    triggerSizing,
     name,
     form: formProp,
     validators,
@@ -2338,6 +2329,7 @@ function Combobox(param) {
       tabIndexOverride: tabIndexProp,
       popoverWidth,
       trigger,
+      triggerSizing,
       knobProps,
       multiple,
       selectedOrder,