@multiplatform.one/forms 7.34.4 → 7.35.0

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -40,8 +40,8 @@ export const Basic: Story = {
           <YStack gap="$3">
             <H4>Panel Content</H4>
             <Paragraph>
-              Anchored to the trigger with a gap, never covering it. Escape or an outside click
-              dismisses and returns focus.
+              Opens over its trigger: the top edge sits on the trigger's top edge and the trigger is
+              the first row. Escape or an outside click dismisses and returns focus.
             </Paragraph>
             <Separator />
             <Button onPress={() => setOpen(false)}>Close</Button>
@@ -222,7 +222,7 @@ export const InsideScrollView: Story = {
   render: () => (
     <Preset theme="blue" overrides={{ borderRadius: "large" }}>
       <XStack padding="$4" gap="$6" alignItems="flex-start" flexWrap="wrap">
-        <YStack width={320} gap="$2">
+        <YStack width={320} maxWidth="100%" gap="$2">
           <Paragraph color={formCommonColors.muted}>Inside a ScrollView</Paragraph>
           <ScrollView
             testID="scroll-clip-scroller"
@@ -241,7 +241,7 @@ export const InsideScrollView: Story = {
             </YStack>
           </ScrollView>
         </YStack>
-        <YStack width={320} gap="$2">
+        <YStack width={320} maxWidth="100%" gap="$2">
           <Paragraph color={formCommonColors.muted}>Outside, for comparison</Paragraph>
           <YStack padding="$3" gap="$3">
             <ScrollClipPair where="outside" />

package/src/FloatingPanel/index.native.tsx

@@ -50,6 +50,7 @@
  * as web does at ≤640.
  */
 
+import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
 import {
   type ReactNode,
   useCallback,
@@ -75,7 +76,12 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { OVERLAY_BREAKPOINT, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  OVERLAY_BREAKPOINT,
+  Surface,
+  useResolvedKnobs,
+  motionDurationMs,
+} from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { t } from "../shared/t";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
@@ -116,8 +122,6 @@ const minSheetHeight = 180;
 const mediumDetent = 0.55;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
-// Slide-in, and the delay before a backdrop tap can dismiss.
-const enterDuration = 280;
 
 export function FloatingPanel({
   open,
@@ -126,7 +130,7 @@ export function FloatingPanel({
   trigger,
   triggerEnd,
   triggerSizing = "stretch",
-  children,
+  children: panelChildren,
   scrollable,
   disabled,
   contentPadding = "default",
@@ -136,7 +140,18 @@ export function FloatingPanel({
   sheetFill,
   openOn = "press",
 }: FloatingPanelProps) {
-  const { knobProps } = useResolvedKnobs();
+  // The panel floats over the page: it never inherits a painted ancestor.
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const children = <Surface painted={false}>{panelChildren}</Surface>;
+  const slideTransition = knobProps.motion.slide.transition;
+  const enterDuration = motionDurationMs(slideTransition);
+  const scrimDuration = motionDurationMs(knobProps.motion.scrim.transition);
+  const motionDurationRef = useRef({ enterDuration, scrimDuration });
+  motionDurationRef.current = { enterDuration, scrimDuration };
+  const springConfig =
+    typeof slideTransition === "string"
+      ? nativeAnimationConfig[slideTransition as MotionStop]
+      : undefined;
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   // MPO-64: the sheet must end ABOVE the keyboard, not run under it.
   const keyboardInset = useKeyboardInset();
@@ -286,12 +301,14 @@ export function FloatingPanel({
       const presentation = presentationRef.current;
       const toValue = Math.max(0, travelRef.current - height);
       restRef.current = toValue;
+      if (!springConfig) {
+        restAt(height);
+        return;
+      }
       Animated.spring(translateY, {
+        ...springConfig,
         toValue,
         velocity,
-        damping: 32,
-        stiffness: 320,
-        mass: 0.9,
         overshootClamping: true,
         // JS driver: see the header. A native-driven node inside this Modal
         // does not advance, and the drag already writes the value from JS.
@@ -301,27 +318,29 @@ export function FloatingPanel({
         if (activeRef.current && presentation === presentationRef.current) restAt(height);
       });
     },
-    [restAt, translateY],
+    [restAt, translateY, springConfig],
   );
 
   const dismiss = useCallback(
     (velocity = 0) => {
       if (!activeRef.current) return;
+      if (!springConfig) {
+        close();
+        return;
+      }
       const presentation = presentationRef.current;
       restRef.current = travelRef.current;
       Animated.spring(translateY, {
+        ...springConfig,
         toValue: travelRef.current,
         velocity,
-        damping: 40,
-        stiffness: 400,
-        mass: 0.9,
         overshootClamping: true,
         useNativeDriver: false,
       }).start(({ finished }) => {
         if (finished && activeRef.current && presentation === presentationRef.current) close();
       });
     },
-    [close, translateY],
+    [close, translateY, springConfig],
   );
 
   const panResponder = useMemo(
@@ -389,15 +408,15 @@ export function FloatingPanel({
         armTimerRef.current = null;
         setBackdropArmed(true);
       }
-    }, enterDuration);
+    }, motionDurationRef.current.scrimDuration);
     // MPO-62: the modal itself fades (so the backdrop dims IN PLACE) and only
     // the sheet slides, on this transform.
     translateY.setValue(travelRef.current);
     restRef.current = 0;
     Animated.timing(translateY, {
       toValue: 0,
-      duration: enterDuration,
-      easing: Easing.out(Easing.cubic),
+      duration: motionDurationRef.current.enterDuration,
+      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
       useNativeDriver: false,
     }).start(({ finished }) => {
       // An interrupted entrance (a drag caught it mid-slide) leaves the pan
@@ -492,7 +511,7 @@ export function FloatingPanel({
       <Modal
         visible={open}
         transparent
-        animationType="fade"
+        animationType={knobProps.motion.scrim.transition ? "fade" : "none"}
         statusBarTranslucent
         onRequestClose={close}
         onShow={() => {
@@ -604,7 +623,7 @@ export function FloatingPanel({
                   flexShrink={1}
                   {...(sheetFill ? { flex: 1, minHeight: 0 } : undefined)}
                 >
-                  <Surface size="md">
+                  <Surface size="$true">
                     {header}
                     {content}
                   </Surface>
@@ -640,7 +659,7 @@ function PointPanel({
   onEscape: () => void;
   children: ReactNode;
 }) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ painted: false });
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const placement = size
     ? placeAtPoint({

package/src/FloatingPanel/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import type { ReactNode, RefObject, UIEvent } from "react";
 import {
   useCallback,
@@ -11,6 +12,7 @@ import {
   OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
+  Surface,
   useResolvedKnobs,
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
@@ -20,7 +22,7 @@ import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
-import { useFloatingPanel, panelTransition, panelViewportPadding } from "./useFloatingPanel";
+import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
@@ -64,6 +66,7 @@ export interface FloatingPanelProps {
   /** Suppress delayed trigger focus when a consumer handles close focus itself. Web only. */
   skipReturnFocusRef?: RefObject<boolean>;
   trigger: ReactNode;
+  triggerEcho?: boolean;
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
    * capture (e.g. DatePicker/ColorPicker clear). On native the trigger subtree
@@ -117,12 +120,6 @@ export interface FloatingPanelProps {
    * that handle their own internal spacing.
    */
   contentPadding?: "none" | "default";
-  /**
-   * The content sits one density step below the page (LC-73), as the
-   * calendar does. The web panel's radius caps at that step's padding
-   * (CONTAINER-CAP), since a `contentPadding="none"` widget pads itself there.
-   */
-  compact?: boolean;
   /**
    * Tamagui transition token for sheet/overlay animations.
    */
@@ -167,6 +164,14 @@ export interface FloatingPanelProps {
    * trigger's bottom start corner.
    */
   openOn?: "press" | "contextmenu";
+  /**
+   * COVER-TRIGGER (LC-105): the panel's top edge sits on the trigger's TOP
+   * edge instead of attaching below it, so the trigger becomes the panel's
+   * first row by default. Set triggerEcho=false for a custom first row. The panel scales from
+   * the trigger's top start corner. Dropping up, the bottom edges coincide.
+   * Enabled by default. Web float only; the native and narrow-web sheet is unchanged.
+   */
+  cover?: boolean;
 }
 
 /** Inner stops a keyboard-open should land on. House Button is a
@@ -196,7 +201,10 @@ function useKeyboardFocusIntoPanel(
       if (!wasKeyboardFocus() && !keyboardOpenRef?.current) return;
       const active = document.activeElement;
       if (active instanceof HTMLElement && frame.contains(active) && active !== frame) return;
-      const first = frame.querySelector<HTMLElement>(PANEL_FOCUSABLE);
+      // The trigger echo row is presentation only (inert): skip its controls.
+      const first = Array.from(frame.querySelectorAll<HTMLElement>(PANEL_FOCUSABLE)).find(
+        (el) => !el.closest("[data-fp-trigger-row]"),
+      );
       if (!first || first === frame) return;
       first.focus({ preventScroll: true, focusVisible: true } as FocusOptions);
     };
@@ -262,6 +270,71 @@ function panelTransformOrigin(placement: string): string {
   return `${originY} ${originX}`;
 }
 
+// ── Trigger echo (cover ruling) ───────────────────────────────
+
+const ECHO_STRIPPED_ATTRIBUTES = [
+  "id",
+  "for",
+  "name",
+  "data-testid",
+  "aria-label",
+  "aria-controls",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-activedescendant",
+];
+
+/**
+ * The panel's first row when it opens over its trigger: the trigger's own
+ * label/value, drawn where the trigger sits, so the panel reads as the
+ * trigger grown open. It is a DOM snapshot of the live trigger, never a
+ * second React render: a re-rendered trigger element would share the
+ * consumer's refs and steal them from the real control. The snapshot is
+ * inert and hidden from assistive tech, with ids, names, test ids and tab
+ * stops stripped so labels, forms and queries still resolve to the one real
+ * trigger. Pressing it closes the panel, like pressing the trigger again.
+ */
+function TriggerEchoRow({
+  sourceRef,
+  onPress,
+}: {
+  sourceRef: RefObject<HTMLElement | null>;
+  onPress: () => void;
+}) {
+  const rowRef = useRef<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    const source = sourceRef.current;
+    if (!row || !source || typeof source.cloneNode !== "function") return;
+    const snapshot = source.cloneNode(true) as HTMLElement;
+    const sourceFields = source.querySelectorAll<HTMLInputElement>("input, textarea");
+    const snapshotFields = snapshot.querySelectorAll<HTMLInputElement>("input, textarea");
+    sourceFields.forEach((field, index) => {
+      const copy = snapshotFields[index];
+      if (copy) copy.value = field.value;
+    });
+    for (const node of [snapshot, ...Array.from(snapshot.querySelectorAll<HTMLElement>("*"))]) {
+      for (const name of ECHO_STRIPPED_ATTRIBUTES) node.removeAttribute(name);
+      if (node.hasAttribute("tabindex") || node.matches("input, textarea, button, a, select")) {
+        node.setAttribute("tabindex", "-1");
+      }
+    }
+    snapshot.setAttribute("inert", "");
+    row.replaceChildren(snapshot);
+  });
+  return (
+    <View
+      ref={rowRef as any}
+      data-fp-trigger-row=""
+      aria-hidden
+      cursor="pointer"
+      onPress={onPress}
+      flexShrink={0}
+      pointerEvents="auto"
+    />
+  );
+}
+
 // ── FloatingPanel ─────────────────────────────────────────────
 
 // Canonical float↔sheet pivot (theme `layoutBreakpoints.medium` = Tamagui
@@ -298,9 +371,12 @@ export function FloatingPanel(props: FloatingPanelProps) {
   // SSR and the hydration render use the same sheet structure. The viewport
   // snapshot switches to floating after hydration when the browser is wide.
   const shouldUseSheet = props.sheet ?? (!isWeb || !viewportGtSm);
+  // The panel floats over the page: its content never sits on a painted
+  // ancestor, so a Card inside it paints as top-level.
+  const panelProps = { ...props, children: <Surface painted={false}>{props.children}</Surface> };
 
-  if (shouldUseSheet) return <FloatingPanelSheet {...props} />;
-  return <FloatingPanelWeb {...props} />;
+  if (shouldUseSheet) return <FloatingPanelSheet {...panelProps} />;
+  return <FloatingPanelWeb {...panelProps} />;
 }
 
 // ── Sheet (mobile / native / forced) ──────────────────────────
@@ -341,9 +417,16 @@ function FloatingPanelSheet({
   scrollViewProps,
   openOn = "press",
 }: FloatingPanelProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ painted: false });
   // LC-24 / A-ENTEREXIT: honor animation=none (undefined) — do not hardcode "medium".
-  const transition = transitionProp ?? knobProps.transition;
+  const slideMotion = {
+    ...knobProps.motion.slide,
+    transition: transitionProp ?? knobProps.motion.slide.transition,
+  };
+  const scrimMotion = {
+    ...knobProps.motion.scrim,
+    transition: transitionProp ?? knobProps.motion.scrim.transition,
+  };
   const [position, setPosition] = useState(0);
 
   const handleOpenChange = (next: boolean) => {
@@ -428,10 +511,10 @@ function FloatingPanelSheet({
         position={position}
         onPositionChange={setPosition}
         zIndex={zIndex.sheet}
-        transition={transition}
+        {...transitionProps(slideMotion)}
       >
         <Sheet.Overlay
-          transition={transition}
+          {...transitionProps(scrimMotion)}
           backgroundColor="$shadow6"
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
@@ -475,9 +558,10 @@ function FloatingPanelWeb({
   sizing = "grow",
   widthMode,
   fitContent,
-  compact,
   contentPadding = "default",
   openOn = "press",
+  cover = true,
+  triggerEcho = true,
 }: FloatingPanelProps) {
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
@@ -514,8 +598,8 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? undefined : grownRef,
     widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
     fitContent,
-    compact,
     freeOverlay: isContextMenu,
+    cover,
     onBeforeOpen: resetPosition,
   });
 
@@ -554,7 +638,7 @@ function FloatingPanelWeb({
     const totalBorderWidth = borderTopWidth + borderBottomWidth;
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
-    const liveTransition = panel.knobProps.transition ? panelTransition : "none";
+    const liveTransition = panel.panelTransition;
     const containingBlock = fixedContainingBlockOrigin(dropdownElement);
 
     let isDropup = panel.placement.startsWith("top");
@@ -588,8 +672,11 @@ function FloatingPanelWeb({
     // dropping up) instead of floating 4px clear of it. A context menu opened
     // at a point is a FREE overlay and keeps `OVERLAY_ANCHOR_GAP` from it.
     const gap = point ? OVERLAY_ANCHOR_GAP : OVERLAY_ATTACH_GAP;
-    const belowTop = triggerBounds.bottom + gap;
-    const aboveBottom = triggerBounds.top - gap;
+    // COVER-TRIGGER (LC-105): a covering panel starts ON the trigger — its
+    // top edge is the trigger's top edge (bottom on bottom when dropping up).
+    const covers = cover && !point;
+    const belowTop = covers ? triggerBounds.top : triggerBounds.bottom + gap;
+    const aboveBottom = covers ? triggerBounds.bottom : triggerBounds.top - gap;
 
     if (isFill) {
       const available = isDropup
@@ -706,11 +793,12 @@ function FloatingPanelWeb({
   }, [
     isFill,
     isContextMenu,
+    cover,
     panel.placement,
     panel.refs,
     panel.triggerRef,
     panel.updateArrows,
-    panel.knobProps.transition,
+    panel.panelTransition,
   ]);
 
   repositionFnRef.current = repositionOverlay;
@@ -788,8 +876,7 @@ function FloatingPanelWeb({
     [isFill, panel.updateArrows],
   );
 
-  // animation=none → no CSS tween (same contract as knobProps.transition === undefined)
-  const webTransition = panel.knobProps.transition ? panelTransition : "none";
+  const webTransition = panel.panelTransition;
 
   // `elevatedSurface` carries a web-only `style: { boxShadow }` (MPO-69,
   // d326cc0c2). Two `style` props on one element do NOT merge — the later
@@ -954,6 +1041,9 @@ function FloatingPanelWeb({
             borderRadius={panel.dropdownRadius}
             paddingVertical={0}
           >
+            {isContextMenu || !cover || !triggerEcho ? null : (
+              <TriggerEchoRow sourceRef={panel.triggerRef} onPress={() => onOpenChange(false)} />
+            )}
             <ScrollArrow
               direction="up"
               scrollRef={panel.refs.floating}

package/src/FloatingPanel/touchRecipeHydration.spec.tsx

@@ -2,12 +2,16 @@
 import { act } from "react";
 import { renderToString } from "react-dom/server";
 import { hydrateRoot } from "react-dom/client";
-import { TestProviders } from "@multiplatform.one/test-utils";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { createTamagui, TamaguiProvider } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { TextArea } from "../fields/TextArea";
 import { Input as InputParts } from "../InputParts";
 import { Input } from "../fields/Input";
 import { SearchInput } from "../fields/SearchInput";
+import { Button, resolveButtonSizeRecipe } from "../Button";
+import { defaultScaleInputs, generateScale, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { Select } from "../fields/Select";
 import { Combobox } from "../fields/Combobox";
 const modality = vi.hoisted(() => ({ touch: true }));
@@ -17,10 +21,31 @@ vi.mock("@multiplatform.one/platform", async (original) => ({
     return modality.touch && typeof window !== "undefined";
   },
 }));
+const config = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  tokens: generateScale(defaultScaleInputs).tokens,
+});
 const options = ["Alpha", "Beta", "Gamma", "Delta"].map((label) => ({ label, value: label }));
 function Fixture() {
   return (
-    <TestProviders>
+    <TamaguiProvider config={config} defaultTheme="light" disableInjectCSS>
+      <Button aria-label="Default button" icon={<span>Icon</span>}>
+        Save
+      </Button>
+      <Button size="$5" aria-label="Large button">
+        Save
+      </Button>
+      <Button size={30} aria-label="Numeric button">
+        Save
+      </Button>
+      <Button circular size="$3" aria-label="Circular button">
+        +
+      </Button>
+      <Button nested circular aria-label="Nested button">
+        +
+      </Button>
+      <Button skeleton data-testid="skeleton-button" />
       <Input aria-label="Input" />
       <TextArea aria-label="Area" />
       <InputParts>
@@ -35,10 +60,20 @@ function Fixture() {
       <SearchInput aria-label="Search" />
       <Select aria-label="Select" options={options} defaultValue="Alpha" />
       <Combobox aria-label="Combobox" options={options} defaultValue="Alpha" />
-    </TestProviders>
+    </TamaguiProvider>
   );
 }
 describe("touch recipe hydration", () => {
+  it("the Button helper preserves numeric escapes and adopts each family's touch row", () => {
+    for (const family of ["control", "chip"] as const) {
+      expect(resolveButtonSizeRecipe("$4", family, true)).toEqual(
+        sizeRecipeForToken("$4", { family, touch: true }),
+      );
+      expect(resolveButtonSizeRecipe(30, family, true)).toEqual(
+        resolveButtonSizeRecipe(30, family, false),
+      );
+    }
+  });
   it.each([true, false, true])(
     "hydrates actual controls on repeated coarse mount %s",
     async (touch) => {
@@ -71,7 +106,30 @@ describe("touch recipe hydration", () => {
         );
         expect(container.querySelector("[touch]")).toBeNull();
         expect(heights.length).toBeGreaterThanOrEqual(2);
-        expect(heights.every((height) => height >= 44)).toBe(true);
+        expect(heights.every((height) => height === (touch ? 44 : 40))).toBe(true);
+        const buttonHeight = (label: string) =>
+          Number(
+            container
+              .querySelector(`[aria-label="${label}"]`)
+              ?.getAttribute("data-mp-button-height"),
+          );
+        expect(buttonHeight("Default button")).toBe(touch ? 44 : 40);
+        expect(buttonHeight("Large button")).toBe(48);
+        expect(buttonHeight("Numeric button")).toBe(30);
+        expect(buttonHeight("Circular button")).toBe(touch ? 44 : 32);
+        expect(buttonHeight("Nested button")).toBe(29);
+        const circular = container.querySelector('[aria-label="Circular button"]')!;
+        expect(circular.className).toContain(`_miw-${touch ? 44 : 32}px`);
+        expect(circular.className).toContain(`_mih-${touch ? 44 : 32}px`);
+        const button = container.querySelector('[aria-label="Default button"]')!;
+        expect(button.className).toContain(`_h-${touch ? 44 : 40}px`);
+        expect(button.className).toContain("_gap-8px");
+        expect(button.className).toMatch(/_btlr-(8px|[tc]-radius-4)/);
+        expect(button.innerHTML).toContain("_fos-15px");
+
+        expect(container.querySelector('[data-testid="skeleton-button"]')?.className).toContain(
+          `_h-${touch ? 44 : 40}px`,
+        );
       } finally {
         await act(async () => root?.unmount());
         spy.mockRestore();