@semcore/tab-panel 3.0.2 → 3.0.5
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 +67 -0
- package/lib/cjs/TabPanel.js +9 -9
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/TabPanel.js +9 -9
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +3 -3
- package/src/TabPanel.jsx +0 -89
- package/src/index.d.ts +0 -49
- package/src/index.js +0 -1
- package/src/style/tab-panel.shadow.css +0 -96
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
|
+
## [3.0.5] - 2022-08-11
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.35.1 ~> 3.36.0], `@semcore/flex-box` [4.5.8 ~> 4.5.9]).
|
|
10
|
+
|
|
11
|
+
## [3.0.4] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
|
|
16
|
+
|
|
17
|
+
## [3.0.3] - 2022-06-02
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0], `@semcore/flex-box` [4.5.4 ~> 4.5.5]).
|
|
22
|
+
|
|
5
23
|
## [3.0.2] - 2022-05-31
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @semcore/tab-panel
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/tab-panel)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/tab-panel)
|
|
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/tab-panel/)
|
|
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 TabPanel from '@semcore/ui/tab-panel';
|
|
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/tab-panel @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 TabPanel from '@semcore/tab-panel';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
|
+
|
|
55
|
+
## 🤝 Contributing
|
|
56
|
+
|
|
57
|
+
Contributions, issues and feature requests are welcome!
|
|
58
|
+
|
|
59
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
|
+
|
|
61
|
+
## Show your support
|
|
62
|
+
|
|
63
|
+
Give a ⭐️ if this project helped you!
|
|
64
|
+
|
|
65
|
+
## 📝 License
|
|
66
|
+
|
|
67
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -52,18 +52,18 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___STabPanel_2rhxm_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_2rhxm_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_2rhxm_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_2rhxm_gg_:active,.___STabPanelItem_2rhxm_gg_:focus,.___STabPanelItem_2rhxm_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_2rhxm_gg_:hover{color:#191b23}.___STabPanelItem_2rhxm_gg_.__disabled_2rhxm_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_2rhxm_gg_.__keyboardFocused_2rhxm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_2rhxm_gg_.__selected_2rhxm_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_2rhxm_gg_.__selected_2rhxm_gg_:hover{color:#006dca}.___SText_2rhxm_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_2rhxm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_2rhxm_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_2rhxm_gg_:not(:only-child):last-child{margin-right:8px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "2rhxm_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__STabPanel": "
|
|
61
|
-
"__STabPanelItem": "
|
|
62
|
-
"_disabled": "
|
|
63
|
-
"_keyboardFocused": "
|
|
64
|
-
"_selected": "
|
|
65
|
-
"__SText": "
|
|
66
|
-
"__SAddon": "
|
|
60
|
+
"__STabPanel": "___STabPanel_2rhxm_gg_",
|
|
61
|
+
"__STabPanelItem": "___STabPanelItem_2rhxm_gg_",
|
|
62
|
+
"_disabled": "__disabled_2rhxm_gg_",
|
|
63
|
+
"_keyboardFocused": "__keyboardFocused_2rhxm_gg_",
|
|
64
|
+
"_selected": "__selected_2rhxm_gg_",
|
|
65
|
+
"__SText": "___SText_2rhxm_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_2rhxm_gg_"
|
|
67
67
|
});
|
|
68
68
|
var optionsA11yEnhance = {
|
|
69
69
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelRoot","value","e","handlers","props","asProps","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabPanel","Box","styles","sstyled","Component","style","defaultValue","a11yEnhance","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","addonTextChildren","TabPanel","Item","Text","Addon","enhance","keyboardFocusEnhance","SText","SAddon","createComponent"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role=\"tablist\" />);\n }\n}\n\nfunction TabPanelItem(props) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nTabPanelItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport default TabPanel;\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 './TabPanel';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -31,18 +31,18 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___STabPanel_2rhxm_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_2rhxm_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_2rhxm_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_2rhxm_gg_:active,.___STabPanelItem_2rhxm_gg_:focus,.___STabPanelItem_2rhxm_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_2rhxm_gg_:hover{color:#191b23}.___STabPanelItem_2rhxm_gg_.__disabled_2rhxm_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_2rhxm_gg_.__keyboardFocused_2rhxm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_2rhxm_gg_.__selected_2rhxm_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_2rhxm_gg_.__selected_2rhxm_gg_:hover{color:#006dca}.___SText_2rhxm_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_2rhxm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_2rhxm_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_2rhxm_gg_:not(:only-child):last-child{margin-right:8px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "2rhxm_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__STabPanel": "
|
|
40
|
-
"__STabPanelItem": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"_keyboardFocused": "
|
|
43
|
-
"_selected": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
39
|
+
"__STabPanel": "___STabPanel_2rhxm_gg_",
|
|
40
|
+
"__STabPanelItem": "___STabPanelItem_2rhxm_gg_",
|
|
41
|
+
"_disabled": "__disabled_2rhxm_gg_",
|
|
42
|
+
"_keyboardFocused": "__keyboardFocused_2rhxm_gg_",
|
|
43
|
+
"_selected": "__selected_2rhxm_gg_",
|
|
44
|
+
"__SText": "___SText_2rhxm_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_2rhxm_gg_"
|
|
46
46
|
});
|
|
47
47
|
var optionsA11yEnhance = {
|
|
48
48
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/es6/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelRoot","value","e","handlers","props","asProps","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabPanel","styles","style","defaultValue","TabPanelItem","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Text","Addon","enhance","SText","SAddon"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement) => {\n if (neighborElement) {\n neighborElement.focus();\n neighborElement.click();\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.bindHandlerClick(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-posinset': value,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role=\"tablist\" />);\n }\n}\n\nfunction TabPanelItem(props) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nTabPanelItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport default TabPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;;;;AAIA,IAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAE,0BAACC,eAAD,EAAqB;IACrC,IAAIA,eAAJ,EAAqB;MACnBA,eAAe,CAACC,KAAhB;MACAD,eAAe,CAACE,KAAhB;IACD;EACF,CANwB;EAOzBC,aAAa,EAAE,CAAC,MAAD,EAAS,KAAT;AAPU,CAA3B;;IAUMC,Y;;;;;;;;;;;;;;;;uEAce,UAACC,KAAD;MAAA,OAAW,UAACC,CAAD,EAAO;QACnC,MAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;MACD,CAFkB;IAAA,C;;;;;;;WANnB,6BAAoB;MAClB,OAAO;QACLD,KAAK,EAAE;MADF,CAAP;IAGD;;;WAMD,sBAAaG,KAAb,EAAoB;MAClB,IAAQH,KAAR,GAAkB,KAAKI,OAAvB,CAAQJ,KAAR;MACA,IAAMK,UAAU,GAAGL,KAAK,KAAKG,KAAK,CAACH,KAAnC;MACA,OAAO;QACLM,QAAQ,EAAED,UADL;QAELE,OAAO,EAAE,KAAKC,gBAAL,CAAsBL,KAAK,CAACH,KAA5B,CAFJ;QAGLS,QAAQ,EAAEJ,UAAU,GAAG,CAAH,GAAO,CAAC,CAHvB;QAIL,iBAAiBL,KAJZ;QAKL,iBAAiBK;MALZ,CAAP;IAOD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMK,SAAS,GAG2BrB,GAH1C;MACA,IAAQsB,MAAR,GAAmB,KAAKP,OAAxB,CAAQO,MAAR;MAEA,eAAOxB,OAAO,CAACwB,MAAD,CAAd,eAAuB,oBAAC,SAAD;QAAA,QAA6B;MAA7B,WAAvB;IACD;;;;EAnCwBzB,S;;gBAArBa,Y,iBACiB,U;;gBADjBA,Y,WAEWa,K;;gBAFXb,Y,kBAGkB;EACpBc,YAAY,EAAE;AADM,C;;gBAHlBd,Y,aAMa,CAACR,WAAW,CAACE,kBAAD,CAAZ,C;;AAgCnB,SAASqB,YAAT,CAAsBX,KAAtB,EAA6B;EAAA;EAAA;;EAC3B,IAAMY,aAAa,GAIM1B,GAJzB;EACA,IAAQ2B,QAAR,GAAoDb,KAApD,CAAQa,QAAR;EAAA,IAAkBL,MAAlB,GAAoDR,KAApD,CAAkBQ,MAAlB;EAAA,IAA0BM,SAA1B,GAAoDd,KAApD,CAA0Bc,SAA1B;EAAA,IAAqCC,UAArC,GAAoDf,KAApD,CAAqCe,UAArC;EAEA,eAAO/B,OAAO,CAACwB,MAAD,CAAd,eACE,oBAAC,aAAD;IAAA,QAAiC,QAAjC;IAAA,OAA8C,QAA9C;IAAA,QAA4D;EAA5D,aACGM,SAAS,gBAAG,oBAAC,QAAD,CAAU,IAAV,CAAe,KAAf;IAAqB,GAAG,EAAEA;EAA1B,EAAH,GAA6C,IADzD,EAEG3B,iBAAiB,CAAC0B,QAAD,EAAWG,QAAQ,CAACC,IAAT,CAAcC,IAAzB,EAA+BF,QAAQ,CAACC,IAAT,CAAcE,KAA7C,CAFpB,EAGGJ,UAAU,gBAAG,oBAAC,QAAD,CAAU,IAAV,CAAe,KAAf;IAAqB,GAAG,EAAEA;EAA1B,EAAH,GAA8C,IAH3D,CADF;AAOD;;AAEDJ,YAAY,CAACS,OAAb,GAAuB,CAAC/B,oBAAoB,EAArB,CAAvB;;AAEA,SAAS6B,IAAT,CAAclB,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAMqB,KAAK,GAE2BnC,GAFtC;EACA,IAAQsB,MAAR,GAAmBR,KAAnB,CAAQQ,MAAR;EACA,eAAOxB,OAAO,CAACwB,MAAD,CAAd,eAAuB,oBAAC,KAAD;IAAA,OAAwB;EAAxB,YAAvB;AACD;;AAED,SAASW,KAAT,CAAenB,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMsB,MAAM,GAE2BpC,GAFvC;EACA,IAAQsB,MAAR,GAAmBR,KAAnB,CAAQQ,MAAR;EACA,eAAOxB,OAAO,CAACwB,MAAD,CAAd,eAAuB,oBAAC,MAAD;IAAA,OAAyB;EAAzB,YAAvB;AACD;;AAED,IAAMQ,QAAQ,GAAGlC,eAAe,CAACc,YAAD,EAAe;EAC7CqB,IAAI,EAAE,CAACN,YAAD,EAAe;IAAEO,IAAI,EAAJA,IAAF;IAAQC,KAAK,EAALA;EAAR,CAAf;AADuC,CAAf,CAAhC;AAIA,eAAeH,QAAf"}
|
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 './TabPanel';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-panel",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "3.0.
|
|
3
|
+
"description": "Semrush TabPanel Component",
|
|
4
|
+
"version": "3.0.5",
|
|
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/TabPanel.jsx
DELETED
|
@@ -1,89 +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 addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
5
|
-
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
6
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
7
|
-
|
|
8
|
-
import style from './style/tab-panel.shadow.css';
|
|
9
|
-
|
|
10
|
-
const optionsA11yEnhance = {
|
|
11
|
-
onNeighborChange: (neighborElement) => {
|
|
12
|
-
if (neighborElement) {
|
|
13
|
-
neighborElement.focus();
|
|
14
|
-
neighborElement.click();
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
childSelector: ['role', 'tab'],
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
class TabPanelRoot extends Component {
|
|
21
|
-
static displayName = 'TabPanel';
|
|
22
|
-
static style = style;
|
|
23
|
-
static defaultProps = {
|
|
24
|
-
defaultValue: null,
|
|
25
|
-
};
|
|
26
|
-
static enhance = [a11yEnhance(optionsA11yEnhance)];
|
|
27
|
-
|
|
28
|
-
uncontrolledProps() {
|
|
29
|
-
return {
|
|
30
|
-
value: null,
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
bindHandlerClick = (value) => (e) => {
|
|
35
|
-
this.handlers.value(value, e);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
getItemProps(props) {
|
|
39
|
-
const { value } = this.asProps;
|
|
40
|
-
const isSelected = value === props.value;
|
|
41
|
-
return {
|
|
42
|
-
selected: isSelected,
|
|
43
|
-
onClick: this.bindHandlerClick(props.value),
|
|
44
|
-
tabIndex: isSelected ? 0 : -1,
|
|
45
|
-
'aria-posinset': value,
|
|
46
|
-
'aria-selected': isSelected,
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
render() {
|
|
51
|
-
const STabPanel = Root;
|
|
52
|
-
const { styles } = this.asProps;
|
|
53
|
-
|
|
54
|
-
return sstyled(styles)(<STabPanel render={Box} role="tablist" />);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function TabPanelItem(props) {
|
|
59
|
-
const STabPanelItem = Root;
|
|
60
|
-
const { Children, styles, addonLeft, addonRight } = props;
|
|
61
|
-
|
|
62
|
-
return sstyled(styles)(
|
|
63
|
-
<STabPanelItem render={Box} type="button" tag="button" role="tab">
|
|
64
|
-
{addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}
|
|
65
|
-
{addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}
|
|
66
|
-
{addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}
|
|
67
|
-
</STabPanelItem>,
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
TabPanelItem.enhance = [keyboardFocusEnhance()];
|
|
72
|
-
|
|
73
|
-
function Text(props) {
|
|
74
|
-
const SText = Root;
|
|
75
|
-
const { styles } = props;
|
|
76
|
-
return sstyled(styles)(<SText render={Box} tag="span" />);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
function Addon(props) {
|
|
80
|
-
const SAddon = Root;
|
|
81
|
-
const { styles } = props;
|
|
82
|
-
return sstyled(styles)(<SAddon render={Box} tag="span" />);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
const TabPanel = createComponent(TabPanelRoot, {
|
|
86
|
-
Item: [TabPanelItem, { Text, Addon }],
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
export default TabPanel;
|
package/src/index.d.ts
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
5
|
-
|
|
6
|
-
export type TabPanelValue = string | number | boolean;
|
|
7
|
-
|
|
8
|
-
export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
|
|
9
|
-
/** Is invoked when changing the selection */
|
|
10
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
11
|
-
/** Value of the selected tab */
|
|
12
|
-
value?: T;
|
|
13
|
-
/** Default value of the selected tab
|
|
14
|
-
* @default null
|
|
15
|
-
* */
|
|
16
|
-
defaultValue?: T;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
|
|
20
|
-
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
21
|
-
selected?: boolean;
|
|
22
|
-
/** Disabled state */
|
|
23
|
-
disabled?: boolean;
|
|
24
|
-
/** Tab value */
|
|
25
|
-
value?: TabPanelValue;
|
|
26
|
-
/** Left addon tag */
|
|
27
|
-
addonLeft?: React.ElementType;
|
|
28
|
-
/** Right addon tag */
|
|
29
|
-
addonRight?: React.ElementType;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export interface ITabPanelContext {
|
|
33
|
-
getItemProps: PropGetterFn;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export interface ITabPanelHandlers {
|
|
37
|
-
value: (value: TabPanelValue) => void;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
|
|
41
|
-
props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
|
|
42
|
-
) => ReturnEl) & {
|
|
43
|
-
Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
|
|
44
|
-
Text: typeof Box;
|
|
45
|
-
Addon: typeof Box;
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default TabPanel;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './TabPanel';
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
STabPanel {
|
|
4
|
-
display: flex;
|
|
5
|
-
width: 100%;
|
|
6
|
-
max-width: 100%;
|
|
7
|
-
border-bottom: 1px solid var(--gray-200);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
STabPanelItem {
|
|
11
|
-
position: relative;
|
|
12
|
-
bottom: -1px;
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
min-width: 0;
|
|
15
|
-
height: 32px;
|
|
16
|
-
font-size: var(--fs-200);
|
|
17
|
-
color: var(--gray-500);
|
|
18
|
-
border: 1px solid transparent;
|
|
19
|
-
border-radius: 6px 6px 0 0;
|
|
20
|
-
background: transparent;
|
|
21
|
-
align-items: center;
|
|
22
|
-
justify-content: center;
|
|
23
|
-
touch-action: manipulation;
|
|
24
|
-
user-select: none;
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
padding: 0;
|
|
27
|
-
margin: 0;
|
|
28
|
-
box-shadow: none;
|
|
29
|
-
outline: none;
|
|
30
|
-
text-decoration: none;
|
|
31
|
-
-webkit-tap-highlight-color: transparent;
|
|
32
|
-
outline: 0;
|
|
33
|
-
text-align: center;
|
|
34
|
-
vertical-align: middle;
|
|
35
|
-
font-family: inherit;
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
|
|
38
|
-
&::-moz-focus-inner {
|
|
39
|
-
border: none;
|
|
40
|
-
padding: 0;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&:active,
|
|
44
|
-
&:hover,
|
|
45
|
-
&:focus {
|
|
46
|
-
outline: 0;
|
|
47
|
-
text-decoration: none;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&:hover {
|
|
51
|
-
color: var(--gray-800);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
STabPanelItem[disabled] {
|
|
56
|
-
opacity: var(--disabled-opacity);
|
|
57
|
-
cursor: default;
|
|
58
|
-
pointer-events: none; /* Disable link interactions */
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
STabPanelItem[keyboardFocused] {
|
|
62
|
-
box-shadow: var(--keyboard-focus);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
STabPanelItem[selected] {
|
|
66
|
-
color: var(--blue-500);
|
|
67
|
-
border-color: var(--gray-200);
|
|
68
|
-
border-bottom-color: var(--white);
|
|
69
|
-
flex-shrink: 0;
|
|
70
|
-
|
|
71
|
-
&:hover {
|
|
72
|
-
color: var(--blue-500);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SText {
|
|
77
|
-
display: inline-block;
|
|
78
|
-
margin: auto 8px;
|
|
79
|
-
white-space: nowrap;
|
|
80
|
-
overflow: hidden;
|
|
81
|
-
text-overflow: ellipsis;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
SAddon {
|
|
85
|
-
display: inline-flex;
|
|
86
|
-
align-items: center;
|
|
87
|
-
justify-content: center;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
SAddon:not(:only-child):first-child {
|
|
91
|
-
margin-left: 8px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
SAddon:not(:only-child):last-child {
|
|
95
|
-
margin-right: 8px;
|
|
96
|
-
}
|