@multiplatform.one/forms 7.70.0 → 7.72.0

package/dist/cjs/FloatingPanel/index.cjs

@@ -23,6 +23,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var FloatingPanel_exports = {};
 __export(FloatingPanel_exports, {
   FloatingPanel: () => FloatingPanel,
+  TriggerEchoRow: () => TriggerEchoRow,
   floatingPanelActionProps: () => import_nestedAction2.floatingPanelActionProps,
   isNestedPanelAction: () => import_nestedAction2.isNestedPanelAction,
   panelAnchorOffset: () => import_useFloatingPanel2.panelAnchorOffset,
@@ -30,6 +31,7 @@ __export(FloatingPanel_exports, {
   panelGrowDuration: () => import_useFloatingPanel2.panelGrowDuration,
   panelTransition: () => import_useFloatingPanel2.panelTransition,
   panelViewportPadding: () => import_useFloatingPanel2.panelViewportPadding,
+  placeEchoOverTrigger: () => placeEchoOverTrigger,
   resolvePanelWidthMode: () => import_useFloatingPanel2.resolvePanelWidthMode,
   useFloatingPanel: () => import_useFloatingPanel2.useFloatingPanel,
   useViewportGtSm: () => useViewportGtSm
@@ -45,11 +47,12 @@ var import_trailingAction = require("./trailingAction.cjs");
 var import_focusManagement = require("../shared/focusManagement.cjs");
 var import_useSheetEscapeDismiss = require("../shared/useSheetEscapeDismiss.cjs");
 var import_useFloatingPanel = require("./useFloatingPanel.cjs");
+var import_containingBlock = require("./containingBlock.cjs");
+var import_panelWidth = require("./panelWidth.cjs");
 var import_overlayStack = require("../shared/overlayStack.cjs");
 var import_compactFace = require("./compactFace.cjs");
 var import_nestedAction = require("./nestedAction.cjs");
 var import_PanelPortal = require("./PanelPortal.cjs");
-var import_containingBlock = require("./containingBlock.cjs");
 var import_pointAnchor = require("./pointAnchor.cjs");
 var import_nestedAction2 = require("./nestedAction.cjs");
 var import_useFloatingPanel2 = require("./useFloatingPanel.cjs");
@@ -107,12 +110,40 @@ function panelTransformOrigin(placement) {
   return `${originY} ${originX}`;
 }
 const ECHO_STRIPPED_ATTRIBUTES = ["id", "for", "name", "data-testid", "aria-label", "aria-controls", "aria-labelledby", "aria-describedby", "aria-activedescendant"];
+function childPath(root, node) {
+  const path = [];
+  for (let at = node; at && at !== root; at = at.parentElement) {
+    const parent = at.parentElement;
+    if (!parent) return null;
+    path.unshift(Array.prototype.indexOf.call(parent.children, at));
+  }
+  return path;
+}
+function followPath(root, path) {
+  let at = root;
+  for (const index of path) at = at?.children[index];
+  return at ?? null;
+}
+function dropEchoChrome(source, snapshot) {
+  const painted = (0, import_useFloatingPanel.paintedCornerBox)(source);
+  const path = painted ? childPath(source, painted) : null;
+  const frame = path ? followPath(snapshot, path) : null;
+  if (!frame) return;
+  frame.style.setProperty("border-color", "transparent", "important");
+  frame.style.setProperty("background-color", "transparent", "important");
+  frame.style.setProperty("background-image", "none", "important");
+  frame.style.setProperty("box-shadow", "none", "important");
+  frame.style.setProperty("outline", "none", "important");
+  frame.setAttribute("data-fp-echo-frame", "");
+}
 function TriggerEchoRow({
   sourceRef,
   onPress,
   children,
   anchorRect,
-  source
+  source,
+  presentational = false,
+  edge = "top"
 }) {
   const rowRef = (0, import_react.useRef)(null);
   const visualRef = (0, import_react.useRef)(null);
@@ -124,17 +155,31 @@ function TriggerEchoRow({
       const control = source2.matches(PANEL_FOCUSABLE) ? source2 : source2.querySelector(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 || source2.textContent || "";
-      row.setAttribute("aria-label", label);
+      if (!presentational) row.setAttribute("aria-label", label);
       const rect = anchorRect ?? source2.getBoundingClientRect();
-      row.style.width = `${rect.width}px`;
+      const grown = Number(row.getAttribute("data-fp-echo-stretched")) || 0;
+      const stretched = grown > rect.width;
+      row.style.width = `${stretched ? grown : rect.width}px`;
       row.style.height = `${rect.height}px`;
       const rtl = isRtl(source2);
       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;
+      if (edge === "bottom") {
+        row.style.order = "1";
+        row.style.marginTop = "";
+        row.style.top = "";
+        row.style.marginBottom = `${-(parseFloat(frameStyle?.borderBottomWidth || "0") || 0)}px`;
+        row.style.bottom = row.style.marginBottom;
+      } else {
+        row.style.order = "";
+        row.style.marginBottom = "";
+        row.style.bottom = "";
+        row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
+        row.style.top = row.style.marginTop;
+      }
       row.style.zIndex = "1";
+      row.style.backgroundColor = frameStyle?.backgroundColor ?? "";
       row.style.marginLeft = rtl ? "" : `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
       row.style.marginRight = rtl ? `${-(parseFloat(frameStyle?.borderRightWidth || "0") || 0)}px` : "";
       const snapshot = children == null ? source2.cloneNode(true) : visualRef.current;
@@ -151,8 +196,11 @@ function TriggerEchoRow({
           node.setAttribute("tabindex", "-1");
         }
       }
+      if (children == null) dropEchoChrome(source2, snapshot);
       snapshot.setAttribute("inert", "");
       snapshot.setAttribute("aria-hidden", "true");
+      snapshot.style.width = stretched ? "100%" : "";
+      snapshot.style.maxWidth = stretched ? "none" : "";
       if (children == null) visualRef.current?.replaceChildren(snapshot);
     };
     sync();
@@ -160,12 +208,16 @@ function TriggerEchoRow({
     const observer = new ResizeObserver(sync);
     observer.observe(source2);
     return () => observer.disconnect();
-  }, [sourceRef, source, children, anchorRect]);
+  }, [sourceRef, source, children, anchorRect, presentational, edge]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     ref: rowRef,
     "data-fp-trigger-row": "",
-    role: "button",
-    "aria-expanded": true,
+    ...(presentational ? {
+      "aria-hidden": true
+    } : {
+      role: "button",
+      "aria-expanded": true
+    }),
     tabIndex: -1,
     cursor: "pointer",
     onPress,
@@ -181,6 +233,38 @@ function TriggerEchoRow({
     })
   });
 }
+const ECHO_FIELD = 'input, textarea, [role="combobox"], [aria-haspopup="listbox"]';
+function placeEchoOverTrigger(panelElement, geometry, {
+  stretch = false
+} = {}) {
+  const row = panelElement.querySelector("[data-fp-trigger-row]");
+  if (!row) return;
+  const offset = (0, import_panelWidth.echoOffset)(geometry);
+  const x = geometry.rtl ? -offset : offset;
+  row.style.translate = Math.abs(x) < 0.5 ? "" : `${x}px 0`;
+  const triggerWidth = geometry.triggerRight - geometry.triggerLeft;
+  const grown = geometry.panelWidth - offset;
+  const field = stretch && row.querySelector(ECHO_FIELD) != null;
+  const visual = row.firstElementChild;
+  const snapshot = visual?.firstElementChild;
+  if (field && grown > triggerWidth + 0.5) {
+    row.style.width = `${grown}px`;
+    row.setAttribute("data-fp-echo-stretched", String(grown));
+    for (const node of [visual, snapshot]) {
+      if (!node) continue;
+      node.style.width = "100%";
+      node.style.maxWidth = "none";
+    }
+  } else if (row.hasAttribute("data-fp-echo-stretched")) {
+    row.removeAttribute("data-fp-echo-stretched");
+    row.style.width = `${triggerWidth}px`;
+    for (const node of [visual, snapshot]) {
+      if (!node) continue;
+      node.style.width = "";
+      node.style.maxWidth = "";
+    }
+  }
+}
 const overlayFloatBreakpoint = import_theme2.OVERLAY_BREAKPOINT;
 function subscribeViewport(listener) {
   if (!import_tamagui.isWeb || typeof window === "undefined") return () => {};
@@ -367,10 +451,12 @@ function FloatingPanelWeb({
   sizing = "grow",
   widthMode,
   fitContent,
+  panelWidth,
   contentPadding = "default",
   openOn = "press",
   cover = true,
   triggerEcho = true,
+  coverAlign = "start",
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -391,6 +477,7 @@ function FloatingPanelWeb({
   const contentRef = (0, import_react.useRef)(null);
   const anchorPointRef = (0, import_react.useRef)(null);
   const pointPlacementRef = (0, import_react.useRef)(null);
+  const coverAlignEndRef = (0, import_react.useRef)(false);
   const repositionFnRef = (0, import_react.useRef)(null);
   const resetPosition = () => {
     overlayStyleRef.current = null;
@@ -412,6 +499,8 @@ function FloatingPanelWeb({
     fitContent,
     freeOverlay: isContextMenu,
     cover,
+    panelWidth,
+    echo: cover && triggerEcho && !isContextMenu,
     onBeforeOpen: resetPosition
   });
   (0, import_focusManagement.useReturnFocusOnClose)(open, skipReturnFocusRef, panel.refs.floating);
@@ -468,15 +557,42 @@ function FloatingPanelWeb({
       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 startLeft = rtl ? measured.right - width : measured.left;
+      const endLeft = rtl ? measured.left : measured.right - width;
+      const iconCover = coverAlign === "auto";
+      const startFree = rtl ? startLeft >= viewportLeft + import_useFloatingPanel.panelViewportPadding : startLeft + width <= viewportRight - import_useFloatingPanel.panelViewportPadding;
+      const endFree = rtl ? endLeft + width <= viewportRight - import_useFloatingPanel.panelViewportPadding : endLeft >= viewportLeft + import_useFloatingPanel.panelViewportPadding;
+      let alignEnd = iconCover && !startFree && endFree;
+      const slides = (0, import_panelWidth.slidesAlongScreen)(panelWidth);
+      const margins = {
+        boundsLeft: viewportLeft + import_useFloatingPanel.panelViewportPadding,
+        boundsRight: viewportRight - import_useFloatingPanel.panelViewportPadding
+      };
+      const room = panelWidth === "screen" ? (0, import_panelWidth.screenBounds)({
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        ...margins,
+        rtl
+      }) : {
+        left: margins.boundsLeft,
+        right: margins.boundsRight
+      };
+      const left = slides ? (0, import_panelWidth.panelLeftForWidth)({
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        width,
+        boundsLeft: room.left,
+        boundsRight: room.right,
+        rtl
+      }) : alignEnd ? endLeft : startLeft;
       const firstActionHeight = contentRef.current?.querySelector(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;
       let placedTop = measured.top;
       let placedLeft = left;
-      if (measured.width > 0 && measured.height > 0 && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - import_useFloatingPanel.panelViewportPadding) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - import_useFloatingPanel.panelViewportPadding)) {
-        if (!clampCollisions) {
+      if (measured.width > 0 && measured.height > 0 && (!slides && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - import_useFloatingPanel.panelViewportPadding)) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - import_useFloatingPanel.panelViewportPadding)) {
+        if (!clampCollisions && !iconCover) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
           return;
@@ -496,11 +612,23 @@ function FloatingPanelWeb({
             right: viewportRight - import_useFloatingPanel.panelViewportPadding,
             bottom: viewportBottom - import_useFloatingPanel.panelViewportPadding
           },
-          rtl
+          rtl,
+          align: coverAlign
         });
         placedTop = placed.top;
-        placedLeft = placed.left;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
       }
+      coverAlignEndRef.current = alignEnd;
+      placeEchoOverTrigger(dropdownElement, {
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        panelLeft: placedLeft,
+        panelWidth: width,
+        rtl
+      }, {
+        stretch: panelWidth !== void 0
+      });
       const top2 = placedTop - containingBlock.top;
       const cssLeft2 = placedLeft - containingBlock.left;
       const maxHeight = Math.max(0, viewportBottom - import_useFloatingPanel.panelViewportPadding - placedTop);
@@ -508,7 +636,7 @@ function FloatingPanelWeb({
       dropdownElement.style.left = `${cssLeft2}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = rtl ? "top right" : "top left";
+      dropdownElement.style.transformOrigin = rtl !== alignEnd ? "top right" : "top left";
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = {
         top: top2,
@@ -639,7 +767,7 @@ function FloatingPanelWeb({
         });
       }
     });
-  }, [isFill, isContextMenu, cover, anchorRect, clampCollisions, sheetProps.scrollable, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
+  }, [isFill, isContextMenu, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
   repositionFnRef.current = repositionOverlay;
   const click = (0, import_react2.useClick)(panel.context, {
     event: "mousedown",
@@ -779,71 +907,75 @@ function FloatingPanelWeb({
       children
     }), panel.mounted && !collisionSheet && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PanelPortal.PanelPortal, {
       anchor: panel.triggerRef.current,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...getFloatingProps({
-          ref: panel.refs.setFloating,
-          style: {
-            ...elevatedSurfaceStyle,
-            position: panel.strategy,
-            top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-            left: overlayStyleRef.current?.left ?? panel.x ?? 0,
-            scrollbarWidth: "none",
-            zIndex: panelZIndex,
-            overflow: "auto",
-            ...(cover && !isContextMenu ? {
-              overflowX: "hidden"
-            } : {}),
-            ...panel.floatingStyleRef.current,
-            ...(overlayStyleRef.current ? {
-              maxHeight: overlayStyleRef.current.maxHeight
-            } : {}),
-            opacity: panel.visible ? 1 : 0,
-            // `none`, not scale(1): any transform makes this panel the
-            // containing block of a nested panel's `position: fixed`, which
-            // then positions against this box and is clipped by its scroll.
-            transform: panel.visible ? "none" : "scale(0.96)",
-            transition: webTransition,
-            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 => {
-            if (event.target === event.currentTarget && (event.propertyName === "height" || event.propertyName === "max-height")) {
-              panel.updateArrows(event.currentTarget);
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+        name: "alt1",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...getFloatingProps({
+            ref: panel.refs.setFloating,
+            style: {
+              ...elevatedSurfaceStyle,
+              position: panel.strategy,
+              top: overlayStyleRef.current?.top ?? panel.y ?? 0,
+              left: overlayStyleRef.current?.left ?? panel.x ?? 0,
+              scrollbarWidth: "none",
+              zIndex: panelZIndex,
+              overflow: "auto",
+              ...(cover && !isContextMenu ? {
+                overflowX: "hidden"
+              } : {}),
+              ...panel.floatingStyleRef.current,
+              ...(overlayStyleRef.current ? {
+                maxHeight: overlayStyleRef.current.maxHeight
+              } : {}),
+              opacity: panel.visible ? 1 : 0,
+              // `none`, not scale(1): any transform makes this panel the
+              // containing block of a nested panel's `position: fixed`, which
+              // then positions against this box and is clipped by its scroll.
+              transform: panel.visible ? "none" : "scale(0.96)",
+              transition: webTransition,
+              transformOrigin: cover && !isContextMenu ? isRtl(panel.triggerRef.current) !== coverAlignEndRef.current ? "top right" : "top left" : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
+            },
+            onScroll: handleScroll,
+            onTransitionEnd: event => {
+              if (event.target === event.currentTarget && (event.propertyName === "height" || event.propertyName === "max-height")) {
+                panel.updateArrows(event.currentTarget);
+              }
             }
-          }
-        }),
-        "data-testid": "floating-panel-viewport",
-        "data-fp-panel": "",
-        ...panelChromeFocus,
-        pointerEvents: panel.visible ? "auto" : "none",
-        ...elevatedSurfaceProps,
-        borderRadius: panel.dropdownRadius,
-        paddingVertical: 0,
-        children: [isContextMenu || !cover || !triggerEcho ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
-          sourceRef: panel.triggerRef,
-          source: trigger,
-          anchorRect,
-          onPress: () => onOpenChange(false),
-          children: triggerRow
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
-          direction: "up",
-          scrollRef: panel.refs.floating,
-          visible: panel.arrowUp,
-          arrowScrollDirRef: panel.arrowScrollDirRef
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          ref: contentRef,
-          ...(contentPadding !== "none" ? panel.knobProps.panelPadding : void 0),
-          ...(contentPadding !== "none" ? panel.knobProps.gapLg : void 0),
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_overlayStack.OverlayStackProvider, {
-            zIndex: panelZIndex,
-            children
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
-          direction: "down",
-          scrollRef: panel.refs.floating,
-          visible: panel.arrowDown,
-          arrowScrollDirRef: panel.arrowScrollDirRef
-        })]
+          }),
+          "data-testid": "floating-panel-viewport",
+          "data-fp-panel": "",
+          ...panelChromeFocus,
+          pointerEvents: panel.visible ? "auto" : "none",
+          ...elevatedSurfaceProps,
+          borderRadius: panel.dropdownRadius,
+          paddingVertical: 0,
+          paddingBottom: panel.coverCornerInset || 0,
+          children: [isContextMenu || !cover || !triggerEcho ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
+            sourceRef: panel.triggerRef,
+            source: trigger,
+            anchorRect,
+            onPress: () => onOpenChange(false),
+            children: triggerRow
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+            direction: "up",
+            scrollRef: panel.refs.floating,
+            visible: panel.arrowUp,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ref: contentRef,
+            ...(contentPadding !== "none" ? panel.knobProps.panelPadding : void 0),
+            ...(contentPadding !== "none" ? panel.knobProps.gapLg : void 0),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_overlayStack.OverlayStackProvider, {
+              zIndex: panelZIndex,
+              children
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+            direction: "down",
+            scrollRef: panel.refs.floating,
+            visible: panel.arrowDown,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          })]
+        })
       })
     })]
   });

package/dist/cjs/FloatingPanel/index.native.js

@@ -25,12 +25,14 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var index_native_exports = {};
 __export(index_native_exports, {
   FloatingPanel: () => FloatingPanel,
+  TriggerEchoRow: () => TriggerEchoRow,
   floatingPanelActionProps: () => import_nestedAction.floatingPanelActionProps,
   isNestedPanelAction: () => import_nestedAction.isNestedPanelAction,
   panelAnimationDuration: () => import_useFloatingPanel2.panelAnimationDuration,
   panelGrowDuration: () => import_useFloatingPanel2.panelGrowDuration,
   panelTransition: () => import_useFloatingPanel2.panelTransition,
   panelViewportPadding: () => import_useFloatingPanel2.panelViewportPadding,
+  placeEchoOverTrigger: () => placeEchoOverTrigger,
   useFloatingPanel: () => import_useFloatingPanel2.useFloatingPanel,
   useViewportGtSm: () => useViewportGtSm
 });
@@ -48,6 +50,8 @@ var import_t = require("../shared/t.native.js");
 var import_overlaySizeClass = require("../shared/overlaySizeClass.native.js");
 var import_useKeyboardInset = require("../shared/useKeyboardInset.native.js");
 var import_compactFace = require("./compactFace.native.js");
+var import_panelWidth = require("./panelWidth.native.js");
+var import_echoContext = require("./echoContext.native.js");
 var import_pointAnchor = require("./pointAnchor.native.js");
 var import_RegularPanel = require("./RegularPanel.native.js");
 var import_useFloatingPanel = require("./useFloatingPanel.native.js");
@@ -83,7 +87,9 @@ function FloatingPanel(param) {
     compactFace,
     triggerRow,
     triggerEcho = true,
+    coverAlign = "start",
     anchorMode,
+    panelWidth = "content",
     sheet,
     widthMode,
     fitContent
@@ -152,6 +158,12 @@ function FloatingPanel(param) {
   var anchored = asMenu || asRegular;
   var triggerRef = (0, import_react.useRef)(null);
   var [anchor, setAnchor] = (0, import_react.useState)(null);
+  var [triggerRadius, setTriggerRadius] = (0, import_react.useState)(null);
+  var reportTriggerRadius = (0, import_react.useCallback)(function (radius) {
+    return setTriggerRadius(function (prev) {
+      return prev === radius ? prev : radius;
+    });
+  }, []);
   (0, import_react.useLayoutEffect)(function () {
     if (!anchored || !open) {
       setAnchor(null);
@@ -468,9 +480,12 @@ function FloatingPanel(param) {
           style: {
             width: triggerSizing === "content" ? void 0 : "100%"
           },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_trailingAction.TriggerWithTrailingAction, {
-            trigger,
-            triggerEnd
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_echoContext.PanelTriggerRadiusContext.Provider, {
+            value: reportTriggerRadius,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_trailingAction.TriggerWithTrailingAction, {
+              trigger,
+              triggerEnd
+            })
           })
         }))
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_trailingAction.TrailingActionOverlay, {
@@ -502,6 +517,9 @@ function FloatingPanel(param) {
           },
           echo: triggerEcho ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
           echoLabel: triggerA11y === null || triggerA11y === void 0 ? void 0 : triggerA11y.label,
+          coverAlign: anchorMode === "attach" ? "start" : coverAlign,
+          panelWidth,
+          triggerRadius: anchorMode === "attach" ? null : triggerRadius,
           framePadding,
           frameGap,
           onBackdropPress: handleBackdropPress,
@@ -656,26 +674,56 @@ function TriggerMenuPanel(param) {
     bounds,
     echo,
     echoLabel,
+    coverAlign,
+    panelWidth,
+    triggerRadius,
     framePadding,
     frameGap,
     onBackdropPress,
     onClose,
     children
   } = param;
-  var _ref, _ref1, _ref2, _ref3;
+  var _ref, _ref1, _ref2, _ref3, _ref4;
   var {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
   var [size, setSize] = (0, import_react.useState)(null);
+  var room = panelWidth === "screen" && anchor ? {
+    ...bounds,
+    ...(0, import_panelWidth.screenBounds)({
+      triggerLeft: anchor.x,
+      triggerRight: anchor.x + anchor.width,
+      boundsLeft: bounds.left,
+      boundsRight: bounds.right,
+      rtl: import_react_native.I18nManager.isRTL
+    })
+  } : bounds;
+  var widthBox = (0, import_panelWidth.panelWidthBox)(panelWidth, {
+    trigger: (_ref = anchor === null || anchor === void 0 ? void 0 : anchor.width) !== null && _ref !== void 0 ? _ref : 0,
+    available: room.right - room.left,
+    echo: echo != null,
+    floor: Math.max(import_compactFace.MENU_MIN_WIDTH, (_ref1 = anchor === null || anchor === void 0 ? void 0 : anchor.width) !== null && _ref1 !== void 0 ? _ref1 : 0)
+  });
   var placement = anchor && size ? (attach ? import_pointAnchor.placeBesideTrigger : import_pointAnchor.placeOverTrigger)({
     trigger: anchor,
     width: size.width,
     height: size.height,
-    bounds,
-    rtl: import_react_native.I18nManager.isRTL
+    bounds: room,
+    rtl: import_react_native.I18nManager.isRTL,
+    align: coverAlign
   }) : null;
+  var half = anchor ? Math.min(anchor.width, anchor.height) / 2 : void 0;
+  var radius = triggerRadius != null && half != null ? Math.min(triggerRadius, half) : coverAlign === "auto" && half ? half : void 0;
+  var borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  var echoShift = anchor && placement ? (0, import_panelWidth.echoOffset)({
+    triggerLeft: anchor.x,
+    triggerRight: anchor.x + anchor.width,
+    panelLeft: placement.left,
+    panelWidth: placement.width,
+    rtl: import_react_native.I18nManager.isRTL
+  }) : 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
     style: import_react_native.StyleSheet.absoluteFill,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
@@ -698,25 +746,36 @@ function TriggerMenuPanel(param) {
       },
       style: {
         position: "absolute",
-        left: (_ref = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref !== void 0 ? _ref : bounds.left,
-        top: (_ref1 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref1 !== void 0 ? _ref1 : bounds.top,
-        minWidth: (0, import_compactFace.menuMinWidth)((_ref2 = anchor === null || anchor === void 0 ? void 0 : anchor.width) !== null && _ref2 !== void 0 ? _ref2 : 0, bounds.right - bounds.left),
-        maxWidth: bounds.right - bounds.left,
-        maxHeight: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref3 !== void 0 ? _ref3 : bounds.bottom - bounds.top,
+        left: (_ref2 = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref2 !== void 0 ? _ref2 : bounds.left,
+        top: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref3 !== void 0 ? _ref3 : bounds.top,
+        ...widthBox,
+        maxHeight: (_ref4 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref4 !== void 0 ? _ref4 : bounds.bottom - bounds.top,
         opacity: placement ? 1 : 0
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      children: (
+      /* FZ-8414: the shadow rides this unclipped frame; iOS drops the
+      shadow of a layer that also clips, and in dark the menu melted
+      into the page. The clip lives on the inner stack. */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
         testID: "floating-panel-menu-surface",
         ...knobProps.elevatedSurface,
+        ...(radius != null ? {
+          borderRadius: radius
+        } : void 0),
         flexShrink: 1,
         minHeight: 0,
         onAccessibilityEscape: onClose,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
           testID: "floating-panel-menu-clip",
-          borderRadius: knobProps.elevatedSurface.borderRadius,
-          overflow: "hidden",
           flexShrink: 1,
           minHeight: 0,
+          overflow: "hidden",
+          ...(radius != null ? {
+            borderRadius: Math.max(0, radius - borderWidth)
+          } : {
+            borderRadius: knobProps.elevatedSurface.borderRadius
+          }),
           children: [echo != null && anchor && anchor.height > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
             testID: "floating-panel-menu-echo",
             onPress: onClose,
@@ -725,14 +784,26 @@ function TriggerMenuPanel(param) {
               accessibilityLabel: echoLabel
             } : void 0),
             "aria-expanded": true,
+            // The frame's border is inside the anchor box: pull the echo
+            // back over it so its content lands where the trigger's did.
+            // Exactly the trigger's box at the start edge: a menu wider than
+            // its trigger (the 250pt pull-down floor) must not stretch the
+            // echo and re-centre a pill's label (FZ-8438).
             style: {
               height: anchor.height,
-              minWidth: anchor.width,
+              width: anchor.width,
+              alignSelf: "flex-start",
+              margin: -borderWidth,
+              marginStart: echoShift - borderWidth,
+              marginBottom: 0,
               justifyContent: "center"
             },
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
               pointerEvents: "none",
-              children: echo
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_echoContext.PanelEchoContext.Provider, {
+                value: true,
+                children: echo
+              })
             })
           }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
             style: {
@@ -747,7 +818,7 @@ function TriggerMenuPanel(param) {
             })
           })]
         })
-      })
+      }))
     })]
   });
 }
@@ -822,4 +893,8 @@ function PointPanel(param) {
     })]
   });
 }
+function TriggerEchoRow(_props) {
+  return null;
+}
+function placeEchoOverTrigger(_panelElement, _geometry, _options) {}
 //# sourceMappingURL=index.native.js.map