@itcase/ui 1.8.108 → 1.8.109
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_bOSuIjlv.js → Avatar_cjs_joB9qjwk.js} +36 -60
- package/dist/{Avatar_es_CEiiRkAd.js → Avatar_es_C3HGSiHU.js} +36 -60
- package/dist/{Button_cjs_eGfgY2Dz.js → Button_cjs_mau_55Fl.js} +6 -6
- package/dist/{Button_es_CEXL2diU.js → Button_es_D_IlkeBp.js} +6 -6
- package/dist/{ChipsGroup_cjs_DKLEgUi2.js → ChipsGroup_cjs_D454M1-p.js} +2 -2
- package/dist/{ChipsGroup_es_vMh6YMRm.js → ChipsGroup_es_BKG5mK5N.js} +2 -2
- package/dist/{DatePicker_cjs_T63y9kcH.js → DatePicker_cjs_Bm8nwWKa.js} +4 -4
- package/dist/{DatePicker_es_B87jj8h6.js → DatePicker_es_DAV92A4A.js} +4 -4
- package/dist/{DropdownItem_cjs_BGp4XAme.js → DropdownItem_cjs_D2hHKA5E.js} +2 -2
- package/dist/{DropdownItem_es_BwdenrJx.js → DropdownItem_es_D9JBMV70.js} +2 -2
- package/dist/{Icon_cjs_LSfBwmrG.js → Icon_cjs_ZerVip3X.js} +32 -47
- package/dist/{Icon_es_BYO1LdXJ.js → Icon_es_C76te22j.js} +32 -47
- package/dist/{Label_cjs_Df_mrKBf.js → Label_cjs_CaTh_laL.js} +2 -2
- package/dist/{Label_es_Dl5zb0RD.js → Label_es_CoIII7Ty.js} +2 -2
- package/dist/{Loader_cjs_Db9diKuF.js → Loader_cjs_c6yF7akz.js} +1 -1
- package/dist/{Loader_es_AhHU-s7_.js → Loader_es_C8ETXkiZ.js} +1 -1
- package/dist/{Text_cjs_CeJHeRfI.js → Text_cjs_DpRclhwc.js} +2 -5
- package/dist/{Text_es_BXh9Y3hR.js → Text_es_CtCwsa3V.js} +2 -5
- package/dist/cjs/components/Accordion.js +4 -3
- package/dist/cjs/components/Avatar.js +5 -4
- package/dist/cjs/components/AvatarStack.js +5 -4
- package/dist/cjs/components/Badge.js +4 -3
- package/dist/cjs/components/Breadcrumbs.js +4 -3
- package/dist/cjs/components/Button.js +6 -5
- package/dist/cjs/components/Cell.js +5 -4
- package/dist/cjs/components/Checkbox.js +3 -2
- package/dist/cjs/components/Checkmark.js +2 -1
- package/dist/cjs/components/Chips.js +5 -4
- package/dist/cjs/components/Choice.js +5 -4
- package/dist/cjs/components/Code.js +2 -0
- package/dist/cjs/components/CookiesWarning.js +6 -5
- package/dist/cjs/components/Dadata.js +2 -0
- package/dist/cjs/components/DatePeriod.js +8 -7
- package/dist/cjs/components/DatePicker.js +8 -7
- package/dist/cjs/components/Divider.js +2 -1
- package/dist/cjs/components/Dot.js +2 -1
- package/dist/cjs/components/Drawer.js +3 -2
- package/dist/cjs/components/Dropdown.js +5 -4
- package/dist/cjs/components/Flex.js +2 -1
- package/dist/cjs/components/Grid.js +2 -1
- package/dist/cjs/components/Group.js +2 -1
- package/dist/cjs/components/HTMLContent.js +2 -1
- package/dist/cjs/components/HeroTitle.js +4 -3
- package/dist/cjs/components/Icon.js +4 -3
- package/dist/cjs/components/Image.js +2 -1
- package/dist/cjs/components/Input.js +2 -0
- package/dist/cjs/components/InputPassword.js +4 -3
- package/dist/cjs/components/Label.js +5 -4
- package/dist/cjs/components/Link.js +2 -1
- package/dist/cjs/components/List.js +2 -1
- package/dist/cjs/components/Loader.js +4 -3
- package/dist/cjs/components/Logo.js +2 -1
- package/dist/cjs/components/MenuItem.js +4 -3
- package/dist/cjs/components/Modal.js +5 -4
- package/dist/cjs/components/ModalSheetBottom.js +4 -3
- package/dist/cjs/components/Notification.js +4 -3
- package/dist/cjs/components/Overlay.js +2 -1
- package/dist/cjs/components/Pagination.js +5 -4
- package/dist/cjs/components/Radio.js +6 -2
- package/dist/cjs/components/RangeSlider.js +2 -1
- package/dist/cjs/components/Response.js +6 -5
- package/dist/cjs/components/SVGContent.js +2 -1
- package/dist/cjs/components/ScrollOnDrag.js +2 -1
- package/dist/cjs/components/ScrollToView.js +2 -1
- package/dist/cjs/components/Search.js +4 -3
- package/dist/cjs/components/Segmented.js +3 -2
- package/dist/cjs/components/Select.js +4 -3
- package/dist/cjs/components/Swiper.js +4 -3
- package/dist/cjs/components/Switch.js +3 -2
- package/dist/cjs/components/Tab.js +14 -16
- package/dist/cjs/components/Text.js +3 -2
- package/dist/cjs/components/Textarea.js +2 -0
- package/dist/cjs/components/Tile.js +4 -3
- package/dist/cjs/components/Title.js +4 -3
- package/dist/cjs/components/Tooltip.js +4 -3
- package/dist/cjs/components/Video.js +1 -0
- package/dist/cjs/components/Warning.js +4 -3
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +120 -0
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.interface.js +65 -0
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js +64 -0
- package/dist/cjs/hooks/useActiveClasses.js +9 -0
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +11 -1
- package/dist/cjs/hooks/useDevicePropsGenerator.js +2 -0
- package/dist/cjs/hooks/useStyles/useStyles.js +5 -3
- package/dist/cjs/hooks/useStyles.js +1 -0
- package/dist/cjs/hooks.js +9 -0
- package/dist/components/Accordion.js +4 -3
- package/dist/components/Avatar.js +5 -4
- package/dist/components/AvatarStack.js +5 -4
- package/dist/components/Badge.js +4 -3
- package/dist/components/Breadcrumbs.js +4 -3
- package/dist/components/Button.js +6 -5
- package/dist/components/Cell.js +5 -4
- package/dist/components/Checkbox.js +3 -2
- package/dist/components/Checkmark.js +2 -1
- package/dist/components/Chips.js +5 -4
- package/dist/components/Choice.js +5 -4
- package/dist/components/Code.js +2 -0
- package/dist/components/CookiesWarning.js +6 -5
- package/dist/components/Dadata.js +2 -0
- package/dist/components/DatePeriod.js +8 -7
- package/dist/components/DatePicker.js +8 -7
- package/dist/components/Divider.js +2 -1
- package/dist/components/Dot.js +2 -1
- package/dist/components/Drawer.js +3 -2
- package/dist/components/Dropdown.js +5 -4
- package/dist/components/Flex.js +2 -1
- package/dist/components/Grid.js +2 -1
- package/dist/components/Group.js +2 -1
- package/dist/components/HTMLContent.js +2 -1
- package/dist/components/HeroTitle.js +4 -3
- package/dist/components/Icon.js +4 -3
- package/dist/components/Image.js +2 -1
- package/dist/components/Input.js +2 -0
- package/dist/components/InputPassword.js +4 -3
- package/dist/components/Label.js +5 -4
- package/dist/components/Link.js +2 -1
- package/dist/components/List.js +2 -1
- package/dist/components/Loader.js +4 -3
- package/dist/components/Logo.js +2 -1
- package/dist/components/MenuItem.js +4 -3
- package/dist/components/Modal.js +5 -4
- package/dist/components/ModalSheetBottom.js +4 -3
- package/dist/components/Notification.js +4 -3
- package/dist/components/Overlay.js +2 -1
- package/dist/components/Pagination.js +5 -4
- package/dist/components/Radio.js +6 -2
- package/dist/components/RangeSlider.js +2 -1
- package/dist/components/Response.js +6 -5
- package/dist/components/SVGContent.js +2 -1
- package/dist/components/ScrollOnDrag.js +2 -1
- package/dist/components/ScrollToView.js +2 -1
- package/dist/components/Search.js +4 -3
- package/dist/components/Segmented.js +3 -2
- package/dist/components/Select.js +4 -3
- package/dist/components/Swiper.js +4 -3
- package/dist/components/Switch.js +3 -2
- package/dist/components/Tab.js +14 -16
- package/dist/components/Text.js +3 -2
- package/dist/components/Textarea.js +2 -0
- package/dist/components/Tile.js +4 -3
- package/dist/components/Title.js +4 -3
- package/dist/components/Tooltip.js +4 -3
- package/dist/components/Video.js +1 -0
- package/dist/components/Warning.js +4 -3
- package/dist/css/components/Icon/Icon.css +12 -19
- package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +116 -0
- package/dist/hooks/useActiveClasses/useActiveClasses.interface.js +63 -0
- package/dist/hooks/useActiveClasses/useActiveClasses.js +62 -0
- package/dist/hooks/useActiveClasses.js +3 -0
- package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +11 -1
- package/dist/hooks/useDevicePropsGenerator.js +2 -0
- package/dist/hooks/useStyles/useStyles.js +5 -3
- package/dist/hooks/useStyles.js +1 -0
- package/dist/hooks.js +7 -0
- package/dist/stories/useActiveClasses.mdx +134 -0
- package/dist/types/components/Avatar/Avatar.appearance.d.ts +1878 -2
- package/dist/types/components/Avatar/Avatar.interface.d.ts +48 -37
- package/dist/types/components/Avatar/appearance/avatarDefault.d.ts +2 -19
- package/dist/types/components/Avatar/appearance/avatarShape.d.ts +2 -24
- package/dist/types/components/Avatar/appearance/avatarSize.d.ts +2 -83
- package/dist/types/components/Avatar/appearance/avatarStyle.d.ts +2 -15
- package/dist/types/components/Badge/Badge.appearance.d.ts +986 -228
- package/dist/types/components/Badge/Badge.interface.d.ts +6 -6
- package/dist/types/components/Badge/appearance/badgeAccent.d.ts +2 -37
- package/dist/types/components/Badge/appearance/badgeDanger.d.ts +2 -16
- package/dist/types/components/Badge/appearance/badgeDisabled.d.ts +2 -14
- package/dist/types/components/Badge/appearance/badgeError.d.ts +2 -16
- package/dist/types/components/Badge/appearance/badgeInfo.d.ts +2 -15
- package/dist/types/components/Badge/appearance/badgePrimary.d.ts +2 -16
- package/dist/types/components/Badge/appearance/badgeSecondary.d.ts +2 -16
- package/dist/types/components/Badge/appearance/badgeShape.d.ts +2 -24
- package/dist/types/components/Badge/appearance/badgeSize.d.ts +2 -31
- package/dist/types/components/Badge/appearance/badgeStyle.d.ts +2 -13
- package/dist/types/components/Badge/appearance/badgeSuccess.d.ts +2 -16
- package/dist/types/components/Badge/appearance/badgeSurface.d.ts +2 -24
- package/dist/types/components/Badge/appearance/badgeWarning.d.ts +2 -16
- package/dist/types/components/Icon/Icon.d.ts +30 -6
- package/dist/types/components/Icon/Icon.interface.d.ts +2 -0
- package/dist/types/components/Radio/Radio.appearance.d.ts +3 -0
- package/dist/types/components/Radio/appearance/radioDefault.d.ts +3 -0
- package/dist/types/components/Tab/appearance/tabSurface.d.ts +1 -0
- package/dist/types/components/Text/Text.appearance.d.ts +698 -2
- package/dist/types/components/Text/Text.interface.d.ts +32 -47
- package/dist/types/components/Text/appearance/textSize.d.ts +2 -23
- package/dist/types/components/Title/Title.appearance.d.ts +2225 -2
- package/dist/types/components/Title/Title.interface.d.ts +56 -38
- package/dist/types/components/Title/appearance/titleAccent.d.ts +2 -19
- package/dist/types/components/Title/appearance/titleDanger.d.ts +2 -6
- package/dist/types/components/Title/appearance/titleDisabled.d.ts +2 -19
- package/dist/types/components/Title/appearance/titleError.d.ts +2 -10
- package/dist/types/components/Title/appearance/titleInfo.d.ts +2 -20
- package/dist/types/components/Title/appearance/titlePrimary.d.ts +2 -7
- package/dist/types/components/Title/appearance/titleRequire.d.ts +2 -19
- package/dist/types/components/Title/appearance/titleSecondary.d.ts +2 -7
- package/dist/types/components/Title/appearance/titleSize.d.ts +2 -44
- package/dist/types/components/Title/appearance/titleStyle.d.ts +2 -15
- package/dist/types/components/Title/appearance/titleSuccess.d.ts +2 -10
- package/dist/types/components/Title/appearance/titleSurface.d.ts +2 -24
- package/dist/types/components/Title/appearance/titleWarning.d.ts +2 -10
- package/dist/types/hooks/index.helpers.d.ts +3 -0
- package/dist/types/hooks/useActiveClasses/index.d.ts +2 -0
- package/dist/types/hooks/useActiveClasses/useActiveClasses.d.ts +3 -0
- package/dist/types/hooks/useActiveClasses/useActiveClasses.helpers.d.ts +5 -0
- package/dist/types/hooks/useActiveClasses/useActiveClasses.interface.d.ts +26 -0
- package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts +1 -1
- package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts +3 -0
- package/package.json +6 -6
|
@@ -5,28 +5,31 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
7
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_ZerVip3X.js');
|
|
9
9
|
var Image = require('./Image_cjs_B6YlGx8G.js');
|
|
10
|
-
var Text = require('./
|
|
10
|
+
var Text = require('./Text_cjs_DpRclhwc.js');
|
|
11
11
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
12
12
|
|
|
13
13
|
var avatarAppearanceDefault = {
|
|
14
14
|
surfacePrimary: {
|
|
15
15
|
fill: 'surfacePrimary',
|
|
16
16
|
textColor: 'surfaceTextPrimary',
|
|
17
|
-
badgeAppearance: 'accentPrimary',
|
|
17
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
18
18
|
},
|
|
19
19
|
surfaceSecondary: {
|
|
20
20
|
fill: 'surfaceSecondary',
|
|
21
21
|
textColor: 'surfaceTextPrimary',
|
|
22
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
22
23
|
},
|
|
23
24
|
surfaceTertiary: {
|
|
24
25
|
fill: 'surfaceTertiary',
|
|
25
26
|
textColor: 'surfaceTextPrimary',
|
|
27
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
26
28
|
},
|
|
27
29
|
surfaceQuaternary: {
|
|
28
30
|
fill: 'surfaceQuaternary',
|
|
29
31
|
textColor: 'surfaceTextPrimary',
|
|
32
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
30
33
|
},
|
|
31
34
|
};
|
|
32
35
|
|
|
@@ -37,21 +40,21 @@ var avatarAppearanceShape = {
|
|
|
37
40
|
rounded: {
|
|
38
41
|
shape: 'rounded',
|
|
39
42
|
},
|
|
40
|
-
|
|
41
|
-
shape: 'rounded',
|
|
42
|
-
shapeStrength: '0_5m',
|
|
43
|
-
},
|
|
44
|
-
roundedM: {
|
|
43
|
+
roundedXL: {
|
|
45
44
|
shape: 'rounded',
|
|
46
|
-
shapeStrength: '
|
|
45
|
+
shapeStrength: '2m',
|
|
47
46
|
},
|
|
48
47
|
roundedL: {
|
|
49
48
|
shape: 'rounded',
|
|
50
49
|
shapeStrength: '1_5m',
|
|
51
50
|
},
|
|
52
|
-
|
|
51
|
+
roundedM: {
|
|
53
52
|
shape: 'rounded',
|
|
54
|
-
shapeStrength: '
|
|
53
|
+
shapeStrength: '1m',
|
|
54
|
+
},
|
|
55
|
+
roundedS: {
|
|
56
|
+
shape: 'rounded',
|
|
57
|
+
shapeStrength: '0_5m',
|
|
55
58
|
},
|
|
56
59
|
};
|
|
57
60
|
|
|
@@ -59,83 +62,56 @@ var avatarAppearanceSize = {
|
|
|
59
62
|
size16: {
|
|
60
63
|
size: '16',
|
|
61
64
|
textSize: 'xxl',
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
iconBeforeFillSize: '12',
|
|
65
|
-
iconBeforeSize: '12',
|
|
66
|
-
badgeAppearanceSize: 'sizeXXS'
|
|
65
|
+
badgeAppearanceSize: 'sizeXXS',
|
|
66
|
+
iconFillSize: '12',
|
|
67
67
|
},
|
|
68
68
|
size20: {
|
|
69
69
|
size: '20',
|
|
70
70
|
textSize: 'xxl',
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
iconBeforeFillSize: '12',
|
|
74
|
-
iconBeforeSize: '12',
|
|
75
|
-
badgeAppearanceSize: 'sizeXXS'
|
|
71
|
+
badgeAppearanceSize: 'sizeXXS',
|
|
72
|
+
iconFillSize: '12',
|
|
76
73
|
},
|
|
77
74
|
size24: {
|
|
78
75
|
size: '24',
|
|
79
76
|
textSize: 'l',
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
iconBeforeFillSize: '12',
|
|
83
|
-
iconBeforeSize: '12',
|
|
84
|
-
badgeAppearanceSize: 'sizeXXS'
|
|
77
|
+
badgeAppearanceSize: 'sizeXXS',
|
|
78
|
+
iconFillSize: '12',
|
|
85
79
|
},
|
|
86
80
|
size32: {
|
|
87
81
|
size: '32',
|
|
88
82
|
textSize: 'l',
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
iconBeforeFillSize: '12',
|
|
92
|
-
iconBeforeSize: '12',
|
|
93
|
-
badgeAppearanceSize: 'sizeXS'
|
|
83
|
+
badgeAppearanceSize: 'sizeXS',
|
|
84
|
+
iconFillSize: '12',
|
|
94
85
|
},
|
|
95
86
|
size40: {
|
|
96
87
|
size: '40',
|
|
97
88
|
textSize: 'l',
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
iconBeforeFillSize: '12',
|
|
101
|
-
iconBeforeSize: '12',
|
|
102
|
-
badgeAppearanceSize: 'sizeS'
|
|
89
|
+
badgeAppearanceSize: 'sizeS',
|
|
90
|
+
iconFillSize: '12',
|
|
103
91
|
},
|
|
104
92
|
size56: {
|
|
105
93
|
size: '56',
|
|
106
94
|
textSize: 'xxl',
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
iconBeforeFillSize: '16',
|
|
110
|
-
iconBeforeSize: '16',
|
|
111
|
-
badgeAppearanceSize: 'sizeM'
|
|
95
|
+
badgeAppearanceSize: 'sizeM',
|
|
96
|
+
iconFillSize: '16',
|
|
112
97
|
},
|
|
113
98
|
size96: {
|
|
114
99
|
size: '96',
|
|
115
100
|
textSize: 'xxl',
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
iconBeforeFillSize: '32',
|
|
119
|
-
iconBeforeSize: '32',
|
|
120
|
-
badgeAppearanceSize: 'sizeXL'
|
|
101
|
+
badgeAppearanceSize: 'sizeXL',
|
|
102
|
+
iconFillSize: '32',
|
|
121
103
|
},
|
|
122
104
|
size144: {
|
|
123
105
|
size: '144',
|
|
124
|
-
textSize: '
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
iconBeforeFillSize: '40',
|
|
128
|
-
iconBeforeSize: '40',
|
|
129
|
-
badgeAppearanceSize: 'sizeXXL'
|
|
106
|
+
textSize: 'xxl',
|
|
107
|
+
badgeAppearanceSize: 'sizeXXL',
|
|
108
|
+
iconFillSize: '40',
|
|
130
109
|
},
|
|
131
110
|
size240: {
|
|
132
111
|
size: '240',
|
|
133
|
-
textSize: '
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
iconBeforeFillSize: '40',
|
|
137
|
-
iconBeforeSize: '40',
|
|
138
|
-
badgeAppearanceSize: 'sizeXXL'
|
|
112
|
+
textSize: 'xxl',
|
|
113
|
+
badgeAppearanceSize: 'sizeXXL',
|
|
114
|
+
iconFillSize: '40',
|
|
139
115
|
},
|
|
140
116
|
};
|
|
141
117
|
|
|
@@ -164,7 +140,7 @@ var avatarConfig = {
|
|
|
164
140
|
},
|
|
165
141
|
};
|
|
166
142
|
function Avatar(props) {
|
|
167
|
-
var className = props.className,
|
|
143
|
+
var className = props.className, appearance = props.appearance, src = props.src, _a = props.firstName, firstName = _a === void 0 ? '' : _a, _b = props.secondName, secondName = _b === void 0 ? '' : _b, count = props.count, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick;
|
|
168
144
|
var avatarChars = React.useMemo(function () {
|
|
169
145
|
var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
|
|
170
146
|
var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
|
|
@@ -173,7 +149,7 @@ function Avatar(props) {
|
|
|
173
149
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, avatarConfig);
|
|
174
150
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
175
151
|
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, badge = propsGenerator.badge, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, placeholderUrl = propsGenerator.placeholderUrl, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
176
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', size && "avatar_size_".concat(sizeClass),
|
|
152
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', size && "avatar_size_".concat(sizeClass), (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && "avatar_skeleton", onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: clsx('avatar__image', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), src: src, placeholderUrl: placeholderUrl })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsxRuntime.jsx(Icon.Badge, { className: "avatar__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
|
|
177
153
|
}
|
|
178
154
|
|
|
179
155
|
exports.Avatar = Avatar;
|
|
@@ -3,28 +3,31 @@ import { useMemo } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
5
5
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_C76te22j.js';
|
|
7
7
|
import { I as Image } from './Image_es_BvYo_cHH.js';
|
|
8
|
-
import { T as Text } from './
|
|
8
|
+
import { T as Text } from './Text_es_CtCwsa3V.js';
|
|
9
9
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
10
10
|
|
|
11
11
|
var avatarAppearanceDefault = {
|
|
12
12
|
surfacePrimary: {
|
|
13
13
|
fill: 'surfacePrimary',
|
|
14
14
|
textColor: 'surfaceTextPrimary',
|
|
15
|
-
badgeAppearance: 'accentPrimary',
|
|
15
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
16
16
|
},
|
|
17
17
|
surfaceSecondary: {
|
|
18
18
|
fill: 'surfaceSecondary',
|
|
19
19
|
textColor: 'surfaceTextPrimary',
|
|
20
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
20
21
|
},
|
|
21
22
|
surfaceTertiary: {
|
|
22
23
|
fill: 'surfaceTertiary',
|
|
23
24
|
textColor: 'surfaceTextPrimary',
|
|
25
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
24
26
|
},
|
|
25
27
|
surfaceQuaternary: {
|
|
26
28
|
fill: 'surfaceQuaternary',
|
|
27
29
|
textColor: 'surfaceTextPrimary',
|
|
30
|
+
badgeAppearance: 'accentPrimary solid circular',
|
|
28
31
|
},
|
|
29
32
|
};
|
|
30
33
|
|
|
@@ -35,21 +38,21 @@ var avatarAppearanceShape = {
|
|
|
35
38
|
rounded: {
|
|
36
39
|
shape: 'rounded',
|
|
37
40
|
},
|
|
38
|
-
|
|
39
|
-
shape: 'rounded',
|
|
40
|
-
shapeStrength: '0_5m',
|
|
41
|
-
},
|
|
42
|
-
roundedM: {
|
|
41
|
+
roundedXL: {
|
|
43
42
|
shape: 'rounded',
|
|
44
|
-
shapeStrength: '
|
|
43
|
+
shapeStrength: '2m',
|
|
45
44
|
},
|
|
46
45
|
roundedL: {
|
|
47
46
|
shape: 'rounded',
|
|
48
47
|
shapeStrength: '1_5m',
|
|
49
48
|
},
|
|
50
|
-
|
|
49
|
+
roundedM: {
|
|
51
50
|
shape: 'rounded',
|
|
52
|
-
shapeStrength: '
|
|
51
|
+
shapeStrength: '1m',
|
|
52
|
+
},
|
|
53
|
+
roundedS: {
|
|
54
|
+
shape: 'rounded',
|
|
55
|
+
shapeStrength: '0_5m',
|
|
53
56
|
},
|
|
54
57
|
};
|
|
55
58
|
|
|
@@ -57,83 +60,56 @@ var avatarAppearanceSize = {
|
|
|
57
60
|
size16: {
|
|
58
61
|
size: '16',
|
|
59
62
|
textSize: 'xxl',
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
iconBeforeFillSize: '12',
|
|
63
|
-
iconBeforeSize: '12',
|
|
64
|
-
badgeAppearanceSize: 'sizeXXS'
|
|
63
|
+
badgeAppearanceSize: 'sizeXXS',
|
|
64
|
+
iconFillSize: '12',
|
|
65
65
|
},
|
|
66
66
|
size20: {
|
|
67
67
|
size: '20',
|
|
68
68
|
textSize: 'xxl',
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
iconBeforeFillSize: '12',
|
|
72
|
-
iconBeforeSize: '12',
|
|
73
|
-
badgeAppearanceSize: 'sizeXXS'
|
|
69
|
+
badgeAppearanceSize: 'sizeXXS',
|
|
70
|
+
iconFillSize: '12',
|
|
74
71
|
},
|
|
75
72
|
size24: {
|
|
76
73
|
size: '24',
|
|
77
74
|
textSize: 'l',
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
iconBeforeFillSize: '12',
|
|
81
|
-
iconBeforeSize: '12',
|
|
82
|
-
badgeAppearanceSize: 'sizeXXS'
|
|
75
|
+
badgeAppearanceSize: 'sizeXXS',
|
|
76
|
+
iconFillSize: '12',
|
|
83
77
|
},
|
|
84
78
|
size32: {
|
|
85
79
|
size: '32',
|
|
86
80
|
textSize: 'l',
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
iconBeforeFillSize: '12',
|
|
90
|
-
iconBeforeSize: '12',
|
|
91
|
-
badgeAppearanceSize: 'sizeXS'
|
|
81
|
+
badgeAppearanceSize: 'sizeXS',
|
|
82
|
+
iconFillSize: '12',
|
|
92
83
|
},
|
|
93
84
|
size40: {
|
|
94
85
|
size: '40',
|
|
95
86
|
textSize: 'l',
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
iconBeforeFillSize: '12',
|
|
99
|
-
iconBeforeSize: '12',
|
|
100
|
-
badgeAppearanceSize: 'sizeS'
|
|
87
|
+
badgeAppearanceSize: 'sizeS',
|
|
88
|
+
iconFillSize: '12',
|
|
101
89
|
},
|
|
102
90
|
size56: {
|
|
103
91
|
size: '56',
|
|
104
92
|
textSize: 'xxl',
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
iconBeforeFillSize: '16',
|
|
108
|
-
iconBeforeSize: '16',
|
|
109
|
-
badgeAppearanceSize: 'sizeM'
|
|
93
|
+
badgeAppearanceSize: 'sizeM',
|
|
94
|
+
iconFillSize: '16',
|
|
110
95
|
},
|
|
111
96
|
size96: {
|
|
112
97
|
size: '96',
|
|
113
98
|
textSize: 'xxl',
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
iconBeforeFillSize: '32',
|
|
117
|
-
iconBeforeSize: '32',
|
|
118
|
-
badgeAppearanceSize: 'sizeXL'
|
|
99
|
+
badgeAppearanceSize: 'sizeXL',
|
|
100
|
+
iconFillSize: '32',
|
|
119
101
|
},
|
|
120
102
|
size144: {
|
|
121
103
|
size: '144',
|
|
122
|
-
textSize: '
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
iconBeforeFillSize: '40',
|
|
126
|
-
iconBeforeSize: '40',
|
|
127
|
-
badgeAppearanceSize: 'sizeXXL'
|
|
104
|
+
textSize: 'xxl',
|
|
105
|
+
badgeAppearanceSize: 'sizeXXL',
|
|
106
|
+
iconFillSize: '40',
|
|
128
107
|
},
|
|
129
108
|
size240: {
|
|
130
109
|
size: '240',
|
|
131
|
-
textSize: '
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
iconBeforeFillSize: '40',
|
|
135
|
-
iconBeforeSize: '40',
|
|
136
|
-
badgeAppearanceSize: 'sizeXXL'
|
|
110
|
+
textSize: 'xxl',
|
|
111
|
+
badgeAppearanceSize: 'sizeXXL',
|
|
112
|
+
iconFillSize: '40',
|
|
137
113
|
},
|
|
138
114
|
};
|
|
139
115
|
|
|
@@ -162,7 +138,7 @@ var avatarConfig = {
|
|
|
162
138
|
},
|
|
163
139
|
};
|
|
164
140
|
function Avatar(props) {
|
|
165
|
-
var className = props.className,
|
|
141
|
+
var className = props.className, appearance = props.appearance, src = props.src, _a = props.firstName, firstName = _a === void 0 ? '' : _a, _b = props.secondName, secondName = _b === void 0 ? '' : _b, count = props.count, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick;
|
|
166
142
|
var avatarChars = useMemo(function () {
|
|
167
143
|
var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
|
|
168
144
|
var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
|
|
@@ -171,7 +147,7 @@ function Avatar(props) {
|
|
|
171
147
|
var appearanceConfig = useAppearanceConfig(appearance, avatarConfig);
|
|
172
148
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
173
149
|
var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, badge = propsGenerator.badge, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, placeholderUrl = propsGenerator.placeholderUrl, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
174
|
-
return (jsx("div", { className: clsx(className, 'avatar', size && "avatar_size_".concat(sizeClass),
|
|
150
|
+
return (jsx("div", { className: clsx(className, 'avatar', size && "avatar_size_".concat(sizeClass), (badgeValue || badgeAppearance || badgeSize) && 'avatar_status', isSkeleton && "avatar_skeleton", onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: clsx('avatar__image', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), src: src, placeholderUrl: placeholderUrl })) : (jsx(Text, { className: "avatar__text", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars || count })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (badge || badgeValue) && (jsx(Badge, { className: "avatar__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), after] }) }));
|
|
175
151
|
}
|
|
176
152
|
|
|
177
153
|
export { Avatar as A, avatarConfig as a, avatarAppearance as b };
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
-
var Icon = require('./
|
|
6
|
+
var Icon = require('./Icon_cjs_ZerVip3X.js');
|
|
7
7
|
var Link = require('./Link_cjs_BqT6eVl6.js');
|
|
8
|
-
var Loader = require('./
|
|
9
|
-
var Text = require('./
|
|
8
|
+
var Loader = require('./Loader_cjs_c6yF7akz.js');
|
|
9
|
+
var Text = require('./Text_cjs_DpRclhwc.js');
|
|
10
10
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
11
11
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
12
12
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
@@ -449,7 +449,7 @@ var buttonConfig = {
|
|
|
449
449
|
},
|
|
450
450
|
};
|
|
451
451
|
var Button = React.forwardRef(function Button(props, ref) {
|
|
452
|
-
var
|
|
452
|
+
var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, Badge = props.Badge, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, link = props.link, rel = props.rel, target = props.target, before = props.before, after = props.after, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
|
|
453
453
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, buttonConfig);
|
|
454
454
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
455
455
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextTruncate = propsGenerator.labelTextTruncate, labelTextWeight = propsGenerator.labelTextWeight, labelTextWidth = propsGenerator.labelTextWidth, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, icon = propsGenerator.icon, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, loaderAppearance = propsGenerator.loaderAppearance, loaderFill = propsGenerator.loaderFill, loaderItemFill = propsGenerator.loaderItemFill, loaderShapeClass = propsGenerator.loaderShapeClass, loaderSize = propsGenerator.loaderSize, _c = propsGenerator.loaderType, loaderType = _c === void 0 ? 'simple' : _c, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
|
|
@@ -462,13 +462,13 @@ var Button = React.forwardRef(function Button(props, ref) {
|
|
|
462
462
|
iconBefore ||
|
|
463
463
|
iconBeforeSrc ||
|
|
464
464
|
iconSrc;
|
|
465
|
-
return (jsxRuntime.jsx(Link.LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
|
|
465
|
+
return (jsxRuntime.jsx(Link.LinkWrapper, { dataTestId: dataTestId && "".concat(dataTestId, "Button"), dataTour: dataTour, className: clsx(className, 'button', label && buttonTypeClass
|
|
466
466
|
? 'button_type_default'
|
|
467
467
|
: label
|
|
468
468
|
? 'buttom_type_label'
|
|
469
469
|
: buttonTypeClass
|
|
470
470
|
? 'button_type_icon'
|
|
471
|
-
: '', borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled,
|
|
471
|
+
: '', borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { className: clsx(className, 'button__loader', loaderShapeClass), type: loaderType, appearance: loaderAppearance, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", size: iconSize, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
|
|
472
472
|
});
|
|
473
473
|
|
|
474
474
|
exports.Button = Button;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { I as Icon } from './
|
|
4
|
+
import { I as Icon } from './Icon_es_C76te22j.js';
|
|
5
5
|
import { a as LinkWrapper } from './Link_es_BnUIX0QT.js';
|
|
6
|
-
import { L as Loader } from './
|
|
7
|
-
import { T as Text } from './
|
|
6
|
+
import { L as Loader } from './Loader_es_C8ETXkiZ.js';
|
|
7
|
+
import { T as Text } from './Text_es_CtCwsa3V.js';
|
|
8
8
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
9
9
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
10
10
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
@@ -447,7 +447,7 @@ var buttonConfig = {
|
|
|
447
447
|
},
|
|
448
448
|
};
|
|
449
449
|
var Button = React.forwardRef(function Button(props, ref) {
|
|
450
|
-
var
|
|
450
|
+
var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, label = props.label, isDisabled = props.isDisabled, Badge = props.Badge, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, link = props.link, rel = props.rel, target = props.target, before = props.before, after = props.after, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
|
|
451
451
|
var appearanceConfig = useAppearanceConfig(appearance, buttonConfig);
|
|
452
452
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
453
453
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextTruncate = propsGenerator.labelTextTruncate, labelTextWeight = propsGenerator.labelTextWeight, labelTextWidth = propsGenerator.labelTextWidth, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, icon = propsGenerator.icon, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, loaderAppearance = propsGenerator.loaderAppearance, loaderFill = propsGenerator.loaderFill, loaderItemFill = propsGenerator.loaderItemFill, loaderShapeClass = propsGenerator.loaderShapeClass, loaderSize = propsGenerator.loaderSize, _c = propsGenerator.loaderType, loaderType = _c === void 0 ? 'simple' : _c, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
|
|
@@ -460,13 +460,13 @@ var Button = React.forwardRef(function Button(props, ref) {
|
|
|
460
460
|
iconBefore ||
|
|
461
461
|
iconBeforeSrc ||
|
|
462
462
|
iconSrc;
|
|
463
|
-
return (jsx(LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
|
|
463
|
+
return (jsx(LinkWrapper, { dataTestId: dataTestId && "".concat(dataTestId, "Button"), dataTour: dataTour, className: clsx(className, 'button', label && buttonTypeClass
|
|
464
464
|
? 'button_type_default'
|
|
465
465
|
: label
|
|
466
466
|
? 'buttom_type_label'
|
|
467
467
|
: buttonTypeClass
|
|
468
468
|
? 'button_type_icon'
|
|
469
|
-
: '', borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled,
|
|
469
|
+
: '', borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), sizeClass && "button_size_".concat(sizeClass), widthClass && "button_width_".concat(widthClass), elevationClass && "elevation_".concat(elevationClass), onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', isLoading && 'button_state_loading', isSkeleton && "button_skeleton"), type: htmlType, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { className: clsx(className, 'button__loader', loaderShapeClass), type: loaderType, appearance: loaderAppearance, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", size: iconSize, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
|
|
470
470
|
});
|
|
471
471
|
|
|
472
472
|
export { Button as B, buttonAppearance as a, buttonConfig as b };
|
|
@@ -5,8 +5,8 @@ var clsx = require('clsx');
|
|
|
5
5
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
6
6
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('./
|
|
9
|
-
var Text = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_ZerVip3X.js');
|
|
9
|
+
var Text = require('./Text_cjs_DpRclhwc.js');
|
|
10
10
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
11
11
|
|
|
12
12
|
var chipsAppearanceAccent = {
|
|
@@ -3,8 +3,8 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
4
4
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
7
|
-
import { T as Text } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_C76te22j.js';
|
|
7
|
+
import { T as Text } from './Text_es_CtCwsa3V.js';
|
|
8
8
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
9
9
|
|
|
10
10
|
var chipsAppearanceAccent = {
|
|
@@ -9,11 +9,11 @@ var DatePicker = require('react-datepicker');
|
|
|
9
9
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
12
|
-
var Button = require('./
|
|
13
|
-
var Icon = require('./
|
|
12
|
+
var Button = require('./Button_cjs_mau_55Fl.js');
|
|
13
|
+
var Icon = require('./Icon_cjs_ZerVip3X.js');
|
|
14
14
|
var Input = require('./Input_cjs_CFy0tfAO.js');
|
|
15
|
-
var Label = require('./
|
|
16
|
-
var Text = require('./
|
|
15
|
+
var Label = require('./Label_cjs_CaTh_laL.js');
|
|
16
|
+
var Text = require('./Text_cjs_DpRclhwc.js');
|
|
17
17
|
var _default = require('@itcase/icons/default');
|
|
18
18
|
|
|
19
19
|
var datePickerSize = {
|
|
@@ -7,11 +7,11 @@ import DatePicker from 'react-datepicker';
|
|
|
7
7
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
10
|
-
import { B as Button } from './
|
|
11
|
-
import { I as Icon } from './
|
|
10
|
+
import { B as Button } from './Button_es_D_IlkeBp.js';
|
|
11
|
+
import { I as Icon } from './Icon_es_C76te22j.js';
|
|
12
12
|
import { I as Input } from './Input_es_l3ry6luZ.js';
|
|
13
|
-
import { L as Label } from './
|
|
14
|
-
import { T as Text } from './
|
|
13
|
+
import { L as Label } from './Label_es_CoIII7Ty.js';
|
|
14
|
+
import { T as Text } from './Text_es_CtCwsa3V.js';
|
|
15
15
|
import { icons14 } from '@itcase/icons/default';
|
|
16
16
|
|
|
17
17
|
var datePickerSize = {
|
|
@@ -5,10 +5,10 @@ var React = require('react');
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
8
|
-
var Icon = require('./
|
|
8
|
+
var Icon = require('./Icon_cjs_ZerVip3X.js');
|
|
9
9
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var Divider = require('./Divider_cjs_DUYtmwn2.js');
|
|
11
|
-
var Text = require('./
|
|
11
|
+
var Text = require('./Text_cjs_DpRclhwc.js');
|
|
12
12
|
var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
|
|
13
13
|
|
|
14
14
|
function Dropdown(props) {
|
|
@@ -3,10 +3,10 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
6
|
-
import { I as Icon, B as Badge } from './
|
|
6
|
+
import { I as Icon, B as Badge } from './Icon_es_C76te22j.js';
|
|
7
7
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { D as Divider } from './Divider_es_CCLBFIx6.js';
|
|
9
|
-
import { T as Text } from './
|
|
9
|
+
import { T as Text } from './Text_es_CtCwsa3V.js';
|
|
10
10
|
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
11
11
|
|
|
12
12
|
function Dropdown(props) {
|