@floegence/floe-webapp-core 0.73.0 → 0.74.2

package/dist/components/ui/Dialog.js

@@ -1,5 +1,5 @@
-import { createComponent as o, use as G, setAttribute as f, style as ne, Portal as ae, spread as I, mergeProps as M, memo as C, insert as i, effect as D, className as q, template as m } from "solid-js/web";
-import { createSignal as P, onMount as ie, onCleanup as E, createUniqueId as le, createEffect as K, createMemo as U, Show as g, untrack as V } from "solid-js";
+import { createComponent as o, use as G, setAttribute as f, style as ne, Portal as ae, spread as I, mergeProps as M, memo as C, insert as l, effect as S, className as q, template as m } from "solid-js/web";
+import { createSignal as D, onMount as ie, onCleanup as E, createUniqueId as le, createEffect as K, createMemo as U, Show as g, untrack as V } from "solid-js";
 import { cn as y } from "../../utils/cn.js";
 import { Button as j } from "./Button.js";
 import { X as de } from "../icons/index.js";
@@ -11,11 +11,11 @@ import { createFloatingPresence as we } from "./floatingPresence.js";
 import { useDialogPlacement as ye } from "./DialogPlacementContext.js";
 import { observeViewport as xe, viewportStyle as pe } from "../../viewport.js";
 import { resolveFloatingBoundary as $e } from "./surfaceFloatingBoundary.js";
-var Ae = /* @__PURE__ */ m("<span aria-hidden=true>"), Ce = /* @__PURE__ */ m('<h2 class="text-sm font-semibold">'), _e = /* @__PURE__ */ m('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between p-3 border-b border-border"><div>'), ke = /* @__PURE__ */ m('<p class="mb-3 shrink-0 text-sm text-muted-foreground last:mb-0">'), Oe = /* @__PURE__ */ m('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-2 p-3 border-t border-border">'), Re = /* @__PURE__ */ m("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), De = /* @__PURE__ */ m("<h2 class=sr-only>");
-const Pe = {
+var Ae = /* @__PURE__ */ m("<span aria-hidden=true>"), Ce = /* @__PURE__ */ m('<h2 class="text-sm font-semibold">'), _e = /* @__PURE__ */ m('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between p-3 border-b border-border"><div>'), ke = /* @__PURE__ */ m('<p class="mb-3 shrink-0 text-sm text-muted-foreground last:mb-0">'), Oe = /* @__PURE__ */ m('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-2 p-3 border-t border-border">'), Re = /* @__PURE__ */ m("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Se = /* @__PURE__ */ m("<h2 class=sr-only>");
+const De = {
   display: "none"
 };
-function Se(e) {
+function Pe(e) {
   if (typeof queueMicrotask == "function") {
     queueMicrotask(e);
     return;
@@ -36,11 +36,11 @@ function Be(e) {
   window.clearTimeout(e);
 }
 function Fe(e) {
-  const x = ye(), [d, W] = P();
+  const x = ye(), [n, W] = D();
   ie(() => E(xe(window, W)));
-  const c = le(), S = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
+  const c = le(), P = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
   let T;
-  const [k, Y] = P(null), [L, X] = P(0), [J, Q] = P(0), B = () => e.presentation === "side-drawer", u = () => e.presentation === "bottom-drawer", s = we({
+  const [k, Y] = D(null), [L, X] = D(0), [J, Q] = D(0), B = () => e.presentation === "side-drawer", u = () => e.presentation === "bottom-drawer", s = we({
     open: () => e.open && !!k() && L() > 0,
     get exitDurationMs() {
       return u() ? 180 : 160;
@@ -48,8 +48,8 @@ function Fe(e) {
   }), p = () => s.mounted() && !!k() && L() > 0;
   K(() => e.onPresenceChange?.(p())), E(() => e.onPresenceChange?.(!1));
   const ee = (t) => {
-    Y(t), Se(() => {
-      V(k) === t && X((l) => l + 1);
+    Y(t), Pe(() => {
+      V(k) === t && X((d) => d + 1);
     });
   }, O = U(() => p() ? ue({
     owner: k()
@@ -58,42 +58,42 @@ function Fe(e) {
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), $ = () => `dialog-boundary-${c}`, n = () => x.mode() === "auto" && z(O()), te = () => n() ? be(O()) : void 0, N = () => e.globalZIndex ?? x.globalZIndex(), F = (t) => me($e(t, void 0, V(d)?.safeArea) ?? he(t), t), re = () => F(O()), R = U(() => (J(), d(), re())), oe = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${_}="${$()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${_}="${$()}"]`) : !1;
+  }), $ = () => `dialog-boundary-${c}`, a = () => x.mode() === "auto" && z(O()), te = () => a() ? be(O()) : void 0, N = () => e.globalZIndex ?? x.globalZIndex(), F = (t) => me($e(t, void 0, V(n)?.safeArea) ?? he(t), t), re = () => F(O()), R = U(() => (J(), n(), re())), oe = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${_}="${$()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${_}="${$()}"]`) : !1;
   return K(() => {
     const t = O();
-    if (!p() || !n() || typeof window > "u")
+    if (!p() || !a() || typeof window > "u")
       return;
-    let l = !1, h = null, a = Z(F(t));
+    let d = !1, h = null, i = Z(F(t));
     const b = () => {
-      if (l || !z(t))
+      if (d || !z(t))
         return;
       const r = Z(F(t));
-      r !== a && (a = r, Q((v) => v + 1));
+      r !== i && (i = r, Q((v) => v + 1));
     }, A = () => {
-      l || (h = Te(() => {
+      d || (h = Te(() => {
         b(), A();
       }));
     };
     A(), E(() => {
-      l = !0, h !== null && Be(h);
+      d = !0, h !== null && Be(h);
     });
   }), ce({
     open: p,
     root: () => T,
     containsTarget: oe,
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: () => !n(),
+    lockBodyScroll: () => !a(),
     trapFocus: !0,
-    closeOnEscape: () => n() ? "inside" : !0,
+    closeOnEscape: () => a() ? "inside" : !0,
     escapeKeyPhase: () => e.escapeKeyPhase ?? "capture",
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: () => n() ? "none" : "outside",
-    blockTouchMove: () => n() ? "none" : "outside",
+    blockWheel: () => a() ? "none" : "outside",
+    blockTouchMove: () => a() ? "none" : "outside",
     restoreFocus: !0
   }), [(() => {
     var t = Ae();
-    return G(ee, t), f(t, "data-floe-dialog-owner-anchor", c), ne(t, Pe), t;
+    return G(ee, t), f(t, "data-floe-dialog-owner-anchor", c), ne(t, De), t;
   })(), o(g, {
     get when() {
       return p();
@@ -104,10 +104,10 @@ function Fe(e) {
           return te();
         },
         get children() {
-          var t = Re(), l = t.firstChild, h = l.nextSibling, a = h.firstChild, b = a.firstChild;
+          var t = Re(), d = t.firstChild, h = d.nextSibling, i = h.firstChild, b = i.firstChild;
           f(t, "data-floe-dialog-overlay-root", c), I(t, M({
             get "data-floe-dialog-mode"() {
-              return n() ? "surface" : "global";
+              return a() ? "surface" : "global";
             },
             get "data-floe-dialog-presentation"() {
               return e.presentation ?? "dialog";
@@ -125,22 +125,22 @@ function Fe(e) {
             [_]: $()
           }), {
             get class() {
-              return y(n() ? "absolute z-20 box-border p-3" : y("fixed box-border p-4", N() === void 0 && "z-50"), u() && "floe-bottom-drawer-overlay", B() && "floe-side-drawer-overlay", s.exiting() && !u() && "pointer-events-none");
+              return y(a() ? "absolute z-20 box-border p-3" : y("fixed box-border p-4", N() === void 0 && "z-50"), u() && "floe-bottom-drawer-overlay", B() && "floe-side-drawer-overlay", s.exiting() && !u() && "pointer-events-none");
             },
             get style() {
-              return C(() => !!n())() ? {
+              return C(() => !!a())() ? {
                 left: `${R().left}px`,
                 top: `${R().top}px`,
                 width: `${R().width}px`,
                 height: `${R().height}px`
               } : {
-                ...d() ? pe(d()) : {
+                ...n() ? pe(n()) : {
                   inset: "0"
                 },
-                "--floe-dialog-safe-top": `${d()?.safeArea.top ?? 0}px`,
-                "--floe-dialog-safe-right": `${d()?.safeArea.right ?? 0}px`,
-                "--floe-dialog-safe-bottom": `${d()?.safeArea.bottom ?? 0}px`,
-                "--floe-dialog-safe-left": `${d()?.safeArea.left ?? 0}px`,
+                "--floe-dialog-safe-top": `${(n()?.safeArea.top ?? 0) / (n()?.fixedScale ?? 1)}px`,
+                "--floe-dialog-safe-right": `${(n()?.safeArea.right ?? 0) / (n()?.fixedScale ?? 1)}px`,
+                "--floe-dialog-safe-bottom": `${(n()?.safeArea.bottom ?? 0) / (n()?.fixedScale ?? 1)}px`,
+                "--floe-dialog-safe-left": `${(n()?.safeArea.left ?? 0) / (n()?.fixedScale ?? 1)}px`,
                 "padding-top": "max(var(--floe-dialog-gap-y, 1rem), var(--floe-dialog-safe-top))",
                 "padding-right": "max(var(--floe-dialog-gap-x, 1rem), var(--floe-dialog-safe-right))",
                 "padding-bottom": "max(var(--floe-dialog-gap-y, 1rem), var(--floe-dialog-safe-bottom))",
@@ -148,26 +148,26 @@ function Fe(e) {
                 "z-index": N()
               };
             }
-          }), !1, !0), f(l, "data-floe-dialog-backdrop", c), I(l, M(() => ({
+          }), !1, !0), f(d, "data-floe-dialog-backdrop", c), I(d, M(() => ({
             [_]: $()
           }), {
             get "data-floating-presence"() {
               return s.state();
             },
             get class() {
-              return y("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", u() ? "floe-bottom-drawer-backdrop" : n() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return y("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", u() ? "floe-bottom-drawer-backdrop" : a() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => {
               !s.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
             }
           }), !1, !1);
           var A = T;
-          return typeof A == "function" ? G(A, a) : T = a, f(a, "data-floe-dialog-panel", c), I(a, M(() => ({
+          return typeof A == "function" ? G(A, i) : T = i, f(i, "data-floe-dialog-panel", c), I(i, M(() => ({
             [_]: $(),
             [ge]: "true"
           }), {
             get class() {
-              return y(n() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence", u() ? "floe-bottom-drawer-panel" : B() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
+              return y(a() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence", u() ? "floe-bottom-drawer-panel" : B() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
             },
             style: {
               "max-height": "100%",
@@ -182,17 +182,17 @@ function Fe(e) {
             },
             role: "dialog",
             get "aria-modal"() {
-              return n() ? void 0 : "true";
+              return a() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return C(() => !!e.title)() ? S() : void 0;
+              return C(() => !!e.title)() ? P() : void 0;
             },
             get "aria-describedby"() {
               return C(() => !!e.bodyDescription)() ? H() : void 0;
             },
             onKeyDown: (r) => e.onKeyDown?.(r),
             tabIndex: -1
-          }), !1, !0), i(a, o(g, {
+          }), !1, !0), l(i, o(g, {
             get when() {
               return e.header === void 0;
             },
@@ -202,8 +202,8 @@ function Fe(e) {
                   return e.title;
                 },
                 get children() {
-                  var r = De();
-                  return i(r, () => e.title), D(() => f(r, "id", S())), r;
+                  var r = Se();
+                  return l(r, () => e.title), S(() => f(r, "id", P())), r;
                 }
               }), C(() => e.header)];
             },
@@ -214,15 +214,15 @@ function Fe(e) {
                 },
                 get children() {
                   var r = _e(), v = r.firstChild;
-                  return i(v, o(g, {
+                  return l(v, o(g, {
                     get when() {
                       return e.title;
                     },
                     get children() {
                       var w = Ce();
-                      return i(w, () => e.title), D(() => f(w, "id", S())), w;
+                      return l(w, () => e.title), S(() => f(w, "id", P())), w;
                     }
-                  })), i(r, o(j, {
+                  })), l(r, o(j, {
                     variant: "ghost-destructive",
                     size: "icon",
                     class: "-my-2 -mr-2 h-[46px] w-[46px] shrink-0 sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
@@ -239,23 +239,23 @@ function Fe(e) {
                 }
               });
             }
-          }), b), i(b, o(g, {
+          }), b), l(b, o(g, {
             get when() {
               return e.bodyDescription;
             },
             get children() {
               var r = ke();
-              return i(r, () => e.bodyDescription), D(() => f(r, "id", H())), r;
+              return l(r, () => e.bodyDescription), S(() => f(r, "id", H())), r;
             }
-          }), null), i(b, () => e.children, null), i(a, o(g, {
+          }), null), l(b, () => e.children, null), l(i, o(g, {
             get when() {
               return e.footer;
             },
             get children() {
               var r = Oe();
-              return i(r, () => e.footer), r;
+              return l(r, () => e.footer), r;
             }
-          }), null), D((r) => {
+          }), null), S((r) => {
             var v = y("pointer-events-none relative z-[1] flex h-full w-full", B() ? "items-stretch justify-end" : u() ? "items-end justify-center" : "items-center justify-center"), w = y("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
             return v !== r.e && q(h, r.e = v), w !== r.t && q(b, r.t = w), r;
           }, {