@floegence/floe-webapp-core 0.51.0 → 0.52.1

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

@@ -15,6 +15,13 @@ 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';
+    /** Undefined uses the default header; null leaves only accessible title/description. */
+    header?: JSX.Element;
+    contentClass?: string;
+    /** Includes the exit animation, so hosts can retain background input isolation. */
+    onPresenceChange?: (present: boolean) => void;
     /** Optional stacking layer for global dialogs. Overrides the placement provider default. */
     globalZIndex?: number;
 }

package/dist/components/ui/Dialog.js

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