@multiplatform.one/forms 7.80.0 → 7.81.0

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

@@ -25,12 +25,10 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var echoContext_exports = {};
 __export(echoContext_exports, {
   PanelEchoContext: () => PanelEchoContext,
-  PanelIconEchoBoxContext: () => PanelIconEchoBoxContext,
+  PanelSheetContext: () => PanelSheetContext,
   PanelTriggerRadiusContext: () => PanelTriggerRadiusContext,
-  echoHeaderBox: () => echoHeaderBox,
-  sameEchoBox: () => sameEchoBox,
   useInPanelEcho: () => useInPanelEcho,
-  usePanelIconEchoBox: () => usePanelIconEchoBox,
+  useInPanelSheet: () => useInPanelSheet,
   usePanelTriggerRadiusReporter: () => usePanelTriggerRadiusReporter
 });
 module.exports = __toCommonJS(echoContext_exports);
@@ -43,29 +41,8 @@ var PanelTriggerRadiusContext = (0, import_react.createContext)(null);
 function usePanelTriggerRadiusReporter() {
   return (0, import_react.useContext)(PanelTriggerRadiusContext);
 }
-var PanelIconEchoBoxContext = (0, import_react.createContext)(null);
-function usePanelIconEchoBox() {
-  return (0, import_react.useContext)(PanelIconEchoBoxContext);
-}
-function echoHeaderBox(param) {
-  var {
-    offset,
-    width,
-    height,
-    panelWidth,
-    rtl = false
-  } = param;
-  var atStart = offset + width / 2 < panelWidth / 2;
-  var start = atStart ? Math.max(0, offset + width) : 0;
-  var end = atStart ? 0 : Math.max(0, panelWidth - offset);
-  return {
-    height,
-    left: rtl ? end : start,
-    right: rtl ? start : end
-  };
-}
-function sameEchoBox(a, b) {
-  if (a == null || b == null) return a === b;
-  return a.height === b.height && a.left === b.left && a.right === b.right;
+var PanelSheetContext = (0, import_react.createContext)(false);
+function useInPanelSheet() {
+  return (0, import_react.useContext)(PanelSheetContext);
 }
 //# sourceMappingURL=echoContext.native.js.map

package/dist/cjs/FloatingPanel/echoContext.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","echoContext_exports","__export","PanelEchoContext","PanelIconEchoBoxContext","PanelTriggerRadiusContext","echoHeaderBox","sameEchoBox","useInPanelEcho","usePanelIconEchoBox","usePanelTriggerRadiusReporter","module","exports","import_react","require","createContext","useContext","param","offset","width","height","panelWidth","rtl","atStart","start","Math","max","end","left","right","a","b"],"sources":["../../../src/FloatingPanel/echoContext.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,uBAAA,EAAAA,CAAA,KAAAA,uBAAA;EAAAC,yBAAA,EAAAA,CAAA,KAAAA,yBAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAA,aAAA;EAAAC,WAAA,EAAAA,CAAA,KAAAA,WAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,mBAAA,EAAAA,CAAA,KAAAA,mBAAA;EAAAC,6BAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAhB,YAA0C,CAAAK,mBAAA;AAOnC,IAAAY,YAAM,GAAAC,OAAA,QAAmB;AAEzB,IAAAX,gBAAS,OAA0BU,YAAA,CAAAE,aAAA;AACxC,SAAAP,cAAOA,CAAA;EACT,WAAAK,YAAA,CAAAG,UAAA,EAAAb,gBAAA;AAMO;AAEA,IAAAE,yBAAS,OAAAQ,YAAmE,CAAAE,aAAA;AACjF,SAAAL,6BAAkBA,CAAA;EACpB,WAAAG,YAAA,CAAAG,UAAA,EAAAX,yBAAA;AAaO;AAEA,IAAAD,uBAAS,IAA+C,GAAAS,YAAA,CAAAE,aAAA;AAC7D,SAAAN,mBAAOA,CAAA;EACT,WAAAI,YAAA,CAAAG,UAAA,EAAAZ,uBAAA;AAMO;AAAuB,SAC5BE,cAAAW,KAAA;EACA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,UAAA;IAAAC,GAAA;EAAA,IAAAL,KAAA;EACA,IAAAM,OAAA,GAAAL,MAAA,GAAAC,KAAA,OAAAE,UAAA;EACA,IAAAG,KAAA,GAAAD,OAAA,GAAAE,IAAA,CAAAC,GAAA,IAAAR,MAAA,GAAAC,KAAA;EACA,IAAAQ,GAAM,GAAAJ,OAAA,OAAAE,IAAA,CAAAC,GAAA,IAAAL,UAAA,GAAAH,MAAA;EACR,OAMqB;IACnBE,MAAM;IACNQ,IAAM,EAAAN,GAAA,GAAQK,GAAA,GAAAH,KAAU;IACxBK,KAAM,EAAAP,GAAM,GAAAE,KAAA,GAAUG;EACtB;AACF;AAEO,SAASpB,YAAYuB,CAAA,EAA4BC,CAAA,EAAqC;EAC3F,IAAID,CAAA,IAAK,QAAQC,CAAA,IAAK,MAAM,OAAOD,CAAA,KAAMC,CAAA;EACzC,OAAOD,CAAA,CAAEV,MAAA,KAAWW,CAAA,CAAEX,MAAA,IAAUU,CAAA,CAAEF,IAAA,KAASG,CAAA,CAAEH,IAAA,IAAQE,CAAA,CAAED,KAAA,KAAUE,CAAA,CAAEF,KAAA;AACrE","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","echoContext_exports","PanelEchoContext","PanelSheetContext","PanelTriggerRadiusContext","useInPanelEcho","useInPanelSheet","usePanelTriggerRadiusReporter","module","exports","import_react","require","createContext","useContext"],"sources":["echoContext.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar echoContext_exports = {};\n__export(echoContext_exports, {\n  PanelEchoContext: () => PanelEchoContext,\n  PanelSheetContext: () => PanelSheetContext,\n  PanelTriggerRadiusContext: () => PanelTriggerRadiusContext,\n  useInPanelEcho: () => useInPanelEcho,\n  useInPanelSheet: () => useInPanelSheet,\n  usePanelTriggerRadiusReporter: () => usePanelTriggerRadiusReporter\n});\nmodule.exports = __toCommonJS(echoContext_exports);\nvar import_react = require(\"react\");\nvar PanelEchoContext = (0, import_react.createContext)(false);\nfunction useInPanelEcho() {\n  return (0, import_react.useContext)(PanelEchoContext);\n}\nvar PanelTriggerRadiusContext = (0, import_react.createContext)(null);\nfunction usePanelTriggerRadiusReporter() {\n  return (0, import_react.useContext)(PanelTriggerRadiusContext);\n}\nvar PanelSheetContext = (0, import_react.createContext)(false);\nfunction useInPanelSheet() {\n  return (0, import_react.useContext)(PanelSheetContext);\n}\n//# sourceMappingURL=echoContext.js.map\n"],"mappings":"AAAA,YAAY;;AACZ,IAAIA,SAAS,GAAGC,MAAM,CAACC,cAAc;AACrC,IAAIC,gBAAgB,GAAGF,MAAM,CAACG,wBAAwB;AACtD,IAAIC,iBAAiB,GAAGJ,MAAM,CAACK,mBAAmB;AAClD,IAAIC,YAAY,GAAGN,MAAM,CAACO,SAAS,CAACC,cAAc;AAClD,IAAIC,QAAQ,GAAGA,CAACC,MAAM,EAAEC,GAAG,KAAK;EAC9B,KAAK,IAAIC,IAAI,IAAID,GAAG,EAClBZ,SAAS,CAACW,MAAM,EAAEE,IAAI,EAAE;IAAEC,GAAG,EAAEF,GAAG,CAACC,IAAI,CAAC;IAAEE,UAAU,EAAE;EAAK,CAAC,CAAC;AACjE,CAAC;AACD,IAAIC,WAAW,GAAGA,CAACC,EAAE,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,KAAK;EAC5C,IAAIF,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,UAAU,EAAE;IAClE,KAAK,IAAIG,GAAG,IAAIhB,iBAAiB,CAACa,IAAI,CAAC,EACrC,IAAI,CAACX,YAAY,CAACe,IAAI,CAACL,EAAE,EAAEI,GAAG,CAAC,IAAIA,GAAG,KAAKF,MAAM,EAC/CnB,SAAS,CAACiB,EAAE,EAAEI,GAAG,EAAE;MAAEP,GAAG,EAAEA,CAAA,KAAMI,IAAI,CAACG,GAAG,CAAC;MAAEN,UAAU,EAAE,EAAEK,IAAI,GAAGjB,gBAAgB,CAACe,IAAI,EAAEG,GAAG,CAAC,CAAC,IAAID,IAAI,CAACL;IAAW,CAAC,CAAC;EACxH;EACA,OAAOE,EAAE;AACX,CAAC;AACD,IAAIM,YAAY,GAAIC,GAAG,IAAKR,WAAW,CAAChB,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE;EAAEyB,KAAK,EAAE;AAAK,CAAC,CAAC,EAAED,GAAG,CAAC;AAC1F,IAAIE,mBAAmB,GAAG,CAAC,CAAC;AAC5BhB,QAAQ,CAACgB,mBAAmB,EAAE;EAC5BC,gBAAgB,EAAEA,CAAA,KAAMA,gBAAgB;EACxCC,iBAAiB,EAAEA,CAAA,KAAMA,iBAAiB;EAC1CC,yBAAyB,EAAEA,CAAA,KAAMA,yBAAyB;EAC1DC,cAAc,EAAEA,CAAA,KAAMA,cAAc;EACpCC,eAAe,EAAEA,CAAA,KAAMA,eAAe;EACtCC,6BAA6B,EAAEA,CAAA,KAAMA;AACvC,CAAC,CAAC;AACFC,MAAM,CAACC,OAAO,GAAGX,YAAY,CAACG,mBAAmB,CAAC;AAClD,IAAIS,YAAY,GAAGC,OAAO,CAAC,OAAO,CAAC;AACnC,IAAIT,gBAAgB,GAAG,CAAC,CAAC,EAAEQ,YAAY,CAACE,aAAa,EAAE,KAAK,CAAC;AAC7D,SAASP,cAAcA,CAAA,EAAG;EACxB,OAAO,CAAC,CAAC,EAAEK,YAAY,CAACG,UAAU,EAAEX,gBAAgB,CAAC;AACvD;AACA,IAAIE,yBAAyB,GAAG,CAAC,CAAC,EAAEM,YAAY,CAACE,aAAa,EAAE,IAAI,CAAC;AACrE,SAASL,6BAA6BA,CAAA,EAAG;EACvC,OAAO,CAAC,CAAC,EAAEG,YAAY,CAACG,UAAU,EAAET,yBAAyB,CAAC;AAChE;AACA,IAAID,iBAAiB,GAAG,CAAC,CAAC,EAAEO,YAAY,CAACE,aAAa,EAAE,KAAK,CAAC;AAC9D,SAASN,eAAeA,CAAA,EAAG;EACzB,OAAO,CAAC,CAAC,EAAEI,YAAY,CAACG,UAAU,EAAEV,iBAAiB,CAAC;AACxD","ignoreList":[]}

package/dist/cjs/FloatingPanel/index.cjs

@@ -54,7 +54,6 @@ var import_compactFace = require("./compactFace.cjs");
 var import_nestedAction = require("./nestedAction.cjs");
 var import_PanelPortal = require("./PanelPortal.cjs");
 var import_echoContext = require("./echoContext.cjs");
-var import_iconEcho = require("./iconEcho.cjs");
 var import_coverRect = require("./coverRect.cjs");
 var import_paintedBox = require("./paintedBox.cjs");
 var import_pointAnchor = require("./pointAnchor.cjs");
@@ -164,7 +163,6 @@ function TriggerEchoRow({
       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.position = "sticky";
@@ -172,8 +170,8 @@ function TriggerEchoRow({
       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` : "";
+      row.style.marginLeft = `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
+      row.style.marginRight = `${-(parseFloat(frameStyle?.borderRightWidth || "0") || 0)}px`;
       const snapshot = children == null ? source2.cloneNode(true) : visualRef.current;
       if (!snapshot) return;
       const sourceFields = source2.querySelectorAll("input, textarea");
@@ -257,71 +255,6 @@ function placeEchoOverTrigger(panelElement, geometry, {
     }
   }
 }
-function IconEchoRow({
-  children
-}) {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    "data-fp-icon-echo": "",
-    flexShrink: 0,
-    alignSelf: "stretch",
-    pointerEvents: "box-none",
-    style: {
-      order: -1,
-      position: "sticky",
-      zIndex: 1
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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;
@@ -472,14 +405,17 @@ function FloatingPanelSheet({
       ...(0, import_theme.transitionProps)(slideMotion),
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
         ...(0, import_theme.transitionProps)(scrimMotion),
-        backgroundColor: "$shadow6",
+        backgroundColor: import_theme.overlayScrim,
         enterStyle: {
           opacity: 0
         },
         exitStyle: {
           opacity: 0
         }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, {
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {
+        ...import_theme.sheetGrabber,
+        "aria-label": "Resize"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, {
         "data-testid": "floating-panel-sheet",
         ...{
           ref: sheetFrameRef,
@@ -488,16 +424,34 @@ function FloatingPanelSheet({
         ...knobProps.elevatedSurface,
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderBottomWidth: 0,
         ...panelChromeFocus,
         padding: framePadding,
+        ...(contentPadding === "none" ? {
+          paddingTop: import_theme.sheetGrabberClearance
+        } : null),
         gap: frameGap,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_overlayStack.OverlayStackProvider, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_overlayStack.OverlayStackProvider, {
           zIndex: sheetZIndex,
-          children: [header, scrollable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, {
-            flex: header ? 1 : void 0,
-            ...scrollViewProps,
-            children
-          }) : children]
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_echoContext.PanelSheetContext.Provider, {
+            value: true,
+            children: [header, scrollable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, {
+              flex: header ? 1 : void 0,
+              ...scrollViewProps,
+              children
+            }) : children, contentPadding === "none" ?
+            // An edge-to-edge list clears the home indicator (HIG); a padded
+            // frame's own padding already does.
+            /* @__PURE__ */
+            (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              style: {
+                height: "env(safe-area-inset-bottom)"
+              },
+              flexShrink: 0
+            }) : null]
+          })
         })
       })]
     })]
@@ -519,7 +473,7 @@ function FloatingPanelWeb({
   cover = true,
   triggerEcho = true,
   coverAlign = "start",
-  iconEcho,
+  iconCover,
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -530,10 +484,8 @@ function FloatingPanelWeb({
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
   const pointMenu = isContextMenu && sheetProps.anchorMode !== "cover-trigger";
-  const showIconEcho = cover && !pointMenu && iconEcho != null;
-  const triggerSurface = import_theme2.SurfaceContext.useStyledContext();
-  const iconEchoUpRef = (0, import_react.useRef)(false);
-  const [echoBox, setEchoBox] = (0, import_react.useState)(null);
+  const coversIcon = cover && !pointMenu && iconCover === true;
+  const openedUpRef = (0, import_react.useRef)(false);
   const overlayStyleRef = (0, import_react.useRef)(null);
   const pinnedTopRef = (0, import_react.useRef)(0);
   const pinnedHeightRef = (0, import_react.useRef)(0);
@@ -621,19 +573,19 @@ 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 ? (0, import_paintedBox.groupSurfaceOf)(trig) : null;
+      const groupSurface = coversIcon ? (0, import_paintedBox.groupSurfaceOf)(trig) : null;
       const groupBox = groupSurface?.getBoundingClientRect() ?? null;
-      if (showIconEcho) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}px` : "";
+      if (coversIcon) 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);
       const width = Math.max(layoutWidth || dropdownElement.offsetWidth, measured.width);
       const startLeft = rtl ? measured.right - width : measured.left;
       const endLeft = rtl ? measured.left : measured.right - width;
-      const iconCover = coverAlign === "auto";
+      const iconCover2 = 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;
+      let alignEnd = iconCover2 && !startFree && endFree;
       const slides = (0, import_panelWidth.slidesAlongScreen)(panelWidth);
       const margins = {
         boundsLeft: viewportLeft + import_useFloatingPanel.panelViewportPadding,
@@ -660,7 +612,7 @@ function FloatingPanelWeb({
       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;
-      const painted = showIconEcho ? (0, import_paintedBox.paintedTriggerBox)(trig, measured) : null;
+      const painted = coversIcon ? (0, import_paintedBox.paintedTriggerBox)(trig, measured) : null;
       const coverRect = painted ? (0, import_coverRect.iconCoverRect)({
         x: painted.left,
         y: measured.top,
@@ -672,16 +624,10 @@ function FloatingPanelWeb({
         width: groupBox.width,
         height: groupBox.height
       } : null) : null;
-      const echoCover = coverRect ? (0, import_coverRect.echoInCover)({
-        x: measured.left,
-        y: measured.top,
-        width: measured.width,
-        height: measured.height
-      }, coverRect) : null;
       let placedTop = measured.top;
       let placedLeft = left;
       let placedMaxHeight = null;
-      iconEchoUpRef.current = false;
+      openedUpRef.current = false;
       if (coverRect && measured.width > 0 && measured.height > 0) {
         const placed = (0, import_pointAnchor.placeOverTrigger)({
           trigger: coverRect,
@@ -701,9 +647,9 @@ function FloatingPanelWeb({
         if (!slides) placedLeft = placed.left;
         alignEnd = placed.end;
         placedMaxHeight = placed.maxHeight;
-        iconEchoUpRef.current = placed.up;
+        openedUpRef.current = placed.up;
       } else 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) {
+        if (!clampCollisions && !iconCover2) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
           return;
@@ -731,30 +677,7 @@ function FloatingPanelWeb({
         alignEnd = placed.end;
       }
       coverAlignEndRef.current = alignEnd;
-      const echoStart = (0, import_panelWidth.echoOffset)({
-        triggerLeft: measured.left,
-        triggerRight: measured.right,
-        panelLeft: placedLeft,
-        panelWidth: width,
-        rtl
-      });
-      const echoOverlays = iconEcho != null && (0, import_iconEcho.iconEchoOverlays)(iconEcho, iconEchoUpRef.current);
-      const nextEchoBox = showIconEcho && echoOverlays ? (0, import_echoContext.echoHeaderBox)({
-        offset: echoStart,
-        width: measured.width,
-        height: echoCover?.height ?? measured.height,
-        panelWidth: width,
-        rtl
-      }) : null;
-      setEchoBox(previous => (0, import_echoContext.sameEchoBox)(previous, nextEchoBox) ? previous : nextEchoBox);
-      placeIconEcho(dropdownElement, {
-        offset: echoStart,
-        width: measured.width,
-        height: measured.height,
-        up: iconEchoUpRef.current,
-        overlay: echoOverlays,
-        group: echoCover
-      });
+      placedLeft = Math.round(placedLeft);
       placeEchoOverTrigger(dropdownElement, {
         triggerLeft: measured.left,
         triggerRight: measured.right,
@@ -771,7 +694,7 @@ function FloatingPanelWeb({
       dropdownElement.style.left = `${cssLeft2}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = `${iconEchoUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
+      dropdownElement.style.transformOrigin = `${openedUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = {
         top: top2,
@@ -902,7 +825,7 @@ function FloatingPanelWeb({
         });
       }
     });
-  }, [isFill, isContextMenu, pointMenu, showIconEcho, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
+  }, [isFill, isContextMenu, pointMenu, coversIcon, 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",
@@ -1079,7 +1002,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 && !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)
+              transformOrigin: cover && !pointMenu ? `${openedUpRef.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 => {
@@ -1096,7 +1019,7 @@ function FloatingPanelWeb({
           borderRadius: panel.dropdownRadius,
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [pointMenu || !cover || !triggerEcho || showIconEcho ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
+          children: [pointMenu || !cover || !triggerEcho || coversIcon ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerEchoRow, {
             sourceRef: panel.triggerRef,
             source: trigger,
             anchorRect,
@@ -1113,19 +1036,14 @@ function FloatingPanelWeb({
             ...(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_echoContext.PanelIconEchoBoxContext.Provider, {
-                value: echoBox,
-                children
-              })
+              children
             })
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
             arrowScrollDirRef: panel.arrowScrollDirRef
-          }), showIconEcho && iconEcho ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoRow, {
-            children: (0, import_iconEcho.iconEchoElement)(trigger, iconEcho, () => onOpenChange(false), triggerSurface)
-          }) : null]
+          })]
         })
       })
     })]

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

@@ -56,7 +56,6 @@ var import_pointAnchor = require("./pointAnchor.native.js");
 var import_RegularPanel = require("./RegularPanel.native.js");
 var import_useFloatingPanel = require("./useFloatingPanel.native.js");
 var import_trailingAction = require("./trailingAction.native.js");
-var import_iconEcho = require("./iconEcho.native.js");
 var import_coverRect = require("./coverRect.native.js");
 var import_iconButtonGroupContext = require("../Button/iconButtonGroupContext.native.js");
 var import_useFloatingPanel2 = require("./useFloatingPanel.native.js");
@@ -91,7 +90,7 @@ function FloatingPanel(param) {
     triggerRow,
     triggerEcho = true,
     coverAlign = "start",
-    iconEcho,
+    iconCover = false,
     anchorMode,
     panelWidth = "content",
     sheet,
@@ -104,7 +103,6 @@ function FloatingPanel(param) {
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
-  var triggerSurface = import_theme2.SurfaceContext.useStyledContext();
   var windowZIndex = (0, import_overlayStack.useOverlayZIndex)("sheet");
   var children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_iconButtonGroupContext.IconButtonGroupSurfaceContext.Provider, {
     value: null,
@@ -199,7 +197,7 @@ function FloatingPanel(param) {
         height: 0
       });
     }
-    if (iconEcho && anchorMode !== "attach" && groupSurface) {
+    if (iconCover && anchorMode !== "attach" && groupSurface) {
       setGroup(void 0);
       groupSurface.measure(function (plate) {
         if (live) setGroup(plate);
@@ -210,7 +208,7 @@ function FloatingPanel(param) {
     return function () {
       live = false;
     };
-  }, [anchored, open, iconEcho, anchorMode, groupSurface]);
+  }, [anchored, open, iconCover, anchorMode, groupSurface]);
   var handleBackdropPress = (0, import_react.useCallback)(function () {
     if (backdropArmed) close();
   }, [backdropArmed, close]);
@@ -534,11 +532,10 @@ function FloatingPanel(param) {
             right: windowWidth - ((_ref4 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.right) !== null && _ref4 !== void 0 ? _ref4 : 0) - import_useFloatingPanel.panelViewportPadding,
             bottom: windowHeight - Math.max((_ref5 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.bottom) !== null && _ref5 !== void 0 ? _ref5 : 0, keyboardInset) - import_useFloatingPanel.panelViewportPadding
           },
-          echo: triggerEcho && !iconEcho ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
+          echo: triggerEcho && !iconCover ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
           echoLabel: triggerA11y === null || triggerA11y === void 0 ? void 0 : triggerA11y.label,
-          iconEcho: iconEcho && anchorMode !== "attach" ? (0, import_iconEcho.iconEchoElement)(trigger, iconEcho, close, triggerSurface) : null,
-          iconEchoKind: iconEcho,
-          group: iconEcho && anchorMode !== "attach" ? group !== null && group !== void 0 ? group : null : null,
+          iconCover: iconCover && anchorMode !== "attach",
+          group: iconCover && anchorMode !== "attach" ? group !== null && group !== void 0 ? group : null : null,
           coverAlign: anchorMode === "attach" ? "start" : coverAlign,
           panelWidth,
           triggerRadius: anchorMode === "attach" ? null : triggerRadius,
@@ -600,7 +597,7 @@ function FloatingPanel(param) {
             accessibilityLabel: (0, import_t.t)("Close"),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
               flex: 1,
-              backgroundColor: "$shadow6"
+              backgroundColor: import_theme.overlayScrim
             })
           }),
           /*
@@ -677,9 +674,12 @@ function FloatingPanel(param) {
                   flex: 1,
                   minHeight: 0
                 } : void 0),
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_theme2.Surface, {
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.Surface, {
                   size: "$true",
-                  children: [header, content]
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_echoContext.PanelSheetContext.Provider, {
+                    value: true,
+                    children: [header, content]
+                  })
                 })
               })]
             })
@@ -696,8 +696,7 @@ function TriggerMenuPanel(param) {
     bounds,
     echo,
     echoLabel,
-    iconEcho = null,
-    iconEchoKind = "menu",
+    iconCover = false,
     group = null,
     coverAlign,
     panelWidth,
@@ -708,15 +707,14 @@ function TriggerMenuPanel(param) {
     onClose,
     children
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+  var _ref, _ref1, _ref2, _ref3, _ref4;
   var {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
   var [size, setSize] = (0, import_react.useState)(null);
-  var cover = anchor && iconEcho != null ? (0, import_coverRect.iconCoverRect)(anchor, group) : anchor;
-  var echoCover = anchor && cover && iconEcho != null ? (0, import_coverRect.echoInCover)(anchor, cover) : null;
+  var cover = anchor && iconCover ? (0, import_coverRect.iconCoverRect)(anchor, group) : anchor;
   var room = panelWidth === "screen" && anchor ? {
     ...bounds,
     ...(0, import_panelWidth.screenBounds)({
@@ -740,12 +738,11 @@ function TriggerMenuPanel(param) {
     bounds: room,
     rtl: import_react_native.I18nManager.isRTL,
     align: coverAlign,
-    pinned: iconEcho != null
+    pinned: iconCover
   }) : null;
   var half = cover ? Math.min(cover.width, cover.height) / 2 : void 0;
-  var radius = group != null && iconEcho != null ? Math.min(group.radius, half !== null && half !== void 0 ? half : group.radius) : triggerRadius != null && half != null ? Math.min(triggerRadius, half) : coverAlign === "auto" && half ? half : void 0;
+  var radius = group != null && iconCover ? Math.min(group.radius, half !== null && half !== void 0 ? half : group.radius) : triggerRadius != null && half != null ? Math.min(triggerRadius, half) : coverAlign === "auto" && half ? half : void 0;
   var borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
-  var echoOverlays = (0, import_iconEcho.iconEchoOverlays)(iconEchoKind, (_ref2 = placement === null || placement === void 0 ? void 0 : placement.up) !== null && _ref2 !== void 0 ? _ref2 : false);
   var echoShift = anchor && placement ? (0, import_panelWidth.echoOffset)({
     triggerLeft: anchor.x,
     triggerRight: anchor.x + anchor.width,
@@ -755,6 +752,8 @@ function TriggerMenuPanel(param) {
   }) : 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
     style: import_react_native.StyleSheet.absoluteFill,
+    testID: "floating-panel-menu-layer",
+    accessibilityViewIsModal: true,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
       style: import_react_native.StyleSheet.absoluteFill,
       onPress: onBackdropPress,
@@ -775,10 +774,10 @@ function TriggerMenuPanel(param) {
       },
       style: {
         position: "absolute",
-        left: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref3 !== void 0 ? _ref3 : bounds.left,
-        top: (_ref4 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref4 !== void 0 ? _ref4 : 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: (_ref5 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref5 !== void 0 ? _ref5 : bounds.bottom - bounds.top,
+        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: (
@@ -834,13 +833,6 @@ function TriggerMenuPanel(param) {
                 children: echo
               })
             })
-          }) : null, iconEcho != null && anchor && !(placement === null || placement === void 0 ? void 0 : placement.up) && !echoOverlays ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoBand, {
-            anchor,
-            cover: echoCover,
-            shift: echoShift,
-            borderWidth,
-            edge: "top",
-            children: iconEcho
           }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
             style: {
               flexGrow: 0,
@@ -850,73 +842,14 @@ function TriggerMenuPanel(param) {
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
               padding: framePadding,
               gap: frameGap,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_echoContext.PanelIconEchoBoxContext.Provider, {
-                value: iconEcho != null && anchor && placement && echoOverlays ? (0, import_echoContext.echoHeaderBox)({
-                  offset: echoShift,
-                  width: anchor.width,
-                  height: (_ref6 = echoCover === null || echoCover === void 0 ? void 0 : echoCover.height) !== null && _ref6 !== void 0 ? _ref6 : anchor.height,
-                  panelWidth: placement.width,
-                  rtl: import_react_native.I18nManager.isRTL
-                }) : null,
-                children
-              })
+              children
             })
-          }), iconEcho != null && anchor && ((placement === null || placement === void 0 ? void 0 : placement.up) || echoOverlays) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoBand, {
-            anchor,
-            cover: echoCover,
-            shift: echoShift,
-            borderWidth,
-            edge: echoOverlays ? "overlay" : "bottom",
-            children: iconEcho
-          }) : null]
+          })]
         })
       }))
     })]
   });
 }
-function IconEchoBand(param) {
-  var {
-    anchor,
-    cover = null,
-    shift,
-    borderWidth,
-    edge,
-    children
-  } = param;
-  var _ref, _ref1;
-  var bandHeight = (_ref = cover === null || cover === void 0 ? void 0 : cover.height) !== null && _ref !== void 0 ? _ref : anchor.height;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
-    testID: "floating-panel-icon-echo-band",
-    pointerEvents: "box-none",
-    style: edge === "overlay" ? {
-      position: "absolute",
-      top: -borderWidth,
-      start: -borderWidth,
-      end: -borderWidth,
-      height: bandHeight,
-      zIndex: 1
-    } : {
-      height: bandHeight,
-      marginHorizontal: -borderWidth,
-      ...(edge === "top" ? {
-        marginTop: -borderWidth
-      } : {
-        marginBottom: -borderWidth
-      })
-    },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
-      style: {
-        width: anchor.width,
-        height: anchor.height,
-        marginStart: shift,
-        marginTop: (_ref1 = cover === null || cover === void 0 ? void 0 : cover.top) !== null && _ref1 !== void 0 ? _ref1 : 0,
-        alignItems: "flex-start",
-        justifyContent: "flex-start"
-      },
-      children
-    })
-  });
-}
 function PointPanel(param) {
   var {
     point,
@@ -943,6 +876,8 @@ function PointPanel(param) {
   }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
     style: import_react_native.StyleSheet.absoluteFill,
+    testID: "floating-panel-point-layer",
+    accessibilityViewIsModal: true,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
       style: import_react_native.StyleSheet.absoluteFill,
       onPress: onBackdropPress,