@semcore/tab-line 3.0.4 → 3.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/lib/cjs/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 +2 -2
- 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.7] - 2022-08-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.9 ~> 4.5.10], `@semcore/neighbor-location` [2.3.13 ~> 2.3.14], `@semcore/utils` [3.36.0 ~> 3.37.0]).
|
|
10
|
+
|
|
11
|
+
## [3.0.6] - 2022-08-11
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- 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]).
|
|
16
|
+
|
|
17
|
+
## [3.0.5] - 2022-07-22
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- 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]).
|
|
22
|
+
|
|
5
23
|
## [3.0.4] - 2022-07-14
|
|
6
24
|
|
|
7
25
|
### Changed
|
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_cn9r3_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_cn9r3_gg_.__underlined_cn9r3_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_cn9r3_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_cn9r3_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_cn9r3_gg_:active,.___STabLineItem_cn9r3_gg_:focus,.___STabLineItem_cn9r3_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_cn9r3_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_cn9r3_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_cn9r3_gg_ .___SText_cn9r3_gg_:not(:last-child){margin-right:8px}.___STabLineItem_cn9r3_gg_ .___SAddon_cn9r3_gg_:not(:last-child){margin-right:8px}.___SIndicator_cn9r3_gg_,.___STabLineItem_cn9r3_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_cn9r3_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_cn9r3_gg_.__selected_cn9r3_gg_{flex-shrink:0}.___STabLineItem_cn9r3_gg_.__disabled_cn9r3_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_cn9r3_gg_.__keyboardFocused_cn9r3_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_cn9r3_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_cn9r3_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_cn9r3_gg_._size_m_cn9r3_gg_{height:28px;min-width:18px;font-size:14px}.___STabLineItem_cn9r3_gg_._size_l_cn9r3_gg_{height:40px;min-width:26px;font-size:16px}.___STabLineItem_cn9r3_gg_._neighborLocation_left_cn9r3_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_cn9r3_gg_:after{transition:none}.___SIndicator_cn9r3_gg_{transition:none}}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "cn9r3_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_cn9r3_gg_",
|
|
65
|
+
"_underlined": "__underlined_cn9r3_gg_",
|
|
66
|
+
"__STabLineItem": "___STabLineItem_cn9r3_gg_",
|
|
67
|
+
"__SText": "___SText_cn9r3_gg_",
|
|
68
|
+
"__SAddon": "___SAddon_cn9r3_gg_",
|
|
69
|
+
"__SIndicator": "___SIndicator_cn9r3_gg_",
|
|
70
|
+
"_selected": "__selected_cn9r3_gg_",
|
|
71
|
+
"_disabled": "__disabled_cn9r3_gg_",
|
|
72
|
+
"_keyboardFocused": "__keyboardFocused_cn9r3_gg_",
|
|
73
|
+
"_size_m": "_size_m_cn9r3_gg_",
|
|
74
|
+
"_size_l": "_size_l_cn9r3_gg_",
|
|
75
|
+
"_neighborLocation_left": "_neighborLocation_left_cn9r3_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":"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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 './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_cn9r3_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_cn9r3_gg_.__underlined_cn9r3_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_cn9r3_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_cn9r3_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_cn9r3_gg_:active,.___STabLineItem_cn9r3_gg_:focus,.___STabLineItem_cn9r3_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_cn9r3_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_cn9r3_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_cn9r3_gg_ .___SText_cn9r3_gg_:not(:last-child){margin-right:8px}.___STabLineItem_cn9r3_gg_ .___SAddon_cn9r3_gg_:not(:last-child){margin-right:8px}.___SIndicator_cn9r3_gg_,.___STabLineItem_cn9r3_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_cn9r3_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_cn9r3_gg_.__selected_cn9r3_gg_{flex-shrink:0}.___STabLineItem_cn9r3_gg_.__disabled_cn9r3_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_cn9r3_gg_.__keyboardFocused_cn9r3_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_cn9r3_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_cn9r3_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_cn9r3_gg_._size_m_cn9r3_gg_{height:28px;min-width:18px;font-size:14px}.___STabLineItem_cn9r3_gg_._size_l_cn9r3_gg_{height:40px;min-width:26px;font-size:16px}.___STabLineItem_cn9r3_gg_._neighborLocation_left_cn9r3_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_cn9r3_gg_:after{transition:none}.___SIndicator_cn9r3_gg_{transition:none}}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "cn9r3_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_cn9r3_gg_",
|
|
42
|
+
"_underlined": "__underlined_cn9r3_gg_",
|
|
43
|
+
"__STabLineItem": "___STabLineItem_cn9r3_gg_",
|
|
44
|
+
"__SText": "___SText_cn9r3_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_cn9r3_gg_",
|
|
46
|
+
"__SIndicator": "___SIndicator_cn9r3_gg_",
|
|
47
|
+
"_selected": "__selected_cn9r3_gg_",
|
|
48
|
+
"_disabled": "__disabled_cn9r3_gg_",
|
|
49
|
+
"_keyboardFocused": "__keyboardFocused_cn9r3_gg_",
|
|
50
|
+
"_size_m": "_size_m_cn9r3_gg_",
|
|
51
|
+
"_size_l": "_size_l_cn9r3_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_cn9r3_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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "3.0.
|
|
3
|
+
"description": "Semrush TabLine Component",
|
|
4
|
+
"version": "3.0.7",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
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
|
-
}
|