@cfx-dev/ui-components 2.0.6 → 2.0.8
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
|
-
.
|
|
1
|
+
._root_y0b1q_1{background-color:var(--color-accordion-background)}._item_y0b1q_5,._header_y0b1q_5{cursor:pointer;background:var(--color-accordion-background)}._triggerContainer_y0b1q_10{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:var(--quant);border-bottom:1px solid var(--color-accordion-border-color);height:calc(var(--quant) * 7.75);transition:border-bottom .25s ease-out}._triggerContainer_y0b1q_10:hover,._triggerContainer_y0b1q_10:focus-visible:not(:hover){border-bottom:2px solid rgba(var(--color-primary),1)}._triggerContainer_y0b1q_10:hover ._iconFlip_y0b1q_23,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconFlip_y0b1q_23{transform:rotateX(90deg)}._triggerContainer_y0b1q_10:hover ._iconUp_y0b1q_26,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconUp_y0b1q_26{top:calc(-1 * var(--offset-small))}._triggerContainer_y0b1q_10:hover ._iconDown_y0b1q_29,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconDown_y0b1q_29{top:var(--offset-small)}._triggerContainer_y0b1q_10 ._iconLeft_y0b1q_32{margin-right:var(--offset-small);color:rgba(var(--color-secondary),1)}._triggerContainer_y0b1q_10 ._iconRight_y0b1q_36{top:0;position:relative;color:rgba(var(--color-secondary),1);margin-left:var(--offset-small);transition:transform .25s ease-out,top .5s ease;transform-style:preserve-3d}._iconFlip_y0b1q_23{transform:rotateX(90deg)}._content_y0b1q_49{display:block;padding:calc(var(--quant) * .5) calc(var(--quant) * 6.5);overflow:hidden;max-height:0;transition:max-height .5s ease-in-out}._content_y0b1q_49._open_y0b1q_56{max-height:calc(var(--quant) * 20)}
|
|
@@ -1,120 +1,118 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as o, jsxs as f } from "react/jsx-runtime";
|
|
2
|
+
import b, { createContext as I, useState as u, useContext as w, useEffect as v } from "react";
|
|
3
3
|
import { Icon as C } from "../Icon/Icon.js";
|
|
4
4
|
import { Flex as x } from "../Layout/Flex/Flex.js";
|
|
5
|
-
import { Text as
|
|
6
|
-
import { clsx as
|
|
7
|
-
import '../../assets/Accordion.css';const
|
|
8
|
-
root:
|
|
9
|
-
item:
|
|
5
|
+
import { Text as y } from "../Text/Text.js";
|
|
6
|
+
import { clsx as h } from "../../utils/clsx.js";
|
|
7
|
+
import '../../assets/Accordion.css';const q = "_root_y0b1q_1", D = "_item_y0b1q_5", F = "_header_y0b1q_5", N = "_triggerContainer_y0b1q_10", U = "_iconFlip_y0b1q_23", T = "_iconUp_y0b1q_26", R = "_iconDown_y0b1q_29", $ = "_iconLeft_y0b1q_32", k = "_iconRight_y0b1q_36", E = "_content_y0b1q_49", L = "_open_y0b1q_56", n = {
|
|
8
|
+
root: q,
|
|
9
|
+
item: D,
|
|
10
10
|
header: F,
|
|
11
11
|
triggerContainer: N,
|
|
12
|
-
iconFlip:
|
|
12
|
+
iconFlip: U,
|
|
13
13
|
iconUp: T,
|
|
14
14
|
iconDown: R,
|
|
15
15
|
iconLeft: $,
|
|
16
16
|
iconRight: k,
|
|
17
17
|
content: E,
|
|
18
|
-
open: L
|
|
19
|
-
|
|
20
|
-
iconSlideDown: j
|
|
21
|
-
}, g = D(void 0), q = function({
|
|
18
|
+
open: L
|
|
19
|
+
}, g = I(void 0), M = function({
|
|
22
20
|
children: t,
|
|
23
|
-
className:
|
|
21
|
+
className: e
|
|
24
22
|
}) {
|
|
25
|
-
const [c, s] =
|
|
26
|
-
s((
|
|
27
|
-
const
|
|
28
|
-
return
|
|
23
|
+
const [c, s] = u(/* @__PURE__ */ new Set()), a = b.useCallback((r) => {
|
|
24
|
+
s((_) => {
|
|
25
|
+
const i = new Set(_);
|
|
26
|
+
return i.has(r) ? i.delete(r) : i.add(r), i;
|
|
29
27
|
});
|
|
30
|
-
}, []),
|
|
28
|
+
}, []), m = b.useMemo(() => ({
|
|
31
29
|
openItems: c,
|
|
32
30
|
toggleItem: a
|
|
33
31
|
}), [c, a]);
|
|
34
|
-
return /* @__PURE__ */
|
|
35
|
-
},
|
|
32
|
+
return /* @__PURE__ */ o(g.Provider, { value: m, children: /* @__PURE__ */ o("div", { className: h(n.root, e), role: "presentation", children: t }) });
|
|
33
|
+
}, P = function({
|
|
36
34
|
children: t,
|
|
37
|
-
id:
|
|
35
|
+
id: e
|
|
38
36
|
}) {
|
|
39
|
-
return /* @__PURE__ */
|
|
40
|
-
},
|
|
37
|
+
return /* @__PURE__ */ o("div", { className: n.item, id: e, role: "region", "aria-labelledby": `${e}-header`, children: t });
|
|
38
|
+
}, V = function({
|
|
41
39
|
children: t
|
|
42
40
|
}) {
|
|
43
|
-
return /* @__PURE__ */
|
|
44
|
-
},
|
|
41
|
+
return /* @__PURE__ */ o("div", { className: n.header, children: t });
|
|
42
|
+
}, B = function({
|
|
45
43
|
text: t,
|
|
46
|
-
id:
|
|
44
|
+
id: e,
|
|
47
45
|
iconLeft: c
|
|
48
46
|
}) {
|
|
49
|
-
const s =
|
|
47
|
+
const s = w(g);
|
|
50
48
|
if (!s)
|
|
51
49
|
throw new Error("AccordionTrigger must be used within an Accordion");
|
|
52
50
|
const {
|
|
53
51
|
toggleItem: a,
|
|
54
|
-
openItems:
|
|
55
|
-
} = s,
|
|
56
|
-
return
|
|
52
|
+
openItems: m
|
|
53
|
+
} = s, r = m.has(e), [_, i] = u(!1), [p, A] = u(r ? "UpChevron" : "DownChevron");
|
|
54
|
+
return v(() => {
|
|
57
55
|
const d = setTimeout(() => {
|
|
58
|
-
|
|
56
|
+
A(r ? "UpChevron" : "DownChevron"), i(!1);
|
|
59
57
|
}, 300);
|
|
60
|
-
return
|
|
61
|
-
}, [
|
|
58
|
+
return i(!0), () => clearTimeout(d);
|
|
59
|
+
}, [r]), /* @__PURE__ */ f(
|
|
62
60
|
"div",
|
|
63
61
|
{
|
|
64
|
-
className:
|
|
65
|
-
onClick: () => a(
|
|
62
|
+
className: n.triggerContainer,
|
|
63
|
+
onClick: () => a(e),
|
|
66
64
|
onKeyDown: (d) => {
|
|
67
|
-
(d.key === "Enter" || d.key === " ") && a(
|
|
65
|
+
(d.key === "Enter" || d.key === " ") && a(e);
|
|
68
66
|
},
|
|
69
67
|
role: "button",
|
|
70
68
|
tabIndex: 0,
|
|
71
|
-
"aria-expanded":
|
|
72
|
-
"aria-controls": `${
|
|
73
|
-
id: `${
|
|
69
|
+
"aria-expanded": r,
|
|
70
|
+
"aria-controls": `${e}-content`,
|
|
71
|
+
id: `${e}-header`,
|
|
74
72
|
children: [
|
|
75
73
|
/* @__PURE__ */ f(x, { centered: !0, children: [
|
|
76
|
-
c && /* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
74
|
+
c && /* @__PURE__ */ o(C, { name: c, className: n.iconLeft }),
|
|
75
|
+
/* @__PURE__ */ o(y, { size: "xxsmall", children: t })
|
|
78
76
|
] }),
|
|
79
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ o(x, { centered: !0, children: /* @__PURE__ */ o(
|
|
80
78
|
C,
|
|
81
79
|
{
|
|
82
|
-
className:
|
|
83
|
-
[
|
|
84
|
-
[
|
|
85
|
-
[
|
|
80
|
+
className: h(n.iconRight, {
|
|
81
|
+
[n.iconFlip]: _,
|
|
82
|
+
[n.iconUp]: p === "UpChevron",
|
|
83
|
+
[n.iconDown]: p === "DownChevron"
|
|
86
84
|
}),
|
|
87
|
-
name:
|
|
85
|
+
name: p
|
|
88
86
|
}
|
|
89
87
|
) })
|
|
90
88
|
]
|
|
91
89
|
}
|
|
92
90
|
);
|
|
93
|
-
},
|
|
91
|
+
}, G = function({
|
|
94
92
|
children: t,
|
|
95
|
-
id:
|
|
93
|
+
id: e
|
|
96
94
|
}) {
|
|
97
|
-
const c =
|
|
95
|
+
const c = w(g);
|
|
98
96
|
if (!c)
|
|
99
97
|
throw new Error("AccordionContent must be used within an Accordion");
|
|
100
98
|
const {
|
|
101
99
|
openItems: s
|
|
102
100
|
} = c;
|
|
103
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ o(
|
|
104
102
|
"div",
|
|
105
103
|
{
|
|
106
|
-
className:
|
|
107
|
-
id: `${
|
|
104
|
+
className: h(n.content, { [n.open]: s.has(e) }),
|
|
105
|
+
id: `${e}-content`,
|
|
108
106
|
role: "region",
|
|
109
|
-
"aria-labelledby": `${
|
|
110
|
-
children: /* @__PURE__ */
|
|
107
|
+
"aria-labelledby": `${e}-header`,
|
|
108
|
+
children: /* @__PURE__ */ o(y, { color: "secondary", size: "xxsmall", children: t })
|
|
111
109
|
}
|
|
112
110
|
);
|
|
113
111
|
};
|
|
114
112
|
export {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
113
|
+
M as Accordion,
|
|
114
|
+
G as AccordionContent,
|
|
115
|
+
V as AccordionHeader,
|
|
116
|
+
P as AccordionItem,
|
|
117
|
+
B as AccordionTrigger
|
|
120
118
|
};
|
|
@@ -321,10 +321,12 @@ $zindexMap: (
|
|
|
321
321
|
}
|
|
322
322
|
|
|
323
323
|
$mediaMap: (
|
|
324
|
-
'
|
|
324
|
+
'xxsmall': 360px,
|
|
325
|
+
'xsmall': 640px,
|
|
325
326
|
'small': 768px,
|
|
326
327
|
'medium': 1024px,
|
|
327
|
-
'large':
|
|
328
|
+
'large': 1280px,
|
|
329
|
+
'xlarge': 1536px,
|
|
328
330
|
);
|
|
329
331
|
|
|
330
332
|
@mixin media-max($size: 'medium', $fix: 'empty') {
|