@multiplatform.one/forms 7.7.4 → 7.8.0

package/dist/esm/fields/Combobox/index.mjs

@@ -5,7 +5,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-web";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
+import { Button } from "../../Button/index.mjs";
 import { Chip } from "../../Chip/index.mjs";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.mjs";
 import { Input as InputParts } from "../../InputParts/index.mjs";
@@ -173,7 +175,7 @@ const ComboboxItem = 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: {
@@ -245,6 +247,7 @@ function FloatingComboboxCore({
   tabIndexOverride,
   popoverWidth,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -939,7 +942,7 @@ function FloatingComboboxCore({
   jsx(View, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -949,7 +952,7 @@ function FloatingComboboxCore({
     style: {
       display: "flex",
       alignItems: "stretch",
-      width: "100%"
+      width: triggerSizing === "content" ? "auto" : "100%"
     },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */jsxs(InputParts.Box, {
@@ -959,18 +962,12 @@ function FloatingComboboxCore({
     disabled,
     size: knobProps.sizeToken,
     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
@@ -999,6 +996,7 @@ function FloatingComboboxCore({
           children: getLabel(v)
         }, v))
       }) : /* @__PURE__ */jsx(Text, {
+        ...knobProps.controlType,
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
         color: selectedOption || !multiple && value && valueLabel ? textColor : formCommonColors.muted,
@@ -1006,11 +1004,15 @@ function FloatingComboboxCore({
         userSelect: "none",
         children: selectedOption?.label ?? (!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,
@@ -1024,10 +1026,7 @@ function FloatingComboboxCore({
       onPress: e => {
         e.stopPropagation?.();
         onValueChange?.("");
-      },
-      children: /* @__PURE__ */jsx(XIcon, {
-        size: 14
-      })
+      }
     }), /* @__PURE__ */jsx(View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1157,7 +1156,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),
@@ -1187,7 +1186,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),
@@ -1256,7 +1255,7 @@ const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, t
   alignItems: "center",
   gap: "$2",
   paddingHorizontal: "$3",
-  height: knobProps.sizeToken,
+  height: knobProps.control.height,
   borderBottomWidth: 1,
   borderBottomColor: formCommonColors.divider,
   children: [/* @__PURE__ */jsx(MagnifyingGlassIcon, {
@@ -1307,6 +1306,7 @@ function NativeComboboxCore({
   "aria-label": ariaLabel,
   hasLabel,
   trigger: triggerRender,
+  triggerSizing = "stretch",
   knobProps,
   multiple,
   selectedOrder,
@@ -1578,10 +1578,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: isWeb ? () => handleSelect(option) : void 0,
           onMouseEnter: () => {
@@ -1648,7 +1648,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,
@@ -1685,7 +1685,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,
@@ -1744,9 +1744,34 @@ function NativeComboboxCore({
       })
     })]
   });
+  const 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 ?? (!hasLabel ? placeholder : void 0),
+      "aria-describedby": describedBy,
+      tabIndex: disabled ? -1 : 0
+    } : {
+      importantForAccessibility: "no"
+    }),
+    onPress: isWeb && !disabled ? () => handleOpenChange(true) : void 0,
+    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);
+      }
+    }
+  };
   const triggerContent = triggerRender ? /* @__PURE__ */jsx(View, {
     "data-testid": "combobox-trigger",
-    width: "100%",
+    width: triggerSizing === "content" ? "auto" : "100%",
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
@@ -1756,8 +1781,9 @@ function NativeComboboxCore({
     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",
@@ -1765,39 +1791,14 @@ function NativeComboboxCore({
     disabled,
     size: knobProps.sizeToken,
     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,
-    ...(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 ?? (!hasLabel ? placeholder : void 0),
-      "aria-describedby": describedBy,
-      tabIndex: disabled ? -1 : 0
-    } : {
-      importantForAccessibility: "no"
-    }),
-    onPress: isWeb && !disabled ? () => handleOpenChange(!open) : void 0,
-    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",
@@ -1823,30 +1824,13 @@ function NativeComboboxCore({
           children: getLabel(v)
         }, 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: selectedOption?.label ?? (!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: e => {
-        e.stopPropagation?.();
-        onValueChange?.("");
-      },
-      children: /* @__PURE__ */jsx(XIcon, {
-        size: 14
-      })
     }), /* @__PURE__ */jsx(View, {
       paddingInlineEnd: "$2",
       alignSelf: "center",
@@ -1863,6 +1847,18 @@ function NativeComboboxCore({
     sheet: true,
     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: () => onValueChange?.("")
+    }) : void 0,
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,
@@ -1907,6 +1903,7 @@ function Combobox({
   onLoadMore,
   hasMore,
   trigger,
+  triggerSizing,
   name,
   form: formProp,
   validators,
@@ -2030,6 +2027,7 @@ function Combobox({
       tabIndexOverride: tabIndexProp,
       popoverWidth,
       trigger,
+      triggerSizing,
       knobProps,
       multiple,
       selectedOrder,