asma-ui-core 3.61.4 → 3.63.0

package/dist/components/feedback/dialog/StyledDialog.js

@@ -1,25 +1,27 @@
 import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as S } from "../../../helpers/sx.js";
+import { resolveSx as D } from "../../../helpers/sx.js";
 import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
-import { StyledButton as B } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as G } from "../../../hooks/useMediaQuery.hook.js";
-import P from "./StyledDialog.module.js";
-import { useEffect as D, useLayoutEffect as Q, useRef as u } from "react";
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
-var $ = {
+import { registerOpenModalDialog as B } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as G } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as P } from "../../../hooks/useMediaQuery.hook.js";
+import Q from "./StyledDialog.module.js";
+import { useEffect as S, useLayoutEffect as $, useRef as u } from "react";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+var J = {
   xs: 444,
   sm: 600,
   md: 900,
   lg: 1200,
   xl: 1536
-}, te = ({ open: t, onClose: a, children: _, dataTest: i, maxWidth: x = "sm", fullWidth: C, fullScreen: E, scroll: p = "paper", disableEscapeKeyDown: h, className: H, style: j, sx: M, classes: y, PaperProps: R, slotProps: o, onCloseText: w, showCloseIcon: v = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: W }) => {
-  const I = G(), b = u(null), c = u(!1), g = u(t), n = I ? !0 : E;
-  D(() => {
+}, le = ({ open: t, onClose: a, children: _, dataTest: i, maxWidth: x = "sm", fullWidth: C, fullScreen: E, scroll: p = "paper", disableEscapeKeyDown: h, className: H, style: j, sx: M, classes: y, PaperProps: O, slotProps: o, onCloseText: w, showCloseIcon: v = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: R }) => {
+  const W = P(), b = u(null), c = u(!1), g = u(t), n = E ?? W;
+  S(() => {
     g.current && !t && o?.transition?.onExited?.(), g.current = t;
-  }, [t, o]), Q(() => {
+  }, [t, o]), $(() => {
     const e = b.current;
-    !e || !t || e.open || (e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
-  }, [t]), D(() => {
+    if (!(!e || !t))
+      return e.open || (e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 }))), B(e);
+  }, [t]), S(() => {
     if (!t) return;
     const e = document.body.style.overflow, K = document.documentElement.style.overflow;
     return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
@@ -27,16 +29,16 @@ var $ = {
     };
   }, [t]);
   const m = {
-    ...R,
+    ...O,
     ...o?.paper
-  }, k = x === !1 ? void 0 : $[x], { className: O, style: z, onClick: q, ...A } = o?.backdrop ?? {}, N = (e) => {
+  }, k = x === !1 ? void 0 : J[x], { className: I, style: z, onClick: q, ...A } = o?.backdrop ?? {}, N = (e) => {
     c.current || (c.current = !0, window.setTimeout(() => {
       c.current = !1;
     }, 0), a?.(e, "escapeKeyDown"));
   }, F = (e) => {
     e.preventDefault(), h || N(e);
   };
-  return t ? /* @__PURE__ */ r("dialog", {
+  return t ? /* @__PURE__ */ l("dialog", {
     ref: b,
     tabIndex: -1,
     "data-testid": i,
@@ -45,20 +47,20 @@ var $ = {
     onKeyDown: (e) => {
       e.key !== "Escape" || h || (e.preventDefault(), N(e));
     },
-    className: f(P.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", p === "body" && "overflow-y-auto", H, y?.root),
+    className: f(Q.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", p === "body" && "overflow-y-auto", H, y?.root),
     style: {
       zIndex: 999,
-      ...S(M),
+      ...D(M),
       ...j
     },
-    children: [/* @__PURE__ */ l("div", {
+    children: [/* @__PURE__ */ r("div", {
       ...A,
-      className: f("absolute inset-0 bg-[#626e7eb2]", O),
+      className: f("absolute inset-0 bg-[#626e7eb2]", I),
       style: z,
       onClick: (e) => {
         q?.(e), e.defaultPrevented || a?.(e, "backdropClick");
       }
-    }), /* @__PURE__ */ r("div", {
+    }), /* @__PURE__ */ l("div", {
       className: f("relative z-[1] flex overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", p === "paper" && "flex-col", n && "rounded-none", m.className, y?.paper),
       style: {
         minWidth: 0,
@@ -73,7 +75,7 @@ var $ = {
           width: C ? "calc(100% - 64px)" : "auto",
           maxHeight: "100%"
         },
-        ...S(m.sx),
+        ...D(m.sx),
         ...m.style,
         ...n ? {
           width: "100%",
@@ -82,25 +84,25 @@ var $ = {
           maxHeight: "100%"
         } : { maxHeight: "calc(100% - 64px)" }
       },
-      children: [(!!d || !!s || v) && /* @__PURE__ */ r("div", {
+      children: [(!!d || !!s || v) && /* @__PURE__ */ l("div", {
         className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
-        children: [/* @__PURE__ */ r("div", {
+        children: [/* @__PURE__ */ l("div", {
           className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
-          children: [d && /* @__PURE__ */ l("div", {
+          children: [d && /* @__PURE__ */ r("div", {
             className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
             children: d
-          }), s && /* @__PURE__ */ l("div", {
+          }), s && /* @__PURE__ */ r("div", {
             className: "flex text-2xl font-semibold leading-8 text-delta-800",
             children: s
           })]
-        }), v && /* @__PURE__ */ r("div", {
+        }), v && /* @__PURE__ */ l("div", {
           className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
-          children: [W, /* @__PURE__ */ l(B, {
+          children: [R, /* @__PURE__ */ r(G, {
             dataTest: `close-button-${i}`,
             "aria-label": w ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ l(X, {
+            endIcon: /* @__PURE__ */ r(X, {
               width: 20,
               height: 20
             }),
@@ -119,5 +121,5 @@ var $ = {
   }) : null;
 };
 export {
-  te as StyledDialog
+  le as StyledDialog
 };

package/dist/components/feedback/snack-bar/SnackbarProvider.js

@@ -1,26 +1,40 @@
-import { StyledAlertSnackbar as o } from "./StyledAlertSnackbar.js";
-import { StyledDefaultSnackbar as t } from "./components/StyledDefaultSnackbar.js";
-import { StyledInfoSnackbar as a } from "./components/StyledInfoSnackbar.js";
-import { jsx as i } from "react/jsx-runtime";
-import { SnackbarProvider as e } from "notistack";
-var d = (r) => /* @__PURE__ */ i(e, {
-  ...r,
-  Components: {
-    alert: o,
-    info: a,
-    default: t
-  },
-  autoHideDuration: 6e3,
-  anchorOrigin: {
-    vertical: "top",
-    horizontal: "right"
-  },
-  domRoot: document.body,
-  maxSnack: 3,
-  classes: { root: "min-w-fit flex justify-center" },
-  className: "w-fit min-w-fit max-w-fit",
-  children: r.children
-});
+import { useTopmostOpenModalDialog as a } from "../../../hooks/useTopLayer.hook.js";
+import { StyledAlertSnackbar as n } from "./StyledAlertSnackbar.js";
+import { StyledDefaultSnackbar as i } from "./components/StyledDefaultSnackbar.js";
+import { StyledInfoSnackbar as m } from "./components/StyledInfoSnackbar.js";
+import { useLayoutEffect as e, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { SnackbarProvider as l } from "notistack";
+var d = () => {
+  const [t] = s(() => {
+    const o = document.createElement("div");
+    return o.style.display = "contents", o.setAttribute("data-asma-snackbar-host", ""), o;
+  }), r = a();
+  return e(() => {
+    const o = r ?? document.body;
+    t.parentElement !== o && o.appendChild(t);
+  }, [t, r]), e(() => () => t.remove(), [t]), t;
+}, v = (t) => {
+  const r = d();
+  return /* @__PURE__ */ c(l, {
+    ...t,
+    Components: {
+      alert: n,
+      info: m,
+      default: i
+    },
+    autoHideDuration: 6e3,
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    domRoot: r,
+    maxSnack: 3,
+    classes: { root: "min-w-fit flex justify-center" },
+    className: "w-fit min-w-fit max-w-fit",
+    children: t.children
+  });
+};
 export {
-  d as SnackbarProvider
+  v as SnackbarProvider
 };

package/dist/components/feedback/snack-bar/StyledSnackbar.js

@@ -1,36 +1,41 @@
 import { cn as c } from "../../../helpers/cn.js";
-import { useEffect as p } from "react";
-import { jsx as l, jsxs as x } from "react/jsx-runtime";
-import { FloatingPortal as h } from "@floating-ui/react";
-var b = {
+import { useTopmostOpenModalDialog as x } from "../../../hooks/useTopLayer.hook.js";
+import { useEffect as d } from "react";
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { FloatingPortal as b } from "@floating-ui/react";
+var g = {
   "top-left": "top-6 left-6",
   "top-center": "top-6 left-1/2 -translate-x-1/2",
   "top-right": "top-6 right-6",
   "bottom-left": "bottom-6 left-6",
   "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
   "bottom-right": "bottom-6 right-6"
-}, S = ({ open: t = !1, autoHideDuration: e = 3e3, onClose: r, anchorOrigin: o = {
+}, N = ({ open: t = !1, autoHideDuration: e = 3e3, onClose: o, anchorOrigin: r = {
   vertical: "bottom",
   horizontal: "left"
-}, message: i, action: m, children: a, className: f }) => {
-  if (p(() => {
+}, message: m, action: i, children: a, className: s }) => {
+  const f = x();
+  if (d(() => {
     if (!t || e == null) return;
-    const s = setTimeout(() => r?.(null, "timeout"), e);
-    return () => clearTimeout(s);
+    const p = setTimeout(() => o?.(null, "timeout"), e);
+    return () => clearTimeout(p);
   }, [
     t,
     e,
-    r
+    o
   ]), !t) return null;
-  const n = b[`${o.vertical}-${o.horizontal}`];
-  return /* @__PURE__ */ l(h, { children: /* @__PURE__ */ l("div", {
-    className: c("fixed z-[1400] flex items-center gap-2", n, f),
-    children: a ?? /* @__PURE__ */ x("div", {
-      className: "flex items-center gap-2 rounded bg-delta-800 px-4 py-3 text-sm text-white shadow-lg",
-      children: [i, m]
+  const n = g[`${r.vertical}-${r.horizontal}`];
+  return /* @__PURE__ */ l(b, {
+    root: f,
+    children: /* @__PURE__ */ l("div", {
+      className: c("fixed z-[1400] flex items-center gap-2", n, s),
+      children: a ?? /* @__PURE__ */ h("div", {
+        className: "flex items-center gap-2 rounded bg-delta-800 px-4 py-3 text-sm text-white shadow-lg",
+        children: [m, i]
+      })
     })
-  }) });
+  });
 };
 export {
-  S as StyledSnackbar
+  N as StyledSnackbar
 };

package/dist/hooks/useTopLayer.hook.js

@@ -1,29 +1,65 @@
-import { useCallback as t } from "react";
-var a = { popover: "manual" }, i = {
+import { useCallback as r, useSyncExternalStore as s } from "react";
+var c = { popover: "manual" }, p = {
   margin: 0,
   inset: "auto"
 };
-function u(o) {
-  if (!(o instanceof Element)) return;
-  const r = o.closest("dialog");
-  return r instanceof HTMLDialogElement && r.open ? r : void 0;
+function f(e) {
+  if (!(e instanceof Element)) return;
+  const o = e.closest("dialog");
+  return o instanceof HTMLDialogElement && o.open ? o : void 0;
 }
-function p(o) {
-  return o == null;
+function t() {
+  if (typeof window > "u") return a ??= {
+    dialogs: [],
+    listeners: /* @__PURE__ */ new Set()
+  };
+  const e = window.rawWindow ?? document.defaultView ?? window;
+  return e.__asmaOpenModalDialogRegistry__ ??= {
+    dialogs: [],
+    listeners: /* @__PURE__ */ new Set()
+  };
 }
-function c(o, r = !0) {
-  return t((e) => {
-    if (o(e), !(!e || !r))
+var a, i = () => {
+  for (const e of [...t().listeners]) e();
+};
+function g(e) {
+  return t().dialogs.push(e), i(), () => {
+    const { dialogs: o } = t(), n = o.indexOf(e);
+    n !== -1 && (o.splice(n, 1), i());
+  };
+}
+function l() {
+  const { dialogs: e } = t();
+  for (let o = e.length - 1; o >= 0; o -= 1) {
+    const n = e[o];
+    if (n?.isConnected && n.open) return n;
+  }
+}
+var u = (e) => (t().listeners.add(e), () => {
+  t().listeners.delete(e);
+});
+function w() {
+  return s(u, l, () => {
+  });
+}
+function v(e) {
+  return e == null;
+}
+function O(e, o = !0) {
+  return r((n) => {
+    if (e(n), !(!n || !o))
       try {
-        typeof e.showPopover == "function" && !e.matches(":popover-open") && e.showPopover();
+        typeof n.showPopover == "function" && !n.matches(":popover-open") && n.showPopover();
       } catch {
       }
-  }, [o, r]);
+  }, [e, o]);
 }
 export {
-  a as TOP_LAYER_PROPS,
-  i as TOP_LAYER_RESET_STYLE,
-  u as getOpenModalDialogAncestor,
-  p as shouldUsePopoverTopLayer,
-  c as useTopLayerRef
+  c as TOP_LAYER_PROPS,
+  p as TOP_LAYER_RESET_STYLE,
+  f as getOpenModalDialogAncestor,
+  g as registerOpenModalDialog,
+  v as shouldUsePopoverTopLayer,
+  O as useTopLayerRef,
+  w as useTopmostOpenModalDialog
 };

package/dist/src/components/feedback/dialog/StyledDialog.d.ts

@@ -20,6 +20,7 @@ export interface IStyledDialogProps {
     dataTest: string;
     maxWidth?: DialogMaxWidth;
     fullWidth?: boolean;
+    /** Defaults to `true` on mobile (≤743px); pass `false` to keep the windowed paper there too. */
     fullScreen?: boolean;
     scroll?: 'paper' | 'body';
     disableEscapeKeyDown?: boolean;

package/dist/src/hooks/useTopLayer.hook.d.ts

@@ -44,6 +44,34 @@ export declare const TOP_LAYER_RESET_STYLE: CSSProperties;
  * body portal.
  */
 export declare function getOpenModalDialogAncestor(node: unknown): HTMLElement | undefined;
+declare global {
+    interface Window {
+        rawWindow?: Window;
+        __asmaOpenModalDialogRegistry__?: OpenModalDialogRegistry;
+    }
+}
+interface OpenModalDialogRegistry {
+    dialogs: HTMLDialogElement[];
+    listeners: Set<() => void>;
+}
+/**
+ * Publish an open modal `<dialog>` as the current top-layer occupant. Call right after
+ * `showModal()`; the returned unregister must run before/as the dialog closes. `StyledDialog` wires
+ * this from the same layout effect that opens the dialog.
+ */
+export declare function registerOpenModalDialog(dialog: HTMLDialogElement): () => void;
+/**
+ * The modal `<dialog>` currently at the top of the browser top layer, or `undefined` when no ui-core
+ * modal is open. Stale entries (a dialog torn down without its cleanup running) are skipped rather
+ * than trusted, so a missed unregister can never strand an overlay in a detached subtree.
+ */
+export declare function getTopmostOpenModalDialog(): HTMLDialogElement | undefined;
+/**
+ * Reactive {@link getTopmostOpenModalDialog} — re-renders the caller when a modal `<dialog>` opens or
+ * closes. Use as the portal root for an **anchorless** overlay that must clear an open modal
+ * (`SnackbarProvider`, `StyledSnackbar`); anchored overlays use {@link getOpenModalDialogAncestor}.
+ */
+export declare function useTopmostOpenModalDialog(): HTMLDialogElement | undefined;
 /**
  * `true` when the floating node should join the top layer via the Popover API.
  * `false` when it is (or will be) portalled into an open modal `<dialog>` — see hook docs.

package/dist/src/hooks/useTopLayer.hook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.61.4",
+    "version": "3.63.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",