@semcore/accordion 4.0.15 → 4.0.17
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 +12 -0
- package/lib/cjs/Accordion.js +17 -12
- package/lib/cjs/Accordion.js.map +1 -1
- package/lib/es6/Accordion.js +17 -12
- package/lib/es6/Accordion.js.map +1 -1
- package/package.json +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.17] - 2022-09-21
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.30.2 ~> 2.30.3]).
|
|
10
|
+
|
|
11
|
+
## [4.0.16] - 2022-09-30
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixed elements id uniqueness.
|
|
16
|
+
|
|
5
17
|
## [4.0.15] - 2022-08-30
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/lib/cjs/Accordion.js
CHANGED
|
@@ -37,6 +37,8 @@ var _m = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
|
|
|
37
37
|
|
|
38
38
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
39
39
|
|
|
40
|
+
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
41
|
+
|
|
40
42
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
41
43
|
|
|
42
44
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -54,16 +56,16 @@ var style = (
|
|
|
54
56
|
/*__reshadow_css_start__*/
|
|
55
57
|
_core.sstyled.insert(
|
|
56
58
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
59
|
+
".___SItemToggle_mpgce_gg_{cursor:pointer;outline:0}.___SItemToggle_mpgce_gg_.__keyboardFocused_mpgce_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_mpgce_gg_.__disabled_mpgce_gg_{opacity:0.3;cursor:default}.___SItemChevron_mpgce_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_mpgce_gg_.__selected_mpgce_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_mpgce_gg_{transition:none}}"
|
|
58
60
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
61
|
+
, "mpgce_gg_")
|
|
60
62
|
/*__reshadow_css_end__*/
|
|
61
63
|
, {
|
|
62
|
-
"__SItemToggle": "
|
|
63
|
-
"_keyboardFocused": "
|
|
64
|
-
"_disabled": "
|
|
65
|
-
"__SItemChevron": "
|
|
66
|
-
"_selected": "
|
|
64
|
+
"__SItemToggle": "___SItemToggle_mpgce_gg_",
|
|
65
|
+
"_keyboardFocused": "__keyboardFocused_mpgce_gg_",
|
|
66
|
+
"_disabled": "__disabled_mpgce_gg_",
|
|
67
|
+
"__SItemChevron": "___SItemChevron_mpgce_gg_",
|
|
68
|
+
"_selected": "__selected_mpgce_gg_"
|
|
67
69
|
});
|
|
68
70
|
|
|
69
71
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -164,15 +166,16 @@ var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
164
166
|
value: function getToggleProps() {
|
|
165
167
|
var _this$asProps2 = this.asProps,
|
|
166
168
|
value = _this$asProps2.value,
|
|
169
|
+
uid = _this$asProps2.uid,
|
|
167
170
|
selected = _this$asProps2.selected,
|
|
168
171
|
disabled = _this$asProps2.disabled;
|
|
169
172
|
return {
|
|
170
173
|
disabled: disabled,
|
|
171
174
|
onClick: disabled ? undefined : this.handleClick,
|
|
172
|
-
id: "
|
|
175
|
+
id: "igc-".concat(uid, "-").concat(value, "-toggle"),
|
|
173
176
|
role: 'button',
|
|
174
|
-
'aria-expanded': selected,
|
|
175
|
-
'aria-controls': "
|
|
177
|
+
'aria-expanded': selected || undefined,
|
|
178
|
+
'aria-controls': selected ? "igc-".concat(uid, "-").concat(value, "-collapse") : undefined
|
|
176
179
|
};
|
|
177
180
|
}
|
|
178
181
|
}, {
|
|
@@ -180,14 +183,15 @@ var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
180
183
|
value: function getCollapseProps() {
|
|
181
184
|
var _this$asProps3 = this.asProps,
|
|
182
185
|
selected = _this$asProps3.selected,
|
|
186
|
+
uid = _this$asProps3.uid,
|
|
183
187
|
duration = _this$asProps3.duration,
|
|
184
188
|
value = _this$asProps3.value;
|
|
185
189
|
return {
|
|
186
190
|
selected: selected,
|
|
187
191
|
duration: duration,
|
|
188
|
-
id: "
|
|
192
|
+
id: "igc-".concat(uid, "-").concat(value, "-collapse"),
|
|
189
193
|
role: 'region',
|
|
190
|
-
'aria-labelledby': "
|
|
194
|
+
'aria-labelledby': "igc-".concat(uid, "-").concat(value, "-toggle")
|
|
191
195
|
};
|
|
192
196
|
}
|
|
193
197
|
}, {
|
|
@@ -211,6 +215,7 @@ var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
211
215
|
exports.RootItem = RootItem;
|
|
212
216
|
(0, _defineProperty2["default"])(RootItem, "displayName", 'Item');
|
|
213
217
|
(0, _defineProperty2["default"])(RootItem, "style", style);
|
|
218
|
+
(0, _defineProperty2["default"])(RootItem, "enhance", [(0, _uniqueID["default"])()]);
|
|
214
219
|
|
|
215
220
|
var Toggle = /*#__PURE__*/function (_Component3) {
|
|
216
221
|
(0, _inherits2["default"])(Toggle, _Component3);
|
package/lib/cjs/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","undefined","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: disabled ? undefined : this.handleClick,\n id: `
|
|
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","uid","disabled","onClick","undefined","handleClick","id","role","uniqueIDEnhancement","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';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\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 static enhance = [uniqueIDEnhancement()];\n\n handleClick = () => {\n const { value, $handleInteraction } = this.asProps;\n\n $handleInteraction(value);\n };\n\n getToggleProps() {\n const { value, uid, selected, disabled } = this.asProps;\n return {\n disabled,\n onClick: disabled ? undefined : this.handleClick,\n id: `igc-${uid}-${value}-toggle`,\n role: 'button',\n 'aria-expanded': selected || undefined,\n 'aria-controls': selected ? `igc-${uid}-${value}-collapse` : undefined,\n };\n }\n\n getCollapseProps() {\n const { selected, uid, duration, value } = this.asProps;\n return {\n selected,\n duration,\n id: `igc-${uid}-${value}-collapse`,\n role: 'region',\n 'aria-labelledby': `igc-${uid}-${value}-toggle`,\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, disabled } = this.asProps;\n const SItemToggle = Root;\n\n return sstyled(styles)(\n <SItemToggle\n render={Box}\n onKeyDown={this.handleKeyDown}\n aria-disabled={disabled ? 'true' : undefined}\n />,\n );\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/Accordion.js
CHANGED
|
@@ -25,22 +25,23 @@ import { Box } from '@semcore/flex-box';
|
|
|
25
25
|
import { Collapse as CollapseAnimate } from '@semcore/animation';
|
|
26
26
|
import ChevronRight from '@semcore/icon/ChevronRight/m';
|
|
27
27
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
28
|
+
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
28
29
|
|
|
29
30
|
/*__reshadow-styles__:"./style/accordion.shadow.css"*/
|
|
30
31
|
var style = (
|
|
31
32
|
/*__reshadow_css_start__*/
|
|
32
33
|
_sstyled.insert(
|
|
33
34
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
35
|
+
".___SItemToggle_mpgce_gg_{cursor:pointer;outline:0}.___SItemToggle_mpgce_gg_.__keyboardFocused_mpgce_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_mpgce_gg_.__disabled_mpgce_gg_{opacity:0.3;cursor:default}.___SItemChevron_mpgce_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_mpgce_gg_.__selected_mpgce_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_mpgce_gg_{transition:none}}"
|
|
35
36
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
37
|
+
, "mpgce_gg_")
|
|
37
38
|
/*__reshadow_css_end__*/
|
|
38
39
|
, {
|
|
39
|
-
"__SItemToggle": "
|
|
40
|
-
"_keyboardFocused": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SItemChevron": "
|
|
43
|
-
"_selected": "
|
|
40
|
+
"__SItemToggle": "___SItemToggle_mpgce_gg_",
|
|
41
|
+
"_keyboardFocused": "__keyboardFocused_mpgce_gg_",
|
|
42
|
+
"_disabled": "__disabled_mpgce_gg_",
|
|
43
|
+
"__SItemChevron": "___SItemChevron_mpgce_gg_",
|
|
44
|
+
"_selected": "__selected_mpgce_gg_"
|
|
44
45
|
});
|
|
45
46
|
|
|
46
47
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -150,15 +151,16 @@ export var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
150
151
|
value: function getToggleProps() {
|
|
151
152
|
var _this$asProps2 = this.asProps,
|
|
152
153
|
value = _this$asProps2.value,
|
|
154
|
+
uid = _this$asProps2.uid,
|
|
153
155
|
selected = _this$asProps2.selected,
|
|
154
156
|
disabled = _this$asProps2.disabled;
|
|
155
157
|
return {
|
|
156
158
|
disabled: disabled,
|
|
157
159
|
onClick: disabled ? undefined : this.handleClick,
|
|
158
|
-
id: "
|
|
160
|
+
id: "igc-".concat(uid, "-").concat(value, "-toggle"),
|
|
159
161
|
role: 'button',
|
|
160
|
-
'aria-expanded': selected,
|
|
161
|
-
'aria-controls': "
|
|
162
|
+
'aria-expanded': selected || undefined,
|
|
163
|
+
'aria-controls': selected ? "igc-".concat(uid, "-").concat(value, "-collapse") : undefined
|
|
162
164
|
};
|
|
163
165
|
}
|
|
164
166
|
}, {
|
|
@@ -166,14 +168,15 @@ export var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
166
168
|
value: function getCollapseProps() {
|
|
167
169
|
var _this$asProps3 = this.asProps,
|
|
168
170
|
selected = _this$asProps3.selected,
|
|
171
|
+
uid = _this$asProps3.uid,
|
|
169
172
|
duration = _this$asProps3.duration,
|
|
170
173
|
value = _this$asProps3.value;
|
|
171
174
|
return {
|
|
172
175
|
selected: selected,
|
|
173
176
|
duration: duration,
|
|
174
|
-
id: "
|
|
177
|
+
id: "igc-".concat(uid, "-").concat(value, "-collapse"),
|
|
175
178
|
role: 'region',
|
|
176
|
-
'aria-labelledby': "
|
|
179
|
+
'aria-labelledby': "igc-".concat(uid, "-").concat(value, "-toggle")
|
|
177
180
|
};
|
|
178
181
|
}
|
|
179
182
|
}, {
|
|
@@ -199,6 +202,8 @@ _defineProperty(RootItem, "displayName", 'Item');
|
|
|
199
202
|
|
|
200
203
|
_defineProperty(RootItem, "style", style);
|
|
201
204
|
|
|
205
|
+
_defineProperty(RootItem, "enhance", [uniqueIDEnhancement()]);
|
|
206
|
+
|
|
202
207
|
var Toggle = /*#__PURE__*/function (_Component3) {
|
|
203
208
|
_inherits(Toggle, _Component3);
|
|
204
209
|
|
package/lib/es6/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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","undefined","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: disabled ? undefined : this.handleClick,\n id: `
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["React","createComponent","Component","sstyled","Root","Box","Collapse","CollapseAnimate","ChevronRight","keyboardFocusEnhance","uniqueIDEnhancement","RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","style","defaultValue","RootItem","uid","disabled","onClick","undefined","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';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\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 static enhance = [uniqueIDEnhancement()];\n\n handleClick = () => {\n const { value, $handleInteraction } = this.asProps;\n\n $handleInteraction(value);\n };\n\n getToggleProps() {\n const { value, uid, selected, disabled } = this.asProps;\n return {\n disabled,\n onClick: disabled ? undefined : this.handleClick,\n id: `igc-${uid}-${value}-toggle`,\n role: 'button',\n 'aria-expanded': selected || undefined,\n 'aria-controls': selected ? `igc-${uid}-${value}-collapse` : undefined,\n };\n }\n\n getCollapseProps() {\n const { selected, uid, duration, value } = this.asProps;\n return {\n selected,\n duration,\n id: `igc-${uid}-${value}-collapse`,\n role: 'region',\n 'aria-labelledby': `igc-${uid}-${value}-toggle`,\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, disabled } = this.asProps;\n const SItemToggle = Root;\n\n return sstyled(styles)(\n <SItemToggle\n render={Box}\n onKeyDown={this.handleKeyDown}\n aria-disabled={disabled ? 'true' : undefined}\n />,\n );\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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/accordion",
|
|
3
3
|
"description": "Semrush Accordion Component",
|
|
4
|
-
"version": "4.0.
|
|
4
|
+
"version": "4.0.17",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@semcore/utils": "^3.17",
|
|
17
16
|
"@semcore/animation": "^1.2",
|
|
18
17
|
"@semcore/flex-box": "^4",
|
|
19
|
-
"@semcore/icon": "^2.16"
|
|
18
|
+
"@semcore/icon": "^2.16",
|
|
19
|
+
"@semcore/utils": "^3.17"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@semcore/core": "^1.11",
|
|
@@ -31,6 +31,8 @@
|
|
|
31
31
|
"directory": "semcore/accordion"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
+
"@guidepup/playwright": "0.6.1",
|
|
35
|
+
"@playwright/test": "1.25.1",
|
|
34
36
|
"@semcore/jest-preset-ui": "1.0.0"
|
|
35
37
|
}
|
|
36
38
|
}
|