@multiplatform.one/forms 7.11.0 → 7.16.0

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTouchSurface } from "@multiplatform.one/theme";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
 import { useTranslation } from "../../shared/i18n.native.js";
 import { CaretDownIcon, CheckIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, FloatingFocusManager } from "@floating-ui/react";
-import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, useGlyphColor } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, menuRowFrame, useGlyphColor, transitionProps } from "@multiplatform.one/theme";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Button } from "../../Button/index.native.js";
@@ -17,6 +18,7 @@ import { formCommonColors, formInputColors, formSelectedColors } from "../../sha
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
 import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.native.js";
 import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
+import { PanelPortal } from "../../FloatingPanel/PanelPortal.native.js";
 import { zIndex } from "../../shared/zIndex.native.js";
 import { useDragScroll } from "../../shared/useDragScroll.native.js";
 import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
@@ -283,9 +285,7 @@ var ComboboxItem = /* @__PURE__ */memo(function ComboboxItem2(param) {
       height: "auto",
       paddingVertical: "$2"
     } : void 0),
-    ...(ctx.knobProps.transition ? {
-      transition: ctx.knobProps.transition
-    } : void 0),
+    ...transitionProps(ctx.knobProps.transition),
     children: [option.description ? /* @__PURE__ */_jsxs(YStack, {
       flex: 1,
       minWidth: 0,
@@ -352,6 +352,7 @@ function FloatingComboboxCore(param) {
     onOpenChange
   } = param;
   var _ref;
+  var hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   var {
     t
@@ -1171,7 +1172,7 @@ function FloatingComboboxCore(param) {
         flexWrap: "nowrap",
         gap: "$1.5",
         alignItems: "center",
-        maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+        maxHeight: getFieldHeight(knobProps.sizeToken, 1, hydrationTouch) * 0.75,
         overflow: "hidden",
         overflowX: "auto",
         children: selectedValues.map(function (v) {
@@ -1234,127 +1235,157 @@ function FloatingComboboxCore(param) {
     })]
   });
   return /* @__PURE__ */_jsxs(_Fragment, {
-    children: [triggerContent, panel.mounted && /* @__PURE__ */_jsx(FloatingFocusManager, {
-      context: panel.context,
-      modal: false,
-      initialFocus: -1,
-      children: /* @__PURE__ */_jsxs(YStack, {
-        outlineWidth: 0,
-        pointerEvents: panel.visible ? "auto" : "none",
-        ...getFloatingProps({
-          ref: panel.refs.setFloating,
-          id: listboxId
-        }),
-        style: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          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: 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 ? formInputColors.border.focus : "transparent",
-        "data-testid": "combobox-dropdown",
-        children: [!hideSearch && /* @__PURE__ */_jsx(InputParts, {
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */_jsxs(InputParts.Box, {
-            borderWidth: 0,
-            borderBottomWidth: 1,
-            borderBottomColor: formCommonColors.divider,
-            borderRadius: 0,
-            elevation: void 0,
-            // LC-71: search is text-entry — ring the whole row (magnifier included).
-            ...(isWeb ? {
-              className: "mp-composite-ring"
-            } : void 0),
-            children: [/* @__PURE__ */_jsx(InputParts.Section, {
-              children: /* @__PURE__ */_jsx(InputParts.Icon, {
-                adornment: "leading",
-                children: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {})
-              })
-            }), /* @__PURE__ */_jsx(InputParts.Section, {
-              children: /* @__PURE__ */_jsx(InputParts.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__ */_jsx(InputParts.Section, {
-              children: /* @__PURE__ */_jsx(InputParts.Icon, {
-                adornment: "trailing",
-                children: /* @__PURE__ */_jsx(Spinner, {
-                  size: "small"
+    children: [triggerContent, panel.mounted && /* @__PURE__ */_jsx(PanelPortal, {
+      anchor: panel.triggerRef.current,
+      children: /* @__PURE__ */_jsx(FloatingFocusManager, {
+        context: panel.context,
+        modal: false,
+        initialFocus: -1,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          outlineWidth: 0,
+          pointerEvents: panel.visible ? "auto" : "none",
+          ...getFloatingProps({
+            ref: panel.refs.setFloating,
+            id: listboxId
+          }),
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            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: 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 ? formInputColors.border.focus : "transparent",
+          "data-testid": "combobox-dropdown",
+          children: [!hideSearch && /* @__PURE__ */_jsx(InputParts, {
+            size: knobProps.sizeToken,
+            children: /* @__PURE__ */_jsxs(InputParts.Box, {
+              borderWidth: 0,
+              borderBottomWidth: 1,
+              borderBottomColor: formCommonColors.divider,
+              borderRadius: 0,
+              elevation: void 0,
+              // LC-71: search is text-entry — ring the whole row (magnifier included).
+              ...(isWeb ? {
+                className: "mp-composite-ring"
+              } : void 0),
+              children: [/* @__PURE__ */_jsx(InputParts.Section, {
+                children: /* @__PURE__ */_jsx(InputParts.Icon, {
+                  adornment: "leading",
+                  children: /* @__PURE__ */_jsx(MagnifyingGlassIcon, {})
                 })
-              })
-            }) : filter ? /* @__PURE__ */_jsx(InputParts.Section, {
-              children: /* @__PURE__ */_jsx(InputParts.Button, {
-                onPress: function onPress() {
-                  return setInternalFilter("");
-                },
+              }), /* @__PURE__ */_jsx(InputParts.Section, {
+                children: /* @__PURE__ */_jsx(InputParts.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__ */_jsx(InputParts.Section, {
                 children: /* @__PURE__ */_jsx(InputParts.Icon, {
-                  children: /* @__PURE__ */_jsx(XIcon, {})
+                  adornment: "trailing",
+                  children: /* @__PURE__ */_jsx(Spinner, {
+                    size: "small"
+                  })
                 })
-              })
-            }) : null]
-          })
-        }), /* @__PURE__ */_jsxs(YStack, {
-          ref: listScrollRef,
-          overflow: "scroll",
-          flex: 1,
-          minHeight: 0,
-          onScroll: handleListScroll,
-          onMouseMove: handleListMouseMove,
-          onPointerDown: dragProps.onPointerDown,
-          style: dragProps.style,
-          children: [/* @__PURE__ */_jsx(ScrollArrow, {
-            direction: "up",
-            scrollRef: listScrollRef,
-            visible: panel.arrowUp,
-            arrowScrollDirRef: panel.arrowScrollDirRef
-          }), searchError ? /* @__PURE__ */_jsx(View, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */_jsx(Text, {
-              color: formCommonColors.error,
-              fontSize: "$3",
-              fontFamily: knobProps.body.fontFamily,
-              fontWeight: knobProps.body.fontWeight,
-              children: searchError
+              }) : filter ? /* @__PURE__ */_jsx(InputParts.Section, {
+                children: /* @__PURE__ */_jsx(InputParts.Button, {
+                  onPress: function onPress() {
+                    return setInternalFilter("");
+                  },
+                  children: /* @__PURE__ */_jsx(InputParts.Icon, {
+                    children: /* @__PURE__ */_jsx(XIcon, {})
+                  })
+                })
+              }) : null]
             })
-          }) : navigableOptions.length > 0 ? /* @__PURE__ */_jsxs(Fragment, {
-            children: [groupedItems.map(function (item) {
-              return item.type === "header" ? /* @__PURE__ */_jsx(GroupHeader, {
-                color: textColor,
-                "data-combobox-group-header": "",
-                children: item.label
-              }, `header-${item.label}`) : /* @__PURE__ */_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__ */_jsxs(ComboboxRow, {
+          }), /* @__PURE__ */_jsxs(YStack, {
+            ref: listScrollRef,
+            overflow: "scroll",
+            flex: 1,
+            minHeight: 0,
+            onScroll: handleListScroll,
+            onMouseMove: handleListMouseMove,
+            onPointerDown: dragProps.onPointerDown,
+            style: dragProps.style,
+            children: [/* @__PURE__ */_jsx(ScrollArrow, {
+              direction: "up",
+              scrollRef: listScrollRef,
+              visible: panel.arrowUp,
+              arrowScrollDirRef: panel.arrowScrollDirRef
+            }), searchError ? /* @__PURE__ */_jsx(View, {
+              ...knobProps.panelPadding,
+              alignItems: "center",
+              children: /* @__PURE__ */_jsx(Text, {
+                color: formCommonColors.error,
+                fontSize: "$3",
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                children: searchError
+              })
+            }) : navigableOptions.length > 0 ? /* @__PURE__ */_jsxs(Fragment, {
+              children: [groupedItems.map(function (item) {
+                return item.type === "header" ? /* @__PURE__ */_jsx(GroupHeader, {
+                  color: textColor,
+                  "data-combobox-group-header": "",
+                  children: item.label
+                }, `header-${item.label}`) : /* @__PURE__ */_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__ */_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 ? formInputColors.background.focus : void 0,
+                hoverStyle: activeIndex != null ? {
+                  backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
+                } : void 0,
+                onPress: handleCreate,
+                ...transitionProps(knobProps.transition),
+                children: [/* @__PURE__ */_jsx(PlusIcon, {
+                  size: 14,
+                  color: knobProps.textAccentColor
+                }), /* @__PURE__ */_jsx(Text, {
+                  fontFamily: knobProps.body.fontFamily,
+                  fontWeight: knobProps.body.fontWeight,
+                  color: textColor,
+                  numberOfLines: 1,
+                  flex: 1,
+                  children: createLabel.replace("{value}", filter.trim())
+                })]
+              })]
+            }, filter) : showCreateOption ? /* @__PURE__ */_jsxs(ComboboxRow, {
               role: "option",
               tabIndex: -1,
               id: comboboxOptionId(id, createOptionIndex),
@@ -1364,14 +1395,17 @@ function FloatingComboboxCore(param) {
               "data-combobox-index": createOptionIndex,
               "data-active": createOptionIndex === activeIndex,
               ...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing),
-              backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : void 0,
+              onPress: handleCreate,
               hoverStyle: activeIndex != null ? {
                 backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent"
-              } : void 0,
-              onPress: handleCreate,
-              ...(knobProps.transition ? {
-                transition: knobProps.transition
-              } : void 0),
+              } : {
+                backgroundColor: formInputColors.background.focus
+              },
+              backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent",
+              pressStyle: {
+                backgroundColor: formInputColors.background.focus
+              },
+              ...transitionProps(knobProps.transition),
               children: [/* @__PURE__ */_jsx(PlusIcon, {
                 size: 14,
                 color: knobProps.textAccentColor
@@ -1383,79 +1417,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__ */
+            _jsx(View, {
+              ...knobProps.panelPadding,
+              alignItems: "center",
+              children: /* @__PURE__ */_jsx(Spinner, {
+                size: "small"
+              })
+            }) : /* @__PURE__ */_jsx(View, {
+              ...knobProps.panelPadding,
+              alignItems: "center",
+              children: /* @__PURE__ */_jsx(Text, {
+                color: formCommonColors.muted,
+                fontSize: knobProps.sizeToken,
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                children: emptyMessage
+              })
+            }), hasMore && loading && /* @__PURE__ */_jsx(View, {
+              padding: "$2",
+              alignItems: "center",
+              children: /* @__PURE__ */_jsx(Spinner, {
+                size: "small"
+              })
+            }), /* @__PURE__ */_jsx(ScrollArrow, {
+              direction: "down",
+              scrollRef: listScrollRef,
+              visible: panel.arrowDown,
+              arrowScrollDirRef: panel.arrowScrollDirRef
             })]
-          }, filter) : showCreateOption ? /* @__PURE__ */_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 ? formInputColors.background.focus : "transparent"
-            } : {
-              backgroundColor: formInputColors.background.focus
-            },
-            backgroundColor: createOptionIndex === activeIndex ? formInputColors.background.focus : "transparent",
-            pressStyle: {
-              backgroundColor: formInputColors.background.focus
-            },
-            ...(knobProps.transition ? {
-              transition: knobProps.transition
-            } : void 0),
-            children: [/* @__PURE__ */_jsx(PlusIcon, {
-              size: 14,
-              color: knobProps.textAccentColor
-            }), /* @__PURE__ */_jsx(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__ */
-          _jsx(View, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */_jsx(Spinner, {
-              size: "small"
-            })
-          }) : /* @__PURE__ */_jsx(View, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */_jsx(Text, {
-              color: formCommonColors.muted,
-              fontSize: knobProps.sizeToken,
-              fontFamily: knobProps.body.fontFamily,
-              fontWeight: knobProps.body.fontWeight,
-              children: emptyMessage
-            })
-          }), hasMore && loading && /* @__PURE__ */_jsx(View, {
-            padding: "$2",
-            alignItems: "center",
-            children: /* @__PURE__ */_jsx(Spinner, {
-              size: "small"
-            })
-          }), /* @__PURE__ */_jsx(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__ */_jsxs(XStack, {
     alignItems: "center",
     gap: "$2",
@@ -1467,6 +1467,7 @@ var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, set
       size: 16,
       color: mutedColor
     }), /* @__PURE__ */_jsx(TInput, {
+      ref: inputRef,
       unstyled: true,
       flex: 1,
       placeholder: searchPlaceholder,
@@ -1531,6 +1532,7 @@ function NativeComboboxCore(param) {
   } = param;
   var _ref, _knobProps_transition, _ref1, _ref2;
   var _theme_color7;
+  var hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   var {
     t
@@ -1557,6 +1559,7 @@ function NativeComboboxCore(param) {
     });
   }, []);
   var listRef = useRef(null);
+  var searchInputRef = useRef(null);
   var fieldA11y = useFieldA11y();
   var textColor = knobProps.textAccentColor;
   var theme = useTheme();
@@ -1677,13 +1680,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]);
+  useEffect(function () {
+    if (open) setActiveIndex(0);
+  }, [filter]);
   var totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
   var createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   var listboxId = comboboxListboxId(id);
@@ -1801,7 +1807,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
@@ -2093,7 +2099,7 @@ function NativeComboboxCore(param) {
         flexWrap: "nowrap",
         gap: "$1.5",
         alignItems: "center",
-        maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+        maxHeight: getFieldHeight(knobProps.sizeToken, 1, hydrationTouch) * 0.75,
         overflow: "hidden",
         overflowX: "auto",
         children: selectedValues.map(function (v) {