@semcore/tab-line 4.41.0-prerelease.0 → 4.41.0-prerelease.4
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/lib/cjs/TabLine.js +76 -98
- package/lib/cjs/TabLine.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/cjs/index.js +5 -14
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/tab-line.shadow.css +28 -5
- package/lib/es6/TabLine.js +64 -90
- package/lib/es6/TabLine.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/lib/es6/index.js +2 -2
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/tab-line.shadow.css +28 -5
- package/lib/esm/TabLine.mjs +71 -89
- package/lib/esm/index.mjs +0 -1
- package/lib/esm/style/tab-line.shadow.css +28 -5
- package/lib/types/index.d.ts +104 -2
- package/package.json +5 -5
- package/lib/cjs/TabLine.type.js +0 -2
- package/lib/cjs/TabLine.type.js.map +0 -1
- package/lib/es6/TabLine.type.js +0 -2
- package/lib/es6/TabLine.type.js.map +0 -1
- package/lib/esm/TabLine.type.mjs +0 -1
- package/lib/types/TabLine.d.ts +0 -6
- package/lib/types/TabLine.type.d.ts +0 -80
package/lib/esm/TabLine.mjs
CHANGED
|
@@ -1,55 +1,71 @@
|
|
|
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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
9
|
-
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
10
|
-
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
11
|
-
import { Text as Text$1 } from "@semcore/typography";
|
|
8
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
12
10
|
import React from "react";
|
|
11
|
+
import { Box } from "@semcore/flex-box";
|
|
12
|
+
import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
|
|
13
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
14
|
+
import a11yEnhance from "@semcore/utils/lib/enhances/a11yEnhance";
|
|
15
|
+
import NeighborLocation from "@semcore/neighbor-location";
|
|
13
16
|
/*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
|
|
14
17
|
var style = (
|
|
15
18
|
/*__reshadow_css_start__*/
|
|
16
19
|
(sstyled.insert(
|
|
17
20
|
/*__inner_css_start__*/
|
|
18
|
-
'.
|
|
21
|
+
'.___STabLine_1v605_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1v605_gg_.__underlined_1v605_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabLine_1v605_gg_.__underlined_1v605_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_1v605_gg_.__underlined_1v605_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_1v605_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;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1v605_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1v605_gg_:active,.___STabLineItem_1v605_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1v605_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1v605_gg_::after,.___STabLineItem_1v605_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1v605_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1v605_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabLineItem_1v605_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_1v605_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_1v605_gg_.__selected_1v605_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419))}.___STabLineItem_1v605_gg_ .___SAddon_1v605_gg_:not(:last-child),.___STabLineItem_1v605_gg_ .___SText_1v605_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1v605_gg_{position:absolute;bottom:-1px;height:3px;background-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1v605_gg_.__selected_1v605_gg_{flex-shrink:0}.___STabLineItem_1v605_gg_.__disabled_1v605_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___STabLineItem_1v605_gg_.__keyboardFocused_1v605_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___STabLineItem_1v605_gg_.__keyboardFocused_1v605_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___STabLineItem_1v605_gg_.__keyboardFocused_1v605_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SText_1v605_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1v605_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1v605_gg_._size_m_1v605_gg_{height:28px;min-width:18px}.___STabLineItem_1v605_gg_._size_m_1v605_gg_ .___SText_1v605_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1v605_gg_._size_l_1v605_gg_{height:40px;min-width:26px}.___STabLineItem_1v605_gg_._size_l_1v605_gg_ .___SText_1v605_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1v605_gg_._neighborLocation_left_1v605_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1v605_gg_.__selected_1v605_gg_::after,.___STabLineItem_1v605_gg_::after,.___STabLineItem_1v605_gg_::before{transition:none}.___SCaret_1v605_gg_{display:none}}',
|
|
19
22
|
/*__inner_css_end__*/
|
|
20
|
-
"
|
|
23
|
+
"1v605_gg_"
|
|
21
24
|
), /*__reshadow_css_end__*/
|
|
22
25
|
{
|
|
23
|
-
"__STabLine": "
|
|
24
|
-
"_underlined": "
|
|
25
|
-
"__SCaret": "
|
|
26
|
-
"__STabLineItem": "
|
|
27
|
-
"_selected": "
|
|
28
|
-
"_disabled": "
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"_neighborLocation_left": "
|
|
33
|
-
"
|
|
26
|
+
"__STabLine": "___STabLine_1v605_gg_",
|
|
27
|
+
"_underlined": "__underlined_1v605_gg_",
|
|
28
|
+
"__SCaret": "___SCaret_1v605_gg_",
|
|
29
|
+
"__STabLineItem": "___STabLineItem_1v605_gg_",
|
|
30
|
+
"_selected": "__selected_1v605_gg_",
|
|
31
|
+
"_disabled": "__disabled_1v605_gg_",
|
|
32
|
+
"_keyboardFocused": "__keyboardFocused_1v605_gg_",
|
|
33
|
+
"__SText": "___SText_1v605_gg_",
|
|
34
|
+
"__SAddon": "___SAddon_1v605_gg_",
|
|
35
|
+
"_neighborLocation_left": "_neighborLocation_left_1v605_gg_",
|
|
36
|
+
"_size_m": "_size_m_1v605_gg_",
|
|
37
|
+
"_size_l": "_size_l_1v605_gg_"
|
|
34
38
|
})
|
|
35
39
|
);
|
|
36
|
-
var
|
|
40
|
+
var optionsA11yEnhance = {
|
|
41
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
42
|
+
if (neighborElement) {
|
|
43
|
+
neighborElement.focus();
|
|
44
|
+
if (props.behavior === "auto") {
|
|
45
|
+
neighborElement.click();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
childSelector: ["role", "tab"]
|
|
50
|
+
};
|
|
51
|
+
var TabLineRoot = /* @__PURE__ */ function(_Component) {
|
|
52
|
+
_inherits(TabLineRoot2, _Component);
|
|
53
|
+
var _super = _createSuper(TabLineRoot2);
|
|
37
54
|
function TabLineRoot2() {
|
|
38
55
|
var _this;
|
|
39
56
|
_classCallCheck(this, TabLineRoot2);
|
|
40
57
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
41
58
|
args[_key] = arguments[_key];
|
|
42
59
|
}
|
|
43
|
-
_this =
|
|
44
|
-
_defineProperty(_this, "state", {
|
|
60
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
61
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
45
62
|
animation: null
|
|
46
63
|
});
|
|
47
|
-
_defineProperty(_this, "prevValue", void 0);
|
|
48
|
-
_defineProperty(_this, "itemRefs", {});
|
|
49
|
-
_defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
|
|
50
|
-
_defineProperty(_this, "animationStartTimeout",
|
|
51
|
-
_defineProperty(_this, "
|
|
52
|
-
_defineProperty(_this, "handleAnimationStart", function() {
|
|
64
|
+
_defineProperty(_assertThisInitialized(_this), "prevValue", void 0);
|
|
65
|
+
_defineProperty(_assertThisInitialized(_this), "itemRefs", {});
|
|
66
|
+
_defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
|
|
67
|
+
_defineProperty(_assertThisInitialized(_this), "animationStartTimeout", -1);
|
|
68
|
+
_defineProperty(_assertThisInitialized(_this), "handleAnimationStart", function() {
|
|
53
69
|
var _this$state$animation;
|
|
54
70
|
if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
|
|
55
71
|
_this.setState({
|
|
@@ -59,20 +75,19 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
59
75
|
});
|
|
60
76
|
}
|
|
61
77
|
});
|
|
62
|
-
_defineProperty(_this, "handleAnimationEnd", function() {
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "handleAnimationEnd", function() {
|
|
63
79
|
_this.setState({
|
|
64
80
|
animation: null
|
|
65
81
|
});
|
|
66
82
|
});
|
|
67
|
-
_defineProperty(_this, "bindHandlerClick", function(value) {
|
|
83
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(value) {
|
|
68
84
|
return function(e) {
|
|
69
85
|
_this.handlers.value(value, e);
|
|
70
86
|
};
|
|
71
87
|
});
|
|
72
88
|
return _this;
|
|
73
89
|
}
|
|
74
|
-
|
|
75
|
-
return _createClass(TabLineRoot2, [{
|
|
90
|
+
_createClass(TabLineRoot2, [{
|
|
76
91
|
key: "uncontrolledProps",
|
|
77
92
|
value: function uncontrolledProps() {
|
|
78
93
|
return {
|
|
@@ -95,16 +110,13 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
95
110
|
}, {
|
|
96
111
|
key: "componentWillUnmount",
|
|
97
112
|
value: function componentWillUnmount() {
|
|
98
|
-
|
|
99
|
-
clearTimeout(this.animationStartTimeout);
|
|
100
|
-
}
|
|
113
|
+
clearTimeout(this.animationStartTimeout);
|
|
101
114
|
}
|
|
102
115
|
}, {
|
|
103
116
|
key: "animate",
|
|
104
117
|
value: function animate() {
|
|
105
|
-
|
|
106
|
-
var
|
|
107
|
-
var toNode = this.itemRefs[this.asProps.value.toString()];
|
|
118
|
+
var fromNode = this.itemRefs[this.prevValue];
|
|
119
|
+
var toNode = this.itemRefs[this.asProps.value];
|
|
108
120
|
var containerNode = this.containerRef.current;
|
|
109
121
|
if (!fromNode || !toNode || !containerNode) return;
|
|
110
122
|
var containerRect = containerNode.getBoundingClientRect();
|
|
@@ -120,9 +132,7 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
120
132
|
this.setState({
|
|
121
133
|
animation
|
|
122
134
|
});
|
|
123
|
-
|
|
124
|
-
clearTimeout(this.animationStartTimeout);
|
|
125
|
-
}
|
|
135
|
+
clearTimeout(this.animationStartTimeout);
|
|
126
136
|
this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
|
|
127
137
|
}
|
|
128
138
|
}, {
|
|
@@ -133,27 +143,13 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
133
143
|
var isSelected = value === props.value;
|
|
134
144
|
return {
|
|
135
145
|
size,
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
146
|
+
selected: isSelected,
|
|
147
|
+
onClick: this.bindHandlerClick(props.value),
|
|
148
|
+
tabIndex: isSelected ? 0 : -1,
|
|
139
149
|
"aria-selected": isSelected,
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
},
|
|
144
|
-
"buttonRefsList": this.buttonRefsList,
|
|
145
|
-
index
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
}, {
|
|
149
|
-
key: "getItemTextProps",
|
|
150
|
-
value: function getItemTextProps(props, index) {
|
|
151
|
-
var tabLineSize = this.asProps.size;
|
|
152
|
-
var size = props.size ? props.size : tabLineSize === "m" ? 200 : 300;
|
|
153
|
-
return {
|
|
154
|
-
size,
|
|
155
|
-
buttonRefsList: this.buttonRefsList,
|
|
156
|
-
index
|
|
150
|
+
ref: function ref(node) {
|
|
151
|
+
_this2.itemRefs[props.value] = node;
|
|
152
|
+
}
|
|
157
153
|
};
|
|
158
154
|
}
|
|
159
155
|
}, {
|
|
@@ -184,10 +180,10 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
184
180
|
value: function render() {
|
|
185
181
|
var _ref = this.asProps, _ref5;
|
|
186
182
|
var STabLine = Box;
|
|
187
|
-
var SCaret =
|
|
183
|
+
var SCaret = "div";
|
|
188
184
|
var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, Children = _this$asProps2.Children, controlsLength = _this$asProps2.controlsLength;
|
|
189
185
|
var animation = this.state.animation;
|
|
190
|
-
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, assignProps({
|
|
186
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STabLine, _ref5.cn("STabLine", _objectSpread({}, assignProps({
|
|
191
187
|
"role": "tablist",
|
|
192
188
|
"ref": this.containerRef
|
|
193
189
|
}, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
|
|
@@ -195,7 +191,8 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
195
191
|
}), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))), animation && /* @__PURE__ */ React.createElement(SCaret, _ref5.cn("SCaret", _objectSpread({}, this.getCaretProps()))));
|
|
196
192
|
}
|
|
197
193
|
}]);
|
|
198
|
-
|
|
194
|
+
return TabLineRoot2;
|
|
195
|
+
}(Component);
|
|
199
196
|
_defineProperty(TabLineRoot, "displayName", "TabLine");
|
|
200
197
|
_defineProperty(TabLineRoot, "style", style);
|
|
201
198
|
_defineProperty(TabLineRoot, "defaultProps", {
|
|
@@ -204,34 +201,20 @@ _defineProperty(TabLineRoot, "defaultProps", {
|
|
|
204
201
|
underlined: true,
|
|
205
202
|
behavior: "auto"
|
|
206
203
|
});
|
|
207
|
-
_defineProperty(TabLineRoot, "enhance", [a11yEnhance(
|
|
208
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
209
|
-
if (neighborElement) {
|
|
210
|
-
neighborElement.focus();
|
|
211
|
-
if (props.behavior === "auto") {
|
|
212
|
-
neighborElement.click();
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
},
|
|
216
|
-
childSelector: ["role", "tab"]
|
|
217
|
-
})]);
|
|
204
|
+
_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
|
|
218
205
|
function TabLineItem(props) {
|
|
219
206
|
var _ref2 = arguments[0];
|
|
220
207
|
var STabLineItem = Box;
|
|
221
|
-
var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, neighborLocation = props.neighborLocation
|
|
222
|
-
var buttonRef = React.useRef();
|
|
223
|
-
buttonRefsList[index] = buttonRef;
|
|
208
|
+
var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, neighborLocation = props.neighborLocation;
|
|
224
209
|
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
225
210
|
neighborLocation
|
|
226
211
|
}, function(neighborLocation2) {
|
|
227
212
|
var _ref6;
|
|
228
|
-
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, assignProps({
|
|
213
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STabLineItem, _ref6.cn("STabLineItem", _objectSpread({}, assignProps({
|
|
229
214
|
"tag": "button",
|
|
230
|
-
"tabIndex": 0,
|
|
231
215
|
"neighborLocation": neighborLocation2,
|
|
232
216
|
"type": "button",
|
|
233
|
-
"role": "tab"
|
|
234
|
-
"ref": buttonRef
|
|
217
|
+
"role": "tab"
|
|
235
218
|
}, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
|
|
236
219
|
tag: addonLeft
|
|
237
220
|
}) : null, addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
|
|
@@ -239,21 +222,20 @@ function TabLineItem(props) {
|
|
|
239
222
|
}) : null);
|
|
240
223
|
});
|
|
241
224
|
}
|
|
225
|
+
TabLineItem.enhance = [keyboardFocusEnhance()];
|
|
242
226
|
function Text(props) {
|
|
243
227
|
var _ref3 = arguments[0], _ref7;
|
|
244
|
-
var styles = props.styles
|
|
245
|
-
var SText =
|
|
246
|
-
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
|
|
247
|
-
"
|
|
248
|
-
"size": size,
|
|
249
|
-
"hint:triggerRef": buttonRefsList[index]
|
|
228
|
+
var styles = props.styles;
|
|
229
|
+
var SText = Box;
|
|
230
|
+
return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
|
|
231
|
+
"tag": "span"
|
|
250
232
|
}, _ref3))));
|
|
251
233
|
}
|
|
252
234
|
function Addon(props) {
|
|
253
235
|
var _ref4 = arguments[0], _ref8;
|
|
254
236
|
var styles = props.styles;
|
|
255
237
|
var SAddon = Box;
|
|
256
|
-
return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
|
|
238
|
+
return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
|
|
257
239
|
"tag": "span"
|
|
258
240
|
}, _ref4))));
|
|
259
241
|
}
|
package/lib/esm/index.mjs
CHANGED
|
@@ -24,7 +24,7 @@ STabLineItem {
|
|
|
24
24
|
text-decoration: none;
|
|
25
25
|
-webkit-tap-highlight-color: transparent;
|
|
26
26
|
overflow: visible;
|
|
27
|
-
|
|
27
|
+
outline: 0;
|
|
28
28
|
text-align: center;
|
|
29
29
|
vertical-align: middle;
|
|
30
30
|
font-family: inherit;
|
|
@@ -41,7 +41,9 @@ STabLineItem {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
&:active,
|
|
44
|
-
&:hover
|
|
44
|
+
&:hover,
|
|
45
|
+
&:focus {
|
|
46
|
+
outline: 0;
|
|
45
47
|
text-decoration: none;
|
|
46
48
|
}
|
|
47
49
|
|
|
@@ -66,7 +68,7 @@ STabLineItem {
|
|
|
66
68
|
|
|
67
69
|
&[selected]::after {
|
|
68
70
|
transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
|
|
69
|
-
background-color: var(--intergalactic-border-info-active, oklch(0.
|
|
71
|
+
background-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
& SText:not(:last-child) {
|
|
@@ -82,7 +84,7 @@ SCaret {
|
|
|
82
84
|
position: absolute;
|
|
83
85
|
bottom: -1px;
|
|
84
86
|
height: 3px;
|
|
85
|
-
background: var(--intergalactic-border-info-active, oklch(0.
|
|
87
|
+
background-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
|
|
86
88
|
transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
|
|
87
89
|
}
|
|
88
90
|
|
|
@@ -97,6 +99,17 @@ STabLineItem[disabled] {
|
|
|
97
99
|
pointer-events: none;
|
|
98
100
|
}
|
|
99
101
|
|
|
102
|
+
STabLineItem[keyboardFocused] {
|
|
103
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
SText {
|
|
107
|
+
display: inline-block;
|
|
108
|
+
white-space: nowrap;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
text-overflow: ellipsis;
|
|
111
|
+
}
|
|
112
|
+
|
|
100
113
|
SAddon {
|
|
101
114
|
display: inline-flex;
|
|
102
115
|
align-items: center;
|
|
@@ -106,11 +119,21 @@ SAddon {
|
|
|
106
119
|
STabLineItem[size='m'] {
|
|
107
120
|
height: 28px;
|
|
108
121
|
min-width: 18px;
|
|
122
|
+
|
|
123
|
+
& SText {
|
|
124
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
125
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
126
|
+
}
|
|
109
127
|
}
|
|
110
128
|
|
|
111
129
|
STabLineItem[size='l'] {
|
|
112
130
|
height: 40px;
|
|
113
131
|
min-width: 26px;
|
|
132
|
+
|
|
133
|
+
& SText {
|
|
134
|
+
font-size: var(--intergalactic-fs-300, 16px);
|
|
135
|
+
line-height: var(--intergalactic-lh-300, 150%);
|
|
136
|
+
}
|
|
114
137
|
}
|
|
115
138
|
|
|
116
139
|
STabLineItem[neighborLocation='left'] {
|
|
@@ -133,4 +156,4 @@ STabLineItem[neighborLocation='left'] {
|
|
|
133
156
|
SCaret {
|
|
134
157
|
display: none;
|
|
135
158
|
}
|
|
136
|
-
}
|
|
159
|
+
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,2 +1,104 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
3
|
+
import { Box, BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type TabLineValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
/** @deprecated */
|
|
10
|
+
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
11
|
+
extends TabLineProps<T>,
|
|
12
|
+
UnknownProperties {}
|
|
13
|
+
export type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &
|
|
14
|
+
NeighborLocationProps & {
|
|
15
|
+
/** TabLine size
|
|
16
|
+
* @default m
|
|
17
|
+
* */
|
|
18
|
+
size?: 'm' | 'l' | false;
|
|
19
|
+
/** Adds a bottom border for the entire component
|
|
20
|
+
* @default true
|
|
21
|
+
* */
|
|
22
|
+
underlined?: boolean;
|
|
23
|
+
/** Is invoked when changing the selection */
|
|
24
|
+
onChange?:
|
|
25
|
+
| ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)
|
|
26
|
+
| React.Dispatch<React.SetStateAction<T>>;
|
|
27
|
+
/** Value of the selected tab */
|
|
28
|
+
value?: T;
|
|
29
|
+
/** Default value of the selected tab
|
|
30
|
+
* @default null
|
|
31
|
+
* */
|
|
32
|
+
defaultValue?: T;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Behavior of tabs.
|
|
36
|
+
* In `auto`, changes the tab immediately when press arrow.
|
|
37
|
+
* In `manual`, needs to press `space` or `enter` for select a choice.
|
|
38
|
+
* @default 'auto'
|
|
39
|
+
*/
|
|
40
|
+
behavior?: 'auto' | 'manual';
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
/** @deprecated */
|
|
44
|
+
export interface ITabLineItemProps extends TabLineItemProps, UnknownProperties {}
|
|
45
|
+
export type TabLineItemProps = BoxProps &
|
|
46
|
+
KeyboardFocusProps &
|
|
47
|
+
NeighborItemProps & {
|
|
48
|
+
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
49
|
+
selected?: boolean;
|
|
50
|
+
/** Disabled state */
|
|
51
|
+
disabled?: boolean;
|
|
52
|
+
/** Tab value */
|
|
53
|
+
value?: TabLineValue;
|
|
54
|
+
/** Left addon tag */
|
|
55
|
+
addonLeft?: React.ElementType;
|
|
56
|
+
/** Right addon tag */
|
|
57
|
+
addonRight?: React.ElementType;
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
/** @deprecated */
|
|
61
|
+
export interface ITabLineContext extends TabLineContext, UnknownProperties {}
|
|
62
|
+
export type TabLineContext = {
|
|
63
|
+
getItemProps: PropGetterFn;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
/** @deprecated */
|
|
67
|
+
export interface ITabLineHandlers extends TabLineHandlers, UnknownProperties {}
|
|
68
|
+
export type TabLineHandlers = {
|
|
69
|
+
value: (value: TabLineValue) => void;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
type IntergalacticTabLineComponent<PropsExtending = {}> = (<
|
|
73
|
+
Value extends TabLineValue,
|
|
74
|
+
Tag extends Intergalactic.Tag = 'div',
|
|
75
|
+
>(
|
|
76
|
+
props: Intergalactic.InternalTypings.ComponentProps<
|
|
77
|
+
Tag,
|
|
78
|
+
'div',
|
|
79
|
+
TabLineProps<Value>,
|
|
80
|
+
TabLineContext,
|
|
81
|
+
[handlers: TabLineHandlers]
|
|
82
|
+
> &
|
|
83
|
+
PropsExtending,
|
|
84
|
+
) => Intergalactic.InternalTypings.ComponentRenderingResults) &
|
|
85
|
+
Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;
|
|
86
|
+
|
|
87
|
+
declare const TabLine: IntergalacticTabLineComponent & {
|
|
88
|
+
Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {
|
|
89
|
+
Text: typeof Box;
|
|
90
|
+
Addon: typeof Box;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
declare const wrapTabLine: <PropsExtending extends {}>(
|
|
95
|
+
wrapper: (
|
|
96
|
+
props: Intergalactic.InternalTypings.UntypeRefAndTag<
|
|
97
|
+
Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>
|
|
98
|
+
> &
|
|
99
|
+
PropsExtending,
|
|
100
|
+
) => React.ReactNode,
|
|
101
|
+
) => IntergalacticTabLineComponent<PropsExtending>;
|
|
102
|
+
export { wrapTabLine };
|
|
103
|
+
|
|
104
|
+
export default TabLine;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
3
|
"description": "Semrush TabLine Component",
|
|
4
|
-
"version": "4.41.0-prerelease.
|
|
4
|
+
"version": "4.41.0-prerelease.4",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
18
|
-
"@semcore/neighbor-location": "4.41.0-prerelease.
|
|
19
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
17
|
+
"@semcore/flex-box": "5.42.0-prerelease.4",
|
|
18
|
+
"@semcore/neighbor-location": "4.41.0-prerelease.4",
|
|
19
|
+
"@semcore/utils": "4.49.0-prerelease.4"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
22
|
+
"@semcore/core": "^2.40.0-prerelease.4",
|
|
23
23
|
"react": "16.8 - 18",
|
|
24
24
|
"react-dom": "16.8 - 18"
|
|
25
25
|
},
|
package/lib/cjs/TabLine.type.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n type Value = string | number | boolean;\n type Props<T extends NSTabLine.Value = NSTabLine.Value> = 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 type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: null;\n };\n\n namespace Item {\n type Props = 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?: NSTabLine.Value;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n namespace Text {\n type Props = NSText.Props;\n type Component = NSText.Component;\n }\n\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapperComponent & {\n Item: Item.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/TabLine.type.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n type Value = string | number | boolean;\n type Props<T extends NSTabLine.Value = NSTabLine.Value> = 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 type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: null;\n };\n\n namespace Item {\n type Props = 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?: NSTabLine.Value;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n namespace Text {\n type Props = NSText.Props;\n type Component = NSText.Component;\n }\n\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {\n Text: Text.Component;\n Addon: Addon.Component;\n };\n }\n\n type WrapperComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapperComponent & {\n Item: Item.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}
|
package/lib/esm/TabLine.type.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/lib/types/TabLine.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { Intergalactic } from '@semcore/core';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { NSTabLine } from './TabLine.type';
|
|
4
|
-
declare const TabLine: NSTabLine.Component;
|
|
5
|
-
export declare const wrapTabLine: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabLine.WrapperComponent<PropsExtending>;
|
|
6
|
-
export default TabLine;
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
|
|
2
|
-
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
|
-
import type { NSText } from '@semcore/typography';
|
|
4
|
-
import type React from 'react';
|
|
5
|
-
declare namespace NSTabLine {
|
|
6
|
-
type Value = string | number | boolean;
|
|
7
|
-
type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps & NeighborLocationProps & {
|
|
8
|
-
/** TabLine size
|
|
9
|
-
* @default m
|
|
10
|
-
* */
|
|
11
|
-
size?: 'm' | 'l' | false;
|
|
12
|
-
/** Adds a bottom border for the entire component
|
|
13
|
-
* @default true
|
|
14
|
-
* */
|
|
15
|
-
underlined?: boolean;
|
|
16
|
-
/** Is invoked when changing the selection */
|
|
17
|
-
onChange?: ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
|
|
18
|
-
/** Value of the selected tab */
|
|
19
|
-
value?: T;
|
|
20
|
-
/** Default value of the selected tab
|
|
21
|
-
* @default null
|
|
22
|
-
* */
|
|
23
|
-
defaultValue?: T;
|
|
24
|
-
/**
|
|
25
|
-
* Behavior of tabs.
|
|
26
|
-
* In `auto`, changes the tab immediately when press arrow.
|
|
27
|
-
* In `manual`, needs to press `space` or `enter` for select a choice.
|
|
28
|
-
* @default 'auto'
|
|
29
|
-
*/
|
|
30
|
-
behavior?: 'auto' | 'manual';
|
|
31
|
-
};
|
|
32
|
-
type Ctx = {
|
|
33
|
-
getItemProps: PropGetterFn;
|
|
34
|
-
};
|
|
35
|
-
type Handlers = {
|
|
36
|
-
value: null;
|
|
37
|
-
};
|
|
38
|
-
namespace Item {
|
|
39
|
-
type Props = BoxProps & NeighborItemProps & {
|
|
40
|
-
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
41
|
-
selected?: boolean;
|
|
42
|
-
/** Disabled state */
|
|
43
|
-
disabled?: boolean;
|
|
44
|
-
/** Tab value */
|
|
45
|
-
value?: NSTabLine.Value;
|
|
46
|
-
/** Left addon tag */
|
|
47
|
-
addonLeft?: React.ElementType;
|
|
48
|
-
/** Right addon tag */
|
|
49
|
-
addonRight?: React.ElementType;
|
|
50
|
-
};
|
|
51
|
-
namespace Text {
|
|
52
|
-
type Props = NSText.Props;
|
|
53
|
-
type Component = NSText.Component;
|
|
54
|
-
}
|
|
55
|
-
namespace Addon {
|
|
56
|
-
type Component = typeof Box;
|
|
57
|
-
}
|
|
58
|
-
type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabLine.Handlers]> & {
|
|
59
|
-
Text: Text.Component;
|
|
60
|
-
Addon: Addon.Component;
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
type WrapperComponent<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx, [
|
|
64
|
-
handlers: Handlers
|
|
65
|
-
]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
|
|
66
|
-
type Component = WrapperComponent & {
|
|
67
|
-
Item: Item.Component;
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
/** @deprecated It will be removed in v18. */
|
|
71
|
-
export type TabLineValue = NSTabLine.Value;
|
|
72
|
-
/** @deprecated It will be removed in v18. */
|
|
73
|
-
export type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;
|
|
74
|
-
/** @deprecated It will be removed in v18. */
|
|
75
|
-
export type TabLineItemProps = NSTabLine.Item.Props;
|
|
76
|
-
/** @deprecated It will be removed in v18. */
|
|
77
|
-
export type TabLineContext = NSTabLine.Ctx;
|
|
78
|
-
/** @deprecated It will be removed in v18. */
|
|
79
|
-
export type TabLineHandlers = NSTabLine.Handlers;
|
|
80
|
-
export type { NSTabLine };
|