@multiplatform.one/forms 7.72.0 → 7.73.0

package/dist/esm/FloatingPanel/iconEcho.native.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+import { cloneElement, isValidElement, useState } from "react";
+import { SurfaceContext } from "@multiplatform.one/theme";
+import { useTheme, View } from "tamagui";
+import { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph.native.js";
+import { t } from "../shared/t.native.js";
+var ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
+var DROPPED_PROPS = ["id", "onLongPress", "onKeyDown", "onContextMenu", "aria-haspopup", "aria-expanded", "aria-controls", "aria-describedby", "tooltip"];
+function iconEchoOverlays(kind, up) {
+  return kind === "close" && !up;
+}
+function iconEchoElement(trigger, kind, onClose, surface) {
+  var echo = echoOf(trigger, kind, onClose);
+  if (echo == null || !surface) return echo;
+  return /* @__PURE__ */_jsx(SurfaceContext.Provider, {
+    ...surface,
+    children: echo
+  });
+}
+function echoOf(trigger, _kind, onClose) {
+  if (! /* @__PURE__ */isValidElement(trigger)) return null;
+  var props = trigger.props;
+  var label = t("Close");
+  var dropped = Object.fromEntries(DROPPED_PROPS.map(function (name) {
+    return [name, void 0];
+  }));
+  if (props.icon != null) {
+    return /* @__PURE__ */cloneElement(trigger, {
+      ...dropped,
+      ref: null,
+      icon: XIcon,
+      "aria-label": label,
+      onPress: onClose,
+      testID: ICON_ECHO_TEST_ID,
+      "data-testid": ICON_ECHO_TEST_ID
+    });
+  }
+  return /* @__PURE__ */_jsx(CircleClose, {
+    label,
+    onClose
+  });
+}
+var avatarPlate = "$selectedBackground";
+var circleGlyphFallbackPx = 18;
+function CircleClose(param) {
+  var {
+    label,
+    onClose
+  } = param;
+  var _ref;
+  var _theme_selectedColor, _theme_color;
+  var theme = useTheme();
+  var [side, setSide] = useState(0);
+  return /* @__PURE__ */_jsx(View, {
+    role: "button",
+    "aria-label": label,
+    tabIndex: 0,
+    cursor: "pointer",
+    width: "100%",
+    height: "100%",
+    borderRadius: 1e5,
+    backgroundColor: avatarPlate,
+    alignItems: "center",
+    justifyContent: "center",
+    pressStyle: {
+      opacity: 0.6
+    },
+    onPress: onClose,
+    onLayout: function onLayout(event) {
+      return setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height));
+    },
+    testID: ICON_ECHO_TEST_ID,
+    "data-testid": ICON_ECHO_TEST_ID,
+    children: /* @__PURE__ */_jsx(XIcon, {
+      size: side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,
+      weight: "bold",
+      color: (_ref = (_theme_selectedColor = theme.selectedColor) === null || _theme_selectedColor === void 0 ? void 0 : _theme_selectedColor.val) !== null && _ref !== void 0 ? _ref : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val,
+      "aria-hidden": true
+    })
+  });
+}
+export { ICON_ECHO_TEST_ID, iconEchoElement, iconEchoOverlays };
+//# sourceMappingURL=iconEcho.native.js.map

package/dist/esm/FloatingPanel/iconEcho.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","XIcon","cloneElement","isValidElement","useState","SurfaceContext","useTheme","View","ICON_BUTTON_CIRCLE_GLYPH_RATIO","t","ICON_ECHO_TEST_ID","DROPPED_PROPS","iconEchoOverlays","kind","up","iconEchoElement","trigger","onClose","surface","echo","echoOf","Provider","children","_kind","props","label","dropped","Object","fromEntries","map","name","icon","ref","onPress","testID","CircleClose","avatarPlate","circleGlyphFallbackPx","param","_ref","_theme_selectedColor","_theme_color","theme","side","setSide","role","tabIndex","cursor","width","height","borderRadius","backgroundColor","alignItems","justifyContent","pressStyle","opacity","onLayout","event","Math","min","nativeEvent","layout","size","round","weight","color","selectedColor","val"],"sources":["iconEcho.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport { cloneElement, isValidElement, useState } from \"react\";\nimport { SurfaceContext } from \"@multiplatform.one/theme\";\nimport { useTheme, View } from \"tamagui\";\nimport { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from \"../Button/circleGlyph\";\nimport { t } from \"../shared/t\";\nvar ICON_ECHO_TEST_ID = \"floating-panel-icon-echo\";\nvar DROPPED_PROPS = [\n  \"id\",\n  \"onLongPress\",\n  \"onKeyDown\",\n  \"onContextMenu\",\n  \"aria-haspopup\",\n  \"aria-expanded\",\n  \"aria-controls\",\n  \"aria-describedby\",\n  \"tooltip\"\n];\nfunction iconEchoOverlays(kind, up) {\n  return kind === \"close\" && !up;\n}\nfunction iconEchoElement(trigger, kind, onClose, surface) {\n  var echo = echoOf(trigger, kind, onClose);\n  if (echo == null || !surface) return echo;\n  return /* @__PURE__ */ _jsx(SurfaceContext.Provider, {\n    ...surface,\n    children: echo\n  });\n}\nfunction echoOf(trigger, _kind, onClose) {\n  if (!/* @__PURE__ */ isValidElement(trigger)) return null;\n  var props = trigger.props;\n  var label = t(\"Close\");\n  var dropped = Object.fromEntries(DROPPED_PROPS.map(function(name) {\n    return [\n      name,\n      void 0\n    ];\n  }));\n  if (props.icon != null) {\n    return /* @__PURE__ */ cloneElement(trigger, {\n      ...dropped,\n      ref: null,\n      icon: XIcon,\n      \"aria-label\": label,\n      onPress: onClose,\n      testID: ICON_ECHO_TEST_ID,\n      \"data-testid\": ICON_ECHO_TEST_ID\n    });\n  }\n  return /* @__PURE__ */ _jsx(CircleClose, {\n    label,\n    onClose\n  });\n}\nvar avatarPlate = \"$selectedBackground\";\nvar circleGlyphFallbackPx = 18;\nfunction CircleClose(param) {\n  var { label, onClose } = param;\n  var _ref;\n  var _theme_selectedColor, _theme_color;\n  var theme = useTheme();\n  var [side, setSide] = useState(0);\n  return /* @__PURE__ */ _jsx(View, {\n    role: \"button\",\n    \"aria-label\": label,\n    tabIndex: 0,\n    cursor: \"pointer\",\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 1e5,\n    backgroundColor: avatarPlate,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    pressStyle: {\n      opacity: 0.6\n    },\n    onPress: onClose,\n    onLayout: function onLayout(event) {\n      return setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height));\n    },\n    testID: ICON_ECHO_TEST_ID,\n    \"data-testid\": ICON_ECHO_TEST_ID,\n    children: /* @__PURE__ */ _jsx(XIcon, {\n      size: side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,\n      weight: \"bold\",\n      color: (_ref = (_theme_selectedColor = theme.selectedColor) === null || _theme_selectedColor === void 0 ? void 0 : _theme_selectedColor.val) !== null && _ref !== void 0 ? _ref : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val,\n      \"aria-hidden\": true\n    })\n  });\n}\nexport {\n  ICON_ECHO_TEST_ID,\n  iconEchoElement,\n  iconEchoOverlays\n};\n//# sourceMappingURL=iconEcho.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FloatingPanel/index.mjs

@@ -1,6 +1,6 @@
 import { transitionProps } from "@multiplatform.one/theme";
 import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, Surface, useResolvedKnobs, wasKeyboardFocus, ensureKeyboardModalityTracking, motionDurationMs } from "@multiplatform.one/theme";
+import { OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, Surface, SurfaceContext, useResolvedKnobs, wasKeyboardFocus, ensureKeyboardModalityTracking, motionDurationMs } from "@multiplatform.one/theme";
 import { isWeb, Sheet, Theme, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList.mjs";
@@ -14,6 +14,9 @@ import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../sha
 import { resolveCompactFace } from "./compactFace.mjs";
 import { isNestedPanelAction } from "./nestedAction.mjs";
 import { PanelPortal } from "./PanelPortal.mjs";
+import { echoHeaderBox, PanelIconEchoBoxContext, sameEchoBox } from "./echoContext.mjs";
+import { iconEchoElement, iconEchoOverlays } from "./iconEcho.mjs";
+import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox.mjs";
 import { contextMenuPoint, placeOverTrigger, pointOpensUp, pointPanelLeft, referenceCornerPoint } from "./pointAnchor.mjs";
 import { floatingPanelActionProps, isNestedPanelAction as isNestedPanelAction2 } from "./nestedAction.mjs";
 import { useFloatingPanel as useFloatingPanel2, panelAnimationDuration, panelGrowDuration, panelTransition, panelViewportPadding as panelViewportPadding2, panelAnchorOffset, resolvePanelWidthMode } from "./useFloatingPanel.mjs";
@@ -226,6 +229,76 @@ function placeEchoOverTrigger(panelElement, geometry, {
     }
   }
 }
+function IconEchoRow({
+  children
+}) {
+  return /* @__PURE__ */jsx(View, {
+    "data-fp-icon-echo": "",
+    flexShrink: 0,
+    alignSelf: "stretch",
+    pointerEvents: "box-none",
+    style: {
+      order: -1,
+      position: "sticky",
+      zIndex: 1
+    },
+    children: /* @__PURE__ */jsx(View, {
+      "data-fp-icon-echo-box": "",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      children
+    })
+  });
+}
+function placeIconEcho(panelElement, {
+  offset,
+  width,
+  height,
+  up,
+  overlay,
+  group = null
+}) {
+  const row = panelElement.querySelector("[data-fp-icon-echo]");
+  const box = row?.querySelector("[data-fp-icon-echo-box]");
+  if (!row || !box) return;
+  const frame = getComputedStyle(panelElement);
+  const border = side => parseFloat(frame[`border${side}Width`] || "0") || 0;
+  const rtl = panelElement.dir === "rtl";
+  row.style.order = up ? "1" : "-1";
+  row.style.height = `${height}px`;
+  row.style.backgroundColor = overlay ? "transparent" : frame.backgroundColor;
+  if (up) {
+    row.style.top = "";
+    row.style.marginTop = "";
+    row.style.marginBottom = `${-border("Bottom")}px`;
+    row.style.bottom = row.style.marginBottom;
+  } else {
+    row.style.bottom = "";
+    row.style.marginTop = `${-border("Top")}px`;
+    row.style.marginBottom = overlay ? `${-(height - border("Top"))}px` : "";
+    row.style.top = row.style.marginTop;
+  }
+  row.setAttribute("data-fp-icon-echo", overlay ? "overlay" : "band");
+  if (group) {
+    row.style.height = `${group.height}px`;
+    if (!up && overlay) row.style.marginBottom = `${-(group.height - border("Top"))}px`;
+  }
+  row.style.marginLeft = `${-border("Left")}px`;
+  row.style.marginRight = `${-border("Right")}px`;
+  box.style.width = `${width}px`;
+  box.style.height = `${height}px`;
+  box.style.marginLeft = rtl ? "" : `${offset}px`;
+  box.style.marginRight = rtl ? `${offset}px` : "";
+  box.style.alignSelf = "flex-start";
+  box.style.marginTop = group ? `${group.top}px` : "";
+  box.style.position = "relative";
+  box.style.zIndex = "1";
+}
+function layoutParentOf(element) {
+  let parent = element?.parentElement ?? null;
+  while (parent && getComputedStyle(parent).display === "contents") parent = parent.parentElement;
+  return parent;
+}
 const overlayFloatBreakpoint = OVERLAY_BREAKPOINT;
 function subscribeViewport(listener) {
   if (!isWeb || typeof window === "undefined") return () => {};
@@ -418,6 +491,7 @@ function FloatingPanelWeb({
   cover = true,
   triggerEcho = true,
   coverAlign = "start",
+  iconEcho,
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -427,6 +501,11 @@ function FloatingPanelWeb({
   const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
+  const pointMenu = isContextMenu && sheetProps.anchorMode !== "cover-trigger";
+  const showIconEcho = cover && !pointMenu && iconEcho != null;
+  const triggerSurface = SurfaceContext.useStyledContext();
+  const iconEchoUpRef = useRef(false);
+  const [echoBox, setEchoBox] = useState(null);
   const overlayStyleRef = useRef(null);
   const pinnedTopRef = useRef(0);
   const pinnedHeightRef = useRef(0);
@@ -458,10 +537,10 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? void 0 : grownRef,
     widthMode: widthMode ?? (isContextMenu && fitContent === void 0 ? "fit-content" : void 0),
     fitContent,
-    freeOverlay: isContextMenu,
+    freeOverlay: pointMenu,
     cover,
     panelWidth,
-    echo: cover && triggerEcho && !isContextMenu,
+    echo: cover && triggerEcho && !pointMenu,
     onBeforeOpen: resetPosition
   });
   useReturnFocusOnClose(open, skipReturnFocusRef, panel.refs.floating);
@@ -485,7 +564,7 @@ function FloatingPanelWeb({
     if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
       dropdownElement.scrollTop = 0;
     }
-    const point = isContextMenu ? anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()) : null;
+    const point = pointMenu ? anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()) : null;
     const measured = anchorRect ? {
       ...anchorRect,
       top: anchorRect.y,
@@ -514,6 +593,9 @@ function FloatingPanelWeb({
       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 groupSurface = showIconEcho ? groupSurfaceOf(trig) : null;
+      const groupBox = groupSurface?.getBoundingClientRect() ?? null;
+      if (showIconEcho) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}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);
@@ -552,7 +634,35 @@ function FloatingPanelWeb({
       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 && (!slides && (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)) {
+      let placedMaxHeight = null;
+      iconEchoUpRef.current = false;
+      if (showIconEcho && measured.width > 0 && measured.height > 0) {
+        const painted = groupBox ?? paintedTriggerBox(trig, measured);
+        const placed = placeOverTrigger({
+          trigger: {
+            x: painted.left,
+            y: groupBox ? groupBox.top : measured.top,
+            width: painted.right - painted.left,
+            height: groupBox ? groupBox.height : measured.height
+          },
+          width,
+          height: totalContentHeight,
+          bounds: {
+            top: viewportTop + panelViewportPadding,
+            left: viewportLeft + panelViewportPadding,
+            right: viewportRight - panelViewportPadding,
+            bottom: viewportBottom - panelViewportPadding
+          },
+          rtl,
+          align: coverAlign,
+          pinned: true
+        });
+        placedTop = placed.top;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
+        placedMaxHeight = placed.maxHeight;
+        iconEchoUpRef.current = placed.up;
+      } else if (measured.width > 0 && measured.height > 0 && (!slides && (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)) {
         if (!clampCollisions && !iconCover) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
@@ -581,6 +691,33 @@ function FloatingPanelWeb({
         alignEnd = placed.end;
       }
       coverAlignEndRef.current = alignEnd;
+      const echoStart = echoOffset({
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        panelLeft: placedLeft,
+        panelWidth: width,
+        rtl
+      });
+      const echoOverlays = iconEcho != null && iconEchoOverlays(iconEcho, iconEchoUpRef.current);
+      const nextEchoBox = showIconEcho && echoOverlays ? echoHeaderBox({
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        panelWidth: width,
+        rtl
+      }) : null;
+      setEchoBox(previous => sameEchoBox(previous, nextEchoBox) ? previous : nextEchoBox);
+      placeIconEcho(dropdownElement, {
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        up: iconEchoUpRef.current,
+        overlay: echoOverlays,
+        group: groupSurface && groupBox ? {
+          top: measured.top - groupBox.top,
+          height: groupBox.height
+        } : null
+      });
       placeEchoOverTrigger(dropdownElement, {
         triggerLeft: measured.left,
         triggerRight: measured.right,
@@ -592,12 +729,12 @@ function FloatingPanelWeb({
       });
       const top2 = placedTop - containingBlock.top;
       const cssLeft2 = placedLeft - containingBlock.left;
-      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - placedTop);
+      const maxHeight = placedMaxHeight ?? Math.max(0, viewportBottom - panelViewportPadding - placedTop);
       dropdownElement.style.top = `${top2}px`;
       dropdownElement.style.left = `${cssLeft2}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = rtl !== alignEnd ? "top right" : "top left";
+      dropdownElement.style.transformOrigin = `${iconEchoUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = {
         top: top2,
@@ -728,7 +865,7 @@ function FloatingPanelWeb({
         });
       }
     });
-  }, [isFill, isContextMenu, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
+  }, [isFill, isContextMenu, pointMenu, showIconEcho, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
   repositionFnRef.current = repositionOverlay;
   const click = useClick(panel.context, {
     event: "mousedown",
@@ -774,7 +911,7 @@ function FloatingPanelWeb({
   const handleScroll = useCallback(event => {
     const el = event.target;
     panel.updateArrows(el);
-    if (isFill || cover && !isContextMenu) return;
+    if (isFill || cover && !pointMenu) return;
     if (panel.initializingRef.current) {
       lastScrollTopRef.current = el.scrollTop;
       return;
@@ -797,7 +934,7 @@ function FloatingPanelWeb({
       grownRef.current = true;
       repositionFnRef.current?.();
     }
-  }, [isFill, cover, isContextMenu, panel.updateArrows]);
+  }, [isFill, cover, pointMenu, panel.updateArrows]);
   const webTransition = panel.panelTransition;
   const {
     style: elevatedSurfaceStyle,
@@ -839,6 +976,17 @@ function FloatingPanelWeb({
       onContextMenu: openFromContextMenu
     } : {})
   });
+  const contentSized = sheetProps.triggerSizing === "content";
+  const [hugSelf, setHugSelf] = useState(contentSized ? "flex-start" : void 0);
+  useLayoutEffect(() => {
+    if (!contentSized) {
+      setHugSelf(void 0);
+      return;
+    }
+    const parent = layoutParentOf(panel.triggerRef.current);
+    const align = parent ? getComputedStyle(parent).alignItems : "stretch";
+    setHugSelf(align === "stretch" || align === "normal" ? "flex-start" : void 0);
+  }, [contentSized, panel.triggerRef]);
   for (const name of ["onMouseDown", "onClick", "onKeyDown", "onKeyUp"]) {
     const handler = referenceProps[name];
     if (typeof handler === "function") {
@@ -852,7 +1000,7 @@ function FloatingPanelWeb({
   return /* @__PURE__ */jsxs(Fragment, {
     children: [/* @__PURE__ */jsx(View, {
       ...referenceProps,
-      alignSelf: sheetProps.triggerSizing === "content" ? "flex-start" : void 0,
+      alignSelf: hugSelf,
       cursor: disabled ? "not-allowed" : "pointer",
       opacity: disabled ? 0.5 : 1,
       "data-fp-reference": "",
@@ -881,7 +1029,7 @@ function FloatingPanelWeb({
               scrollbarWidth: "none",
               zIndex: panelZIndex,
               overflow: "auto",
-              ...(cover && !isContextMenu ? {
+              ...(cover && !pointMenu ? {
                 overflowX: "hidden"
               } : {}),
               ...panel.floatingStyleRef.current,
@@ -894,7 +1042,7 @@ function FloatingPanelWeb({
               // 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)
+              transformOrigin: cover && !pointMenu ? `${iconEchoUpRef.current ? "bottom" : "top"} ${isRtl(panel.triggerRef.current) !== coverAlignEndRef.current ? "right" : "left"}` : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
             },
             onScroll: handleScroll,
             onTransitionEnd: event => {
@@ -911,7 +1059,7 @@ function FloatingPanelWeb({
           borderRadius: panel.dropdownRadius,
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [isContextMenu || !cover || !triggerEcho ? null : /* @__PURE__ */jsx(TriggerEchoRow, {
+          children: [pointMenu || !cover || !triggerEcho || showIconEcho ? null : /* @__PURE__ */jsx(TriggerEchoRow, {
             sourceRef: panel.triggerRef,
             source: trigger,
             anchorRect,
@@ -928,14 +1076,19 @@ function FloatingPanelWeb({
             ...(contentPadding !== "none" ? panel.knobProps.gapLg : void 0),
             children: /* @__PURE__ */jsx(OverlayStackProvider, {
               zIndex: panelZIndex,
-              children
+              children: /* @__PURE__ */jsx(PanelIconEchoBoxContext.Provider, {
+                value: echoBox,
+                children
+              })
             })
           }), /* @__PURE__ */jsx(ScrollArrow, {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
             arrowScrollDirRef: panel.arrowScrollDirRef
-          })]
+          }), showIconEcho && iconEcho ? /* @__PURE__ */jsx(IconEchoRow, {
+            children: iconEchoElement(trigger, iconEcho, () => onOpenChange(false), triggerSurface)
+          }) : null]
         })
       })
     })]