@itcase/ui 1.8.32 → 1.8.33
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/{DatePicker_cjs_BYh1Dsto.js → DatePicker_cjs_CJl9V32f.js} +8 -8
- package/dist/{DatePicker_es_DEAcYDTL.js → DatePicker_es_C2Pi6aB-.js} +8 -8
- package/dist/{Input_cjs_BAVggtkk.js → Input_cjs_arr_wxD2.js} +21 -20
- package/dist/{Input_es_CNduH28G.js → Input_es_BW6cZThr.js} +21 -20
- package/dist/cjs/components/Breadcrumbs/stories/__mock__.js +7 -15
- package/dist/cjs/components/Code.js +31 -42
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +2 -2
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/MenuItem.js +3 -1
- package/dist/cjs/components/Pagination.js +89 -17
- package/dist/cjs/components/Search.js +15 -14
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/cjs/components/Tab/stories/__mock__.js +6 -1
- package/dist/cjs/context/Notifications.js +6 -6
- package/dist/components/Breadcrumbs/stories/__mock__.js +7 -15
- package/dist/components/Code.js +31 -42
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +2 -2
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Input.js +1 -1
- package/dist/components/MenuItem.js +3 -1
- package/dist/components/Pagination.js +90 -18
- package/dist/components/Search.js +15 -14
- package/dist/components/Segmented.js +1 -1
- package/dist/components/Tab/stories/__mock__.js +6 -1
- package/dist/context/Notifications.js +6 -6
- package/dist/css/components/Input/Input.css +6 -0
- package/dist/css/components/Search/Search.css +0 -1
- package/dist/css/components/Search/css/search-input/search-input.css +0 -1
- package/dist/css/components/Tab/Tab.css +4 -0
- package/dist/css/styles/border-color/border-color_hover.css +3 -0
- package/dist/types/components/Breadcrumbs/stories/__mock__/index.d.ts +1 -0
- package/dist/types/components/Code/appearance/codeDisabled.d.ts +7 -11
- package/dist/types/components/Code/appearance/codeRequire.d.ts +7 -15
- package/dist/types/components/Code/appearance/codeStyle.d.ts +9 -9
- package/dist/types/components/Code/appearance/codeSuccess.d.ts +8 -7
- package/dist/types/components/DatePicker/DatePicker.appearance.d.ts +1 -1
- package/dist/types/components/DatePicker/appearance/datePickerStyle.d.ts +1 -1
- package/dist/types/components/Input/appearance/inputDefault.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputDisabled.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputError.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputRequire.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputStyle.d.ts +7 -6
- package/dist/types/components/Input/appearance/inputSuccess.d.ts +2 -2
- package/dist/types/components/MenuItem/appearance/menuItemSurface.d.ts +2 -0
- package/dist/types/components/Pagination/appearance/paginationAccent.d.ts +21 -0
- package/dist/types/components/Pagination/appearance/paginationSize.d.ts +45 -0
- package/dist/types/components/Pagination/appearance/paginationStyle.d.ts +14 -0
- package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +4 -12
- package/dist/types/components/Search/appearance/searchDefault.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchDisabled.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchError.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchRequire.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchStyle.d.ts +8 -7
- package/dist/types/components/Search/appearance/searchSuccess.d.ts +1 -1
- package/package.json +2 -2
|
@@ -10,7 +10,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
|
|
|
10
10
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
11
11
|
var Button = require('./Button_cjs_CW6ENTbm.js');
|
|
12
12
|
var Tooltip = require('./Tooltip_cjs_DinScDnC.js');
|
|
13
|
-
var Input = require('./
|
|
13
|
+
var Input = require('./Input_cjs_arr_wxD2.js');
|
|
14
14
|
var Label = require('./Label_cjs_CZMMdwt5.js');
|
|
15
15
|
var Text = require('./Text_cjs_C9fOm0nd.js');
|
|
16
16
|
var _default = require('@itcase/icons/default');
|
|
@@ -21,16 +21,16 @@ var datePickerSize = {
|
|
|
21
21
|
daySize: 'xs',
|
|
22
22
|
dayTextSize: 'm',
|
|
23
23
|
iconFillSize: 24,
|
|
24
|
-
iconLeft: _default.icons14.Arrow.
|
|
25
|
-
iconRight: _default.icons14.Arrow.
|
|
24
|
+
iconLeft: _default.icons14.Arrow.ChevronLeft,
|
|
25
|
+
iconRight: _default.icons14.Arrow.ChevronRight,
|
|
26
26
|
},
|
|
27
27
|
sizeM: {
|
|
28
28
|
size: 'm',
|
|
29
29
|
daySize: 'xxl',
|
|
30
30
|
dayTextSize: 'm',
|
|
31
31
|
iconFillSize: 24,
|
|
32
|
-
iconLeft: _default.icons14.Arrow.
|
|
33
|
-
iconRight: _default.icons14.Arrow.
|
|
32
|
+
iconLeft: _default.icons14.Arrow.ChevronLeft,
|
|
33
|
+
iconRight: _default.icons14.Arrow.ChevronRight,
|
|
34
34
|
iconSize: 14,
|
|
35
35
|
monthTextSize: 'm',
|
|
36
36
|
yearTextSize: 'm',
|
|
@@ -40,8 +40,8 @@ var datePickerSize = {
|
|
|
40
40
|
daySize: 'xs',
|
|
41
41
|
dayTextSize: 'm',
|
|
42
42
|
iconFillSize: 24,
|
|
43
|
-
iconLeft: _default.icons14.Arrow.
|
|
44
|
-
iconRight: _default.icons14.Arrow.
|
|
43
|
+
iconLeft: _default.icons14.Arrow.ChevronLeft,
|
|
44
|
+
iconRight: _default.icons14.Arrow.ChevronRight,
|
|
45
45
|
},
|
|
46
46
|
};
|
|
47
47
|
|
|
@@ -56,13 +56,13 @@ var datePickerStyle = {
|
|
|
56
56
|
fill: 'none',
|
|
57
57
|
},
|
|
58
58
|
},
|
|
59
|
+
full: {},
|
|
59
60
|
ghost: {
|
|
60
61
|
inputProps: {
|
|
61
62
|
fill: 'none',
|
|
62
63
|
borderColor: 'none',
|
|
63
64
|
},
|
|
64
65
|
},
|
|
65
|
-
full: {},
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
var datePickerAppearanceSurface = {
|
|
@@ -8,7 +8,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
|
|
|
8
8
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
9
9
|
import { B as Button } from './Button_es_DTUagqgU.js';
|
|
10
10
|
import { I as Icon } from './Tooltip_es_B0nm9irO.js';
|
|
11
|
-
import { I as Input } from './
|
|
11
|
+
import { I as Input } from './Input_es_BW6cZThr.js';
|
|
12
12
|
import { L as Label } from './Label_es_DmDqs4Rc.js';
|
|
13
13
|
import { T as Text } from './Text_es_BfLRfj-5.js';
|
|
14
14
|
import { icons14 } from '@itcase/icons/default';
|
|
@@ -19,16 +19,16 @@ var datePickerSize = {
|
|
|
19
19
|
daySize: 'xs',
|
|
20
20
|
dayTextSize: 'm',
|
|
21
21
|
iconFillSize: 24,
|
|
22
|
-
iconLeft: icons14.Arrow.
|
|
23
|
-
iconRight: icons14.Arrow.
|
|
22
|
+
iconLeft: icons14.Arrow.ChevronLeft,
|
|
23
|
+
iconRight: icons14.Arrow.ChevronRight,
|
|
24
24
|
},
|
|
25
25
|
sizeM: {
|
|
26
26
|
size: 'm',
|
|
27
27
|
daySize: 'xxl',
|
|
28
28
|
dayTextSize: 'm',
|
|
29
29
|
iconFillSize: 24,
|
|
30
|
-
iconLeft: icons14.Arrow.
|
|
31
|
-
iconRight: icons14.Arrow.
|
|
30
|
+
iconLeft: icons14.Arrow.ChevronLeft,
|
|
31
|
+
iconRight: icons14.Arrow.ChevronRight,
|
|
32
32
|
iconSize: 14,
|
|
33
33
|
monthTextSize: 'm',
|
|
34
34
|
yearTextSize: 'm',
|
|
@@ -38,8 +38,8 @@ var datePickerSize = {
|
|
|
38
38
|
daySize: 'xs',
|
|
39
39
|
dayTextSize: 'm',
|
|
40
40
|
iconFillSize: 24,
|
|
41
|
-
iconLeft: icons14.Arrow.
|
|
42
|
-
iconRight: icons14.Arrow.
|
|
41
|
+
iconLeft: icons14.Arrow.ChevronLeft,
|
|
42
|
+
iconRight: icons14.Arrow.ChevronRight,
|
|
43
43
|
},
|
|
44
44
|
};
|
|
45
45
|
|
|
@@ -54,13 +54,13 @@ var datePickerStyle = {
|
|
|
54
54
|
fill: 'none',
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
|
+
full: {},
|
|
57
58
|
ghost: {
|
|
58
59
|
inputProps: {
|
|
59
60
|
fill: 'none',
|
|
60
61
|
borderColor: 'none',
|
|
61
62
|
},
|
|
62
63
|
},
|
|
63
|
-
full: {},
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
var datePickerAppearanceSurface = {
|
|
@@ -10,7 +10,7 @@ var inputAppearanceDefault = {
|
|
|
10
10
|
defaultPrimary: {
|
|
11
11
|
fill: 'surfaceSecondary',
|
|
12
12
|
borderColor: 'surfaceBorderTertiary',
|
|
13
|
-
|
|
13
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
14
14
|
textColor: 'surfaceTextPrimary',
|
|
15
15
|
textColorDisabled: 'surfaceTextDisabled',
|
|
16
16
|
caret: 'secondaryItemSecondary',
|
|
@@ -20,7 +20,7 @@ var inputAppearanceDefault = {
|
|
|
20
20
|
defaultSecondary: {
|
|
21
21
|
fill: 'surfacePrimary',
|
|
22
22
|
borderColor: 'surfaceBorderTertiary',
|
|
23
|
-
|
|
23
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
24
24
|
textColor: 'surfaceTextPrimary',
|
|
25
25
|
textColorDisabled: 'surfaceTextDisabled',
|
|
26
26
|
caret: 'secondaryItemSecondary',
|
|
@@ -34,7 +34,7 @@ var inputAppearanceDisabled = {
|
|
|
34
34
|
disabledPrimary: {
|
|
35
35
|
fill: 'surfaceFillDisabled',
|
|
36
36
|
borderColor: 'errorBorderQuaternary',
|
|
37
|
-
|
|
37
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
38
38
|
textColor: 'surfaceTextQuaternary',
|
|
39
39
|
iconBeforeFill: 'errorItemQuaternary',
|
|
40
40
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -43,7 +43,7 @@ var inputAppearanceDisabled = {
|
|
|
43
43
|
disabledSecondary: {
|
|
44
44
|
fill: 'surfaceSecondary',
|
|
45
45
|
borderColor: 'surfaceBorderTertiary',
|
|
46
|
-
|
|
46
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
47
47
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
48
48
|
iconClearFill: 'surfaceItemPrimary',
|
|
49
49
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -54,7 +54,7 @@ var inputAppearanceError = {
|
|
|
54
54
|
errorPrimary: {
|
|
55
55
|
fill: 'errorTertiary',
|
|
56
56
|
borderColor: 'errorBorderQuaternary',
|
|
57
|
-
|
|
57
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
58
58
|
textColor: 'surfaceTextPrimary',
|
|
59
59
|
iconBeforeFill: 'errorItemQuaternary',
|
|
60
60
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -63,7 +63,7 @@ var inputAppearanceError = {
|
|
|
63
63
|
errorSecondary: {
|
|
64
64
|
fill: 'errorSecondary',
|
|
65
65
|
borderColor: 'errorBorderTertiary',
|
|
66
|
-
|
|
66
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
67
67
|
iconBeforeFill: 'errorItemQuaternary',
|
|
68
68
|
iconClearFill: 'errorItemPrimary',
|
|
69
69
|
placeholderTextColor: 'errorTextSecondary',
|
|
@@ -74,7 +74,7 @@ var inputAppearanceRequire = {
|
|
|
74
74
|
requirePrimary: {
|
|
75
75
|
fill: 'warningTertiary',
|
|
76
76
|
borderColor: 'warningBorderQuaternary',
|
|
77
|
-
|
|
77
|
+
borderColorHover: 'warningBorderQuaternary',
|
|
78
78
|
textColor: 'surfaceTextPrimary',
|
|
79
79
|
iconBeforeFill: 'warningItemQuaternary',
|
|
80
80
|
iconClearFill: 'warningItemPrimary',
|
|
@@ -83,7 +83,7 @@ var inputAppearanceRequire = {
|
|
|
83
83
|
requireSecondary: {
|
|
84
84
|
fill: 'surfaceSecondary',
|
|
85
85
|
borderColor: 'surfaceBorderTertiary',
|
|
86
|
-
|
|
86
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
87
87
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
88
88
|
iconClearFill: 'surfaceItemPrimary',
|
|
89
89
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -122,18 +122,17 @@ var inputAppearanceSize = {
|
|
|
122
122
|
};
|
|
123
123
|
|
|
124
124
|
var inputAppearanceStyle = {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
},
|
|
128
|
-
ghost: {
|
|
129
|
-
fill: 'none',
|
|
130
|
-
borderWidth: '0',
|
|
125
|
+
solid: {
|
|
126
|
+
borderColor: 'none',
|
|
131
127
|
},
|
|
132
128
|
outlined: {
|
|
133
129
|
fill: 'none',
|
|
134
130
|
},
|
|
135
|
-
|
|
136
|
-
|
|
131
|
+
full: {},
|
|
132
|
+
ghost: {
|
|
133
|
+
fill: 'none',
|
|
134
|
+
borderColor: 'none',
|
|
135
|
+
borderColorHover: 'none',
|
|
137
136
|
},
|
|
138
137
|
};
|
|
139
138
|
|
|
@@ -141,7 +140,7 @@ var inputAppearanceSuccess = {
|
|
|
141
140
|
successPrimary: {
|
|
142
141
|
fill: 'successTertiary',
|
|
143
142
|
borderColor: 'successBorderQuaternary',
|
|
144
|
-
|
|
143
|
+
borderColorHover: 'successBorderQuaternary',
|
|
145
144
|
textColor: 'surfaceTextPrimary',
|
|
146
145
|
iconBeforeFill: 'successItemQuaternary',
|
|
147
146
|
iconClearFill: 'successItemPrimary',
|
|
@@ -150,7 +149,7 @@ var inputAppearanceSuccess = {
|
|
|
150
149
|
successSecondary: {
|
|
151
150
|
fill: 'surfaceSecondary',
|
|
152
151
|
borderColor: 'surfaceBorderTertiary',
|
|
153
|
-
|
|
152
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
154
153
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
155
154
|
iconClearFill: 'surfaceItemPrimary',
|
|
156
155
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -176,13 +175,15 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
176
175
|
}, {});
|
|
177
176
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
178
177
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
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;
|
|
178
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, 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;
|
|
180
179
|
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
|
|
181
180
|
? fillClass && "fill_".concat(fillClass)
|
|
182
181
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
183
182
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
184
183
|
: borderWidthDisabledClass &&
|
|
185
|
-
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled
|
|
184
|
+
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled && fillHoverClass ? "fill_hover_".concat(fillHoverClass) : null, !isDisabled && borderColorHoverClass
|
|
185
|
+
? "border-color_hover_".concat(borderColorHoverClass)
|
|
186
|
+
: null, !isDisabled
|
|
186
187
|
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
187
188
|
: borderColorDisabledClass &&
|
|
188
189
|
"border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
|
|
@@ -8,7 +8,7 @@ var inputAppearanceDefault = {
|
|
|
8
8
|
defaultPrimary: {
|
|
9
9
|
fill: 'surfaceSecondary',
|
|
10
10
|
borderColor: 'surfaceBorderTertiary',
|
|
11
|
-
|
|
11
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
12
12
|
textColor: 'surfaceTextPrimary',
|
|
13
13
|
textColorDisabled: 'surfaceTextDisabled',
|
|
14
14
|
caret: 'secondaryItemSecondary',
|
|
@@ -18,7 +18,7 @@ var inputAppearanceDefault = {
|
|
|
18
18
|
defaultSecondary: {
|
|
19
19
|
fill: 'surfacePrimary',
|
|
20
20
|
borderColor: 'surfaceBorderTertiary',
|
|
21
|
-
|
|
21
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
22
22
|
textColor: 'surfaceTextPrimary',
|
|
23
23
|
textColorDisabled: 'surfaceTextDisabled',
|
|
24
24
|
caret: 'secondaryItemSecondary',
|
|
@@ -32,7 +32,7 @@ var inputAppearanceDisabled = {
|
|
|
32
32
|
disabledPrimary: {
|
|
33
33
|
fill: 'surfaceFillDisabled',
|
|
34
34
|
borderColor: 'errorBorderQuaternary',
|
|
35
|
-
|
|
35
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
36
36
|
textColor: 'surfaceTextQuaternary',
|
|
37
37
|
iconBeforeFill: 'errorItemQuaternary',
|
|
38
38
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -41,7 +41,7 @@ var inputAppearanceDisabled = {
|
|
|
41
41
|
disabledSecondary: {
|
|
42
42
|
fill: 'surfaceSecondary',
|
|
43
43
|
borderColor: 'surfaceBorderTertiary',
|
|
44
|
-
|
|
44
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
45
45
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
46
46
|
iconClearFill: 'surfaceItemPrimary',
|
|
47
47
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -52,7 +52,7 @@ var inputAppearanceError = {
|
|
|
52
52
|
errorPrimary: {
|
|
53
53
|
fill: 'errorTertiary',
|
|
54
54
|
borderColor: 'errorBorderQuaternary',
|
|
55
|
-
|
|
55
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
56
56
|
textColor: 'surfaceTextPrimary',
|
|
57
57
|
iconBeforeFill: 'errorItemQuaternary',
|
|
58
58
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -61,7 +61,7 @@ var inputAppearanceError = {
|
|
|
61
61
|
errorSecondary: {
|
|
62
62
|
fill: 'errorSecondary',
|
|
63
63
|
borderColor: 'errorBorderTertiary',
|
|
64
|
-
|
|
64
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
65
65
|
iconBeforeFill: 'errorItemQuaternary',
|
|
66
66
|
iconClearFill: 'errorItemPrimary',
|
|
67
67
|
placeholderTextColor: 'errorTextSecondary',
|
|
@@ -72,7 +72,7 @@ var inputAppearanceRequire = {
|
|
|
72
72
|
requirePrimary: {
|
|
73
73
|
fill: 'warningTertiary',
|
|
74
74
|
borderColor: 'warningBorderQuaternary',
|
|
75
|
-
|
|
75
|
+
borderColorHover: 'warningBorderQuaternary',
|
|
76
76
|
textColor: 'surfaceTextPrimary',
|
|
77
77
|
iconBeforeFill: 'warningItemQuaternary',
|
|
78
78
|
iconClearFill: 'warningItemPrimary',
|
|
@@ -81,7 +81,7 @@ var inputAppearanceRequire = {
|
|
|
81
81
|
requireSecondary: {
|
|
82
82
|
fill: 'surfaceSecondary',
|
|
83
83
|
borderColor: 'surfaceBorderTertiary',
|
|
84
|
-
|
|
84
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
85
85
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
86
86
|
iconClearFill: 'surfaceItemPrimary',
|
|
87
87
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -120,18 +120,17 @@ var inputAppearanceSize = {
|
|
|
120
120
|
};
|
|
121
121
|
|
|
122
122
|
var inputAppearanceStyle = {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
},
|
|
126
|
-
ghost: {
|
|
127
|
-
fill: 'none',
|
|
128
|
-
borderWidth: '0',
|
|
123
|
+
solid: {
|
|
124
|
+
borderColor: 'none',
|
|
129
125
|
},
|
|
130
126
|
outlined: {
|
|
131
127
|
fill: 'none',
|
|
132
128
|
},
|
|
133
|
-
|
|
134
|
-
|
|
129
|
+
full: {},
|
|
130
|
+
ghost: {
|
|
131
|
+
fill: 'none',
|
|
132
|
+
borderColor: 'none',
|
|
133
|
+
borderColorHover: 'none',
|
|
135
134
|
},
|
|
136
135
|
};
|
|
137
136
|
|
|
@@ -139,7 +138,7 @@ var inputAppearanceSuccess = {
|
|
|
139
138
|
successPrimary: {
|
|
140
139
|
fill: 'successTertiary',
|
|
141
140
|
borderColor: 'successBorderQuaternary',
|
|
142
|
-
|
|
141
|
+
borderColorHover: 'successBorderQuaternary',
|
|
143
142
|
textColor: 'surfaceTextPrimary',
|
|
144
143
|
iconBeforeFill: 'successItemQuaternary',
|
|
145
144
|
iconClearFill: 'successItemPrimary',
|
|
@@ -148,7 +147,7 @@ var inputAppearanceSuccess = {
|
|
|
148
147
|
successSecondary: {
|
|
149
148
|
fill: 'surfaceSecondary',
|
|
150
149
|
borderColor: 'surfaceBorderTertiary',
|
|
151
|
-
|
|
150
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
152
151
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
153
152
|
iconClearFill: 'surfaceItemPrimary',
|
|
154
153
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -174,13 +173,15 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
174
173
|
}, {});
|
|
175
174
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
176
175
|
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;
|
|
176
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, 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
177
|
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
178
|
? fillClass && "fill_".concat(fillClass)
|
|
180
179
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
181
180
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
182
181
|
: borderWidthDisabledClass &&
|
|
183
|
-
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled
|
|
182
|
+
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled && fillHoverClass ? "fill_hover_".concat(fillHoverClass) : null, !isDisabled && borderColorHoverClass
|
|
183
|
+
? "border-color_hover_".concat(borderColorHoverClass)
|
|
184
|
+
: null, !isDisabled
|
|
184
185
|
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
185
186
|
: borderColorDisabledClass &&
|
|
186
187
|
"border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var _default = require('@itcase/icons/default');
|
|
4
|
+
|
|
3
5
|
var breadcrumbsListMock = {
|
|
4
6
|
breadcrumbsList: [
|
|
5
7
|
{
|
|
@@ -7,45 +9,35 @@ var breadcrumbsListMock = {
|
|
|
7
9
|
key: 1,
|
|
8
10
|
text: 'Text 123',
|
|
9
11
|
href: '/',
|
|
10
|
-
|
|
11
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
12
|
-
// icon: icons16.Placeholder,
|
|
12
|
+
icon: _default.icons16.Placeholder.Default,
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
id: '2',
|
|
16
16
|
key: 2,
|
|
17
17
|
text: 'Text 123',
|
|
18
18
|
href: '/',
|
|
19
|
-
|
|
20
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
21
|
-
// icon: icons16.Placeholder,
|
|
19
|
+
icon: _default.icons16.Placeholder.Default,
|
|
22
20
|
},
|
|
23
21
|
{
|
|
24
22
|
id: '3',
|
|
25
23
|
key: 3,
|
|
26
24
|
text: 'Text 123',
|
|
27
25
|
href: '/',
|
|
28
|
-
|
|
29
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
30
|
-
// icon: icons16.Placeholder,
|
|
26
|
+
icon: _default.icons16.Placeholder.Default,
|
|
31
27
|
},
|
|
32
28
|
{
|
|
33
29
|
id: '4',
|
|
34
30
|
key: 4,
|
|
35
31
|
text: 'Text 123',
|
|
36
32
|
href: '/',
|
|
37
|
-
|
|
38
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
39
|
-
// icon: icons16.Placeholder,
|
|
33
|
+
icon: _default.icons16.Placeholder.Default,
|
|
40
34
|
},
|
|
41
35
|
{
|
|
42
36
|
id: '5',
|
|
43
37
|
key: 5,
|
|
44
38
|
text: 'Text 123',
|
|
45
39
|
href: '/',
|
|
46
|
-
|
|
47
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
48
|
-
// icon: icons16.Placeholder,
|
|
40
|
+
icon: _default.icons16.Placeholder.Default,
|
|
49
41
|
},
|
|
50
42
|
],
|
|
51
43
|
};
|
|
@@ -30,17 +30,13 @@ var codeAppearanceDefault = {
|
|
|
30
30
|
|
|
31
31
|
var codeAppearanceDisabled = {
|
|
32
32
|
disabledPrimary: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
fill: 'surfaceSecondary',
|
|
41
|
-
borderColor: 'surfaceBorderTertiary',
|
|
42
|
-
borderHover: 'surfaceBorderQuaternary',
|
|
43
|
-
placeholderTextColor: 'surfaceTextSecondary',
|
|
33
|
+
inputBorderColor: 'surfaceBorderDisabled',
|
|
34
|
+
inputBorderColorHover: 'surfaceBorderDisabled',
|
|
35
|
+
inputCaretColor: 'surfaceItemPrimary',
|
|
36
|
+
inputFill: 'surfaceDisabled',
|
|
37
|
+
inputFillHover: 'surfaceDisabled',
|
|
38
|
+
inputPlaceholderTextColor: 'surfaceTextQuaternary',
|
|
39
|
+
inputTextColor: 'surfaceTextPrimary',
|
|
44
40
|
},
|
|
45
41
|
};
|
|
46
42
|
|
|
@@ -58,21 +54,13 @@ var codeAppearanceError = {
|
|
|
58
54
|
|
|
59
55
|
var codeAppearanceRequire = {
|
|
60
56
|
requirePrimary: {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
},
|
|
69
|
-
requireSecondary: {
|
|
70
|
-
fill: 'surfaceSecondary',
|
|
71
|
-
borderColor: 'surfaceBorderTertiary',
|
|
72
|
-
borderHover: 'surfaceBorderQuaternary',
|
|
73
|
-
iconBeforeFill: 'surfaceItemQuaternary',
|
|
74
|
-
iconClearFill: 'surfaceItemPrimary',
|
|
75
|
-
placeholderTextColor: 'surfaceTextSecondary',
|
|
57
|
+
inputBorderColor: 'warningBorderSecondary',
|
|
58
|
+
inputBorderColorHover: 'warningBorderSecondary',
|
|
59
|
+
inputCaretColor: 'surfaceItemPrimary',
|
|
60
|
+
inputFill: 'warningTertiary',
|
|
61
|
+
inputFillHover: 'warningTertiary',
|
|
62
|
+
inputPlaceholderTextColor: 'surfaceTextQuaternary',
|
|
63
|
+
inputTextColor: 'surfaceTextPrimary',
|
|
76
64
|
},
|
|
77
65
|
};
|
|
78
66
|
|
|
@@ -90,29 +78,30 @@ var codeAppearanceSize = {
|
|
|
90
78
|
};
|
|
91
79
|
|
|
92
80
|
var codeAppearanceStyle = {
|
|
93
|
-
solid: {
|
|
94
|
-
borderColor: 'none',
|
|
95
|
-
},
|
|
96
|
-
outlined: {
|
|
97
|
-
fill: 'none',
|
|
98
|
-
},
|
|
99
81
|
full: {
|
|
100
|
-
|
|
82
|
+
inputBorderColor: 'none',
|
|
101
83
|
},
|
|
102
84
|
ghost: {
|
|
103
|
-
|
|
104
|
-
|
|
85
|
+
inputBorderColor: 'none',
|
|
86
|
+
inputFill: 'none',
|
|
87
|
+
},
|
|
88
|
+
outlined: {
|
|
89
|
+
inputFill: 'none',
|
|
90
|
+
},
|
|
91
|
+
solid: {
|
|
92
|
+
inputBorderColor: 'none',
|
|
105
93
|
},
|
|
106
94
|
};
|
|
107
95
|
|
|
108
96
|
var codeAppearanceSuccess = {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
97
|
+
successPrimary: {
|
|
98
|
+
inputBorderColor: 'successBorderSecondary',
|
|
99
|
+
inputBorderColorHover: 'successBorderSecondary',
|
|
100
|
+
inputCaretColor: 'surfaceItemPrimary',
|
|
101
|
+
inputFill: 'successTertiary',
|
|
102
|
+
inputFillHover: 'successTertiary',
|
|
103
|
+
inputPlaceholderTextColor: 'surfaceTextQuaternary',
|
|
104
|
+
inputTextColor: 'surfaceTextPrimary',
|
|
116
105
|
},
|
|
117
106
|
};
|
|
118
107
|
|
|
@@ -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_arr_wxD2.js');
|
|
9
9
|
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
require('lodash/camelCase');
|
|
11
11
|
require('lodash/castArray');
|
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var luxon = require('luxon');
|
|
8
8
|
var common = require('@itcase/common');
|
|
9
|
-
var DatePicker = require('../../
|
|
9
|
+
var DatePicker = require('../../DatePicker_cjs_CJl9V32f.js');
|
|
10
10
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var ChipsGroup = require('../../ChipsGroup_cjs_DdWjvr_S.js');
|
|
12
12
|
require('date-fns/locale');
|
|
@@ -28,7 +28,7 @@ require('../../Text_cjs_C9fOm0nd.js');
|
|
|
28
28
|
require('react-inlinesvg');
|
|
29
29
|
require('../../Link_cjs_DbRGq2Yk.js');
|
|
30
30
|
require('../../Loader_cjs_CCrbD8Em.js');
|
|
31
|
-
require('../../
|
|
31
|
+
require('../../Input_cjs_arr_wxD2.js');
|
|
32
32
|
require('../../Label_cjs_CZMMdwt5.js');
|
|
33
33
|
require('@itcase/icons/default');
|
|
34
34
|
require('lodash/castArray');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_CJl9V32f.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -27,7 +27,7 @@ require('../../Text_cjs_C9fOm0nd.js');
|
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../../Link_cjs_DbRGq2Yk.js');
|
|
29
29
|
require('../../Loader_cjs_CCrbD8Em.js');
|
|
30
|
-
require('../../
|
|
30
|
+
require('../../Input_cjs_arr_wxD2.js');
|
|
31
31
|
require('../../Label_cjs_CZMMdwt5.js');
|
|
32
32
|
require('@itcase/icons/default');
|
|
33
33
|
|
|
@@ -114,7 +114,9 @@ var menuItemAppearanceStyle = {
|
|
|
114
114
|
var menuItemAppearanceSurface = {
|
|
115
115
|
surfacePrimary: {
|
|
116
116
|
fill: 'surfacePrimary',
|
|
117
|
-
|
|
117
|
+
fillActive: 'surfaceHover',
|
|
118
|
+
fillActiveHover: 'surfaceHover',
|
|
119
|
+
fillHover: 'surfaceHover',
|
|
118
120
|
labelTextColor: 'surfaceTextPrimary',
|
|
119
121
|
iconAfterFillIcon: 'surfaceItemPrimary',
|
|
120
122
|
iconBeforeFillIcon: 'surfaceItemPrimary',
|