@semcore/accordion 4.0.5 → 4.0.8
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 +69 -0
- 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 +2 -2
- 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.8] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
10
|
+
|
|
11
|
+
## [4.0.7] - 2022-07-21
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
16
|
+
|
|
17
|
+
## [4.0.6] - 2022-07-07
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/icon` [2.27.0 ~> 2.28.0]).
|
|
22
|
+
|
|
5
23
|
## [4.0.5] - 2022-06-02
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# @semcore/accordion
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/accordion)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/accordion)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic design system
|
|
8
|
+
|
|
9
|
+
### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/accordion/)
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import Accordion from '@semcore/ui/accordion';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Alternative installation and use</summary>
|
|
27
|
+
|
|
28
|
+
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
+
|
|
30
|
+
### Install
|
|
31
|
+
|
|
32
|
+
You can only install one package from the design system
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install @semcore/accordion @semcore/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
+
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
+
|
|
41
|
+
### Usage
|
|
42
|
+
|
|
43
|
+
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
import Accordion from '@semcore/accordion';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
|
|
54
|
+
and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
55
|
+
|
|
56
|
+
## 🤝 Contributing
|
|
57
|
+
|
|
58
|
+
Contributions, issues and feature requests are welcome!
|
|
59
|
+
|
|
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).
|
|
62
|
+
|
|
63
|
+
## Show your support
|
|
64
|
+
|
|
65
|
+
Give a ⭐️ if this project helped you!
|
|
66
|
+
|
|
67
|
+
## 📝 License
|
|
68
|
+
|
|
69
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
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_t87v7_gg_{cursor:pointer;outline:0}.___SItemToggle_t87v7_gg_.__keyboardFocused_t87v7_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_t87v7_gg_.__disabled_t87v7_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_t87v7_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_t87v7_gg_.__selected_t87v7_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_t87v7_gg_{transition:none}}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
59
|
+
, "t87v7_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SItemToggle": "
|
|
63
|
-
"_keyboardFocused": "
|
|
64
|
-
"_disabled": "
|
|
65
|
-
"__SItemChevron": "
|
|
66
|
-
"_selected": "
|
|
62
|
+
"__SItemToggle": "___SItemToggle_t87v7_gg_",
|
|
63
|
+
"_keyboardFocused": "__keyboardFocused_t87v7_gg_",
|
|
64
|
+
"_disabled": "__disabled_t87v7_gg_",
|
|
65
|
+
"__SItemChevron": "___SItemChevron_t87v7_gg_",
|
|
66
|
+
"_selected": "__selected_t87v7_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_t87v7_gg_{cursor:pointer;outline:0}.___SItemToggle_t87v7_gg_.__keyboardFocused_t87v7_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_t87v7_gg_.__disabled_t87v7_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_t87v7_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_t87v7_gg_.__selected_t87v7_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_t87v7_gg_{transition:none}}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "t87v7_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SItemToggle": "
|
|
40
|
-
"_keyboardFocused": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SItemChevron": "
|
|
43
|
-
"_selected": "
|
|
39
|
+
"__SItemToggle": "___SItemToggle_t87v7_gg_",
|
|
40
|
+
"_keyboardFocused": "__keyboardFocused_t87v7_gg_",
|
|
41
|
+
"_disabled": "__disabled_t87v7_gg_",
|
|
42
|
+
"__SItemChevron": "___SItemChevron_t87v7_gg_",
|
|
43
|
+
"_selected": "__selected_t87v7_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
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/accordion",
|
|
3
3
|
"description": "SEMRush Accordion Component",
|
|
4
|
-
"version": "4.0.
|
|
4
|
+
"version": "4.0.8",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
|
-
"author": "
|
|
9
|
+
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "build --source=js",
|
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
|
-
}
|