@multiplatform.one/forms 7.11.0 → 7.16.0

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

@@ -28,11 +28,12 @@ __export(Combobox_exports, {
 });
 module.exports = __toCommonJS(Combobox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_i18n = require("../../shared/i18n.native.js");
 var import_react2 = require("@phosphor-icons/react");
 var import_react3 = require("@floating-ui/react");
-var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
 var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_Button = require("../../Button/index.native.js");
@@ -46,6 +47,7 @@ var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_floatingList = require("../../shared/floatingList.native.js");
 var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
+var import_PanelPortal = require("../../FloatingPanel/PanelPortal.native.js");
 var import_zIndex = require("../../shared/zIndex.native.js");
 var import_useDragScroll = require("../../shared/useDragScroll.native.js");
 var import_tableCellContext = require("../../shared/tableCellContext.native.js");
@@ -53,13 +55,13 @@ var import_selectedOrder = require("../selectedOrder.native.js");
 var scrollArrowBuffer = 28;
 var ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "ComboboxRow",
-  ...import_theme.menuRowFrame,
+  ...import_theme2.menuRowFrame,
   gap: "$2",
   cursor: "default",
   hoverStyle: {
     backgroundColor: import_colorRamps.formInputColors.background.focus
   },
-  focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+  focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
     outlineOffset: -2
   }),
   variants: {
@@ -93,7 +95,7 @@ function comboboxListboxId(baseId) {
   return `${baseId !== null && baseId !== void 0 ? baseId : "combobox"}-listbox`;
 }
 function listItemRingProps(keyboardRing) {
-  return keyboardRing ? import_theme.keyboardFocusRingProps : {
+  return keyboardRing ? import_theme2.keyboardFocusRingProps : {
     outlineWidth: 0
   };
 }
@@ -312,9 +314,7 @@ var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(
       height: "auto",
       paddingVertical: "$2"
     } : void 0),
-    ...(ctx.knobProps.transition ? {
-      transition: ctx.knobProps.transition
-    } : void 0),
+    ...(0, import_theme2.transitionProps)(ctx.knobProps.transition),
     children: [option.description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       flex: 1,
       minWidth: 0,
@@ -381,13 +381,14 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
-  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
   var {
     t
   } = (0, import_i18n.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
-  var glyphColor = (0, import_theme.useGlyphColor)();
+  var glyphColor = (0, import_theme2.useGlyphColor)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = (0, import_react.useCallback)(function (nextOpen) {
@@ -1157,7 +1158,7 @@ function FloatingComboboxCore(param) {
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
       outlineOffset: -2
     }),
     style: {
@@ -1200,7 +1201,7 @@ function FloatingComboboxCore(param) {
         flexWrap: "nowrap",
         gap: "$1.5",
         alignItems: "center",
-        maxHeight: (0, import_utils.getFieldHeight)(knobProps.sizeToken) * 0.75,
+        maxHeight: (0, import_utils.getFieldHeight)(knobProps.sizeToken, 1, hydrationTouch) * 0.75,
         overflow: "hidden",
         overflowX: "auto",
         children: selectedValues.map(function (v) {
@@ -1263,127 +1264,157 @@ function FloatingComboboxCore(param) {
     })]
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [triggerContent, panel.mounted && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react3.FloatingFocusManager, {
-      context: panel.context,
-      modal: false,
-      initialFocus: -1,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        outlineWidth: 0,
-        pointerEvents: panel.visible ? "auto" : "none",
-        ...getFloatingProps({
-          ref: panel.refs.setFloating,
-          id: listboxId
-        }),
-        style: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          zIndex: import_zIndex.zIndex.dropdown,
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: "column",
-          boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
-          opacity: panel.visible ? 1 : 0,
-          transform: panel.visible ? "scale(1)" : "scale(0.96)",
-          transition: import_FloatingPanel.panelTransition,
-          transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
-          boxSizing: "border-box"
-        },
-        backgroundColor: "$background",
-        borderRadius: panel.dropdownRadius,
-        borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
-        borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
-        "data-testid": "combobox-dropdown",
-        children: [!hideSearch && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
-            borderWidth: 0,
-            borderBottomWidth: 1,
-            borderBottomColor: import_colorRamps.formCommonColors.divider,
-            borderRadius: 0,
-            elevation: void 0,
-            // LC-71: search is text-entry — ring the whole row (magnifier included).
-            ...(import_tamagui.isWeb ? {
-              className: "mp-composite-ring"
-            } : void 0),
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-                adornment: "leading",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {})
-              })
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-                ref: searchInputRef,
-                defaultValue: "",
-                onChangeText: function onChangeText(text) {
-                  return setInternalFilter(text);
-                },
-                placeholder: searchPlaceholder,
-                onKeyDown: handleSearchKeyDown,
-                "aria-autocomplete": "list",
-                "aria-controls": listboxId,
-                "aria-activedescendant": activeDescendant,
-                "aria-expanded": open
-              })
-            }), loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-                adornment: "trailing",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
-                  size: "small"
+    children: [triggerContent, panel.mounted && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PanelPortal.PanelPortal, {
+      anchor: panel.triggerRef.current,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react3.FloatingFocusManager, {
+        context: panel.context,
+        modal: false,
+        initialFocus: -1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          outlineWidth: 0,
+          pointerEvents: panel.visible ? "auto" : "none",
+          ...getFloatingProps({
+            ref: panel.refs.setFloating,
+            id: listboxId
+          }),
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            zIndex: import_zIndex.zIndex.dropdown,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+            opacity: panel.visible ? 1 : 0,
+            transform: panel.visible ? "scale(1)" : "scale(0.96)",
+            transition: import_FloatingPanel.panelTransition,
+            transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+            boxSizing: "border-box"
+          },
+          backgroundColor: "$background",
+          borderRadius: panel.dropdownRadius,
+          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
+          borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
+          "data-testid": "combobox-dropdown",
+          children: [!hideSearch && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+            size: knobProps.sizeToken,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+              borderWidth: 0,
+              borderBottomWidth: 1,
+              borderBottomColor: import_colorRamps.formCommonColors.divider,
+              borderRadius: 0,
+              elevation: void 0,
+              // LC-71: search is text-entry — ring the whole row (magnifier included).
+              ...(import_tamagui.isWeb ? {
+                className: "mp-composite-ring"
+              } : void 0),
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+                  adornment: "leading",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {})
                 })
-              })
-            }) : filter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
-                onPress: function onPress() {
-                  return setInternalFilter("");
-                },
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+                  ref: searchInputRef,
+                  defaultValue: "",
+                  onChangeText: function onChangeText(text) {
+                    return setInternalFilter(text);
+                  },
+                  placeholder: searchPlaceholder,
+                  onKeyDown: handleSearchKeyDown,
+                  "aria-autocomplete": "list",
+                  "aria-controls": listboxId,
+                  "aria-activedescendant": activeDescendant,
+                  "aria-expanded": open
+                })
+              }), loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
                 children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {})
+                  adornment: "trailing",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+                    size: "small"
+                  })
                 })
-              })
-            }) : null]
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ref: listScrollRef,
-          overflow: "scroll",
-          flex: 1,
-          minHeight: 0,
-          onScroll: handleListScroll,
-          onMouseMove: handleListMouseMove,
-          onPointerDown: dragProps.onPointerDown,
-          style: dragProps.style,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
-            direction: "up",
-            scrollRef: listScrollRef,
-            visible: panel.arrowUp,
-            arrowScrollDirRef: panel.arrowScrollDirRef
-          }), searchError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              color: import_colorRamps.formCommonColors.error,
-              fontSize: "$3",
-              fontFamily: knobProps.body.fontFamily,
-              fontWeight: knobProps.body.fontWeight,
-              children: searchError
+              }) : filter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+                  onPress: function onPress() {
+                    return setInternalFilter("");
+                  },
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {})
+                  })
+                })
+              }) : null]
             })
-          }) : navigableOptions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-            children: [groupedItems.map(function (item) {
-              return item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
-                color: textColor,
-                "data-combobox-group-header": "",
-                children: item.label
-              }, `header-${item.label}`) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
-                option: item.option,
-                index: item.flatIndex,
-                optionId: comboboxOptionId(id, item.flatIndex),
-                isSelected: isSelected(item.option.value),
-                isActive: item.flatIndex === activeIndex,
-                keyboardRing: item.flatIndex === activeIndex && listKeyboardRing,
-                suppressHover: activeIndex != null,
-                handlers: handlersRef
-              }, item.option.value);
-            }), showCreateOption && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ref: listScrollRef,
+            overflow: "scroll",
+            flex: 1,
+            minHeight: 0,
+            onScroll: handleListScroll,
+            onMouseMove: handleListMouseMove,
+            onPointerDown: dragProps.onPointerDown,
+            style: dragProps.style,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+              direction: "up",
+              scrollRef: listScrollRef,
+              visible: panel.arrowUp,
+              arrowScrollDirRef: panel.arrowScrollDirRef
+            }), searchError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              ...knobProps.panelPadding,
+              alignItems: "center",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                color: import_colorRamps.formCommonColors.error,
+                fontSize: "$3",
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                children: searchError
+              })
+            }) : navigableOptions.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+              children: [groupedItems.map(function (item) {
+                return item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+                  color: textColor,
+                  "data-combobox-group-header": "",
+                  children: item.label
+                }, `header-${item.label}`) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
+                  option: item.option,
+                  index: item.flatIndex,
+                  optionId: comboboxOptionId(id, item.flatIndex),
+                  isSelected: isSelected(item.option.value),
+                  isActive: item.flatIndex === activeIndex,
+                  keyboardRing: item.flatIndex === activeIndex && listKeyboardRing,
+                  suppressHover: activeIndex != null,
+                  handlers: handlersRef
+                }, item.option.value);
+              }), showCreateOption && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
+                role: "option",
+                tabIndex: -1,
+                id: comboboxOptionId(id, createOptionIndex),
+                selected: false,
+                active: createOptionIndex === activeIndex,
+                height: knobProps.control.height,
+                "data-combobox-index": createOptionIndex,
+                "data-active": createOptionIndex === activeIndex,
+                ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
+                backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : void 0,
+                hoverStyle: activeIndex != null ? {
+                  backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
+                } : void 0,
+                onPress: handleCreate,
+                ...(0, import_theme2.transitionProps)(knobProps.transition),
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+                  size: 14,
+                  color: knobProps.textAccentColor
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontFamily: knobProps.body.fontFamily,
+                  fontWeight: knobProps.body.fontWeight,
+                  color: textColor,
+                  numberOfLines: 1,
+                  flex: 1,
+                  children: createLabel.replace("{value}", filter.trim())
+                })]
+              })]
+            }, filter) : showCreateOption ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
               role: "option",
               tabIndex: -1,
               id: comboboxOptionId(id, createOptionIndex),
@@ -1393,14 +1424,17 @@ function FloatingComboboxCore(param) {
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
               ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
-              backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : void 0,
+              onPress: handleCreate,
               hoverStyle: activeIndex != null ? {
                 backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
-              } : void 0,
-              onPress: handleCreate,
-              ...(knobProps.transition ? {
-                transition: knobProps.transition
-              } : void 0),
+              } : {
+                backgroundColor: import_colorRamps.formInputColors.background.focus
+              },
+              backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent",
+              pressStyle: {
+                backgroundColor: import_colorRamps.formInputColors.background.focus
+              },
+              ...(0, import_theme2.transitionProps)(knobProps.transition),
               children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
                 size: 14,
                 color: knobProps.textAccentColor
@@ -1412,79 +1446,45 @@ function FloatingComboboxCore(param) {
                 flex: 1,
                 children: createLabel.replace("{value}", filter.trim())
               })]
+            }) : loading ?
+            // Async search in flight with nothing loaded yet: a bounded
+            // loading row — never a premature "no results".
+            /* @__PURE__ */
+            (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              ...knobProps.panelPadding,
+              alignItems: "center",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+                size: "small"
+              })
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              ...knobProps.panelPadding,
+              alignItems: "center",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                color: import_colorRamps.formCommonColors.muted,
+                fontSize: knobProps.sizeToken,
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                children: emptyMessage
+              })
+            }), hasMore && loading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              padding: "$2",
+              alignItems: "center",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+                size: "small"
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+              direction: "down",
+              scrollRef: listScrollRef,
+              visible: panel.arrowDown,
+              arrowScrollDirRef: panel.arrowScrollDirRef
             })]
-          }, filter) : showCreateOption ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
-            role: "option",
-            tabIndex: -1,
-            id: comboboxOptionId(id, createOptionIndex),
-            selected: false,
-            active: createOptionIndex === activeIndex,
-            height: knobProps.control.height,
-            "data-combobox-index": createOptionIndex,
-            "data-active": createOptionIndex === activeIndex,
-            ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
-            onPress: handleCreate,
-            hoverStyle: activeIndex != null ? {
-              backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
-            } : {
-              backgroundColor: import_colorRamps.formInputColors.background.focus
-            },
-            backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent",
-            pressStyle: {
-              backgroundColor: import_colorRamps.formInputColors.background.focus
-            },
-            ...(knobProps.transition ? {
-              transition: knobProps.transition
-            } : void 0),
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
-              size: 14,
-              color: knobProps.textAccentColor
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontFamily: knobProps.body.fontFamily,
-              fontWeight: knobProps.body.fontWeight,
-              color: textColor,
-              numberOfLines: 1,
-              flex: 1,
-              children: createLabel.replace("{value}", filter.trim())
-            })]
-          }) : loading ?
-          // Async search in flight with nothing loaded yet: a bounded
-          // loading row — never a premature "no results".
-          /* @__PURE__ */
-          (0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
-              size: "small"
-            })
-          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              color: import_colorRamps.formCommonColors.muted,
-              fontSize: knobProps.sizeToken,
-              fontFamily: knobProps.body.fontFamily,
-              fontWeight: knobProps.body.fontWeight,
-              children: emptyMessage
-            })
-          }), hasMore && loading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            padding: "$2",
-            alignItems: "center",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
-              size: "small"
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
-            direction: "down",
-            scrollRef: listScrollRef,
-            visible: panel.arrowDown,
-            arrowScrollDirRef: panel.arrowScrollDirRef
           })]
-        })]
+        })
       })
     })]
   });
 }
-var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown) {
+var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown, inputRef) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     alignItems: "center",
     gap: "$2",
@@ -1496,6 +1496,7 @@ var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, set
       size: 16,
       color: mutedColor
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+      ref: inputRef,
       unstyled: true,
       flex: 1,
       placeholder: searchPlaceholder,
@@ -1560,13 +1561,14 @@ function NativeComboboxCore(param) {
   } = param;
   var _ref, _knobProps_transition, _ref1, _ref2;
   var _theme_color7;
-  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
   var {
     t
   } = (0, import_i18n.useTranslation)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
-  var glyphColor = (0, import_theme.useGlyphColor)();
+  var glyphColor = (0, import_theme2.useGlyphColor)();
   var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   var open = openProp !== void 0 ? openProp : internalOpen;
   var setOpen = (0, import_react.useCallback)(function (nextOpen) {
@@ -1586,6 +1588,7 @@ function NativeComboboxCore(param) {
     });
   }, []);
   var listRef = (0, import_react.useRef)(null);
+  var searchInputRef = (0, import_react.useRef)(null);
   var fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   var textColor = knobProps.textAccentColor;
   var theme = (0, import_tamagui.useTheme)();
@@ -1706,13 +1709,16 @@ function NativeComboboxCore(param) {
     if (open) {
       setActiveIndex(0);
       requestAnimationFrame(function () {
-        var _listRef_current;
-        return (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
+        var _listRef_current, _searchInputRef_current;
+        return hideSearch ? (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus() : (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
       });
     } else {
       setInternalFilter("");
     }
   }, [open]);
+  (0, import_react.useEffect)(function () {
+    if (open) setActiveIndex(0);
+  }, [filter]);
   var totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
   var createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   var listboxId = comboboxListboxId(id);
@@ -1830,7 +1836,7 @@ function NativeComboboxCore(param) {
     setOpen(val);
     if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
   }, [onBlur]);
-  var searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading !== null && loading !== void 0 ? loading : false, handleSearchKeyDown);
+  var searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading !== null && loading !== void 0 ? loading : false, handleSearchKeyDown, searchInputRef);
   var listContent =
   // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
   // accessibility element, which merges every option into one unactionable
@@ -2081,7 +2087,7 @@ function NativeComboboxCore(param) {
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
       outlineOffset: -2
     }),
     style: {
@@ -2122,7 +2128,7 @@ function NativeComboboxCore(param) {
         flexWrap: "nowrap",
         gap: "$1.5",
         alignItems: "center",
-        maxHeight: (0, import_utils.getFieldHeight)(knobProps.sizeToken) * 0.75,
+        maxHeight: (0, import_utils.getFieldHeight)(knobProps.sizeToken, 1, hydrationTouch) * 0.75,
         overflow: "hidden",
         overflowX: "auto",
         children: selectedValues.map(function (v) {