@floegence/floe-webapp-core 0.36.12 → 0.36.15

package/dist/components/ui/Dialog.js

@@ -1,23 +1,25 @@
-import { createComponent as n, Portal as R, setAttribute as s, spread as v, mergeProps as C, memo as T, insert as l, effect as A, template as c, use as E } from "solid-js/web";
-import { createUniqueId as S, createMemo as p, Show as u } from "solid-js";
-import { cn as x } from "../../utils/cn.js";
-import { Button as $ } from "./Button.js";
-import { X as z } from "../icons/index.js";
-import { useResolvedFloeConfig as F } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as M } from "../../hooks/useOverlayMask.js";
-import { resolveDialogSurfaceHost as N, DIALOG_SURFACE_BOUNDARY_ATTR as g } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as U } from "./localInteractionSurface.js";
-var j = /* @__PURE__ */ c('<h2 class="text-sm font-semibold">'), H = /* @__PURE__ */ c('<p class="mt-0.5 text-xs text-muted-foreground">'), L = /* @__PURE__ */ c('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), P = /* @__PURE__ */ c('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), W = /* @__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">'), q = /* @__PURE__ */ c("<div>");
-function G(e) {
-  const o = S(), _ = () => `dialog-${o}-title`, w = () => `dialog-${o}-description`;
-  let m;
-  const h = p(() => e.open ? N() : {
+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() : {
     host: null,
+    boundaryHost: null,
+    mountHost: null,
     mode: "global"
-  }), f = () => `dialog-boundary-${o}`, t = () => h().mode === "surface" && !!h().host?.isConnected, I = () => h().host ?? void 0, B = (r) => typeof Element < "u" && r instanceof Element ? !!r.closest(`[${g}="${f()}"]`) : typeof Node < "u" && r instanceof Node ? !!r.parentElement?.closest(`[${g}="${f()}"]`) : !1;
-  return M({
+  }), 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: () => m,
+    root: () => b,
     containsTarget: (r) => t() && B(r),
     onClose: () => e.onOpenChange(!1),
     lockBodyScroll: () => !t(),
@@ -28,94 +30,102 @@ function G(e) {
     blockWheel: () => t() ? "none" : "outside",
     blockTouchMove: () => t() ? "none" : "outside",
     restoreFocus: !0
-  }), n(u, {
+  }), n(s, {
     get when() {
       return e.open;
     },
     get children() {
-      return n(R, {
+      return n(D, {
         get mount() {
-          return I();
+          return A();
         },
         get children() {
-          var r = W(), b = r.firstChild, D = b.nextSibling, i = D.firstChild, y = i.firstChild;
-          s(r, "data-floe-dialog-overlay-root", o), v(r, C({
+          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, $({
             get "data-floe-dialog-mode"() {
               return t() ? "surface" : "global";
             }
           }, () => ({
-            [U]: t() ? "true" : void 0
+            [W]: t() ? "true" : void 0
           }), {
             get class() {
-              return x(t() ? "absolute inset-0 z-20 p-3" : "fixed inset-0 z-50 p-4");
+              return _(t() ? "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`
+              } : void 0;
             }
-          }), !1, !0), s(b, "data-floe-dialog-backdrop", o), v(b, C(() => ({
-            [g]: f()
+          }), !1, !0), u(v, "data-floe-dialog-backdrop", o), x(v, $(() => ({
+            [h]: g()
           }), {
             get class() {
-              return x("absolute inset-0 cursor-pointer animate-in fade-in", t() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return _("absolute inset-0 cursor-pointer animate-in fade-in", t() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => e.onOpenChange(!1)
           }), !1, !1);
-          var k = m;
-          return typeof k == "function" ? E(k, i) : m = i, s(i, "data-floe-dialog-panel", o), v(i, C(() => ({
-            [g]: f()
+          var O = b;
+          return typeof O == "function" ? E(O, i) : b = i, u(i, "data-floe-dialog-panel", o), x(i, $(() => ({
+            [h]: g()
           }), {
             get class() {
-              return x(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 _(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);
             },
             role: "dialog",
             get "aria-modal"() {
               return t() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return T(() => !!e.title)() ? _() : void 0;
+              return C(() => !!e.title)() ? w() : void 0;
             },
             get "aria-describedby"() {
-              return T(() => !!e.description)() ? w() : void 0;
+              return C(() => !!e.description)() ? k() : void 0;
             },
             tabIndex: -1
-          }), !1, !0), l(i, n(u, {
+          }), !1, !0), l(i, n(s, {
             get when() {
               return e.title || e.description;
             },
             get children() {
-              var d = L(), O = d.firstChild;
-              return l(O, n(u, {
+              var d = X(), R = d.firstChild;
+              return l(R, n(s, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var a = j();
-                  return l(a, () => e.title), A(() => s(a, "id", _())), a;
+                  var a = q();
+                  return l(a, () => e.title), S(() => u(a, "id", w())), a;
                 }
-              }), null), l(O, n(u, {
+              }), null), l(R, n(s, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var a = H();
-                  return l(a, () => e.description), A(() => s(a, "id", w())), a;
+                  var a = G();
+                  return l(a, () => e.description), S(() => u(a, "id", k())), a;
                 }
-              }), null), l(d, n($, {
+              }), null), l(d, n(y, {
                 variant: "ghost-destructive",
                 size: "icon",
                 class: "h-6 w-6 -mr-1",
                 onClick: () => e.onOpenChange(!1),
                 "aria-label": "Close",
                 get children() {
-                  return n(z, {
+                  return n(P, {
                     class: "w-3.5 h-3.5"
                   });
                 }
               }), null), d;
             }
-          }), y), l(y, () => e.children), l(i, n(u, {
+          }), p), l(p, () => e.children), l(i, n(s, {
             get when() {
               return e.footer;
             },
             get children() {
-              var d = P();
+              var d = Y();
               return l(d, () => e.footer), d;
             }
           }), null), r;
@@ -124,9 +134,9 @@ function G(e) {
     }
   });
 }
-function re(e) {
-  const o = F();
-  return n(G, {
+function ae(e) {
+  const o = j();
+  return n(Q, {
     get open() {
       return e.open;
     },
@@ -140,7 +150,7 @@ function re(e) {
       return e.description;
     },
     get footer() {
-      return [n($, {
+      return [n(y, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
@@ -149,7 +159,7 @@ function re(e) {
         get children() {
           return e.cancelText ?? o.config.strings.confirmDialog.cancel;
         }
-      }), n($, {
+      }), n(y, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -165,11 +175,11 @@ function re(e) {
       })];
     },
     get children() {
-      return e.children ?? q();
+      return e.children ?? K();
     }
   });
 }
 export {
-  re as ConfirmDialog,
-  G as Dialog
+  ae as ConfirmDialog,
+  Q as Dialog
 };