@itcase/forms 1.1.50 → 1.1.51
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/css/form/Field/Code/FormFieldCode.css +64 -10
- package/dist/css/form/Field/FileInput/FormFieldFileInput.css +61 -13
- package/dist/css/form/Field/Group/FormBlockGroup.css +26 -4
- package/dist/css/form/Field/RadioGroup/FormFieldRadioGroup.css +32 -4
- package/dist/itcase-forms.cjs.js +15 -15
- package/dist/itcase-forms.esm.js +15 -15
- package/package.json +27 -27
|
@@ -7,27 +7,81 @@
|
|
|
7
7
|
text-align: center;
|
|
8
8
|
}
|
|
9
9
|
&^&_size {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
&_xxl {
|
|
11
|
+
gap: var(--form-filed-code-size-xxl-gap);
|
|
12
|
+
}
|
|
13
|
+
&_xl {
|
|
14
|
+
gap: var(--form-filed-code-size-xl-gap);
|
|
15
|
+
}
|
|
16
|
+
&_l {
|
|
17
|
+
gap: var(--form-filed-code-size-l-gap);
|
|
18
|
+
}
|
|
19
|
+
&_m {
|
|
20
|
+
gap: var(--form-filed-code-size-m-gap);
|
|
21
|
+
}
|
|
22
|
+
&_s {
|
|
23
|
+
gap: var(--form-filed-code-size-s-gap);
|
|
24
|
+
}
|
|
25
|
+
&_xs {
|
|
26
|
+
gap: var(--form-filed-code-size-xs-gap);
|
|
27
|
+
}
|
|
28
|
+
&_xxs {
|
|
29
|
+
gap: var(--form-filed-code-size-xxs-gap);
|
|
13
30
|
}
|
|
14
|
-
}
|
|
15
31
|
}
|
|
16
32
|
}
|
|
17
33
|
}
|
|
18
34
|
.form-field_type_code {
|
|
19
|
-
|
|
20
|
-
&.form__item_state_$(state) {
|
|
35
|
+
&.form__item_state_error {
|
|
21
36
|
& .form-field__label {
|
|
22
37
|
& .text {
|
|
23
|
-
color: var(--form-code
|
|
38
|
+
color: var(--form-code-error-label-color);
|
|
24
39
|
}
|
|
25
40
|
}
|
|
26
|
-
& .form-field__message-item_type
|
|
27
|
-
color: var(--form-code
|
|
41
|
+
& .form-field__message-item_type-error {
|
|
42
|
+
color: var(--form-code-error-helptext-color);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
&.form__item_state_success {
|
|
46
|
+
& .form-field__label {
|
|
47
|
+
& .text {
|
|
48
|
+
color: var(--form-code-success-label-color);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
& .form-field__message-item_type-success {
|
|
52
|
+
color: var(--form-code-success-helptext-color);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
&.form__item_state_require {
|
|
56
|
+
& .form-field__label {
|
|
57
|
+
& .text {
|
|
58
|
+
color: var(--form-code-require-label-color);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
& .form-field__message-item_type-require {
|
|
62
|
+
color: var(--form-code-require-helptext-color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
&.form__item_state_disabled {
|
|
66
|
+
& .form-field__label {
|
|
67
|
+
& .text {
|
|
68
|
+
color: var(--form-code-disabled-label-color);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
& .form-field__message-item_type-disabled {
|
|
72
|
+
color: var(--form-code-disabled-helptext-color);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
&.form__item_state_focus {
|
|
76
|
+
& .form-field__label {
|
|
77
|
+
& .text {
|
|
78
|
+
color: var(--form-code-focus-label-color);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
& .form-field__message-item_type-focus {
|
|
82
|
+
color: var(--form-code-focus-helptext-color);
|
|
28
83
|
}
|
|
29
84
|
}
|
|
30
|
-
}
|
|
31
85
|
}
|
|
32
86
|
:root {
|
|
33
87
|
--form-filed-code-size-l-gap: 8px;
|
|
@@ -7,13 +7,26 @@
|
|
|
7
7
|
outline: 0;
|
|
8
8
|
@mixin easing easeOutQuart, all, 0.2s;
|
|
9
9
|
&_size {
|
|
10
|
-
|
|
11
|
-
&_$(size) {
|
|
10
|
+
&_xl {
|
|
12
11
|
^^&-wrapper {
|
|
13
|
-
padding: var(--fileinput-size
|
|
12
|
+
padding: var(--fileinput-size-xl-padding);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
&_l {
|
|
16
|
+
^^&-wrapper {
|
|
17
|
+
padding: var(--fileinput-size-l-padding);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
&_m {
|
|
21
|
+
^^&-wrapper {
|
|
22
|
+
padding: var(--fileinput-size-m-padding);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
&_s {
|
|
26
|
+
^^&-wrapper {
|
|
27
|
+
padding: var(--fileinput-size-s-padding);
|
|
14
28
|
}
|
|
15
29
|
}
|
|
16
|
-
}
|
|
17
30
|
}
|
|
18
31
|
&-wrapper {
|
|
19
32
|
display: grid;
|
|
@@ -117,13 +130,26 @@
|
|
|
117
130
|
.form-dropzone {
|
|
118
131
|
&_shape {
|
|
119
132
|
&_rounded {
|
|
120
|
-
|
|
121
|
-
&.form-dropzone__dropzone_size_$(size) {
|
|
133
|
+
&.form-dropzone__dropzone_size_xl {
|
|
122
134
|
& .form-dropzone__dropzone-wrapper {
|
|
123
|
-
border-radius: var(--fileinput-size
|
|
135
|
+
border-radius: var(--fileinput-size-xl-shape-rounded);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
&.form-dropzone__dropzone_size_l {
|
|
139
|
+
& .form-dropzone__dropzone-wrapper {
|
|
140
|
+
border-radius: var(--fileinput-size-l-shape-rounded);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
&.form-dropzone__dropzone_size_m {
|
|
144
|
+
& .form-dropzone__dropzone-wrapper {
|
|
145
|
+
border-radius: var(--fileinput-size-m-shape-rounded);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
&.form-dropzone__dropzone_size_s {
|
|
149
|
+
& .form-dropzone__dropzone-wrapper {
|
|
150
|
+
border-radius: var(--fileinput-size-s-shape-rounded);
|
|
124
151
|
}
|
|
125
152
|
}
|
|
126
|
-
}
|
|
127
153
|
}
|
|
128
154
|
&_circular {
|
|
129
155
|
border-radius: 50%;
|
|
@@ -144,14 +170,36 @@
|
|
|
144
170
|
}
|
|
145
171
|
}
|
|
146
172
|
.form-dropzone__dropzone-wrapper_column {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
grid-template-columns: repeat($(count), minmax(0, 1fr));
|
|
173
|
+
&_1 {
|
|
174
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
150
175
|
& .form-dropzone__hint {
|
|
151
|
-
grid-column: span
|
|
176
|
+
grid-column: span 1;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
&_2 {
|
|
180
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
181
|
+
& .form-dropzone__hint {
|
|
182
|
+
grid-column: span 2;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
&_3 {
|
|
186
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
187
|
+
& .form-dropzone__hint {
|
|
188
|
+
grid-column: span 3;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
&_4 {
|
|
192
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
193
|
+
& .form-dropzone__hint {
|
|
194
|
+
grid-column: span 4;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
&_5 {
|
|
198
|
+
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
199
|
+
& .form-dropzone__hint {
|
|
200
|
+
grid-column: span 5;
|
|
152
201
|
}
|
|
153
202
|
}
|
|
154
|
-
}
|
|
155
203
|
}
|
|
156
204
|
:root {
|
|
157
205
|
--fileinput-size-normal-padding: 16px 16px;
|
|
@@ -13,16 +13,38 @@
|
|
|
13
13
|
visibility: hidden;
|
|
14
14
|
}
|
|
15
15
|
&_column {
|
|
16
|
-
|
|
17
|
-
&_$(count) {
|
|
16
|
+
&_2 {
|
|
18
17
|
^^&-items {
|
|
19
18
|
display: grid;
|
|
20
19
|
column-gap: 24px;
|
|
21
|
-
grid-template-columns: repeat(
|
|
20
|
+
grid-template-columns: repeat(2, 1fr);
|
|
21
|
+
align-items: end;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
&_3 {
|
|
25
|
+
^^&-items {
|
|
26
|
+
display: grid;
|
|
27
|
+
column-gap: 24px;
|
|
28
|
+
grid-template-columns: repeat(3, 1fr);
|
|
29
|
+
align-items: end;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
&_4 {
|
|
33
|
+
^^&-items {
|
|
34
|
+
display: grid;
|
|
35
|
+
column-gap: 24px;
|
|
36
|
+
grid-template-columns: repeat(4, 1fr);
|
|
37
|
+
align-items: end;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
&_5 {
|
|
41
|
+
^^&-items {
|
|
42
|
+
display: grid;
|
|
43
|
+
column-gap: 24px;
|
|
44
|
+
grid-template-columns: repeat(5, 1fr);
|
|
22
45
|
align-items: end;
|
|
23
46
|
}
|
|
24
47
|
}
|
|
25
|
-
}
|
|
26
48
|
}
|
|
27
49
|
&-wrapper {
|
|
28
50
|
display: flex;
|
|
@@ -14,13 +14,41 @@
|
|
|
14
14
|
.form-field {
|
|
15
15
|
&_radio {
|
|
16
16
|
&.form-field_size {
|
|
17
|
-
|
|
18
|
-
&_$(size) {
|
|
17
|
+
&_xxl {
|
|
19
18
|
& .form-radio {
|
|
20
|
-
gap: var(--form-filed-radio-size
|
|
19
|
+
gap: var(--form-filed-radio-size-xxl-gap);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
&_xl {
|
|
23
|
+
& .form-radio {
|
|
24
|
+
gap: var(--form-filed-radio-size-xl-gap);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
&_l {
|
|
28
|
+
& .form-radio {
|
|
29
|
+
gap: var(--form-filed-radio-size-l-gap);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
&_m {
|
|
33
|
+
& .form-radio {
|
|
34
|
+
gap: var(--form-filed-radio-size-m-gap);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&_s {
|
|
38
|
+
& .form-radio {
|
|
39
|
+
gap: var(--form-filed-radio-size-s-gap);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
&_xs {
|
|
43
|
+
& .form-radio {
|
|
44
|
+
gap: var(--form-filed-radio-size-xs-gap);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
&_xxs {
|
|
48
|
+
& .form-radio {
|
|
49
|
+
gap: var(--form-filed-radio-size-xxs-gap);
|
|
21
50
|
}
|
|
22
51
|
}
|
|
23
|
-
}
|
|
24
52
|
}
|
|
25
53
|
}
|
|
26
54
|
}
|
package/dist/itcase-forms.cjs.js
CHANGED
|
@@ -299,8 +299,8 @@ const defaultFieldSizeXL = {
|
|
|
299
299
|
function FieldWrapperBase(props) {
|
|
300
300
|
const {
|
|
301
301
|
id,
|
|
302
|
-
dataTour,
|
|
303
302
|
className,
|
|
303
|
+
dataTour,
|
|
304
304
|
type,
|
|
305
305
|
label,
|
|
306
306
|
labelHidden,
|
|
@@ -314,32 +314,32 @@ function FieldWrapperBase(props) {
|
|
|
314
314
|
descTextColor,
|
|
315
315
|
descTextSize,
|
|
316
316
|
descTextWeight,
|
|
317
|
-
errorKey,
|
|
318
|
-
errorMessage,
|
|
319
|
-
isErrorState,
|
|
320
|
-
metaError,
|
|
321
|
-
helpTextColorSuccess,
|
|
322
|
-
isDisabled,
|
|
323
317
|
afterItem,
|
|
324
318
|
beforeItem,
|
|
325
319
|
dividerDirection,
|
|
326
320
|
dividerFill,
|
|
327
321
|
dividerSize,
|
|
328
322
|
dividerWidth,
|
|
323
|
+
errorKey,
|
|
324
|
+
errorMessage,
|
|
329
325
|
fieldClassName,
|
|
330
326
|
helpText,
|
|
331
327
|
helpTextColor,
|
|
328
|
+
helpTextColorSuccess,
|
|
332
329
|
helpTextSize,
|
|
333
330
|
helpTextSizeMobile,
|
|
334
331
|
helpTextWeight,
|
|
335
332
|
inputName,
|
|
336
333
|
inputValue,
|
|
337
334
|
metaActive,
|
|
335
|
+
metaError,
|
|
338
336
|
showDivider,
|
|
339
337
|
showMessage,
|
|
340
338
|
tag: Tag = 'div',
|
|
341
339
|
before,
|
|
342
340
|
after,
|
|
341
|
+
isDisabled,
|
|
342
|
+
isErrorState,
|
|
343
343
|
isHidden,
|
|
344
344
|
isRequired,
|
|
345
345
|
isValidState,
|
|
@@ -383,12 +383,12 @@ function FieldWrapperBase(props) {
|
|
|
383
383
|
const errorTextWeight = props[`${errorKey}MessageTextWeight`];
|
|
384
384
|
return /*#__PURE__*/React__default.default.createElement(Tag, {
|
|
385
385
|
className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
|
|
386
|
-
"data-
|
|
386
|
+
"data-testid": `${inputName}Field`,
|
|
387
387
|
"data-tour": dataTour,
|
|
388
388
|
style: formFieldStyles
|
|
389
389
|
}, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
|
|
390
390
|
className: clsx__default.default('form-field__label'),
|
|
391
|
-
"data-
|
|
391
|
+
"data-testid": `${inputName}FieldLabel`,
|
|
392
392
|
htmlFor: id
|
|
393
393
|
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
394
394
|
size: labelTextSize,
|
|
@@ -398,7 +398,7 @@ function FieldWrapperBase(props) {
|
|
|
398
398
|
sizeTablet: labelTextSizeTablet
|
|
399
399
|
}, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
|
|
400
400
|
className: "form-field__desc",
|
|
401
|
-
"data-
|
|
401
|
+
"data-testid": `${inputName}FieldDesc`
|
|
402
402
|
}, /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
403
403
|
size: descTextSize,
|
|
404
404
|
textColor: descTextColor,
|
|
@@ -415,24 +415,24 @@ function FieldWrapperBase(props) {
|
|
|
415
415
|
fill: dividerFill
|
|
416
416
|
})), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
|
|
417
417
|
className: "form-field__message",
|
|
418
|
-
"data-
|
|
418
|
+
"data-testid": `${inputName}FieldMessage`
|
|
419
419
|
}, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
420
420
|
id: `${inputName}-error`,
|
|
421
|
-
dataTestId: `${inputName}FieldMessageError`,
|
|
422
421
|
className: "form-field__message-item form-field__message-item_type-error",
|
|
422
|
+
dataTestId: `${inputName}FieldMessageError`,
|
|
423
423
|
size: errorTextSize,
|
|
424
424
|
textColor: errorTextColor,
|
|
425
425
|
textWeight: errorTextWeight
|
|
426
426
|
}, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
427
|
-
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
428
427
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
428
|
+
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
429
429
|
size: helpTextSize,
|
|
430
430
|
textColor: isValidState ? helpTextColorSuccess : helpTextColor,
|
|
431
431
|
textWeight: helpTextWeight,
|
|
432
432
|
sizeMobile: helpTextSizeMobile
|
|
433
433
|
}, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
434
|
-
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
435
434
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
435
|
+
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
436
436
|
size: messageTextSize
|
|
437
437
|
}, '\u00A0')), after);
|
|
438
438
|
}
|
|
@@ -2884,7 +2884,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2884
2884
|
autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2885
2885
|
autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2886
2886
|
autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2887
|
-
"data-
|
|
2887
|
+
"data-testid": dataTestId,
|
|
2888
2888
|
"data-tour": dataTour,
|
|
2889
2889
|
spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
|
|
2890
2890
|
style: formStyles,
|
package/dist/itcase-forms.esm.js
CHANGED
|
@@ -288,8 +288,8 @@ const defaultFieldSizeXL = {
|
|
|
288
288
|
function FieldWrapperBase(props) {
|
|
289
289
|
const {
|
|
290
290
|
id,
|
|
291
|
-
dataTour,
|
|
292
291
|
className,
|
|
292
|
+
dataTour,
|
|
293
293
|
type,
|
|
294
294
|
label,
|
|
295
295
|
labelHidden,
|
|
@@ -303,32 +303,32 @@ function FieldWrapperBase(props) {
|
|
|
303
303
|
descTextColor,
|
|
304
304
|
descTextSize,
|
|
305
305
|
descTextWeight,
|
|
306
|
-
errorKey,
|
|
307
|
-
errorMessage,
|
|
308
|
-
isErrorState,
|
|
309
|
-
metaError,
|
|
310
|
-
helpTextColorSuccess,
|
|
311
|
-
isDisabled,
|
|
312
306
|
afterItem,
|
|
313
307
|
beforeItem,
|
|
314
308
|
dividerDirection,
|
|
315
309
|
dividerFill,
|
|
316
310
|
dividerSize,
|
|
317
311
|
dividerWidth,
|
|
312
|
+
errorKey,
|
|
313
|
+
errorMessage,
|
|
318
314
|
fieldClassName,
|
|
319
315
|
helpText,
|
|
320
316
|
helpTextColor,
|
|
317
|
+
helpTextColorSuccess,
|
|
321
318
|
helpTextSize,
|
|
322
319
|
helpTextSizeMobile,
|
|
323
320
|
helpTextWeight,
|
|
324
321
|
inputName,
|
|
325
322
|
inputValue,
|
|
326
323
|
metaActive,
|
|
324
|
+
metaError,
|
|
327
325
|
showDivider,
|
|
328
326
|
showMessage,
|
|
329
327
|
tag: Tag = 'div',
|
|
330
328
|
before,
|
|
331
329
|
after,
|
|
330
|
+
isDisabled,
|
|
331
|
+
isErrorState,
|
|
332
332
|
isHidden,
|
|
333
333
|
isRequired,
|
|
334
334
|
isValidState,
|
|
@@ -372,12 +372,12 @@ function FieldWrapperBase(props) {
|
|
|
372
372
|
const errorTextWeight = props[`${errorKey}MessageTextWeight`];
|
|
373
373
|
return /*#__PURE__*/React.createElement(Tag, {
|
|
374
374
|
className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
|
|
375
|
-
"data-
|
|
375
|
+
"data-testid": `${inputName}Field`,
|
|
376
376
|
"data-tour": dataTour,
|
|
377
377
|
style: formFieldStyles
|
|
378
378
|
}, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
|
|
379
379
|
className: clsx('form-field__label'),
|
|
380
|
-
"data-
|
|
380
|
+
"data-testid": `${inputName}FieldLabel`,
|
|
381
381
|
htmlFor: id
|
|
382
382
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
383
383
|
size: labelTextSize,
|
|
@@ -387,7 +387,7 @@ function FieldWrapperBase(props) {
|
|
|
387
387
|
sizeTablet: labelTextSizeTablet
|
|
388
388
|
}, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
|
|
389
389
|
className: "form-field__desc",
|
|
390
|
-
"data-
|
|
390
|
+
"data-testid": `${inputName}FieldDesc`
|
|
391
391
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
392
392
|
size: descTextSize,
|
|
393
393
|
textColor: descTextColor,
|
|
@@ -404,24 +404,24 @@ function FieldWrapperBase(props) {
|
|
|
404
404
|
fill: dividerFill
|
|
405
405
|
})), showMessage && /*#__PURE__*/React.createElement("div", {
|
|
406
406
|
className: "form-field__message",
|
|
407
|
-
"data-
|
|
407
|
+
"data-testid": `${inputName}FieldMessage`
|
|
408
408
|
}, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
|
|
409
409
|
id: `${inputName}-error`,
|
|
410
|
-
dataTestId: `${inputName}FieldMessageError`,
|
|
411
410
|
className: "form-field__message-item form-field__message-item_type-error",
|
|
411
|
+
dataTestId: `${inputName}FieldMessageError`,
|
|
412
412
|
size: errorTextSize,
|
|
413
413
|
textColor: errorTextColor,
|
|
414
414
|
textWeight: errorTextWeight
|
|
415
415
|
}, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
|
|
416
|
-
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
417
416
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
417
|
+
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
418
418
|
size: helpTextSize,
|
|
419
419
|
textColor: isValidState ? helpTextColorSuccess : helpTextColor,
|
|
420
420
|
textWeight: helpTextWeight,
|
|
421
421
|
sizeMobile: helpTextSizeMobile
|
|
422
422
|
}, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
|
|
423
|
-
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
424
423
|
className: "form-field__message-item form-field__message-item_type_help-text",
|
|
424
|
+
dataTestId: `${inputName}FieldMessageHelpText`,
|
|
425
425
|
size: messageTextSize
|
|
426
426
|
}, '\u00A0')), after);
|
|
427
427
|
}
|
|
@@ -2873,7 +2873,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2873
2873
|
autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2874
2874
|
autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2875
2875
|
autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2876
|
-
"data-
|
|
2876
|
+
"data-testid": dataTestId,
|
|
2877
2877
|
"data-tour": dataTour,
|
|
2878
2878
|
spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
|
|
2879
2879
|
style: formStyles,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/forms",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.51",
|
|
4
4
|
"description": "Forms fields, inputs, etc.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,23 +32,23 @@
|
|
|
32
32
|
"registry": "https://registry.npmjs.org/"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@itcase/common": "^1.2.
|
|
36
|
-
"@itcase/config": "^1.0.
|
|
37
|
-
"@itcase/icons": "^1.2.
|
|
38
|
-
"@itcase/storybook-config": "^1.2.
|
|
39
|
-
"@itcase/tokens-am": "^1.1.
|
|
40
|
-
"@itcase/tokens-baikal": "^1.1.
|
|
41
|
-
"@itcase/ui": "^1.
|
|
42
|
-
"axios": "^1.
|
|
35
|
+
"@itcase/common": "^1.2.34",
|
|
36
|
+
"@itcase/config": "^1.0.72",
|
|
37
|
+
"@itcase/icons": "^1.2.28",
|
|
38
|
+
"@itcase/storybook-config": "^1.2.29",
|
|
39
|
+
"@itcase/tokens-am": "^1.1.37",
|
|
40
|
+
"@itcase/tokens-baikal": "^1.1.37",
|
|
41
|
+
"@itcase/ui": "^1.9.28",
|
|
42
|
+
"axios": "^1.13.2",
|
|
43
43
|
"clsx": "^2.1.1",
|
|
44
44
|
"final-form": "4.20.10",
|
|
45
45
|
"final-form-focus": "1.1.2",
|
|
46
|
-
"libphonenumber-js": "^1.12.
|
|
46
|
+
"libphonenumber-js": "^1.12.31",
|
|
47
47
|
"lodash": "^4.17.21",
|
|
48
48
|
"luxon": "^3.7.2",
|
|
49
49
|
"react": "^18.3.1",
|
|
50
50
|
"react-date-range": "^2.0.1",
|
|
51
|
-
"react-datepicker": "^8.
|
|
51
|
+
"react-datepicker": "^8.10.0",
|
|
52
52
|
"react-dom": "^18.3.1",
|
|
53
53
|
"react-dropzone": "^14.3.8",
|
|
54
54
|
"react-final-form": "6.5.9",
|
|
@@ -56,16 +56,16 @@
|
|
|
56
56
|
"react-select": "^5.10.2"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@babel/core": "^7.28.
|
|
60
|
-
"@babel/preset-env": "^7.28.
|
|
61
|
-
"@babel/preset-react": "^7.
|
|
62
|
-
"@commitlint/cli": "^20.
|
|
63
|
-
"@commitlint/config-conventional": "^20.
|
|
64
|
-
"@itcase/lint": "^1.1.
|
|
65
|
-
"@rollup/plugin-babel": "^6.0
|
|
66
|
-
"@rollup/plugin-commonjs": "^
|
|
59
|
+
"@babel/core": "^7.28.5",
|
|
60
|
+
"@babel/preset-env": "^7.28.5",
|
|
61
|
+
"@babel/preset-react": "^7.28.5",
|
|
62
|
+
"@commitlint/cli": "^20.2.0",
|
|
63
|
+
"@commitlint/config-conventional": "^20.2.0",
|
|
64
|
+
"@itcase/lint": "^1.1.69",
|
|
65
|
+
"@rollup/plugin-babel": "^6.1.0",
|
|
66
|
+
"@rollup/plugin-commonjs": "^29.0.0",
|
|
67
67
|
"@rollup/plugin-json": "^6.1.0",
|
|
68
|
-
"@rollup/plugin-node-resolve": "^16.0.
|
|
68
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
69
69
|
"@semantic-release/changelog": "^6.0.3",
|
|
70
70
|
"@semantic-release/git": "^10.0.1",
|
|
71
71
|
"@semantic-release/release-notes-generator": "14.1.0",
|
|
@@ -74,16 +74,16 @@
|
|
|
74
74
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
75
75
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
|
76
76
|
"conventional-changelog-conventionalcommits": "^9.1.0",
|
|
77
|
-
"eslint": "9.
|
|
77
|
+
"eslint": "9.39.1",
|
|
78
78
|
"husky": "^9.1.7",
|
|
79
|
-
"lint-staged": "^16.2.
|
|
79
|
+
"lint-staged": "^16.2.7",
|
|
80
80
|
"postcss": "^8.5.6",
|
|
81
|
-
"prettier": "3.
|
|
82
|
-
"rollup": "^4.
|
|
81
|
+
"prettier": "3.7.4",
|
|
82
|
+
"rollup": "^4.53.3",
|
|
83
83
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
84
|
-
"semantic-release": "^
|
|
85
|
-
"storybook": "^
|
|
86
|
-
"stylelint": "^16.
|
|
84
|
+
"semantic-release": "^25.0.2",
|
|
85
|
+
"storybook": "^10.1.4",
|
|
86
|
+
"stylelint": "^16.26.1",
|
|
87
87
|
"typescript": "^5.9.3",
|
|
88
88
|
"yup": "^1.7.1"
|
|
89
89
|
}
|