@itcase/ui 1.8.3 → 1.8.5
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/{Input_cjs_DkQh0Utd.js → Input_cjs_C8RWS1SD.js} +134 -38
- package/dist/Input_es_FXxp51gq.js +195 -0
- package/dist/cjs/components/Chips.js +3 -3
- package/dist/cjs/components/Choice.js +1 -1
- package/dist/cjs/components/DadataHintField.js +1 -1
- package/dist/cjs/components/DatePicker.js +11 -11
- package/dist/cjs/components/Input.js +1 -2
- package/dist/components/Chips.js +3 -3
- package/dist/components/Choice.js +1 -1
- package/dist/components/DadataHintField.js +1 -1
- package/dist/components/DatePicker.js +11 -11
- package/dist/components/Input.js +1 -1
- package/dist/css/components/Avatar/Avatar.css +4 -4
- package/dist/css/components/CookiesWarning/CookiesWarning.css +1 -1
- package/dist/css/components/DatePicker/DatePicker.css +3 -3
- package/dist/css/components/Icon/Icon.css +1 -1
- package/dist/css/components/Input/Input.css +7 -1
- package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css +2 -5
- package/dist/css/components/Notification/Notification.css +1 -1
- package/dist/css/components/Notification/css/__item/notification__item_set_toast.css +1 -1
- package/dist/css/components/Pagination/Pagination.css +3 -3
- package/dist/css/components/RangeSlider/RangeSlider.css +1 -1
- package/dist/css/components/Select/Select.css +11 -5
- package/dist/css/components/Select/css/__control/select__control_fill.css +1 -1
- package/dist/css/components/Select/css/__menu/select__menu.css +1 -1
- package/dist/css/components/Tooltip/Tooltip.css +1 -1
- package/dist/css/styles/hover/hover-fill-color.css +6 -4
- package/dist/css/styles/hover/hover-item-color.css +6 -4
- package/dist/css/styles/hover/hover-text-color.css +6 -4
- package/dist/types/components/DatePicker/DatePicker.appearance.d.ts +0 -9
- package/dist/types/components/DatePicker/appearance/datePickerSize.d.ts +0 -9
- package/dist/types/components/Input/Input.appearance.d.ts +1 -2
- package/dist/types/components/Input/Input.interface.d.ts +1 -2
- package/dist/types/components/Input/appearance/inputDefault.d.ts +24 -0
- package/dist/types/components/Input/appearance/inputDisabled.d.ts +20 -0
- package/dist/types/components/Input/appearance/inputError.d.ts +20 -0
- package/dist/types/components/Input/appearance/inputRequire.d.ts +20 -0
- package/dist/types/components/Input/appearance/inputSize.d.ts +31 -0
- package/dist/types/components/Input/appearance/inputStyle.d.ts +14 -0
- package/dist/types/components/Input/appearance/inputSuccess.d.ts +20 -0
- package/dist/types/components/Input/index.d.ts +1 -1
- package/package.json +1 -1
- package/dist/Input_es_Bs0gEq3L.js +0 -98
|
@@ -6,64 +6,161 @@ var React = require('react');
|
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
8
|
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
var inputAppearanceDefault = {
|
|
10
|
+
defaultPrimary: {
|
|
11
|
+
fill: 'surfaceSecondary',
|
|
12
12
|
borderColor: 'surfaceBorderTertiary',
|
|
13
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
14
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
15
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
13
16
|
textColor: 'surfaceTextPrimary',
|
|
14
|
-
|
|
17
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
18
|
+
caret: 'secondaryItemSecondary',
|
|
19
|
+
},
|
|
20
|
+
defaultSecondary: {
|
|
21
|
+
fill: 'surfacePrimary',
|
|
22
|
+
borderColor: 'surfaceBorderTertiary',
|
|
23
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
24
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
25
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
15
26
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
16
|
-
|
|
27
|
+
textColor: 'surfaceTextPrimary',
|
|
28
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
29
|
+
caret: 'secondaryItemSecondary',
|
|
17
30
|
},
|
|
18
31
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
|
|
33
|
+
var inputAppearanceDisabled = {
|
|
34
|
+
disabledPrimary: {
|
|
35
|
+
fill: 'surfaceFillDisabled',
|
|
36
|
+
borderColor: 'errorBorderQuaternary',
|
|
37
|
+
borderHover: 'errorBorderQuaternary',
|
|
38
|
+
textColor: 'surfaceTextQuaternary',
|
|
39
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
40
|
+
iconClearFill: 'errorItemPrimary',
|
|
41
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
42
|
+
},
|
|
43
|
+
disabledSecondary: {
|
|
44
|
+
fill: 'surfaceSecondary',
|
|
45
|
+
borderColor: 'surfaceBorderTertiary',
|
|
46
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
47
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
48
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
49
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
23
50
|
},
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
var inputAppearanceError = {
|
|
54
|
+
errorPrimary: {
|
|
55
|
+
fill: 'errorTertiary',
|
|
56
|
+
borderColor: 'errorBorderQuaternary',
|
|
57
|
+
borderHover: 'errorBorderQuaternary',
|
|
27
58
|
textColor: 'surfaceTextPrimary',
|
|
28
|
-
|
|
59
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
60
|
+
iconClearFill: 'errorItemPrimary',
|
|
61
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
29
62
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
63
|
+
errorSecondary: {
|
|
64
|
+
fill: 'errorSecondary',
|
|
65
|
+
borderColor: 'errorBorderTertiary',
|
|
66
|
+
borderHover: 'errorBorderQuaternary',
|
|
67
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
68
|
+
iconClearFill: 'errorItemPrimary',
|
|
69
|
+
placeholderTextColor: 'errorTextSecondary',
|
|
33
70
|
},
|
|
34
|
-
|
|
35
|
-
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
var inputAppearanceRequire = {
|
|
74
|
+
requirePrimary: {
|
|
75
|
+
fill: 'warningTertiary',
|
|
76
|
+
borderColor: 'warningBorderQuaternary',
|
|
77
|
+
borderHover: 'warningBorderQuaternary',
|
|
36
78
|
textColor: 'surfaceTextPrimary',
|
|
79
|
+
iconBeforeFill: 'warningItemQuaternary',
|
|
80
|
+
iconClearFill: 'warningItemPrimary',
|
|
81
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
37
82
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
83
|
+
requireSecondary: {
|
|
84
|
+
fill: 'surfaceSecondary',
|
|
85
|
+
borderColor: 'surfaceBorderTertiary',
|
|
86
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
87
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
88
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
89
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
var inputAppearanceSize = {
|
|
94
|
+
sizeXXL: {
|
|
95
|
+
size: 'xxl',
|
|
96
|
+
textSize: 'l',
|
|
41
97
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
98
|
+
sizeXL: {
|
|
99
|
+
size: 'xl',
|
|
100
|
+
textSize: 's',
|
|
45
101
|
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
102
|
+
sizeL: {
|
|
103
|
+
size: 'l',
|
|
104
|
+
textSize: 's',
|
|
49
105
|
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
106
|
+
sizeM: {
|
|
107
|
+
size: 'm',
|
|
108
|
+
textSize: 'm',
|
|
53
109
|
},
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
110
|
+
sizeS: {
|
|
111
|
+
size: 's',
|
|
112
|
+
textSize: 's',
|
|
113
|
+
},
|
|
114
|
+
sizeXS: {
|
|
115
|
+
size: 'xs',
|
|
116
|
+
textSize: 's',
|
|
117
|
+
},
|
|
118
|
+
sizeXXS: {
|
|
119
|
+
size: 'xxs',
|
|
120
|
+
textSize: 's',
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
var inputAppearanceStyle = {
|
|
125
|
+
full: {
|
|
126
|
+
/* border / fill */
|
|
57
127
|
},
|
|
58
|
-
|
|
59
|
-
|
|
128
|
+
ghost: {
|
|
129
|
+
fill: 'none',
|
|
130
|
+
borderWidth: '0',
|
|
131
|
+
},
|
|
132
|
+
outlined: {
|
|
133
|
+
fill: 'none',
|
|
134
|
+
},
|
|
135
|
+
solid: {
|
|
136
|
+
borderWidth: '0',
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
var inputAppearanceSuccess = {
|
|
141
|
+
successPrimary: {
|
|
142
|
+
fill: 'successTertiary',
|
|
143
|
+
borderColor: 'successBorderQuaternary',
|
|
144
|
+
borderHover: 'successBorderQuaternary',
|
|
60
145
|
textColor: 'surfaceTextPrimary',
|
|
146
|
+
iconBeforeFill: 'successItemQuaternary',
|
|
147
|
+
iconClearFill: 'successItemPrimary',
|
|
148
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
149
|
+
},
|
|
150
|
+
successSecondary: {
|
|
151
|
+
fill: 'surfaceSecondary',
|
|
152
|
+
borderColor: 'surfaceBorderTertiary',
|
|
153
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
154
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
155
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
156
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
61
157
|
},
|
|
62
158
|
};
|
|
63
159
|
|
|
160
|
+
var inputAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
161
|
+
|
|
64
162
|
var inputConfig = {
|
|
65
163
|
appearance: inputAppearance,
|
|
66
|
-
state: inputState,
|
|
67
164
|
setAppearance: function (appearanceConfig) {
|
|
68
165
|
inputConfig.appearance = appearanceConfig;
|
|
69
166
|
},
|
|
@@ -80,7 +177,7 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
80
177
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
81
178
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
82
179
|
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
83
|
-
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass),
|
|
180
|
+
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
84
181
|
? fillClass && "fill_".concat(fillClass)
|
|
85
182
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
86
183
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
@@ -100,4 +197,3 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
100
197
|
exports.Input = Input;
|
|
101
198
|
exports.inputAppearance = inputAppearance;
|
|
102
199
|
exports.inputConfig = inputConfig;
|
|
103
|
-
exports.inputState = inputState;
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
+
|
|
7
|
+
var inputAppearanceDefault = {
|
|
8
|
+
defaultPrimary: {
|
|
9
|
+
fill: 'surfaceSecondary',
|
|
10
|
+
borderColor: 'surfaceBorderTertiary',
|
|
11
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
12
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
13
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
14
|
+
textColor: 'surfaceTextPrimary',
|
|
15
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
16
|
+
caret: 'secondaryItemSecondary',
|
|
17
|
+
},
|
|
18
|
+
defaultSecondary: {
|
|
19
|
+
fill: 'surfacePrimary',
|
|
20
|
+
borderColor: 'surfaceBorderTertiary',
|
|
21
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
22
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
23
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
24
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
25
|
+
textColor: 'surfaceTextPrimary',
|
|
26
|
+
textColorDisabled: 'surfaceTextDisabled',
|
|
27
|
+
caret: 'secondaryItemSecondary',
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
var inputAppearanceDisabled = {
|
|
32
|
+
disabledPrimary: {
|
|
33
|
+
fill: 'surfaceFillDisabled',
|
|
34
|
+
borderColor: 'errorBorderQuaternary',
|
|
35
|
+
borderHover: 'errorBorderQuaternary',
|
|
36
|
+
textColor: 'surfaceTextQuaternary',
|
|
37
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
38
|
+
iconClearFill: 'errorItemPrimary',
|
|
39
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
40
|
+
},
|
|
41
|
+
disabledSecondary: {
|
|
42
|
+
fill: 'surfaceSecondary',
|
|
43
|
+
borderColor: 'surfaceBorderTertiary',
|
|
44
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
45
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
46
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
47
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
var inputAppearanceError = {
|
|
52
|
+
errorPrimary: {
|
|
53
|
+
fill: 'errorTertiary',
|
|
54
|
+
borderColor: 'errorBorderQuaternary',
|
|
55
|
+
borderHover: 'errorBorderQuaternary',
|
|
56
|
+
textColor: 'surfaceTextPrimary',
|
|
57
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
58
|
+
iconClearFill: 'errorItemPrimary',
|
|
59
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
60
|
+
},
|
|
61
|
+
errorSecondary: {
|
|
62
|
+
fill: 'errorSecondary',
|
|
63
|
+
borderColor: 'errorBorderTertiary',
|
|
64
|
+
borderHover: 'errorBorderQuaternary',
|
|
65
|
+
iconBeforeFill: 'errorItemQuaternary',
|
|
66
|
+
iconClearFill: 'errorItemPrimary',
|
|
67
|
+
placeholderTextColor: 'errorTextSecondary',
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var inputAppearanceRequire = {
|
|
72
|
+
requirePrimary: {
|
|
73
|
+
fill: 'warningTertiary',
|
|
74
|
+
borderColor: 'warningBorderQuaternary',
|
|
75
|
+
borderHover: 'warningBorderQuaternary',
|
|
76
|
+
textColor: 'surfaceTextPrimary',
|
|
77
|
+
iconBeforeFill: 'warningItemQuaternary',
|
|
78
|
+
iconClearFill: 'warningItemPrimary',
|
|
79
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
80
|
+
},
|
|
81
|
+
requireSecondary: {
|
|
82
|
+
fill: 'surfaceSecondary',
|
|
83
|
+
borderColor: 'surfaceBorderTertiary',
|
|
84
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
85
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
86
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
87
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
var inputAppearanceSize = {
|
|
92
|
+
sizeXXL: {
|
|
93
|
+
size: 'xxl',
|
|
94
|
+
textSize: 'l',
|
|
95
|
+
},
|
|
96
|
+
sizeXL: {
|
|
97
|
+
size: 'xl',
|
|
98
|
+
textSize: 's',
|
|
99
|
+
},
|
|
100
|
+
sizeL: {
|
|
101
|
+
size: 'l',
|
|
102
|
+
textSize: 's',
|
|
103
|
+
},
|
|
104
|
+
sizeM: {
|
|
105
|
+
size: 'm',
|
|
106
|
+
textSize: 'm',
|
|
107
|
+
},
|
|
108
|
+
sizeS: {
|
|
109
|
+
size: 's',
|
|
110
|
+
textSize: 's',
|
|
111
|
+
},
|
|
112
|
+
sizeXS: {
|
|
113
|
+
size: 'xs',
|
|
114
|
+
textSize: 's',
|
|
115
|
+
},
|
|
116
|
+
sizeXXS: {
|
|
117
|
+
size: 'xxs',
|
|
118
|
+
textSize: 's',
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
var inputAppearanceStyle = {
|
|
123
|
+
full: {
|
|
124
|
+
/* border / fill */
|
|
125
|
+
},
|
|
126
|
+
ghost: {
|
|
127
|
+
fill: 'none',
|
|
128
|
+
borderWidth: '0',
|
|
129
|
+
},
|
|
130
|
+
outlined: {
|
|
131
|
+
fill: 'none',
|
|
132
|
+
},
|
|
133
|
+
solid: {
|
|
134
|
+
borderWidth: '0',
|
|
135
|
+
},
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
var inputAppearanceSuccess = {
|
|
139
|
+
successPrimary: {
|
|
140
|
+
fill: 'successTertiary',
|
|
141
|
+
borderColor: 'successBorderQuaternary',
|
|
142
|
+
borderHover: 'successBorderQuaternary',
|
|
143
|
+
textColor: 'surfaceTextPrimary',
|
|
144
|
+
iconBeforeFill: 'successItemQuaternary',
|
|
145
|
+
iconClearFill: 'successItemPrimary',
|
|
146
|
+
placeholderTextColor: 'surfaceTextQuaternary',
|
|
147
|
+
},
|
|
148
|
+
successSecondary: {
|
|
149
|
+
fill: 'surfaceSecondary',
|
|
150
|
+
borderColor: 'surfaceBorderTertiary',
|
|
151
|
+
borderHover: 'surfaceBorderQuaternary',
|
|
152
|
+
iconBeforeFill: 'surfaceItemQuaternary',
|
|
153
|
+
iconClearFill: 'surfaceItemPrimary',
|
|
154
|
+
placeholderTextColor: 'surfaceTextSecondary',
|
|
155
|
+
},
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
var inputAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, inputAppearanceDefault), inputAppearanceError), inputAppearanceSuccess), inputAppearanceRequire), inputAppearanceDisabled), inputAppearanceSize), inputAppearanceStyle);
|
|
159
|
+
|
|
160
|
+
var inputConfig = {
|
|
161
|
+
appearance: inputAppearance,
|
|
162
|
+
setAppearance: function (appearanceConfig) {
|
|
163
|
+
inputConfig.appearance = appearanceConfig;
|
|
164
|
+
},
|
|
165
|
+
setState: function (newComponent) {
|
|
166
|
+
inputConfig.state = newComponent;
|
|
167
|
+
},
|
|
168
|
+
};
|
|
169
|
+
var Input = React.forwardRef(function Input(props, ref) {
|
|
170
|
+
var id = props.id, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, dataTestId = props.dataTestId, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
|
|
171
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
172
|
+
var _a;
|
|
173
|
+
return (__assign(__assign({}, resultConfig), (_a = inputConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
174
|
+
}, {});
|
|
175
|
+
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
176
|
+
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
177
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
178
|
+
return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
179
|
+
? fillClass && "fill_".concat(fillClass)
|
|
180
|
+
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
181
|
+
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
182
|
+
: borderWidthDisabledClass &&
|
|
183
|
+
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, !isDisabled
|
|
184
|
+
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
185
|
+
: borderColorDisabledClass &&
|
|
186
|
+
"border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
|
|
187
|
+
? placeholderTextColorClass &&
|
|
188
|
+
"placeholder-text-color_".concat(placeholderTextColorClass)
|
|
189
|
+
: placeholderTextColorDisabledClass &&
|
|
190
|
+
"placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
|
|
191
|
+
? textColorClass && "text-color_".concat(textColorClass)
|
|
192
|
+
: textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, ref: ref, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
export { Input as I, inputAppearance as a, inputConfig as i };
|
|
@@ -79,7 +79,7 @@ var chipsAppearanceSurface = {
|
|
|
79
79
|
fill: 'surfacePrimary',
|
|
80
80
|
fillActive: 'accentPrimary',
|
|
81
81
|
fillActiveHover: 'accentSecondary',
|
|
82
|
-
fillHover: '
|
|
82
|
+
fillHover: 'surfaceHover',
|
|
83
83
|
labelTextActiveColor: 'accentTextPrimary',
|
|
84
84
|
labelTextColor: 'surfaceTextPrimary',
|
|
85
85
|
labelTextHoverColor: 'surfaceTextPrimary',
|
|
@@ -87,13 +87,13 @@ var chipsAppearanceSurface = {
|
|
|
87
87
|
},
|
|
88
88
|
surfaceSecondary: {
|
|
89
89
|
fill: 'surfaceSecondary',
|
|
90
|
-
fillHover: '
|
|
90
|
+
fillHover: 'surfaceHover',
|
|
91
91
|
labelTextColor: 'surfaceTextPrimary',
|
|
92
92
|
borderColor: 'surfaceBorderSecondary',
|
|
93
93
|
},
|
|
94
94
|
surfaceTertiary: {
|
|
95
95
|
fill: 'surfaceTertiary',
|
|
96
|
-
fillHover: '
|
|
96
|
+
fillHover: 'surfaceHover',
|
|
97
97
|
labelTextColor: 'surfaceTextPrimary',
|
|
98
98
|
borderColor: 'surfaceBorderTertiary',
|
|
99
99
|
},
|
|
@@ -72,7 +72,7 @@ var choiceAppearanceStyle = {
|
|
|
72
72
|
|
|
73
73
|
var choiceAppearanceSurface = {
|
|
74
74
|
surfacePrimary: {
|
|
75
|
-
fill: '
|
|
75
|
+
fill: 'surfacePrimary',
|
|
76
76
|
fillItem: 'surfaceItemInverse',
|
|
77
77
|
fillItemActive: 'surfaceItemSecondary',
|
|
78
78
|
fillItemActiveHover: 'surfaceItemTertiary',
|
|
@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var reactDadata = require('react-dadata');
|
|
8
|
-
var Input = require('../../
|
|
8
|
+
var Input = require('../../Input_cjs_C8RWS1SD.js');
|
|
9
9
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
require('lodash/camelCase');
|
|
11
11
|
require('lodash/castArray');
|
|
@@ -10,10 +10,9 @@ var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevic
|
|
|
10
10
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
11
11
|
var Button = require('../../Button_cjs_B7OmqizJ.js');
|
|
12
12
|
var Icon = require('../../Icon_cjs_DSzfNqif.js');
|
|
13
|
-
var Input = require('../../
|
|
13
|
+
var Input = require('../../Input_cjs_C8RWS1SD.js');
|
|
14
14
|
var Label = require('../../Label_cjs_BCjB-mxC.js');
|
|
15
15
|
var Text = require('../../Text_cjs_D4xG0cKD.js');
|
|
16
|
-
var _default = require('@itcase/icons/default');
|
|
17
16
|
require('lodash/camelCase');
|
|
18
17
|
require('lodash/castArray');
|
|
19
18
|
require('lodash/upperFirst');
|
|
@@ -32,19 +31,20 @@ require('react-inlinesvg');
|
|
|
32
31
|
require('../../Tooltip_cjs_CTwksdFk.js');
|
|
33
32
|
require('../../Title_cjs_iuyln-ab.js');
|
|
34
33
|
|
|
34
|
+
// import { icon14, icon16 } from '@itcase/icons/default'
|
|
35
35
|
var datePickerSize = {
|
|
36
36
|
sizeS: {
|
|
37
37
|
datePickerProps: {
|
|
38
38
|
daySize: 'xs',
|
|
39
39
|
dayTextSize: 'm',
|
|
40
40
|
iconFillSize: 24,
|
|
41
|
-
iconLeft:
|
|
42
|
-
iconRight:
|
|
41
|
+
// iconLeft: icon14.ChevronLeft,
|
|
42
|
+
// iconRight: icon14.ChevronRight,
|
|
43
43
|
},
|
|
44
44
|
inputProps: {
|
|
45
45
|
size: 's',
|
|
46
46
|
textSize: 's',
|
|
47
|
-
clearIcon:
|
|
47
|
+
// clearIcon: icon14.Clear,
|
|
48
48
|
clearIconSize: 16,
|
|
49
49
|
clearLabelTextSize: 'm',
|
|
50
50
|
},
|
|
@@ -54,13 +54,13 @@ var datePickerSize = {
|
|
|
54
54
|
daySize: 'xs',
|
|
55
55
|
dayTextSize: 'm',
|
|
56
56
|
iconFillSize: 24,
|
|
57
|
-
iconLeft:
|
|
58
|
-
iconRight:
|
|
57
|
+
// iconLeft: icon14.ChevronLeft,
|
|
58
|
+
// iconRight: icon14.ChevronRight,
|
|
59
59
|
},
|
|
60
60
|
inputProps: {
|
|
61
61
|
size: 'm',
|
|
62
62
|
textSize: 'm',
|
|
63
|
-
clearIcon:
|
|
63
|
+
// clearIcon: icon14.Clear,
|
|
64
64
|
clearIconSize: 16,
|
|
65
65
|
clearLabelTextSize: 'm',
|
|
66
66
|
},
|
|
@@ -70,13 +70,13 @@ var datePickerSize = {
|
|
|
70
70
|
daySize: 'xs',
|
|
71
71
|
dayTextSize: 'm',
|
|
72
72
|
iconFillSize: 24,
|
|
73
|
-
iconLeft:
|
|
74
|
-
iconRight:
|
|
73
|
+
// iconLeft: icon14.ChevronLeft,
|
|
74
|
+
// iconRight: icon14.ChevronRight,
|
|
75
75
|
},
|
|
76
76
|
inputProps: {
|
|
77
77
|
size: 'l',
|
|
78
78
|
textSize: 'l',
|
|
79
|
-
clearIcon:
|
|
79
|
+
// clearIcon: icon14.Clear,
|
|
80
80
|
clearIconSize: 16,
|
|
81
81
|
clearLabelTextSize: 'm',
|
|
82
82
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Input = require('../../
|
|
3
|
+
var Input = require('../../Input_cjs_C8RWS1SD.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -22,4 +22,3 @@ require('../utils/setViewportProperty.js');
|
|
|
22
22
|
exports.Input = Input.Input;
|
|
23
23
|
exports.inputAppearance = Input.inputAppearance;
|
|
24
24
|
exports.inputConfig = Input.inputConfig;
|
|
25
|
-
exports.inputState = Input.inputState;
|
package/dist/components/Chips.js
CHANGED
|
@@ -77,7 +77,7 @@ var chipsAppearanceSurface = {
|
|
|
77
77
|
fill: 'surfacePrimary',
|
|
78
78
|
fillActive: 'accentPrimary',
|
|
79
79
|
fillActiveHover: 'accentSecondary',
|
|
80
|
-
fillHover: '
|
|
80
|
+
fillHover: 'surfaceHover',
|
|
81
81
|
labelTextActiveColor: 'accentTextPrimary',
|
|
82
82
|
labelTextColor: 'surfaceTextPrimary',
|
|
83
83
|
labelTextHoverColor: 'surfaceTextPrimary',
|
|
@@ -85,13 +85,13 @@ var chipsAppearanceSurface = {
|
|
|
85
85
|
},
|
|
86
86
|
surfaceSecondary: {
|
|
87
87
|
fill: 'surfaceSecondary',
|
|
88
|
-
fillHover: '
|
|
88
|
+
fillHover: 'surfaceHover',
|
|
89
89
|
labelTextColor: 'surfaceTextPrimary',
|
|
90
90
|
borderColor: 'surfaceBorderSecondary',
|
|
91
91
|
},
|
|
92
92
|
surfaceTertiary: {
|
|
93
93
|
fill: 'surfaceTertiary',
|
|
94
|
-
fillHover: '
|
|
94
|
+
fillHover: 'surfaceHover',
|
|
95
95
|
labelTextColor: 'surfaceTextPrimary',
|
|
96
96
|
borderColor: 'surfaceBorderTertiary',
|
|
97
97
|
},
|
|
@@ -70,7 +70,7 @@ var choiceAppearanceStyle = {
|
|
|
70
70
|
|
|
71
71
|
var choiceAppearanceSurface = {
|
|
72
72
|
surfacePrimary: {
|
|
73
|
-
fill: '
|
|
73
|
+
fill: 'surfacePrimary',
|
|
74
74
|
fillItem: 'surfaceItemInverse',
|
|
75
75
|
fillItemActive: 'surfaceItemSecondary',
|
|
76
76
|
fillItemActiveHover: 'surfaceItemTertiary',
|
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { PartySuggestions } from 'react-dadata';
|
|
6
|
-
import { I as Input } from '../
|
|
6
|
+
import { I as Input } from '../Input_es_FXxp51gq.js';
|
|
7
7
|
import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import 'lodash/camelCase';
|
|
9
9
|
import 'lodash/castArray';
|
|
@@ -8,10 +8,9 @@ import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDev
|
|
|
8
8
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
9
9
|
import { B as Button } from '../Button_es_CBbHMy1v.js';
|
|
10
10
|
import { I as Icon } from '../Icon_es_BBmoZ7_3.js';
|
|
11
|
-
import { I as Input } from '../
|
|
11
|
+
import { I as Input } from '../Input_es_FXxp51gq.js';
|
|
12
12
|
import { L as Label } from '../Label_es_CZpanSdR.js';
|
|
13
13
|
import { T as Text } from '../Text_es_FJGduy7Z.js';
|
|
14
|
-
import { icon14 } from '@itcase/icons/default';
|
|
15
14
|
import 'lodash/camelCase';
|
|
16
15
|
import 'lodash/castArray';
|
|
17
16
|
import 'lodash/upperFirst';
|
|
@@ -30,19 +29,20 @@ import 'react-inlinesvg';
|
|
|
30
29
|
import '../Tooltip_es_H976MIb7.js';
|
|
31
30
|
import '../Title_es_ke3YylFm.js';
|
|
32
31
|
|
|
32
|
+
// import { icon14, icon16 } from '@itcase/icons/default'
|
|
33
33
|
var datePickerSize = {
|
|
34
34
|
sizeS: {
|
|
35
35
|
datePickerProps: {
|
|
36
36
|
daySize: 'xs',
|
|
37
37
|
dayTextSize: 'm',
|
|
38
38
|
iconFillSize: 24,
|
|
39
|
-
iconLeft: icon14.ChevronLeft,
|
|
40
|
-
iconRight: icon14.ChevronRight,
|
|
39
|
+
// iconLeft: icon14.ChevronLeft,
|
|
40
|
+
// iconRight: icon14.ChevronRight,
|
|
41
41
|
},
|
|
42
42
|
inputProps: {
|
|
43
43
|
size: 's',
|
|
44
44
|
textSize: 's',
|
|
45
|
-
clearIcon: icon14.Clear,
|
|
45
|
+
// clearIcon: icon14.Clear,
|
|
46
46
|
clearIconSize: 16,
|
|
47
47
|
clearLabelTextSize: 'm',
|
|
48
48
|
},
|
|
@@ -52,13 +52,13 @@ var datePickerSize = {
|
|
|
52
52
|
daySize: 'xs',
|
|
53
53
|
dayTextSize: 'm',
|
|
54
54
|
iconFillSize: 24,
|
|
55
|
-
iconLeft: icon14.ChevronLeft,
|
|
56
|
-
iconRight: icon14.ChevronRight,
|
|
55
|
+
// iconLeft: icon14.ChevronLeft,
|
|
56
|
+
// iconRight: icon14.ChevronRight,
|
|
57
57
|
},
|
|
58
58
|
inputProps: {
|
|
59
59
|
size: 'm',
|
|
60
60
|
textSize: 'm',
|
|
61
|
-
clearIcon: icon14.Clear,
|
|
61
|
+
// clearIcon: icon14.Clear,
|
|
62
62
|
clearIconSize: 16,
|
|
63
63
|
clearLabelTextSize: 'm',
|
|
64
64
|
},
|
|
@@ -68,13 +68,13 @@ var datePickerSize = {
|
|
|
68
68
|
daySize: 'xs',
|
|
69
69
|
dayTextSize: 'm',
|
|
70
70
|
iconFillSize: 24,
|
|
71
|
-
iconLeft: icon14.ChevronLeft,
|
|
72
|
-
iconRight: icon14.ChevronRight,
|
|
71
|
+
// iconLeft: icon14.ChevronLeft,
|
|
72
|
+
// iconRight: icon14.ChevronRight,
|
|
73
73
|
},
|
|
74
74
|
inputProps: {
|
|
75
75
|
size: 'l',
|
|
76
76
|
textSize: 'l',
|
|
77
|
-
clearIcon: icon14.Clear,
|
|
77
|
+
// clearIcon: icon14.Clear,
|
|
78
78
|
clearIconSize: 16,
|
|
79
79
|
clearLabelTextSize: 'm',
|
|
80
80
|
},
|
package/dist/components/Input.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { I as Input, a as inputAppearance, i as inputConfig
|
|
1
|
+
export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_FXxp51gq.js';
|
|
2
2
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|