@multiplatform.one/forms 7.7.4 → 7.7.6

package/dist/cjs/fields/Combobox/index.cjs

@@ -32,7 +32,9 @@ var import_react3 = require("@floating-ui/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
 var import_Chip = require("../../Chip/index.cjs");
+var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
@@ -200,7 +202,7 @@ const ComboboxItem = (0, import_react.memo)(function ComboboxItem2({
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    size: ctx.knobProps.sizeToken,
+    height: ctx.knobProps.control.height,
     ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
@@ -986,18 +988,12 @@ function FloatingComboboxCore({
     disabled,
     size: knobProps.sizeToken,
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.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__ */(0, import_jsx_runtime.jsx)(import_floatingList.SyncFocusToOpen, {
       open
@@ -1026,6 +1022,7 @@ function FloatingComboboxCore({
           children: getLabel(v)
         }, v))
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
@@ -1033,11 +1030,15 @@ function FloatingComboboxCore({
         userSelect: "none",
         children: selectedOption?.label ?? (!multiple && value && valueLabel ? valueLabel : placeholder)
       })
-    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingInlineEnd: "$1",
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.control.height,
+      chromeless: true,
+      ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
       alignSelf: "center",
       cursor: "pointer",
-      role: "button",
       tabIndex: -1,
       "aria-label": t("Clear"),
       opacity: 0.6,
@@ -1051,10 +1052,7 @@ function FloatingComboboxCore({
       onPress: e => {
         e.stopPropagation?.();
         onValueChange?.("");
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 14
-      })
+      }
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1184,7 +1182,7 @@ function FloatingComboboxCore({
               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),
@@ -1214,7 +1212,7 @@ function FloatingComboboxCore({
             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),
@@ -1283,7 +1281,7 @@ const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, t
   alignItems: "center",
   gap: "$2",
   paddingHorizontal: "$3",
-  height: knobProps.sizeToken,
+  height: knobProps.control.height,
   borderBottomWidth: 1,
   borderBottomColor: import_colorRamps.formCommonColors.divider,
   children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {
@@ -1605,10 +1603,10 @@ function NativeComboboxCore({
           "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: import_tamagui.isWeb ? () => handleSelect(option) : void 0,
           onMouseEnter: () => {
@@ -1675,7 +1673,7 @@ function NativeComboboxCore({
         alignItems: "center",
         gap: "$2",
         paddingHorizontal: "$3",
-        height: knobProps.sizeToken,
+        height: knobProps.control.height,
         role: "option",
         id: comboboxOptionId(id, createOptionIndex),
         "data-combobox-index": createOptionIndex,
@@ -1712,7 +1710,7 @@ function NativeComboboxCore({
       alignItems: "center",
       gap: "$2",
       paddingHorizontal: "$3",
-      height: knobProps.sizeToken,
+      height: knobProps.control.height,
       role: "option",
       id: comboboxOptionId(id, createOptionIndex),
       "data-combobox-index": createOptionIndex,
@@ -1792,11 +1790,10 @@ function NativeComboboxCore({
     disabled,
     size: knobProps.sizeToken,
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.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
     }),
@@ -1817,7 +1814,7 @@ function NativeComboboxCore({
     } : {
       importantForAccessibility: "no"
     }),
-    onPress: import_tamagui.isWeb && !disabled ? () => handleOpenChange(!open) : void 0,
+    onPress: import_tamagui.isWeb && !disabled ? () => handleOpenChange(true) : void 0,
     onKeyDown: e => {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
         e.preventDefault();
@@ -1850,30 +1847,13 @@ function NativeComboboxCore({
           children: getLabel(v)
         }, v))
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
         numberOfLines: 1,
         children: selectedOption?.label ?? (!multiple && value && valueLabel ? valueLabel : placeholder)
       })
-    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingInlineEnd: "$1",
-      alignSelf: "center",
-      cursor: "pointer",
-      role: "button",
-      tabIndex: -1,
-      "aria-label": t("Clear"),
-      opacity: 0.6,
-      hoverStyle: {
-        opacity: 1
-      },
-      onPress: e => {
-        e.stopPropagation?.();
-        onValueChange?.("");
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 14
-      })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1890,6 +1870,17 @@ function NativeComboboxCore({
     sheet: true,
     sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      minWidth: 44,
+      minHeight: 44,
+      "aria-label": t("Clear"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
+      onPress: () => onValueChange?.("")
+    }) : void 0,
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,

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

@@ -35,7 +35,9 @@ var import_react3 = require("@floating-ui/react");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
 var import_Chip = require("../../Chip/index.native.js");
+var import_pickerTriggerContract = require("../../shared/pickerTriggerContract.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_InputParts = require("../../InputParts/index.native.js");
@@ -292,7 +294,7 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
     active: isActive,
     "aria-selected": isSelected,
     "data-state": isSelected ? "active" : "inactive",
-    size: ctx.knobProps.sizeToken,
+    height: ctx.knobProps.control.height,
     ...listItemRingProps(Boolean(keyboardRing)),
     ...(suppressHover ? {
       hoverStyle: {
@@ -1177,18 +1179,12 @@ function FloatingComboboxCore(param) {
     // attaches below instead (MPO-38), leaving the trigger on screen and
     // focusable, so it keeps its ring.
     suppressFocusRing: open && !multiple,
+    ...(0, import_pickerTriggerContract.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__ */(0, import_jsx_runtime.jsx)(import_floatingList.SyncFocusToOpen, {
       open
@@ -1222,6 +1218,7 @@ function FloatingComboboxCore(param) {
           }, v);
         })
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.formCommonColors.muted,
@@ -1229,11 +1226,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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      paddingInlineEnd: "$1",
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.control.height,
+      chromeless: true,
+      ...(0, import_pickerTriggerContract.pickerTriggerContract)(knobProps.control.height),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 14
+      }),
       alignSelf: "center",
       cursor: "pointer",
-      role: "button",
       tabIndex: -1,
       "aria-label": t("Clear"),
       opacity: 0.6,
@@ -1250,10 +1251,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__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 14
-      })
+      }
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1390,7 +1388,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),
@@ -1420,7 +1418,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),
@@ -1490,7 +1488,7 @@ var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, set
     alignItems: "center",
     gap: "$2",
     paddingHorizontal: "$3",
-    height: knobProps.sizeToken,
+    height: knobProps.control.height,
     borderBottomWidth: 1,
     borderBottomColor: import_colorRamps.formCommonColors.divider,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {
@@ -1878,10 +1876,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: import_tamagui.isWeb ? function () {
             return handleSelect(option);
@@ -1952,7 +1950,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,
@@ -1989,7 +1987,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,
@@ -2075,11 +2073,10 @@ 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,
+    ...(0, import_pickerTriggerContract.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
     }),
@@ -2105,10 +2102,10 @@ function NativeComboboxCore(param) {
     } : {
       importantForAccessibility: "no"
     }),
-    // Web: trigger owns toggle. Native: FloatingPanel.native owns open
-    // (avoid double-toggle that batches open then immediately closed).
+    // Sheet capture opens first on web, so this opener is idempotent.
+    // Native delegates the gesture to FloatingPanel.
     onPress: import_tamagui.isWeb && !disabled ? function () {
-      return handleOpenChange(!open);
+      return handleOpenChange(true);
     } : void 0,
     onKeyDown: function onKeyDown(e) {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
@@ -2147,31 +2144,13 @@ function NativeComboboxCore(param) {
           }, v);
         })
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : import_colorRamps.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
-        size: 14
-      })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -2190,6 +2169,19 @@ function NativeComboboxCore(param) {
     // the user types, so a content-fit sheet would open as a sliver.
     sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerEnd: clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: knobProps.sizeToken,
+      chromeless: true,
+      minWidth: 44,
+      minHeight: 44,
+      "aria-label": t("Clear"),
+      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.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,