asma-ui-core 3.87.2 → 3.87.4

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

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

package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js

@@ -11,26 +11,26 @@ import { planToolbarActions as D } from "../../../custom/module/header-layout/pl
 import { ToolbarActionButton as G } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
 import { useToolbarTranslations as U } from "../../../custom/module/header-layout/useTranslations.js";
 import { useMemo as C, useState as X } from "react";
-import { Fragment as _, jsx as r, jsxs as l } from "react/jsx-runtime";
-var Y = 470, V = 8, k = "dialog-footer-right", N = "dialog-footer-more", I = (o, t) => `dialog-footer-action:${o}:${t ? "label" : "icon"}`;
-function ce({ leftActions: o = [], leadingSlot: t, secondaryAction: a, primaryAction: s, fixed: P = !1, rounded: B = !0, locale: E = "en", className: M, dataTest: d = "styled-dialog-footer" }) {
-  const W = U(E), { ref: R, widthPx: c } = F(), { register: m, widths: n } = H(), [p, h] = X(null), g = c > 0 && c < Y, S = g ? 8 : 16, u = C(() => o.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
+import { Fragment as _, jsx as r, jsxs as i } from "react/jsx-runtime";
+var Y = 470, V = 8, k = "dialog-footer-right", N = "dialog-footer-more", I = (t, n) => `dialog-footer-action:${t}:${n ? "label" : "icon"}`;
+function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAction: s, fixed: P = !1, rounded: B = !0, locale: E = "en", className: M, dataTest: d = "styled-dialog-footer" }) {
+  const W = U(E), { ref: R, widthPx: c } = F(), { register: m, widths: o } = H(), [p, h] = X(null), g = c > 0 && c < Y, S = g ? 8 : 16, u = C(() => t.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
     ...e,
     canHideLabel: !1
-  } : e), [o]), A = n[k] ?? 0, x = a != null || s != null, v = Math.max(0, c - S * 2 - A - (x ? V : 0)), f = C(() => D({
+  } : e), [t]), A = o[k] ?? 0, x = a != null || s != null, v = Math.max(0, c - S * 2 - A - (x ? V : 0)), f = C(() => D({
     actions: u,
     availableWidth: v,
     collapseLabels: !0,
-    resolveActionWidth: (e, i) => n[I(e.id, i)],
-    moreButtonWidthPx: n[N]
+    resolveActionWidth: (e, l) => o[I(e.id, l)],
+    moreButtonWidthPx: o[N]
   }), [
     u,
     v,
-    n
-  ]), b = (e, i, L) => {
+    o
+  ]), b = (e, l, L) => {
     const y = /* @__PURE__ */ r(w, {
       dataTest: e.dataTest ?? `${d}-${L}`,
-      variant: e.variant ?? i,
+      variant: e.variant ?? l,
       error: e.tone === "danger",
       size: "medium",
       type: e.type ?? "button",
@@ -54,20 +54,20 @@ function ce({ leftActions: o = [], leadingSlot: t, secondaryAction: a, primaryAc
       })
     }) : y;
   };
-  return /* @__PURE__ */ l("div", {
+  return /* @__PURE__ */ i("div", {
     ref: R,
     "data-testid": d,
-    className: T("flex items-center justify-end border-0 border-t border-solid border-delta-200 bg-white", g ? "gap-2 p-2" : "gap-4 p-4", B && "rounded-b-lg", P && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", M),
+    className: T("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", g ? "gap-2 p-2" : "gap-4 p-4", B && "rounded-b-lg", P && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", M),
     children: [/* @__PURE__ */ r("div", {
       className: "flex shrink-0 flex-nowrap items-center gap-2",
-      children: t ?? /* @__PURE__ */ l(_, { children: [f.inlineActions.map(({ action: e, showLabel: i }) => /* @__PURE__ */ r("span", {
-        ref: m(I(e.id, i)),
+      children: n ?? /* @__PURE__ */ i(_, { children: [f.inlineActions.map(({ action: e, showLabel: l }) => /* @__PURE__ */ r("span", {
+        ref: m(I(e.id, l)),
         className: "inline-flex shrink-0",
         children: /* @__PURE__ */ r(G, {
           action: e,
-          showLabel: i
+          showLabel: l
         })
-      }, e.id)), f.showMoreMenu && /* @__PURE__ */ l(_, { children: [/* @__PURE__ */ r("span", {
+      }, e.id)), f.showMoreMenu && /* @__PURE__ */ i(_, { children: [/* @__PURE__ */ r("span", {
         ref: m(N),
         className: "inline-flex shrink-0",
         children: /* @__PURE__ */ r(w, {
@@ -101,7 +101,7 @@ function ce({ leftActions: o = [], leadingSlot: t, secondaryAction: a, primaryAc
           onClick: () => {
             h(null), e.onClick();
           },
-          children: /* @__PURE__ */ l("div", {
+          children: /* @__PURE__ */ i("div", {
             className: T("flex items-center gap-2", e.tone === "danger" ? "text-beta-500" : "text-delta-700"),
             children: [e.icon, /* @__PURE__ */ r("span", { children: e.label })]
           })
@@ -109,7 +109,7 @@ function ce({ leftActions: o = [], leadingSlot: t, secondaryAction: a, primaryAc
       })] })] })
     }), x && /* @__PURE__ */ r("span", {
       className: "flex min-w-px flex-1 flex-nowrap items-center justify-end",
-      children: /* @__PURE__ */ l("span", {
+      children: /* @__PURE__ */ i("span", {
         ref: m(k),
         className: "flex shrink-0 flex-nowrap items-center gap-2",
         children: [a && b(a, "outlined", "secondary"), s && b(s, "contained", "primary")]

package/package.json

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