@floegence/floe-webapp-core 0.72.0 → 0.73.0

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

@@ -16,8 +16,8 @@ export interface DialogProps {
     children: JSX.Element;
     footer?: JSX.Element;
     class?: string;
-    /** Bottom drawers retain the same modal and surface-placement contract. */
-    presentation?: 'dialog' | 'bottom-drawer';
+    /** Drawers retain the same modal, visible-viewport and surface-placement contract. */
+    presentation?: 'dialog' | 'bottom-drawer' | 'side-drawer';
     /** Undefined uses the default header; null leaves only the accessible title. */
     header?: JSX.Element;
     contentClass?: string;

package/dist/components/ui/Dialog.js

@@ -1,208 +1,228 @@
-import { createComponent as r, use as L, setAttribute as s, style as ee, Portal as te, spread as T, mergeProps as B, memo as _, insert as l, effect as D, className as N, template as g } from "solid-js/web";
-import { createUniqueId as ne, createSignal as F, createEffect as G, onCleanup as j, createMemo as q, Show as f, untrack as re } 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 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 { cn as y } from "../../utils/cn.js";
-import { Button as I } from "./Button.js";
-import { X as oe } from "../icons/index.js";
-import { useResolvedFloeConfig as ae } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as le } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as ie, DIALOG_SURFACE_BOUNDARY_ATTR as A, SURFACE_PORTAL_LAYER_ATTR as de, DIALOG_SURFACE_HOST_ATTR as ce, isSurfacePortalMode as K, projectSurfacePortalRect as ue, resolveSurfacePortalBoundaryRect as se, resolveSurfacePortalMount as fe } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as ge } from "./localInteractionSurface.js";
-import { createFloatingPresence as me } from "./floatingPresence.js";
-import { useDialogPlacement as he } from "./DialogPlacementContext.js";
-var be = /* @__PURE__ */ g("<span aria-hidden=true>"), we = /* @__PURE__ */ g('<h2 class="text-sm font-semibold">'), ye = /* @__PURE__ */ g('<div data-floe-dialog-header class="flex items-start justify-between p-3 border-b border-border"><div>'), ve = /* @__PURE__ */ g('<p class="mb-3 shrink-0 text-sm text-muted-foreground last:mb-0">'), xe = /* @__PURE__ */ g('<div data-floe-dialog-footer class="flex items-center justify-end gap-2 p-3 border-t border-border">'), $e = /* @__PURE__ */ g("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Ce = /* @__PURE__ */ g("<h2 class=sr-only>");
-const _e = {
+import { Button as j } from "./Button.js";
+import { X as de } from "../icons/index.js";
+import { useResolvedFloeConfig as se } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as ue, DIALOG_SURFACE_BOUNDARY_ATTR as _, SURFACE_PORTAL_LAYER_ATTR as fe, DIALOG_SURFACE_HOST_ATTR as ge, isSurfacePortalMode as z, projectSurfacePortalRect as me, resolveSurfacePortalBoundaryRect as he, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as ve } from "./localInteractionSurface.js";
+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 = {
   display: "none"
 };
-function Ae(e) {
+function Se(e) {
   if (typeof queueMicrotask == "function") {
     queueMicrotask(e);
     return;
   }
   Promise.resolve().then(e);
 }
-function U(e) {
+function Z(e) {
   return `${e.left}|${e.top}|${e.right}|${e.bottom}|${e.width}|${e.height}`;
 }
-function Oe(e) {
+function Te(e) {
   return typeof window < "u" && typeof window.requestAnimationFrame == "function" ? window.requestAnimationFrame(e) : window.setTimeout(() => e(Date.now()), 16);
 }
-function ke(e) {
+function Be(e) {
   if (typeof window < "u" && typeof window.cancelAnimationFrame == "function") {
     window.cancelAnimationFrame(e);
     return;
   }
   window.clearTimeout(e);
 }
-function Re(e) {
-  const v = he(), c = ne(), P = () => `dialog-${c}-title`, E = () => `dialog-${c}-description`;
-  let p;
-  const [O, z] = F(null), [M, Z] = F(0), [V, W] = F(0), u = () => e.presentation === "bottom-drawer", d = me({
-    open: () => e.open && !!O() && M() > 0,
+function Fe(e) {
+  const x = ye(), [d, W] = P();
+  ie(() => E(xe(window, W)));
+  const c = le(), S = () => `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({
+    open: () => e.open && !!k() && L() > 0,
     get exitDurationMs() {
       return u() ? 180 : 160;
     }
-  }), x = () => d.mounted() && !!O() && M() > 0;
-  G(() => e.onPresenceChange?.(x())), j(() => e.onPresenceChange?.(!1));
-  const Y = (n) => {
-    z(n), Ae(() => {
-      re(O) === n && Z((i) => i + 1);
+  }), 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);
     });
-  }, k = q(() => x() ? ie({
-    owner: O()
+  }, O = U(() => p() ? ue({
+    owner: k()
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), $ = () => `dialog-boundary-${c}`, o = () => v.mode() === "auto" && K(k()), X = () => o() ? fe(k()) : void 0, H = () => e.globalZIndex ?? v.globalZIndex(), S = (n) => ue(se(n), n), J = () => S(k()), R = q(() => (V(), J())), Q = (n) => typeof Element < "u" && n instanceof Element ? !!n.closest(`[${A}="${$()}"]`) : typeof Node < "u" && n instanceof Node ? !!n.parentElement?.closest(`[${A}="${$()}"]`) : !1;
-  return G(() => {
-    const n = k();
-    if (!x() || !o() || typeof window > "u")
+  }), $ = () => `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;
+  return K(() => {
+    const t = O();
+    if (!p() || !n() || typeof window > "u")
       return;
-    let i = !1, m = null, a = U(S(n));
-    const h = () => {
-      if (i || !K(n))
+    let l = !1, h = null, a = Z(F(t));
+    const b = () => {
+      if (l || !z(t))
         return;
-      const t = U(S(n));
-      t !== a && (a = t, W((b) => b + 1));
-    }, C = () => {
-      i || (m = Oe(() => {
-        h(), C();
+      const r = Z(F(t));
+      r !== a && (a = r, Q((v) => v + 1));
+    }, A = () => {
+      l || (h = Te(() => {
+        b(), A();
       }));
     };
-    C(), j(() => {
-      i = !0, m !== null && ke(m);
+    A(), E(() => {
+      l = !0, h !== null && Be(h);
     });
-  }), le({
-    open: x,
-    root: () => p,
-    containsTarget: Q,
+  }), ce({
+    open: p,
+    root: () => T,
+    containsTarget: oe,
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: () => !o(),
+    lockBodyScroll: () => !n(),
     trapFocus: !0,
-    closeOnEscape: () => o() ? "inside" : !0,
+    closeOnEscape: () => n() ? "inside" : !0,
     escapeKeyPhase: () => e.escapeKeyPhase ?? "capture",
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: () => o() ? "none" : "outside",
-    blockTouchMove: () => o() ? "none" : "outside",
+    blockWheel: () => n() ? "none" : "outside",
+    blockTouchMove: () => n() ? "none" : "outside",
     restoreFocus: !0
   }), [(() => {
-    var n = be();
-    return L(Y, n), s(n, "data-floe-dialog-owner-anchor", c), ee(n, _e), n;
-  })(), r(f, {
+    var t = Ae();
+    return G(ee, t), f(t, "data-floe-dialog-owner-anchor", c), ne(t, Pe), t;
+  })(), o(g, {
     get when() {
-      return x();
+      return p();
     },
     get children() {
-      return r(te, {
+      return o(ae, {
         get mount() {
-          return X();
+          return te();
         },
         get children() {
-          var n = $e(), i = n.firstChild, m = i.nextSibling, a = m.firstChild, h = a.firstChild;
-          s(n, "data-floe-dialog-overlay-root", c), T(n, B({
+          var t = Re(), l = t.firstChild, h = l.nextSibling, a = h.firstChild, b = a.firstChild;
+          f(t, "data-floe-dialog-overlay-root", c), I(t, M({
             get "data-floe-dialog-mode"() {
-              return o() ? "surface" : "global";
+              return n() ? "surface" : "global";
             },
             get "data-floe-dialog-presentation"() {
               return e.presentation ?? "dialog";
             },
             get "data-floating-presence"() {
-              return d.state();
+              return s.state();
             },
             get "aria-hidden"() {
-              return d.exiting() ? "true" : void 0;
+              return s.exiting() ? "true" : void 0;
             }
           }, {
-            [ge]: "true"
+            [ve]: "true"
           }, () => ({
-            [de]: "true",
-            [A]: $()
+            [fe]: "true",
+            [_]: $()
           }), {
             get class() {
-              return y(o() ? "absolute z-20 box-border p-3" : y("fixed inset-0 box-border p-4", H() === void 0 && "z-50"), u() && "floe-bottom-drawer-overlay", d.exiting() && !u() && "pointer-events-none");
+              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");
             },
             get style() {
-              return _(() => !!o())() ? {
+              return C(() => !!n())() ? {
                 left: `${R().left}px`,
                 top: `${R().top}px`,
                 width: `${R().width}px`,
                 height: `${R().height}px`
               } : {
-                "z-index": H()
+                ...d() ? pe(d()) : {
+                  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`,
+                "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))",
+                "padding-left": "max(var(--floe-dialog-gap-x, 1rem), var(--floe-dialog-safe-left))",
+                "z-index": N()
               };
             }
-          }), !1, !0), s(i, "data-floe-dialog-backdrop", c), T(i, B(() => ({
-            [A]: $()
+          }), !1, !0), f(l, "data-floe-dialog-backdrop", c), I(l, M(() => ({
+            [_]: $()
           }), {
             get "data-floating-presence"() {
-              return d.state();
+              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" : o() ? "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" : n() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => {
-              !d.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
+              !s.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
             }
           }), !1, !1);
-          var C = p;
-          return typeof C == "function" ? L(C, a) : p = a, s(a, "data-floe-dialog-panel", c), T(a, B(() => ({
-            [A]: $(),
-            [ce]: "true"
+          var A = T;
+          return typeof A == "function" ? G(A, a) : T = a, f(a, "data-floe-dialog-panel", c), I(a, M(() => ({
+            [_]: $(),
+            [ge]: "true"
           }), {
             get class() {
-              return y(o() ? "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", "floe-floating-presence", u() ? "floe-bottom-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.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);
+            },
+            style: {
+              "max-height": "100%",
+              "min-height": "0",
+              "min-width": "0"
             },
             get "data-floating-presence"() {
-              return d.state();
+              return s.state();
             },
             get inert() {
-              return _(() => !!u())() && d.exiting();
+              return C(() => !!u())() && s.exiting();
             },
             role: "dialog",
             get "aria-modal"() {
-              return o() ? void 0 : "true";
+              return n() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return _(() => !!e.title)() ? P() : void 0;
+              return C(() => !!e.title)() ? S() : void 0;
             },
             get "aria-describedby"() {
-              return _(() => !!e.bodyDescription)() ? E() : void 0;
+              return C(() => !!e.bodyDescription)() ? H() : void 0;
             },
-            onKeyDown: (t) => e.onKeyDown?.(t),
+            onKeyDown: (r) => e.onKeyDown?.(r),
             tabIndex: -1
-          }), !1, !0), l(a, r(f, {
+          }), !1, !0), i(a, o(g, {
             get when() {
               return e.header === void 0;
             },
             get fallback() {
-              return [r(f, {
+              return [o(g, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var t = Ce();
-                  return l(t, () => e.title), D(() => s(t, "id", P())), t;
+                  var r = De();
+                  return i(r, () => e.title), D(() => f(r, "id", S())), r;
                 }
-              }), _(() => e.header)];
+              }), C(() => e.header)];
             },
             get children() {
-              return r(f, {
+              return o(g, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var t = ye(), b = t.firstChild;
-                  return l(b, r(f, {
+                  var r = _e(), v = r.firstChild;
+                  return i(v, o(g, {
                     get when() {
                       return e.title;
                     },
                     get children() {
-                      var w = we();
-                      return l(w, () => e.title), D(() => s(w, "id", P())), w;
+                      var w = Ce();
+                      return i(w, () => e.title), D(() => f(w, "id", S())), w;
                     }
-                  })), l(t, r(I, {
+                  })), i(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",
@@ -211,45 +231,45 @@ function Re(e) {
                       return e.closeLabel ?? "Close";
                     },
                     get children() {
-                      return r(oe, {
+                      return o(de, {
                         class: "w-3.5 h-3.5"
                       });
                     }
-                  }), null), t;
+                  }), null), r;
                 }
               });
             }
-          }), h), l(h, r(f, {
+          }), b), i(b, o(g, {
             get when() {
               return e.bodyDescription;
             },
             get children() {
-              var t = ve();
-              return l(t, () => e.bodyDescription), D(() => s(t, "id", E())), t;
+              var r = ke();
+              return i(r, () => e.bodyDescription), D(() => f(r, "id", H())), r;
             }
-          }), null), l(h, () => e.children, null), l(a, r(f, {
+          }), null), i(b, () => e.children, null), i(a, o(g, {
             get when() {
               return e.footer;
             },
             get children() {
-              var t = xe();
-              return l(t, () => e.footer), t;
+              var r = Oe();
+              return i(r, () => e.footer), r;
             }
-          }), null), D((t) => {
-            var b = y("pointer-events-none relative z-[1] flex h-full w-full justify-center", u() ? "items-end" : "items-center"), w = y("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
-            return b !== t.e && N(m, t.e = b), w !== t.t && N(h, t.t = w), t;
+          }), null), D((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;
           }, {
             e: void 0,
             t: void 0
-          }), n;
+          }), t;
         }
       });
     }
   })];
 }
-function Ne(e) {
-  const v = ae();
-  return r(Re, {
+function We(e) {
+  const x = se();
+  return o(Fe, {
     get open() {
       return e.open;
     },
@@ -266,16 +286,16 @@ function Ne(e) {
       return e.globalZIndex;
     },
     get footer() {
-      return [r(I, {
+      return [o(j, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? v.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? x.config.strings.confirmDialog.cancel;
         }
-      }), r(I, {
+      }), o(j, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -286,7 +306,7 @@ function Ne(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? v.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? x.config.strings.confirmDialog.confirm;
         }
       })];
     },
@@ -296,6 +316,6 @@ function Ne(e) {
   });
 }
 export {
-  Ne as ConfirmDialog,
-  Re as Dialog
+  We as ConfirmDialog,
+  Fe as Dialog
 };