@cfx-dev/ui-components 4.2.14 → 4.2.16
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.cfxui__Modal__root__53283{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) *
|
|
1
|
+
.cfxui__Modal__root__53283{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) * 37.5);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6) calc(var(--quant) * 3.75) calc(var(--quant) * 3.75) calc(var(--quant) * 3.75);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow-x:hidden;overflow-y:auto;animation-name:cfxui__Modal__modal-appearance__60dd7;animation-duration:.2s}@media (min-width: 1024px){.cfxui__Modal__root__53283{min-width:calc(var(--quant) * 75)}}@media (min-width: 1920px){.cfxui__Modal__root__53283{min-width:calc(var(--quant) * 87.5);padding:calc(var(--quant) * 6) calc(var(--quant) * 5) calc(var(--quant) * 5) calc(var(--quant) * 5)}}@keyframes cfxui__Modal__modal-appearance__60dd7{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}.cfxui__Modal__root__53283 .cfxui__Modal__close__2df9b{position:absolute;top:calc(var(--quant) * 1.5);right:calc(var(--quant) * 2);z-index:1}.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 3)}@media (min-width: 1920px){.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76{padding-bottom:calc(var(--quant) * 4)}}.cfxui__Modal__root__53283 .cfxui__Modal__header__bec76 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}.cfxui__Modal__root__53283 .cfxui__Modal__footer__bb2fc{padding-top:calc(var(--quant) * 2.5)}@media (min-width: 1920px){.cfxui__Modal__root__53283 .cfxui__Modal__footer__bb2fc{padding-top:calc(var(--quant) * 3.75)}}
|
|
@@ -1,86 +1,91 @@
|
|
|
1
1
|
import { jsx as c, jsxs as v } from "react/jsx-runtime";
|
|
2
2
|
import e from "react";
|
|
3
|
-
import { Icon as
|
|
4
|
-
import { Text as
|
|
3
|
+
import { Icon as A } from "../Icon/Icon.js";
|
|
4
|
+
import { Text as b } from "../Text/Text.js";
|
|
5
5
|
import { ui as I } from "../ui.js";
|
|
6
|
-
import { clsx as
|
|
7
|
-
import { debounce as
|
|
8
|
-
import { minmax as
|
|
9
|
-
const
|
|
10
|
-
triggerContainer:
|
|
6
|
+
import { clsx as w } from "../../utils/clsx.js";
|
|
7
|
+
import { debounce as R } from "../../utils/execution.js";
|
|
8
|
+
import { minmax as y } from "../../utils/math.js";
|
|
9
|
+
const T = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__iconFlip__367de", D = "cfxui__Accordion__iconUp__28d27", E = "cfxui__Accordion__iconDown__b9e95", N = "cfxui__Accordion__text__03dc4", U = "cfxui__Accordion__iconLeft__e348b", $ = "cfxui__Accordion__iconRight__bbf0c", F = "cfxui__Accordion__content__5ecaf", L = "cfxui__Accordion__open__ed604", S = "cfxui__Accordion__contentText__1384b", W = "cfxui__Accordion__closed__be897", o = {
|
|
10
|
+
triggerContainer: T,
|
|
11
11
|
iconFlip: k,
|
|
12
12
|
iconUp: D,
|
|
13
|
-
iconDown:
|
|
14
|
-
text:
|
|
13
|
+
iconDown: E,
|
|
14
|
+
text: N,
|
|
15
15
|
iconLeft: U,
|
|
16
16
|
iconRight: $,
|
|
17
17
|
content: F,
|
|
18
|
-
open:
|
|
19
|
-
contentText:
|
|
20
|
-
closed:
|
|
18
|
+
open: L,
|
|
19
|
+
contentText: S,
|
|
20
|
+
closed: W,
|
|
21
21
|
"content-text-closing": "cfxui__Accordion__content-text-closing__163e4"
|
|
22
|
-
}, g = e.createContext(void 0),
|
|
22
|
+
}, g = e.createContext(void 0), q = function(i) {
|
|
23
23
|
const {
|
|
24
24
|
children: t,
|
|
25
25
|
className: s
|
|
26
|
-
} = i, [n, r] = e.useState({}), l = e.useCallback((
|
|
27
|
-
r((
|
|
28
|
-
...
|
|
29
|
-
[
|
|
26
|
+
} = i, [n, r] = e.useState({}), [d, l] = e.useState(null), a = e.useRef(null), u = e.useCallback((p) => {
|
|
27
|
+
r((m) => ({
|
|
28
|
+
...m,
|
|
29
|
+
[p]: !m[p]
|
|
30
30
|
}));
|
|
31
|
-
}, []),
|
|
31
|
+
}, []), _ = e.useMemo(() => ({
|
|
32
32
|
openItems: n,
|
|
33
|
-
toggleItem:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
toggleItem: u,
|
|
34
|
+
rootWidth: d
|
|
35
|
+
}), [n, u, d]), f = e.useCallback(() => {
|
|
36
|
+
a.current && l(a.current.getBoundingClientRect().width);
|
|
37
|
+
}, []), x = e.useMemo(() => R(f, 250), [f]);
|
|
38
|
+
return e.useEffect(() => (window.addEventListener("resize", x), () => {
|
|
39
|
+
window.removeEventListener("resize", x);
|
|
40
|
+
}), [x]), /* @__PURE__ */ c(g.Provider, { value: _, children: /* @__PURE__ */ c("div", { ref: a, className: s, role: "presentation", children: t }) });
|
|
41
|
+
}, C = e.createContext(""), V = function({
|
|
37
42
|
children: i
|
|
38
43
|
}) {
|
|
39
44
|
const t = e.useId();
|
|
40
|
-
return /* @__PURE__ */ c(
|
|
41
|
-
},
|
|
45
|
+
return /* @__PURE__ */ c(C.Provider, { value: t, children: /* @__PURE__ */ c("div", { className: o.item, id: t, role: "region", "aria-labelledby": `${t}-header`, children: i }) });
|
|
46
|
+
}, G = function({
|
|
42
47
|
children: i
|
|
43
48
|
}) {
|
|
44
49
|
return /* @__PURE__ */ c("div", { className: o.header, children: i });
|
|
45
|
-
},
|
|
50
|
+
}, J = function({
|
|
46
51
|
text: i,
|
|
47
52
|
iconLeft: t
|
|
48
53
|
}) {
|
|
49
|
-
const s = e.useContext(g), n = e.useContext(
|
|
54
|
+
const s = e.useContext(g), n = e.useContext(C);
|
|
50
55
|
if (!s)
|
|
51
56
|
throw new Error("AccordionTrigger must be used within an Accordion");
|
|
52
57
|
const {
|
|
53
58
|
toggleItem: r,
|
|
54
|
-
openItems:
|
|
55
|
-
} = s,
|
|
59
|
+
openItems: d
|
|
60
|
+
} = s, l = d[n], [a, u] = e.useState(!1), [_, f] = e.useState(l ? "UpChevron" : "DownChevron"), x = e.useCallback(() => {
|
|
56
61
|
r(n);
|
|
57
|
-
}, [n, r]),
|
|
58
|
-
(
|
|
62
|
+
}, [n, r]), p = e.useCallback((m) => {
|
|
63
|
+
(m.key === "Enter" || m.key === " ") && r(n);
|
|
59
64
|
}, [n, r]);
|
|
60
65
|
return e.useEffect(() => {
|
|
61
|
-
const
|
|
62
|
-
|
|
66
|
+
const m = setTimeout(() => {
|
|
67
|
+
f(l ? "UpChevron" : "DownChevron"), u(!1);
|
|
63
68
|
}, 300);
|
|
64
|
-
return u(!0), () => clearTimeout(
|
|
65
|
-
}, [
|
|
69
|
+
return u(!0), () => clearTimeout(m);
|
|
70
|
+
}, [l]), /* @__PURE__ */ v(
|
|
66
71
|
"div",
|
|
67
72
|
{
|
|
68
73
|
className: o.triggerContainer,
|
|
69
|
-
onClick:
|
|
70
|
-
onKeyDown:
|
|
74
|
+
onClick: x,
|
|
75
|
+
onKeyDown: p,
|
|
71
76
|
role: "button",
|
|
72
77
|
tabIndex: 0,
|
|
73
|
-
"aria-expanded":
|
|
78
|
+
"aria-expanded": l,
|
|
74
79
|
"aria-controls": `${n}-content`,
|
|
75
80
|
id: `${n}-header`,
|
|
76
81
|
children: [
|
|
77
|
-
t && /* @__PURE__ */ c(
|
|
78
|
-
/* @__PURE__ */ c(
|
|
82
|
+
t && /* @__PURE__ */ c(A, { name: t, className: o.iconLeft }),
|
|
83
|
+
/* @__PURE__ */ c(b, { size: "normal", className: o.text, children: i }),
|
|
79
84
|
/* @__PURE__ */ c(
|
|
80
|
-
|
|
85
|
+
A,
|
|
81
86
|
{
|
|
82
|
-
className:
|
|
83
|
-
[o.iconFlip]:
|
|
87
|
+
className: w(o.iconRight, {
|
|
88
|
+
[o.iconFlip]: a,
|
|
84
89
|
[o.iconUp]: _ === "UpChevron",
|
|
85
90
|
[o.iconDown]: _ === "DownChevron"
|
|
86
91
|
}),
|
|
@@ -90,23 +95,22 @@ const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__ic
|
|
|
90
95
|
]
|
|
91
96
|
}
|
|
92
97
|
);
|
|
93
|
-
},
|
|
98
|
+
}, Q = function({
|
|
94
99
|
children: i
|
|
95
100
|
}) {
|
|
96
|
-
const t = e.useContext(g), s = e.useContext(
|
|
101
|
+
const t = e.useContext(g), s = e.useContext(C), [n, r] = e.useState(null), d = e.useRef(null);
|
|
97
102
|
if (!t)
|
|
98
103
|
throw new Error("AccordionContent must be used within an Accordion");
|
|
99
104
|
const {
|
|
100
|
-
openItems:
|
|
101
|
-
|
|
105
|
+
openItems: l,
|
|
106
|
+
rootWidth: a
|
|
107
|
+
} = t, u = l[s], _ = e.useMemo(() => n === null ? 250 : y(n / 150 * 250, 250, 500), [n]);
|
|
108
|
+
return e.useEffect(() => {
|
|
102
109
|
r(null);
|
|
103
|
-
}, []),
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
if (n === null && l.current) {
|
|
108
|
-
const p = l.current.getBoundingClientRect().height;
|
|
109
|
-
r(p);
|
|
110
|
+
}, [a]), e.useEffect(() => {
|
|
111
|
+
if (n === null && d.current) {
|
|
112
|
+
const f = d.current.getBoundingClientRect().height;
|
|
113
|
+
r(f);
|
|
110
114
|
}
|
|
111
115
|
}, [n]), /* @__PURE__ */ c(
|
|
112
116
|
"div",
|
|
@@ -114,23 +118,23 @@ const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__ic
|
|
|
114
118
|
id: `${s}-content`,
|
|
115
119
|
role: "region",
|
|
116
120
|
"aria-labelledby": `${s}-header`,
|
|
117
|
-
className:
|
|
118
|
-
[o.open]:
|
|
119
|
-
[o.closed]: !
|
|
121
|
+
className: w(o.content, {
|
|
122
|
+
[o.open]: u,
|
|
123
|
+
[o.closed]: !u
|
|
120
124
|
}),
|
|
121
125
|
style: {
|
|
122
126
|
"--content-display": n === null ? "inline-block" : "none",
|
|
123
127
|
"--content-height": n === null ? I.q(30) : `${n}px`,
|
|
124
|
-
"--content-animation-time": `${
|
|
128
|
+
"--content-animation-time": `${_}ms`
|
|
125
129
|
},
|
|
126
130
|
children: /* @__PURE__ */ c(
|
|
127
|
-
|
|
131
|
+
b,
|
|
128
132
|
{
|
|
129
133
|
color: "secondary",
|
|
130
134
|
size: "normal",
|
|
131
135
|
typographic: !0,
|
|
132
136
|
className: o.contentText,
|
|
133
|
-
ref:
|
|
137
|
+
ref: d,
|
|
134
138
|
children: i
|
|
135
139
|
}
|
|
136
140
|
)
|
|
@@ -138,9 +142,9 @@ const R = "cfxui__Accordion__triggerContainer__b92c1", k = "cfxui__Accordion__ic
|
|
|
138
142
|
);
|
|
139
143
|
};
|
|
140
144
|
export {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
145
|
+
q as Accordion,
|
|
146
|
+
Q as AccordionContent,
|
|
147
|
+
G as AccordionHeader,
|
|
148
|
+
V as AccordionItem,
|
|
149
|
+
J as AccordionTrigger
|
|
146
150
|
};
|