@multiplatform.one/forms 7.10.0 → 7.15.0

package/src/fields/Combobox/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import {
   Fragment,
@@ -33,6 +34,7 @@ import {
   menuRowFrame,
   useGlyphColor,
   useResolvedKnobs,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
@@ -64,6 +66,7 @@ import {
   panelViewportPadding,
   useViewportGtSm,
 } from "../../FloatingPanel";
+import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { zIndex } from "../../shared/zIndex";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
@@ -399,7 +402,7 @@ const ComboboxItem = memo(function ComboboxItem({
         ? // Two-line rows need to grow past the size-variant height.
           { height: "auto", paddingVertical: "$2" }
         : undefined)}
-      {...(ctx.knobProps.transition ? { transition: ctx.knobProps.transition } : undefined)}
+      {...transitionProps(ctx.knobProps.transition)}
     >
       {option.description ? (
         <YStack flex={1} minWidth={0}>
@@ -509,6 +512,7 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange,
 }: FloatingComboboxCoreProps) {
+  const hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   const { t } = useTranslation();
   const inTableCell = useIsInTableCell();
@@ -1406,7 +1410,7 @@ function FloatingComboboxCore({
             flexWrap="nowrap"
             gap="$1.5"
             alignItems="center"
-            maxHeight={getFieldHeight(knobProps.sizeToken as SizeTokens) * 0.75}
+            maxHeight={getFieldHeight(knobProps.sizeToken as SizeTokens, 1, hydrationTouch) * 0.75}
             overflow="hidden"
             overflowX="auto"
           >
@@ -1476,252 +1480,256 @@ function FloatingComboboxCore({
       {triggerContent}
 
       {panel.mounted && (
-        <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
-          <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",
-              } as any
-            }
-            backgroundColor="$background"
-            borderRadius={panel.dropdownRadius}
-            borderWidth={panel.hasBorder ? knobProps.borderRadius.borderWidth : 0}
-            borderColor={panel.hasBorder ? formInputColors.border.focus : "transparent"}
-            data-testid="combobox-dropdown"
-          >
-            {!hideSearch && (
-              <InputParts size={knobProps.sizeToken}>
-                <InputParts.Box
-                  borderWidth={0}
-                  borderBottomWidth={1}
-                  borderBottomColor={formCommonColors.divider}
-                  borderRadius={0}
-                  elevation={undefined}
-                  // LC-71: search is text-entry — ring the whole row (magnifier included).
-                  {...(isWeb ? { className: "mp-composite-ring" } : undefined)}
-                >
-                  <InputParts.Section>
-                    <InputParts.Icon adornment="leading">
-                      <MagnifyingGlassIcon />
-                    </InputParts.Icon>
-                  </InputParts.Section>
-                  <InputParts.Section>
-                    <InputParts.Area
-                      ref={searchInputRef as any}
-                      defaultValue=""
-                      onChangeText={(text: string) => setInternalFilter(text)}
-                      placeholder={searchPlaceholder}
-                      onKeyDown={handleSearchKeyDown as any}
-                      aria-autocomplete="list"
-                      aria-controls={listboxId}
-                      aria-activedescendant={activeDescendant}
-                      aria-expanded={open}
-                    />
-                  </InputParts.Section>
-                  {loading ? (
+        <PanelPortal anchor={panel.triggerRef.current}>
+          <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
+            <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",
+                } as any
+              }
+              backgroundColor="$background"
+              borderRadius={panel.dropdownRadius}
+              borderWidth={panel.hasBorder ? knobProps.borderRadius.borderWidth : 0}
+              borderColor={panel.hasBorder ? formInputColors.border.focus : "transparent"}
+              data-testid="combobox-dropdown"
+            >
+              {!hideSearch && (
+                <InputParts size={knobProps.sizeToken}>
+                  <InputParts.Box
+                    borderWidth={0}
+                    borderBottomWidth={1}
+                    borderBottomColor={formCommonColors.divider}
+                    borderRadius={0}
+                    elevation={undefined}
+                    // LC-71: search is text-entry — ring the whole row (magnifier included).
+                    {...(isWeb ? { className: "mp-composite-ring" } : undefined)}
+                  >
                     <InputParts.Section>
-                      <InputParts.Icon adornment="trailing">
-                        <Spinner size="small" />
+                      <InputParts.Icon adornment="leading">
+                        <MagnifyingGlassIcon />
                       </InputParts.Icon>
                     </InputParts.Section>
-                  ) : filter ? (
                     <InputParts.Section>
-                      <InputParts.Button onPress={() => setInternalFilter("")}>
-                        <InputParts.Icon>
-                          <XIcon />
-                        </InputParts.Icon>
-                      </InputParts.Button>
+                      <InputParts.Area
+                        ref={searchInputRef as any}
+                        defaultValue=""
+                        onChangeText={(text: string) => setInternalFilter(text)}
+                        placeholder={searchPlaceholder}
+                        onKeyDown={handleSearchKeyDown as any}
+                        aria-autocomplete="list"
+                        aria-controls={listboxId}
+                        aria-activedescendant={activeDescendant}
+                        aria-expanded={open}
+                      />
                     </InputParts.Section>
-                  ) : null}
-                </InputParts.Box>
-              </InputParts>
-            )}
+                    {loading ? (
+                      <InputParts.Section>
+                        <InputParts.Icon adornment="trailing">
+                          <Spinner size="small" />
+                        </InputParts.Icon>
+                      </InputParts.Section>
+                    ) : filter ? (
+                      <InputParts.Section>
+                        <InputParts.Button onPress={() => setInternalFilter("")}>
+                          <InputParts.Icon>
+                            <XIcon />
+                          </InputParts.Icon>
+                        </InputParts.Button>
+                      </InputParts.Section>
+                    ) : null}
+                  </InputParts.Box>
+                </InputParts>
+              )}
 
-            <YStack
-              ref={listScrollRef as any}
-              overflow="scroll"
-              flex={1}
-              minHeight={0}
-              onScroll={handleListScroll as any}
-              onMouseMove={handleListMouseMove}
-              onPointerDown={dragProps.onPointerDown}
-              style={dragProps.style}
-            >
-              <ScrollArrow
-                direction="up"
-                scrollRef={listScrollRef}
-                visible={panel.arrowUp}
-                arrowScrollDirRef={panel.arrowScrollDirRef}
-              />
-              {searchError ? (
-                <View {...knobProps.panelPadding} alignItems="center">
-                  <Text
-                    color={formCommonColors.error}
-                    fontSize="$3"
-                    fontFamily={knobProps.body.fontFamily}
-                    fontWeight={knobProps.body.fontWeight}
-                  >
-                    {searchError}
-                  </Text>
-                </View>
-              ) : navigableOptions.length > 0 ? (
-                <Fragment key={filter}>
-                  {groupedItems.map((item) =>
-                    item.type === "header" ? (
-                      <GroupHeader
-                        key={`header-${item.label}`}
-                        color={textColor}
-                        data-combobox-group-header=""
-                      >
-                        {item.label}
-                      </GroupHeader>
-                    ) : (
-                      <ComboboxItem
-                        key={item.option.value}
-                        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}
-                      />
-                    ),
-                  )}
-                  {showCreateOption && (
-                    <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
-                          : undefined
-                      }
-                      hoverStyle={
-                        activeIndex != null
-                          ? {
-                              backgroundColor:
-                                createOptionIndex === activeIndex
-                                  ? formInputColors.background.focus
-                                  : "transparent",
-                            }
-                          : undefined
-                      }
-                      onPress={handleCreate}
-                      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+              <YStack
+                ref={listScrollRef as any}
+                overflow="scroll"
+                flex={1}
+                minHeight={0}
+                onScroll={handleListScroll as any}
+                onMouseMove={handleListMouseMove}
+                onPointerDown={dragProps.onPointerDown}
+                style={dragProps.style}
+              >
+                <ScrollArrow
+                  direction="up"
+                  scrollRef={listScrollRef}
+                  visible={panel.arrowUp}
+                  arrowScrollDirRef={panel.arrowScrollDirRef}
+                />
+                {searchError ? (
+                  <View {...knobProps.panelPadding} alignItems="center">
+                    <Text
+                      color={formCommonColors.error}
+                      fontSize="$3"
+                      fontFamily={knobProps.body.fontFamily}
+                      fontWeight={knobProps.body.fontWeight}
                     >
-                      <PlusIcon size={14} color={knobProps.textAccentColor} />
-                      <Text
-                        fontFamily={knobProps.body.fontFamily}
-                        fontWeight={knobProps.body.fontWeight}
-                        color={textColor}
-                        numberOfLines={1}
-                        flex={1}
-                      >
-                        {createLabel.replace("{value}", filter.trim())}
-                      </Text>
-                    </ComboboxRow>
-                  )}
-                </Fragment>
-              ) : showCreateOption ? (
-                <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",
+                      {searchError}
+                    </Text>
+                  </View>
+                ) : navigableOptions.length > 0 ? (
+                  <Fragment key={filter}>
+                    {groupedItems.map((item) =>
+                      item.type === "header" ? (
+                        <GroupHeader
+                          key={`header-${item.label}`}
+                          color={textColor}
+                          data-combobox-group-header=""
+                        >
+                          {item.label}
+                        </GroupHeader>
+                      ) : (
+                        <ComboboxItem
+                          key={item.option.value}
+                          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}
+                        />
+                      ),
+                    )}
+                    {showCreateOption && (
+                      <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
+                            : undefined
                         }
-                      : { backgroundColor: formInputColors.background.focus }
-                  }
-                  backgroundColor={
-                    createOptionIndex === activeIndex
-                      ? formInputColors.background.focus
-                      : "transparent"
-                  }
-                  pressStyle={{ backgroundColor: formInputColors.background.focus }}
-                  {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
-                >
-                  <PlusIcon size={14} color={knobProps.textAccentColor} />
-                  <Text
-                    fontFamily={knobProps.body.fontFamily}
-                    fontWeight={knobProps.body.fontWeight}
-                    color={textColor}
-                    numberOfLines={1}
-                    flex={1}
-                  >
-                    {createLabel.replace("{value}", filter.trim())}
-                  </Text>
-                </ComboboxRow>
-              ) : loading ? (
-                // Async search in flight with nothing loaded yet: a bounded
-                // loading row — never a premature "no results".
-                <View {...knobProps.panelPadding} alignItems="center">
-                  <Spinner size="small" />
-                </View>
-              ) : (
-                <View {...knobProps.panelPadding} alignItems="center">
-                  <Text
-                    color={formCommonColors.muted}
-                    fontSize={knobProps.sizeToken}
-                    fontFamily={knobProps.body.fontFamily}
-                    fontWeight={knobProps.body.fontWeight}
+                        hoverStyle={
+                          activeIndex != null
+                            ? {
+                                backgroundColor:
+                                  createOptionIndex === activeIndex
+                                    ? formInputColors.background.focus
+                                    : "transparent",
+                              }
+                            : undefined
+                        }
+                        onPress={handleCreate}
+                        {...transitionProps(knobProps.transition)}
+                      >
+                        <PlusIcon size={14} color={knobProps.textAccentColor} />
+                        <Text
+                          fontFamily={knobProps.body.fontFamily}
+                          fontWeight={knobProps.body.fontWeight}
+                          color={textColor}
+                          numberOfLines={1}
+                          flex={1}
+                        >
+                          {createLabel.replace("{value}", filter.trim())}
+                        </Text>
+                      </ComboboxRow>
+                    )}
+                  </Fragment>
+                ) : showCreateOption ? (
+                  <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 }}
+                    {...transitionProps(knobProps.transition)}
                   >
-                    {emptyMessage}
-                  </Text>
-                </View>
-              )}
-              {hasMore && loading && (
-                <View padding="$2" alignItems="center">
-                  <Spinner size="small" />
-                </View>
-              )}
-              <ScrollArrow
-                direction="down"
-                scrollRef={listScrollRef}
-                visible={panel.arrowDown}
-                arrowScrollDirRef={panel.arrowScrollDirRef}
-              />
+                    <PlusIcon size={14} color={knobProps.textAccentColor} />
+                    <Text
+                      fontFamily={knobProps.body.fontFamily}
+                      fontWeight={knobProps.body.fontWeight}
+                      color={textColor}
+                      numberOfLines={1}
+                      flex={1}
+                    >
+                      {createLabel.replace("{value}", filter.trim())}
+                    </Text>
+                  </ComboboxRow>
+                ) : loading ? (
+                  // Async search in flight with nothing loaded yet: a bounded
+                  // loading row — never a premature "no results".
+                  <View {...knobProps.panelPadding} alignItems="center">
+                    <Spinner size="small" />
+                  </View>
+                ) : (
+                  <View {...knobProps.panelPadding} alignItems="center">
+                    <Text
+                      color={formCommonColors.muted}
+                      fontSize={knobProps.sizeToken}
+                      fontFamily={knobProps.body.fontFamily}
+                      fontWeight={knobProps.body.fontWeight}
+                    >
+                      {emptyMessage}
+                    </Text>
+                  </View>
+                )}
+                {hasMore && loading && (
+                  <View padding="$2" alignItems="center">
+                    <Spinner size="small" />
+                  </View>
+                )}
+                <ScrollArrow
+                  direction="down"
+                  scrollRef={listScrollRef}
+                  visible={panel.arrowDown}
+                  arrowScrollDirRef={panel.arrowScrollDirRef}
+                />
+              </YStack>
             </YStack>
-          </YStack>
-        </FloatingFocusManager>
+          </FloatingFocusManager>
+        </PanelPortal>
       )}
     </>
   );
@@ -1738,6 +1746,7 @@ const comboboxSearchHeader = (
   mutedColor: string,
   loading: boolean,
   onKeyDown?: (e: React.KeyboardEvent) => void,
+  inputRef?: React.RefObject<HTMLInputElement | null>,
 ) => (
   <XStack
     alignItems="center"
@@ -1749,6 +1758,7 @@ const comboboxSearchHeader = (
   >
     <MagnifyingGlassIcon size={16} color={mutedColor as any} />
     <TInput
+      ref={inputRef as any}
       unstyled
       flex={1}
       placeholder={searchPlaceholder}
@@ -1806,6 +1816,7 @@ function NativeComboboxCore({
   open: openProp,
   onOpenChange,
 }: FloatingComboboxCoreProps) {
+  const hydrationTouch = useTouchSurface();
   if (isWeb) ensureKeyboardModalityTracking();
   const { t } = useTranslation();
   const inTableCell = useIsInTableCell();
@@ -1833,6 +1844,7 @@ function NativeComboboxCore({
     setListKeyboardRing((prev) => (prev === next ? prev : next));
   }, []);
   const listRef = useRef<HTMLElement | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
   const fieldA11y = useFieldA11y();
 
   const textColor = knobProps.textAccentColor;
@@ -1955,12 +1967,18 @@ 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);
@@ -2125,6 +2143,7 @@ function NativeComboboxCore({
         mutedColor,
         loading ?? false,
         handleSearchKeyDown,
+        searchInputRef,
       );
 
   const listContent = (
@@ -2462,7 +2481,7 @@ function NativeComboboxCore({
             flexWrap="nowrap"
             gap="$1.5"
             alignItems="center"
-            maxHeight={getFieldHeight(knobProps.sizeToken as SizeTokens) * 0.75}
+            maxHeight={getFieldHeight(knobProps.sizeToken as SizeTokens, 1, hydrationTouch) * 0.75}
             overflow="hidden"
             overflowX="auto"
           >

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -1,5 +1,6 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { formatAbsoluteDate, useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatAbsoluteDate, transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type Popover, type SizeTokens, Separator, View, useMedia, useProps } from "tamagui";
 
@@ -136,7 +137,7 @@ function RangeDayGrid({
         }
         return (
           <View
-            {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+            {...transitionProps(knobProps.transition)}
             data-range-stripe={rangeStatus}
             position="absolute"
             height="100%"
@@ -351,6 +352,7 @@ export function DateRangePicker<
   TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(props: DateRangePickerProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const hydrationTouch = useTouchSurface();
   const {
     defaultValue,
     value: valueProp,
@@ -382,7 +384,7 @@ export function DateRangePicker<
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
-  const visualHeight = getFieldHeight(resolvedSize);
+  const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
 
   const initialRange = (valueProp ?? defaultValue) as DateRange | null | undefined;
   const [open, setOpen] = useState(false);