asma-ui-core 3.108.2 → 3.108.3

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

@@ -1,167 +1,210 @@
-import { cn as k } from "../../../helpers/cn.js";
-import { resolveSx as W } from "../../../helpers/sx.js";
-import { registerOpenModalDialog as se } from "../../../hooks/useTopLayer.hook.js";
-import { CloseIcon as ce } from "../../icons/close-icon/CloseIcon.js";
-import { DialogBusyContext as ue, useDialogBusyBoundary as me } from "./DialogBusyContext.js";
-import { StyledButton as fe } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as xe } from "../../../hooks/useMediaQuery.hook.js";
-import { warnUnnamedDialog as pe } from "../../../helpers/warnUnnamedDialog.js";
-import he from "./StyledDialog.module.js";
-import { StyledDialogTitleContext as ye } from "./dialogTitleContext.js";
-import { useEffect as E, useId as D, useLayoutEffect as P, useMemo as we, useRef as i, useState as q } from "react";
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-var ve = {
+import { cn as B } from "../../../helpers/cn.js";
+import { resolveSx as K } from "../../../helpers/sx.js";
+import { registerOpenModalDialog as ve } from "../../../hooks/useTopLayer.hook.js";
+import { CloseIcon as xe } from "../../icons/close-icon/CloseIcon.js";
+import { DialogBusyContext as ye, useDialogBusyBoundary as pe } from "./DialogBusyContext.js";
+import { StyledButton as we } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as ge } from "../../../hooks/useMediaQuery.hook.js";
+import { OverlayBackOwnerContext as be, isOverlayBackEnabled as T, requestCloseTopOverlayBack as D, useBackCloses as ke } from "../../../hooks/useBackCloses.hook.js";
+import { warnUnnamedDialog as Ce } from "../../../helpers/warnUnnamedDialog.js";
+import Ee from "./StyledDialog.module.js";
+import { StyledDialogTitleContext as Be } from "./dialogTitleContext.js";
+import { useEffect as a, useId as I, useLayoutEffect as U, useMemo as De, useRef as l, useState as X } from "react";
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+var Ie = {
   xs: 444,
   sm: 600,
   md: 900,
   lg: 1200,
   xl: 1536
-}, _e = ({ open: t, onClose: y, children: C, dataTest: a, maxWidth: I = "sm", fullWidth: z, fullScreen: K, scroll: A = "paper", disableEscapeKeyDown: F, className: L, style: U, sx: X, classes: S, PaperProps: G, slotProps: s, busyReason: Q, locale: T = "en", onCloseText: N, showCloseIcon: H = !0, dialogLabel: c, dialogTitle: u, dialogHeaderNode: V, ariaLabel: w }) => {
-  const m = D(), R = D(), [$, J] = q(), Y = we(() => ({
-    titleId: m,
-    setTitleId: J
-  }), [m]), f = u ? m : $ ?? (c ? R : void 0), Z = xe(), l = i(null), v = i(null), b = i(!1), M = i(t), x = K ?? Z, { busy: p, busyReason: ee, contextValue: te } = me(Q, T), _ = D(), [h, ne] = q(), B = i(!1);
-  P(() => {
-    const e = l.current, n = !!f || !!w, o = e && t && !n ? e.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]') : null;
-    o && !o.id && (o.id = _);
-    const O = o?.id;
-    O !== h && ne(O), e && t && !n && !o && !B.current && (B.current = !0, pe(a));
+}, Fe = ({ open: t, onClose: R, children: S, dataTest: u, maxWidth: N = "sm", fullWidth: G, fullScreen: Q, scroll: V = "paper", disableEscapeKeyDown: H, className: $, style: J, sx: Y, classes: O, PaperProps: Z, slotProps: f, busyReason: ee, locale: te = "en", onCloseText: q, showCloseIcon: M = !0, dialogLabel: m, dialogTitle: h, dialogHeaderNode: re, ariaLabel: g }) => {
+  const v = I(), P = I(), [ne, oe] = X(), le = De(() => ({
+    titleId: v,
+    setTitleId: oe
+  }), [v]), x = h ? v : ne ?? (m ? P : void 0), ie = ge(), s = l(null), b = l(null), k = l(!1), C = l(!1), c = l(!1), _ = l(t);
+  a(() => {
+    _.current = t;
+  }, [t]);
+  const L = l(t), y = Q ?? ie, { busy: p, busyReason: se, contextValue: ae } = pe(ee, te), j = I(), [w, ce] = X(), W = l(!1);
+  U(() => {
+    const e = s.current, r = !!x || !!g, n = e && t && !r ? e.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]') : null;
+    n && !n.id && (n.id = j);
+    const o = n?.id;
+    o !== w && ce(o), e && t && !r && !n && !W.current && (W.current = !0, Ce(u));
   }, [
     t,
-    f,
+    x,
+    g,
+    S,
     w,
-    C,
-    h,
-    _,
-    a
-  ]), E(() => {
-    M.current && !t && s?.transition?.onExited?.(), M.current = t;
-  }, [t, s]), P(() => {
-    const e = l.current;
+    j,
+    u
+  ]), a(() => {
+    L.current && !t && f?.transition?.onExited?.(), L.current = t;
+  }, [t, f]), U(() => {
+    const e = s.current;
     if (!e || !t) return;
-    e.open || (v.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
-    const n = se(e);
+    e.open || (b.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
+    const r = ve(e);
     return () => {
-      n(), v.current?.isConnected && v.current.focus({ preventScroll: !0 });
+      r(), b.current?.isConnected && b.current.focus({ preventScroll: !0 });
     };
-  }, [t]), E(() => {
+  }, [t]), a(() => {
     if (!t) return;
-    const e = document.body.style.overflow, n = document.documentElement.style.overflow;
+    const e = document.body.style.overflow, r = document.documentElement.style.overflow;
     return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
-      document.body.style.overflow = e, document.documentElement.style.overflow = n;
+      document.body.style.overflow = e, document.documentElement.style.overflow = r;
     };
   }, [t]);
-  const g = {
-    ...G,
-    ...s?.paper
-  }, j = I === !1 ? void 0 : ve[I], { className: oe, style: re, onClick: le, ...ie } = s?.backdrop ?? {}, de = (e) => {
-    p || b.current || (b.current = !0, window.setTimeout(() => {
-      b.current = !1;
-    }, 0), y?.(e, "escapeKeyDown"));
-  }, ae = (e) => {
-    e.preventDefault();
+  const E = {
+    ...Z,
+    ...f?.paper
+  }, z = N === !1 ? void 0 : Ie[N], { className: de, style: ue, onClick: fe, ...me } = f?.backdrop ?? {}, A = (e, r) => {
+    if (p || c.current) return;
+    const n = R?.(e, r);
+    if (n && typeof n.then == "function") {
+      c.current = !0;
+      const o = () => {
+        c.current = !1;
+      };
+      n.then(o, o);
+    }
+    return n;
+  }, F = (e) => k.current ? !1 : (k.current = !0, window.setTimeout(() => {
+    k.current = !1;
+  }, 0), A(e, "escapeKeyDown"));
+  ke({
+    active: t,
+    requestClose: (e) => !R || H || p || c.current ? !1 : F(e ?? new Event("overlayBack")),
+    ownerRef: s
+  });
+  const he = (e) => {
+    e.cancelable && e.preventDefault(), !C.current && T() && D();
   };
-  return E(() => {
-    if (!t || F) return;
-    const e = (n) => {
-      if (n.key !== "Escape" || n.defaultPrevented) return;
-      const o = document.activeElement;
-      o instanceof Element && o.closest("dialog[open]") !== l.current || de(n);
+  return a(() => {
+    const e = s.current;
+    if (!e || !t) return;
+    let r = !1;
+    const n = () => {
+      requestAnimationFrame(() => {
+        r = !1, _.current && e.isConnected && !e.open && (e.showModal(), e.focus({ preventScroll: !0 }));
+      });
+    }, o = () => {
+      r || (r = !0, T() && !c.current && D(), n());
+    };
+    return e.addEventListener("close", o), () => e.removeEventListener("close", o);
+  }, [t]), a(() => {
+    if (!t || H) return;
+    const e = (r) => {
+      r.key !== "Escape" || r.defaultPrevented || (r.preventDefault(), r.stopImmediatePropagation(), D(r));
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }), t ? /* @__PURE__ */ d("dialog", {
-    ref: l,
+  }), a(() => {
+    if (!t) return;
+    const e = (r) => {
+      r.key === "Escape" && (C.current = !0, window.setTimeout(() => {
+        C.current = !1;
+      }, 0));
+    };
+    return window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0);
+  }, [t]), t ? /* @__PURE__ */ d("dialog", {
+    ref: s,
     tabIndex: -1,
-    "data-testid": a,
-    "aria-labelledby": f ?? h,
-    "aria-label": f || h ? void 0 : w,
-    onCancel: ae,
+    "data-testid": u,
+    "aria-labelledby": x ?? w,
+    "aria-label": x || w ? void 0 : g,
+    onCancel: he,
     onKeyDown: (e) => {
-      !p || e.key !== "Escape" || e.target.closest("dialog[open]") === l.current && e.preventDefault();
+      !p || e.key !== "Escape" || e.target.closest("dialog[open]") === s.current && e.preventDefault();
     },
-    className: k(he.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", A === "body" && "overflow-y-auto", L, S?.root),
+    className: B(Ee.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", V === "body" && "overflow-y-auto", $, O?.root),
     style: {
       zIndex: 999,
-      ...W(X),
-      ...U
+      ...K(Y),
+      ...J
     },
-    children: [/* @__PURE__ */ r("div", {
-      ...ie,
-      className: k("absolute inset-0 bg-[#626e7eb2]", oe),
-      style: re,
+    children: [/* @__PURE__ */ i("div", {
+      ...me,
+      className: B("absolute inset-0 bg-[#626e7eb2]", de),
+      style: ue,
       onClick: (e) => {
-        le?.(e), !e.defaultPrevented && !p && y?.(e, "backdropClick");
+        fe?.(e), e.defaultPrevented || A(e, "backdropClick");
       }
     }), /* @__PURE__ */ d("div", {
-      className: k("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", x && "rounded-none", g.className, S?.paper),
+      className: B("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", y && "rounded-none", E.className, O?.paper),
       style: {
         minWidth: 0,
         minHeight: 0,
-        ...!x && j ? { maxWidth: j } : {},
-        ...x ? {
+        ...!y && z ? { maxWidth: z } : {},
+        ...y ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : {
-          width: z ? "calc(100% - 64px)" : "auto",
+          width: G ? "calc(100% - 64px)" : "auto",
           maxHeight: "100%"
         },
-        ...W(g.sx),
-        ...g.style,
-        ...x ? {
+        ...K(E.sx),
+        ...E.style,
+        ...y ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : { maxHeight: "calc(100% - 64px)" }
       },
-      children: [(!!c || !!u || H) && /* @__PURE__ */ d("div", {
+      children: [(!!m || !!h || M) && /* @__PURE__ */ d("div", {
         className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
         children: [/* @__PURE__ */ d("div", {
           className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
-          children: [c && /* @__PURE__ */ r("div", {
-            id: R,
+          children: [m && /* @__PURE__ */ i("div", {
+            id: P,
             className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
-            children: c
-          }), u && /* @__PURE__ */ r("div", {
-            id: m,
+            children: m
+          }), h && /* @__PURE__ */ i("div", {
+            id: v,
             className: "flex text-2xl font-semibold leading-8 text-delta-800",
-            children: u
+            children: h
           })]
-        }), H && /* @__PURE__ */ d("div", {
+        }), M && /* @__PURE__ */ d("div", {
           className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
-          children: [V, /* @__PURE__ */ r(fe, {
-            dataTest: `close-button-${a}`,
-            "aria-label": N ? void 0 : "Close",
+          children: [re, /* @__PURE__ */ i(we, {
+            dataTest: `close-button-${u}`,
+            "aria-label": q ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ r(ce, {
+            endIcon: /* @__PURE__ */ i(xe, {
               width: 20,
               height: 20
             }),
             className: "max-w-full shrink-0 whitespace-nowrap",
             disabled: p,
-            disabledReason: ee,
-            onClick: (e) => y?.(e, "escapeKeyDown"),
+            disabledReason: se,
+            onClick: (e) => {
+              F(e);
+            },
             style: {
               color: "var(--colors-delta-800)",
               paddingRight: "6px",
               paddingLeft: "6px"
             },
-            children: N
+            children: q
           })]
         })]
-      }), /* @__PURE__ */ r(ye.Provider, {
-        value: Y,
-        children: /* @__PURE__ */ r(ue.Provider, {
-          value: te,
-          children: C
+      }), /* @__PURE__ */ i(be.Provider, {
+        value: s,
+        children: /* @__PURE__ */ i(Be.Provider, {
+          value: le,
+          children: /* @__PURE__ */ i(ye.Provider, {
+            value: ae,
+            children: S
+          })
         })
       })]
     })]
   }) : null;
 };
 export {
-  _e as StyledDialog
+  Fe as StyledDialog
 };