@semcore/accordion 4.0.8 → 4.0.11
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/lib/cjs/Accordion.js +13 -10
- package/lib/cjs/Accordion.js.map +1 -1
- package/lib/cjs/style/accordion.shadow.css +0 -1
- package/lib/es6/Accordion.js +13 -10
- package/lib/es6/Accordion.js.map +1 -1
- package/lib/es6/style/accordion.shadow.css +0 -1
- package/package.json +2 -2
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.11] - 2022-08-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.36.0 ~> 3.37.0]).
|
|
10
|
+
|
|
11
|
+
## [4.0.10] - 2022-08-10
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixed disabled items handling to improve component accessibility.
|
|
16
|
+
|
|
17
|
+
## [4.0.9] - 2022-07-25
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.29.1 ~> 2.29.2]).
|
|
22
|
+
|
|
5
23
|
## [4.0.8] - 2022-07-22
|
|
6
24
|
|
|
7
25
|
### Changed
|
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_ixe23_gg_{cursor:pointer;outline:0}.___SItemToggle_ixe23_gg_.__keyboardFocused_ixe23_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_ixe23_gg_.__disabled_ixe23_gg_{opacity:0.3;cursor:default}.___SItemChevron_ixe23_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_ixe23_gg_.__selected_ixe23_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_ixe23_gg_{transition:none}}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
59
|
+
, "ixe23_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SItemToggle": "
|
|
63
|
-
"_keyboardFocused": "
|
|
64
|
-
"_disabled": "
|
|
65
|
-
"__SItemChevron": "
|
|
66
|
-
"_selected": "
|
|
62
|
+
"__SItemToggle": "___SItemToggle_ixe23_gg_",
|
|
63
|
+
"_keyboardFocused": "__keyboardFocused_ixe23_gg_",
|
|
64
|
+
"_disabled": "__disabled_ixe23_gg_",
|
|
65
|
+
"__SItemChevron": "___SItemChevron_ixe23_gg_",
|
|
66
|
+
"_selected": "__selected_ixe23_gg_"
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -168,7 +168,7 @@ var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
168
168
|
disabled = _this$asProps2.disabled;
|
|
169
169
|
return {
|
|
170
170
|
disabled: disabled,
|
|
171
|
-
onClick: this.handleClick,
|
|
171
|
+
onClick: disabled ? undefined : this.handleClick,
|
|
172
172
|
id: "trigger-".concat(value),
|
|
173
173
|
role: 'button',
|
|
174
174
|
'aria-expanded': selected,
|
|
@@ -238,10 +238,13 @@ var Toggle = /*#__PURE__*/function (_Component3) {
|
|
|
238
238
|
var _ref = this.asProps,
|
|
239
239
|
_ref4;
|
|
240
240
|
|
|
241
|
-
var
|
|
241
|
+
var _this$asProps4 = this.asProps,
|
|
242
|
+
styles = _this$asProps4.styles,
|
|
243
|
+
disabled = _this$asProps4.disabled;
|
|
242
244
|
var SItemToggle = _flexBox.Box;
|
|
243
245
|
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemToggle, _ref4.cn("SItemToggle", _objectSpread({}, (0, _core.assignProps)({
|
|
244
|
-
"onKeyDown": this.handleKeyDown
|
|
246
|
+
"onKeyDown": this.handleKeyDown,
|
|
247
|
+
"aria-disabled": disabled ? 'true' : undefined
|
|
245
248
|
}, _ref))));
|
|
246
249
|
}
|
|
247
250
|
}]);
|
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","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
|
|
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: `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, 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
|
@@ -31,16 +31,16 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SItemToggle_ixe23_gg_{cursor:pointer;outline:0}.___SItemToggle_ixe23_gg_.__keyboardFocused_ixe23_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_ixe23_gg_.__disabled_ixe23_gg_{opacity:0.3;cursor:default}.___SItemChevron_ixe23_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_ixe23_gg_.__selected_ixe23_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_ixe23_gg_{transition:none}}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "ixe23_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SItemToggle": "
|
|
40
|
-
"_keyboardFocused": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SItemChevron": "
|
|
43
|
-
"_selected": "
|
|
39
|
+
"__SItemToggle": "___SItemToggle_ixe23_gg_",
|
|
40
|
+
"_keyboardFocused": "__keyboardFocused_ixe23_gg_",
|
|
41
|
+
"_disabled": "__disabled_ixe23_gg_",
|
|
42
|
+
"__SItemChevron": "___SItemChevron_ixe23_gg_",
|
|
43
|
+
"_selected": "__selected_ixe23_gg_"
|
|
44
44
|
});
|
|
45
45
|
|
|
46
46
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -154,7 +154,7 @@ export var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
154
154
|
disabled = _this$asProps2.disabled;
|
|
155
155
|
return {
|
|
156
156
|
disabled: disabled,
|
|
157
|
-
onClick: this.handleClick,
|
|
157
|
+
onClick: disabled ? undefined : this.handleClick,
|
|
158
158
|
id: "trigger-".concat(value),
|
|
159
159
|
role: 'button',
|
|
160
160
|
'aria-expanded': selected,
|
|
@@ -226,10 +226,13 @@ var Toggle = /*#__PURE__*/function (_Component3) {
|
|
|
226
226
|
var _ref = this.asProps,
|
|
227
227
|
_ref4;
|
|
228
228
|
|
|
229
|
-
var
|
|
229
|
+
var _this$asProps4 = this.asProps,
|
|
230
|
+
styles = _this$asProps4.styles,
|
|
231
|
+
disabled = _this$asProps4.disabled;
|
|
230
232
|
var SItemToggle = Box;
|
|
231
233
|
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SItemToggle, _ref4.cn("SItemToggle", _objectSpread({}, _assignProps({
|
|
232
|
-
"onKeyDown": this.handleKeyDown
|
|
234
|
+
"onKeyDown": this.handleKeyDown,
|
|
235
|
+
"aria-disabled": disabled ? 'true' : undefined
|
|
233
236
|
}, _ref))));
|
|
234
237
|
}
|
|
235
238
|
}]);
|
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","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
|
|
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: `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, 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
|
-
"description": "
|
|
4
|
-
"version": "4.0.
|
|
3
|
+
"description": "Semrush Accordion Component",
|
|
4
|
+
"version": "4.0.11",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|