@semcore/tab-line 16.0.1 → 16.0.2-prerelease.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +1 -31
- package/lib/cjs/TabLine.js +37 -39
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/TabLine.js +34 -34
- package/lib/es6/TabLine.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/esm/TabLine.mjs +38 -36
- package/lib/types/index.d.ts +8 -8
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [16.0.2] - 2025-06-13
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [16.0.1 ~> 16.0.2], `@semcore/neighbor-location` [16.0.1 ~> 16.0.2], `@semcore/base-components` [16.0.1 ~> 16.0.2]).
|
|
10
|
+
|
|
5
11
|
## [16.0.1] - 2025-05-30
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/README.md
CHANGED
|
@@ -13,40 +13,10 @@
|
|
|
13
13
|
## Install
|
|
14
14
|
|
|
15
15
|
```sh
|
|
16
|
-
npm install
|
|
16
|
+
npm install @semcore/tab-line
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
## Usage
|
|
20
19
|
|
|
21
|
-
```jsx
|
|
22
|
-
import TabLine from 'intergalactic/tab-line';
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
<details>
|
|
26
|
-
<summary>Alternative installation and use</summary>
|
|
27
|
-
|
|
28
|
-
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
-
|
|
30
|
-
### Install
|
|
31
|
-
|
|
32
|
-
You can only install one package from the design system
|
|
33
|
-
|
|
34
|
-
```sh
|
|
35
|
-
npm install @semcore/tab-line @semcore/core
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
-
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
-
|
|
41
|
-
### Usage
|
|
42
|
-
|
|
43
|
-
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
-
|
|
45
|
-
```jsx
|
|
46
|
-
import TabLine from '@semcore/tab-line';
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
</details>
|
|
50
20
|
|
|
51
21
|
## 👤 Author
|
|
52
22
|
|
package/lib/cjs/TabLine.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
@@ -8,31 +8,33 @@ exports.wrapTabLine = exports["default"] = void 0;
|
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var
|
|
11
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
+
var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
12
14
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
14
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
16
|
var _core = require("@semcore/core");
|
|
16
|
-
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
var _flexBox = require("@semcore/flex-box");
|
|
18
17
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
19
18
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
19
|
+
var _flexBox = require("@semcore/flex-box");
|
|
20
20
|
var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
|
|
21
|
+
var _react = _interopRequireDefault(require("react"));
|
|
22
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
21
23
|
/*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
22
|
-
var style = (
|
|
24
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_1qdfs_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1qdfs_gg_.__underlined_1qdfs_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1qdfs_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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;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_1qdfs_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1qdfs_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1qdfs_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1qdfs_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1qdfs_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1qdfs_gg_.__selected_1qdfs_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1qdfs_gg_ .___SAddon_1qdfs_gg_:not(:last-child),.___STabLineItem_1qdfs_gg_ .___SText_1qdfs_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1qdfs_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_1qdfs_gg_.__selected_1qdfs_gg_{flex-shrink:0}.___STabLineItem_1qdfs_gg_.__disabled_1qdfs_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SText_1qdfs_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1qdfs_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1qdfs_gg_._size_m_1qdfs_gg_{height:28px;min-width:18px}.___STabLineItem_1qdfs_gg_._size_m_1qdfs_gg_ .___SText_1qdfs_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1qdfs_gg_._size_l_1qdfs_gg_{height:40px;min-width:26px}.___STabLineItem_1qdfs_gg_._size_l_1qdfs_gg_ .___SText_1qdfs_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1qdfs_gg_._neighborLocation_left_1qdfs_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1qdfs_gg_.__selected_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::before{transition:none}.___SCaret_1qdfs_gg_{display:none}}", /*__inner_css_end__*/"1qdfs_gg_"),
|
|
23
25
|
/*__reshadow_css_end__*/
|
|
24
26
|
{
|
|
25
|
-
"__STabLine": "
|
|
26
|
-
"_underlined": "
|
|
27
|
-
"__SCaret": "
|
|
28
|
-
"__STabLineItem": "
|
|
29
|
-
"_selected": "
|
|
30
|
-
"_disabled": "
|
|
31
|
-
"__SText": "
|
|
32
|
-
"__SAddon": "
|
|
33
|
-
"_neighborLocation_left": "
|
|
34
|
-
"_size_m": "
|
|
35
|
-
"_size_l": "
|
|
27
|
+
"__STabLine": "___STabLine_1qdfs_gg_",
|
|
28
|
+
"_underlined": "__underlined_1qdfs_gg_",
|
|
29
|
+
"__SCaret": "___SCaret_1qdfs_gg_",
|
|
30
|
+
"__STabLineItem": "___STabLineItem_1qdfs_gg_",
|
|
31
|
+
"_selected": "__selected_1qdfs_gg_",
|
|
32
|
+
"_disabled": "__disabled_1qdfs_gg_",
|
|
33
|
+
"__SText": "___SText_1qdfs_gg_",
|
|
34
|
+
"__SAddon": "___SAddon_1qdfs_gg_",
|
|
35
|
+
"_neighborLocation_left": "_neighborLocation_left_1qdfs_gg_",
|
|
36
|
+
"_size_m": "_size_m_1qdfs_gg_",
|
|
37
|
+
"_size_l": "_size_l_1qdfs_gg_"
|
|
36
38
|
});
|
|
37
39
|
var optionsA11yEnhance = {
|
|
38
40
|
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
@@ -46,23 +48,21 @@ var optionsA11yEnhance = {
|
|
|
46
48
|
childSelector: ['role', 'tab']
|
|
47
49
|
};
|
|
48
50
|
var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
49
|
-
(0, _inherits2["default"])(TabLineRoot, _Component);
|
|
50
|
-
var _super = (0, _createSuper2["default"])(TabLineRoot);
|
|
51
51
|
function TabLineRoot() {
|
|
52
52
|
var _this;
|
|
53
53
|
(0, _classCallCheck2["default"])(this, TabLineRoot);
|
|
54
54
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
55
55
|
args[_key] = arguments[_key];
|
|
56
56
|
}
|
|
57
|
-
_this =
|
|
58
|
-
(0, _defineProperty2["default"])(
|
|
57
|
+
_this = _callSuper(this, TabLineRoot, [].concat(args));
|
|
58
|
+
(0, _defineProperty2["default"])(_this, "state", {
|
|
59
59
|
animation: null
|
|
60
60
|
});
|
|
61
|
-
(0, _defineProperty2["default"])(
|
|
62
|
-
(0, _defineProperty2["default"])(
|
|
63
|
-
(0, _defineProperty2["default"])(
|
|
64
|
-
(0, _defineProperty2["default"])(
|
|
65
|
-
(0, _defineProperty2["default"])(
|
|
61
|
+
(0, _defineProperty2["default"])(_this, "prevValue", undefined);
|
|
62
|
+
(0, _defineProperty2["default"])(_this, "itemRefs", {});
|
|
63
|
+
(0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
|
|
64
|
+
(0, _defineProperty2["default"])(_this, "animationStartTimeout", -1);
|
|
65
|
+
(0, _defineProperty2["default"])(_this, "handleAnimationStart", function () {
|
|
66
66
|
var _this$state$animation;
|
|
67
67
|
if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
|
|
68
68
|
_this.setState({
|
|
@@ -72,19 +72,20 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
72
72
|
});
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
|
-
(0, _defineProperty2["default"])(
|
|
75
|
+
(0, _defineProperty2["default"])(_this, "handleAnimationEnd", function () {
|
|
76
76
|
_this.setState({
|
|
77
77
|
animation: null
|
|
78
78
|
});
|
|
79
79
|
});
|
|
80
|
-
(0, _defineProperty2["default"])(
|
|
80
|
+
(0, _defineProperty2["default"])(_this, "bindHandlerClick", function (value) {
|
|
81
81
|
return function (e) {
|
|
82
82
|
_this.handlers.value(value, e);
|
|
83
83
|
};
|
|
84
84
|
});
|
|
85
85
|
return _this;
|
|
86
86
|
}
|
|
87
|
-
(0,
|
|
87
|
+
(0, _inherits2["default"])(TabLineRoot, _Component);
|
|
88
|
+
return (0, _createClass2["default"])(TabLineRoot, [{
|
|
88
89
|
key: "uncontrolledProps",
|
|
89
90
|
value: function uncontrolledProps() {
|
|
90
91
|
return {
|
|
@@ -134,7 +135,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
134
135
|
}
|
|
135
136
|
}, {
|
|
136
137
|
key: "getItemProps",
|
|
137
|
-
value: function getItemProps(props,
|
|
138
|
+
value: function getItemProps(props, _index) {
|
|
138
139
|
var _this2 = this;
|
|
139
140
|
var _this$asProps = this.asProps,
|
|
140
141
|
value = _this$asProps.value,
|
|
@@ -142,11 +143,11 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
142
143
|
var isSelected = value === props.value;
|
|
143
144
|
return {
|
|
144
145
|
size: size,
|
|
145
|
-
selected: isSelected,
|
|
146
|
-
onClick: this.bindHandlerClick(props.value),
|
|
147
|
-
tabIndex: isSelected ? 0 : -1,
|
|
146
|
+
'selected': isSelected,
|
|
147
|
+
'onClick': this.bindHandlerClick(props.value),
|
|
148
|
+
'tabIndex': isSelected ? 0 : -1,
|
|
148
149
|
'aria-selected': isSelected,
|
|
149
|
-
ref: function ref(node) {
|
|
150
|
+
'ref': function ref(node) {
|
|
150
151
|
_this2.itemRefs[props.value] = node;
|
|
151
152
|
}
|
|
152
153
|
};
|
|
@@ -194,7 +195,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
194
195
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))), animation && /*#__PURE__*/_react["default"].createElement(SCaret, _ref5.cn("SCaret", (0, _objectSpread2["default"])({}, this.getCaretProps()))));
|
|
195
196
|
}
|
|
196
197
|
}]);
|
|
197
|
-
return TabLineRoot;
|
|
198
198
|
}(_core.Component);
|
|
199
199
|
(0, _defineProperty2["default"])(TabLineRoot, "displayName", 'TabLine');
|
|
200
200
|
(0, _defineProperty2["default"])(TabLineRoot, "style", style);
|
|
@@ -254,10 +254,8 @@ var TabLine = (0, _core.createComponent)(TabLineRoot, {
|
|
|
254
254
|
Addon: Addon
|
|
255
255
|
}]
|
|
256
256
|
});
|
|
257
|
-
var wrapTabLine = function wrapTabLine(wrapper) {
|
|
257
|
+
var wrapTabLine = exports.wrapTabLine = function wrapTabLine(wrapper) {
|
|
258
258
|
return wrapper;
|
|
259
259
|
};
|
|
260
|
-
exports
|
|
261
|
-
var _default = TabLine;
|
|
262
|
-
exports["default"] = _default;
|
|
260
|
+
var _default = exports["default"] = TabLine;
|
|
263
261
|
//# sourceMappingURL=TabLine.js.map
|
package/lib/cjs/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabLine.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","_neighborLocation","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","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","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","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"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/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport NeighborLocation from '@semcore/neighbor-location';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\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 behavior: 'auto',\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-selected': isSelected,\n ref: (node) => {\n this.itemRefs[props.value] = node;\n },\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 tabIndex={0}\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\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 const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["_core","require","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_flexBox","_neighborLocation","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","animation","undefined","React","createRef","_this$state$animation","state","started","setState","_objectSpread2","value","handlers","_inherits2","_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","_index","_this2","_this$asProps","size","isSelected","bindHandlerClick","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","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","exports","wrapper","_default"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\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 behavior: 'auto',\n };\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\n componentDidMount() {\n this.prevValue = this.asProps.value;\n }\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\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-selected': isSelected,\n 'ref': (node) => {\n this.itemRefs[props.value] = node;\n },\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 tabIndex={0}\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 </NeighborLocation.Detect>\n );\n}\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 const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport type React from 'react';\n\nexport type TabLineValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n extends TabLineProps<T>,\n UnknownProperties {}\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &\n NeighborLocationProps & {\n /** TabLine size\n * @default m\n * */\n size?: 'm' | 'l' | false;\n /** Adds a bottom border for the entire component\n * @default true\n * */\n underlined?: boolean;\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value of the selected tab */\n value?: T;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: T;\n\n /**\n * Behavior of tabs.\n * In `auto`, changes the tab immediately when press arrow.\n * In `manual`, needs to press `space` or `enter` for select a choice.\n * @default 'auto'\n */\n behavior?: 'auto' | 'manual';\n };\n\n/** @deprecated */\nexport interface ITabLineItemProps extends TabLineItemProps, UnknownProperties {}\nexport type TabLineItemProps = BoxProps &\n NeighborItemProps & {\n /** Makes a tab selected. This property is determined automatically depending on the value. */\n selected?: boolean;\n /** Disabled state */\n disabled?: boolean;\n /** Tab value */\n value?: TabLineValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface ITabLineContext extends TabLineContext, UnknownProperties {}\nexport type TabLineContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabLineHandlers extends TabLineHandlers, UnknownProperties {}\nexport type TabLineHandlers = {\n value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n Value extends TabLineValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabLineProps<Value>,\n TabLineContext,\n [handlers: TabLineHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_TabLine","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\nexport * from './TabLine';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,QAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,QAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,QAAA,CAAAM,GAAA;IAAA;EAAA;AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_TabLine","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\nexport * from './TabLine';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,QAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,QAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,QAAA,CAAAM,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
package/lib/es6/TabLine.js
CHANGED
|
@@ -1,36 +1,38 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
7
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
-
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
7
8
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
9
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
9
10
|
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
10
11
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
12
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
13
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
|
-
|
|
14
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
14
15
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
15
|
-
import { Box } from '@semcore/flex-box';
|
|
16
16
|
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
17
17
|
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
18
|
+
import { Box } from '@semcore/flex-box';
|
|
18
19
|
import NeighborLocation from '@semcore/neighbor-location';
|
|
20
|
+
import React from 'react';
|
|
19
21
|
/*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
20
|
-
var style = (
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_1qdfs_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1qdfs_gg_.__underlined_1qdfs_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1qdfs_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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;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_1qdfs_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1qdfs_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1qdfs_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1qdfs_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1qdfs_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1qdfs_gg_.__selected_1qdfs_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1qdfs_gg_ .___SAddon_1qdfs_gg_:not(:last-child),.___STabLineItem_1qdfs_gg_ .___SText_1qdfs_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1qdfs_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_1qdfs_gg_.__selected_1qdfs_gg_{flex-shrink:0}.___STabLineItem_1qdfs_gg_.__disabled_1qdfs_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SText_1qdfs_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1qdfs_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1qdfs_gg_._size_m_1qdfs_gg_{height:28px;min-width:18px}.___STabLineItem_1qdfs_gg_._size_m_1qdfs_gg_ .___SText_1qdfs_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1qdfs_gg_._size_l_1qdfs_gg_{height:40px;min-width:26px}.___STabLineItem_1qdfs_gg_._size_l_1qdfs_gg_ .___SText_1qdfs_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1qdfs_gg_._neighborLocation_left_1qdfs_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1qdfs_gg_.__selected_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::before{transition:none}.___SCaret_1qdfs_gg_{display:none}}", /*__inner_css_end__*/"1qdfs_gg_"),
|
|
21
23
|
/*__reshadow_css_end__*/
|
|
22
24
|
{
|
|
23
|
-
"__STabLine": "
|
|
24
|
-
"_underlined": "
|
|
25
|
-
"__SCaret": "
|
|
26
|
-
"__STabLineItem": "
|
|
27
|
-
"_selected": "
|
|
28
|
-
"_disabled": "
|
|
29
|
-
"__SText": "
|
|
30
|
-
"__SAddon": "
|
|
31
|
-
"_neighborLocation_left": "
|
|
32
|
-
"_size_m": "
|
|
33
|
-
"_size_l": "
|
|
25
|
+
"__STabLine": "___STabLine_1qdfs_gg_",
|
|
26
|
+
"_underlined": "__underlined_1qdfs_gg_",
|
|
27
|
+
"__SCaret": "___SCaret_1qdfs_gg_",
|
|
28
|
+
"__STabLineItem": "___STabLineItem_1qdfs_gg_",
|
|
29
|
+
"_selected": "__selected_1qdfs_gg_",
|
|
30
|
+
"_disabled": "__disabled_1qdfs_gg_",
|
|
31
|
+
"__SText": "___SText_1qdfs_gg_",
|
|
32
|
+
"__SAddon": "___SAddon_1qdfs_gg_",
|
|
33
|
+
"_neighborLocation_left": "_neighborLocation_left_1qdfs_gg_",
|
|
34
|
+
"_size_m": "_size_m_1qdfs_gg_",
|
|
35
|
+
"_size_l": "_size_l_1qdfs_gg_"
|
|
34
36
|
});
|
|
35
37
|
var optionsA11yEnhance = {
|
|
36
38
|
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
@@ -44,23 +46,21 @@ var optionsA11yEnhance = {
|
|
|
44
46
|
childSelector: ['role', 'tab']
|
|
45
47
|
};
|
|
46
48
|
var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
47
|
-
_inherits(TabLineRoot, _Component);
|
|
48
|
-
var _super = _createSuper(TabLineRoot);
|
|
49
49
|
function TabLineRoot() {
|
|
50
50
|
var _this;
|
|
51
51
|
_classCallCheck(this, TabLineRoot);
|
|
52
52
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
53
53
|
args[_key] = arguments[_key];
|
|
54
54
|
}
|
|
55
|
-
_this =
|
|
56
|
-
_defineProperty(
|
|
55
|
+
_this = _callSuper(this, TabLineRoot, [].concat(args));
|
|
56
|
+
_defineProperty(_this, "state", {
|
|
57
57
|
animation: null
|
|
58
58
|
});
|
|
59
|
-
_defineProperty(
|
|
60
|
-
_defineProperty(
|
|
61
|
-
_defineProperty(
|
|
62
|
-
_defineProperty(
|
|
63
|
-
_defineProperty(
|
|
59
|
+
_defineProperty(_this, "prevValue", undefined);
|
|
60
|
+
_defineProperty(_this, "itemRefs", {});
|
|
61
|
+
_defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
|
|
62
|
+
_defineProperty(_this, "animationStartTimeout", -1);
|
|
63
|
+
_defineProperty(_this, "handleAnimationStart", function () {
|
|
64
64
|
var _this$state$animation;
|
|
65
65
|
if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
|
|
66
66
|
_this.setState({
|
|
@@ -70,19 +70,20 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
|
-
_defineProperty(
|
|
73
|
+
_defineProperty(_this, "handleAnimationEnd", function () {
|
|
74
74
|
_this.setState({
|
|
75
75
|
animation: null
|
|
76
76
|
});
|
|
77
77
|
});
|
|
78
|
-
_defineProperty(
|
|
78
|
+
_defineProperty(_this, "bindHandlerClick", function (value) {
|
|
79
79
|
return function (e) {
|
|
80
80
|
_this.handlers.value(value, e);
|
|
81
81
|
};
|
|
82
82
|
});
|
|
83
83
|
return _this;
|
|
84
84
|
}
|
|
85
|
-
|
|
85
|
+
_inherits(TabLineRoot, _Component);
|
|
86
|
+
return _createClass(TabLineRoot, [{
|
|
86
87
|
key: "uncontrolledProps",
|
|
87
88
|
value: function uncontrolledProps() {
|
|
88
89
|
return {
|
|
@@ -132,7 +133,7 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
132
133
|
}
|
|
133
134
|
}, {
|
|
134
135
|
key: "getItemProps",
|
|
135
|
-
value: function getItemProps(props,
|
|
136
|
+
value: function getItemProps(props, _index) {
|
|
136
137
|
var _this2 = this;
|
|
137
138
|
var _this$asProps = this.asProps,
|
|
138
139
|
value = _this$asProps.value,
|
|
@@ -140,11 +141,11 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
140
141
|
var isSelected = value === props.value;
|
|
141
142
|
return {
|
|
142
143
|
size: size,
|
|
143
|
-
selected: isSelected,
|
|
144
|
-
onClick: this.bindHandlerClick(props.value),
|
|
145
|
-
tabIndex: isSelected ? 0 : -1,
|
|
144
|
+
'selected': isSelected,
|
|
145
|
+
'onClick': this.bindHandlerClick(props.value),
|
|
146
|
+
'tabIndex': isSelected ? 0 : -1,
|
|
146
147
|
'aria-selected': isSelected,
|
|
147
|
-
ref: function ref(node) {
|
|
148
|
+
'ref': function ref(node) {
|
|
148
149
|
_this2.itemRefs[props.value] = node;
|
|
149
150
|
}
|
|
150
151
|
};
|
|
@@ -192,7 +193,6 @@ var TabLineRoot = /*#__PURE__*/function (_Component) {
|
|
|
192
193
|
}), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))), animation && /*#__PURE__*/React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
|
|
193
194
|
}
|
|
194
195
|
}]);
|
|
195
|
-
return TabLineRoot;
|
|
196
196
|
}(Component);
|
|
197
197
|
_defineProperty(TabLineRoot, "displayName", 'TabLine');
|
|
198
198
|
_defineProperty(TabLineRoot, "style", style);
|
package/lib/es6/TabLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabLine.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","NeighborLocation","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","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","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","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"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/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport NeighborLocation from '@semcore/neighbor-location';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\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 behavior: 'auto',\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-selected': isSelected,\n ref: (node) => {\n this.itemRefs[props.value] = node;\n },\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 tabIndex={0}\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\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 const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Box","NeighborLocation","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","animation","undefined","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_inherits","_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","_index","_this2","_this$asProps","size","isSelected","bindHandlerClick","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","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\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 behavior: 'auto',\n };\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\n componentDidMount() {\n this.prevValue = this.asProps.value;\n }\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\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-selected': isSelected,\n 'ref': (node) => {\n this.itemRefs[props.value] = node;\n },\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 tabIndex={0}\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 </NeighborLocation.Detect>\n );\n}\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 const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport type React from 'react';\n\nexport type TabLineValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n extends TabLineProps<T>,\n UnknownProperties {}\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &\n NeighborLocationProps & {\n /** TabLine size\n * @default m\n * */\n size?: 'm' | 'l' | false;\n /** Adds a bottom border for the entire component\n * @default true\n * */\n underlined?: boolean;\n /** Is invoked when changing the selection */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value of the selected tab */\n value?: T;\n /** Default value of the selected tab\n * @default null\n * */\n defaultValue?: T;\n\n /**\n * Behavior of tabs.\n * In `auto`, changes the tab immediately when press arrow.\n * In `manual`, needs to press `space` or `enter` for select a choice.\n * @default 'auto'\n */\n behavior?: 'auto' | 'manual';\n };\n\n/** @deprecated */\nexport interface ITabLineItemProps extends TabLineItemProps, UnknownProperties {}\nexport type TabLineItemProps = BoxProps &\n NeighborItemProps & {\n /** Makes a tab selected. This property is determined automatically depending on the value. */\n selected?: boolean;\n /** Disabled state */\n disabled?: boolean;\n /** Tab value */\n value?: TabLineValue;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface ITabLineContext extends TabLineContext, UnknownProperties {}\nexport type TabLineContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabLineHandlers extends TabLineHandlers, UnknownProperties {}\nexport type TabLineHandlers = {\n value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n Value extends TabLineValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n TabLineProps<Value>,\n TabLineContext,\n [handlers: TabLineHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\nexport * from './TabLine';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW;AACnC,cAAc,WAAW"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\nexport * from './TabLine';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW;AACnC,cAAc,WAAW","ignoreList":[]}
|
package/lib/esm/TabLine.mjs
CHANGED
|
@@ -1,37 +1,41 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
5
7
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
-
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
7
8
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
-
import {
|
|
9
|
-
import React from "react";
|
|
10
|
-
import { Box } from "@semcore/flex-box";
|
|
9
|
+
import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
|
|
11
10
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
12
11
|
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
12
|
+
import { Box } from "@semcore/flex-box";
|
|
13
13
|
import NeighborLocation from "@semcore/neighbor-location";
|
|
14
|
+
import React from "react";
|
|
15
|
+
function _callSuper(t, o, e) {
|
|
16
|
+
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
|
|
17
|
+
}
|
|
14
18
|
/*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
15
19
|
var style = (
|
|
16
20
|
/*__reshadow_css_start__*/
|
|
17
21
|
(sstyled.insert(
|
|
18
22
|
/*__inner_css_start__*/
|
|
19
|
-
'.
|
|
23
|
+
'.___STabLine_1qdfs_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1qdfs_gg_.__underlined_1qdfs_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1qdfs_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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;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_1qdfs_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1qdfs_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1qdfs_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1qdfs_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1qdfs_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1qdfs_gg_.__selected_1qdfs_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1qdfs_gg_ .___SAddon_1qdfs_gg_:not(:last-child),.___STabLineItem_1qdfs_gg_ .___SText_1qdfs_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1qdfs_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_1qdfs_gg_.__selected_1qdfs_gg_{flex-shrink:0}.___STabLineItem_1qdfs_gg_.__disabled_1qdfs_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SText_1qdfs_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1qdfs_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1qdfs_gg_._size_m_1qdfs_gg_{height:28px;min-width:18px}.___STabLineItem_1qdfs_gg_._size_m_1qdfs_gg_ .___SText_1qdfs_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1qdfs_gg_._size_l_1qdfs_gg_{height:40px;min-width:26px}.___STabLineItem_1qdfs_gg_._size_l_1qdfs_gg_ .___SText_1qdfs_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1qdfs_gg_._neighborLocation_left_1qdfs_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1qdfs_gg_.__selected_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::after,.___STabLineItem_1qdfs_gg_::before{transition:none}.___SCaret_1qdfs_gg_{display:none}}',
|
|
20
24
|
/*__inner_css_end__*/
|
|
21
|
-
"
|
|
25
|
+
"1qdfs_gg_"
|
|
22
26
|
), /*__reshadow_css_end__*/
|
|
23
27
|
{
|
|
24
|
-
"__STabLine": "
|
|
25
|
-
"_underlined": "
|
|
26
|
-
"__SCaret": "
|
|
27
|
-
"__STabLineItem": "
|
|
28
|
-
"_selected": "
|
|
29
|
-
"_disabled": "
|
|
30
|
-
"__SText": "
|
|
31
|
-
"__SAddon": "
|
|
32
|
-
"_neighborLocation_left": "
|
|
33
|
-
"_size_m": "
|
|
34
|
-
"_size_l": "
|
|
28
|
+
"__STabLine": "___STabLine_1qdfs_gg_",
|
|
29
|
+
"_underlined": "__underlined_1qdfs_gg_",
|
|
30
|
+
"__SCaret": "___SCaret_1qdfs_gg_",
|
|
31
|
+
"__STabLineItem": "___STabLineItem_1qdfs_gg_",
|
|
32
|
+
"_selected": "__selected_1qdfs_gg_",
|
|
33
|
+
"_disabled": "__disabled_1qdfs_gg_",
|
|
34
|
+
"__SText": "___SText_1qdfs_gg_",
|
|
35
|
+
"__SAddon": "___SAddon_1qdfs_gg_",
|
|
36
|
+
"_neighborLocation_left": "_neighborLocation_left_1qdfs_gg_",
|
|
37
|
+
"_size_m": "_size_m_1qdfs_gg_",
|
|
38
|
+
"_size_l": "_size_l_1qdfs_gg_"
|
|
35
39
|
})
|
|
36
40
|
);
|
|
37
41
|
var optionsA11yEnhance = {
|
|
@@ -46,23 +50,21 @@ var optionsA11yEnhance = {
|
|
|
46
50
|
childSelector: ["role", "tab"]
|
|
47
51
|
};
|
|
48
52
|
var TabLineRoot = /* @__PURE__ */ function(_Component) {
|
|
49
|
-
_inherits(TabLineRoot2, _Component);
|
|
50
|
-
var _super = _createSuper(TabLineRoot2);
|
|
51
53
|
function TabLineRoot2() {
|
|
52
54
|
var _this;
|
|
53
55
|
_classCallCheck(this, TabLineRoot2);
|
|
54
56
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
55
57
|
args[_key] = arguments[_key];
|
|
56
58
|
}
|
|
57
|
-
_this =
|
|
58
|
-
_defineProperty(
|
|
59
|
+
_this = _callSuper(this, TabLineRoot2, [].concat(args));
|
|
60
|
+
_defineProperty(_this, "state", {
|
|
59
61
|
animation: null
|
|
60
62
|
});
|
|
61
|
-
_defineProperty(
|
|
62
|
-
_defineProperty(
|
|
63
|
-
_defineProperty(
|
|
64
|
-
_defineProperty(
|
|
65
|
-
_defineProperty(
|
|
63
|
+
_defineProperty(_this, "prevValue", void 0);
|
|
64
|
+
_defineProperty(_this, "itemRefs", {});
|
|
65
|
+
_defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
|
|
66
|
+
_defineProperty(_this, "animationStartTimeout", -1);
|
|
67
|
+
_defineProperty(_this, "handleAnimationStart", function() {
|
|
66
68
|
var _this$state$animation;
|
|
67
69
|
if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
|
|
68
70
|
_this.setState({
|
|
@@ -72,19 +74,20 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
|
|
|
72
74
|
});
|
|
73
75
|
}
|
|
74
76
|
});
|
|
75
|
-
_defineProperty(
|
|
77
|
+
_defineProperty(_this, "handleAnimationEnd", function() {
|
|
76
78
|
_this.setState({
|
|
77
79
|
animation: null
|
|
78
80
|
});
|
|
79
81
|
});
|
|
80
|
-
_defineProperty(
|
|
82
|
+
_defineProperty(_this, "bindHandlerClick", function(value) {
|
|
81
83
|
return function(e) {
|
|
82
84
|
_this.handlers.value(value, e);
|
|
83
85
|
};
|
|
84
86
|
});
|
|
85
87
|
return _this;
|
|
86
88
|
}
|
|
87
|
-
|
|
89
|
+
_inherits(TabLineRoot2, _Component);
|
|
90
|
+
return _createClass(TabLineRoot2, [{
|
|
88
91
|
key: "uncontrolledProps",
|
|
89
92
|
value: function uncontrolledProps() {
|
|
90
93
|
return {
|
|
@@ -134,17 +137,17 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
|
|
|
134
137
|
}
|
|
135
138
|
}, {
|
|
136
139
|
key: "getItemProps",
|
|
137
|
-
value: function getItemProps(props,
|
|
140
|
+
value: function getItemProps(props, _index) {
|
|
138
141
|
var _this2 = this;
|
|
139
142
|
var _this$asProps = this.asProps, value = _this$asProps.value, size = _this$asProps.size;
|
|
140
143
|
var isSelected = value === props.value;
|
|
141
144
|
return {
|
|
142
145
|
size,
|
|
143
|
-
selected: isSelected,
|
|
144
|
-
onClick: this.bindHandlerClick(props.value),
|
|
145
|
-
tabIndex: isSelected ? 0 : -1,
|
|
146
|
+
"selected": isSelected,
|
|
147
|
+
"onClick": this.bindHandlerClick(props.value),
|
|
148
|
+
"tabIndex": isSelected ? 0 : -1,
|
|
146
149
|
"aria-selected": isSelected,
|
|
147
|
-
ref: function ref(node) {
|
|
150
|
+
"ref": function ref(node) {
|
|
148
151
|
_this2.itemRefs[props.value] = node;
|
|
149
152
|
}
|
|
150
153
|
};
|
|
@@ -188,7 +191,6 @@ var TabLineRoot = /* @__PURE__ */ function(_Component) {
|
|
|
188
191
|
}), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))), animation && /* @__PURE__ */ React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
|
|
189
192
|
}
|
|
190
193
|
}]);
|
|
191
|
-
return TabLineRoot2;
|
|
192
194
|
}(Component);
|
|
193
195
|
_defineProperty(TabLineRoot, "displayName", "TabLine");
|
|
194
196
|
_defineProperty(TabLineRoot, "style", style);
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
1
|
+
import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import type { Box, BoxProps } from '@semcore/flex-box';
|
|
3
|
+
import type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
|
|
4
|
+
import type React from 'react';
|
|
5
5
|
|
|
6
6
|
export type TabLineValue = string | number | boolean;
|
|
7
7
|
|
|
8
8
|
/** @deprecated */
|
|
9
9
|
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
10
10
|
extends TabLineProps<T>,
|
|
11
|
-
|
|
11
|
+
UnknownProperties {}
|
|
12
12
|
export type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &
|
|
13
13
|
NeighborLocationProps & {
|
|
14
14
|
/** TabLine size
|
|
@@ -78,9 +78,9 @@ type IntergalacticTabLineComponent<PropsExtending = {}> = (<
|
|
|
78
78
|
TabLineContext,
|
|
79
79
|
[handlers: TabLineHandlers]
|
|
80
80
|
> &
|
|
81
|
-
|
|
81
|
+
PropsExtending,
|
|
82
82
|
) => Intergalactic.InternalTypings.ComponentRenderingResults) &
|
|
83
|
-
|
|
83
|
+
Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;
|
|
84
84
|
|
|
85
85
|
declare const TabLine: IntergalacticTabLineComponent & {
|
|
86
86
|
Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {
|
|
@@ -94,7 +94,7 @@ declare const wrapTabLine: <PropsExtending extends {}>(
|
|
|
94
94
|
props: Intergalactic.InternalTypings.UntypeRefAndTag<
|
|
95
95
|
Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>
|
|
96
96
|
> &
|
|
97
|
-
|
|
97
|
+
PropsExtending,
|
|
98
98
|
) => React.ReactNode,
|
|
99
99
|
) => IntergalacticTabLineComponent<PropsExtending>;
|
|
100
100
|
export { wrapTabLine };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
3
|
"description": "Semrush TabLine Component",
|
|
4
|
-
"version": "16.0.1",
|
|
4
|
+
"version": "16.0.2-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.1",
|
|
18
|
-
"@semcore/neighbor-location": "16.0.1"
|
|
17
|
+
"@semcore/flex-box": "16.0.2-prerelease.1",
|
|
18
|
+
"@semcore/neighbor-location": "16.0.2-prerelease.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/base-components": "^16.0.
|
|
21
|
+
"@semcore/base-components": "^16.0.2-prerelease.1"
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"directory": "semcore/tab-line"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@
|
|
30
|
-
"@semcore/
|
|
29
|
+
"@semcore/testing-utils": "1.0.0",
|
|
30
|
+
"@semcore/core": "16.0.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|