@floegence/floe-webapp-core 0.90.0 → 0.90.2

package/dist/components/ui/SurfaceAnchoredLayer.js

@@ -1,63 +1,63 @@
-import { createComponent as F, mergeProps as J, memo as K } from "solid-js/web";
-import { splitProps as N, createSignal as f, createEffect as M, onCleanup as R, onMount as Q, Show as U } from "solid-js";
-import { SurfaceFloatingLayer as X } from "./SurfaceFloatingLayer.js";
-import { resolveFloatingBoundary as Z } from "./surfaceFloatingBoundary.js";
-import { observeViewport as _ } from "../../viewport.js";
+import { createComponent as C, mergeProps as J, memo as K } from "solid-js/web";
+import { splitProps as N, createSignal as f, createEffect as M, onCleanup as R, onMount as Q, Show as U, untrack as X } from "solid-js";
+import { SurfaceFloatingLayer as Z } from "./SurfaceFloatingLayer.js";
+import { resolveFloatingBoundary as _ } from "./surfaceFloatingBoundary.js";
+import { observeViewport as ee } from "../../viewport.js";
 import { resolveSurfacePortalHost as E } from "./dialogSurfaceScope.js";
-function ae(L) {
-  const [o, C] = N(L, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [O, H] = f(!1), [$, B] = f({
+function se(L) {
+  const [o, H] = N(L, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [A, $] = f(!1), [k, q] = f({
     x: 0,
     y: 0
-  }), [V, Y] = f("above"), [P, v] = f(!1), [q, D] = f(480), [S, k] = f();
-  let d, w = !1;
-  const [z, T] = f({
+  }), [B, V] = f("above"), [F, v] = f(!1), [Y, D] = f(480), [O, T] = f();
+  let m, w = !1;
+  const [P, W] = f({
     x: 0,
     y: 0
-  }), [W, j] = f(0), G = () => {
-    d = void 0;
-    const n = o.anchor, l = S();
+  }), [j, G] = f(0), S = () => {
+    m = void 0;
+    const n = o.anchor, l = O();
     if (!n || !l) return;
     if (!n.isConnected) {
       v(!1), w || o.onAnchorDisconnect?.(), w = !0;
       return;
     }
     w = !1;
-    const t = Z(E({
+    const t = _(E({
       owner: n
     }));
     if (!t) {
       v(!1);
       return;
     }
-    const e = n.getBoundingClientRect(), s = o.reservedSpace, m = t.top + (window.matchMedia("(max-width:760px)").matches ? s?.narrowTop ?? s?.top ?? 12 : s?.top ?? 12);
-    D(Math.max(120, t.width - 24)), j(Math.max(0, t.bottom - (s?.bottom ?? 12) - m));
+    const e = n.getBoundingClientRect(), s = o.reservedSpace, d = t.top + (window.matchMedia("(max-width:760px)").matches ? s?.narrowTop ?? s?.top ?? 12 : s?.top ?? 12);
+    D(Math.max(120, t.width - 24)), G(Math.max(0, t.bottom - (s?.bottom ?? 12) - d));
     const r = l.getBoundingClientRect(), I = (Math.max(t.left, e.left) + Math.min(t.right, e.right)) / 2;
     let p = Math.max(t.left + 12, Math.min(I - r.width / 2, t.right - r.width - 12));
-    const x = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), g = x - r.height - i, y = Math.max(m, t.bottom - (s?.bottom ?? 12) - r.height), u = (b) => Math.max(m, Math.min(b, y));
-    let c = g, a = "above";
+    const x = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), u = x - r.height - i, y = Math.max(d, t.bottom - (s?.bottom ?? 12) - r.height), g = (b) => Math.max(d, Math.min(b, y));
+    let c = u, a = "above";
     if (o.placement === "right" || o.placement === "left") {
-      const b = e.right + i + r.width <= t.right - 12, A = e.left - i - r.width >= t.left + 12;
-      a = o.placement, a === "right" && !b && A ? a = "left" : a === "left" && !A && b && (a = "right"), p = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), c = u(e.top + e.height / 2 - r.height / 2);
-    } else g < m ? e.bottom + i <= y ? (c = e.bottom + i, a = "below") : g >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (c = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (p = e.right + i, c = u(x), a = "right") : e.left - r.width - i - 12 >= t.left ? (p = e.left - r.width - i, c = u(x), a = "left") : (c = u(g), a = "edge") : c = Math.min(c, y);
-    T({
+      const b = e.right + i + r.width <= t.right - 12, z = e.left - i - r.width >= t.left + 12;
+      a = o.placement, a === "right" && !b && z ? a = "left" : a === "left" && !z && b && (a = "right"), p = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), c = g(e.top + e.height / 2 - r.height / 2);
+    } else u < d ? e.bottom + i <= y ? (c = e.bottom + i, a = "below") : u >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (c = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (p = e.right + i, c = g(x), a = "right") : e.left - r.width - i - 12 >= t.left ? (p = e.left - r.width - i, c = g(x), a = "left") : (c = g(u), a = "edge") : c = Math.min(c, y);
+    W({
       x: Math.max(18, Math.min(e.left + e.width / 2 - p, Math.max(18, r.width - 18))),
       y: Math.max(18, Math.min(e.top + e.height / 2 - c, Math.max(18, r.height - 18)))
-    }), Y(a), B({
+    }), V(a), q({
       x: Math.round(p),
       y: Math.round(c)
     }), v(e.right > t.left && e.left < t.right && e.bottom > t.top && e.top < t.bottom);
   }, h = () => {
-    d === void 0 && typeof requestAnimationFrame == "function" && (d = requestAnimationFrame(G));
+    m === void 0 && typeof requestAnimationFrame == "function" && (m = requestAnimationFrame(S));
   };
   return M(() => {
     o.anchor, o.revision, o.topOffset, o.reservedSpace, o.placement, o.gap, h();
   }), M(() => {
-    const n = S();
+    const n = O();
     if (!n || typeof ResizeObserver > "u") return;
     const l = new ResizeObserver(h);
     l.observe(n), R(() => l.disconnect());
-  }), Q(() => H(!0)), M(() => {
-    if (!O()) return;
+  }), Q(() => $(!0)), M(() => {
+    if (!A()) return;
     const n = o.anchor, l = typeof ResizeObserver == "function" ? new ResizeObserver(h) : void 0, t = E({
       owner: n
     }).boundaryHost;
@@ -74,46 +74,48 @@ function ae(L) {
       childList: !0
     }), s !== t); )
       s = s.parentElement;
-    const m = _(window, h);
+    const d = ee(window, h);
     window.addEventListener("scroll", h, !0), h(), R(() => {
-      l?.disconnect(), e.disconnect(), m(), window.removeEventListener("scroll", h, !0);
+      l?.disconnect(), e.disconnect(), d(), window.removeEventListener("scroll", h, !0);
     });
   }), R(() => {
-    d !== void 0 && cancelAnimationFrame(d);
-  }), F(U, {
+    m !== void 0 && cancelAnimationFrame(m);
+  }), C(U, {
     get when() {
-      return K(() => !!O())() && o.anchor;
+      return K(() => !!A())() && o.anchor;
     },
     get children() {
-      return F(X, J(C, {
+      return C(Z, J(H, {
         get owner() {
           return o.anchor;
         },
         get position() {
-          return $();
+          return k();
         },
         get class() {
           return o.class;
         },
         get "data-placement"() {
-          return V();
+          return B();
         },
         get inert() {
-          return !P();
+          return !F();
         },
         get style() {
           return {
             ...o.style,
-            "--floe-anchored-layer-anchor-x": `${z().x}px`,
-            "--floe-anchored-layer-anchor-y": `${z().y}px`,
-            "--floe-anchored-layer-max-height": `${W()}px`,
-            visibility: P() ? "visible" : "hidden",
-            "max-width": `${q()}px`,
+            "--floe-anchored-layer-anchor-x": `${P().x}px`,
+            "--floe-anchored-layer-anchor-y": `${P().y}px`,
+            "--floe-anchored-layer-max-height": `${j()}px`,
+            visibility: F() ? "visible" : "hidden",
+            "max-width": `${Y()}px`,
             "z-index": o.style?.["z-index"] ?? 60
           };
         },
         layerRef: (n) => {
-          k(n), o.layerRef?.(n), h();
+          T(n), o.layerRef?.(n), queueMicrotask(() => X(() => {
+            n.isConnected && (m !== void 0 && cancelAnimationFrame(m), S());
+          }));
         },
         get children() {
           return o.children;
@@ -123,5 +125,5 @@ function ae(L) {
   });
 }
 export {
-  ae as SurfaceAnchoredLayer
+  se as SurfaceAnchoredLayer
 };