@multiplatform.one/forms 7.45.1 → 7.47.0

package/src/FloatingPanel/PanelPortal.tsx

@@ -102,6 +102,7 @@ export function PanelPortal({ anchor, children }: PanelPortalProps) {
     const guard = event.currentTarget;
     const from = event.relatedTarget;
     const forward =
+      typeof Node === "undefined" ||
       !(from instanceof Node) ||
       Boolean(guard.compareDocumentPosition(from) & Node.DOCUMENT_POSITION_PRECEDING);
     const inside = tabbablesIn(portalRef.current);

package/src/FloatingPanel/index.native.tsx

@@ -88,6 +88,7 @@ import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
 import { placeAtPoint, type PanelBounds, type PanelPoint } from "./pointAnchor";
 import { panelViewportPadding } from "./useFloatingPanel";
+import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
 // resolve identically on native (their floating cores are unused on device
@@ -472,6 +473,7 @@ export function FloatingPanel({
         style={{
           flexDirection: "row",
           alignItems: "center",
+          position: "relative",
           width: triggerSizing === "content" ? undefined : "100%",
         }}
       >
@@ -503,10 +505,10 @@ export function FloatingPanel({
             collapsable={false}
             style={{ width: triggerSizing === "content" ? undefined : "100%" }}
           >
-            {trigger}
+            <TriggerWithTrailingAction trigger={trigger} triggerEnd={triggerEnd} />
           </RNView>
         </Pressable>
-        {triggerEnd}
+        <TrailingActionOverlay>{triggerEnd}</TrailingActionOverlay>
       </RNView>
       <Modal
         visible={open}

package/src/FloatingPanel/index.tsx

@@ -1,6 +1,8 @@
 import { transitionProps } from "@multiplatform.one/theme";
 import type { ReactNode, RefObject, UIEvent } from "react";
 import {
+  cloneElement,
+  isValidElement,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -16,10 +18,12 @@ import {
   useResolvedKnobs,
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
+  motionDurationMs,
 } from "@multiplatform.one/theme";
 import { isWeb, Sheet, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
+import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
@@ -66,6 +70,9 @@ export interface FloatingPanelProps {
   /** Suppress delayed trigger focus when a consumer handles close focus itself. Web only. */
   skipReturnFocusRef?: RefObject<boolean>;
   trigger: ReactNode;
+  anchorMode?: "cover-trigger" | "attach";
+  triggerRow?: ReactNode;
+  anchorRect?: { x: number; y: number; width: number; height: number };
   triggerEcho?: boolean;
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
@@ -168,7 +175,7 @@ export interface FloatingPanelProps {
    * 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.
+   * the trigger's top start corner. Viewport collisions use the bottom sheet.
    * Enabled by default. Web float only; the native and narrow-web sheet is unchanged.
    */
   cover?: boolean;
@@ -200,8 +207,15 @@ function useKeyboardFocusIntoPanel(
       if (!frame) return;
       if (!wasKeyboardFocus() && !keyboardOpenRef?.current) return;
       const active = document.activeElement;
-      if (active instanceof HTMLElement && frame.contains(active) && active !== frame) return;
-      // The trigger echo row is presentation only (inert): skip its controls.
+      if (
+        typeof HTMLElement !== "undefined" &&
+        active instanceof HTMLElement &&
+        frame.contains(active) &&
+        active !== frame
+      ) {
+        return;
+      }
+      // Initial keyboard focus belongs to an action, not the repeated close row.
       const first = Array.from(frame.querySelectorAll<HTMLElement>(PANEL_FOCUSABLE)).find(
         (el) => !el.closest("[data-fp-trigger-row]"),
       );
@@ -254,12 +268,12 @@ function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left:
   return { top: 0, left: 0 };
 }
 
-function isRtl(): boolean {
-  return (
-    isWeb &&
-    typeof document !== "undefined" &&
-    document.documentElement.getAttribute("dir") === "rtl"
-  );
+function isRtl(element?: HTMLElement | null): boolean {
+  if (!isWeb || typeof document === "undefined") return false;
+  const direction = element ? getComputedStyle(element).direction : "";
+  return direction
+    ? direction === "rtl"
+    : (element?.closest("[dir]") ?? document.documentElement).getAttribute("dir") === "rtl";
 }
 
 function panelTransformOrigin(placement: string): string {
@@ -297,41 +311,94 @@ const ECHO_STRIPPED_ATTRIBUTES = [
 function TriggerEchoRow({
   sourceRef,
   onPress,
+  children,
+  anchorRect,
+  source,
 }: {
   sourceRef: RefObject<HTMLElement | null>;
   onPress: () => void;
+  children?: ReactNode;
+  anchorRect?: FloatingPanelProps["anchorRect"];
+  source: ReactNode;
 }) {
   const rowRef = useRef<HTMLElement | null>(null);
+  const visualRef = 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");
+    const sync = () => {
+      const control = source.matches(PANEL_FOCUSABLE)
+        ? source
+        : source.querySelector<HTMLElement>(PANEL_FOCUSABLE);
+      const labelledBy = control?.getAttribute("aria-labelledby");
+      const label =
+        control?.getAttribute("aria-label") ||
+        labelledBy
+          ?.split(/\s+/)
+          .map((id) => document.getElementById(id)?.textContent || "")
+          .join(" ") ||
+        control?.textContent ||
+        source.textContent ||
+        "";
+      row.setAttribute("aria-label", label);
+      const rect = anchorRect ?? source.getBoundingClientRect();
+      row.style.width = `${rect.width}px`;
+      row.style.height = `${rect.height}px`;
+      const rtl = isRtl(source);
+      row.style.alignSelf = "flex-start";
+      const frameStyle = row.parentElement ? getComputedStyle(row.parentElement) : null;
+      row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
+      row.style.position = "sticky";
+      row.style.top = row.style.marginTop;
+      row.style.zIndex = "1";
+      row.style.marginLeft = rtl
+        ? ""
+        : `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
+      row.style.marginRight = rtl
+        ? `${-(parseFloat(frameStyle?.borderRightWidth || "0") || 0)}px`
+        : "";
+      const snapshot =
+        children == null ? (source.cloneNode(true) as HTMLElement) : visualRef.current;
+      if (!snapshot) return;
+      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);
-  });
+      snapshot.setAttribute("inert", "");
+      snapshot.setAttribute("aria-hidden", "true");
+      if (children == null) visualRef.current?.replaceChildren(snapshot);
+    };
+    sync();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(source);
+    return () => observer.disconnect();
+  }, [sourceRef, source, children, anchorRect]);
   return (
     <View
       ref={rowRef as any}
       data-fp-trigger-row=""
-      aria-hidden
+      role="button"
+      aria-expanded={true}
+      tabIndex={-1}
       cursor="pointer"
       onPress={onPress}
       flexShrink={0}
       pointerEvents="auto"
-    />
+    >
+      <View ref={visualRef as any} pointerEvents="none" aria-hidden>
+        {isValidElement(children) ? cloneElement(children, { ref: null } as any) : children}
+      </View>
+    </View>
   );
 }
 
@@ -373,7 +440,11 @@ export function FloatingPanel(props: FloatingPanelProps) {
   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> };
+  const panelProps = {
+    ...props,
+    cover: props.anchorMode ? props.anchorMode === "cover-trigger" : props.cover,
+    children: <Surface painted={false}>{props.children}</Surface>,
+  };
 
   if (shouldUseSheet) return <FloatingPanelSheet {...panelProps} />;
   return <FloatingPanelWeb {...panelProps} />;
@@ -416,7 +487,8 @@ function FloatingPanelSheet({
   header,
   scrollViewProps,
   openOn = "press",
-}: FloatingPanelProps) {
+  escapeTarget = "window",
+}: FloatingPanelProps & { escapeTarget?: "window" | "document" }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
   // LC-24 / A-ENTEREXIT: honor animation=none (undefined) — do not hardcode "medium".
   const slideMotion = {
@@ -438,7 +510,7 @@ function FloatingPanelSheet({
   };
   // Tamagui Sheet has no key handling (unlike the web floating mode, which
   // dismisses on Escape) — wire the dismissal intent here too.
-  useSheetEscapeDismiss(open, () => handleOpenChange(false));
+  useSheetEscapeDismiss(open, () => handleOpenChange(false), escapeTarget);
   // DG-A11Y-04 / Axiom 7: Sheet has no focus scope — move focus into the
   // frame on open, trap Tab while open, return focus to the trigger on close.
   const sheetFrameRef = useRef<HTMLElement | null>(null);
@@ -484,23 +556,26 @@ function FloatingPanelSheet({
 
   return (
     <>
-      <View
-        flexDirection="row"
-        alignItems="center"
-        width={triggerSizing === "content" ? "auto" : "100%"}
-      >
+      {trigger != null && (
         <View
-          flex={triggerSizing === "content" ? undefined : 1}
-          minWidth={0}
-          {...(isContextMenu ? undefined : { onPress: openFromTrigger })}
-          cursor={disabled ? "not-allowed" : "pointer"}
-          opacity={disabled ? 0.5 : 1}
-          {...triggerActivation}
+          flexDirection="row"
+          alignItems="center"
+          position="relative"
+          width={triggerSizing === "content" ? "auto" : "100%"}
         >
-          {trigger}
+          <View
+            flex={triggerSizing === "content" ? undefined : 1}
+            minWidth={0}
+            {...(isContextMenu ? undefined : { onPress: openFromTrigger })}
+            cursor={disabled ? "not-allowed" : "pointer"}
+            opacity={disabled ? 0.5 : 1}
+            {...triggerActivation}
+          >
+            <TriggerWithTrailingAction trigger={trigger} triggerEnd={triggerEnd} />
+          </View>
+          <TrailingActionOverlay>{triggerEnd}</TrailingActionOverlay>
         </View>
-        {triggerEnd}
-      </View>
+      )}
       <Sheet
         modal
         open={open}
@@ -521,6 +596,7 @@ function FloatingPanelSheet({
         />
         <Sheet.Handle />
         <Sheet.Frame
+          data-testid="floating-panel-sheet"
           // Sheet.Frame forwards its ref at runtime; the styled prop type
           // just omits `ref`, hence the cast. tabIndex -1 makes the frame a
           // programmatic focus target without joining the tab order.
@@ -562,7 +638,11 @@ function FloatingPanelWeb({
   openOn = "press",
   cover = true,
   triggerEcho = true,
+  triggerRow,
+  anchorRect,
+  ...sheetProps
 }: FloatingPanelProps) {
+  const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
   const overlayStyleRef = useRef<{ top: number; left?: number; maxHeight: number } | null>(null);
@@ -591,7 +671,7 @@ function FloatingPanelWeb({
   };
 
   const panel = useFloatingPanel({
-    open,
+    open: open && !collisionSheet,
     onOpenChange,
     disabled,
     repositionRef: repositionFnRef,
@@ -607,14 +687,27 @@ function FloatingPanelWeb({
   // Escape (or outside click on empty space) closes the panel while focus is
   // inside it, focus falls to <body>. Return it to the pre-open element
   // (the trigger's focusable). Deliberate focus moves elsewhere are kept.
-  useReturnFocusOnClose(open, skipReturnFocusRef);
-  useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
+  useReturnFocusOnClose(open, skipReturnFocusRef, panel.refs.floating);
+  useKeyboardFocusIntoPanel(
+    open && panel.mounted && !collisionSheet,
+    panel.refs.floating,
+    keyboardOpenRef,
+  );
   useEffect(() => {
     if (open) return;
     keyboardOpenRef.current = false;
     anchorPointRef.current = null;
   }, [open]);
 
+  useEffect(() => {
+    if (open || !collisionSheet) return;
+    const timer = setTimeout(
+      () => setCollisionSheet(false),
+      motionDurationMs(panel.knobProps.motion.slide.transition),
+    );
+    return () => clearTimeout(timer);
+  }, [open, collisionSheet, panel.knobProps.motion.slide.transition]);
+
   const repositionOverlay = useCallback(() => {
     const dropdownElement = panel.refs.floating.current;
     const trig = panel.triggerRef.current;
@@ -630,7 +723,16 @@ function FloatingPanelWeb({
     const point = isContextMenu
       ? (anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()))
       : null;
-    const triggerBounds = point ? { top: point.y, bottom: point.y } : trig.getBoundingClientRect();
+    const measured = anchorRect
+      ? {
+          ...anchorRect,
+          top: anchorRect.y,
+          left: anchorRect.x,
+          right: anchorRect.x + anchorRect.width,
+          bottom: anchorRect.y + anchorRect.height,
+        }
+      : trig.getBoundingClientRect();
+    const triggerBounds = point ? { top: point.y, bottom: point.y } : measured;
     const viewportHeight = window.innerHeight;
     const cs = getComputedStyle(dropdownElement);
     const borderTopWidth = parseFloat(cs.borderTopWidth) || 0;
@@ -641,6 +743,70 @@ function FloatingPanelWeb({
     const liveTransition = panel.panelTransition;
     const containingBlock = fixedContainingBlockOrigin(dropdownElement);
 
+    if (cover && !point) {
+      const rtl = isRtl(trig);
+      const viewport = window.visualViewport;
+      const viewportLeft = viewport?.offsetLeft ?? 0;
+      const viewportTop = viewport?.offsetTop ?? 0;
+      const viewportRight =
+        viewportLeft +
+        (viewport?.width ?? (document.documentElement.clientWidth || window.innerWidth));
+      const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
+      dropdownElement.style.left = `${viewportLeft - containingBlock.left}px`;
+      const layoutStyle = getComputedStyle(dropdownElement);
+      const scale =
+        layoutStyle.transform &&
+        layoutStyle.transform !== "none" &&
+        typeof DOMMatrixReadOnly !== "undefined"
+          ? Math.abs(new DOMMatrixReadOnly(layoutStyle.transform).a)
+          : 1;
+      const layoutWidth = dropdownElement.getBoundingClientRect().width / (scale || 1);
+      const width = Math.max(layoutWidth || dropdownElement.offsetWidth, measured.width);
+      const left = rtl ? measured.right - width : measured.left;
+      const firstActionHeight =
+        contentRef.current?.querySelector<HTMLElement>(PANEL_FOCUSABLE)?.getBoundingClientRect()
+          .height ||
+        Number(panel.knobProps.menuRow.minHeight) ||
+        totalContentHeight;
+      const bodyStyle = contentRef.current ? getComputedStyle(contentRef.current) : null;
+      const bodyPadding =
+        (parseFloat(bodyStyle?.paddingTop || "0") || 0) +
+        (parseFloat(bodyStyle?.paddingBottom || "0") || 0);
+      const neededHeight = sheetProps.scrollable
+        ? Math.min(
+            totalContentHeight,
+            measured.height + firstActionHeight + bodyPadding + totalBorderWidth,
+          )
+        : totalContentHeight;
+      if (
+        measured.width > 0 &&
+        measured.height > 0 &&
+        (left < viewportLeft ||
+          left + width > Math.max(measured.right, viewportRight - panelViewportPadding) ||
+          measured.right > viewportRight ||
+          measured.top < viewportTop ||
+          measured.top + Math.max(neededHeight, measured.height) >
+            viewportBottom - panelViewportPadding)
+      ) {
+        dropdownElement.style.visibility = "hidden";
+        setCollisionSheet(true);
+        return;
+      }
+      const top = measured.top - containingBlock.top;
+      const cssLeft = left - containingBlock.left;
+      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - measured.top);
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.left = `${cssLeft}px`;
+      dropdownElement.style.maxHeight = `${maxHeight}px`;
+      dropdownElement.dir = rtl ? "rtl" : "ltr";
+      dropdownElement.style.transformOrigin = rtl ? "top right" : "top left";
+      dropdownElement.style.visibility = "visible";
+      overlayStyleRef.current = { top, left: cssLeft, maxHeight };
+      panel.initializingRef.current = false;
+      if (isInitial) dropdownElement.style.transition = liveTransition;
+      return;
+    }
+
     let isDropup = panel.placement.startsWith("top");
     let cssLeft: number | undefined;
     if (point) {
@@ -794,6 +960,8 @@ function FloatingPanelWeb({
     isFill,
     isContextMenu,
     cover,
+    anchorRect,
+    sheetProps.scrollable,
     panel.placement,
     panel.refs,
     panel.triggerRef,
@@ -805,9 +973,10 @@ function FloatingPanelWeb({
 
   const click = useClick(panel.context, {
     event: "mousedown",
-    enabled: !isContextMenu,
+    enabled: !isContextMenu && !collisionSheet,
   });
   const dismiss = useDismiss(panel.context, {
+    enabled: !collisionSheet,
     // Use 'click' instead of default 'pointerdown' so scrolling to the bottom
     // (e.g. via wheel/trackpad or scroll arrow hover) doesn't trigger outside-press.
     outsidePressEvent: "click",
@@ -820,11 +989,17 @@ function FloatingPanelWeb({
   useLayoutEffect(() => {
     if (!open || !panel.mounted) return;
     repositionOverlay();
-  }, [open, panel.mounted, repositionOverlay, panel.y]);
+  }, [open, panel.mounted, repositionOverlay, panel.y, panel.x]);
 
   useLayoutEffect(() => {
     const content = contentRef.current;
-    if (!open || !panel.mounted || !isFill || !content || typeof ResizeObserver === "undefined") {
+    if (
+      !open ||
+      !panel.mounted ||
+      (!isFill && !cover) ||
+      !content ||
+      typeof ResizeObserver === "undefined"
+    ) {
       return;
     }
     // Matching the trigger width can rewrap content after the panel's first
@@ -839,17 +1014,18 @@ function FloatingPanelWeb({
       });
     });
     observer.observe(content);
+    if (panel.triggerRef.current) observer.observe(panel.triggerRef.current);
     return () => {
       observer.disconnect();
       if (frame) cancelAnimationFrame(frame);
     };
-  }, [open, panel.mounted, isFill, repositionOverlay]);
+  }, [open, panel.mounted, isFill, cover, repositionOverlay, panel.triggerRef]);
 
   const handleScroll = useCallback(
     (event: UIEvent) => {
       const el = event.target as HTMLElement;
       panel.updateArrows(el);
-      if (isFill) return;
+      if (isFill || (cover && !isContextMenu)) return;
       if (panel.initializingRef.current) {
         lastScrollTopRef.current = el.scrollTop;
         return;
@@ -873,7 +1049,7 @@ function FloatingPanelWeb({
         repositionFnRef.current?.();
       }
     },
-    [isFill, panel.updateArrows],
+    [isFill, cover, isContextMenu, panel.updateArrows],
   );
 
   const webTransition = panel.panelTransition;
@@ -945,7 +1121,8 @@ function FloatingPanelWeb({
     if (open || disabled || isContextMenu || event.button !== 0 || !isWeb) return;
     const reference = panel.triggerRef.current;
     if (!reference) return;
-    const target = event.target instanceof Element ? event.target : null;
+    const target =
+      typeof Element !== "undefined" && event.target instanceof Element ? event.target : null;
     const pressed = target?.closest<HTMLElement>(PANEL_FOCUSABLE);
     const focusable =
       pressed && reference.contains(pressed)
@@ -976,6 +1153,7 @@ function FloatingPanelWeb({
     <>
       <View
         {...referenceProps}
+        alignSelf={sheetProps.triggerSizing === "content" ? "flex-start" : undefined}
         cursor={disabled ? "not-allowed" : "pointer"}
         opacity={disabled ? 0.5 : 1}
         // The cover contract is stated as a relation between the panel's top
@@ -989,7 +1167,22 @@ function FloatingPanelWeb({
         {trigger}
       </View>
 
-      {panel.mounted && (
+      {collisionSheet && (
+        <FloatingPanelSheet
+          {...sheetProps}
+          open={open}
+          onOpenChange={onOpenChange}
+          trigger={null}
+          // The trigger's Tooltip stops Escape at document. The float's
+          // useDismiss listens there too, so the fallback must as well.
+          escapeTarget="document"
+          skipReturnFocusRef={skipReturnFocusRef}
+          contentPadding={contentPadding}
+        >
+          {children}
+        </FloatingPanelSheet>
+      )}
+      {panel.mounted && !collisionSheet && (
         <PanelPortal anchor={panel.triggerRef.current}>
           <YStack
             {...getFloatingProps({
@@ -1002,6 +1195,7 @@ function FloatingPanelWeb({
                 scrollbarWidth: "none" as any,
                 zIndex: zIndex.dropdown,
                 overflow: "auto",
+                ...(cover && !isContextMenu ? { overflowX: "hidden" as const } : {}),
                 ...panel.floatingStyleRef.current,
                 ...(overlayStyleRef.current
                   ? { maxHeight: overlayStyleRef.current.maxHeight }
@@ -1012,11 +1206,16 @@ function FloatingPanelWeb({
                 // then positions against this box and is clipped by its scroll.
                 transform: panel.visible ? "none" : "scale(0.96)",
                 transition: webTransition,
-                transformOrigin: panelTransformOrigin(
-                  pointPlacementRef.current
-                    ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
-                    : panel.placement,
-                ),
+                transformOrigin:
+                  cover && !isContextMenu
+                    ? isRtl(panel.triggerRef.current)
+                      ? "top right"
+                      : "top left"
+                    : panelTransformOrigin(
+                        pointPlacementRef.current
+                          ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
+                          : panel.placement,
+                      ),
               },
               onScroll: handleScroll,
               onTransitionEnd: (event) => {
@@ -1042,7 +1241,14 @@ function FloatingPanelWeb({
             paddingVertical={0}
           >
             {isContextMenu || !cover || !triggerEcho ? null : (
-              <TriggerEchoRow sourceRef={panel.triggerRef} onPress={() => onOpenChange(false)} />
+              <TriggerEchoRow
+                sourceRef={panel.triggerRef}
+                source={trigger}
+                anchorRect={anchorRect}
+                onPress={() => onOpenChange(false)}
+              >
+                {triggerRow}
+              </TriggerEchoRow>
             )}
             <ScrollArrow
               direction="up"

package/src/FloatingPanel/trailingAction.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { View, isWeb } from "tamagui";
+import { FieldTrailingOverlay } from "../InputParts";
+
+/**
+ * LC-149 FIELD-TRAILING-ACTION for picker triggers. `triggerEnd` stays out of
+ * the trigger's press capture (Fabric steals the responder from anything
+ * inside it), so it cannot live in the Box. It is laid over the Box's
+ * trailing edge instead, and the Box keeps that end cap empty for it: the
+ * clear reads as part of the field, not a button beside it.
+ */
+export function TriggerWithTrailingAction({
+  trigger,
+  triggerEnd,
+}: {
+  trigger: ReactNode;
+  triggerEnd?: ReactNode;
+}) {
+  const active = triggerEnd != null && triggerEnd !== false;
+  return <FieldTrailingOverlay active={active}>{trigger}</FieldTrailingOverlay>;
+}
+
+export function TrailingActionOverlay({ children }: { children?: ReactNode }) {
+  if (children == null || children === false) return null;
+  return (
+    <View
+      position="absolute"
+      top={0}
+      bottom={0}
+      {...(isWeb ? { insetInlineEnd: 0 } : { end: 0 })}
+      justifyContent="center"
+      data-field-action-overlay=""
+    >
+      {children}
+    </View>
+  );
+}

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -158,12 +158,14 @@ describe("FloatingPanel and DropdownMenu open over their trigger (MPO-38 cover r
     expect(viewport.style.transformOrigin.startsWith("top")).toBe(true);
   });
 
-  it("the trigger's own label is the panel's first row, presentation only", async () => {
+  it("the trigger's own label is the panel's first close row", async () => {
     const viewport = await openPanel({});
     const echo = viewport.querySelector("[data-fp-trigger-row]") as HTMLElement;
     expect(echo).toBeTruthy();
     expect(echo.textContent).toContain("Actions");
-    expect(echo.getAttribute("aria-hidden")).toBe("true");
+    expect(echo.getAttribute("aria-hidden")).toBeNull();
+    expect(echo.getAttribute("role")).toBe("button");
+    expect(echo.getAttribute("aria-label")).toBe("Actions");
     const firstRow = Array.from(viewport.children).find((el) =>
       (el as HTMLElement).textContent?.trim(),
     );

package/src/Form/Form.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useCallback, useState } from "react";
-import { H3, Separator, YStack } from "tamagui";
+import { Separator, YStack } from "tamagui";
 import { Button } from "../Button";
 import { FieldGroup } from "../FieldGroup";
 import { FormGrid } from "../FormGrid";
@@ -52,6 +52,7 @@ import { ToggleGroup } from "../fields/ToggleGroup";
 import { formatFieldError } from "../ErrorSummary";
 import type { AnyFormApi } from "../types";
 import { Form, FormActions } from "./index";
+import { H3 } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Form> = {
   title: "Forms/Form",