@multiplatform.one/forms 7.11.0 → 7.16.0

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

@@ -1,8 +1,9 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
 import { useTranslation } from "../../shared/i18n.mjs";
 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-web";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Button } from "../../Button/index.mjs";
@@ -16,6 +17,7 @@ import { formCommonColors, formInputColors, formSelectedColors } from "../../sha
 import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.mjs";
 import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
+import { PanelPortal } from "../../FloatingPanel/PanelPortal.mjs";
 import { zIndex } from "../../shared/zIndex.mjs";
 import { useDragScroll } from "../../shared/useDragScroll.mjs";
 import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
@@ -193,9 +195,7 @@ const ComboboxItem = memo(function ComboboxItem2({
       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,
@@ -260,6 +260,7 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  const hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   const {
     t
@@ -982,7 +983,7 @@ function FloatingComboboxCore({
         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(v => /* @__PURE__ */jsx(Chip, {
@@ -1037,120 +1038,150 @@ function FloatingComboboxCore({
     })]
   });
   return /* @__PURE__ */jsxs(Fragment2, {
-    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,
-            ...(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: text => 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,
+              ...(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: () => setInternalFilter(""),
+              }), /* @__PURE__ */jsx(InputParts.Section, {
+                children: /* @__PURE__ */jsx(InputParts.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__ */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: () => setInternalFilter(""),
+                  children: /* @__PURE__ */jsx(InputParts.Icon, {
+                    children: /* @__PURE__ */jsx(XIcon, {})
+                  })
+                })
+              }) : null]
             })
-          }) : navigableOptions.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
-            children: [groupedItems.map(item => 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(item => 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),
@@ -1160,14 +1191,17 @@ function FloatingComboboxCore({
               "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
@@ -1179,79 +1213,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__ */
+            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
           })]
-        })]
+        })
       })
     })]
   });
 }
-const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown) => /* @__PURE__ */jsxs(XStack, {
+const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown, inputRef) => /* @__PURE__ */jsxs(XStack, {
   alignItems: "center",
   gap: "$2",
   paddingHorizontal: "$3",
@@ -1262,6 +1262,7 @@ const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, t
     size: 16,
     color: mutedColor
   }), /* @__PURE__ */jsx(TInput, {
+    ref: inputRef,
     unstyled: true,
     flex: 1,
     placeholder: searchPlaceholder,
@@ -1319,6 +1320,7 @@ function NativeComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  const hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   const {
     t
@@ -1343,6 +1345,7 @@ function NativeComboboxCore({
     setListKeyboardRing(prev => prev === next ? prev : next);
   }, []);
   const listRef = useRef(null);
+  const searchInputRef = useRef(null);
   const fieldA11y = useFieldA11y();
   const textColor = knobProps.textAccentColor;
   const theme = useTheme();
@@ -1416,11 +1419,14 @@ function NativeComboboxCore({
   useEffect(() => {
     if (open) {
       setActiveIndex(0);
-      requestAnimationFrame(() => listRef.current?.focus());
+      requestAnimationFrame(() => hideSearch ? listRef.current?.focus() : searchInputRef.current?.focus());
     } else {
       setInternalFilter("");
     }
   }, [open]);
+  useEffect(() => {
+    if (open) setActiveIndex(0);
+  }, [filter]);
   const totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   const listboxId = comboboxListboxId(id);
@@ -1532,7 +1538,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
@@ -1810,7 +1816,7 @@ function NativeComboboxCore({
         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(v => /* @__PURE__ */jsx(Chip, {