@sima-land/ui-nucleons 45.0.0-alpha.30 → 45.0.0-alpha.31
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/accordion/accordion.js
CHANGED
|
@@ -10,7 +10,6 @@ const accordion_m_scss_1 = __importDefault(require("./accordion.m.scss"));
|
|
|
10
10
|
const ArrowExpandDown_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowExpandDown"));
|
|
11
11
|
const bind_1 = __importDefault(require("classnames/bind"));
|
|
12
12
|
const accordion_provider_1 = require("./accordion-provider");
|
|
13
|
-
const context_1 = require("../context");
|
|
14
13
|
const cx = bind_1.default.bind(accordion_m_scss_1.default);
|
|
15
14
|
/**
|
|
16
15
|
* Аккордеон.
|
|
@@ -19,10 +18,8 @@ const cx = bind_1.default.bind(accordion_m_scss_1.default);
|
|
|
19
18
|
*/
|
|
20
19
|
const Accordion = ({ theme = 'light', open = false, name, summary, description, onToggle, className, children, level = 4, }) => {
|
|
21
20
|
const container = (0, react_1.useRef)(null);
|
|
22
|
-
const { createResizeObserver } = (0, react_1.useContext)(context_1.ResizeObserverContext);
|
|
23
21
|
const { register, unregister, closeGroup } = (0, react_1.useContext)(accordion_provider_1.AccordionContext);
|
|
24
22
|
const [expanded, setExpand] = (0, react_1.useState)(open);
|
|
25
|
-
const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
|
|
26
23
|
(0, react_1.useEffect)(() => {
|
|
27
24
|
if (name) {
|
|
28
25
|
const id = register(name, setExpand);
|
|
@@ -33,25 +30,18 @@ const Accordion = ({ theme = 'light', open = false, name, summary, description,
|
|
|
33
30
|
open && name && closeGroup(name);
|
|
34
31
|
setExpand(open);
|
|
35
32
|
}, [open]);
|
|
36
|
-
(0, react_1.useEffect)(() => {
|
|
37
|
-
const observer = createResizeObserver(() => setContentHeight(container.current?.scrollHeight || 0));
|
|
38
|
-
container.current && observer.observe(container.current);
|
|
39
|
-
return () => observer.disconnect();
|
|
40
|
-
}, [container.current, createResizeObserver]);
|
|
41
33
|
return ((0, jsx_runtime_1.jsxs)("div", { className: cx('root', {
|
|
42
34
|
expanded,
|
|
43
35
|
'theme-dark': theme === 'dark',
|
|
44
36
|
'theme-light': theme === 'light',
|
|
45
37
|
}, className), children: [(0, jsx_runtime_1.jsxs)("button", { type: 'button', "aria-expanded": expanded, "aria-controls": `section-${name}`, onClick: () => {
|
|
46
38
|
/**
|
|
47
|
-
*
|
|
39
|
+
* Порядок вызовов и используемых данных важен, так как сначала всё закрываем, а потом открываем конкретный.
|
|
48
40
|
*/
|
|
49
41
|
name && closeGroup(name);
|
|
50
42
|
setExpand(!expanded);
|
|
51
43
|
onToggle?.(!expanded);
|
|
52
|
-
}, tabIndex: 0, className: accordion_m_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { role: 'heading', "aria-level": level, className: accordion_m_scss_1.default.title, children: summary }), (0, jsx_runtime_1.jsx)(ArrowExpandDown_1.default, { className: accordion_m_scss_1.default.arrow })] }), (0, jsx_runtime_1.jsxs)("div", { className: accordion_m_scss_1.default.content, role: 'region', ref: container,
|
|
53
|
-
maxHeight: expanded ? contentHeight : 0,
|
|
54
|
-
}, children: [children, description && (0, jsx_runtime_1.jsx)("span", { className: accordion_m_scss_1.default.description, children: description })] })] }));
|
|
44
|
+
}, tabIndex: 0, className: accordion_m_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { role: 'heading', "aria-level": level, className: accordion_m_scss_1.default.title, children: summary }), (0, jsx_runtime_1.jsx)(ArrowExpandDown_1.default, { className: accordion_m_scss_1.default.arrow })] }), (0, jsx_runtime_1.jsxs)("div", { className: accordion_m_scss_1.default.content, role: 'region', ref: container, children: [children, description && (0, jsx_runtime_1.jsx)("span", { className: accordion_m_scss_1.default.description, children: description })] })] }));
|
|
55
45
|
};
|
|
56
46
|
exports.Accordion = Accordion;
|
|
57
47
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/accordion/accordion.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,0EAAwC;AACxC,+GAA0F;AAC1F,2DAAyC;AACzC,6DAAwD;
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/accordion/accordion.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,0EAAwC;AACxC,+GAA0F;AAC1F,2DAAyC;AACzC,6DAAwD;AAExD,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,0BAAM,CAAC,CAAC;AAuBnC;;;;GAIG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,KAAK,EACZ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,CAAC,GACH,EAAE,EAAE;IACV,MAAM,SAAS,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,qCAAgB,CAAC,CAAC;IAC1E,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAE7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;YACrC,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;QACjC,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,iCACE,SAAS,EAAE,EAAE,CACX,MAAM,EACN;YACE,QAAQ;YACR,YAAY,EAAE,KAAK,KAAK,MAAM;YAC9B,aAAa,EAAE,KAAK,KAAK,OAAO;SACjC,EACD,SAAS,CACV,aAED,oCACE,IAAI,EAAC,QAAQ,mBACE,QAAQ,mBACR,WAAW,IAAI,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE;oBACZ;;uBAEG;oBACH,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;oBACzB,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;oBACrB,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;gBACxB,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,0BAAM,CAAC,MAAM,aAExB,iCAAM,IAAI,EAAC,SAAS,gBAAa,KAAK,EAAE,SAAS,EAAE,0BAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAI,EACtF,uBAAC,yBAAkB,IAAC,SAAS,EAAE,0BAAM,CAAC,KAAK,GAAI,IACxC,EACT,iCAAK,SAAS,EAAE,0BAAM,CAAC,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,SAAS,aACzD,QAAQ,EACR,WAAW,IAAI,iCAAM,SAAS,EAAE,0BAAM,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,GAAI,IAC1E,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AA/DW,QAAA,SAAS,aA+DpB"}
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
.root {
|
|
4
4
|
width: 100%;
|
|
5
5
|
border-radius: 8px;
|
|
6
|
-
display:
|
|
7
|
-
|
|
6
|
+
display: grid;
|
|
7
|
+
grid-template-rows: min-content 0fr;
|
|
8
|
+
transition: grid-template-rows 200ms ease;
|
|
8
9
|
&.theme-light {
|
|
9
10
|
background-color: colors.$basic-gray4;
|
|
10
11
|
--text-color: #{colors.$basic-gray87};
|
|
@@ -22,12 +23,14 @@
|
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
.expanded {
|
|
26
|
+
grid-template-rows: min-content 1fr;
|
|
25
27
|
.arrow {
|
|
26
28
|
transform: rotate(180deg);
|
|
27
29
|
}
|
|
28
30
|
.content {
|
|
29
31
|
padding: 0 16px;
|
|
30
32
|
margin-bottom: 16px;
|
|
33
|
+
opacity: 1;
|
|
31
34
|
}
|
|
32
35
|
.header:focus-visible {
|
|
33
36
|
border-radius: 8px 8px 0 0;
|
|
@@ -72,7 +75,7 @@
|
|
|
72
75
|
.content {
|
|
73
76
|
padding: 0 16px;
|
|
74
77
|
overflow: hidden;
|
|
75
|
-
|
|
78
|
+
opacity: 0;
|
|
76
79
|
color: var(--text-color);
|
|
77
80
|
}
|
|
78
81
|
|
package/package.json
CHANGED