asma-ui-core 3.87.3 → 3.87.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/feedback/dialog/StyledDialog.js +68 -63
  2. package/package.json +1 -1
package/dist/components/feedback/dialog/StyledDialog.js CHANGED
@@ -1,123 +1,128 @@
1
- import { cn as p } from "../../../helpers/cn.js";
1
+ import { cn as h } from "../../../helpers/cn.js";
2
2
  import { resolveSx as S } from "../../../helpers/sx.js";
3
- import { CloseIcon as B } from "../../icons/close-icon/CloseIcon.js";
4
- import { registerOpenModalDialog as G } from "../../../hooks/useTopLayer.hook.js";
5
- import { StyledButton as L } from "../../inputs/button/StyledButton.js";
6
- import { useMobileMediaQuery as P } from "../../../hooks/useMediaQuery.hook.js";
7
- import Q from "./StyledDialog.module.js";
8
- import { useEffect as D, useLayoutEffect as $, useRef as i } from "react";
3
+ import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
4
+ import { registerOpenModalDialog as B } from "../../../hooks/useTopLayer.hook.js";
5
+ import { StyledButton as G } from "../../inputs/button/StyledButton.js";
6
+ import { useMobileMediaQuery as Q } from "../../../hooks/useMediaQuery.hook.js";
7
+ import $ from "./StyledDialog.module.js";
8
+ import { useEffect as w, useLayoutEffect as J, useRef as a } from "react";
9
9
  import { jsx as r, jsxs as l } from "react/jsx-runtime";
10
- var J = {
10
+ var U = {
11
11
  xs: 444,
12
12
  sm: 600,
13
13
  md: 900,
14
14
  lg: 1200,
15
15
  xl: 1536
16
- }, 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 }) => {
17
- const z = P(), g = i(null), m = i(null), f = i(!1), k = i(t), o = _ ?? z;
18
- D(() => {
19
- k.current && !t && n?.transition?.onExited?.(), k.current = t;
20
- }, [t, n]), $(() => {
21
- const e = g.current;
16
+ }, 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 }) => {
17
+ const z = Q(), u = a(null), f = a(null), p = a(!1), k = a(t), i = H ?? z;
18
+ w(() => {
19
+ k.current && !t && o?.transition?.onExited?.(), k.current = t;
20
+ }, [t, o]), J(() => {
21
+ const e = u.current;
22
22
  if (!e || !t) return;
23
- e.open || (m.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
24
- const x = G(e);
23
+ e.open || (f.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
24
+ const n = B(e);
25
25
  return () => {
26
- x(), m.current?.isConnected && m.current.focus({ preventScroll: !0 });
26
+ n(), f.current?.isConnected && f.current.focus({ preventScroll: !0 });
27
27
  };
28
- }, [t]), D(() => {
28
+ }, [t]), w(() => {
29
29
  if (!t) return;
30
- const e = document.body.style.overflow, x = document.documentElement.style.overflow;
30
+ const e = document.body.style.overflow, n = document.documentElement.style.overflow;
31
31
  return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
32
- document.body.style.overflow = e, document.documentElement.style.overflow = x;
32
+ document.body.style.overflow = e, document.documentElement.style.overflow = n;
33
33
  };
34
34
  }, [t]);
35
- const u = {
35
+ const x = {
36
36
  ...W,
37
- ...n?.paper
38
- }, N = h === !1 ? void 0 : J[h], { className: q, style: A, onClick: F, ...K } = n?.backdrop ?? {}, E = (e) => {
39
- f.current || (f.current = !0, window.setTimeout(() => {
40
- f.current = !1;
41
- }, 0), a?.(e, "escapeKeyDown"));
42
- }, X = (e) => {
43
- e.preventDefault(), y || E(e);
37
+ ...o?.paper
38
+ }, E = y === !1 ? void 0 : U[y], { className: L, style: q, onClick: A, ...F } = o?.backdrop ?? {}, K = (e) => {
39
+ p.current || (p.current = !0, window.setTimeout(() => {
40
+ p.current = !1;
41
+ }, 0), c?.(e, "escapeKeyDown"));
42
+ }, P = (e) => {
43
+ e.preventDefault();
44
44
  };
45
- return t ? /* @__PURE__ */ l("dialog", {
46
- ref: g,
45
+ return w(() => {
46
+ if (!t || M) return;
47
+ const e = (n) => {
48
+ if (n.key !== "Escape" || n.defaultPrevented) return;
49
+ const N = document.activeElement;
50
+ N instanceof Element && N.closest("dialog[open]") !== u.current || K(n);
51
+ };
52
+ return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
53
+ }), t ? /* @__PURE__ */ l("dialog", {
54
+ ref: u,
47
55
  tabIndex: -1,
48
- "data-testid": c,
49
- "aria-label": c,
50
- onCancel: X,
51
- onKeyDown: (e) => {
52
- e.key !== "Escape" || y || (e.preventDefault(), E(e));
53
- },
54
- 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),
56
+ "data-testid": d,
57
+ "aria-label": d,
58
+ onCancel: P,
59
+ 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),
55
60
  style: {
56
61
  zIndex: 999,
57
- ...S(O),
58
- ...R
62
+ ...S(R),
63
+ ...O
59
64
  },
60
65
  children: [/* @__PURE__ */ r("div", {
61
- ...K,
62
- className: p("absolute inset-0 bg-[#626e7eb2]", q),
63
- style: A,
66
+ ...F,
67
+ className: h("absolute inset-0 bg-[#626e7eb2]", L),
68
+ style: q,
64
69
  onClick: (e) => {
65
- F?.(e), e.defaultPrevented || a?.(e, "backdropClick");
70
+ A?.(e), e.defaultPrevented || c?.(e, "backdropClick");
66
71
  }
67
72
  }), /* @__PURE__ */ l("div", {
68
- 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),
73
+ 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),
69
74
  style: {
70
75
  minWidth: 0,
71
76
  minHeight: 0,
72
- ...!o && N ? { maxWidth: N } : {},
73
- ...o ? {
77
+ ...!i && E ? { maxWidth: E } : {},
78
+ ...i ? {
74
79
  width: "100%",
75
80
  maxWidth: "100%",
76
81
  height: "100%",
77
82
  maxHeight: "100%"
78
83
  } : {
79
- width: H ? "calc(100% - 64px)" : "auto",
84
+ width: D ? "calc(100% - 64px)" : "auto",
80
85
  maxHeight: "100%"
81
86
  },
82
- ...S(u.sx),
83
- ...u.style,
84
- ...o ? {
87
+ ...S(x.sx),
88
+ ...x.style,
89
+ ...i ? {
85
90
  width: "100%",
86
91
  maxWidth: "100%",
87
92
  height: "100%",
88
93
  maxHeight: "100%"
89
94
  } : { maxHeight: "calc(100% - 64px)" }
90
95
  },
91
- children: [(!!d || !!s || b) && /* @__PURE__ */ l("div", {
96
+ children: [(!!s || !!m || g) && /* @__PURE__ */ l("div", {
92
97
  className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
93
98
  children: [/* @__PURE__ */ l("div", {
94
99
  className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
95
- children: [d && /* @__PURE__ */ r("div", {
100
+ children: [s && /* @__PURE__ */ r("div", {
96
101
  className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
97
- children: d
98
- }), s && /* @__PURE__ */ r("div", {
99
- className: "flex text-2xl font-semibold leading-8 text-delta-800",
100
102
  children: s
103
+ }), m && /* @__PURE__ */ r("div", {
104
+ className: "flex text-2xl font-semibold leading-8 text-delta-800",
105
+ children: m
101
106
  })]
102
- }), b && /* @__PURE__ */ l("div", {
107
+ }), g && /* @__PURE__ */ l("div", {
103
108
  className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
104
- children: [I, /* @__PURE__ */ r(L, {
105
- dataTest: `close-button-${c}`,
106
- "aria-label": v ? void 0 : "Close",
109
+ children: [I, /* @__PURE__ */ r(G, {
110
+ dataTest: `close-button-${d}`,
111
+ "aria-label": b ? void 0 : "Close",
107
112
  variant: "textGray",
108
113
  size: "small",
109
- endIcon: /* @__PURE__ */ r(B, {
114
+ endIcon: /* @__PURE__ */ r(X, {
110
115
  width: 20,
111
116
  height: 20
112
117
  }),
113
118
  className: "max-w-full shrink-0 whitespace-nowrap",
114
- onClick: (e) => a?.(e, "escapeKeyDown"),
119
+ onClick: (e) => c?.(e, "escapeKeyDown"),
115
120
  style: {
116
121
  color: "var(--colors-delta-800)",
117
122
  paddingRight: "6px",
118
123
  paddingLeft: "6px"
119
124
  },
120
- children: v
125
+ children: b
121
126
  })]
122
127
  })]
123
128
  }), C]
@@ -125,5 +130,5 @@ var J = {
125
130
  }) : null;
126
131
  };
127
132
  export {
128
- ne as StyledDialog
133
+ oe as StyledDialog
129
134
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "3.87.3",
6
+ "version": "3.87.4",
7
7
  "type": "module",
8
8
  "sideEffects": [
9
9
  "**/*.css",