@itcase/ui 1.9.57 → 1.9.59
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/dist/{Avatar_cjs_BIHJrAbQ.js → Avatar_cjs_BcCK-1qn.js} +5 -8
- package/dist/{Avatar_es_CtP68jPM.js → Avatar_es_Dn6PILdH.js} +2 -5
- package/dist/{Button_cjs_BCcz3-Fw.js → Button_cjs_DqbZe2Sk.js} +7 -13
- package/dist/{Button_es_DAzeb-vJ.js → Button_es_C9pw5qr_.js} +2 -8
- package/dist/{ChipsGroup_cjs_C27x9x9O.js → ChipsGroup_cjs_BNapN3BL.js} +7 -11
- package/dist/{ChipsGroup_es_BTe1MYhV.js → ChipsGroup_es_CYtMZd_G.js} +1 -5
- package/dist/{DatePicker_cjs_Dvw_cGFH.js → DatePicker_cjs_CY3VQDAV.js} +10 -14
- package/dist/{DatePicker_es_t3u6yddn.js → DatePicker_es_C110M8WT.js} +4 -8
- package/dist/{Group_cjs_MYtD5is_.js → Group_cjs_CvX0cIz2.js} +5 -17
- package/dist/{Group_es_C_WChp2_.js → Group_es_BgJhtaOv.js} +2 -14
- package/dist/{Image_cjs_Hvjp2QDB.js → Image_cjs_BdHJJUTP.js} +4 -6
- package/dist/{Image_es_DpOCNWpn.js → Image_es_5EyRL35j.js} +1 -3
- package/dist/{Input_cjs_BQIi1N63.js → Input_cjs_BStFgIuQ.js} +3 -4
- package/dist/{Input_es_BYbc2X9M.js → Input_es_BVvf5Gpr.js} +1 -2
- package/dist/{Label_cjs_RI5tFcPt.js → Label_cjs_BYjXyKWj.js} +5 -9
- package/dist/{Label_es_CNRTIAWo.js → Label_es_SG60qCRL.js} +1 -5
- package/dist/{Loader_cjs_CJpdLndn.js → Loader_cjs_BgiKK0BF.js} +5 -8
- package/dist/{Loader_es_CqlLujBJ.js → Loader_es_DzjoV2MF.js} +1 -4
- package/dist/{Overlay_cjs_BK_0yTLw.js → Overlay_cjs_OmKx5lKU.js} +4 -6
- package/dist/{Overlay_es_DOO535JM.js → Overlay_es_DhKLpjdA.js} +1 -3
- package/dist/{SelectContainer_cjs_DTIqXM5V.js → SelectContainer_cjs_CdxNPEhL.js} +17 -22
- package/dist/{SelectContainer_es_CXkK4_Om.js → SelectContainer_es_BQNyIzfX.js} +3 -8
- package/dist/cjs/components/Accordion.js +7 -22
- package/dist/cjs/components/Avatar.js +4 -18
- package/dist/cjs/components/AvatarStack.js +8 -22
- package/dist/cjs/components/Badge.js +5 -19
- package/dist/cjs/components/Breadcrumbs.js +7 -21
- package/dist/cjs/components/Button.js +4 -18
- package/dist/cjs/components/Cell.js +6 -20
- package/dist/cjs/components/Checkbox.js +7 -15
- package/dist/cjs/components/Checkmark.js +5 -19
- package/dist/cjs/components/Chips.js +2 -16
- package/dist/cjs/components/Choice.js +7 -21
- package/dist/cjs/components/Code.js +5 -10
- package/dist/cjs/components/CookiesWarning.js +7 -21
- package/dist/cjs/components/Dadata.js +4 -9
- package/dist/cjs/components/DatePeriod.js +18 -33
- package/dist/cjs/components/DatePicker.js +7 -21
- package/dist/cjs/components/Divider.js +6 -14
- package/dist/cjs/components/Dot.js +4 -10
- package/dist/cjs/components/Drawer.js +6 -21
- package/dist/cjs/components/Dropdown.js +5 -21
- package/dist/cjs/components/Dropzone.js +11 -25
- package/dist/cjs/components/Flex.js +6 -12
- package/dist/cjs/components/Grid.js +8 -14
- package/dist/cjs/components/Group.js +3 -10
- package/dist/cjs/components/HTMLContent.js +4 -10
- package/dist/cjs/components/HeroTitle.js +5 -19
- package/dist/cjs/components/Icon.js +5 -19
- package/dist/cjs/components/Image.js +4 -12
- package/dist/cjs/components/Input.js +4 -9
- package/dist/cjs/components/InputNumber.js +6 -20
- package/dist/cjs/components/InputPassword.js +5 -19
- package/dist/cjs/components/Label.js +2 -16
- package/dist/cjs/components/Link.js +6 -14
- package/dist/cjs/components/List.js +8 -16
- package/dist/cjs/components/Loader.js +3 -11
- package/dist/cjs/components/Logo.js +8 -18
- package/dist/cjs/components/MenuItem.js +5 -19
- package/dist/cjs/components/Modal.js +7 -21
- package/dist/cjs/components/ModalSheetBottom.js +5 -19
- package/dist/cjs/components/Notification.js +11 -25
- package/dist/cjs/components/Overlay.js +3 -10
- package/dist/cjs/components/Pagination.js +8 -24
- package/dist/cjs/components/Radio.js +5 -13
- package/dist/cjs/components/RangeSlider.js +4 -10
- package/dist/cjs/components/Response.js +10 -24
- package/dist/cjs/components/SVGContent.js +5 -14
- package/dist/cjs/components/ScrollOnDrag.js +4 -10
- package/dist/cjs/components/ScrollToView.js +4 -10
- package/dist/cjs/components/Search.js +7 -21
- package/dist/cjs/components/Segmented.js +6 -20
- package/dist/cjs/components/Select.js +5 -20
- package/dist/cjs/components/Swiper.js +6 -20
- package/dist/cjs/components/Switch.js +5 -13
- package/dist/cjs/components/Tab.js +8 -23
- package/dist/cjs/components/Text.js +6 -14
- package/dist/cjs/components/Textarea.js +5 -10
- package/dist/cjs/components/Tile.js +5 -19
- package/dist/cjs/components/Title.js +5 -19
- package/dist/cjs/components/Tooltip.js +5 -19
- package/dist/cjs/components/Video.js +5 -9
- package/dist/cjs/components/Warning.js +5 -19
- package/dist/cjs/context/Notifications.js +16 -188
- package/dist/cjs/context/UIContext.js +14 -71
- package/dist/cjs/context/UrlAssetPrefix.js +15 -13
- package/dist/cjs/hoc/urlWithAssetPrefix.js +14 -73
- package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +14 -25
- package/dist/cjs/hooks/useAppearanceConfig.js +12 -2
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +10 -124
- package/dist/cjs/hooks/useDevicePropsGenerator.js +6 -9
- package/dist/cjs/hooks/useDeviceTargetClass.js +8 -4
- package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js +13 -116
- package/dist/cjs/hooks/useMediaQueries.js +11 -2
- package/dist/cjs/hooks/useStyles/styleAttributes.js +15 -168
- package/dist/cjs/hooks/useStyles/useStyles.js +10 -196
- package/dist/cjs/hooks/useStyles.js +7 -10
- package/dist/cjs/hooks.js +15 -6
- package/dist/cjs/utils/mergeAppearanceKeys.js +15 -15
- package/dist/cjs/utils/setViewportProperty.js +15 -5
- package/dist/cjs/utils.js +14 -4
- package/dist/components/Accordion.js +1 -16
- package/dist/components/Avatar.js +4 -18
- package/dist/components/AvatarStack.js +4 -18
- package/dist/components/Badge.js +2 -16
- package/dist/components/Breadcrumbs.js +1 -15
- package/dist/components/Button.js +4 -18
- package/dist/components/Cell.js +2 -16
- package/dist/components/Checkbox.js +4 -12
- package/dist/components/Checkmark.js +1 -15
- package/dist/components/Chips.js +2 -16
- package/dist/components/Choice.js +2 -16
- package/dist/components/Code.js +3 -8
- package/dist/components/CookiesWarning.js +4 -18
- package/dist/components/Dadata.js +4 -9
- package/dist/components/DatePeriod.js +12 -27
- package/dist/components/DatePicker.js +7 -21
- package/dist/components/Divider.js +3 -11
- package/dist/components/Dot.js +2 -8
- package/dist/components/Drawer.js +3 -18
- package/dist/components/Dropdown.js +1 -17
- package/dist/components/Dropzone.js +7 -21
- package/dist/components/Flex.js +2 -8
- package/dist/components/Grid.js +2 -8
- package/dist/components/Group/Group.appearance.js +1 -4
- package/dist/components/Group.js +3 -10
- package/dist/components/HTMLContent.js +2 -8
- package/dist/components/HeroTitle.js +1 -15
- package/dist/components/Icon.js +2 -16
- package/dist/components/Image.js +4 -12
- package/dist/components/Input.js +4 -9
- package/dist/components/InputNumber.js +4 -18
- package/dist/components/InputPassword.js +2 -16
- package/dist/components/Label.js +2 -16
- package/dist/components/Link.js +2 -10
- package/dist/components/List.js +2 -10
- package/dist/components/Loader.js +3 -11
- package/dist/components/Logo.js +3 -13
- package/dist/components/MenuItem.js +1 -15
- package/dist/components/Modal.js +3 -17
- package/dist/components/ModalSheetBottom.js +1 -15
- package/dist/components/Notification.js +5 -19
- package/dist/components/Overlay.js +3 -10
- package/dist/components/Pagination.js +1 -17
- package/dist/components/Radio.js +2 -10
- package/dist/components/RangeSlider.js +2 -8
- package/dist/components/Response.js +5 -19
- package/dist/components/SVGContent.js +2 -11
- package/dist/components/ScrollOnDrag.js +2 -8
- package/dist/components/ScrollToView.js +2 -8
- package/dist/components/Search.js +1 -15
- package/dist/components/Segmented.js +2 -16
- package/dist/components/Select.js +5 -20
- package/dist/components/Swiper.js +2 -16
- package/dist/components/Switch.js +2 -10
- package/dist/components/Tab.js +2 -17
- package/dist/components/Text.js +3 -11
- package/dist/components/Textarea.js +3 -8
- package/dist/components/Tile.js +1 -15
- package/dist/components/Title.js +2 -16
- package/dist/components/Tooltip.js +2 -16
- package/dist/components/Video.js +4 -8
- package/dist/components/Warning.js +1 -15
- package/dist/hooks/useAppearanceConfig.js +11 -1
- package/dist/hooks/useDevicePropsGenerator.js +5 -8
- package/dist/hooks/useMediaQueries.js +10 -1
- package/dist/hooks/useStyles.js +6 -9
- package/dist/hooks.js +12 -7
- package/dist/primitives_cjs_DX--6Yn5.js +2715 -0
- package/dist/primitives_es_BNlMaZfZ.js +2672 -0
- package/dist/utils.js +12 -2
- package/package.json +1 -1
- package/dist/Divider_cjs_C5Ou2Kqa.js +0 -104
- package/dist/Divider_es_D2snK_vn.js +0 -100
- package/dist/DropdownItem_cjs_k28TIoDU.js +0 -230
- package/dist/DropdownItem_es_DjPgbwtU.js +0 -225
- package/dist/Icon_cjs_DTvdhr8B.js +0 -1099
- package/dist/Icon_es_kewxGRUB.js +0 -1086
- package/dist/Link_cjs_Dn7UhCYe.js +0 -277
- package/dist/Link_es_BDAmhIzd.js +0 -272
- package/dist/Text_cjs_erTy2pUN.js +0 -68
- package/dist/Text_es_DVNvU0m0.js +0 -64
- package/dist/components/Group/appearance/groupSurface.js +0 -8
- package/dist/types/components/Group/appearance/groupSurface.d.ts +0 -3
|
@@ -1,277 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
|
-
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
9
|
-
|
|
10
|
-
const linkAppearanceAccent = {
|
|
11
|
-
accentPrimary: {
|
|
12
|
-
fill: 'accentPrimary',
|
|
13
|
-
fillHover: 'accentHoverPrimary',
|
|
14
|
-
borderColor: 'accentBorderPrimary',
|
|
15
|
-
},
|
|
16
|
-
accentSecondary: {
|
|
17
|
-
fill: 'accentPrimary',
|
|
18
|
-
fillHover: 'accentHoverPrimary',
|
|
19
|
-
labelTextColor: 'accentTextSecondary',
|
|
20
|
-
labelTextColorHover: 'accentTextSecondary',
|
|
21
|
-
borderColor: 'accentBorderPrimary',
|
|
22
|
-
},
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
const linkAppearanceDanger = {
|
|
26
|
-
dangerPrimary: {
|
|
27
|
-
fill: 'dangerPrimary',
|
|
28
|
-
fillHover: 'dangerHoverPrimary',
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const linkAppearanceDisabled = {
|
|
33
|
-
disabledPrimary: {
|
|
34
|
-
fill: 'surfaceDisabled',
|
|
35
|
-
borderColor: 'errorBorderQuaternary',
|
|
36
|
-
textColor: 'surfaceTextQuaternary',
|
|
37
|
-
},
|
|
38
|
-
disabledSecondary: {
|
|
39
|
-
fill: 'surfaceSecondary',
|
|
40
|
-
borderColor: 'surfaceBorderTertiary',
|
|
41
|
-
borderColorHover: 'surfaceBorderQuaternary',
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const linkAppearanceError = {
|
|
46
|
-
errorPrimary: {
|
|
47
|
-
fill: 'errorPrimary',
|
|
48
|
-
fillHover: 'errorHoverPrimary',
|
|
49
|
-
labelTextColor: 'errorTextPrimary',
|
|
50
|
-
labelTextColorHover: 'errorTextPrimary',
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const linkAppearanceExtra = {
|
|
55
|
-
extraPrimary: {
|
|
56
|
-
fill: 'extraPrimary',
|
|
57
|
-
fillHover: 'extraHoverPrimary',
|
|
58
|
-
labelTextColor: 'extraTextPrimary',
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const linkAppearanceInfo = {
|
|
63
|
-
infoPrimary: {
|
|
64
|
-
fill: 'accentPrimary',
|
|
65
|
-
fillHover: 'accentHoverPrimary',
|
|
66
|
-
labelTextColor: 'accentTextPrimary',
|
|
67
|
-
labelTextColorHover: 'accentTextPrimary',
|
|
68
|
-
borderColor: 'accentBorderPrimary',
|
|
69
|
-
},
|
|
70
|
-
infoSecondary: {
|
|
71
|
-
fill: 'accentPrimary',
|
|
72
|
-
fillHover: 'accentHoverPrimary',
|
|
73
|
-
labelTextColor: 'accentTextSecondary',
|
|
74
|
-
labelTextColorHover: 'accentTextPrimary',
|
|
75
|
-
borderColor: 'accentBorderPrimary',
|
|
76
|
-
},
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
const linkAppearanceRequire = {
|
|
80
|
-
requirePrimary: {
|
|
81
|
-
fill: 'warningTertiary',
|
|
82
|
-
borderColor: 'warningBorderQuaternary',
|
|
83
|
-
textColor: 'surfaceTextPrimary',
|
|
84
|
-
},
|
|
85
|
-
requireSecondary: {
|
|
86
|
-
fill: 'surfaceSecondary',
|
|
87
|
-
borderColor: 'surfaceBorderTertiary',
|
|
88
|
-
},
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
const linkAppearanceSize = {
|
|
92
|
-
sizeXXL: {
|
|
93
|
-
size: 'xxl',
|
|
94
|
-
labelTextSize: 'xxl',
|
|
95
|
-
iconAfterFillSize: '24',
|
|
96
|
-
iconAfterSize: '24',
|
|
97
|
-
iconBeforeFillSize: '24',
|
|
98
|
-
iconBeforeSize: '24',
|
|
99
|
-
},
|
|
100
|
-
sizeXL: {
|
|
101
|
-
size: 'xl',
|
|
102
|
-
labelTextSize: 'l',
|
|
103
|
-
iconAfterFillSize: '24',
|
|
104
|
-
iconAfterSize: '24',
|
|
105
|
-
iconBeforeFillSize: '24',
|
|
106
|
-
iconBeforeSize: '24',
|
|
107
|
-
},
|
|
108
|
-
sizeL: {
|
|
109
|
-
size: 'l',
|
|
110
|
-
labelTextSize: 'l',
|
|
111
|
-
iconAfterFillSize: '24',
|
|
112
|
-
iconAfterSize: '24',
|
|
113
|
-
iconBeforeFillSize: '24',
|
|
114
|
-
iconBeforeSize: '24',
|
|
115
|
-
},
|
|
116
|
-
sizeM: {
|
|
117
|
-
size: 'm',
|
|
118
|
-
labelTextSize: 'm',
|
|
119
|
-
iconAfterFillSize: '24',
|
|
120
|
-
iconAfterSize: '24',
|
|
121
|
-
iconBeforeFillSize: '24',
|
|
122
|
-
iconBeforeSize: '24',
|
|
123
|
-
},
|
|
124
|
-
sizeS: {
|
|
125
|
-
size: 's',
|
|
126
|
-
labelTextSize: 's',
|
|
127
|
-
iconAfterFillSize: '20',
|
|
128
|
-
iconAfterSize: '20',
|
|
129
|
-
iconBeforeFillSize: '20',
|
|
130
|
-
iconBeforeSize: '20',
|
|
131
|
-
},
|
|
132
|
-
sizeXS: {
|
|
133
|
-
size: 'xs',
|
|
134
|
-
labelTextSize: 'xs',
|
|
135
|
-
iconAfterFillSize: '16',
|
|
136
|
-
iconAfterSize: '16',
|
|
137
|
-
iconBeforeFillSize: '16',
|
|
138
|
-
iconBeforeSize: '16',
|
|
139
|
-
},
|
|
140
|
-
sizeXXS: {
|
|
141
|
-
size: 'xxs',
|
|
142
|
-
labelTextSize: 'xs',
|
|
143
|
-
iconAfterFillSize: '14',
|
|
144
|
-
iconAfterSize: '14',
|
|
145
|
-
iconBeforeFillSize: '14',
|
|
146
|
-
iconBeforeSize: '14',
|
|
147
|
-
},
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
const linkAppearanceSpecial = {
|
|
151
|
-
specialPrimary: {
|
|
152
|
-
fill: 'specialPrimary',
|
|
153
|
-
fillHover: 'specialHoverPrimary',
|
|
154
|
-
labelTextColor: 'specialTextPrimary',
|
|
155
|
-
},
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
const linkAppearanceStyle = {
|
|
159
|
-
solid: {
|
|
160
|
-
borderColor: 'none',
|
|
161
|
-
},
|
|
162
|
-
outlined: {
|
|
163
|
-
fill: 'none',
|
|
164
|
-
},
|
|
165
|
-
full: {
|
|
166
|
-
borderColor: 'none',
|
|
167
|
-
},
|
|
168
|
-
ghost: {
|
|
169
|
-
fill: 'none',
|
|
170
|
-
borderColor: 'none',
|
|
171
|
-
},
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
const linkAppearanceSuccess = {
|
|
175
|
-
successPrimary: {
|
|
176
|
-
fill: 'successPrimary',
|
|
177
|
-
fillHover: 'successHoverPrimary',
|
|
178
|
-
labelTextColor: 'successTextSecondary',
|
|
179
|
-
labelTextColorHover: 'successTextSecondary',
|
|
180
|
-
},
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
const linkAppearanceSurface = {
|
|
184
|
-
surfacePrimary: {
|
|
185
|
-
fill: 'surfacePrimary',
|
|
186
|
-
fillHover: 'surfaceHoverPrimary',
|
|
187
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
188
|
-
},
|
|
189
|
-
surfaceQuaternary: {
|
|
190
|
-
fill: 'surfaceQuaternary',
|
|
191
|
-
fillHover: 'surfaceHoverQuaternary',
|
|
192
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
193
|
-
},
|
|
194
|
-
surfaceSecondary: {
|
|
195
|
-
fill: 'surfaceSecondary',
|
|
196
|
-
fillHover: 'surfaceHoverSecondary',
|
|
197
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
198
|
-
},
|
|
199
|
-
surfaceTertiary: {
|
|
200
|
-
fill: 'surfaceTertiary',
|
|
201
|
-
fillHover: 'surfaceHoverTertiary',
|
|
202
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
203
|
-
},
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
const linkAppearanceWarning = {
|
|
207
|
-
warningPrimary: {
|
|
208
|
-
fill: 'warningPrimary',
|
|
209
|
-
fillHover: 'warningHoverPrimary',
|
|
210
|
-
labelTextColor: 'warningTextSecondary',
|
|
211
|
-
labelTextColorHover: 'warningTextSecondary',
|
|
212
|
-
},
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
const linkAppearance = {
|
|
216
|
-
...linkAppearanceSize,
|
|
217
|
-
...linkAppearanceDisabled,
|
|
218
|
-
...linkAppearanceRequire,
|
|
219
|
-
...linkAppearanceStyle,
|
|
220
|
-
...linkAppearanceAccent,
|
|
221
|
-
...linkAppearanceDanger,
|
|
222
|
-
...linkAppearanceError,
|
|
223
|
-
...linkAppearanceInfo,
|
|
224
|
-
...linkAppearanceSpecial,
|
|
225
|
-
...linkAppearanceExtra,
|
|
226
|
-
...linkAppearanceSuccess,
|
|
227
|
-
...linkAppearanceSurface,
|
|
228
|
-
...linkAppearanceWarning,
|
|
229
|
-
};
|
|
230
|
-
|
|
231
|
-
const linkConfig = {
|
|
232
|
-
appearance: linkAppearance,
|
|
233
|
-
LinkComponent: 'a',
|
|
234
|
-
setAppearance: (appearanceConfig) => {
|
|
235
|
-
linkConfig.appearance = appearanceConfig;
|
|
236
|
-
},
|
|
237
|
-
setLinkComponent: (newComponent) => {
|
|
238
|
-
linkConfig.LinkComponent = newComponent;
|
|
239
|
-
},
|
|
240
|
-
};
|
|
241
|
-
function Link(props) {
|
|
242
|
-
const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, children, } = props;
|
|
243
|
-
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, linkConfig, isDisabled);
|
|
244
|
-
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
245
|
-
const { directionClass, fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorClass, textColorHoverClass, textGradientClass, textStyleClass, textWeightClass, heightClass, shapeClass, sizeClass, svgFillClass, svgFillHoverClass, underline = 'underline', widthClass, } = propsGenerator;
|
|
246
|
-
const { styles } = useStyles.useStyles(props);
|
|
247
|
-
return (jsxRuntime.jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, directionClass && `link_direction_${directionClass}`, sizeClass && `text_size_${sizeClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, underline && `link_underline_${underline}`, 'text', (textColorClass ||
|
|
248
|
-
textColorHoverClass ||
|
|
249
|
-
textGradientClass ||
|
|
250
|
-
textStyleClass ||
|
|
251
|
-
textWeightClass) &&
|
|
252
|
-
'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onPointerCancel, onPointerDown: onPointerDown, onPointerLeave: onPointerLeave, onPointerUp: onPointerUp, children: [before, children || text, after] }));
|
|
253
|
-
}
|
|
254
|
-
function LinkWrapper(props) {
|
|
255
|
-
const { href, LinkComponent, rel, target, children, ...otherProps } = props;
|
|
256
|
-
if (href) {
|
|
257
|
-
const Component = LinkComponent || linkConfig.LinkComponent;
|
|
258
|
-
if (Component) {
|
|
259
|
-
return (jsxRuntime.jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
else if (LinkComponent) {
|
|
263
|
-
return jsxRuntime.jsx(LinkComponent, { ...otherProps, children: children });
|
|
264
|
-
}
|
|
265
|
-
return React.Children.toArray(children)
|
|
266
|
-
.filter(Boolean)
|
|
267
|
-
.map((child) => {
|
|
268
|
-
return React.isValidElement(child)
|
|
269
|
-
? React.cloneElement(child, otherProps)
|
|
270
|
-
: child;
|
|
271
|
-
});
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
exports.Link = Link;
|
|
275
|
-
exports.LinkWrapper = LinkWrapper;
|
|
276
|
-
exports.linkAppearance = linkAppearance;
|
|
277
|
-
exports.linkConfig = linkConfig;
|
package/dist/Link_es_BDAmhIzd.js
DELETED
|
@@ -1,272 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
|
-
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
7
|
-
|
|
8
|
-
const linkAppearanceAccent = {
|
|
9
|
-
accentPrimary: {
|
|
10
|
-
fill: 'accentPrimary',
|
|
11
|
-
fillHover: 'accentHoverPrimary',
|
|
12
|
-
borderColor: 'accentBorderPrimary',
|
|
13
|
-
},
|
|
14
|
-
accentSecondary: {
|
|
15
|
-
fill: 'accentPrimary',
|
|
16
|
-
fillHover: 'accentHoverPrimary',
|
|
17
|
-
labelTextColor: 'accentTextSecondary',
|
|
18
|
-
labelTextColorHover: 'accentTextSecondary',
|
|
19
|
-
borderColor: 'accentBorderPrimary',
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const linkAppearanceDanger = {
|
|
24
|
-
dangerPrimary: {
|
|
25
|
-
fill: 'dangerPrimary',
|
|
26
|
-
fillHover: 'dangerHoverPrimary',
|
|
27
|
-
},
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const linkAppearanceDisabled = {
|
|
31
|
-
disabledPrimary: {
|
|
32
|
-
fill: 'surfaceDisabled',
|
|
33
|
-
borderColor: 'errorBorderQuaternary',
|
|
34
|
-
textColor: 'surfaceTextQuaternary',
|
|
35
|
-
},
|
|
36
|
-
disabledSecondary: {
|
|
37
|
-
fill: 'surfaceSecondary',
|
|
38
|
-
borderColor: 'surfaceBorderTertiary',
|
|
39
|
-
borderColorHover: 'surfaceBorderQuaternary',
|
|
40
|
-
},
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
const linkAppearanceError = {
|
|
44
|
-
errorPrimary: {
|
|
45
|
-
fill: 'errorPrimary',
|
|
46
|
-
fillHover: 'errorHoverPrimary',
|
|
47
|
-
labelTextColor: 'errorTextPrimary',
|
|
48
|
-
labelTextColorHover: 'errorTextPrimary',
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const linkAppearanceExtra = {
|
|
53
|
-
extraPrimary: {
|
|
54
|
-
fill: 'extraPrimary',
|
|
55
|
-
fillHover: 'extraHoverPrimary',
|
|
56
|
-
labelTextColor: 'extraTextPrimary',
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
const linkAppearanceInfo = {
|
|
61
|
-
infoPrimary: {
|
|
62
|
-
fill: 'accentPrimary',
|
|
63
|
-
fillHover: 'accentHoverPrimary',
|
|
64
|
-
labelTextColor: 'accentTextPrimary',
|
|
65
|
-
labelTextColorHover: 'accentTextPrimary',
|
|
66
|
-
borderColor: 'accentBorderPrimary',
|
|
67
|
-
},
|
|
68
|
-
infoSecondary: {
|
|
69
|
-
fill: 'accentPrimary',
|
|
70
|
-
fillHover: 'accentHoverPrimary',
|
|
71
|
-
labelTextColor: 'accentTextSecondary',
|
|
72
|
-
labelTextColorHover: 'accentTextPrimary',
|
|
73
|
-
borderColor: 'accentBorderPrimary',
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
const linkAppearanceRequire = {
|
|
78
|
-
requirePrimary: {
|
|
79
|
-
fill: 'warningTertiary',
|
|
80
|
-
borderColor: 'warningBorderQuaternary',
|
|
81
|
-
textColor: 'surfaceTextPrimary',
|
|
82
|
-
},
|
|
83
|
-
requireSecondary: {
|
|
84
|
-
fill: 'surfaceSecondary',
|
|
85
|
-
borderColor: 'surfaceBorderTertiary',
|
|
86
|
-
},
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const linkAppearanceSize = {
|
|
90
|
-
sizeXXL: {
|
|
91
|
-
size: 'xxl',
|
|
92
|
-
labelTextSize: 'xxl',
|
|
93
|
-
iconAfterFillSize: '24',
|
|
94
|
-
iconAfterSize: '24',
|
|
95
|
-
iconBeforeFillSize: '24',
|
|
96
|
-
iconBeforeSize: '24',
|
|
97
|
-
},
|
|
98
|
-
sizeXL: {
|
|
99
|
-
size: 'xl',
|
|
100
|
-
labelTextSize: 'l',
|
|
101
|
-
iconAfterFillSize: '24',
|
|
102
|
-
iconAfterSize: '24',
|
|
103
|
-
iconBeforeFillSize: '24',
|
|
104
|
-
iconBeforeSize: '24',
|
|
105
|
-
},
|
|
106
|
-
sizeL: {
|
|
107
|
-
size: 'l',
|
|
108
|
-
labelTextSize: 'l',
|
|
109
|
-
iconAfterFillSize: '24',
|
|
110
|
-
iconAfterSize: '24',
|
|
111
|
-
iconBeforeFillSize: '24',
|
|
112
|
-
iconBeforeSize: '24',
|
|
113
|
-
},
|
|
114
|
-
sizeM: {
|
|
115
|
-
size: 'm',
|
|
116
|
-
labelTextSize: 'm',
|
|
117
|
-
iconAfterFillSize: '24',
|
|
118
|
-
iconAfterSize: '24',
|
|
119
|
-
iconBeforeFillSize: '24',
|
|
120
|
-
iconBeforeSize: '24',
|
|
121
|
-
},
|
|
122
|
-
sizeS: {
|
|
123
|
-
size: 's',
|
|
124
|
-
labelTextSize: 's',
|
|
125
|
-
iconAfterFillSize: '20',
|
|
126
|
-
iconAfterSize: '20',
|
|
127
|
-
iconBeforeFillSize: '20',
|
|
128
|
-
iconBeforeSize: '20',
|
|
129
|
-
},
|
|
130
|
-
sizeXS: {
|
|
131
|
-
size: 'xs',
|
|
132
|
-
labelTextSize: 'xs',
|
|
133
|
-
iconAfterFillSize: '16',
|
|
134
|
-
iconAfterSize: '16',
|
|
135
|
-
iconBeforeFillSize: '16',
|
|
136
|
-
iconBeforeSize: '16',
|
|
137
|
-
},
|
|
138
|
-
sizeXXS: {
|
|
139
|
-
size: 'xxs',
|
|
140
|
-
labelTextSize: 'xs',
|
|
141
|
-
iconAfterFillSize: '14',
|
|
142
|
-
iconAfterSize: '14',
|
|
143
|
-
iconBeforeFillSize: '14',
|
|
144
|
-
iconBeforeSize: '14',
|
|
145
|
-
},
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
const linkAppearanceSpecial = {
|
|
149
|
-
specialPrimary: {
|
|
150
|
-
fill: 'specialPrimary',
|
|
151
|
-
fillHover: 'specialHoverPrimary',
|
|
152
|
-
labelTextColor: 'specialTextPrimary',
|
|
153
|
-
},
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
const linkAppearanceStyle = {
|
|
157
|
-
solid: {
|
|
158
|
-
borderColor: 'none',
|
|
159
|
-
},
|
|
160
|
-
outlined: {
|
|
161
|
-
fill: 'none',
|
|
162
|
-
},
|
|
163
|
-
full: {
|
|
164
|
-
borderColor: 'none',
|
|
165
|
-
},
|
|
166
|
-
ghost: {
|
|
167
|
-
fill: 'none',
|
|
168
|
-
borderColor: 'none',
|
|
169
|
-
},
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
const linkAppearanceSuccess = {
|
|
173
|
-
successPrimary: {
|
|
174
|
-
fill: 'successPrimary',
|
|
175
|
-
fillHover: 'successHoverPrimary',
|
|
176
|
-
labelTextColor: 'successTextSecondary',
|
|
177
|
-
labelTextColorHover: 'successTextSecondary',
|
|
178
|
-
},
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
const linkAppearanceSurface = {
|
|
182
|
-
surfacePrimary: {
|
|
183
|
-
fill: 'surfacePrimary',
|
|
184
|
-
fillHover: 'surfaceHoverPrimary',
|
|
185
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
186
|
-
},
|
|
187
|
-
surfaceQuaternary: {
|
|
188
|
-
fill: 'surfaceQuaternary',
|
|
189
|
-
fillHover: 'surfaceHoverQuaternary',
|
|
190
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
191
|
-
},
|
|
192
|
-
surfaceSecondary: {
|
|
193
|
-
fill: 'surfaceSecondary',
|
|
194
|
-
fillHover: 'surfaceHoverSecondary',
|
|
195
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
196
|
-
},
|
|
197
|
-
surfaceTertiary: {
|
|
198
|
-
fill: 'surfaceTertiary',
|
|
199
|
-
fillHover: 'surfaceHoverTertiary',
|
|
200
|
-
labelTextColor: 'surfaceTextPrimary',
|
|
201
|
-
},
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
const linkAppearanceWarning = {
|
|
205
|
-
warningPrimary: {
|
|
206
|
-
fill: 'warningPrimary',
|
|
207
|
-
fillHover: 'warningHoverPrimary',
|
|
208
|
-
labelTextColor: 'warningTextSecondary',
|
|
209
|
-
labelTextColorHover: 'warningTextSecondary',
|
|
210
|
-
},
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
const linkAppearance = {
|
|
214
|
-
...linkAppearanceSize,
|
|
215
|
-
...linkAppearanceDisabled,
|
|
216
|
-
...linkAppearanceRequire,
|
|
217
|
-
...linkAppearanceStyle,
|
|
218
|
-
...linkAppearanceAccent,
|
|
219
|
-
...linkAppearanceDanger,
|
|
220
|
-
...linkAppearanceError,
|
|
221
|
-
...linkAppearanceInfo,
|
|
222
|
-
...linkAppearanceSpecial,
|
|
223
|
-
...linkAppearanceExtra,
|
|
224
|
-
...linkAppearanceSuccess,
|
|
225
|
-
...linkAppearanceSurface,
|
|
226
|
-
...linkAppearanceWarning,
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
const linkConfig = {
|
|
230
|
-
appearance: linkAppearance,
|
|
231
|
-
LinkComponent: 'a',
|
|
232
|
-
setAppearance: (appearanceConfig) => {
|
|
233
|
-
linkConfig.appearance = appearanceConfig;
|
|
234
|
-
},
|
|
235
|
-
setLinkComponent: (newComponent) => {
|
|
236
|
-
linkConfig.LinkComponent = newComponent;
|
|
237
|
-
},
|
|
238
|
-
};
|
|
239
|
-
function Link(props) {
|
|
240
|
-
const { appearance, className, dataTestId, dataTour, text, href, link, LinkComponent, rel, style, target, before, after, isDisabled, onClick, onMouseDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, children, } = props;
|
|
241
|
-
const appearanceConfig = useAppearanceConfig(appearance, linkConfig, isDisabled);
|
|
242
|
-
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
243
|
-
const { directionClass, fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorClass, textColorHoverClass, textGradientClass, textStyleClass, textWeightClass, heightClass, shapeClass, sizeClass, svgFillClass, svgFillHoverClass, underline = 'underline', widthClass, } = propsGenerator;
|
|
244
|
-
const { styles } = useStyles(props);
|
|
245
|
-
return (jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, directionClass && `link_direction_${directionClass}`, sizeClass && `text_size_${sizeClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, underline && `link_underline_${underline}`, 'text', (textColorClass ||
|
|
246
|
-
textColorHoverClass ||
|
|
247
|
-
textGradientClass ||
|
|
248
|
-
textStyleClass ||
|
|
249
|
-
textWeightClass) &&
|
|
250
|
-
'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onPointerCancel, onPointerDown: onPointerDown, onPointerLeave: onPointerLeave, onPointerUp: onPointerUp, children: [before, children || text, after] }));
|
|
251
|
-
}
|
|
252
|
-
function LinkWrapper(props) {
|
|
253
|
-
const { href, LinkComponent, rel, target, children, ...otherProps } = props;
|
|
254
|
-
if (href) {
|
|
255
|
-
const Component = LinkComponent || linkConfig.LinkComponent;
|
|
256
|
-
if (Component) {
|
|
257
|
-
return (jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
else if (LinkComponent) {
|
|
261
|
-
return jsx(LinkComponent, { ...otherProps, children: children });
|
|
262
|
-
}
|
|
263
|
-
return React.Children.toArray(children)
|
|
264
|
-
.filter(Boolean)
|
|
265
|
-
.map((child) => {
|
|
266
|
-
return React.isValidElement(child)
|
|
267
|
-
? React.cloneElement(child, otherProps)
|
|
268
|
-
: child;
|
|
269
|
-
});
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
export { Link as L, LinkWrapper as a, linkConfig as b, linkAppearance as l };
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var clsx = require('clsx');
|
|
5
|
-
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
|
-
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
|
-
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
|
|
9
|
-
const textAppearanceSize = {
|
|
10
|
-
sizeXXL: {
|
|
11
|
-
size: 'xxl',
|
|
12
|
-
},
|
|
13
|
-
sizeXL: {
|
|
14
|
-
size: 'xl',
|
|
15
|
-
},
|
|
16
|
-
sizeL: {
|
|
17
|
-
size: 'l',
|
|
18
|
-
},
|
|
19
|
-
sizeM: {
|
|
20
|
-
size: 'm',
|
|
21
|
-
},
|
|
22
|
-
sizeS: {
|
|
23
|
-
size: 's',
|
|
24
|
-
},
|
|
25
|
-
sizeXS: {
|
|
26
|
-
size: 'xs',
|
|
27
|
-
},
|
|
28
|
-
sizeXXS: {
|
|
29
|
-
size: 'xxs',
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const textAppearance = {
|
|
34
|
-
...textAppearanceSize,
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const textConfig = {
|
|
38
|
-
appearance: textAppearance,
|
|
39
|
-
setAppearance: (appearanceConfig) => {
|
|
40
|
-
textConfig.appearance = appearanceConfig;
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
function Text(props) {
|
|
44
|
-
const { appearance, className, dataTestId, dataTour, cursor, style, tag: Tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, onDoubleClick, children, } = props;
|
|
45
|
-
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textConfig, isDisabled);
|
|
46
|
-
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
47
|
-
const { textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrapClass, cursorClass, sizeClass, widthClass, } = propsGenerator;
|
|
48
|
-
const { styles: textStyles } = useStyles.useStyles(props);
|
|
49
|
-
return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
|
|
50
|
-
textColorDisabledClass &&
|
|
51
|
-
`text-color_${textColorDisabledClass}`, !isActive &&
|
|
52
|
-
!isDisabled &&
|
|
53
|
-
textColorClass &&
|
|
54
|
-
`text-color_${textColorClass}`, !isActive &&
|
|
55
|
-
!isDisabled &&
|
|
56
|
-
textColorHoverClass &&
|
|
57
|
-
`text-color_hover_${textColorHoverClass}`, isActive &&
|
|
58
|
-
!isDisabled &&
|
|
59
|
-
textColorActiveHoverClass &&
|
|
60
|
-
`text-color_active_hover_${textColorActiveHoverClass}`, isActive &&
|
|
61
|
-
!isDisabled &&
|
|
62
|
-
textColorActiveClass &&
|
|
63
|
-
`text-color_active_${textColorActiveClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWrapClass && `word-wrap_${textWrapClass}`, textTruncateClass && `text-truncate_${textTruncateClass}`, isSkeleton && 'text_skeleton', widthClass && `width_${widthClass}`, cursorClass && `cursor_${cursorClass}`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, textStyles, style), onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
exports.Text = Text;
|
|
67
|
-
exports.textAppearance = textAppearance;
|
|
68
|
-
exports.textConfig = textConfig;
|
package/dist/Text_es_DVNvU0m0.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
4
|
-
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
|
-
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
|
|
7
|
-
const textAppearanceSize = {
|
|
8
|
-
sizeXXL: {
|
|
9
|
-
size: 'xxl',
|
|
10
|
-
},
|
|
11
|
-
sizeXL: {
|
|
12
|
-
size: 'xl',
|
|
13
|
-
},
|
|
14
|
-
sizeL: {
|
|
15
|
-
size: 'l',
|
|
16
|
-
},
|
|
17
|
-
sizeM: {
|
|
18
|
-
size: 'm',
|
|
19
|
-
},
|
|
20
|
-
sizeS: {
|
|
21
|
-
size: 's',
|
|
22
|
-
},
|
|
23
|
-
sizeXS: {
|
|
24
|
-
size: 'xs',
|
|
25
|
-
},
|
|
26
|
-
sizeXXS: {
|
|
27
|
-
size: 'xxs',
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const textAppearance = {
|
|
32
|
-
...textAppearanceSize,
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const textConfig = {
|
|
36
|
-
appearance: textAppearance,
|
|
37
|
-
setAppearance: (appearanceConfig) => {
|
|
38
|
-
textConfig.appearance = appearanceConfig;
|
|
39
|
-
},
|
|
40
|
-
};
|
|
41
|
-
function Text(props) {
|
|
42
|
-
const { appearance, className, dataTestId, dataTour, cursor, style, tag: Tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, onDoubleClick, children, } = props;
|
|
43
|
-
const appearanceConfig = useAppearanceConfig(appearance, textConfig, isDisabled);
|
|
44
|
-
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
45
|
-
const { textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrapClass, cursorClass, sizeClass, widthClass, } = propsGenerator;
|
|
46
|
-
const { styles: textStyles } = useStyles(props);
|
|
47
|
-
return (jsxs(Tag, { className: clsx(className, 'text', sizeClass && `text_size_${sizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, textAlignClass && `text-align_${textAlignClass}`, isDisabled &&
|
|
48
|
-
textColorDisabledClass &&
|
|
49
|
-
`text-color_${textColorDisabledClass}`, !isActive &&
|
|
50
|
-
!isDisabled &&
|
|
51
|
-
textColorClass &&
|
|
52
|
-
`text-color_${textColorClass}`, !isActive &&
|
|
53
|
-
!isDisabled &&
|
|
54
|
-
textColorHoverClass &&
|
|
55
|
-
`text-color_hover_${textColorHoverClass}`, isActive &&
|
|
56
|
-
!isDisabled &&
|
|
57
|
-
textColorActiveHoverClass &&
|
|
58
|
-
`text-color_active_hover_${textColorActiveHoverClass}`, isActive &&
|
|
59
|
-
!isDisabled &&
|
|
60
|
-
textColorActiveClass &&
|
|
61
|
-
`text-color_active_${textColorActiveClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWrapClass && `word-wrap_${textWrapClass}`, textTruncateClass && `text-truncate_${textTruncateClass}`, isSkeleton && 'text_skeleton', widthClass && `width_${widthClass}`, cursorClass && `cursor_${cursorClass}`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, textStyles, style), onClick: onClick, onDoubleClick: onDoubleClick, children: [before, children, after] }));
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export { Text as T, textConfig as a, textAppearance as t };
|