@semcore/accordion 4.0.6 → 4.0.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/CHANGELOG.md +18 -0
- package/README.md +6 -4
- package/lib/cjs/Accordion.js +7 -7
- package/lib/cjs/Accordion.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Accordion.js +7 -7
- package/lib/es6/Accordion.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Accordion.jsx +0 -142
- package/src/index.d.ts +0 -61
- package/src/index.js +0 -2
- package/src/style/accordion.shadow.css +0 -31
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.9] - 2022-07-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.29.1 ~> 2.29.2]).
|
|
10
|
+
|
|
11
|
+
## [4.0.8] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
16
|
+
|
|
17
|
+
## [4.0.7] - 2022-07-21
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
22
|
+
|
|
5
23
|
## [4.0.6] - 2022-07-07
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,21 +42,23 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import Accordion from '@semcore/accordion';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
|
-
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
|
|
54
|
+
and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
55
|
|
|
55
56
|
## 🤝 Contributing
|
|
56
57
|
|
|
57
58
|
Contributions, issues and feature requests are welcome!
|
|
58
59
|
|
|
59
|
-
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
|
|
60
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
|
|
61
|
+
the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
62
|
|
|
61
63
|
## Show your support
|
|
62
64
|
|
package/lib/cjs/Accordion.js
CHANGED
|
@@ -54,16 +54,16 @@ var style = (
|
|
|
54
54
|
/*__reshadow_css_start__*/
|
|
55
55
|
_core.sstyled.insert(
|
|
56
56
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
57
|
+
".___SItemToggle_exwtf_gg_{cursor:pointer;outline:0}.___SItemToggle_exwtf_gg_.__keyboardFocused_exwtf_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_exwtf_gg_.__disabled_exwtf_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_exwtf_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_exwtf_gg_.__selected_exwtf_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_exwtf_gg_{transition:none}}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
59
|
+
, "exwtf_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SItemToggle": "
|
|
63
|
-
"_keyboardFocused": "
|
|
64
|
-
"_disabled": "
|
|
65
|
-
"__SItemChevron": "
|
|
66
|
-
"_selected": "
|
|
62
|
+
"__SItemToggle": "___SItemToggle_exwtf_gg_",
|
|
63
|
+
"_keyboardFocused": "__keyboardFocused_exwtf_gg_",
|
|
64
|
+
"_disabled": "__disabled_exwtf_gg_",
|
|
65
|
+
"__SItemChevron": "___SItemChevron_exwtf_gg_",
|
|
66
|
+
"_selected": "__selected_exwtf_gg_"
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","Component","style","defaultValue","RootItem","disabled","onClick","handleClick","id","role","Toggle","e","key","preventDefault","currentTarget","click","styles","SItemToggle","Box","sstyled","handleKeyDown","keyboardFocusEnhance","Chevron","props","SItemChevron","ChevronRight","Collapse","CollapseAnimate","Item","createComponent","Accordion"],"sources":["../../src/Accordion.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Collapse as CollapseAnimate } from '@semcore/animation';\nimport ChevronRight from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component {\n static displayName = 'Accordion';\n static style = style;\n static defaultProps = {\n defaultValue: [],\n duration: 350,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleToggleInteraction = (newValue) => {\n const { value } = this.asProps;\n\n if (Array.isArray(value)) {\n const indexOfNewValue = value.indexOf(newValue);\n const result = [...value];\n indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n this.handlers.value(result);\n } else {\n this.handlers.value(value === newValue ? null : newValue);\n }\n };\n\n getItemProps({ value }) {\n const { value: selectedValue, duration } = this.asProps;\n const selected = Array.isArray(selectedValue)\n ? selectedValue.includes(value)\n : selectedValue === value;\n return {\n selected,\n duration,\n $handleInteraction: this.handleToggleInteraction,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nexport class RootItem extends Component {\n static displayName = 'Item';\n static style = style;\n\n handleClick = () => {\n const { value, $handleInteraction } = this.asProps;\n\n $handleInteraction(value);\n };\n\n getToggleProps() {\n const { value, selected, disabled } = this.asProps;\n return {\n disabled,\n onClick: this.handleClick,\n id: `trigger-${value}`,\n role: 'button',\n 'aria-expanded': selected,\n 'aria-controls': `content-${value}`,\n };\n }\n\n getCollapseProps() {\n const { selected, duration, value } = this.asProps;\n return {\n selected,\n duration,\n id: `content-${value}`,\n role: 'region',\n 'aria-labelledby': `trigger-${value}`,\n };\n }\n\n getChevronProps() {\n const { selected } = this.asProps;\n return {\n selected,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nclass Toggle extends Component {\n static enhance = [keyboardFocusEnhance()];\n\n handleKeyDown(e) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n e.currentTarget.click();\n }\n }\n\n render() {\n const { styles } = this.asProps;\n const SItemToggle = Root;\n\n return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);\n }\n}\n\nfunction Chevron(props) {\n const { styles } = props;\n const SItemChevron = Root;\n return sstyled(styles)(<SItemChevron render={ChevronRight} />);\n}\n\nfunction Collapse(props) {\n const { selected } = props;\n return <Root render={CollapseAnimate} visible={selected} interactive />;\n}\n\nconst Item = createComponent(RootItem, {\n Toggle,\n Chevron,\n Collapse,\n});\n\nconst Accordion = createComponent(RootAccordion, {\n Item,\n});\n\nexport default Accordion;\n"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Accordion';\nexport * from './Accordion';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/lib/es6/Accordion.js
CHANGED
|
@@ -31,16 +31,16 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SItemToggle_exwtf_gg_{cursor:pointer;outline:0}.___SItemToggle_exwtf_gg_.__keyboardFocused_exwtf_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_exwtf_gg_.__disabled_exwtf_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_exwtf_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_exwtf_gg_.__selected_exwtf_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_exwtf_gg_{transition:none}}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "exwtf_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SItemToggle": "
|
|
40
|
-
"_keyboardFocused": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SItemChevron": "
|
|
43
|
-
"_selected": "
|
|
39
|
+
"__SItemToggle": "___SItemToggle_exwtf_gg_",
|
|
40
|
+
"_keyboardFocused": "__keyboardFocused_exwtf_gg_",
|
|
41
|
+
"_disabled": "__disabled_exwtf_gg_",
|
|
42
|
+
"__SItemChevron": "___SItemChevron_exwtf_gg_",
|
|
43
|
+
"_selected": "__selected_exwtf_gg_"
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
package/lib/es6/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["React","createComponent","Component","sstyled","Root","Box","Collapse","CollapseAnimate","ChevronRight","keyboardFocusEnhance","RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","style","defaultValue","RootItem","disabled","onClick","handleClick","id","role","Toggle","e","key","preventDefault","currentTarget","click","styles","SItemToggle","handleKeyDown","Chevron","props","SItemChevron","Item","Accordion"],"sources":["../../src/Accordion.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Collapse as CollapseAnimate } from '@semcore/animation';\nimport ChevronRight from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component {\n static displayName = 'Accordion';\n static style = style;\n static defaultProps = {\n defaultValue: [],\n duration: 350,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleToggleInteraction = (newValue) => {\n const { value } = this.asProps;\n\n if (Array.isArray(value)) {\n const indexOfNewValue = value.indexOf(newValue);\n const result = [...value];\n indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n this.handlers.value(result);\n } else {\n this.handlers.value(value === newValue ? null : newValue);\n }\n };\n\n getItemProps({ value }) {\n const { value: selectedValue, duration } = this.asProps;\n const selected = Array.isArray(selectedValue)\n ? selectedValue.includes(value)\n : selectedValue === value;\n return {\n selected,\n duration,\n $handleInteraction: this.handleToggleInteraction,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nexport class RootItem extends Component {\n static displayName = 'Item';\n static style = style;\n\n handleClick = () => {\n const { value, $handleInteraction } = this.asProps;\n\n $handleInteraction(value);\n };\n\n getToggleProps() {\n const { value, selected, disabled } = this.asProps;\n return {\n disabled,\n onClick: this.handleClick,\n id: `trigger-${value}`,\n role: 'button',\n 'aria-expanded': selected,\n 'aria-controls': `content-${value}`,\n };\n }\n\n getCollapseProps() {\n const { selected, duration, value } = this.asProps;\n return {\n selected,\n duration,\n id: `content-${value}`,\n role: 'region',\n 'aria-labelledby': `trigger-${value}`,\n };\n }\n\n getChevronProps() {\n const { selected } = this.asProps;\n return {\n selected,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nclass Toggle extends Component {\n static enhance = [keyboardFocusEnhance()];\n\n handleKeyDown(e) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n e.currentTarget.click();\n }\n }\n\n render() {\n const { styles } = this.asProps;\n const SItemToggle = Root;\n\n return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);\n }\n}\n\nfunction Chevron(props) {\n const { styles } = props;\n const SItemChevron = Root;\n return sstyled(styles)(<SItemChevron render={ChevronRight} />);\n}\n\nfunction Collapse(props) {\n const { selected } = props;\n return <Root render={CollapseAnimate} visible={selected} interactive />;\n}\n\nconst Item = createComponent(RootItem, {\n Toggle,\n Chevron,\n Collapse,\n});\n\nconst Accordion = createComponent(RootAccordion, {\n Item,\n});\n\nexport default Accordion;\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Accordion';\nexport * from './Accordion';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB;AACA,cAAc,aAAd"}
|
package/package.json
CHANGED
package/src/Accordion.jsx
DELETED
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import { Collapse as CollapseAnimate } from '@semcore/animation';
|
|
5
|
-
import ChevronRight from '@semcore/icon/ChevronRight/m';
|
|
6
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
7
|
-
|
|
8
|
-
import style from './style/accordion.shadow.css';
|
|
9
|
-
|
|
10
|
-
class RootAccordion extends Component {
|
|
11
|
-
static displayName = 'Accordion';
|
|
12
|
-
static style = style;
|
|
13
|
-
static defaultProps = {
|
|
14
|
-
defaultValue: [],
|
|
15
|
-
duration: 350,
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
uncontrolledProps() {
|
|
19
|
-
return {
|
|
20
|
-
value: null,
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
handleToggleInteraction = (newValue) => {
|
|
25
|
-
const { value } = this.asProps;
|
|
26
|
-
|
|
27
|
-
if (Array.isArray(value)) {
|
|
28
|
-
const indexOfNewValue = value.indexOf(newValue);
|
|
29
|
-
const result = [...value];
|
|
30
|
-
indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);
|
|
31
|
-
this.handlers.value(result);
|
|
32
|
-
} else {
|
|
33
|
-
this.handlers.value(value === newValue ? null : newValue);
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
getItemProps({ value }) {
|
|
38
|
-
const { value: selectedValue, duration } = this.asProps;
|
|
39
|
-
const selected = Array.isArray(selectedValue)
|
|
40
|
-
? selectedValue.includes(value)
|
|
41
|
-
: selectedValue === value;
|
|
42
|
-
return {
|
|
43
|
-
selected,
|
|
44
|
-
duration,
|
|
45
|
-
$handleInteraction: this.handleToggleInteraction,
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
render() {
|
|
50
|
-
const { Children } = this.asProps;
|
|
51
|
-
return <Children />;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export class RootItem extends Component {
|
|
56
|
-
static displayName = 'Item';
|
|
57
|
-
static style = style;
|
|
58
|
-
|
|
59
|
-
handleClick = () => {
|
|
60
|
-
const { value, $handleInteraction } = this.asProps;
|
|
61
|
-
|
|
62
|
-
$handleInteraction(value);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
getToggleProps() {
|
|
66
|
-
const { value, selected, disabled } = this.asProps;
|
|
67
|
-
return {
|
|
68
|
-
disabled,
|
|
69
|
-
onClick: this.handleClick,
|
|
70
|
-
id: `trigger-${value}`,
|
|
71
|
-
role: 'button',
|
|
72
|
-
'aria-expanded': selected,
|
|
73
|
-
'aria-controls': `content-${value}`,
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
getCollapseProps() {
|
|
78
|
-
const { selected, duration, value } = this.asProps;
|
|
79
|
-
return {
|
|
80
|
-
selected,
|
|
81
|
-
duration,
|
|
82
|
-
id: `content-${value}`,
|
|
83
|
-
role: 'region',
|
|
84
|
-
'aria-labelledby': `trigger-${value}`,
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
getChevronProps() {
|
|
89
|
-
const { selected } = this.asProps;
|
|
90
|
-
return {
|
|
91
|
-
selected,
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
render() {
|
|
96
|
-
const { Children } = this.asProps;
|
|
97
|
-
return <Children />;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
class Toggle extends Component {
|
|
102
|
-
static enhance = [keyboardFocusEnhance()];
|
|
103
|
-
|
|
104
|
-
handleKeyDown(e) {
|
|
105
|
-
switch (e.key) {
|
|
106
|
-
case 'Enter':
|
|
107
|
-
case ' ':
|
|
108
|
-
e.preventDefault();
|
|
109
|
-
e.currentTarget.click();
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
render() {
|
|
114
|
-
const { styles } = this.asProps;
|
|
115
|
-
const SItemToggle = Root;
|
|
116
|
-
|
|
117
|
-
return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
function Chevron(props) {
|
|
122
|
-
const { styles } = props;
|
|
123
|
-
const SItemChevron = Root;
|
|
124
|
-
return sstyled(styles)(<SItemChevron render={ChevronRight} />);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
function Collapse(props) {
|
|
128
|
-
const { selected } = props;
|
|
129
|
-
return <Root render={CollapseAnimate} visible={selected} interactive />;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
const Item = createComponent(RootItem, {
|
|
133
|
-
Toggle,
|
|
134
|
-
Chevron,
|
|
135
|
-
Collapse,
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
const Accordion = createComponent(RootAccordion, {
|
|
139
|
-
Item,
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
export default Accordion;
|
package/src/index.d.ts
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { Box, IFlexProps } from '@semcore/flex-box';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { ICollapseProps } from '@semcore/animation';
|
|
4
|
-
|
|
5
|
-
export type AccordionValue = null | number | string | Array<number | string | null>;
|
|
6
|
-
|
|
7
|
-
export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
|
|
8
|
-
/** Value for the active tab. Can be set as stroke, number, null or as array.
|
|
9
|
-
* @type AccordionValue
|
|
10
|
-
* */
|
|
11
|
-
value?: T;
|
|
12
|
-
/**
|
|
13
|
-
* Value of the active tabs selected by default
|
|
14
|
-
* @type AccordionValue
|
|
15
|
-
* @default []
|
|
16
|
-
*/
|
|
17
|
-
defaultValue?: T;
|
|
18
|
-
/** Called when the selection is changed
|
|
19
|
-
* @type (value: AccordionValue, event?: React.SyntheticEvent) => void
|
|
20
|
-
* */
|
|
21
|
-
onChange?: (value: T, event?: React.SyntheticEvent) => void;
|
|
22
|
-
/** Animation duration
|
|
23
|
-
* @default 350 */
|
|
24
|
-
duration?: number;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export interface IAccordionContext {
|
|
28
|
-
getItemProps: PropGetterFn;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export interface IAccordionHandlers {
|
|
32
|
-
value: (value: AccordionValue) => void;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export interface IAccordionItemProps {
|
|
36
|
-
/** Tab value */
|
|
37
|
-
value: string | number;
|
|
38
|
-
/** Disabling selection changes */
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface IAccordionItemContext {
|
|
43
|
-
getToggleProps?: PropGetterFn;
|
|
44
|
-
getCollapseProps?: PropGetterFn;
|
|
45
|
-
getChevronProps?: PropGetterFn;
|
|
46
|
-
selected?: boolean;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
declare const Accordion: (<T, V extends AccordionValue = AccordionValue>(
|
|
50
|
-
props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,
|
|
51
|
-
) => ReturnEl) & {
|
|
52
|
-
Item: (<T>(
|
|
53
|
-
props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,
|
|
54
|
-
) => ReturnEl) & {
|
|
55
|
-
Toggle: typeof Box;
|
|
56
|
-
Chevron: typeof Box;
|
|
57
|
-
Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
|
|
58
|
-
};
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
export default Accordion;
|
package/src/index.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SItemToggle {
|
|
4
|
-
cursor: pointer;
|
|
5
|
-
outline: 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
SItemToggle[keyboardFocused] {
|
|
9
|
-
box-shadow: var(--keyboard-focus);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
SItemToggle[disabled] {
|
|
13
|
-
opacity: var(--disabled-opacity);
|
|
14
|
-
cursor: default;
|
|
15
|
-
pointer-events: none;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
SItemChevron {
|
|
19
|
-
transform: rotate(0deg);
|
|
20
|
-
transition: transform 250ms ease-out;
|
|
21
|
-
|
|
22
|
-
&[selected] {
|
|
23
|
-
transform: rotate(90deg);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media (prefers-reduced-motion) {
|
|
28
|
-
SItemChevron {
|
|
29
|
-
transition: none;
|
|
30
|
-
}
|
|
31
|
-
}
|