@semcore/accordion 4.3.9 → 4.3.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 +8 -2
- package/lib/cjs/Accordion.js +9 -9
- package/lib/cjs/Accordion.js.map +1 -1
- package/lib/es6/Accordion.js +9 -9
- package/lib/es6/Accordion.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [4.3.
|
|
5
|
+
## [4.3.11] - 2023-03-22
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Toggles attributes `aria-expanded` and `aria-controls` were not applied when accordion section was closed.
|
|
10
|
+
|
|
11
|
+
## [4.3.10] - 2023-03-22
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
8
14
|
|
|
9
|
-
- Version patch update due to children dependencies update (`@semcore/
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.47.3 ~> 3.47.4]).
|
|
10
16
|
|
|
11
17
|
## [4.3.5] - 2023-03-01
|
|
12
18
|
|
package/lib/cjs/Accordion.js
CHANGED
|
@@ -46,16 +46,16 @@ var style = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SItemToggle_9ii91_gg_{cursor:pointer;outline:0}.___SItemToggle_9ii91_gg_.__keyboardFocused_9ii91_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SItemToggle_9ii91_gg_.__disabled_9ii91_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_9ii91_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_9ii91_gg_.__selected_9ii91_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_9ii91_gg_{transition:none}}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "9ii91_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SItemToggle": "
|
|
55
|
-
"_keyboardFocused": "
|
|
56
|
-
"_disabled": "
|
|
57
|
-
"__SItemChevron": "
|
|
58
|
-
"_selected": "
|
|
54
|
+
"__SItemToggle": "___SItemToggle_9ii91_gg_",
|
|
55
|
+
"_keyboardFocused": "__keyboardFocused_9ii91_gg_",
|
|
56
|
+
"_disabled": "__disabled_9ii91_gg_",
|
|
57
|
+
"__SItemChevron": "___SItemChevron_9ii91_gg_",
|
|
58
|
+
"_selected": "__selected_9ii91_gg_"
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -169,8 +169,8 @@ var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
169
169
|
onClick: disabled ? undefined : this.handleClick,
|
|
170
170
|
id: "igc-".concat(uid, "-").concat(value, "-toggle"),
|
|
171
171
|
role: 'button',
|
|
172
|
-
'aria-expanded': selected
|
|
173
|
-
'aria-controls':
|
|
172
|
+
'aria-expanded': selected ? 'true' : 'false',
|
|
173
|
+
'aria-controls': "igc-".concat(uid, "-").concat(value, "-collapse")
|
|
174
174
|
};
|
|
175
175
|
}
|
|
176
176
|
}, {
|
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","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","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';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\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 };\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-accordion',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\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
|
|
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","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","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';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\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 };\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-accordion',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\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 ? 'true' : 'false',\n 'aria-controls': `igc-${uid}-${value}-collapse`,\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
|
@@ -24,16 +24,16 @@ var style = (
|
|
|
24
24
|
/*__reshadow_css_start__*/
|
|
25
25
|
_sstyled.insert(
|
|
26
26
|
/*__inner_css_start__*/
|
|
27
|
-
".
|
|
27
|
+
".___SItemToggle_9ii91_gg_{cursor:pointer;outline:0}.___SItemToggle_9ii91_gg_.__keyboardFocused_9ii91_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SItemToggle_9ii91_gg_.__disabled_9ii91_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_9ii91_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_9ii91_gg_.__selected_9ii91_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_9ii91_gg_{transition:none}}"
|
|
28
28
|
/*__inner_css_end__*/
|
|
29
|
-
, "
|
|
29
|
+
, "9ii91_gg_")
|
|
30
30
|
/*__reshadow_css_end__*/
|
|
31
31
|
, {
|
|
32
|
-
"__SItemToggle": "
|
|
33
|
-
"_keyboardFocused": "
|
|
34
|
-
"_disabled": "
|
|
35
|
-
"__SItemChevron": "
|
|
36
|
-
"_selected": "
|
|
32
|
+
"__SItemToggle": "___SItemToggle_9ii91_gg_",
|
|
33
|
+
"_keyboardFocused": "__keyboardFocused_9ii91_gg_",
|
|
34
|
+
"_disabled": "__disabled_9ii91_gg_",
|
|
35
|
+
"__SItemChevron": "___SItemChevron_9ii91_gg_",
|
|
36
|
+
"_selected": "__selected_9ii91_gg_"
|
|
37
37
|
});
|
|
38
38
|
|
|
39
39
|
var RootAccordion = /*#__PURE__*/function (_Component) {
|
|
@@ -157,8 +157,8 @@ export var RootItem = /*#__PURE__*/function (_Component2) {
|
|
|
157
157
|
onClick: disabled ? undefined : this.handleClick,
|
|
158
158
|
id: "igc-".concat(uid, "-").concat(value, "-toggle"),
|
|
159
159
|
role: 'button',
|
|
160
|
-
'aria-expanded': selected
|
|
161
|
-
'aria-controls':
|
|
160
|
+
'aria-expanded': selected ? 'true' : 'false',
|
|
161
|
+
'aria-controls': "igc-".concat(uid, "-").concat(value, "-collapse")
|
|
162
162
|
};
|
|
163
163
|
}
|
|
164
164
|
}, {
|
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","uniqueIDEnhancement","cssVariableEnhance","RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","style","defaultValue","variable","fallback","map","Number","parseInt","prop","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';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\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 };\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-accordion',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\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
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["React","createComponent","Component","sstyled","Root","Box","Collapse","CollapseAnimate","ChevronRight","keyboardFocusEnhance","uniqueIDEnhancement","cssVariableEnhance","RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","style","defaultValue","variable","fallback","map","Number","parseInt","prop","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';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\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 };\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-accordion',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\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 ? 'true' : 'false',\n 'aria-controls': `igc-${uid}-${value}-collapse`,\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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"}
|