@cfx-dev/ui-components 2.1.8 → 2.1.9
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.
package/dist/assets/Modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_w22bc_1{flex-shrink:0;position:relative;display:flex;flex-direction:column;max-width:calc((var(--width) - var(--offset-safezone) * 2) * 1);min-width:calc(var(--quant) * 50);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden;animation-name:_modal-appearance_w22bc_1;animation-duration:.2s}@media (min-width: 768px){._root_w22bc_1{min-width:calc(var(--quant) * 80)}}@media (min-width: 1280px){._root_w22bc_1{min-width:calc(var(--quant) * 100)}}@keyframes _modal-appearance_w22bc_1{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}._root_w22bc_1 ._close_w22bc_36{position:absolute;top:calc(var(--quant) * 2);right:calc(var(--quant) * 2.5);z-index:1}._root_w22bc_1 ._header_w22bc_42{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 4)}._root_w22bc_1 ._header_w22bc_42 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}._root_w22bc_1 ._footer_w22bc_52{padding-top:calc(var(--quant) * 6)}
|
|
@@ -1,69 +1,83 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as i, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import N from "react";
|
|
3
3
|
import "../Button/Button.js";
|
|
4
|
-
import { ButtonBar as
|
|
4
|
+
import { ButtonBar as k } from "../Button/ButtonBar.js";
|
|
5
5
|
import "../Button/LinkButton.js";
|
|
6
|
-
import
|
|
6
|
+
import y from "../IconButton/IconButton.js";
|
|
7
7
|
import { Overlay as t } from "../Overlay/Overlay.js";
|
|
8
|
-
import { Text as
|
|
9
|
-
import { clsx as
|
|
8
|
+
import { Text as m } from "../Text/Text.js";
|
|
9
|
+
import { clsx as l } from "../../utils/clsx.js";
|
|
10
10
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
11
|
-
import { useKeyboardClose as
|
|
11
|
+
import { useKeyboardClose as w } from "../../utils/hooks/useKeyboardClose.js";
|
|
12
12
|
import "../../index-2hJuj4UN.js";
|
|
13
|
-
import '../../assets/Modal.css';const B = "
|
|
13
|
+
import '../../assets/Modal.css';const B = "_root_w22bc_1", v = "_close_w22bc_36", x = "_header_w22bc_42", g = "_footer_w22bc_52", r = {
|
|
14
14
|
root: B,
|
|
15
|
-
"modal-appearance": "_modal-
|
|
16
|
-
close:
|
|
15
|
+
"modal-appearance": "_modal-appearance_w22bc_1",
|
|
16
|
+
close: v,
|
|
17
17
|
header: x,
|
|
18
18
|
footer: g
|
|
19
19
|
};
|
|
20
|
-
function p(
|
|
20
|
+
function p(c) {
|
|
21
21
|
const {
|
|
22
22
|
onClose: o,
|
|
23
|
-
children:
|
|
23
|
+
children: s,
|
|
24
24
|
className: e,
|
|
25
|
+
overlayClassName: b,
|
|
25
26
|
backdropClassName: f,
|
|
26
|
-
contentClassName:
|
|
27
|
-
ariaDescribedby:
|
|
28
|
-
ariaLabelledby:
|
|
29
|
-
disableBackdropClose:
|
|
30
|
-
disableFocusLock:
|
|
31
|
-
} =
|
|
32
|
-
|
|
33
|
-
}, [o,
|
|
34
|
-
return
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
-
|
|
37
|
-
"div",
|
|
27
|
+
contentClassName: _,
|
|
28
|
+
ariaDescribedby: h,
|
|
29
|
+
ariaLabelledby: u,
|
|
30
|
+
disableBackdropClose: n = !1,
|
|
31
|
+
disableFocusLock: C = !1
|
|
32
|
+
} = c, d = N.useCallback(() => {
|
|
33
|
+
n || !o || o();
|
|
34
|
+
}, [o, n]);
|
|
35
|
+
return w(d), /* @__PURE__ */ i(t, { className: l(r.overlay, b), children: [
|
|
36
|
+
/* @__PURE__ */ a(
|
|
37
|
+
t.Backdrop,
|
|
38
38
|
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"aria-labelledby": b,
|
|
42
|
-
className: m(s.root, e),
|
|
43
|
-
children: [
|
|
44
|
-
!!o && /* @__PURE__ */ r(N, { className: s.close, name: "Close", onClick: o }),
|
|
45
|
-
a
|
|
46
|
-
]
|
|
39
|
+
onClick: d,
|
|
40
|
+
className: l(r.backdrop, f)
|
|
47
41
|
}
|
|
48
|
-
)
|
|
42
|
+
),
|
|
43
|
+
/* @__PURE__ */ a(
|
|
44
|
+
t.Content,
|
|
45
|
+
{
|
|
46
|
+
className: _,
|
|
47
|
+
disableFocusLock: C,
|
|
48
|
+
children: /* @__PURE__ */ i(
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
role: "dialog",
|
|
52
|
+
"aria-describedby": h,
|
|
53
|
+
"aria-labelledby": u,
|
|
54
|
+
className: l(r.root, e),
|
|
55
|
+
children: [
|
|
56
|
+
!!o && /* @__PURE__ */ a(y, { className: r.close, name: "Close", onClick: o }),
|
|
57
|
+
s
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
)
|
|
49
63
|
] });
|
|
50
64
|
}
|
|
51
65
|
p.Header = function(o) {
|
|
52
66
|
const {
|
|
53
|
-
title:
|
|
67
|
+
title: s,
|
|
54
68
|
description: e
|
|
55
69
|
} = o;
|
|
56
|
-
return /* @__PURE__ */
|
|
57
|
-
/* @__PURE__ */
|
|
58
|
-
|
|
70
|
+
return /* @__PURE__ */ i("div", { className: r.header, children: [
|
|
71
|
+
/* @__PURE__ */ a(
|
|
72
|
+
m,
|
|
59
73
|
{
|
|
60
74
|
weight: "bold",
|
|
61
75
|
size: "large",
|
|
62
|
-
children:
|
|
76
|
+
children: s
|
|
63
77
|
}
|
|
64
78
|
),
|
|
65
|
-
e && /* @__PURE__ */
|
|
66
|
-
|
|
79
|
+
e && /* @__PURE__ */ a(
|
|
80
|
+
m,
|
|
67
81
|
{
|
|
68
82
|
size: "small",
|
|
69
83
|
color: "secondary",
|
|
@@ -74,10 +88,10 @@ p.Header = function(o) {
|
|
|
74
88
|
};
|
|
75
89
|
p.Footer = function(o) {
|
|
76
90
|
const {
|
|
77
|
-
className:
|
|
91
|
+
className: s,
|
|
78
92
|
...e
|
|
79
93
|
} = o;
|
|
80
|
-
return /* @__PURE__ */
|
|
94
|
+
return /* @__PURE__ */ a(k, { ...e, className: l(r.footer, s) });
|
|
81
95
|
};
|
|
82
96
|
export {
|
|
83
97
|
p as Modal
|