@multiplatform.one/forms 7.11.0 → 7.15.0

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

@@ -25,11 +25,12 @@ __export(Combobox_exports, {
   Combobox: () => Combobox
 });
 module.exports = __toCommonJS(Combobox_exports);
+var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_i18n = require("../../shared/i18n.cjs");
 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-web");
 var import_tamagui = require("tamagui");
 var import_Button = require("../../Button/index.cjs");
@@ -43,6 +44,7 @@ var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_floatingList = require("../../shared/floatingList.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_PanelPortal = require("../../FloatingPanel/PanelPortal.cjs");
 var import_zIndex = require("../../shared/zIndex.cjs");
 var import_useDragScroll = require("../../shared/useDragScroll.cjs");
 var import_tableCellContext = require("../../shared/tableCellContext.cjs");
@@ -51,13 +53,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 const scrollArrowBuffer = 28;
 const 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: {
@@ -89,7 +91,7 @@ function comboboxListboxId(baseId) {
   return `${baseId ?? "combobox"}-listbox`;
 }
 function listItemRingProps(keyboardRing) {
-  return keyboardRing ? import_theme.keyboardFocusRingProps : {
+  return keyboardRing ? import_theme2.keyboardFocusRingProps : {
     outlineWidth: 0
   };
 }
@@ -220,9 +222,7 @@ const ComboboxItem = (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,
@@ -287,13 +287,14 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange
 }) {
-  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
+  if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
   const {
     t
   } = (0, import_i18n.useTranslation)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
-  const glyphColor = (0, import_theme.useGlyphColor)();
+  const glyphColor = (0, import_theme2.useGlyphColor)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = (0, import_react.useCallback)(nextOpen => {
@@ -973,7 +974,7 @@ function FloatingComboboxCore({
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
       outlineOffset: -2
     }),
     style: {
@@ -1009,7 +1010,7 @@ function FloatingComboboxCore({
         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(v => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.Chip, {
@@ -1064,120 +1065,150 @@ function FloatingComboboxCore({
     })]
   });
   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,
-            ...(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: text => 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,
+              ...(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: () => 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: text => 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: () => 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(item => 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(item => 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),
@@ -1187,14 +1218,17 @@ function FloatingComboboxCore({
               "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
@@ -1206,79 +1240,45 @@ function FloatingComboboxCore({
                 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
           })]
-        })]
+        })
       })
     })]
   });
 }
-const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown, inputRef) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
   alignItems: "center",
   gap: "$2",
   paddingHorizontal: "$3",
@@ -1289,6 +1289,7 @@ const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, t
     size: 16,
     color: mutedColor
   }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+    ref: inputRef,
     unstyled: true,
     flex: 1,
     placeholder: searchPlaceholder,
@@ -1346,13 +1347,14 @@ function NativeComboboxCore({
   open: openProp,
   onOpenChange
 }) {
-  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
+  if (import_tamagui.isWeb) (0, import_theme2.ensureKeyboardModalityTracking)();
   const {
     t
   } = (0, import_i18n.useTranslation)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   const describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
-  const glyphColor = (0, import_theme.useGlyphColor)();
+  const glyphColor = (0, import_theme2.useGlyphColor)();
   const [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = (0, import_react.useCallback)(nextOpen => {
@@ -1370,6 +1372,7 @@ function NativeComboboxCore({
     setListKeyboardRing(prev => prev === next ? prev : next);
   }, []);
   const listRef = (0, import_react.useRef)(null);
+  const searchInputRef = (0, import_react.useRef)(null);
   const fieldA11y = (0, import_fieldLayout.useFieldA11y)();
   const textColor = knobProps.textAccentColor;
   const theme = (0, import_tamagui.useTheme)();
@@ -1443,11 +1446,14 @@ function NativeComboboxCore({
   (0, import_react.useEffect)(() => {
     if (open) {
       setActiveIndex(0);
-      requestAnimationFrame(() => listRef.current?.focus());
+      requestAnimationFrame(() => hideSearch ? listRef.current?.focus() : searchInputRef.current?.focus());
     } else {
       setInternalFilter("");
     }
   }, [open]);
+  (0, import_react.useEffect)(() => {
+    if (open) setActiveIndex(0);
+  }, [filter]);
   const totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   const listboxId = comboboxListboxId(id);
@@ -1559,7 +1565,7 @@ function NativeComboboxCore({
     setOpen(val);
     if (!val) onBlur?.();
   }, [onBlur]);
-  const searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading ?? false, handleSearchKeyDown);
+  const searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading ?? false, handleSearchKeyDown, searchInputRef);
   const listContent =
   // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
   // accessibility element, which merges every option into one unactionable
@@ -1802,7 +1808,7 @@ function NativeComboboxCore({
     alignSelf: "stretch",
     flexShrink: 0,
     outlineWidth: 0,
-    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+    focusVisibleStyle: (0, import_theme2.ensureFocusVisibleRing)({
       outlineOffset: -2
     }),
     style: {
@@ -1837,7 +1843,7 @@ function NativeComboboxCore({
         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(v => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.Chip, {