@floegence/floe-webapp-core 0.36.34 → 0.36.35

package/dist/components/ui/Dialog.js

@@ -1,142 +1,192 @@
-import { createComponent as n, Portal as D, setAttribute as u, spread as x, mergeProps as $, memo as C, insert as l, effect as S, template as c, use as E } from "solid-js/web";
-import { createUniqueId as M, createMemo as T, Show as s } from "solid-js";
-import { cn as _ } from "../../utils/cn.js";
-import { Button as y } from "./Button.js";
-import { X as P } from "../icons/index.js";
-import { useResolvedFloeConfig as j } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as z } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as F, projectSurfacePortalRect as H, resolveSurfacePortalBoundaryRect as N, DIALOG_SURFACE_BOUNDARY_ATTR as h, isSurfacePortalMode as U, resolveSurfacePortalMount as L } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as W } from "./localInteractionSurface.js";
-var q = /* @__PURE__ */ c('<h2 class="text-sm font-semibold">'), G = /* @__PURE__ */ c('<p class="mt-0.5 text-xs text-muted-foreground">'), X = /* @__PURE__ */ c('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), Y = /* @__PURE__ */ c('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), J = /* @__PURE__ */ c('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), K = /* @__PURE__ */ c("<div>");
-function Q(e) {
-  const o = M(), w = () => `dialog-${o}-title`, k = () => `dialog-${o}-description`;
-  let b;
-  const f = T(() => e.open ? F() : {
+import { createComponent as n, use as D, setAttribute as s, style as K, Portal as W, spread as A, mergeProps as O, memo as R, insert as d, effect as E, template as u } from "solid-js/web";
+import { createUniqueId as Y, createSignal as k, createMemo as I, createEffect as X, onCleanup as J, Show as g, untrack as Q } from "solid-js";
+import { cn as S } from "../../utils/cn.js";
+import { Button as P } from "./Button.js";
+import { X as Z } from "../icons/index.js";
+import { useResolvedFloeConfig as ee } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as te } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as re, isSurfacePortalMode as F, DIALOG_SURFACE_BOUNDARY_ATTR as x, projectSurfacePortalRect as ne, resolveSurfacePortalBoundaryRect as oe, resolveSurfacePortalMount as ie } from "./dialogSurfaceScope.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as le } from "./localInteractionSurface.js";
+var ae = /* @__PURE__ */ u("<span aria-hidden=true>"), de = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), ce = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), ue = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), se = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), fe = /* @__PURE__ */ u('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), me = /* @__PURE__ */ u("<div>");
+const ge = {
+  display: "none"
+};
+function he(e) {
+  if (typeof queueMicrotask == "function") {
+    queueMicrotask(e);
+    return;
+  }
+  Promise.resolve().then(e);
+}
+function M(e) {
+  return `${e.left}|${e.top}|${e.right}|${e.bottom}|${e.width}|${e.height}`;
+}
+function we(e) {
+  return typeof window < "u" && typeof window.requestAnimationFrame == "function" ? window.requestAnimationFrame(e) : window.setTimeout(() => e(Date.now()), 16);
+}
+function be(e) {
+  if (typeof window < "u" && typeof window.cancelAnimationFrame == "function") {
+    window.cancelAnimationFrame(e);
+    return;
+  }
+  window.clearTimeout(e);
+}
+function ve(e) {
+  const o = Y(), T = () => `dialog-${o}-title`, B = () => `dialog-${o}-description`;
+  let p;
+  const [_, H] = k(null), [N, j] = k(0), [q, G] = k(0), h = () => e.open && !!_() && N() > 0, z = (t) => {
+    H(t), he(() => {
+      Q(_) === t && j((l) => l + 1);
+    });
+  }, w = I(() => h() ? re({
+    owner: _()
+  }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), g = () => `dialog-boundary-${o}`, t = () => U(f()), A = () => L(f()), m = T(() => H(N(f()), f())), B = (r) => typeof Element < "u" && r instanceof Element ? !!r.closest(`[${h}="${g()}"]`) : typeof Node < "u" && r instanceof Node ? !!r.parentElement?.closest(`[${h}="${g()}"]`) : !1;
-  return z({
-    open: () => e.open,
-    root: () => b,
-    containsTarget: (r) => t() && B(r),
+  }), b = () => `dialog-boundary-${o}`, r = () => F(w()), L = () => ie(w()), C = (t) => ne(oe(t), t), U = () => C(w()), v = I(() => (q(), U())), V = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${x}="${b()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${x}="${b()}"]`) : !1;
+  return X(() => {
+    const t = w();
+    if (!h() || !F(t) || typeof window > "u")
+      return;
+    let l = !1, f = null, i = M(C(t));
+    const y = () => {
+      if (l || !F(t))
+        return;
+      const a = M(C(t));
+      a !== i && (i = a, G(($) => $ + 1));
+    }, m = () => {
+      l || (f = we(() => {
+        y(), m();
+      }));
+    };
+    m(), J(() => {
+      l = !0, f !== null && be(f);
+    });
+  }), te({
+    open: h,
+    root: () => p,
+    containsTarget: (t) => r() && V(t),
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: () => !t(),
+    lockBodyScroll: () => !r(),
     trapFocus: !0,
-    closeOnEscape: () => t() ? "inside" : !0,
+    closeOnEscape: () => r() ? "inside" : !0,
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: () => t() ? "none" : "outside",
-    blockTouchMove: () => t() ? "none" : "outside",
+    blockWheel: () => r() ? "none" : "outside",
+    blockTouchMove: () => r() ? "none" : "outside",
     restoreFocus: !0
-  }), n(s, {
+  }), [(() => {
+    var t = ae();
+    return D(z, t), s(t, "data-floe-dialog-owner-anchor", o), K(t, ge), t;
+  })(), n(g, {
     get when() {
-      return e.open;
+      return h();
     },
     get children() {
-      return n(D, {
+      return n(W, {
         get mount() {
-          return A();
+          return L();
         },
         get children() {
-          var r = J(), v = r.firstChild, I = v.nextSibling, i = I.firstChild, p = i.firstChild;
-          u(r, "data-floe-dialog-overlay-root", o), x(r, $({
+          var t = fe(), l = t.firstChild, f = l.nextSibling, i = f.firstChild, y = i.firstChild;
+          s(t, "data-floe-dialog-overlay-root", o), A(t, O({
             get "data-floe-dialog-mode"() {
-              return t() ? "surface" : "global";
+              return r() ? "surface" : "global";
             }
           }, () => ({
-            [W]: t() ? "true" : void 0
+            [le]: r() ? "true" : void 0
           }), {
             get class() {
-              return _(t() ? "absolute z-20 box-border p-3" : "fixed inset-0 box-border z-50 p-4");
+              return S(r() ? "absolute z-20 box-border p-3" : "fixed inset-0 box-border z-50 p-4");
             },
             get style() {
-              return C(() => !!t())() ? {
-                left: `${m().left}px`,
-                top: `${m().top}px`,
-                width: `${m().width}px`,
-                height: `${m().height}px`
+              return R(() => !!r())() ? {
+                left: `${v().left}px`,
+                top: `${v().top}px`,
+                width: `${v().width}px`,
+                height: `${v().height}px`
               } : void 0;
             }
-          }), !1, !0), u(v, "data-floe-dialog-backdrop", o), x(v, $(() => ({
-            [h]: g()
+          }), !1, !0), s(l, "data-floe-dialog-backdrop", o), A(l, O(() => ({
+            [x]: b()
           }), {
             get class() {
-              return _("absolute inset-0 cursor-pointer animate-in fade-in", t() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return S("absolute inset-0 cursor-pointer animate-in fade-in", r() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => e.onOpenChange(!1)
           }), !1, !1);
-          var O = b;
-          return typeof O == "function" ? E(O, i) : b = i, u(i, "data-floe-dialog-panel", o), x(i, $(() => ({
-            [h]: g()
+          var m = p;
+          return typeof m == "function" ? D(m, i) : p = i, s(i, "data-floe-dialog-panel", o), A(i, O(() => ({
+            [x]: b()
           }), {
             get class() {
-              return _(t() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
+              return S(r() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
             },
             role: "dialog",
             get "aria-modal"() {
-              return t() ? void 0 : "true";
+              return r() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return C(() => !!e.title)() ? w() : void 0;
+              return R(() => !!e.title)() ? T() : void 0;
             },
             get "aria-describedby"() {
-              return C(() => !!e.description)() ? k() : void 0;
+              return R(() => !!e.description)() ? B() : void 0;
             },
             tabIndex: -1
-          }), !1, !0), l(i, n(s, {
+          }), !1, !0), d(i, n(g, {
             get when() {
               return e.title || e.description;
             },
             get children() {
-              var d = X(), R = d.firstChild;
-              return l(R, n(s, {
+              var a = ue(), $ = a.firstChild;
+              return d($, n(g, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var a = q();
-                  return l(a, () => e.title), S(() => u(a, "id", w())), a;
+                  var c = de();
+                  return d(c, () => e.title), E(() => s(c, "id", T())), c;
                 }
-              }), null), l(R, n(s, {
+              }), null), d($, n(g, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var a = G();
-                  return l(a, () => e.description), S(() => u(a, "id", k())), a;
+                  var c = ce();
+                  return d(c, () => e.description), E(() => s(c, "id", B())), c;
                 }
-              }), null), l(d, n(y, {
+              }), null), d(a, n(P, {
                 variant: "ghost-destructive",
                 size: "icon",
                 class: "h-6 w-6 -mr-1",
                 onClick: () => e.onOpenChange(!1),
                 "aria-label": "Close",
                 get children() {
-                  return n(P, {
+                  return n(Z, {
                     class: "w-3.5 h-3.5"
                   });
                 }
-              }), null), d;
+              }), null), a;
             }
-          }), p), l(p, () => e.children), l(i, n(s, {
+          }), y), d(y, () => e.children), d(i, n(g, {
             get when() {
               return e.footer;
             },
             get children() {
-              var d = Y();
-              return l(d, () => e.footer), d;
+              var a = se();
+              return d(a, () => e.footer), a;
             }
-          }), null), r;
+          }), null), t;
         }
       });
     }
-  });
+  })];
 }
-function ae(e) {
-  const o = j();
-  return n(Q, {
+function ke(e) {
+  const o = ee();
+  return n(ve, {
     get open() {
       return e.open;
     },
@@ -150,7 +200,7 @@ function ae(e) {
       return e.description;
     },
     get footer() {
-      return [n(y, {
+      return [n(P, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
@@ -159,7 +209,7 @@ function ae(e) {
         get children() {
           return e.cancelText ?? o.config.strings.confirmDialog.cancel;
         }
-      }), n(y, {
+      }), n(P, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -175,11 +225,11 @@ function ae(e) {
       })];
     },
     get children() {
-      return e.children ?? K();
+      return e.children ?? me();
     }
   });
 }
 export {
-  ae as ConfirmDialog,
-  Q as Dialog
+  ke as ConfirmDialog,
+  ve as Dialog
 };

package/dist/components/ui/dialogSurfaceScope.d.ts

@@ -19,10 +19,13 @@ export type ResolvedDialogSurfaceHost = Readonly<{
 export type ResolvedSurfacePortalHost = ResolvedDialogSurfaceHost;
 export type SurfacePortalBoundaryRect = SurfacePortalRect;
 export type { SurfacePortalRect };
+export type SurfacePortalHostResolutionOptions = Readonly<{
+    owner?: Element | null;
+}>;
 export declare function ensureDialogSurfaceInteractionTracking(): void;
 export declare function ensureSurfacePortalInteractionTracking(): void;
-export declare function resolveDialogSurfaceHost(): ResolvedDialogSurfaceHost;
-export declare function resolveSurfacePortalHost(): ResolvedSurfacePortalHost;
+export declare function resolveDialogSurfaceHost(options?: SurfacePortalHostResolutionOptions): ResolvedDialogSurfaceHost;
+export declare function resolveSurfacePortalHost(options?: SurfacePortalHostResolutionOptions): ResolvedSurfacePortalHost;
 export declare function isSurfacePortalMode(surfaceHost: ResolvedSurfacePortalHost): boolean;
 export declare function resolveSurfacePortalMount(surfaceHost: ResolvedSurfacePortalHost): HTMLElement | undefined;
 export declare function resolveSurfacePortalBoundaryRect(surfaceHost: ResolvedSurfacePortalHost): SurfacePortalBoundaryRect;

package/dist/components/ui/dialogSurfaceScope.js

@@ -3,52 +3,52 @@ let r = null, o = null;
 function E(t) {
   return typeof Element < "u" && t instanceof Element ? t : typeof Node < "u" && t instanceof Node ? t.parentElement : null;
 }
-function T(t) {
+function w(t) {
   const e = t?.activeElement;
   return e instanceof Element ? e : null;
 }
-function i(t) {
+function l(t) {
   const e = typeof document < "u" ? document : null;
   r = {
     target: E(t),
-    activeElement: T(e),
+    activeElement: w(e),
     recordedAt: Date.now()
   };
 }
-function l(t) {
-  i(t.target);
-}
 function c(t) {
-  i(t.target);
+  l(t.target);
+}
+function f(t) {
+  l(t.target);
 }
 function d(t) {
-  i(t.target);
+  l(t.target);
 }
 function s() {
-  w();
+  T();
 }
-function w() {
-  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", l, !0), o.removeEventListener("focusin", c, !0), o.removeEventListener("contextmenu", d, !0)), document.addEventListener("pointerdown", l, !0), document.addEventListener("focusin", c, !0), document.addEventListener("contextmenu", d, !0), o = document);
+function T() {
+  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", c, !0), o.removeEventListener("focusin", f, !0), o.removeEventListener("contextmenu", d, !0)), document.addEventListener("pointerdown", c, !0), document.addEventListener("focusin", f, !0), document.addEventListener("contextmenu", d, !0), o = document);
 }
 function R() {
   return !r || Date.now() - r.recordedAt > g ? null : r;
 }
-function f(t) {
+function i(t) {
   const e = t?.closest(`[${a}="true"]`);
-  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
 function S(t) {
   if (!t) return null;
   const e = t.closest(`[${p}="true"]`);
-  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement && e.isConnected ? e : null;
+  return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
-function L() {
+function L(t = {}) {
   s();
-  const t = R(), e = f(t?.target ?? null) ?? f(t?.activeElement ?? null);
-  return e ? {
-    host: e,
-    boundaryHost: e,
-    mountHost: S(e) ?? e,
+  const e = R(), n = i(t.owner ?? null) ?? i(e?.target ?? null) ?? i(e?.activeElement ?? null);
+  return n ? {
+    host: n,
+    boundaryHost: n,
+    mountHost: S(n) ?? n,
     mode: "surface"
   } : { host: null, boundaryHost: null, mountHost: null, mode: "global" };
 }
@@ -112,7 +112,7 @@ function b(t, e) {
     y: t.y - n.top
   };
 }
-function C(t, e) {
+function P(t, e) {
   if (!u(e))
     return t;
   const n = h(e);
@@ -125,7 +125,7 @@ function C(t, e) {
     height: t.height
   };
 }
-function P() {
+function C() {
   r = null;
 }
 typeof document < "u" && s();
@@ -134,12 +134,12 @@ export {
   a as DIALOG_SURFACE_HOST_ATTR,
   y as SURFACE_PORTAL_HOST_ATTR,
   p as SURFACE_PORTAL_LAYER_ATTR,
-  P as __resetSurfacePortalScopeForTests,
+  C as __resetSurfacePortalScopeForTests,
   s as ensureDialogSurfaceInteractionTracking,
-  w as ensureSurfacePortalInteractionTracking,
+  T as ensureSurfacePortalInteractionTracking,
   u as isSurfacePortalMode,
   b as projectSurfacePortalPosition,
-  C as projectSurfacePortalRect,
+  P as projectSurfacePortalRect,
   _ as resolveSurfacePortalBoundaryRect,
   L as resolveSurfacePortalHost,
   v as resolveSurfacePortalMount,

package/dist/components/ui/surfacePortalScope.d.ts

@@ -1 +1 @@
-export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalHostResolutionOptions, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.34",
+  "version": "0.36.35",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",