@semcore/tab-line 3.0.10 → 3.0.12
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 +12 -0
- package/lib/cjs/TabLine.js +14 -14
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/cjs/style/tab-line.shadow.css +8 -4
- package/lib/es6/TabLine.js +14 -14
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/lib/es6/style/tab-line.shadow.css +8 -4
- package/package.json +3 -2
- package/lib/cjs/index.d.ts +0 -60
- package/lib/es6/index.d.ts +0 -60
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.12] - 2022-10-04
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.11 ~> 4.5.12], `@semcore/neighbor-location` [2.3.15 ~> 2.3.16], `@semcore/utils` [3.37.1 ~> 3.37.2]).
|
|
10
|
+
|
|
11
|
+
## [3.0.11] - 2022-09-07
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Enforced inner text font line height to prevent possible bottom cut.
|
|
16
|
+
|
|
5
17
|
## [3.0.10] - 2022-09-02
|
|
6
18
|
|
|
7
19
|
### Fixed
|
package/lib/cjs/TabLine.js
CHANGED
|
@@ -56,23 +56,23 @@ var style = (
|
|
|
56
56
|
/*__reshadow_css_start__*/
|
|
57
57
|
_core.sstyled.insert(
|
|
58
58
|
/*__inner_css_start__*/
|
|
59
|
-
".
|
|
59
|
+
".___STabLine_e1i3f_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_e1i3f_gg_.__underlined_e1i3f_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_e1i3f_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;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_e1i3f_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_e1i3f_gg_:active,.___STabLineItem_e1i3f_gg_:focus,.___STabLineItem_e1i3f_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_e1i3f_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_e1i3f_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_e1i3f_gg_ .___SText_e1i3f_gg_:not(:last-child){margin-right:8px}.___STabLineItem_e1i3f_gg_ .___SAddon_e1i3f_gg_:not(:last-child){margin-right:8px}.___SIndicator_e1i3f_gg_,.___STabLineItem_e1i3f_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_e1i3f_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_e1i3f_gg_.__selected_e1i3f_gg_{flex-shrink:0}.___STabLineItem_e1i3f_gg_.__disabled_e1i3f_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_e1i3f_gg_.__keyboardFocused_e1i3f_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_e1i3f_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_e1i3f_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_e1i3f_gg_._size_m_e1i3f_gg_{height:28px;min-width:18px}.___STabLineItem_e1i3f_gg_._size_m_e1i3f_gg_ .___SText_e1i3f_gg_{font-size:14px;line-height:1.42}.___STabLineItem_e1i3f_gg_._size_l_e1i3f_gg_{height:40px;min-width:26px}.___STabLineItem_e1i3f_gg_._size_l_e1i3f_gg_ .___SText_e1i3f_gg_{font-size:16px;line-height:1.5}.___STabLineItem_e1i3f_gg_._neighborLocation_left_e1i3f_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_e1i3f_gg_:after{transition:none}.___SIndicator_e1i3f_gg_{transition:none}}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "e1i3f_gg_")
|
|
62
62
|
/*__reshadow_css_end__*/
|
|
63
63
|
, {
|
|
64
|
-
"__STabLine": "
|
|
65
|
-
"_underlined": "
|
|
66
|
-
"__STabLineItem": "
|
|
67
|
-
"__SText": "
|
|
68
|
-
"__SAddon": "
|
|
69
|
-
"__SIndicator": "
|
|
70
|
-
"_selected": "
|
|
71
|
-
"_disabled": "
|
|
72
|
-
"_keyboardFocused": "
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"_neighborLocation_left": "
|
|
64
|
+
"__STabLine": "___STabLine_e1i3f_gg_",
|
|
65
|
+
"_underlined": "__underlined_e1i3f_gg_",
|
|
66
|
+
"__STabLineItem": "___STabLineItem_e1i3f_gg_",
|
|
67
|
+
"__SText": "___SText_e1i3f_gg_",
|
|
68
|
+
"__SAddon": "___SAddon_e1i3f_gg_",
|
|
69
|
+
"__SIndicator": "___SIndicator_e1i3f_gg_",
|
|
70
|
+
"_selected": "__selected_e1i3f_gg_",
|
|
71
|
+
"_disabled": "__disabled_e1i3f_gg_",
|
|
72
|
+
"_keyboardFocused": "__keyboardFocused_e1i3f_gg_",
|
|
73
|
+
"_size_m": "_size_m_e1i3f_gg_",
|
|
74
|
+
"_size_l": "_size_l_e1i3f_gg_",
|
|
75
|
+
"_neighborLocation_left": "_neighborLocation_left_e1i3f_gg_"
|
|
76
76
|
});
|
|
77
77
|
var optionsA11yEnhance = {
|
|
78
78
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabLineValue = string | number | boolean;\n\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n extends IBoxProps,\n INeighborLocationProps {\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?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\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\nexport interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {\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\nexport interface ITabLineContext {\n getItemProps: PropGetterFn;\n}\n\nexport interface ITabLineHandlers {\n value: (value: TabLineValue) => void;\n}\n\ndeclare const TabLine: (<T, V extends TabLineValue = TabLineValue>(\n props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,\n) => ReturnEl) & {\n Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default TabLine;\n"],"mappings":""}
|
|
@@ -114,15 +114,19 @@ SAddon {
|
|
|
114
114
|
STabLineItem[size='m'] {
|
|
115
115
|
height: 28px;
|
|
116
116
|
min-width: 18px;
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
& SText {
|
|
118
|
+
font-size: var(--fs-200);
|
|
119
|
+
line-height: var(--lh-200);
|
|
120
|
+
}
|
|
119
121
|
}
|
|
120
122
|
|
|
121
123
|
STabLineItem[size='l'] {
|
|
122
124
|
height: 40px;
|
|
123
125
|
min-width: 26px;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
+
& SText {
|
|
127
|
+
font-size: var(--fs-300);
|
|
128
|
+
line-height: var(--lh-300);
|
|
129
|
+
}
|
|
126
130
|
}
|
|
127
131
|
|
|
128
132
|
STabLineItem[neighborLocation='left'] {
|
package/lib/es6/TabLine.js
CHANGED
|
@@ -33,23 +33,23 @@ var style = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
".___STabLine_e1i3f_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_e1i3f_gg_.__underlined_e1i3f_gg_{border-bottom:1px solid #c4c7cf}.___STabLineItem_e1i3f_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;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:none;background:transparent;color:#191b23;margin-right:16px}.___STabLineItem_e1i3f_gg_::-moz-focus-inner{border:none;padding:0}.___STabLineItem_e1i3f_gg_:active,.___STabLineItem_e1i3f_gg_:focus,.___STabLineItem_e1i3f_gg_:hover{outline:0;text-decoration:none}.___STabLineItem_e1i3f_gg_:after{content:\"\";left:0;width:100%;background-color:transparent;transition:background-color .2s}.___STabLineItem_e1i3f_gg_:hover:after{background-color:#c4c7cf}.___STabLineItem_e1i3f_gg_ .___SText_e1i3f_gg_:not(:last-child){margin-right:8px}.___STabLineItem_e1i3f_gg_ .___SAddon_e1i3f_gg_:not(:last-child){margin-right:8px}.___SIndicator_e1i3f_gg_,.___STabLineItem_e1i3f_gg_:after{position:absolute;display:block;bottom:-1px;height:2px}.___SIndicator_e1i3f_gg_{transition:transform .5s ease;background-color:#008ff8;will-change:transform}.___STabLineItem_e1i3f_gg_.__selected_e1i3f_gg_{flex-shrink:0}.___STabLineItem_e1i3f_gg_.__disabled_e1i3f_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabLineItem_e1i3f_gg_.__keyboardFocused_e1i3f_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_e1i3f_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_e1i3f_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_e1i3f_gg_._size_m_e1i3f_gg_{height:28px;min-width:18px}.___STabLineItem_e1i3f_gg_._size_m_e1i3f_gg_ .___SText_e1i3f_gg_{font-size:14px;line-height:1.42}.___STabLineItem_e1i3f_gg_._size_l_e1i3f_gg_{height:40px;min-width:26px}.___STabLineItem_e1i3f_gg_._size_l_e1i3f_gg_ .___SText_e1i3f_gg_{font-size:16px;line-height:1.5}.___STabLineItem_e1i3f_gg_._neighborLocation_left_e1i3f_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_e1i3f_gg_:after{transition:none}.___SIndicator_e1i3f_gg_{transition:none}}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "e1i3f_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__STabLine": "
|
|
42
|
-
"_underlined": "
|
|
43
|
-
"__STabLineItem": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
46
|
-
"__SIndicator": "
|
|
47
|
-
"_selected": "
|
|
48
|
-
"_disabled": "
|
|
49
|
-
"_keyboardFocused": "
|
|
50
|
-
"_size_m": "
|
|
51
|
-
"_size_l": "
|
|
52
|
-
"_neighborLocation_left": "
|
|
41
|
+
"__STabLine": "___STabLine_e1i3f_gg_",
|
|
42
|
+
"_underlined": "__underlined_e1i3f_gg_",
|
|
43
|
+
"__STabLineItem": "___STabLineItem_e1i3f_gg_",
|
|
44
|
+
"__SText": "___SText_e1i3f_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_e1i3f_gg_",
|
|
46
|
+
"__SIndicator": "___SIndicator_e1i3f_gg_",
|
|
47
|
+
"_selected": "__selected_e1i3f_gg_",
|
|
48
|
+
"_disabled": "__disabled_e1i3f_gg_",
|
|
49
|
+
"_keyboardFocused": "__keyboardFocused_e1i3f_gg_",
|
|
50
|
+
"_size_m": "_size_m_e1i3f_gg_",
|
|
51
|
+
"_size_l": "_size_l_e1i3f_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_e1i3f_gg_"
|
|
53
53
|
});
|
|
54
54
|
var optionsA11yEnhance = {
|
|
55
55
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabLineValue = string | number | boolean;\n\nexport interface ITabLineProps<T extends TabLineValue = TabLineValue>\n extends IBoxProps,\n INeighborLocationProps {\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?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\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\nexport interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {\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\nexport interface ITabLineContext {\n getItemProps: PropGetterFn;\n}\n\nexport interface ITabLineHandlers {\n value: (value: TabLineValue) => void;\n}\n\ndeclare const TabLine: (<T, V extends TabLineValue = TabLineValue>(\n props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,\n) => ReturnEl) & {\n Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default TabLine;\n"],"mappings":""}
|
|
@@ -114,15 +114,19 @@ SAddon {
|
|
|
114
114
|
STabLineItem[size='m'] {
|
|
115
115
|
height: 28px;
|
|
116
116
|
min-width: 18px;
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
& SText {
|
|
118
|
+
font-size: var(--fs-200);
|
|
119
|
+
line-height: var(--lh-200);
|
|
120
|
+
}
|
|
119
121
|
}
|
|
120
122
|
|
|
121
123
|
STabLineItem[size='l'] {
|
|
122
124
|
height: 40px;
|
|
123
125
|
min-width: 26px;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
+
& SText {
|
|
127
|
+
font-size: var(--fs-300);
|
|
128
|
+
line-height: var(--lh-300);
|
|
129
|
+
}
|
|
126
130
|
}
|
|
127
131
|
|
|
128
132
|
STabLineItem[neighborLocation='left'] {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-line",
|
|
3
3
|
"description": "Semrush TabLine Component",
|
|
4
|
-
"version": "3.0.
|
|
4
|
+
"version": "3.0.12",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "
|
|
12
|
+
"build": "pnpm semcore-builder --source=js",
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"directory": "semcore/tab-line"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
+
"@types/react": "16.8 - 17",
|
|
34
35
|
"@semcore/jest-preset-ui": "1.0.0"
|
|
35
36
|
}
|
|
36
37
|
}
|
package/lib/cjs/index.d.ts
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
|
|
7
|
-
export type TabLineValue = string | number | boolean;
|
|
8
|
-
|
|
9
|
-
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
10
|
-
extends IBoxProps,
|
|
11
|
-
INeighborLocationProps {
|
|
12
|
-
/** TabLine size
|
|
13
|
-
* @default m
|
|
14
|
-
* */
|
|
15
|
-
size?: 'm' | 'l' | false;
|
|
16
|
-
/** Adds a bottom border for the entire component
|
|
17
|
-
* @default true
|
|
18
|
-
* */
|
|
19
|
-
underlined?: boolean;
|
|
20
|
-
/** Is invoked when changing the selection */
|
|
21
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
|
-
/** Value of the selected tab */
|
|
23
|
-
value?: T;
|
|
24
|
-
/** Default value of the selected tab
|
|
25
|
-
* @default null
|
|
26
|
-
* */
|
|
27
|
-
defaultValue?: T;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
31
|
-
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
32
|
-
selected?: boolean;
|
|
33
|
-
/** Disabled state */
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
/** Tab value */
|
|
36
|
-
value?: TabLineValue;
|
|
37
|
-
/** Left addon tag */
|
|
38
|
-
addonLeft?: React.ElementType;
|
|
39
|
-
/** Right addon tag */
|
|
40
|
-
addonRight?: React.ElementType;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export interface ITabLineContext {
|
|
44
|
-
getItemProps: PropGetterFn;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export interface ITabLineHandlers {
|
|
48
|
-
value: (value: TabLineValue) => void;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
|
|
52
|
-
props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
|
|
53
|
-
) => ReturnEl) & {
|
|
54
|
-
Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
|
|
55
|
-
Text: typeof Box;
|
|
56
|
-
Addon: typeof Box;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default TabLine;
|
package/lib/es6/index.d.ts
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
|
|
7
|
-
export type TabLineValue = string | number | boolean;
|
|
8
|
-
|
|
9
|
-
export interface ITabLineProps<T extends TabLineValue = TabLineValue>
|
|
10
|
-
extends IBoxProps,
|
|
11
|
-
INeighborLocationProps {
|
|
12
|
-
/** TabLine size
|
|
13
|
-
* @default m
|
|
14
|
-
* */
|
|
15
|
-
size?: 'm' | 'l' | false;
|
|
16
|
-
/** Adds a bottom border for the entire component
|
|
17
|
-
* @default true
|
|
18
|
-
* */
|
|
19
|
-
underlined?: boolean;
|
|
20
|
-
/** Is invoked when changing the selection */
|
|
21
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
|
|
22
|
-
/** Value of the selected tab */
|
|
23
|
-
value?: T;
|
|
24
|
-
/** Default value of the selected tab
|
|
25
|
-
* @default null
|
|
26
|
-
* */
|
|
27
|
-
defaultValue?: T;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface ITabLineItemProps extends IBoxProps, IKeyboardFocusProps, INeighborItemProps {
|
|
31
|
-
/** Makes a tab selected. This property is determined automatically depending on the value. */
|
|
32
|
-
selected?: boolean;
|
|
33
|
-
/** Disabled state */
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
/** Tab value */
|
|
36
|
-
value?: TabLineValue;
|
|
37
|
-
/** Left addon tag */
|
|
38
|
-
addonLeft?: React.ElementType;
|
|
39
|
-
/** Right addon tag */
|
|
40
|
-
addonRight?: React.ElementType;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
export interface ITabLineContext {
|
|
44
|
-
getItemProps: PropGetterFn;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export interface ITabLineHandlers {
|
|
48
|
-
value: (value: TabLineValue) => void;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
declare const TabLine: (<T, V extends TabLineValue = TabLineValue>(
|
|
52
|
-
props: CProps<ITabLineProps<V> & T, ITabLineContext, ITabLineHandlers>,
|
|
53
|
-
) => ReturnEl) & {
|
|
54
|
-
Item: (<T>(props: CProps<ITabLineItemProps & T, {}, ITabLineHandlers>) => ReturnEl) & {
|
|
55
|
-
Text: typeof Box;
|
|
56
|
-
Addon: typeof Box;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default TabLine;
|