@semcore/tab-line 3.0.3 → 3.0.6
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/TabLine.js +16 -16
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/TabLine.js +16 -16
- package/lib/es6/TabLine.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +3 -3
- package/src/TabLine.jsx +0 -146
- package/src/index.d.ts +0 -60
- package/src/index.js +0 -1
- package/src/style/tab-line.shadow.css +0 -140
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.6] - 2022-08-11
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.8 ~> 4.5.9], `@semcore/neighbor-location` [2.3.12 ~> 2.3.13], `@semcore/utils` [3.35.1 ~> 3.36.0]).
|
|
10
|
+
|
|
11
|
+
## [3.0.5] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.6 ~> 4.5.7], `@semcore/neighbor-location` [2.3.10 ~> 2.3.11], `@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
16
|
+
|
|
17
|
+
## [3.0.4] - 2022-07-14
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/neighbor-location` [2.3.9 ~> 2.3.10]).
|
|
22
|
+
|
|
5
23
|
## [3.0.3] - 2022-06-02
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @semcore/tab-line
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/tab-line)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/tab-line)
|
|
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-line/)
|
|
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 TabLine from '@semcore/ui/tab-line';
|
|
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-line @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 TabLine from '@semcore/tab-line';
|
|
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/TabLine.js
CHANGED
|
@@ -56,23 +56,23 @@ var style = (
|
|
|
56
56
|
/*__reshadow_css_start__*/
|
|
57
57
|
_core.sstyled.insert(
|
|
58
58
|
/*__inner_css_start__*/
|
|
59
|
-
".
|
|
59
|
+
".___STabLine_1hx16_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1hx16_gg_.__underlined_1hx16_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_1hx16_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-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;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_1hx16_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1hx16_gg_:active,.___STabLineItem_1hx16_gg_:focus,.___STabLineItem_1hx16_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_1hx16_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_1hx16_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_1hx16_gg_ .___SText_1hx16_gg_:not(:last-child){margin-right:8px}.___STabLineItem_1hx16_gg_ .___SAddon_1hx16_gg_:not(:last-child){margin-right:8px}.___SIndicator_1hx16_gg_,.___STabLineItem_1hx16_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_1hx16_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_1hx16_gg_.__selected_1hx16_gg_{flex-shrink:0}.___STabLineItem_1hx16_gg_.__disabled_1hx16_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_1hx16_gg_.__keyboardFocused_1hx16_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1hx16_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1hx16_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1hx16_gg_._size_m_1hx16_gg_{height:28px;min-width:18px;font-size:14px}.___STabLineItem_1hx16_gg_._size_l_1hx16_gg_{height:40px;min-width:26px;font-size:16px}.___STabLineItem_1hx16_gg_._neighborLocation_left_1hx16_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1hx16_gg_:after{transition:none}.___SIndicator_1hx16_gg_{transition:none}}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "1hx16_gg_")
|
|
62
62
|
/*__reshadow_css_end__*/
|
|
63
63
|
, {
|
|
64
|
-
"__STabLine": "
|
|
65
|
-
"_underlined": "
|
|
66
|
-
"__STabLineItem": "
|
|
67
|
-
"__SText": "
|
|
68
|
-
"__SAddon": "
|
|
69
|
-
"__SIndicator": "
|
|
70
|
-
"_selected": "
|
|
71
|
-
"_disabled": "
|
|
72
|
-
"_keyboardFocused": "
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"_neighborLocation_left": "
|
|
64
|
+
"__STabLine": "___STabLine_1hx16_gg_",
|
|
65
|
+
"_underlined": "__underlined_1hx16_gg_",
|
|
66
|
+
"__STabLineItem": "___STabLineItem_1hx16_gg_",
|
|
67
|
+
"__SText": "___SText_1hx16_gg_",
|
|
68
|
+
"__SAddon": "___SAddon_1hx16_gg_",
|
|
69
|
+
"__SIndicator": "___SIndicator_1hx16_gg_",
|
|
70
|
+
"_selected": "__selected_1hx16_gg_",
|
|
71
|
+
"_disabled": "__disabled_1hx16_gg_",
|
|
72
|
+
"_keyboardFocused": "__keyboardFocused_1hx16_gg_",
|
|
73
|
+
"_size_m": "_size_m_1hx16_gg_",
|
|
74
|
+
"_size_l": "_size_l_1hx16_gg_",
|
|
75
|
+
"_neighborLocation_left": "_neighborLocation_left_1hx16_gg_"
|
|
76
76
|
});
|
|
77
77
|
var optionsA11yEnhance = {
|
|
78
78
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -96,8 +96,8 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
96
96
|
_this = _super.call(this, props);
|
|
97
97
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$observer", void 0);
|
|
98
98
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$observerTab", void 0);
|
|
99
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$indicator", _react["default"].createRef());
|
|
100
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$tabsParent", _react["default"].createRef());
|
|
99
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$indicator", /*#__PURE__*/_react["default"].createRef());
|
|
100
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$tabsParent", /*#__PURE__*/_react["default"].createRef());
|
|
101
101
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (value) {
|
|
102
102
|
return function (e) {
|
|
103
103
|
_this.handlers.value(value, e);
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","React","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","ResizeObserver","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","Box","SIndicator","styles","Children","controlsLength","sstyled","Component","defaultValue","underlined","a11yEnhance","TabLineItem","STabLineItem","addonLeft","addonRight","addonTextChildren","TabLine","Item","Text","Addon","enhance","keyboardFocusEnhance","neighborLocationEnhance","SText","SAddon","createComponent"],"sources":["../../src/TabLine.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 keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.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 TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent =\n tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\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 STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,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,W;;;;;EAeJ,qBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACjB,0BAAMA,KAAN;IADiB;IAAA;IAAA,4GAHNC,iBAAA,CAAMC,SAAN,EAGM;IAAA,6GAFLD,iBAAA,CAAMC,SAAN,EAEK;IAAA,qGAYA,UAACC,KAAD;MAAA,OAAW,UAACC,CAAD,EAAO;QACnC,MAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;MACD,CAFkB;IAAA,CAZA;IAAA,6GAgBQ,YAAM;MAC/B,IAAME,SAAS,GAAG,MAAKC,UAAL,CAAgBC,OAAlC;MACA,IAAMC,UAAU,GAAG,MAAKC,WAAL,CAAiBF,OAApC;MACA,IAAI,CAACF,SAAD,IAAc,CAACG,UAAnB,EAA+B,OAAO,KAAP;MAC/B,IAAME,GAAG,GAAGC,KAAK,CAACC,IAAN,CAAWJ,UAAU,CAACK,gBAAX,CAA4B,+BAA5B,CAAX,EAAyEC,IAAzE,CACV,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACC,YAAL,CAAkB,OAAlB,MAA+BC,MAAM,CAAC,MAAKC,OAAL,CAAahB,KAAd,CAA/C;MAAA,CADU,CAAZ;MAGA,IAAI,CAACQ,GAAL,EAAU,OAAO,KAAP;;MACV,MAAKS,YAAL,CAAkBC,OAAlB,CAA0BV,GAA1B;;MACA,IAAQW,UAAR,GAAoCX,GAApC,CAAQW,UAAR;MAAA,IAAoBC,WAApB,GAAoCZ,GAApC,CAAoBY,WAApB;MACA,IAAMC,kBAAkB,GACtBf,UAAU,CAACgB,UAAX,GAAwBC,QAAQ,CAACjB,UAAU,CAACkB,KAAX,CAAiBC,WAAlB,EAA+B,EAA/B,CAAhC,IAAsE,CADxE;MAEAtB,SAAS,CAACqB,KAAV,CAAgBE,SAAhB,wBAA0CP,UAAU,GAAGE,kBAAvD;MACAlB,SAAS,CAACqB,KAAV,CAAgBG,KAAhB,aAA2BP,WAA3B;IACD,CA9BkB;IAEjB,MAAKQ,SAAL,GAAiB,IAAIC,kCAAJ,CAAmB,MAAKC,wBAAxB,CAAjB;IACA,MAAKb,YAAL,GAAoB,IAAIY,kCAAJ,CAAmB,MAAKC,wBAAxB,CAApB;IAHiB;EAIlB;;;;WAED,6BAAoB;MAClB,OAAO;QACL9B,KAAK,EAAE;MADF,CAAP;IAGD;;;WAsBD,6BAAoB;MAClB,IAAI,KAAKO,WAAL,CAAiBF,OAArB,EAA8B;QAC5B,KAAKuB,SAAL,CAAeV,OAAf,CAAuB,KAAKX,WAAL,CAAiBF,OAAxC;MACD;;MACD,KAAKyB,wBAAL;IACD;;;WAED,8BAAqB;MACnB,KAAKb,YAAL,CAAkBc,UAAlB;MACA,KAAKD,wBAAL;IACD;;;WAED,gCAAuB;MACrB,KAAKF,SAAL,CAAeG,UAAf;MACA,KAAKd,YAAL,CAAkBc,UAAlB;IACD;;;WAED,sBAAalC,KAAb,EAAoB;MAClB,oBAAwB,KAAKmB,OAA7B;MAAA,IAAQhB,KAAR,iBAAQA,KAAR;MAAA,IAAegC,IAAf,iBAAeA,IAAf;MACA,IAAMC,UAAU,GAAGjC,KAAK,KAAKH,KAAK,CAACG,KAAnC;MACA,OAAO;QACLgC,IAAI,EAAJA,IADK;QAELE,QAAQ,EAAED,UAFL;QAGLE,OAAO,EAAE,KAAKC,gBAAL,CAAsBvC,KAAK,CAACG,KAA5B,CAHJ;QAILqC,QAAQ,EAAEJ,UAAU,GAAG,CAAH,GAAO,CAAC,CAJvB;QAKL,iBAAiBjC,KALZ;QAML,iBAAiBiC;MANZ,CAAP;IAQD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMK,QAAQ,GAKMC,YALpB;MACA,IAAMC,UAAU,GAAG,KAAnB;MACA,qBAA6C,KAAKxB,OAAlD;MAAA,IAAQyB,MAAR,kBAAQA,MAAR;MAAA,IAAgBC,QAAhB,kBAAgBA,QAAhB;MAAA,IAA0BC,cAA1B,kBAA0BA,cAA1B;MAEA,eAAO,IAAAC,aAAA,EAAQH,MAAR,CAAP,eACE,gCAAC,QAAD;QAAA,OAA4B,KAAKlC,WAAjC;QAAA,QAAmD;MAAnD,yBACE,gCAAC,4BAAD;QAAA,kBAAkCoC;MAAlC,iBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,UAAD;QAAA,OAAiB,KAAKvC;MAAtB,GAJF,CADF;IAQD;;;EA1FuByC,e;;iCAApBjD,W,iBACiB,S;iCADjBA,W,WAEW4B,K;iCAFX5B,W,kBAGkB;EACpBkD,YAAY,EAAE,IADM;EAEpBd,IAAI,EAAE,GAFc;EAGpBe,UAAU,EAAE;AAHQ,C;iCAHlBnD,W,aAQa,CAAC,IAAAoD,uBAAA,EAAY1D,kBAAZ,CAAD,C;;AAqFnB,SAAS2D,WAAT,CAAqBpD,KAArB,EAA4B;EAAA;EAAA;;EAC1B,IAAMqD,YAAY,GAIMX,YAJxB;EACA,IAAQG,QAAR,GAAoD7C,KAApD,CAAQ6C,QAAR;EAAA,IAAkBD,MAAlB,GAAoD5C,KAApD,CAAkB4C,MAAlB;EAAA,IAA0BU,SAA1B,GAAoDtD,KAApD,CAA0BsD,SAA1B;EAAA,IAAqCC,UAArC,GAAoDvD,KAApD,CAAqCuD,UAArC;EAEA,eAAO,IAAAR,aAAA,EAAQH,MAAR,CAAP,eACE,gCAAC,YAAD;IAAA,QAAgC,QAAhC;IAAA,OAA6C,QAA7C;IAAA,QAA2D;EAA3D,aACGU,SAAS,gBAAG,gCAAC,OAAD,CAAS,IAAT,CAAc,KAAd;IAAoB,GAAG,EAAEA;EAAzB,EAAH,GAA4C,IADxD,EAEG,IAAAE,6BAAA,EAAkBX,QAAlB,EAA4BY,OAAO,CAACC,IAAR,CAAaC,IAAzC,EAA+CF,OAAO,CAACC,IAAR,CAAaE,KAA5D,CAFH,EAGGL,UAAU,gBAAG,gCAAC,OAAD,CAAS,IAAT,CAAc,KAAd;IAAoB,GAAG,EAAEA;EAAzB,EAAH,GAA6C,IAH1D,CADF;AAOD;;AAEDH,WAAW,CAACS,OAAZ,GAAsB,CAAC,IAAAC,gCAAA,GAAD,EAAyB,IAAAC,yCAAA,GAAzB,CAAtB;;AAEA,SAASJ,IAAT,CAAc3D,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAQ4C,MAAR,GAAmB5C,KAAnB,CAAQ4C,MAAR;EACA,IAAMoB,KAAK,GAC2BtB,YADtC;EACA,eAAO,IAAAK,aAAA,EAAQH,MAAR,CAAP,eAAuB,gCAAC,KAAD;IAAA,OAAwB;EAAxB,YAAvB;AACD;;AAED,SAASgB,KAAT,CAAe5D,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAQ4C,MAAR,GAAmB5C,KAAnB,CAAQ4C,MAAR;EACA,IAAMqB,MAAM,GAC2BvB,YADvC;EACA,eAAO,IAAAK,aAAA,EAAQH,MAAR,CAAP,eAAuB,gCAAC,MAAD;IAAA,OAAyB;EAAzB,YAAvB;AACD;;AAED,IAAMa,OAAO,GAAG,IAAAS,gBAAA,EAAgBnE,WAAhB,EAA6B;EAC3C2D,IAAI,EAAE,CAACN,WAAD,EAAc;IAAEO,IAAI,EAAJA,IAAF;IAAQC,KAAK,EAALA;EAAR,CAAd;AADqC,CAA7B,CAAhB;eAIeH,O"}
|
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 './TabLine';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/TabLine.js
CHANGED
|
@@ -33,23 +33,23 @@ var style = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
".___STabLine_1hx16_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1hx16_gg_.__underlined_1hx16_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_1hx16_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-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;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_1hx16_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_1hx16_gg_:active,.___STabLineItem_1hx16_gg_:focus,.___STabLineItem_1hx16_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_1hx16_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_1hx16_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_1hx16_gg_ .___SText_1hx16_gg_:not(:last-child){margin-right:8px}.___STabLineItem_1hx16_gg_ .___SAddon_1hx16_gg_:not(:last-child){margin-right:8px}.___SIndicator_1hx16_gg_,.___STabLineItem_1hx16_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_1hx16_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_1hx16_gg_.__selected_1hx16_gg_{flex-shrink:0}.___STabLineItem_1hx16_gg_.__disabled_1hx16_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_1hx16_gg_.__keyboardFocused_1hx16_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1hx16_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1hx16_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1hx16_gg_._size_m_1hx16_gg_{height:28px;min-width:18px;font-size:14px}.___STabLineItem_1hx16_gg_._size_l_1hx16_gg_{height:40px;min-width:26px;font-size:16px}.___STabLineItem_1hx16_gg_._neighborLocation_left_1hx16_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1hx16_gg_:after{transition:none}.___SIndicator_1hx16_gg_{transition:none}}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "1hx16_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__STabLine": "
|
|
42
|
-
"_underlined": "
|
|
43
|
-
"__STabLineItem": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
46
|
-
"__SIndicator": "
|
|
47
|
-
"_selected": "
|
|
48
|
-
"_disabled": "
|
|
49
|
-
"_keyboardFocused": "
|
|
50
|
-
"_size_m": "
|
|
51
|
-
"_size_l": "
|
|
52
|
-
"_neighborLocation_left": "
|
|
41
|
+
"__STabLine": "___STabLine_1hx16_gg_",
|
|
42
|
+
"_underlined": "__underlined_1hx16_gg_",
|
|
43
|
+
"__STabLineItem": "___STabLineItem_1hx16_gg_",
|
|
44
|
+
"__SText": "___SText_1hx16_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_1hx16_gg_",
|
|
46
|
+
"__SIndicator": "___SIndicator_1hx16_gg_",
|
|
47
|
+
"_selected": "__selected_1hx16_gg_",
|
|
48
|
+
"_disabled": "__disabled_1hx16_gg_",
|
|
49
|
+
"_keyboardFocused": "__keyboardFocused_1hx16_gg_",
|
|
50
|
+
"_size_m": "_size_m_1hx16_gg_",
|
|
51
|
+
"_size_l": "_size_l_1hx16_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_1hx16_gg_"
|
|
53
53
|
});
|
|
54
54
|
var optionsA11yEnhance = {
|
|
55
55
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -77,9 +77,9 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
77
77
|
|
|
78
78
|
_defineProperty(_assertThisInitialized(_this), "$observerTab", void 0);
|
|
79
79
|
|
|
80
|
-
_defineProperty(_assertThisInitialized(_this), "$indicator", React.createRef());
|
|
80
|
+
_defineProperty(_assertThisInitialized(_this), "$indicator", /*#__PURE__*/React.createRef());
|
|
81
81
|
|
|
82
|
-
_defineProperty(_assertThisInitialized(_this), "$tabsParent", React.createRef());
|
|
82
|
+
_defineProperty(_assertThisInitialized(_this), "$tabsParent", /*#__PURE__*/React.createRef());
|
|
83
83
|
|
|
84
84
|
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (value) {
|
|
85
85
|
return function (e) {
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","neighborLocationEnhance","ResizeObserver","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","props","createRef","value","e","handlers","indicator","$indicator","current","tabsParent","$tabsParent","tab","Array","from","querySelectorAll","find","node","getAttribute","String","asProps","$observerTab","observe","offsetLeft","offsetWidth","positionLeftParent","clientLeft","parseInt","style","paddingLeft","transform","width","$observer","calculateStylesIndicator","disconnect","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","STabLine","SIndicator","styles","Children","controlsLength","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"sources":["../../src/TabLine.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 keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport style from './style/tab-line.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 TabLineRoot extends Component {\n static displayName = 'TabLine';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n size: 'm',\n underlined: true,\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n $observer;\n $observerTab;\n $indicator = React.createRef();\n $tabsParent = React.createRef();\n\n constructor(props) {\n super(props);\n this.$observer = new ResizeObserver(this.calculateStylesIndicator);\n this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n calculateStylesIndicator = () => {\n const indicator = this.$indicator.current;\n const tabsParent = this.$tabsParent.current;\n if (!indicator || !tabsParent) return false;\n const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name=\"TabLine.Item\"]')).find(\n (node) => node.getAttribute('value') === String(this.asProps.value),\n );\n if (!tab) return false;\n this.$observerTab.observe(tab);\n const { offsetLeft, offsetWidth } = tab;\n const positionLeftParent =\n tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;\n indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;\n indicator.style.width = `${offsetWidth}px`;\n };\n\n componentDidMount() {\n if (this.$tabsParent.current) {\n this.$observer.observe(this.$tabsParent.current);\n }\n this.calculateStylesIndicator();\n }\n\n componentDidUpdate() {\n this.$observerTab.disconnect();\n this.calculateStylesIndicator();\n }\n\n componentWillUnmount() {\n this.$observer.disconnect();\n this.$observerTab.disconnect();\n }\n\n getItemProps(props) {\n const { value, size } = this.asProps;\n const isSelected = value === props.value;\n return {\n size,\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 STabLine = Root;\n const SIndicator = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <STabLine render={Box} ref={this.$tabsParent} role=\"tablist\">\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SIndicator ref={this.$indicator} />\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabLineItem render={Box} type=\"button\" tag=\"button\" role=\"tab\">\n {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n </STabLineItem>,\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const { styles } = props;\n const SText = Root;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const { styles } = props;\n const SAddon = Root;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n Item: [TabLineItem, { Text, Addon }],\n});\n\nexport default TabLine;\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 './TabLine';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,WAAxB"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "3.0.
|
|
3
|
+
"description": "Semrush TabLine Component",
|
|
4
|
+
"version": "3.0.6",
|
|
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/TabLine.jsx
DELETED
|
@@ -1,146 +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 keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
7
|
-
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
8
|
-
import ResizeObserver from 'resize-observer-polyfill';
|
|
9
|
-
|
|
10
|
-
import style from './style/tab-line.shadow.css';
|
|
11
|
-
|
|
12
|
-
const optionsA11yEnhance = {
|
|
13
|
-
onNeighborChange: (neighborElement) => {
|
|
14
|
-
if (neighborElement) {
|
|
15
|
-
neighborElement.focus();
|
|
16
|
-
neighborElement.click();
|
|
17
|
-
}
|
|
18
|
-
},
|
|
19
|
-
childSelector: ['role', 'tab'],
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
class TabLineRoot extends Component {
|
|
23
|
-
static displayName = 'TabLine';
|
|
24
|
-
static style = style;
|
|
25
|
-
static defaultProps = {
|
|
26
|
-
defaultValue: null,
|
|
27
|
-
size: 'm',
|
|
28
|
-
underlined: true,
|
|
29
|
-
};
|
|
30
|
-
static enhance = [a11yEnhance(optionsA11yEnhance)];
|
|
31
|
-
|
|
32
|
-
$observer;
|
|
33
|
-
$observerTab;
|
|
34
|
-
$indicator = React.createRef();
|
|
35
|
-
$tabsParent = React.createRef();
|
|
36
|
-
|
|
37
|
-
constructor(props) {
|
|
38
|
-
super(props);
|
|
39
|
-
this.$observer = new ResizeObserver(this.calculateStylesIndicator);
|
|
40
|
-
this.$observerTab = new ResizeObserver(this.calculateStylesIndicator);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
uncontrolledProps() {
|
|
44
|
-
return {
|
|
45
|
-
value: null,
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
bindHandlerClick = (value) => (e) => {
|
|
50
|
-
this.handlers.value(value, e);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
calculateStylesIndicator = () => {
|
|
54
|
-
const indicator = this.$indicator.current;
|
|
55
|
-
const tabsParent = this.$tabsParent.current;
|
|
56
|
-
if (!indicator || !tabsParent) return false;
|
|
57
|
-
const tab = Array.from(tabsParent.querySelectorAll('[data-ui-name="TabLine.Item"]')).find(
|
|
58
|
-
(node) => node.getAttribute('value') === String(this.asProps.value),
|
|
59
|
-
);
|
|
60
|
-
if (!tab) return false;
|
|
61
|
-
this.$observerTab.observe(tab);
|
|
62
|
-
const { offsetLeft, offsetWidth } = tab;
|
|
63
|
-
const positionLeftParent =
|
|
64
|
-
tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
|
|
65
|
-
indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;
|
|
66
|
-
indicator.style.width = `${offsetWidth}px`;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
componentDidMount() {
|
|
70
|
-
if (this.$tabsParent.current) {
|
|
71
|
-
this.$observer.observe(this.$tabsParent.current);
|
|
72
|
-
}
|
|
73
|
-
this.calculateStylesIndicator();
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
componentDidUpdate() {
|
|
77
|
-
this.$observerTab.disconnect();
|
|
78
|
-
this.calculateStylesIndicator();
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
componentWillUnmount() {
|
|
82
|
-
this.$observer.disconnect();
|
|
83
|
-
this.$observerTab.disconnect();
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
getItemProps(props) {
|
|
87
|
-
const { value, size } = this.asProps;
|
|
88
|
-
const isSelected = value === props.value;
|
|
89
|
-
return {
|
|
90
|
-
size,
|
|
91
|
-
selected: isSelected,
|
|
92
|
-
onClick: this.bindHandlerClick(props.value),
|
|
93
|
-
tabIndex: isSelected ? 0 : -1,
|
|
94
|
-
'aria-posinset': value,
|
|
95
|
-
'aria-selected': isSelected,
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
render() {
|
|
100
|
-
const STabLine = Root;
|
|
101
|
-
const SIndicator = 'div';
|
|
102
|
-
const { styles, Children, controlsLength } = this.asProps;
|
|
103
|
-
|
|
104
|
-
return sstyled(styles)(
|
|
105
|
-
<STabLine render={Box} ref={this.$tabsParent} role="tablist">
|
|
106
|
-
<NeighborLocation controlsLength={controlsLength}>
|
|
107
|
-
<Children />
|
|
108
|
-
</NeighborLocation>
|
|
109
|
-
<SIndicator ref={this.$indicator} />
|
|
110
|
-
</STabLine>,
|
|
111
|
-
);
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
function TabLineItem(props) {
|
|
116
|
-
const STabLineItem = Root;
|
|
117
|
-
const { Children, styles, addonLeft, addonRight } = props;
|
|
118
|
-
|
|
119
|
-
return sstyled(styles)(
|
|
120
|
-
<STabLineItem render={Box} type="button" tag="button" role="tab">
|
|
121
|
-
{addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}
|
|
122
|
-
{addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}
|
|
123
|
-
{addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}
|
|
124
|
-
</STabLineItem>,
|
|
125
|
-
);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
TabLineItem.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
129
|
-
|
|
130
|
-
function Text(props) {
|
|
131
|
-
const { styles } = props;
|
|
132
|
-
const SText = Root;
|
|
133
|
-
return sstyled(styles)(<SText render={Box} tag="span" />);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
function Addon(props) {
|
|
137
|
-
const { styles } = props;
|
|
138
|
-
const SAddon = Root;
|
|
139
|
-
return sstyled(styles)(<SAddon render={Box} tag="span" />);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
const TabLine = createComponent(TabLineRoot, {
|
|
143
|
-
Item: [TabLineItem, { Text, Addon }],
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
export default TabLine;
|
package/src/index.d.ts
DELETED
|
@@ -1,60 +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 { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
|
|
7
|
-
export type TabLineValue = string | number | boolean;
|
|
8
|
-
|
|
9
|
-
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
10
|
-
extends IBoxProps,
|
|
11
|
-
INeighborLocationProps {
|
|
12
|
-
/** TabLine size
|
|
13
|
-
* @default m
|
|
14
|
-
* */
|
|
15
|
-
size?: 'm' | 'l' | false;
|
|
16
|
-
/** Adds a bottom border for the entire component
|
|
17
|
-
* @default true
|
|
18
|
-
* */
|
|
19
|
-
underlined?: boolean;
|
|
20
|
-
/** Is invoked when changing the selection */
|
|
21
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
|
-
/** Value of the selected tab */
|
|
23
|
-
value?: T;
|
|
24
|
-
/** Default value of the selected tab
|
|
25
|
-
* @default null
|
|
26
|
-
* */
|
|
27
|
-
defaultValue?: T;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
31
|
-
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
32
|
-
selected?: boolean;
|
|
33
|
-
/** Disabled state */
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
/** Tab value */
|
|
36
|
-
value?: TabLineValue;
|
|
37
|
-
/** Left addon tag */
|
|
38
|
-
addonLeft?: React.ElementType;
|
|
39
|
-
/** Right addon tag */
|
|
40
|
-
addonRight?: React.ElementType;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export interface ITabLineContext {
|
|
44
|
-
getItemProps: PropGetterFn;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export interface ITabLineHandlers {
|
|
48
|
-
value: (value: TabLineValue) => void;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
|
|
52
|
-
props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
|
|
53
|
-
) => ReturnEl) & {
|
|
54
|
-
Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
|
|
55
|
-
Text: typeof Box;
|
|
56
|
-
Addon: typeof Box;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default TabLine;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './TabLine';
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
STabLine {
|
|
4
|
-
position: relative;
|
|
5
|
-
display: flex;
|
|
6
|
-
width: 100%;
|
|
7
|
-
max-width: 100%;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
STabLine[underlined] {
|
|
11
|
-
border-bottom: 1px solid var(--gray-200);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
STabLineItem {
|
|
15
|
-
display: inline-flex;
|
|
16
|
-
align-items: center;
|
|
17
|
-
justify-content: center;
|
|
18
|
-
position: relative;
|
|
19
|
-
touch-action: manipulation;
|
|
20
|
-
white-space: nowrap;
|
|
21
|
-
user-select: none;
|
|
22
|
-
box-sizing: border-box;
|
|
23
|
-
padding: 0;
|
|
24
|
-
margin: 0;
|
|
25
|
-
box-shadow: none;
|
|
26
|
-
outline: none;
|
|
27
|
-
text-decoration: none;
|
|
28
|
-
-webkit-tap-highlight-color: transparent;
|
|
29
|
-
overflow: visible;
|
|
30
|
-
outline: 0;
|
|
31
|
-
text-align: center;
|
|
32
|
-
vertical-align: middle;
|
|
33
|
-
font-family: inherit;
|
|
34
|
-
cursor: pointer;
|
|
35
|
-
border: none;
|
|
36
|
-
background: transparent;
|
|
37
|
-
color: var(--gray-800);
|
|
38
|
-
margin-right: 16px;
|
|
39
|
-
|
|
40
|
-
&::-moz-focus-inner {
|
|
41
|
-
border: none;
|
|
42
|
-
padding: 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&:active,
|
|
46
|
-
&:hover,
|
|
47
|
-
&:focus {
|
|
48
|
-
outline: 0;
|
|
49
|
-
text-decoration: none;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
&::after {
|
|
53
|
-
content: '';
|
|
54
|
-
left: 0;
|
|
55
|
-
width: 100%;
|
|
56
|
-
background-color: transparent;
|
|
57
|
-
transition: background-color 0.2s;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
&:hover::after {
|
|
61
|
-
background-color: var(--gray-200);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
& SText:not(:last-child) {
|
|
65
|
-
margin-right: 8px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
& SAddon:not(:last-child) {
|
|
69
|
-
margin-right: 8px;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
SIndicator,
|
|
74
|
-
STabLineItem::after {
|
|
75
|
-
position: absolute;
|
|
76
|
-
display: block;
|
|
77
|
-
bottom: -1px;
|
|
78
|
-
height: 2px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
SIndicator {
|
|
82
|
-
transition: transform 0.5s ease;
|
|
83
|
-
background-color: var(--blue-400);
|
|
84
|
-
will-change: transform;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
STabLineItem[selected] {
|
|
88
|
-
flex-shrink: 0;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
STabLineItem[disabled] {
|
|
92
|
-
opacity: var(--disabled-opacity);
|
|
93
|
-
cursor: default;
|
|
94
|
-
pointer-events: none; /* Disable link interactions */
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
STabLineItem[keyboardFocused] {
|
|
98
|
-
box-shadow: var(--keyboard-focus);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
SText {
|
|
102
|
-
display: inline-block;
|
|
103
|
-
white-space: nowrap;
|
|
104
|
-
overflow: hidden;
|
|
105
|
-
text-overflow: ellipsis;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
SAddon {
|
|
109
|
-
display: inline-flex;
|
|
110
|
-
align-items: center;
|
|
111
|
-
justify-content: center;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
STabLineItem[size='m'] {
|
|
115
|
-
height: 28px;
|
|
116
|
-
min-width: 18px;
|
|
117
|
-
font-size: var(--fs-200);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
STabLineItem[size='l'] {
|
|
121
|
-
height: 40px;
|
|
122
|
-
min-width: 26px;
|
|
123
|
-
font-size: var(--fs-300);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
STabLineItem[neighborLocation='left'] {
|
|
127
|
-
margin-right: 0;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
@media (prefers-reduced-motion) {
|
|
131
|
-
STabLineItem {
|
|
132
|
-
&::after {
|
|
133
|
-
transition: none;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
SIndicator {
|
|
138
|
-
transition: none;
|
|
139
|
-
}
|
|
140
|
-
}
|