@floegence/floe-webapp-core 0.78.10 → 0.79.0

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

@@ -18,6 +18,8 @@ export interface DialogProps {
     class?: string;
     /** Drawers retain the same modal, visible-viewport and surface-placement contract. */
     presentation?: 'dialog' | 'bottom-drawer' | 'side-drawer';
+    /** Opening edge for a side drawer. Defaults to right. */
+    drawerSide?: 'left' | 'right';
     /** Undefined uses the default header; null leaves only the accessible title. */
     header?: JSX.Element;
     contentClass?: string;

package/dist/components/ui/Dialog.js

@@ -1,17 +1,17 @@
-import { createComponent as r, use as G, setAttribute as u, 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 { createComponent as o, use as G, setAttribute as u, style as ne, Portal as ae, spread as I, mergeProps as M, memo as x, insert as l, effect as D, className as q, template as h } 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 m } from "../../utils/cn.js";
 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 fe, DIALOG_SURFACE_BOUNDARY_ATTR as _, SURFACE_PORTAL_LAYER_ATTR as ue, DIALOG_SURFACE_HOST_ATTR as ge, isSurfacePortalMode as z, projectSurfacePortalRect as me, resolveSurfacePortalBoundaryRect as he, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
+import { resolveSurfacePortalHost as fe, DIALOG_SURFACE_BOUNDARY_ATTR as k, SURFACE_PORTAL_LAYER_ATTR as ue, 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-[length:var(--floe-type-body)] leading-[var(--floe-line-body)] 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>");
+var Ae = /* @__PURE__ */ h("<span aria-hidden=true>"), Ce = /* @__PURE__ */ h('<h2 class="text-sm font-semibold">'), _e = /* @__PURE__ */ h('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between p-3 border-b border-border"><div>'), ke = /* @__PURE__ */ h('<p class="mb-3 shrink-0 text-[length:var(--floe-type-body)] leading-[var(--floe-line-body)] text-muted-foreground last:mb-0">'), Se = /* @__PURE__ */ h('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-2 p-3 border-t border-border">'), Oe = /* @__PURE__ */ h("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Re = /* @__PURE__ */ h("<h2 class=sr-only>");
 const De = {
   display: "none"
 };
@@ -36,51 +36,51 @@ function Be(e) {
   window.clearTimeout(e);
 }
 function Fe(e) {
-  const x = ye(), [n, W] = D();
+  const p = ye(), [n, W] = P();
   ie(() => E(xe(window, W)));
-  const c = le(), P = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
-  let T;
-  const [k, Y] = D(null), [L, X] = D(0), [J, Q] = D(0), B = () => e.presentation === "side-drawer", f = () => e.presentation === "bottom-drawer", s = we({
-    open: () => e.open && !!k() && L() > 0,
+  const c = le(), T = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
+  let B;
+  const [S, Y] = P(null), [L, X] = P(0), [J, Q] = P(0), $ = () => e.presentation === "side-drawer", f = () => e.presentation === "bottom-drawer", s = we({
+    open: () => e.open && !!S() && L() > 0,
     get exitDurationMs() {
       return f() ? 180 : 160;
     }
-  }), p = () => s.mounted() && !!k() && L() > 0;
-  K(() => e.onPresenceChange?.(p())), E(() => e.onPresenceChange?.(!1));
+  }), A = () => s.mounted() && !!S() && L() > 0;
+  K(() => e.onPresenceChange?.(A())), E(() => e.onPresenceChange?.(!1));
   const ee = (t) => {
     Y(t), Pe(() => {
-      V(k) === t && X((d) => d + 1);
+      V(S) === t && X((d) => d + 1);
     });
-  }, O = U(() => p() ? fe({
-    owner: k()
+  }, O = U(() => A() ? fe({
+    owner: S()
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), $ = () => `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), oe = () => F(O()), R = U(() => (J(), n(), oe())), re = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${_}="${$()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${_}="${$()}"]`) : !1;
+  }), C = () => `dialog-boundary-${c}`, a = () => p.mode() === "auto" && z(O()), te = () => a() ? be(O()) : void 0, N = () => e.globalZIndex ?? p.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(`[${k}="${C()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${k}="${C()}"]`) : !1;
   return K(() => {
     const t = O();
-    if (!p() || !a() || typeof window > "u")
+    if (!A() || !a() || typeof window > "u")
       return;
-    let d = !1, h = null, i = Z(F(t));
-    const b = () => {
+    let d = !1, b = null, i = Z(F(t));
+    const v = () => {
       if (d || !z(t))
         return;
-      const o = Z(F(t));
-      o !== i && (i = o, Q((v) => v + 1));
-    }, A = () => {
-      d || (h = Te(() => {
-        b(), A();
+      const r = Z(F(t));
+      r !== i && (i = r, Q((w) => w + 1));
+    }, _ = () => {
+      d || (b = Te(() => {
+        v(), _();
       }));
     };
-    A(), E(() => {
-      d = !0, h !== null && Be(h);
+    _(), E(() => {
+      d = !0, b !== null && Be(b);
     });
   }), ce({
-    open: p,
-    root: () => T,
-    containsTarget: re,
+    open: A,
+    root: () => B,
+    containsTarget: oe,
     onClose: () => e.onOpenChange(!1),
     lockBodyScroll: () => !a(),
     trapFocus: !0,
@@ -94,17 +94,17 @@ function Fe(e) {
   }), [(() => {
     var t = Ae();
     return G(ee, t), u(t, "data-floe-dialog-owner-anchor", c), ne(t, De), t;
-  })(), r(g, {
+  })(), o(g, {
     get when() {
-      return p();
+      return A();
     },
     get children() {
-      return r(ae, {
+      return o(ae, {
         get mount() {
           return te();
         },
         get children() {
-          var t = Re(), d = t.firstChild, h = d.nextSibling, i = h.firstChild, b = i.firstChild;
+          var t = Oe(), d = t.firstChild, b = d.nextSibling, i = b.firstChild, v = i.firstChild;
           u(t, "data-floe-dialog-overlay-root", c), I(t, M({
             get "data-floe-dialog-mode"() {
               return a() ? "surface" : "global";
@@ -122,13 +122,13 @@ function Fe(e) {
             [ve]: "true"
           }, () => ({
             [ue]: "true",
-            [_]: $()
+            [k]: C()
           }), {
             get class() {
-              return y(a() ? "absolute z-20 box-border p-3" : y("fixed box-border p-4", N() === void 0 && "z-50"), f() && "floe-bottom-drawer-overlay", B() && "floe-side-drawer-overlay", s.exiting() && !f() && "pointer-events-none");
+              return m(a() ? m("absolute z-20 box-border", !$() && "p-3") : m("fixed box-border p-4", N() === void 0 && "z-50"), f() && "floe-bottom-drawer-overlay", $() && "floe-side-drawer-overlay", s.exiting() && !f() && "pointer-events-none");
             },
             get style() {
-              return C(() => !!a())() ? {
+              return x(() => !!a())() ? {
                 left: `${R().left}px`,
                 top: `${R().top}px`,
                 width: `${R().width}px`,
@@ -149,25 +149,29 @@ function Fe(e) {
               };
             }
           }), !1, !0), u(d, "data-floe-dialog-backdrop", c), I(d, M(() => ({
-            [_]: $()
+            [k]: C()
           }), {
             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", f() ? "floe-bottom-drawer-backdrop" : a() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return m("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", f() ? "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, i) : T = i, u(i, "data-floe-dialog-panel", c), I(i, M(() => ({
-            [_]: $(),
+          var _ = B;
+          return typeof _ == "function" ? G(_, i) : B = i, u(i, "data-floe-dialog-panel", c), I(i, M({
+            get "data-floe-drawer-side"() {
+              return x(() => !!$())() ? e.drawerSide ?? "right" : void 0;
+            }
+          }, () => ({
+            [k]: C(),
             [ge]: "true"
           }), {
             get 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", f() ? "floe-bottom-drawer-panel" : B() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
+              return m(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", f() ? "floe-bottom-drawer-panel" : $() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
             },
             style: {
               "max-height": "100%",
@@ -178,51 +182,51 @@ function Fe(e) {
               return s.state();
             },
             get inert() {
-              return C(() => !!f())() && s.exiting();
+              return x(() => !!f())() && s.exiting();
             },
             role: "dialog",
             get "aria-modal"() {
               return a() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return C(() => !!e.title)() ? P() : void 0;
+              return x(() => !!e.title)() ? T() : void 0;
             },
             get "aria-describedby"() {
-              return C(() => !!e.bodyDescription)() ? H() : void 0;
+              return x(() => !!e.bodyDescription)() ? H() : void 0;
             },
-            onKeyDown: (o) => e.onKeyDown?.(o),
+            onKeyDown: (r) => e.onKeyDown?.(r),
             tabIndex: -1
-          }), !1, !0), l(i, r(g, {
+          }), !1, !0), l(i, o(g, {
             get when() {
               return e.header === void 0;
             },
             get fallback() {
-              return [r(g, {
+              return [o(g, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var o = Se();
-                  return l(o, () => e.title), S(() => u(o, "id", P())), o;
+                  var r = Re();
+                  return l(r, () => e.title), D(() => u(r, "id", T())), r;
                 }
-              }), C(() => e.header)];
+              }), x(() => e.header)];
             },
             get children() {
-              return r(g, {
+              return o(g, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var o = _e(), v = o.firstChild;
-                  return l(v, r(g, {
+                  var r = _e(), w = r.firstChild;
+                  return l(w, o(g, {
                     get when() {
                       return e.title;
                     },
                     get children() {
-                      var w = Ce();
-                      return l(w, () => e.title), S(() => u(w, "id", P())), w;
+                      var y = Ce();
+                      return l(y, () => e.title), D(() => u(y, "id", T())), y;
                     }
-                  })), l(o, r(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",
@@ -231,33 +235,33 @@ function Fe(e) {
                       return e.closeLabel ?? "Close";
                     },
                     get children() {
-                      return r(de, {
+                      return o(de, {
                         class: "w-3.5 h-3.5"
                       });
                     }
-                  }), null), o;
+                  }), null), r;
                 }
               });
             }
-          }), b), l(b, r(g, {
+          }), v), l(v, o(g, {
             get when() {
               return e.bodyDescription;
             },
             get children() {
-              var o = ke();
-              return l(o, () => e.bodyDescription), S(() => u(o, "id", H())), o;
+              var r = ke();
+              return l(r, () => e.bodyDescription), D(() => u(r, "id", H())), r;
             }
-          }), null), l(b, () => e.children, null), l(i, r(g, {
+          }), null), l(v, () => e.children, null), l(i, o(g, {
             get when() {
               return e.footer;
             },
             get children() {
-              var o = Oe();
-              return l(o, () => e.footer), o;
+              var r = Se();
+              return l(r, () => e.footer), r;
             }
-          }), null), S((o) => {
-            var v = y("pointer-events-none relative z-[1] flex h-full w-full", B() ? "items-stretch justify-end" : f() ? "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 !== o.e && q(h, o.e = v), w !== o.t && q(b, o.t = w), o;
+          }), null), D((r) => {
+            var w = m("pointer-events-none relative z-[1] flex h-full w-full", $() ? e.drawerSide === "left" ? "items-stretch justify-start" : "items-stretch justify-end" : f() ? "items-end justify-center" : "items-center justify-center"), y = m("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
+            return w !== r.e && q(b, r.e = w), y !== r.t && q(v, r.t = y), r;
           }, {
             e: void 0,
             t: void 0
@@ -268,8 +272,8 @@ function Fe(e) {
   })];
 }
 function We(e) {
-  const x = se();
-  return r(Fe, {
+  const p = se();
+  return o(Fe, {
     get open() {
       return e.open;
     },
@@ -286,16 +290,16 @@ function We(e) {
       return e.globalZIndex;
     },
     get footer() {
-      return [r(j, {
+      return [o(j, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? x.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? p.config.strings.confirmDialog.cancel;
         }
-      }), r(j, {
+      }), o(j, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -306,7 +310,7 @@ function We(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? x.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? p.config.strings.confirmDialog.confirm;
         }
       })];
     },