@semcore/tab-line 2.8.6 → 2.9.1
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 +22 -4
- package/lib/cjs/TabLine.js +15 -15
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/cjs/style/tab-line.shadow.css +12 -0
- package/lib/es6/TabLine.js +15 -15
- package/lib/es6/TabLine.js.map +1 -1
- package/lib/es6/style/tab-line.shadow.css +12 -0
- package/package.json +6 -1
- package/src/{TabLine.js → TabLine.jsx} +0 -0
- package/src/style/tab-line.shadow.css +12 -0
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
|
+
## [2.9.1] - 2022-03-14
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.0 ~> 4.5.1], `@semcore/neighbor-location` [2.3.4 ~> 2.3.5], `@semcore/utils` [3.31.2 ~> 3.31.2]).
|
|
10
|
+
|
|
11
|
+
## [2.9.0] - 2021-03-04
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Disabled animation if reduce motion is preferred.
|
|
16
|
+
|
|
17
|
+
## [2.8.7] - 2022-02-24
|
|
18
|
+
|
|
19
|
+
### Added
|
|
20
|
+
|
|
21
|
+
- Added repository field to package.json file.
|
|
22
|
+
|
|
5
23
|
## [2.8.6] - 2022-02-22
|
|
6
24
|
|
|
7
25
|
### Fixed
|
|
@@ -218,15 +236,15 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
|
|
|
218
236
|
|
|
219
237
|
## [1.0.0] - 2019-05-20
|
|
220
238
|
|
|
221
|
-
### Added
|
|
222
|
-
|
|
223
|
-
- Добавлено свойство `underlined`
|
|
224
|
-
|
|
225
239
|
### BREAK
|
|
226
240
|
|
|
227
241
|
- Удалено свойство `theme`
|
|
228
242
|
- Изменены размеры в соответствии с типографикой
|
|
229
243
|
|
|
244
|
+
### Added
|
|
245
|
+
|
|
246
|
+
- Добавлено свойство `underlined`
|
|
247
|
+
|
|
230
248
|
## [1.0.0-1] - 2019-02-13
|
|
231
249
|
|
|
232
250
|
### Added
|
package/lib/cjs/TabLine.js
CHANGED
|
@@ -56,24 +56,24 @@ var style = (
|
|
|
56
56
|
/*__reshadow_css_start__*/
|
|
57
57
|
_core.sstyled.insert(
|
|
58
58
|
/*__inner_css_start__*/
|
|
59
|
-
".
|
|
59
|
+
".___STabLine_kyktg_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_kyktg_gg_.__underlined_kyktg_gg_{border-bottom:1px solid #cccccc}.___STabLineItem_kyktg_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:1.1;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}.___STabLineItem_kyktg_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_kyktg_gg_:active,.___STabLineItem_kyktg_gg_:focus,.___STabLineItem_kyktg_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_kyktg_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_kyktg_gg_:hover:after{background-color:#a6b0b3}.___SIndicator_kyktg_gg_,.___STabLineItem_kyktg_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_kyktg_gg_{transition:transform .5s ease;background-color:#2b94e1;will-change:transform}.___STabLineItem_kyktg_gg_.__selected_kyktg_gg_{flex-shrink:0}.___STabLineItem_kyktg_gg_.__disabled_kyktg_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_kyktg_gg_.__keyboardFocused_kyktg_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SText_kyktg_gg_{display:inline-block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_kyktg_gg_{color:#757575;display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_kyktg_gg_._size_m_kyktg_gg_{height:28px;margin-right:16px;min-width:18px;font-size:12px}.___STabLineItem_kyktg_gg_._size_m_kyktg_gg_ .___SText_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_m_kyktg_gg_ .___SAddon_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_l_kyktg_gg_{height:34px;margin-right:16px;min-width:26px;font-size:14px}.___STabLineItem_kyktg_gg_._size_l_kyktg_gg_ .___SText_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_l_kyktg_gg_ .___SAddon_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_xl_kyktg_gg_{height:42px;margin-right:24px;min-width:32px;font-size:16px}.___STabLineItem_kyktg_gg_._size_xl_kyktg_gg_ .___SText_kyktg_gg_:not(:last-child){margin-right:12px}.___STabLineItem_kyktg_gg_._size_xl_kyktg_gg_ .___SAddon_kyktg_gg_:not(:last-child){margin-right:12px}.___STabLineItem_kyktg_gg_._neighborLocation_left_kyktg_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_kyktg_gg_:after{transition:none}.___SIndicator_kyktg_gg_{transition:none}}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "qjptdj_gg_")
|
|
62
62
|
/*__reshadow_css_end__*/
|
|
63
63
|
, {
|
|
64
|
-
"__STabLine": "
|
|
65
|
-
"_underlined": "
|
|
66
|
-
"__STabLineItem": "
|
|
67
|
-
"__SIndicator": "
|
|
68
|
-
"_selected": "
|
|
69
|
-
"_disabled": "
|
|
70
|
-
"_keyboardFocused": "
|
|
71
|
-
"__SText": "
|
|
72
|
-
"__SAddon": "
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"_size_xl": "
|
|
76
|
-
"_neighborLocation_left": "
|
|
64
|
+
"__STabLine": "___STabLine_kyktg_gg_",
|
|
65
|
+
"_underlined": "__underlined_kyktg_gg_",
|
|
66
|
+
"__STabLineItem": "___STabLineItem_kyktg_gg_",
|
|
67
|
+
"__SIndicator": "___SIndicator_kyktg_gg_",
|
|
68
|
+
"_selected": "__selected_kyktg_gg_",
|
|
69
|
+
"_disabled": "__disabled_kyktg_gg_",
|
|
70
|
+
"_keyboardFocused": "__keyboardFocused_kyktg_gg_",
|
|
71
|
+
"__SText": "___SText_kyktg_gg_",
|
|
72
|
+
"__SAddon": "___SAddon_kyktg_gg_",
|
|
73
|
+
"_size_m": "_size_m_kyktg_gg_",
|
|
74
|
+
"_size_l": "_size_l_kyktg_gg_",
|
|
75
|
+
"_size_xl": "_size_xl_kyktg_gg_",
|
|
76
|
+
"_neighborLocation_left": "_neighborLocation_left_kyktg_gg_"
|
|
77
77
|
});
|
|
78
78
|
var optionsA11yEnhance = {
|
|
79
79
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.jsx"],"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","Component","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","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"],"file":"TabLine.js"}
|
|
@@ -158,3 +158,15 @@ STabLineItem[size='xl'] {
|
|
|
158
158
|
STabLineItem[neighborLocation='left'] {
|
|
159
159
|
margin-right: 0;
|
|
160
160
|
}
|
|
161
|
+
|
|
162
|
+
@media (prefers-reduced-motion) {
|
|
163
|
+
STabLineItem {
|
|
164
|
+
&::after {
|
|
165
|
+
transition: none;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
SIndicator {
|
|
170
|
+
transition: none;
|
|
171
|
+
}
|
|
172
|
+
}
|
package/lib/es6/TabLine.js
CHANGED
|
@@ -33,24 +33,24 @@ var style = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
".___STabLine_kyktg_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_kyktg_gg_.__underlined_kyktg_gg_{border-bottom:1px solid #cccccc}.___STabLineItem_kyktg_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:1.1;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}.___STabLineItem_kyktg_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_kyktg_gg_:active,.___STabLineItem_kyktg_gg_:focus,.___STabLineItem_kyktg_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_kyktg_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_kyktg_gg_:hover:after{background-color:#a6b0b3}.___SIndicator_kyktg_gg_,.___STabLineItem_kyktg_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_kyktg_gg_{transition:transform .5s ease;background-color:#2b94e1;will-change:transform}.___STabLineItem_kyktg_gg_.__selected_kyktg_gg_{flex-shrink:0}.___STabLineItem_kyktg_gg_.__disabled_kyktg_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_kyktg_gg_.__keyboardFocused_kyktg_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SText_kyktg_gg_{display:inline-block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_kyktg_gg_{color:#757575;display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_kyktg_gg_._size_m_kyktg_gg_{height:28px;margin-right:16px;min-width:18px;font-size:12px}.___STabLineItem_kyktg_gg_._size_m_kyktg_gg_ .___SText_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_m_kyktg_gg_ .___SAddon_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_l_kyktg_gg_{height:34px;margin-right:16px;min-width:26px;font-size:14px}.___STabLineItem_kyktg_gg_._size_l_kyktg_gg_ .___SText_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_l_kyktg_gg_ .___SAddon_kyktg_gg_:not(:last-child){margin-right:8px}.___STabLineItem_kyktg_gg_._size_xl_kyktg_gg_{height:42px;margin-right:24px;min-width:32px;font-size:16px}.___STabLineItem_kyktg_gg_._size_xl_kyktg_gg_ .___SText_kyktg_gg_:not(:last-child){margin-right:12px}.___STabLineItem_kyktg_gg_._size_xl_kyktg_gg_ .___SAddon_kyktg_gg_:not(:last-child){margin-right:12px}.___STabLineItem_kyktg_gg_._neighborLocation_left_kyktg_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_kyktg_gg_:after{transition:none}.___SIndicator_kyktg_gg_{transition:none}}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "qjptdj_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__STabLine": "
|
|
42
|
-
"_underlined": "
|
|
43
|
-
"__STabLineItem": "
|
|
44
|
-
"__SIndicator": "
|
|
45
|
-
"_selected": "
|
|
46
|
-
"_disabled": "
|
|
47
|
-
"_keyboardFocused": "
|
|
48
|
-
"__SText": "
|
|
49
|
-
"__SAddon": "
|
|
50
|
-
"_size_m": "
|
|
51
|
-
"_size_l": "
|
|
52
|
-
"_size_xl": "
|
|
53
|
-
"_neighborLocation_left": "
|
|
41
|
+
"__STabLine": "___STabLine_kyktg_gg_",
|
|
42
|
+
"_underlined": "__underlined_kyktg_gg_",
|
|
43
|
+
"__STabLineItem": "___STabLineItem_kyktg_gg_",
|
|
44
|
+
"__SIndicator": "___SIndicator_kyktg_gg_",
|
|
45
|
+
"_selected": "__selected_kyktg_gg_",
|
|
46
|
+
"_disabled": "__disabled_kyktg_gg_",
|
|
47
|
+
"_keyboardFocused": "__keyboardFocused_kyktg_gg_",
|
|
48
|
+
"__SText": "___SText_kyktg_gg_",
|
|
49
|
+
"__SAddon": "___SAddon_kyktg_gg_",
|
|
50
|
+
"_size_m": "_size_m_kyktg_gg_",
|
|
51
|
+
"_size_l": "_size_l_kyktg_gg_",
|
|
52
|
+
"_size_xl": "_size_xl_kyktg_gg_",
|
|
53
|
+
"_neighborLocation_left": "_neighborLocation_left_kyktg_gg_"
|
|
54
54
|
});
|
|
55
55
|
var optionsA11yEnhance = {
|
|
56
56
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TabLine.
|
|
1
|
+
{"version":3,"sources":["../../src/TabLine.jsx"],"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"],"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,oBAAP,MAAiC,kDAAjC;AACA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,OAAOC,gBAAP,IAA2BC,uBAA3B,QAA0D,4BAA1D;AACA,OAAOC,cAAP,MAA2B,0BAA3B;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMC,kBAAkB,GAAG;AACzBC,EAAAA,gBAAgB,EAAE,0BAACC,eAAD,EAAqB;AACrC,QAAIA,eAAJ,EAAqB;AACnBA,MAAAA,eAAe,CAACC,KAAhB;AACAD,MAAAA,eAAe,CAACE,KAAhB;AACD;AACF,GANwB;AAOzBC,EAAAA,aAAa,EAAE,CAAC,MAAD,EAAS,KAAT;AAPU,CAA3B;;IAUMC,W;;;;;AAeJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB;;AAAA;;AAAA,8EAHNnB,KAAK,CAACoB,SAAN,EAGM;;AAAA,+EAFLpB,KAAK,CAACoB,SAAN,EAEK;;AAAA,uEAYA,UAACC,KAAD;AAAA,aAAW,UAACC,CAAD,EAAO;AACnC,cAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;AACD,OAFkB;AAAA,KAZA;;AAAA,+EAgBQ,YAAM;AAC/B,UAAME,SAAS,GAAG,MAAKC,UAAL,CAAgBC,OAAlC;AACA,UAAMC,UAAU,GAAG,MAAKC,WAAL,CAAiBF,OAApC;AACA,UAAI,CAACF,SAAD,IAAc,CAACG,UAAnB,EAA+B,OAAO,KAAP;AAC/B,UAAME,GAAG,GAAGC,KAAK,CAACC,IAAN,CAAWJ,UAAU,CAACK,gBAAX,CAA4B,+BAA5B,CAAX,EAAyEC,IAAzE,CACV,UAACC,IAAD;AAAA,eAAUA,IAAI,CAACC,YAAL,CAAkB,OAAlB,MAA+BC,MAAM,CAAC,MAAKC,OAAL,CAAahB,KAAd,CAA/C;AAAA,OADU,CAAZ;AAGA,UAAI,CAACQ,GAAL,EAAU,OAAO,KAAP;;AACV,YAAKS,YAAL,CAAkBC,OAAlB,CAA0BV,GAA1B;;AACA,UAAQW,UAAR,GAAoCX,GAApC,CAAQW,UAAR;AAAA,UAAoBC,WAApB,GAAoCZ,GAApC,CAAoBY,WAApB;AACA,UAAMC,kBAAkB,GACtBf,UAAU,CAACgB,UAAX,GAAwBC,QAAQ,CAACjB,UAAU,CAACkB,KAAX,CAAiBC,WAAlB,EAA+B,EAA/B,CAAhC,IAAsE,CADxE;AAEAtB,MAAAA,SAAS,CAACqB,KAAV,CAAgBE,SAAhB,wBAA0CP,UAAU,GAAGE,kBAAvD;AACAlB,MAAAA,SAAS,CAACqB,KAAV,CAAgBG,KAAhB,aAA2BP,WAA3B;AACD,KA9BkB;;AAEjB,UAAKQ,SAAL,GAAiB,IAAItC,cAAJ,CAAmB,MAAKuC,wBAAxB,CAAjB;AACA,UAAKZ,YAAL,GAAoB,IAAI3B,cAAJ,CAAmB,MAAKuC,wBAAxB,CAApB;AAHiB;AAIlB;;;;WAED,6BAAoB;AAClB,aAAO;AACL7B,QAAAA,KAAK,EAAE;AADF,OAAP;AAGD;;;WAsBD,6BAAoB;AAClB,UAAI,KAAKO,WAAL,CAAiBF,OAArB,EAA8B;AAC5B,aAAKuB,SAAL,CAAeV,OAAf,CAAuB,KAAKX,WAAL,CAAiBF,OAAxC;AACD;;AACD,WAAKwB,wBAAL;AACD;;;WAED,8BAAqB;AACnB,WAAKZ,YAAL,CAAkBa,UAAlB;AACA,WAAKD,wBAAL;AACD;;;WAED,gCAAuB;AACrB,WAAKD,SAAL,CAAeE,UAAf;AACA,WAAKb,YAAL,CAAkBa,UAAlB;AACD;;;WAED,sBAAahC,KAAb,EAAoB;AAClB,0BAAwB,KAAKkB,OAA7B;AAAA,UAAQhB,KAAR,iBAAQA,KAAR;AAAA,UAAe+B,IAAf,iBAAeA,IAAf;AACA,UAAMC,UAAU,GAAGhC,KAAK,KAAKF,KAAK,CAACE,KAAnC;AACA,aAAO;AACL+B,QAAAA,IAAI,EAAJA,IADK;AAELE,QAAAA,QAAQ,EAAED,UAFL;AAGLE,QAAAA,OAAO,EAAE,KAAKC,gBAAL,CAAsBrC,KAAK,CAACE,KAA5B,CAHJ;AAILoC,QAAAA,QAAQ,EAAEJ,UAAU,GAAG,CAAH,GAAO,CAAC,CAJvB;AAKL,yBAAiBhC,KALZ;AAML,yBAAiBgC;AANZ,OAAP;AAQD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMK,QAAQ,GAKMrD,GALpB;AACA,UAAMsD,UAAU,GAAG,KAAnB;AACA,2BAA6C,KAAKtB,OAAlD;AAAA,UAAQuB,MAAR,kBAAQA,MAAR;AAAA,UAAgBC,QAAhB,kBAAgBA,QAAhB;AAAA,UAA0BC,cAA1B,kBAA0BA,cAA1B;AAEA,qBAAO3D,OAAO,CAACyD,MAAD,CAAd,eACE,oBAAC,QAAD;AAAA,eAA4B,KAAKhC,WAAjC;AAAA,gBAAmD;AAAnD,+BACE,oBAAC,gBAAD;AAAA,0BAAkCkC;AAAlC,uBACE,oBAAC,QAAD,2BADF,CADF,eAIE,oBAAC,UAAD;AAAA,eAAiB,KAAKrC;AAAtB,SAJF,CADF;AAQD;;;;EA1FuBvB,S;;gBAApBgB,W,iBACiB,S;;gBADjBA,W,WAEW2B,K;;gBAFX3B,W,kBAGkB;AACpB6C,EAAAA,YAAY,EAAE,IADM;AAEpBX,EAAAA,IAAI,EAAE,GAFc;AAGpBY,EAAAA,UAAU,EAAE;AAHQ,C;;gBAHlB9C,W,aAQa,CAACV,WAAW,CAACI,kBAAD,CAAZ,C;;AAqFnB,SAASqD,WAAT,CAAqB9C,KAArB,EAA4B;AAAA;AAAA;;AAC1B,MAAM+C,YAAY,GAIM7D,GAJxB;AACA,MAAQwD,QAAR,GAAoD1C,KAApD,CAAQ0C,QAAR;AAAA,MAAkBD,MAAlB,GAAoDzC,KAApD,CAAkByC,MAAlB;AAAA,MAA0BO,SAA1B,GAAoDhD,KAApD,CAA0BgD,SAA1B;AAAA,MAAqCC,UAArC,GAAoDjD,KAApD,CAAqCiD,UAArC;AAEA,iBAAOjE,OAAO,CAACyD,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,YAAgC,QAAhC;AAAA,WAA6C,QAA7C;AAAA,YAA2D;AAA3D,eACGO,SAAS,gBAAG,oBAAC,OAAD,CAAS,IAAT,CAAc,KAAd;AAAoB,IAAA,GAAG,EAAEA;AAAzB,IAAH,GAA4C,IADxD,EAEG7D,iBAAiB,CAACuD,QAAD,EAAWQ,OAAO,CAACC,IAAR,CAAaC,IAAxB,EAA8BF,OAAO,CAACC,IAAR,CAAaE,KAA3C,CAFpB,EAGGJ,UAAU,gBAAG,oBAAC,OAAD,CAAS,IAAT,CAAc,KAAd;AAAoB,IAAA,GAAG,EAAEA;AAAzB,IAAH,GAA6C,IAH1D,CADF;AAOD;;AAEDH,WAAW,CAACQ,OAAZ,GAAsB,CAAClE,oBAAoB,EAArB,EAAyBG,uBAAuB,EAAhD,CAAtB;;AAEA,SAAS6D,IAAT,CAAcpD,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAQyC,MAAR,GAAmBzC,KAAnB,CAAQyC,MAAR;AACA,MAAMc,KAAK,GAC2BrE,GADtC;AACA,iBAAOF,OAAO,CAACyD,MAAD,CAAd,eAAuB,oBAAC,KAAD;AAAA,WAAwB;AAAxB,cAAvB;AACD;;AAED,SAASY,KAAT,CAAerD,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAQyC,MAAR,GAAmBzC,KAAnB,CAAQyC,MAAR;AACA,MAAMe,MAAM,GAC2BtE,GADvC;AACA,iBAAOF,OAAO,CAACyD,MAAD,CAAd,eAAuB,oBAAC,MAAD;AAAA,WAAyB;AAAzB,cAAvB;AACD;;AAED,IAAMS,OAAO,GAAGpE,eAAe,CAACiB,WAAD,EAAc;AAC3CoD,EAAAA,IAAI,EAAE,CAACL,WAAD,EAAc;AAAEM,IAAAA,IAAI,EAAJA,IAAF;AAAQC,IAAAA,KAAK,EAALA;AAAR,GAAd;AADqC,CAAd,CAA/B;AAIA,eAAeH,OAAf","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"],"file":"TabLine.js"}
|
|
@@ -158,3 +158,15 @@ STabLineItem[size='xl'] {
|
|
|
158
158
|
STabLineItem[neighborLocation='left'] {
|
|
159
159
|
margin-right: 0;
|
|
160
160
|
}
|
|
161
|
+
|
|
162
|
+
@media (prefers-reduced-motion) {
|
|
163
|
+
STabLineItem {
|
|
164
|
+
&::after {
|
|
165
|
+
transition: none;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
SIndicator {
|
|
170
|
+
transition: none;
|
|
171
|
+
}
|
|
172
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
3
|
"description": "SEMRush TabLine Component",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.9.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -24,5 +24,10 @@
|
|
|
24
24
|
},
|
|
25
25
|
"jest": {
|
|
26
26
|
"preset": "@semcore/jest-preset-ui"
|
|
27
|
+
},
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "https://github.com/semrush/intergalactic.git",
|
|
31
|
+
"directory": "semcore/tab-line"
|
|
27
32
|
}
|
|
28
33
|
}
|
|
File without changes
|
|
@@ -158,3 +158,15 @@ STabLineItem[size='xl'] {
|
|
|
158
158
|
STabLineItem[neighborLocation='left'] {
|
|
159
159
|
margin-right: 0;
|
|
160
160
|
}
|
|
161
|
+
|
|
162
|
+
@media (prefers-reduced-motion) {
|
|
163
|
+
STabLineItem {
|
|
164
|
+
&::after {
|
|
165
|
+
transition: none;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
SIndicator {
|
|
170
|
+
transition: none;
|
|
171
|
+
}
|
|
172
|
+
}
|