@semcore/tab-line 3.3.12 → 3.3.13
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 +5 -7
- package/lib/cjs/TabLine.js +46 -34
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/es6/TabLine.js +46 -34
- package/lib/es6/TabLine.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,19 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [3.3.
|
|
6
|
-
|
|
7
|
-
### Changed
|
|
5
|
+
## [3.3.13] - 2023-05-04
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
### Fixed
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
- Fixed uncontrolled `<TabLine />` animation.
|
|
12
10
|
|
|
13
|
-
## [3.3.
|
|
11
|
+
## [3.3.12] - 2023-05-03
|
|
14
12
|
|
|
15
13
|
### Changed
|
|
16
14
|
|
|
17
|
-
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.20 ~> 4.7.21], `@semcore/neighbor-location` [3.1.26 ~> 3.1.27], `@semcore/utils` [3.50.4 ~> 3.50.5]).
|
|
18
16
|
|
|
19
17
|
## [3.3.9] - 2023-04-11
|
|
20
18
|
|
package/lib/cjs/TabLine.js
CHANGED
|
@@ -21,19 +21,19 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/e
|
|
|
21
21
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
|
|
22
22
|
var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
|
|
23
23
|
/*__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
24
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
25
|
-
"__STabLine": "
|
|
26
|
-
"_underlined": "
|
|
27
|
-
"__STabLineItem": "
|
|
28
|
-
"_selected": "
|
|
29
|
-
"__SText": "
|
|
30
|
-
"__SAddon": "
|
|
31
|
-
"__SCaret": "
|
|
32
|
-
"_disabled": "
|
|
33
|
-
"_keyboardFocused": "
|
|
34
|
-
"_size_m": "
|
|
35
|
-
"_size_l": "
|
|
36
|
-
"_neighborLocation_left": "
|
|
24
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STabLine_1ga6p_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1ga6p_gg_.__underlined_1ga6p_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1ga6p_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;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow: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:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1ga6p_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1ga6p_gg_:active,.___STabLineItem_1ga6p_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_1ga6p_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_1ga6p_gg_::after,.___STabLineItem_1ga6p_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1ga6p_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1ga6p_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1ga6p_gg_.__selected_1ga6p_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1ga6p_gg_ .___SAddon_1ga6p_gg_:not(:last-child),.___STabLineItem_1ga6p_gg_ .___SText_1ga6p_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1ga6p_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1ga6p_gg_.__selected_1ga6p_gg_{flex-shrink:0}.___STabLineItem_1ga6p_gg_.__disabled_1ga6p_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_1ga6p_gg_.__keyboardFocused_1ga6p_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_1ga6p_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1ga6p_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1ga6p_gg_._size_m_1ga6p_gg_{height:28px;min-width:18px}.___STabLineItem_1ga6p_gg_._size_m_1ga6p_gg_ .___SText_1ga6p_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1ga6p_gg_._size_l_1ga6p_gg_{height:40px;min-width:26px}.___STabLineItem_1ga6p_gg_._size_l_1ga6p_gg_ .___SText_1ga6p_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1ga6p_gg_._neighborLocation_left_1ga6p_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1ga6p_gg_::after,.___STabLineItem_1ga6p_gg_::before{transition:none}.___STabLineItem_1ga6p_gg_.__selected_1ga6p_gg_::after{transition-delay:0;transition:none}.___SCaret_1ga6p_gg_{display:none}}" /*__inner_css_end__*/, "1ga6p_gg_") /*__reshadow_css_end__*/, {
|
|
25
|
+
"__STabLine": "___STabLine_1ga6p_gg_",
|
|
26
|
+
"_underlined": "__underlined_1ga6p_gg_",
|
|
27
|
+
"__STabLineItem": "___STabLineItem_1ga6p_gg_",
|
|
28
|
+
"_selected": "__selected_1ga6p_gg_",
|
|
29
|
+
"__SText": "___SText_1ga6p_gg_",
|
|
30
|
+
"__SAddon": "___SAddon_1ga6p_gg_",
|
|
31
|
+
"__SCaret": "___SCaret_1ga6p_gg_",
|
|
32
|
+
"_disabled": "__disabled_1ga6p_gg_",
|
|
33
|
+
"_keyboardFocused": "__keyboardFocused_1ga6p_gg_",
|
|
34
|
+
"_size_m": "_size_m_1ga6p_gg_",
|
|
35
|
+
"_size_l": "_size_l_1ga6p_gg_",
|
|
36
|
+
"_neighborLocation_left": "_neighborLocation_left_1ga6p_gg_"
|
|
37
37
|
});
|
|
38
38
|
var optionsA11yEnhance = {
|
|
39
39
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -57,6 +57,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
57
57
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
|
|
58
58
|
animation: null
|
|
59
59
|
});
|
|
60
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "prevValue", undefined);
|
|
60
61
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemRefs", {});
|
|
61
62
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
|
|
62
63
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationStartTimeout", -1);
|
|
@@ -91,34 +92,45 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
91
92
|
}
|
|
92
93
|
}, {
|
|
93
94
|
key: "componentDidUpdate",
|
|
94
|
-
value: function componentDidUpdate(
|
|
95
|
-
if (
|
|
96
|
-
|
|
97
|
-
var toNode = this.itemRefs[this.props.value];
|
|
98
|
-
var containerNode = this.containerRef.current;
|
|
99
|
-
if (!fromNode || !toNode || !containerNode) return;
|
|
100
|
-
var containerRect = containerNode.getBoundingClientRect();
|
|
101
|
-
var fromRect = fromNode.getBoundingClientRect();
|
|
102
|
-
var toRect = toNode.getBoundingClientRect();
|
|
103
|
-
var animation = {
|
|
104
|
-
fromLeft: fromRect.x - containerRect.x,
|
|
105
|
-
fromWidth: fromRect.width,
|
|
106
|
-
toLeft: toRect.x - containerRect.x,
|
|
107
|
-
toWidth: toRect.width,
|
|
108
|
-
started: false
|
|
109
|
-
};
|
|
110
|
-
this.setState({
|
|
111
|
-
animation: animation
|
|
112
|
-
});
|
|
113
|
-
clearTimeout(this.animationStartTimeout);
|
|
114
|
-
this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
|
|
95
|
+
value: function componentDidUpdate() {
|
|
96
|
+
if (this.prevValue !== null && this.asProps.value !== null && this.prevValue !== this.asProps.value) {
|
|
97
|
+
this.animate();
|
|
115
98
|
}
|
|
99
|
+
this.prevValue = this.asProps.value;
|
|
100
|
+
}
|
|
101
|
+
}, {
|
|
102
|
+
key: "componentDidMount",
|
|
103
|
+
value: function componentDidMount() {
|
|
104
|
+
this.prevValue = this.asProps.value;
|
|
116
105
|
}
|
|
117
106
|
}, {
|
|
118
107
|
key: "componentWillUnmount",
|
|
119
108
|
value: function componentWillUnmount() {
|
|
120
109
|
clearTimeout(this.animationStartTimeout);
|
|
121
110
|
}
|
|
111
|
+
}, {
|
|
112
|
+
key: "animate",
|
|
113
|
+
value: function animate() {
|
|
114
|
+
var fromNode = this.itemRefs[this.prevValue];
|
|
115
|
+
var toNode = this.itemRefs[this.asProps.value];
|
|
116
|
+
var containerNode = this.containerRef.current;
|
|
117
|
+
if (!fromNode || !toNode || !containerNode) return;
|
|
118
|
+
var containerRect = containerNode.getBoundingClientRect();
|
|
119
|
+
var fromRect = fromNode.getBoundingClientRect();
|
|
120
|
+
var toRect = toNode.getBoundingClientRect();
|
|
121
|
+
var animation = {
|
|
122
|
+
fromLeft: fromRect.x - containerRect.x,
|
|
123
|
+
fromWidth: fromRect.width,
|
|
124
|
+
toLeft: toRect.x - containerRect.x,
|
|
125
|
+
toWidth: toRect.width,
|
|
126
|
+
started: false
|
|
127
|
+
};
|
|
128
|
+
this.setState({
|
|
129
|
+
animation: animation
|
|
130
|
+
});
|
|
131
|
+
clearTimeout(this.animationStartTimeout);
|
|
132
|
+
this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
|
|
133
|
+
}
|
|
122
134
|
}, {
|
|
123
135
|
key: "getItemProps",
|
|
124
136
|
value: function getItemProps(props, index) {
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabLine.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_keyboardFocusEnhance","_a11yEnhance","_neighborLocation","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","animation","React","createRef","_this$state$animation","state","started","setState","_objectSpread2","value","e","handlers","_createClass2","key","uncontrolledProps","componentDidUpdate","prevProps","props","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","clearTimeout","animationStartTimeout","setTimeout","handleAnimationStart","componentWillUnmount","getItemProps","index","_this2","_this$asProps","asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","assignProps","Component","defaultValue","underlined","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","_default","exports"],"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 from '@semcore/neighbor-location';\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 state = { animation: null };\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (\n prevProps.value !== null &&\n this.props.value !== null &&\n prevProps.value !== this.props.value\n ) {\n const fromNode = this.itemRefs[prevProps.value];\n const toNode = this.itemRefs[this.props.value];\n const containerNode = this.containerRef.current;\n\n if (!fromNode || !toNode || !containerNode) return;\n const containerRect = containerNode.getBoundingClientRect();\n const fromRect = fromNode.getBoundingClientRect();\n const toRect = toNode.getBoundingClientRect();\n const animation = {\n fromLeft: fromRect.x - containerRect.x,\n fromWidth: fromRect.width,\n toLeft: toRect.x - containerRect.x,\n toWidth: toRect.width,\n started: false,\n };\n this.setState({ animation });\n clearTimeout(this.animationStartTimeout);\n this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n }\n }\n componentWillUnmount() {\n clearTimeout(this.animationStartTimeout);\n }\n\n handleAnimationStart = () => {\n if (this.state.animation?.started === false) {\n this.setState({ animation: { ...this.state.animation, started: true } });\n }\n };\n handleAnimationEnd = () => {\n this.setState({ animation: null });\n };\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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': index + 1,\n 'aria-selected': isSelected,\n ref: (node) => (this.itemRefs[props.value] = node),\n };\n }\n\n getCaretProps() {\n const { animation } = this.state;\n if (!animation) return {};\n if (animation.started) {\n return {\n style: {\n left: animation.toLeft,\n width: animation.toWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n } else {\n return {\n style: {\n left: animation.fromLeft,\n width: animation.fromWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n }\n }\n\n render() {\n const STabLine = Root;\n const SCaret = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n const { animation } = this.state;\n\n return sstyled(styles)(\n <STabLine render={Box} role=\"tablist\" ref={this.containerRef}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n {animation && <SCaret {...this.getCaretProps()} />}\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <STabLineItem\n render={Box}\n tag=\"button\"\n neighborLocation={neighborLocation}\n type=\"button\"\n role=\"tab\"\n >\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 </NeighborLocation.Detect>\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\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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"}
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_keyboardFocusEnhance","_a11yEnhance","_neighborLocation","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","animation","undefined","React","createRef","_this$state$animation","state","started","setState","_objectSpread2","value","e","handlers","_createClass2","key","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","_this2","_this$asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","assignProps","Component","defaultValue","underlined","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","_default","exports"],"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 from '@semcore/neighbor-location';\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 state = { animation: null };\n prevValue = undefined;\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n componentDidUpdate() {\n if (\n this.prevValue !== null &&\n this.asProps.value !== null &&\n this.prevValue !== this.asProps.value\n ) {\n this.animate();\n }\n this.prevValue = this.asProps.value;\n }\n componentDidMount() {\n this.prevValue = this.asProps.value;\n }\n componentWillUnmount() {\n clearTimeout(this.animationStartTimeout);\n }\n\n animate() {\n const fromNode = this.itemRefs[this.prevValue];\n const toNode = this.itemRefs[this.asProps.value];\n const containerNode = this.containerRef.current;\n\n if (!fromNode || !toNode || !containerNode) return;\n const containerRect = containerNode.getBoundingClientRect();\n const fromRect = fromNode.getBoundingClientRect();\n const toRect = toNode.getBoundingClientRect();\n const animation = {\n fromLeft: fromRect.x - containerRect.x,\n fromWidth: fromRect.width,\n toLeft: toRect.x - containerRect.x,\n toWidth: toRect.width,\n started: false,\n };\n this.setState({ animation });\n clearTimeout(this.animationStartTimeout);\n this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n }\n\n handleAnimationStart = () => {\n if (this.state.animation?.started === false) {\n this.setState({ animation: { ...this.state.animation, started: true } });\n }\n };\n handleAnimationEnd = () => {\n this.setState({ animation: null });\n };\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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': index + 1,\n 'aria-selected': isSelected,\n ref: (node) => (this.itemRefs[props.value] = node),\n };\n }\n\n getCaretProps() {\n const { animation } = this.state;\n if (!animation) return {};\n if (animation.started) {\n return {\n style: {\n left: animation.toLeft,\n width: animation.toWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n } else {\n return {\n style: {\n left: animation.fromLeft,\n width: animation.fromWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n }\n }\n\n render() {\n const STabLine = Root;\n const SCaret = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n const { animation } = this.state;\n\n return sstyled(styles)(\n <STabLine render={Box} role=\"tablist\" ref={this.containerRef}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n {animation && <SCaret {...this.getCaretProps()} />}\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <STabLineItem\n render={Box}\n tag=\"button\"\n neighborLocation={neighborLocation}\n type=\"button\"\n role=\"tab\"\n >\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 </NeighborLocation.Detect>\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\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/TabLine.js
CHANGED
|
@@ -18,19 +18,19 @@ import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhan
|
|
|
18
18
|
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
19
19
|
import NeighborLocation from '@semcore/neighbor-location';
|
|
20
20
|
/*__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
21
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
22
|
-
"__STabLine": "
|
|
23
|
-
"_underlined": "
|
|
24
|
-
"__STabLineItem": "
|
|
25
|
-
"_selected": "
|
|
26
|
-
"__SText": "
|
|
27
|
-
"__SAddon": "
|
|
28
|
-
"__SCaret": "
|
|
29
|
-
"_disabled": "
|
|
30
|
-
"_keyboardFocused": "
|
|
31
|
-
"_size_m": "
|
|
32
|
-
"_size_l": "
|
|
33
|
-
"_neighborLocation_left": "
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabLine_1ga6p_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1ga6p_gg_.__underlined_1ga6p_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1ga6p_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;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow: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:0;background:0 0;color:var(--intergalactic-text-primary, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1ga6p_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1ga6p_gg_:active,.___STabLineItem_1ga6p_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabLineItem_1ga6p_gg_:hover{outline:0;text-decoration:none}}.___STabLineItem_1ga6p_gg_::after,.___STabLineItem_1ga6p_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1ga6p_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1ga6p_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1ga6p_gg_.__selected_1ga6p_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1ga6p_gg_ .___SAddon_1ga6p_gg_:not(:last-child),.___STabLineItem_1ga6p_gg_ .___SText_1ga6p_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1ga6p_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1ga6p_gg_.__selected_1ga6p_gg_{flex-shrink:0}.___STabLineItem_1ga6p_gg_.__disabled_1ga6p_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STabLineItem_1ga6p_gg_.__keyboardFocused_1ga6p_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SText_1ga6p_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1ga6p_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1ga6p_gg_._size_m_1ga6p_gg_{height:28px;min-width:18px}.___STabLineItem_1ga6p_gg_._size_m_1ga6p_gg_ .___SText_1ga6p_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1ga6p_gg_._size_l_1ga6p_gg_{height:40px;min-width:26px}.___STabLineItem_1ga6p_gg_._size_l_1ga6p_gg_ .___SText_1ga6p_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1ga6p_gg_._neighborLocation_left_1ga6p_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1ga6p_gg_::after,.___STabLineItem_1ga6p_gg_::before{transition:none}.___STabLineItem_1ga6p_gg_.__selected_1ga6p_gg_::after{transition-delay:0;transition:none}.___SCaret_1ga6p_gg_{display:none}}" /*__inner_css_end__*/, "1ga6p_gg_") /*__reshadow_css_end__*/, {
|
|
22
|
+
"__STabLine": "___STabLine_1ga6p_gg_",
|
|
23
|
+
"_underlined": "__underlined_1ga6p_gg_",
|
|
24
|
+
"__STabLineItem": "___STabLineItem_1ga6p_gg_",
|
|
25
|
+
"_selected": "__selected_1ga6p_gg_",
|
|
26
|
+
"__SText": "___SText_1ga6p_gg_",
|
|
27
|
+
"__SAddon": "___SAddon_1ga6p_gg_",
|
|
28
|
+
"__SCaret": "___SCaret_1ga6p_gg_",
|
|
29
|
+
"_disabled": "__disabled_1ga6p_gg_",
|
|
30
|
+
"_keyboardFocused": "__keyboardFocused_1ga6p_gg_",
|
|
31
|
+
"_size_m": "_size_m_1ga6p_gg_",
|
|
32
|
+
"_size_l": "_size_l_1ga6p_gg_",
|
|
33
|
+
"_neighborLocation_left": "_neighborLocation_left_1ga6p_gg_"
|
|
34
34
|
});
|
|
35
35
|
var optionsA11yEnhance = {
|
|
36
36
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -54,6 +54,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
54
54
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
55
55
|
animation: null
|
|
56
56
|
});
|
|
57
|
+
_defineProperty(_assertThisInitialized(_this), "prevValue", undefined);
|
|
57
58
|
_defineProperty(_assertThisInitialized(_this), "itemRefs", {});
|
|
58
59
|
_defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
|
|
59
60
|
_defineProperty(_assertThisInitialized(_this), "animationStartTimeout", -1);
|
|
@@ -88,34 +89,45 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
88
89
|
}
|
|
89
90
|
}, {
|
|
90
91
|
key: "componentDidUpdate",
|
|
91
|
-
value: function componentDidUpdate(
|
|
92
|
-
if (
|
|
93
|
-
|
|
94
|
-
var toNode = this.itemRefs[this.props.value];
|
|
95
|
-
var containerNode = this.containerRef.current;
|
|
96
|
-
if (!fromNode || !toNode || !containerNode) return;
|
|
97
|
-
var containerRect = containerNode.getBoundingClientRect();
|
|
98
|
-
var fromRect = fromNode.getBoundingClientRect();
|
|
99
|
-
var toRect = toNode.getBoundingClientRect();
|
|
100
|
-
var animation = {
|
|
101
|
-
fromLeft: fromRect.x - containerRect.x,
|
|
102
|
-
fromWidth: fromRect.width,
|
|
103
|
-
toLeft: toRect.x - containerRect.x,
|
|
104
|
-
toWidth: toRect.width,
|
|
105
|
-
started: false
|
|
106
|
-
};
|
|
107
|
-
this.setState({
|
|
108
|
-
animation: animation
|
|
109
|
-
});
|
|
110
|
-
clearTimeout(this.animationStartTimeout);
|
|
111
|
-
this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
|
|
92
|
+
value: function componentDidUpdate() {
|
|
93
|
+
if (this.prevValue !== null && this.asProps.value !== null && this.prevValue !== this.asProps.value) {
|
|
94
|
+
this.animate();
|
|
112
95
|
}
|
|
96
|
+
this.prevValue = this.asProps.value;
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
99
|
+
key: "componentDidMount",
|
|
100
|
+
value: function componentDidMount() {
|
|
101
|
+
this.prevValue = this.asProps.value;
|
|
113
102
|
}
|
|
114
103
|
}, {
|
|
115
104
|
key: "componentWillUnmount",
|
|
116
105
|
value: function componentWillUnmount() {
|
|
117
106
|
clearTimeout(this.animationStartTimeout);
|
|
118
107
|
}
|
|
108
|
+
}, {
|
|
109
|
+
key: "animate",
|
|
110
|
+
value: function animate() {
|
|
111
|
+
var fromNode = this.itemRefs[this.prevValue];
|
|
112
|
+
var toNode = this.itemRefs[this.asProps.value];
|
|
113
|
+
var containerNode = this.containerRef.current;
|
|
114
|
+
if (!fromNode || !toNode || !containerNode) return;
|
|
115
|
+
var containerRect = containerNode.getBoundingClientRect();
|
|
116
|
+
var fromRect = fromNode.getBoundingClientRect();
|
|
117
|
+
var toRect = toNode.getBoundingClientRect();
|
|
118
|
+
var animation = {
|
|
119
|
+
fromLeft: fromRect.x - containerRect.x,
|
|
120
|
+
fromWidth: fromRect.width,
|
|
121
|
+
toLeft: toRect.x - containerRect.x,
|
|
122
|
+
toWidth: toRect.width,
|
|
123
|
+
started: false
|
|
124
|
+
};
|
|
125
|
+
this.setState({
|
|
126
|
+
animation: animation
|
|
127
|
+
});
|
|
128
|
+
clearTimeout(this.animationStartTimeout);
|
|
129
|
+
this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
|
|
130
|
+
}
|
|
119
131
|
}, {
|
|
120
132
|
key: "getItemProps",
|
|
121
133
|
value: function getItemProps(props, index) {
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","animation","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_createClass","key","uncontrolledProps","componentDidUpdate","prevProps","props","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","clearTimeout","animationStartTimeout","setTimeout","handleAnimationStart","componentWillUnmount","getItemProps","index","_this2","_this$asProps","asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4"],"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 from '@semcore/neighbor-location';\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 state = { animation: null };\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (\n prevProps.value !== null &&\n this.props.value !== null &&\n prevProps.value !== this.props.value\n ) {\n const fromNode = this.itemRefs[prevProps.value];\n const toNode = this.itemRefs[this.props.value];\n const containerNode = this.containerRef.current;\n\n if (!fromNode || !toNode || !containerNode) return;\n const containerRect = containerNode.getBoundingClientRect();\n const fromRect = fromNode.getBoundingClientRect();\n const toRect = toNode.getBoundingClientRect();\n const animation = {\n fromLeft: fromRect.x - containerRect.x,\n fromWidth: fromRect.width,\n toLeft: toRect.x - containerRect.x,\n toWidth: toRect.width,\n started: false,\n };\n this.setState({ animation });\n clearTimeout(this.animationStartTimeout);\n this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n }\n }\n componentWillUnmount() {\n clearTimeout(this.animationStartTimeout);\n }\n\n handleAnimationStart = () => {\n if (this.state.animation?.started === false) {\n this.setState({ animation: { ...this.state.animation, started: true } });\n }\n };\n handleAnimationEnd = () => {\n this.setState({ animation: null });\n };\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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': index + 1,\n 'aria-selected': isSelected,\n ref: (node) => (this.itemRefs[props.value] = node),\n };\n }\n\n getCaretProps() {\n const { animation } = this.state;\n if (!animation) return {};\n if (animation.started) {\n return {\n style: {\n left: animation.toLeft,\n width: animation.toWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n } else {\n return {\n style: {\n left: animation.fromLeft,\n width: animation.fromWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n }\n }\n\n render() {\n const STabLine = Root;\n const SCaret = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n const { animation } = this.state;\n\n return sstyled(styles)(\n <STabLine render={Box} role=\"tablist\" ref={this.containerRef}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n {animation && <SCaret {...this.getCaretProps()} />}\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <STabLineItem\n render={Box}\n tag=\"button\"\n neighborLocation={neighborLocation}\n type=\"button\"\n role=\"tab\"\n >\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 </NeighborLocation.Detect>\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\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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"}
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","keyboardFocusEnhance","a11yEnhance","NeighborLocation","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","animation","undefined","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_createClass","key","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","_this2","_this$asProps","size","isSelected","selected","onClick","bindHandlerClick","tabIndex","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4"],"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 from '@semcore/neighbor-location';\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 state = { animation: null };\n prevValue = undefined;\n itemRefs = {};\n containerRef = React.createRef();\n animationStartTimeout = -1;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n componentDidUpdate() {\n if (\n this.prevValue !== null &&\n this.asProps.value !== null &&\n this.prevValue !== this.asProps.value\n ) {\n this.animate();\n }\n this.prevValue = this.asProps.value;\n }\n componentDidMount() {\n this.prevValue = this.asProps.value;\n }\n componentWillUnmount() {\n clearTimeout(this.animationStartTimeout);\n }\n\n animate() {\n const fromNode = this.itemRefs[this.prevValue];\n const toNode = this.itemRefs[this.asProps.value];\n const containerNode = this.containerRef.current;\n\n if (!fromNode || !toNode || !containerNode) return;\n const containerRect = containerNode.getBoundingClientRect();\n const fromRect = fromNode.getBoundingClientRect();\n const toRect = toNode.getBoundingClientRect();\n const animation = {\n fromLeft: fromRect.x - containerRect.x,\n fromWidth: fromRect.width,\n toLeft: toRect.x - containerRect.x,\n toWidth: toRect.width,\n started: false,\n };\n this.setState({ animation });\n clearTimeout(this.animationStartTimeout);\n this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n }\n\n handleAnimationStart = () => {\n if (this.state.animation?.started === false) {\n this.setState({ animation: { ...this.state.animation, started: true } });\n }\n };\n handleAnimationEnd = () => {\n this.setState({ animation: null });\n };\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props, index) {\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': index + 1,\n 'aria-selected': isSelected,\n ref: (node) => (this.itemRefs[props.value] = node),\n };\n }\n\n getCaretProps() {\n const { animation } = this.state;\n if (!animation) return {};\n if (animation.started) {\n return {\n style: {\n left: animation.toLeft,\n width: animation.toWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n } else {\n return {\n style: {\n left: animation.fromLeft,\n width: animation.fromWidth,\n },\n onTransitionEnd: this.handleAnimationEnd,\n };\n }\n }\n\n render() {\n const STabLine = Root;\n const SCaret = 'div';\n const { styles, Children, controlsLength } = this.asProps;\n const { animation } = this.state;\n\n return sstyled(styles)(\n <STabLine render={Box} role=\"tablist\" ref={this.containerRef}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n {animation && <SCaret {...this.getCaretProps()} />}\n </STabLine>,\n );\n }\n}\n\nfunction TabLineItem(props) {\n const STabLineItem = Root;\n const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <STabLineItem\n render={Box}\n tag=\"button\"\n neighborLocation={neighborLocation}\n type=\"button\"\n role=\"tab\"\n >\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 </NeighborLocation.Detect>\n );\n}\n\nTabLineItem.enhance = [keyboardFocusEnhance()];\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":";;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,iBAAiB,MAAM,sCAAsC;AACpE,OAAOC,oBAAoB,MAAM,kDAAkD;AACnF,OAAOC,WAAW,MAAM,yCAAyC;AACjE,OAAOC,gBAAgB,MAAM,4BAA4B;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1D,IAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAE,SAAAA,iBAACC,eAAe,EAAK;IACrC,IAAIA,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,EAAE;MACvBD,eAAe,CAACE,KAAK,EAAE;IACzB;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAAC,IAEIC,WAAW,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,WAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,WAAA;EAAA,SAAAA,YAAA;IAAA,IAAAK,KAAA;IAAAC,eAAA,OAAAN,WAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAAM,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,YASP;MAAEa,SAAS,EAAE;IAAK,CAAC;IAAAF,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,gBACfc,SAAS;IAAAH,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,eACV,CAAC,CAAC;IAAAW,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,gCACExB,KAAK,CAACuC,SAAS,EAAE;IAAAJ,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,4BACR,CAAC,CAAC;IAAAW,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,2BA8CH,YAAM;MAAA,IAAAgB,qBAAA;MAC3B,IAAI,EAAAA,qBAAA,GAAAhB,KAAA,CAAKiB,KAAK,CAACJ,SAAS,cAAAG,qBAAA,uBAApBA,qBAAA,CAAsBE,OAAO,MAAK,KAAK,EAAE;QAC3ClB,KAAA,CAAKmB,QAAQ,CAAC;UAAEN,SAAS,EAAAO,aAAA,CAAAA,aAAA,KAAOpB,KAAA,CAAKiB,KAAK,CAACJ,SAAS;YAAEK,OAAO,EAAE;UAAI;QAAG,CAAC,CAAC;MAC1E;IACF,CAAC;IAAAP,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,yBACoB,YAAM;MACzBA,KAAA,CAAKmB,QAAQ,CAAC;QAAEN,SAAS,EAAE;MAAK,CAAC,CAAC;IACpC,CAAC;IAAAF,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,uBAEkB,UAACqB,KAAK;MAAA,OAAK,UAACC,CAAC,EAAK;QACnCtB,KAAA,CAAKuB,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;MAC/B,CAAC;IAAA;IAAA,OAAAtB,KAAA;EAAA;EAAAwB,YAAA,CAAA7B,WAAA;IAAA8B,GAAA;IAAAJ,KAAA,EAvDD,SAAAK,kBAAA,EAAoB;MAClB,OAAO;QACLL,KAAK,EAAE;MACT,CAAC;IACH;EAAC;IAAAI,GAAA;IAAAJ,KAAA,EAED,SAAAM,mBAAA,EAAqB;MACnB,IACE,IAAI,CAACC,SAAS,KAAK,IAAI,IACvB,IAAI,CAACC,OAAO,CAACR,KAAK,KAAK,IAAI,IAC3B,IAAI,CAACO,SAAS,KAAK,IAAI,CAACC,OAAO,CAACR,KAAK,EACrC;QACA,IAAI,CAACS,OAAO,EAAE;MAChB;MACA,IAAI,CAACF,SAAS,GAAG,IAAI,CAACC,OAAO,CAACR,KAAK;IACrC;EAAC;IAAAI,GAAA;IAAAJ,KAAA,EACD,SAAAU,kBAAA,EAAoB;MAClB,IAAI,CAACH,SAAS,GAAG,IAAI,CAACC,OAAO,CAACR,KAAK;IACrC;EAAC;IAAAI,GAAA;IAAAJ,KAAA,EACD,SAAAW,qBAAA,EAAuB;MACrBC,YAAY,CAAC,IAAI,CAACC,qBAAqB,CAAC;IAC1C;EAAC;IAAAT,GAAA;IAAAJ,KAAA,EAED,SAAAS,QAAA,EAAU;MACR,IAAMK,QAAQ,GAAG,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACR,SAAS,CAAC;MAC9C,IAAMS,MAAM,GAAG,IAAI,CAACD,QAAQ,CAAC,IAAI,CAACP,OAAO,CAACR,KAAK,CAAC;MAChD,IAAMiB,aAAa,GAAG,IAAI,CAACC,YAAY,CAACC,OAAO;MAE/C,IAAI,CAACL,QAAQ,IAAI,CAACE,MAAM,IAAI,CAACC,aAAa,EAAE;MAC5C,IAAMG,aAAa,GAAGH,aAAa,CAACI,qBAAqB,EAAE;MAC3D,IAAMC,QAAQ,GAAGR,QAAQ,CAACO,qBAAqB,EAAE;MACjD,IAAME,MAAM,GAAGP,MAAM,CAACK,qBAAqB,EAAE;MAC7C,IAAM7B,SAAS,GAAG;QAChBgC,QAAQ,EAAEF,QAAQ,CAACG,CAAC,GAAGL,aAAa,CAACK,CAAC;QACtCC,SAAS,EAAEJ,QAAQ,CAACK,KAAK;QACzBC,MAAM,EAAEL,MAAM,CAACE,CAAC,GAAGL,aAAa,CAACK,CAAC;QAClCI,OAAO,EAAEN,MAAM,CAACI,KAAK;QACrB9B,OAAO,EAAE;MACX,CAAC;MACD,IAAI,CAACC,QAAQ,CAAC;QAAEN,SAAS,EAATA;MAAU,CAAC,CAAC;MAC5BoB,YAAY,CAAC,IAAI,CAACC,qBAAqB,CAAC;MACxC,IAAI,CAACA,qBAAqB,GAAGiB,UAAU,CAAC,IAAI,CAACC,oBAAoB,EAAE,CAAC,CAAC;IACvE;EAAC;IAAA3B,GAAA;IAAAJ,KAAA,EAeD,SAAAgC,aAAaC,KAAK,EAAEC,KAAK,EAAE;MAAA,IAAAC,MAAA;MACzB,IAAAC,aAAA,GAAwB,IAAI,CAAC5B,OAAO;QAA5BR,KAAK,GAAAoC,aAAA,CAALpC,KAAK;QAAEqC,IAAI,GAAAD,aAAA,CAAJC,IAAI;MACnB,IAAMC,UAAU,GAAGtC,KAAK,KAAKiC,KAAK,CAACjC,KAAK;MACxC,OAAO;QACLqC,IAAI,EAAJA,IAAI;QACJE,QAAQ,EAAED,UAAU;QACpBE,OAAO,EAAE,IAAI,CAACC,gBAAgB,CAACR,KAAK,CAACjC,KAAK,CAAC;QAC3C0C,QAAQ,EAAEJ,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7B,eAAe,EAAEJ,KAAK,GAAG,CAAC;QAC1B,eAAe,EAAEI,UAAU;QAC3BK,GAAG,EAAE,SAAAA,IAACC,IAAI;UAAA,OAAMT,MAAI,CAACpB,QAAQ,CAACkB,KAAK,CAACjC,KAAK,CAAC,GAAG4C,IAAI;QAAA;MACnD,CAAC;IACH;EAAC;IAAAxC,GAAA;IAAAJ,KAAA,EAED,SAAA6C,cAAA,EAAgB;MACd,IAAQrD,SAAS,GAAK,IAAI,CAACI,KAAK,CAAxBJ,SAAS;MACjB,IAAI,CAACA,SAAS,EAAE,OAAO,CAAC,CAAC;MACzB,IAAIA,SAAS,CAACK,OAAO,EAAE;QACrB,OAAO;UACLhC,KAAK,EAAE;YACLiF,IAAI,EAAEtD,SAAS,CAACoC,MAAM;YACtBD,KAAK,EAAEnC,SAAS,CAACqC;UACnB,CAAC;UACDkB,eAAe,EAAE,IAAI,CAACC;QACxB,CAAC;MACH,CAAC,MAAM;QACL,OAAO;UACLnF,KAAK,EAAE;YACLiF,IAAI,EAAEtD,SAAS,CAACgC,QAAQ;YACxBG,KAAK,EAAEnC,SAAS,CAACkC;UACnB,CAAC;UACDqB,eAAe,EAAE,IAAI,CAACC;QACxB,CAAC;MACH;IACF;EAAC;IAAA5C,GAAA;IAAAJ,KAAA,EAED,SAAAiD,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAA1C,OAAA;QAAA2C,KAAA;MACP,IAAMC,QAAQ,GAMM5F,GAAG;MALvB,IAAM6F,MAAM,GAAG,KAAK;MACpB,IAAAC,cAAA,GAA6C,IAAI,CAAC9C,OAAO;QAAjD+C,MAAM,GAAAD,cAAA,CAANC,MAAM;QAAEC,QAAQ,GAAAF,cAAA,CAARE,QAAQ;QAAEC,cAAc,GAAAH,cAAA,CAAdG,cAAc;MACxC,IAAQjE,SAAS,GAAK,IAAI,CAACI,KAAK,CAAxBJ,SAAS;MAEjB,OAAA2D,KAAA,GAAO7F,OAAO,CAACiG,MAAM,CAAC,eACpBpG,KAAA,CAAAuG,aAAA,CAACN,QAAQ,EAAAD,KAAA,CAAAQ,EAAA,aAAA5D,aAAA,KAAA6D,YAAA;QAAA,QAAmB,SAAS;QAAA,OAAM,IAAI,CAAC1C;MAAY,GAAAgC,IAAA,kBAC1D/F,KAAA,CAAAuG,aAAA,CAAC9F,gBAAgB,EAAAuF,KAAA,CAAAQ,EAAA;QAAA,kBAAiBF;MAAc,iBAC9CtG,KAAA,CAAAuG,aAAA,CAACF,QAAQ,EAAAL,KAAA,CAAAQ,EAAA,iBAAG,CACK,EAClBnE,SAAS,iBAAIrC,KAAA,CAAAuG,aAAA,CAACL,MAAM,EAAAF,KAAA,CAAAQ,EAAA,WAAA5D,aAAA,KAAK,IAAI,CAAC8C,aAAa,EAAE,GAAI,CACzC;IAEf;EAAC;EAAA,OAAAvE,WAAA;AAAA,EA1HuBjB,SAAS;AAAAiC,eAAA,CAA7BhB,WAAW,iBACM,SAAS;AAAAgB,eAAA,CAD1BhB,WAAW,WAEAT,KAAK;AAAAyB,eAAA,CAFhBhB,WAAW,kBAGO;EACpBuF,YAAY,EAAE,IAAI;EAClBxB,IAAI,EAAE,GAAG;EACTyB,UAAU,EAAE;AACd,CAAC;AAAAxE,eAAA,CAPGhB,WAAW,aAQE,CAACX,WAAW,CAACK,kBAAkB,CAAC,CAAC;AAqHpD,SAAS+F,WAAWA,CAAC9B,KAAK,EAAE;EAAA,IAAA+B,KAAA,GAAAC,YAAA;EAC1B,IAAMC,YAAY,GAQA1G,GAAG;EAPrB,IAAQgG,QAAQ,GAAsDvB,KAAK,CAAnEuB,QAAQ;IAAED,MAAM,GAA8CtB,KAAK,CAAzDsB,MAAM;IAAEY,SAAS,GAAmClC,KAAK,CAAjDkC,SAAS;IAAEC,UAAU,GAAuBnC,KAAK,CAAtCmC,UAAU;IAAEC,gBAAgB,GAAKpC,KAAK,CAA1BoC,gBAAgB;EAEjE,oBACElH,KAAA,CAAAuG,aAAA,CAAC9F,gBAAgB,CAAC0G,MAAM;IAACD,gBAAgB,EAAEA;EAAiB,GACzD,UAACA,gBAAgB;IAAA,IAAAE,KAAA;IAAA,OAAAA,KAAA,GAChBjH,OAAO,CAACiG,MAAM,CAAC,eACbpG,KAAA,CAAAuG,aAAA,CAACQ,YAAY,EAAAK,KAAA,CAAAZ,EAAA,iBAAA5D,aAAA,KAAAyE,aAAA;MAAA,OAEP,QAAQ;MAAA,oBACMH,gBAAgB;MAAA,QAC7B,QAAQ;MAAA,QACR;IAAK,GAAAL,KAAA,KAETG,SAAS,gBAAGhH,KAAA,CAAAuG,aAAA,CAACe,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAET;IAAU,EAAG,GAAG,IAAI,EACzD1G,iBAAiB,CAAC+F,QAAQ,EAAEiB,OAAO,CAACC,IAAI,CAACG,IAAI,EAAEJ,OAAO,CAACC,IAAI,CAACC,KAAK,CAAC,EAClEP,UAAU,gBAAGjH,KAAA,CAAAuG,aAAA,CAACe,OAAO,CAACC,IAAI,CAACC,KAAK;MAACC,GAAG,EAAER;IAAW,EAAG,GAAG,IAAI,CAC/C;EAAA,CAChB,CAEqB;AAE9B;AAEAL,WAAW,CAACe,OAAO,GAAG,CAACpH,oBAAoB,EAAE,CAAC;AAE9C,SAASmH,IAAIA,CAAC5C,KAAK,EAAE;EAAA,IAAA8C,KAAA,GAAAd,YAAA;IAAAe,KAAA;EACnB,IAAQzB,MAAM,GAAKtB,KAAK,CAAhBsB,MAAM;EACd,IAAM0B,KAAK,GAC2BzH,GAAG;EAAzC,OAAAwH,KAAA,GAAO1H,OAAO,CAACiG,MAAM,CAAC,eAACpG,KAAA,CAAAuG,aAAA,CAACuB,KAAK,EAAAD,KAAA,CAAArB,EAAA,UAAA5D,aAAA,KAAAmF,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AAC1D;AAEA,SAASJ,KAAKA,CAAC1C,KAAK,EAAE;EAAA,IAAAkD,KAAA,GAAAlB,YAAA;IAAAmB,KAAA;EACpB,IAAQ7B,MAAM,GAAKtB,KAAK,CAAhBsB,MAAM;EACd,IAAM8B,MAAM,GAC2B7H,GAAG;EAA1C,OAAA4H,KAAA,GAAO9H,OAAO,CAACiG,MAAM,CAAC,eAACpG,KAAA,CAAAuG,aAAA,CAAC2B,MAAM,EAAAD,KAAA,CAAAzB,EAAA,WAAA5D,aAAA,KAAAuF,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AAC3D;AAEA,IAAMV,OAAO,GAAGrH,eAAe,CAACkB,WAAW,EAAE;EAC3CoG,IAAI,EAAE,CAACX,WAAW,EAAE;IAAEc,IAAI,EAAJA,IAAI;IAAEF,KAAK,EAALA;EAAM,CAAC;AACrC,CAAC,CAAC;AAEF,eAAeF,OAAO"}
|