@semcore/tab-line 2.8.5 → 2.9.0
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 +25 -21
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/cjs/index.js +5 -1
- package/lib/cjs/style/tab-line.shadow.css +12 -0
- package/lib/es6/TabLine.js +22 -22
- package/lib/es6/TabLine.js.map +1 -1
- package/lib/es6/style/tab-line.shadow.css +12 -0
- package/lib/types/index.d.ts +5 -1
- package/package.json +6 -1
- package/src/TabLine.js +7 -20
- package/src/index.d.ts +5 -1
- 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.0] - 2021-03-04
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Disabled animation if reduce motion is preferred.
|
|
10
|
+
|
|
11
|
+
## [2.8.7] - 2022-02-24
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added repository field to package.json file.
|
|
16
|
+
|
|
17
|
+
## [2.8.6] - 2022-02-22
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Add missed ts type `defaultValue`.
|
|
22
|
+
|
|
5
23
|
## [2.8.5] - 2022-02-04
|
|
6
24
|
|
|
7
25
|
### Fixed
|
|
@@ -212,15 +230,15 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
|
|
|
212
230
|
|
|
213
231
|
## [1.0.0] - 2019-05-20
|
|
214
232
|
|
|
215
|
-
### Added
|
|
216
|
-
|
|
217
|
-
- Добавлено свойство `underlined`
|
|
218
|
-
|
|
219
233
|
### BREAK
|
|
220
234
|
|
|
221
235
|
- Удалено свойство `theme`
|
|
222
236
|
- Изменены размеры в соответствии с типографикой
|
|
223
237
|
|
|
238
|
+
### Added
|
|
239
|
+
|
|
240
|
+
- Добавлено свойство `underlined`
|
|
241
|
+
|
|
224
242
|
## [1.0.0-1] - 2019-02-13
|
|
225
243
|
|
|
226
244
|
### Added
|
package/lib/cjs/TabLine.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -25,13 +25,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
25
25
|
|
|
26
26
|
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
27
27
|
|
|
28
|
-
var _react =
|
|
28
|
+
var _react = _interopRequireDefault(require("react"));
|
|
29
29
|
|
|
30
30
|
var _flexBox = require("@semcore/flex-box");
|
|
31
31
|
|
|
32
32
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
33
33
|
|
|
34
|
-
var _keyboardFocusEnhance =
|
|
34
|
+
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
35
35
|
|
|
36
36
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
|
|
37
37
|
|
|
@@ -39,9 +39,13 @@ var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-locat
|
|
|
39
39
|
|
|
40
40
|
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
|
|
41
41
|
|
|
42
|
-
function
|
|
42
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
43
|
+
|
|
44
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
45
|
+
|
|
46
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
43
47
|
|
|
44
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
48
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
45
49
|
|
|
46
50
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
47
51
|
|
|
@@ -52,24 +56,24 @@ var style = (
|
|
|
52
56
|
/*__reshadow_css_start__*/
|
|
53
57
|
_core.sstyled.insert(
|
|
54
58
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
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}}"
|
|
56
60
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
61
|
+
, "qjptdj_gg_")
|
|
58
62
|
/*__reshadow_css_end__*/
|
|
59
63
|
, {
|
|
60
|
-
"__STabLine": "
|
|
61
|
-
"_underlined": "
|
|
62
|
-
"__STabLineItem": "
|
|
63
|
-
"__SIndicator": "
|
|
64
|
-
"_selected": "
|
|
65
|
-
"_disabled": "
|
|
66
|
-
"_keyboardFocused": "
|
|
67
|
-
"__SText": "
|
|
68
|
-
"__SAddon": "
|
|
69
|
-
"_size_m": "
|
|
70
|
-
"_size_l": "
|
|
71
|
-
"_size_xl": "
|
|
72
|
-
"_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_"
|
|
73
77
|
});
|
|
74
78
|
var optionsA11yEnhance = {
|
|
75
79
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/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","Component","defaultValue","underlined","TabLineItem","STabLineItem","addonLeft","addonRight","TabLine","Item","Text","Addon","enhance","SText","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;
|
|
1
|
+
{"version":3,"sources":["../../src/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","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"}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -26,4 +26,8 @@ Object.keys(_TabLine).forEach(function (key) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
|
+
|
|
30
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
+
|
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
33
|
//# sourceMappingURL=index.js.map
|
|
@@ -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
|
@@ -11,21 +11,21 @@ import { assignProps as _assignProps3 } from "@semcore/core";
|
|
|
11
11
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
13
|
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
15
|
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
17
|
|
|
18
18
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
19
19
|
|
|
20
20
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
21
21
|
|
|
22
|
-
import React
|
|
23
|
-
import createComponent, { Component,
|
|
24
|
-
import { Box
|
|
22
|
+
import React from 'react';
|
|
23
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
24
|
+
import { Box } from '@semcore/flex-box';
|
|
25
25
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
26
|
-
import keyboardFocusEnhance
|
|
26
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
27
27
|
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
28
|
-
import NeighborLocation, {
|
|
28
|
+
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
29
29
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
30
30
|
|
|
31
31
|
/*__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
@@ -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.js"],"names":["React","ComponentProps","HTMLAttributes","createComponent","Component","IFunctionProps","Merge","PropGetterFn","PropsAndRef","sstyled","Root","Box","IBoxProps","addonTextChildren","keyboardFocusEnhance","IKeyboardFocusProps","a11yEnhance","NeighborLocation","INeighborItemProps","INeighborLocationProps","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":"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","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, {\n Component,\n IFunctionProps,\n Merge,\n PropGetterFn,\n PropsAndRef,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport keyboardFocusEnhance, {\n IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport NeighborLocation, {\n INeighborItemProps,\n INeighborLocationProps,\n neighborLocationEnhance,\n} 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 = 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"}
|
|
1
|
+
{"version":3,"sources":["../../src/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"],"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/types/index.d.ts
CHANGED
|
@@ -21,6 +21,10 @@ export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
|
21
21
|
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
22
|
/** Value of the selected tab */
|
|
23
23
|
value?: T;
|
|
24
|
+
/** Default value of the selected tab
|
|
25
|
+
* @default null
|
|
26
|
+
* */
|
|
27
|
+
defaultValue?: T;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
@@ -29,7 +33,7 @@ export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeig
|
|
|
29
33
|
/** Disabled state */
|
|
30
34
|
disabled?: boolean;
|
|
31
35
|
/** Tab value */
|
|
32
|
-
value
|
|
36
|
+
value?: TabLineValue;
|
|
33
37
|
/** Left addon tag */
|
|
34
38
|
addonLeft?: React.ElementType;
|
|
35
39
|
/** Right addon tag */
|
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.0",
|
|
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
|
}
|
package/src/TabLine.js
CHANGED
|
@@ -1,24 +1,10 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import createComponent, {
|
|
3
|
-
|
|
4
|
-
IFunctionProps,
|
|
5
|
-
Merge,
|
|
6
|
-
PropGetterFn,
|
|
7
|
-
PropsAndRef,
|
|
8
|
-
sstyled,
|
|
9
|
-
Root,
|
|
10
|
-
} from '@semcore/core';
|
|
11
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
+
import { Box } from '@semcore/flex-box';
|
|
12
4
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
13
|
-
import keyboardFocusEnhance
|
|
14
|
-
IKeyboardFocusProps,
|
|
15
|
-
} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
5
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
16
6
|
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
17
|
-
import NeighborLocation, {
|
|
18
|
-
INeighborItemProps,
|
|
19
|
-
INeighborLocationProps,
|
|
20
|
-
neighborLocationEnhance,
|
|
21
|
-
} from '@semcore/neighbor-location';
|
|
7
|
+
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
22
8
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
23
9
|
|
|
24
10
|
import style from './style/tab-line.shadow.css';
|
|
@@ -74,7 +60,8 @@ class TabLineRoot extends Component {
|
|
|
74
60
|
if (!tab) return false;
|
|
75
61
|
this.$observerTab.observe(tab);
|
|
76
62
|
const { offsetLeft, offsetWidth } = tab;
|
|
77
|
-
const positionLeftParent =
|
|
63
|
+
const positionLeftParent =
|
|
64
|
+
tabsParent.clientLeft + parseInt(tabsParent.style.paddingLeft, 10) || 0;
|
|
78
65
|
indicator.style.transform = `translateX(${offsetLeft - positionLeftParent}px)`;
|
|
79
66
|
indicator.style.width = `${offsetWidth}px`;
|
|
80
67
|
};
|
package/src/index.d.ts
CHANGED
|
@@ -21,6 +21,10 @@ export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
|
21
21
|
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
22
|
/** Value of the selected tab */
|
|
23
23
|
value?: T;
|
|
24
|
+
/** Default value of the selected tab
|
|
25
|
+
* @default null
|
|
26
|
+
* */
|
|
27
|
+
defaultValue?: T;
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
@@ -29,7 +33,7 @@ export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeig
|
|
|
29
33
|
/** Disabled state */
|
|
30
34
|
disabled?: boolean;
|
|
31
35
|
/** Tab value */
|
|
32
|
-
value
|
|
36
|
+
value?: TabLineValue;
|
|
33
37
|
/** Left addon tag */
|
|
34
38
|
addonLeft?: React.ElementType;
|
|
35
39
|
/** Right addon tag */
|
|
@@ -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
|
+
}
|