@itcase/forms 1.1.30 → 1.1.32

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.
Files changed (9) hide show
  1. package/dist/css/form/Field/Checkbox/FormFieldCheckbox.css +4 -6
  2. package/dist/css/form/Field/Code/FormFieldCode.css +11 -13
  3. package/dist/css/form/Field/Switch/FormFieldSwitch.css +8 -28
  4. package/dist/css/form/Form/Form.css +0 -1
  5. package/dist/css/form/Form/css/__item/form__item.css +0 -1
  6. package/dist/css/form/FormField/FormField.css +3 -2
  7. package/dist/itcase-forms.cjs.js +143 -85
  8. package/dist/itcase-forms.esm.js +142 -86
  9. package/package.json +11 -11
package/dist/css/form/Field/Checkbox/FormFieldCheckbox.css CHANGED
@@ -1,10 +1,8 @@
1
+
1
2
  .form-field {
2
- &_type_checkbox {
3
- ^&__label {
4
- padding: 0 0 0 28px;
5
- }
3
+ &-checkbox {
6
4
  ^&__message {
7
- padding: 0 0 0 28px;
5
+ padding: 0 0 0 12px;
8
6
  }
9
7
  }
10
- }
8
+ }
package/dist/css/form/Field/Code/FormFieldCode.css CHANGED
@@ -1,21 +1,20 @@
1
- .form-code {
2
- position: relative;
3
- }
4
-
5
1
  .form-field {
6
- &_type {
7
- &_code {
8
- &.form-field_size {
9
- @each $size in xxl, xl, l, m, s, xs, xxs {
10
- &_$(size) {
11
- gap: var(--form-filed-code-size-$(size)-gap);
12
- }
2
+ &-code {
3
+ ^&__label {
4
+ text-align: center;
5
+ }
6
+ ^&__message {
7
+ text-align: center;
8
+ }
9
+ &^&_size {
10
+ @each $size in xxl, xl, l, m, s, xs, xxs {
11
+ &_$(size) {
12
+ gap: var(--form-filed-code-size-$(size)-gap);
13
13
  }
14
14
  }
15
15
  }
16
16
  }
17
17
  }
18
-
19
18
  .form-field_type_code {
20
19
  @each $state in error, success, require, disabled, focus {
21
20
  &.form__item_state_$(state) {
@@ -30,7 +29,6 @@
30
29
  }
31
30
  }
32
31
  }
33
-
34
32
  :root {
35
33
  --form-filed-code-size-l-gap: 8px;
36
34
  }
package/dist/css/form/Field/Switch/FormFieldSwitch.css CHANGED
@@ -1,36 +1,16 @@
1
1
  .form-field {
2
- &_type_switch {
2
+ &-switch {
3
3
  width: 100%;
4
- }
5
- }
6
- .form-switch {
7
- &&_state {
8
- @each $state in error, success, require, disabled, focus {
9
- &_$(state) {
10
- & .input {
11
- border: solid 1px var(--form-switch-$(state)-border);
12
- &:hover {
13
- border: solid 1px var(--form-switch-$(state)-border-hover);
14
- }
15
- }
16
- }
17
- }
18
- }
19
- }
20
- .form-field_type_switch {
21
- @each $state in error, success, require, disabled, focus {
22
- &.form__item_state_$(state) {
23
- & .form-field__label {
24
- & .text {
25
- color: var(--form-switch-$(state)-label-color);
26
- }
27
- }
28
- & .form-field__message-item_type-$(state) {
29
- color: var(--form-switch-$(state)-helptext-color);
30
- }
4
+ flex-direction: row;
5
+ padding: 12px 0;
6
+ ^&__label {
7
+ flex: 1;
8
+ display: flex;
9
+ align-items: center;
31
10
  }
32
11
  }
33
12
  }
13
+
34
14
  :root {
35
15
  --form-switch-error-border: var(--color-error-border-primary);
36
16
  --form-switch-error-border-hover: var(--color-error-border-primary);
package/dist/css/form/Form/Form.css CHANGED
@@ -20,7 +20,6 @@
20
20
  .form {
21
21
  &__item {
22
22
  display: flex;
23
- flex-direction: column;
24
23
  &_reset-fill {
25
24
  & input,
26
25
  & textarea {
package/dist/css/form/Form/css/__item/form__item.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .form {
2
2
  &__item {
3
3
  display: flex;
4
- flex-direction: column;
5
4
  &_reset-fill {
6
5
  & input,
7
6
  & textarea {
package/dist/css/form/FormField/FormField.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .form-field {
2
2
  &__content {
3
+ width: 100%;
3
4
  &-inner {
4
5
  position: relative;
5
6
  display: flex;
@@ -36,6 +37,7 @@
36
37
  & .form {
37
38
  &-field {
38
39
  &__label {
40
+ background: #fff;
39
41
  transform: scale(0.85) translate(10px, 2px);
40
42
  }
41
43
  }
@@ -49,12 +51,11 @@
49
51
  &::placeholder {
50
52
  opacity: 100%;
51
53
  }
52
- }
54
+ }
53
55
  }
54
56
  & .form {
55
57
  &-field {
56
58
  &__label {
57
- background: #fff;
58
59
  padding: 0 4px;
59
60
  position: absolute;
60
61
  display: flex;
package/dist/itcase-forms.cjs.js CHANGED
@@ -246,6 +246,15 @@ const defaultFieldProps = {
246
246
  requiredMessageTextColor: 'warningTextSecondary',
247
247
  showMessage: true
248
248
  };
249
+ const defaultFieldSizeS = {
250
+ size: 's',
251
+ labelTextSize: 's',
252
+ messageTextSize: 's',
253
+ errorMessageTextSize: 's',
254
+ helpTextSize: 's',
255
+ requiredMessageTextSize: 's',
256
+ ...defaultFieldProps
257
+ };
249
258
  const defaultFieldSizeM = {
250
259
  size: 'm',
251
260
  labelTextSize: 's',
@@ -255,6 +264,15 @@ const defaultFieldSizeM = {
255
264
  requiredMessageTextSize: 's',
256
265
  ...defaultFieldProps
257
266
  };
267
+ const defaultFieldSizeL = {
268
+ size: 'l',
269
+ labelTextSize: 's',
270
+ messageTextSize: 's',
271
+ errorMessageTextSize: 's',
272
+ helpTextSize: 's',
273
+ requiredMessageTextSize: 's',
274
+ ...defaultFieldProps
275
+ };
258
276
  const defaultFieldSizeXL = {
259
277
  size: 'xl',
260
278
  labelTextSize: 's',
@@ -942,29 +960,34 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
942
960
 
943
961
  const defaultGroupProps = {
944
962
  width: 'fill',
945
- labelTextColor: 'surfaceTextPrimary',
946
- labelTextSize: 'h5',
947
- labelTextWeight: 500
963
+ labelTextSize: 's',
964
+ messageTextColor: 'surfaceTextPrimary',
965
+ messageTextSize: 's',
966
+ errorMessageTextSize: 's',
967
+ errorMessageTextColor: 'errorTextSecondary',
968
+ helpTextSize: 's',
969
+ requiredMessageTextColor: 'warningTextSecondary',
970
+ requiredMessageTextSize: 's'
948
971
  };
949
972
 
950
973
  const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(props) {
951
974
  const {
975
+ dataTour,
952
976
  className,
953
977
  name,
978
+ title,
979
+ titleTextColor,
980
+ titleTextSize,
981
+ titleTextWeight,
954
982
  label,
955
983
  labelTextColor,
956
984
  labelTextSize,
957
985
  labelTextWeight,
958
986
  message,
959
- column,
960
- dataTour,
961
- title,
962
- titleTextSize,
963
- titleTextColor,
964
- titleTextWeight,
965
- messageTextColor = 'surfaceTextTertiary',
966
- messageTextSize = 's',
987
+ messageTextColor,
988
+ messageTextSize,
967
989
  messageTextWeight,
990
+ column,
968
991
  showGroupMessage,
969
992
  before,
970
993
  after,
@@ -984,9 +1007,9 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
984
1007
  * custom React Hook function.
985
1008
  */
986
1009
  const {
987
- isErrorState,
988
1010
  errorKey,
989
- errorMessage
1011
+ errorMessage,
1012
+ isErrorState
990
1013
  } = useFieldValidationState({
991
1014
  fieldProps: props,
992
1015
  // or fieldProps?
@@ -1017,8 +1040,8 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
1017
1040
  }, label)), /*#__PURE__*/React__default.default.createElement("div", {
1018
1041
  className: "form__group-items"
1019
1042
  }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
1020
- className: `form__group-message form__group-message_type-${errorKey}`,
1021
1043
  id: `${name}-error`,
1044
+ className: `form__group-message form__group-message_type-${errorKey}`,
1022
1045
  size: updatedProps.messageTextSize,
1023
1046
  textColor: updatedProps.messageTextColor,
1024
1047
  textWeight: updatedProps.messageTextWeight
@@ -1035,15 +1058,13 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
1035
1058
  });
1036
1059
 
1037
1060
  const defaultCheckboxProps = {
1038
- appearance: 'defaultPrimary',
1061
+ appearance: 'defaultPrimary sizeL solid',
1039
1062
  width: 'fill',
1040
- size: 'm',
1041
- labelTextColor: 'surfaceTextPrimary',
1042
- labelTextColorDisabled: 'surfaceTextDisabled',
1043
- labelTextSize: 's',
1044
- descTextSize: 's',
1045
- errorBorderColor: 'errorBorderSecondary',
1046
- requiredBorderColor: 'warningBorderSecondary'
1063
+ // useValidationAppearanceInputProps
1064
+ // Error
1065
+ errorAppearance: 'errorPrimary sizeL solid',
1066
+ // Required
1067
+ requiredAppearance: 'requirePrimary sizeL solid'
1047
1068
  };
1048
1069
 
1049
1070
  const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function FormFieldCheckbox(props) {
@@ -1094,7 +1115,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
1094
1115
  validationStateKey: isErrorState ? errorKey : 'success'
1095
1116
  });
1096
1117
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1097
- className: clsx__default.default('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
1118
+ className: clsx__default.default('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
1098
1119
  errorKey: errorKey,
1099
1120
  errorMessage: errorMessage,
1100
1121
  isErrorState: isErrorState,
@@ -1114,6 +1135,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
1114
1135
  isDisabled: isDisabled,
1115
1136
  autoComplete: "nope",
1116
1137
  checked: input.checked,
1138
+ isActive: input.checked,
1117
1139
  onBlur: input.onBlur,
1118
1140
  onChange: onChangeField,
1119
1141
  onFocus: input.onFocus
@@ -1124,8 +1146,11 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
1124
1146
  const defaultChipsProps = {
1125
1147
  appearance: 'surfacePrimary sizeM rounded',
1126
1148
  width: 'fill',
1127
- errorBorderColor: 'errorBorderSecondary',
1128
- requiredBorderColor: 'warningBorderSecondary'
1149
+ // useValidationAppearanceInputProps
1150
+ // Error
1151
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1152
+ // Required
1153
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1129
1154
  };
1130
1155
 
1131
1156
  function FormFieldChips(props) {
@@ -1192,7 +1217,7 @@ function FormFieldChips(props) {
1192
1217
  return emptyOptionsList;
1193
1218
  }, [input.value]);
1194
1219
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1195
- className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
1220
+ className: clsx__default.default('form-field_chips', 'form__item_chips', classNameGroupItem),
1196
1221
  errorKey: errorKey,
1197
1222
  errorMessage: errorMessage,
1198
1223
  isErrorState: isErrorState,
@@ -1227,8 +1252,11 @@ function FormFieldChips(props) {
1227
1252
  const defaultChoiceProps = {
1228
1253
  appearance: 'defaultPrimary sizeM solid rounded',
1229
1254
  width: 'fill',
1230
- errorBorderColor: 'errorBorderPrimary',
1231
- requiredBorderColor: 'warningBorderPrimary'
1255
+ // useValidationAppearanceInputProps
1256
+ // Error
1257
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1258
+ // Required
1259
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1232
1260
  };
1233
1261
 
1234
1262
  const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFieldChoice(props) {
@@ -1296,8 +1324,9 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1296
1324
  validationStateKey: isErrorState ? errorKey : 'success'
1297
1325
  });
1298
1326
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1299
- className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
1327
+ className: clsx__default.default('form-field_choice', 'form__item_choice', classNameGroupItem),
1300
1328
  label: label,
1329
+ messageType: messageType,
1301
1330
  errorKey: errorKey,
1302
1331
  errorMessage: errorMessage,
1303
1332
  isErrorState: isErrorState,
@@ -1306,7 +1335,6 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1306
1335
  fieldClassName: "form-choice",
1307
1336
  inputName: input.name,
1308
1337
  inputValue: input.value || [],
1309
- messageType: messageType,
1310
1338
  metaActive: meta.active,
1311
1339
  showMessage: showMessage,
1312
1340
  isRequired: isRequired,
@@ -1327,7 +1355,12 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1327
1355
  });
1328
1356
 
1329
1357
  const defaultCodeProps = {
1330
- appearance: 'defaultPrimary sizeL solid rounded'
1358
+ appearance: 'defaultPrimary sizeL solid rounded',
1359
+ // useValidationAppearanceInputProps
1360
+ // Error
1361
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1362
+ // Required
1363
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1331
1364
  };
1332
1365
 
1333
1366
  const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFieldCode(props) {
@@ -1368,7 +1401,7 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
1368
1401
  validationStateKey: isErrorState ? errorKey : 'success'
1369
1402
  });
1370
1403
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1371
- className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
1404
+ className: clsx__default.default('form-field-code', 'form__item_code', classNameGroupItem),
1372
1405
  fieldClassName: 'form-code',
1373
1406
  inputName: input.name,
1374
1407
  inputValue: input.value,
@@ -1435,7 +1468,7 @@ const FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFi
1435
1468
  inputProps: props
1436
1469
  });
1437
1470
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1438
- className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
1471
+ className: clsx__default.default('form-field_custom', 'form__item_custom', classNameGroupItem),
1439
1472
  errorKey: errorKey,
1440
1473
  errorMessage: errorMessage,
1441
1474
  fieldClassName: 'form-custom',
@@ -1534,7 +1567,7 @@ function FormFieldDatePicker(props) {
1534
1567
  validationStateKey: isErrorState ? errorKey : 'success'
1535
1568
  });
1536
1569
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1537
- className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
1570
+ className: clsx__default.default('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
1538
1571
  errorKey: errorKey,
1539
1572
  errorMessage: errorMessage,
1540
1573
  isErrorState: isErrorState,
@@ -1562,10 +1595,13 @@ function FormFieldDatePicker(props) {
1562
1595
  }
1563
1596
 
1564
1597
  const defaultInputProps = {
1565
- appearance: 'sizeM defaultSecondary solid rounded',
1598
+ appearance: 'defaultPrimary sizeM solid rounded',
1566
1599
  width: 'fill',
1567
- errorBorderColor: 'errorBorderSecondary',
1568
- requiredBorderColor: 'warningBorderSecondary'
1600
+ // useValidationAppearanceInputProps
1601
+ // Error
1602
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1603
+ // Required
1604
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1569
1605
  };
1570
1606
 
1571
1607
  const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
@@ -1626,7 +1662,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
1626
1662
  validationStateKey: isErrorState ? errorKey : 'success'
1627
1663
  });
1628
1664
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1629
- className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1665
+ className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
1630
1666
  errorKey: errorKey,
1631
1667
  errorMessage: errorMessage,
1632
1668
  isErrorState: isErrorState,
@@ -1665,9 +1701,13 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
1665
1701
 
1666
1702
  const defaultPasswordProps = {
1667
1703
  appearance: 'sizeM defaultSecondary solid rounded',
1704
+ // useValidationAppearanceInputProps
1705
+ // Error
1706
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1707
+ // Required
1668
1708
  iconRevealableHide: _default.icons24.View.HideValue,
1669
1709
  iconRevealableShow: _default.icons24.View.ShowValue,
1670
- iconFill: 'surfaceItemQuaternary'
1710
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1671
1711
  };
1672
1712
 
1673
1713
  const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFieldPassword(props) {
@@ -1727,7 +1767,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
1727
1767
  validationStateKey: isErrorState ? errorKey : 'success'
1728
1768
  });
1729
1769
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1730
- className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1770
+ className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
1731
1771
  errorKey: errorKey,
1732
1772
  errorMessage: errorMessage,
1733
1773
  isErrorState: isErrorState,
@@ -1764,8 +1804,11 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
1764
1804
  const defaultSegmentedProps = {
1765
1805
  appearance: 'defaultPrimary sizeM solid rounded',
1766
1806
  width: 'fill',
1767
- errorLabelTextColor: 'errorTextPrimary',
1768
- requiredLabelTextColor: 'warningTextPrimary'
1807
+ // useValidationAppearanceInputProps
1808
+ // Error
1809
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1810
+ // Required
1811
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1769
1812
  };
1770
1813
 
1771
1814
  function FormFieldSegmented(props) {
@@ -1823,7 +1866,7 @@ function FormFieldSegmented(props) {
1823
1866
  validationStateKey: isErrorState ? errorKey : 'success'
1824
1867
  });
1825
1868
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1826
- className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
1869
+ className: clsx__default.default('form-field_segmented', 'form__item_segmented'),
1827
1870
  errorKey: errorKey,
1828
1871
  errorMessage: errorMessage,
1829
1872
  isErrorState: isErrorState,
@@ -1846,7 +1889,12 @@ function FormFieldSegmented(props) {
1846
1889
  }
1847
1890
 
1848
1891
  const defaultSelectProps = {
1849
- appearance: 'defaultPrimary sizeM'
1892
+ appearance: 'defaultPrimary sizeM solid rounded',
1893
+ // useValidationAppearanceInputProps
1894
+ // Error
1895
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1896
+ // Required
1897
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1850
1898
  };
1851
1899
 
1852
1900
  function getDefaultValue(options, selectValue) {
@@ -1935,7 +1983,7 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
1935
1983
  validationStateKey: isErrorState ? errorKey : 'success'
1936
1984
  });
1937
1985
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1938
- className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
1986
+ className: clsx__default.default('form-field_select', 'form__item_select', classNameGroupItem),
1939
1987
  errorKey: errorKey,
1940
1988
  errorMessage: errorMessage,
1941
1989
  isErrorState: isErrorState,
@@ -1962,7 +2010,12 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
1962
2010
  });
1963
2011
 
1964
2012
  const defaultSwitchProps = {
1965
- appearance: 'defaultPrimary sizeL solid rounded'
2013
+ appearance: 'defaultPrimary sizeL solid rounded',
2014
+ // useValidationAppearanceInputProps
2015
+ // Error
2016
+ errorAppearance: 'errorPrimary sizeL solid rounded',
2017
+ // Required
2018
+ requiredAppearance: 'requirePrimary sizeL solid rounded'
1966
2019
  };
1967
2020
 
1968
2021
  const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFieldSwitch(props) {
@@ -2011,7 +2064,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
2011
2064
  validationStateKey: isErrorState ? errorKey : 'success'
2012
2065
  });
2013
2066
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2014
- className: clsx__default.default('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
2067
+ className: clsx__default.default('form-field-switch', 'form__item_switch', classNameGroupItem),
2015
2068
  errorKey: errorKey,
2016
2069
  errorMessage: errorMessage,
2017
2070
  isErrorState: isErrorState,
@@ -2030,7 +2083,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
2030
2083
  name: input.name,
2031
2084
  isDisabled: isDisabled,
2032
2085
  autoComplete: "nope",
2033
- checked: input.checked,
2086
+ isActive: input.checked,
2034
2087
  onBlur: input.onBlur,
2035
2088
  onChange: onChangeField,
2036
2089
  onFocus: input.onFocus
@@ -2040,8 +2093,11 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
2040
2093
 
2041
2094
  const defaultTextareaProps = {
2042
2095
  appearance: 'defaultPrimary sizeM solid rounded',
2043
- errorBorderColor: 'errorBorderSecondary',
2044
- requiredBorderColor: 'warningBorderSecondary'
2096
+ // useValidationAppearanceInputProps
2097
+ // Error
2098
+ errorAppearance: 'errorPrimary sizeM solid rounded',
2099
+ // Required
2100
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
2045
2101
  };
2046
2102
 
2047
2103
  const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFieldTextarea(props) {
@@ -2082,7 +2138,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
2082
2138
  validationStateKey: isErrorState ? errorKey : 'success'
2083
2139
  });
2084
2140
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2085
- className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
2141
+ className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
2086
2142
  errorKey: errorKey,
2087
2143
  errorMessage: errorMessage,
2088
2144
  isErrorState: isErrorState,
@@ -2174,7 +2230,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
2174
2230
  validationStateKey: isErrorState ? errorKey : 'success'
2175
2231
  });
2176
2232
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2177
- className: clsx__default.default('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
2233
+ className: clsx__default.default('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
2178
2234
  errorKey: errorKey,
2179
2235
  errorMessage: errorMessage,
2180
2236
  isErrorState: isErrorState,
@@ -2359,7 +2415,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
2359
2415
  validationStateKey: isErrorState ? errorKey : 'success'
2360
2416
  });
2361
2417
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2362
- className: clsx__default.default('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
2418
+ className: clsx__default.default('form-field_radio', 'form__item_radio"', classNameGroupItem),
2363
2419
  errorKey: errorKey,
2364
2420
  errorMessage: errorMessage,
2365
2421
  isErrorState: isErrorState,
@@ -2915,32 +2971,6 @@ const DEFAULT_MESSAGES_FIELDS = {
2915
2971
  // required - KEY for yellow color
2916
2972
  // error - KEY for red color
2917
2973
 
2918
- // key: 'required'
2919
- required: {
2920
- key: 'required',
2921
- message: 'Обязательное поле'
2922
- },
2923
- phone_required: {
2924
- key: 'required',
2925
- message: 'Укажите номер телефона'
2926
- },
2927
- email_required: {
2928
- key: 'required',
2929
- message: 'Укажите адрес электронной почты'
2930
- },
2931
- password_required: {
2932
- key: 'required',
2933
- message: 'Введите пароль'
2934
- },
2935
- phone_or_email_required: {
2936
- key: 'required',
2937
- message: 'Введите телефон или адрес эл. почты'
2938
- },
2939
- // key: 'error'
2940
- matches: {
2941
- key: 'error',
2942
- message: 'Допускается ввод только цифр от 0 до 9'
2943
- },
2944
2974
  min: {
2945
2975
  key: 'error',
2946
2976
  message: ({
@@ -2957,21 +2987,47 @@ const DEFAULT_MESSAGES_FIELDS = {
2957
2987
  key: 'error',
2958
2988
  message: 'Введите корректный URL-адрес'
2959
2989
  },
2990
+ email_error: {
2991
+ key: 'error',
2992
+ message: 'Введите корректный адрес электронной почты'
2993
+ },
2994
+ phone_error: {
2995
+ key: 'error',
2996
+ message: 'Введите корректный номер телефона'
2997
+ },
2998
+ email_required: {
2999
+ key: 'required',
3000
+ message: 'Укажите адрес электронной почты'
3001
+ },
2960
3002
  invalid_value: {
2961
3003
  key: 'error',
2962
3004
  message: 'Некорректное значение'
2963
3005
  },
3006
+ // key: 'error'
3007
+ matches: {
3008
+ key: 'error',
3009
+ message: 'Допускается ввод только цифр от 0 до 9'
3010
+ },
2964
3011
  numeric_value: {
2965
3012
  key: 'error',
2966
3013
  message: 'Только числовое значение'
2967
3014
  },
2968
- phone_error: {
2969
- key: 'error',
2970
- message: 'Введите корректный номер телефона'
3015
+ password_required: {
3016
+ key: 'required',
3017
+ message: 'Введите пароль'
2971
3018
  },
2972
- email_error: {
2973
- key: 'error',
2974
- message: 'Введите корректный адрес электронной почты'
3019
+ phone_or_email_required: {
3020
+ key: 'required',
3021
+ message: 'Введите телефон или адрес эл. почты'
3022
+ },
3023
+ phone_required: {
3024
+ key: 'required',
3025
+ message: 'Укажите номер телефона'
3026
+ },
3027
+ // key: 'required'
3028
+ required: {
3029
+ key: 'required',
3030
+ message: 'Обязательное поле'
2975
3031
  }
2976
3032
  };
2977
3033
 
@@ -3114,7 +3170,9 @@ exports.defaultCodeProps = defaultCodeProps;
3114
3170
  exports.defaultDatepickerProps = defaultDatepickerProps;
3115
3171
  exports.defaultDropzoneProps = defaultDropzoneProps;
3116
3172
  exports.defaultFieldProps = defaultFieldProps;
3173
+ exports.defaultFieldSizeL = defaultFieldSizeL;
3117
3174
  exports.defaultFieldSizeM = defaultFieldSizeM;
3175
+ exports.defaultFieldSizeS = defaultFieldSizeS;
3118
3176
  exports.defaultFieldSizeXL = defaultFieldSizeXL;
3119
3177
  exports.defaultGroupProps = defaultGroupProps;
3120
3178
  exports.defaultInputProps = defaultInputProps;
package/dist/itcase-forms.esm.js CHANGED
@@ -235,6 +235,15 @@ const defaultFieldProps = {
235
235
  requiredMessageTextColor: 'warningTextSecondary',
236
236
  showMessage: true
237
237
  };
238
+ const defaultFieldSizeS = {
239
+ size: 's',
240
+ labelTextSize: 's',
241
+ messageTextSize: 's',
242
+ errorMessageTextSize: 's',
243
+ helpTextSize: 's',
244
+ requiredMessageTextSize: 's',
245
+ ...defaultFieldProps
246
+ };
238
247
  const defaultFieldSizeM = {
239
248
  size: 'm',
240
249
  labelTextSize: 's',
@@ -244,6 +253,15 @@ const defaultFieldSizeM = {
244
253
  requiredMessageTextSize: 's',
245
254
  ...defaultFieldProps
246
255
  };
256
+ const defaultFieldSizeL = {
257
+ size: 'l',
258
+ labelTextSize: 's',
259
+ messageTextSize: 's',
260
+ errorMessageTextSize: 's',
261
+ helpTextSize: 's',
262
+ requiredMessageTextSize: 's',
263
+ ...defaultFieldProps
264
+ };
247
265
  const defaultFieldSizeXL = {
248
266
  size: 'xl',
249
267
  labelTextSize: 's',
@@ -931,29 +949,34 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
931
949
 
932
950
  const defaultGroupProps = {
933
951
  width: 'fill',
934
- labelTextColor: 'surfaceTextPrimary',
935
- labelTextSize: 'h5',
936
- labelTextWeight: 500
952
+ labelTextSize: 's',
953
+ messageTextColor: 'surfaceTextPrimary',
954
+ messageTextSize: 's',
955
+ errorMessageTextSize: 's',
956
+ errorMessageTextColor: 'errorTextSecondary',
957
+ helpTextSize: 's',
958
+ requiredMessageTextColor: 'warningTextSecondary',
959
+ requiredMessageTextSize: 's'
937
960
  };
938
961
 
939
962
  const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
940
963
  const {
964
+ dataTour,
941
965
  className,
942
966
  name,
967
+ title,
968
+ titleTextColor,
969
+ titleTextSize,
970
+ titleTextWeight,
943
971
  label,
944
972
  labelTextColor,
945
973
  labelTextSize,
946
974
  labelTextWeight,
947
975
  message,
948
- column,
949
- dataTour,
950
- title,
951
- titleTextSize,
952
- titleTextColor,
953
- titleTextWeight,
954
- messageTextColor = 'surfaceTextTertiary',
955
- messageTextSize = 's',
976
+ messageTextColor,
977
+ messageTextSize,
956
978
  messageTextWeight,
979
+ column,
957
980
  showGroupMessage,
958
981
  before,
959
982
  after,
@@ -973,9 +996,9 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
973
996
  * custom React Hook function.
974
997
  */
975
998
  const {
976
- isErrorState,
977
999
  errorKey,
978
- errorMessage
1000
+ errorMessage,
1001
+ isErrorState
979
1002
  } = useFieldValidationState({
980
1003
  fieldProps: props,
981
1004
  // or fieldProps?
@@ -1006,8 +1029,8 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1006
1029
  }, label)), /*#__PURE__*/React.createElement("div", {
1007
1030
  className: "form__group-items"
1008
1031
  }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
1009
- className: `form__group-message form__group-message_type-${errorKey}`,
1010
1032
  id: `${name}-error`,
1033
+ className: `form__group-message form__group-message_type-${errorKey}`,
1011
1034
  size: updatedProps.messageTextSize,
1012
1035
  textColor: updatedProps.messageTextColor,
1013
1036
  textWeight: updatedProps.messageTextWeight
@@ -1024,15 +1047,13 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1024
1047
  });
1025
1048
 
1026
1049
  const defaultCheckboxProps = {
1027
- appearance: 'defaultPrimary',
1050
+ appearance: 'defaultPrimary sizeL solid',
1028
1051
  width: 'fill',
1029
- size: 'm',
1030
- labelTextColor: 'surfaceTextPrimary',
1031
- labelTextColorDisabled: 'surfaceTextDisabled',
1032
- labelTextSize: 's',
1033
- descTextSize: 's',
1034
- errorBorderColor: 'errorBorderSecondary',
1035
- requiredBorderColor: 'warningBorderSecondary'
1052
+ // useValidationAppearanceInputProps
1053
+ // Error
1054
+ errorAppearance: 'errorPrimary sizeL solid',
1055
+ // Required
1056
+ requiredAppearance: 'requirePrimary sizeL solid'
1036
1057
  };
1037
1058
 
1038
1059
  const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
@@ -1083,7 +1104,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
1083
1104
  validationStateKey: isErrorState ? errorKey : 'success'
1084
1105
  });
1085
1106
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1086
- className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
1107
+ className: clsx('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
1087
1108
  errorKey: errorKey,
1088
1109
  errorMessage: errorMessage,
1089
1110
  isErrorState: isErrorState,
@@ -1103,6 +1124,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
1103
1124
  isDisabled: isDisabled,
1104
1125
  autoComplete: "nope",
1105
1126
  checked: input.checked,
1127
+ isActive: input.checked,
1106
1128
  onBlur: input.onBlur,
1107
1129
  onChange: onChangeField,
1108
1130
  onFocus: input.onFocus
@@ -1113,8 +1135,11 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
1113
1135
  const defaultChipsProps = {
1114
1136
  appearance: 'surfacePrimary sizeM rounded',
1115
1137
  width: 'fill',
1116
- errorBorderColor: 'errorBorderSecondary',
1117
- requiredBorderColor: 'warningBorderSecondary'
1138
+ // useValidationAppearanceInputProps
1139
+ // Error
1140
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1141
+ // Required
1142
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1118
1143
  };
1119
1144
 
1120
1145
  function FormFieldChips(props) {
@@ -1181,7 +1206,7 @@ function FormFieldChips(props) {
1181
1206
  return emptyOptionsList;
1182
1207
  }, [input.value]);
1183
1208
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1184
- className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
1209
+ className: clsx('form-field_chips', 'form__item_chips', classNameGroupItem),
1185
1210
  errorKey: errorKey,
1186
1211
  errorMessage: errorMessage,
1187
1212
  isErrorState: isErrorState,
@@ -1216,8 +1241,11 @@ function FormFieldChips(props) {
1216
1241
  const defaultChoiceProps = {
1217
1242
  appearance: 'defaultPrimary sizeM solid rounded',
1218
1243
  width: 'fill',
1219
- errorBorderColor: 'errorBorderPrimary',
1220
- requiredBorderColor: 'warningBorderPrimary'
1244
+ // useValidationAppearanceInputProps
1245
+ // Error
1246
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1247
+ // Required
1248
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1221
1249
  };
1222
1250
 
1223
1251
  const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
@@ -1285,8 +1313,9 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1285
1313
  validationStateKey: isErrorState ? errorKey : 'success'
1286
1314
  });
1287
1315
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1288
- className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
1316
+ className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
1289
1317
  label: label,
1318
+ messageType: messageType,
1290
1319
  errorKey: errorKey,
1291
1320
  errorMessage: errorMessage,
1292
1321
  isErrorState: isErrorState,
@@ -1295,7 +1324,6 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1295
1324
  fieldClassName: "form-choice",
1296
1325
  inputName: input.name,
1297
1326
  inputValue: input.value || [],
1298
- messageType: messageType,
1299
1327
  metaActive: meta.active,
1300
1328
  showMessage: showMessage,
1301
1329
  isRequired: isRequired,
@@ -1316,7 +1344,12 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1316
1344
  });
1317
1345
 
1318
1346
  const defaultCodeProps = {
1319
- appearance: 'defaultPrimary sizeL solid rounded'
1347
+ appearance: 'defaultPrimary sizeL solid rounded',
1348
+ // useValidationAppearanceInputProps
1349
+ // Error
1350
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1351
+ // Required
1352
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1320
1353
  };
1321
1354
 
1322
1355
  const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
@@ -1357,7 +1390,7 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
1357
1390
  validationStateKey: isErrorState ? errorKey : 'success'
1358
1391
  });
1359
1392
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1360
- className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
1393
+ className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
1361
1394
  fieldClassName: 'form-code',
1362
1395
  inputName: input.name,
1363
1396
  inputValue: input.value,
@@ -1424,7 +1457,7 @@ const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props)
1424
1457
  inputProps: props
1425
1458
  });
1426
1459
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1427
- className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
1460
+ className: clsx('form-field_custom', 'form__item_custom', classNameGroupItem),
1428
1461
  errorKey: errorKey,
1429
1462
  errorMessage: errorMessage,
1430
1463
  fieldClassName: 'form-custom',
@@ -1523,7 +1556,7 @@ function FormFieldDatePicker(props) {
1523
1556
  validationStateKey: isErrorState ? errorKey : 'success'
1524
1557
  });
1525
1558
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1526
- className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
1559
+ className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
1527
1560
  errorKey: errorKey,
1528
1561
  errorMessage: errorMessage,
1529
1562
  isErrorState: isErrorState,
@@ -1551,10 +1584,13 @@ function FormFieldDatePicker(props) {
1551
1584
  }
1552
1585
 
1553
1586
  const defaultInputProps = {
1554
- appearance: 'sizeM defaultSecondary solid rounded',
1587
+ appearance: 'defaultPrimary sizeM solid rounded',
1555
1588
  width: 'fill',
1556
- errorBorderColor: 'errorBorderSecondary',
1557
- requiredBorderColor: 'warningBorderSecondary'
1589
+ // useValidationAppearanceInputProps
1590
+ // Error
1591
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1592
+ // Required
1593
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1558
1594
  };
1559
1595
 
1560
1596
  const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
@@ -1615,7 +1651,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
1615
1651
  validationStateKey: isErrorState ? errorKey : 'success'
1616
1652
  });
1617
1653
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1618
- className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1654
+ className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
1619
1655
  errorKey: errorKey,
1620
1656
  errorMessage: errorMessage,
1621
1657
  isErrorState: isErrorState,
@@ -1654,9 +1690,13 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
1654
1690
 
1655
1691
  const defaultPasswordProps = {
1656
1692
  appearance: 'sizeM defaultSecondary solid rounded',
1693
+ // useValidationAppearanceInputProps
1694
+ // Error
1695
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1696
+ // Required
1657
1697
  iconRevealableHide: icons24.View.HideValue,
1658
1698
  iconRevealableShow: icons24.View.ShowValue,
1659
- iconFill: 'surfaceItemQuaternary'
1699
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1660
1700
  };
1661
1701
 
1662
1702
  const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
@@ -1716,7 +1756,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
1716
1756
  validationStateKey: isErrorState ? errorKey : 'success'
1717
1757
  });
1718
1758
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1719
- className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1759
+ className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
1720
1760
  errorKey: errorKey,
1721
1761
  errorMessage: errorMessage,
1722
1762
  isErrorState: isErrorState,
@@ -1753,8 +1793,11 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
1753
1793
  const defaultSegmentedProps = {
1754
1794
  appearance: 'defaultPrimary sizeM solid rounded',
1755
1795
  width: 'fill',
1756
- errorLabelTextColor: 'errorTextPrimary',
1757
- requiredLabelTextColor: 'warningTextPrimary'
1796
+ // useValidationAppearanceInputProps
1797
+ // Error
1798
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1799
+ // Required
1800
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1758
1801
  };
1759
1802
 
1760
1803
  function FormFieldSegmented(props) {
@@ -1812,7 +1855,7 @@ function FormFieldSegmented(props) {
1812
1855
  validationStateKey: isErrorState ? errorKey : 'success'
1813
1856
  });
1814
1857
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1815
- className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
1858
+ className: clsx('form-field_segmented', 'form__item_segmented'),
1816
1859
  errorKey: errorKey,
1817
1860
  errorMessage: errorMessage,
1818
1861
  isErrorState: isErrorState,
@@ -1835,7 +1878,12 @@ function FormFieldSegmented(props) {
1835
1878
  }
1836
1879
 
1837
1880
  const defaultSelectProps = {
1838
- appearance: 'defaultPrimary sizeM'
1881
+ appearance: 'defaultPrimary sizeM solid rounded',
1882
+ // useValidationAppearanceInputProps
1883
+ // Error
1884
+ errorAppearance: 'errorPrimary sizeM solid rounded',
1885
+ // Required
1886
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
1839
1887
  };
1840
1888
 
1841
1889
  function getDefaultValue(options, selectValue) {
@@ -1924,7 +1972,7 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
1924
1972
  validationStateKey: isErrorState ? errorKey : 'success'
1925
1973
  });
1926
1974
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1927
- className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
1975
+ className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
1928
1976
  errorKey: errorKey,
1929
1977
  errorMessage: errorMessage,
1930
1978
  isErrorState: isErrorState,
@@ -1951,7 +1999,12 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
1951
1999
  });
1952
2000
 
1953
2001
  const defaultSwitchProps = {
1954
- appearance: 'defaultPrimary sizeL solid rounded'
2002
+ appearance: 'defaultPrimary sizeL solid rounded',
2003
+ // useValidationAppearanceInputProps
2004
+ // Error
2005
+ errorAppearance: 'errorPrimary sizeL solid rounded',
2006
+ // Required
2007
+ requiredAppearance: 'requirePrimary sizeL solid rounded'
1955
2008
  };
1956
2009
 
1957
2010
  const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
@@ -2000,7 +2053,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
2000
2053
  validationStateKey: isErrorState ? errorKey : 'success'
2001
2054
  });
2002
2055
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2003
- className: clsx('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
2056
+ className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
2004
2057
  errorKey: errorKey,
2005
2058
  errorMessage: errorMessage,
2006
2059
  isErrorState: isErrorState,
@@ -2019,7 +2072,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
2019
2072
  name: input.name,
2020
2073
  isDisabled: isDisabled,
2021
2074
  autoComplete: "nope",
2022
- checked: input.checked,
2075
+ isActive: input.checked,
2023
2076
  onBlur: input.onBlur,
2024
2077
  onChange: onChangeField,
2025
2078
  onFocus: input.onFocus
@@ -2029,8 +2082,11 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
2029
2082
 
2030
2083
  const defaultTextareaProps = {
2031
2084
  appearance: 'defaultPrimary sizeM solid rounded',
2032
- errorBorderColor: 'errorBorderSecondary',
2033
- requiredBorderColor: 'warningBorderSecondary'
2085
+ // useValidationAppearanceInputProps
2086
+ // Error
2087
+ errorAppearance: 'errorPrimary sizeM solid rounded',
2088
+ // Required
2089
+ requiredAppearance: 'requirePrimary sizeM solid rounded'
2034
2090
  };
2035
2091
 
2036
2092
  const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
@@ -2071,7 +2127,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
2071
2127
  validationStateKey: isErrorState ? errorKey : 'success'
2072
2128
  });
2073
2129
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2074
- className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
2130
+ className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
2075
2131
  errorKey: errorKey,
2076
2132
  errorMessage: errorMessage,
2077
2133
  isErrorState: isErrorState,
@@ -2163,7 +2219,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
2163
2219
  validationStateKey: isErrorState ? errorKey : 'success'
2164
2220
  });
2165
2221
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2166
- className: clsx('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
2222
+ className: clsx('form-field_maskedInput', 'form__item_maskedInput', classNameGroupItem),
2167
2223
  errorKey: errorKey,
2168
2224
  errorMessage: errorMessage,
2169
2225
  isErrorState: isErrorState,
@@ -2348,7 +2404,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
2348
2404
  validationStateKey: isErrorState ? errorKey : 'success'
2349
2405
  });
2350
2406
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2351
- className: clsx('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
2407
+ className: clsx('form-field_radio', 'form__item_radio"', classNameGroupItem),
2352
2408
  errorKey: errorKey,
2353
2409
  errorMessage: errorMessage,
2354
2410
  isErrorState: isErrorState,
@@ -2904,32 +2960,6 @@ const DEFAULT_MESSAGES_FIELDS = {
2904
2960
  // required - KEY for yellow color
2905
2961
  // error - KEY for red color
2906
2962
 
2907
- // key: 'required'
2908
- required: {
2909
- key: 'required',
2910
- message: 'Обязательное поле'
2911
- },
2912
- phone_required: {
2913
- key: 'required',
2914
- message: 'Укажите номер телефона'
2915
- },
2916
- email_required: {
2917
- key: 'required',
2918
- message: 'Укажите адрес электронной почты'
2919
- },
2920
- password_required: {
2921
- key: 'required',
2922
- message: 'Введите пароль'
2923
- },
2924
- phone_or_email_required: {
2925
- key: 'required',
2926
- message: 'Введите телефон или адрес эл. почты'
2927
- },
2928
- // key: 'error'
2929
- matches: {
2930
- key: 'error',
2931
- message: 'Допускается ввод только цифр от 0 до 9'
2932
- },
2933
2963
  min: {
2934
2964
  key: 'error',
2935
2965
  message: ({
@@ -2946,21 +2976,47 @@ const DEFAULT_MESSAGES_FIELDS = {
2946
2976
  key: 'error',
2947
2977
  message: 'Введите корректный URL-адрес'
2948
2978
  },
2979
+ email_error: {
2980
+ key: 'error',
2981
+ message: 'Введите корректный адрес электронной почты'
2982
+ },
2983
+ phone_error: {
2984
+ key: 'error',
2985
+ message: 'Введите корректный номер телефона'
2986
+ },
2987
+ email_required: {
2988
+ key: 'required',
2989
+ message: 'Укажите адрес электронной почты'
2990
+ },
2949
2991
  invalid_value: {
2950
2992
  key: 'error',
2951
2993
  message: 'Некорректное значение'
2952
2994
  },
2995
+ // key: 'error'
2996
+ matches: {
2997
+ key: 'error',
2998
+ message: 'Допускается ввод только цифр от 0 до 9'
2999
+ },
2953
3000
  numeric_value: {
2954
3001
  key: 'error',
2955
3002
  message: 'Только числовое значение'
2956
3003
  },
2957
- phone_error: {
2958
- key: 'error',
2959
- message: 'Введите корректный номер телефона'
3004
+ password_required: {
3005
+ key: 'required',
3006
+ message: 'Введите пароль'
2960
3007
  },
2961
- email_error: {
2962
- key: 'error',
2963
- message: 'Введите корректный адрес электронной почты'
3008
+ phone_or_email_required: {
3009
+ key: 'required',
3010
+ message: 'Введите телефон или адрес эл. почты'
3011
+ },
3012
+ phone_required: {
3013
+ key: 'required',
3014
+ message: 'Укажите номер телефона'
3015
+ },
3016
+ // key: 'required'
3017
+ required: {
3018
+ key: 'required',
3019
+ message: 'Обязательное поле'
2964
3020
  }
2965
3021
  };
2966
3022
 
@@ -3062,4 +3118,4 @@ const getErrorsForFinalForm = error => {
3062
3118
  return formErrors;
3063
3119
  };
3064
3120
 
3065
- export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
3121
+ export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/forms",
3
- "version": "1.1.30",
3
+ "version": "1.1.32",
4
4
  "description": "Forms fields, inputs, etc.",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -33,12 +33,12 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@itcase/common": "^1.2.28",
36
- "@itcase/config": "^1.0.54",
36
+ "@itcase/config": "^1.0.55",
37
37
  "@itcase/icons": "^1.2.16",
38
- "@itcase/storybook-config": "^1.1.66",
38
+ "@itcase/storybook-config": "^1.1.77",
39
39
  "@itcase/tokens-am": "^1.1.19",
40
40
  "@itcase/tokens-baikal": "^1.1.17",
41
- "@itcase/ui": "^1.8.75",
41
+ "@itcase/ui": "^1.8.87",
42
42
  "axios": "^1.11.0",
43
43
  "clsx": "^2.1.1",
44
44
  "final-form": "4.20.10",
@@ -61,7 +61,7 @@
61
61
  "@babel/preset-react": "^7.27.1",
62
62
  "@commitlint/cli": "^19.8.1",
63
63
  "@commitlint/config-conventional": "^19.8.1",
64
- "@itcase/lint": "^1.1.29",
64
+ "@itcase/lint": "^1.1.30",
65
65
  "@rollup/plugin-babel": "^6.0.4",
66
66
  "@rollup/plugin-commonjs": "^28.0.6",
67
67
  "@rollup/plugin-json": "^6.1.0",
@@ -76,15 +76,15 @@
76
76
  "conventional-changelog-conventionalcommits": "^9.1.0",
77
77
  "eslint": "9.32.0",
78
78
  "husky": "^9.1.7",
79
- "lint-staged": "^16.1.2",
79
+ "lint-staged": "^16.1.4",
80
80
  "postcss": "^8.5.6",
81
81
  "prettier": "3.6.2",
82
- "rollup": "^4.46.0",
82
+ "rollup": "^4.46.2",
83
83
  "rollup-plugin-peer-deps-external": "^2.2.4",
84
84
  "semantic-release": "^24.2.7",
85
- "storybook": "^9.0.18",
86
- "stylelint": "^16.22.0",
87
- "typescript": "^5.8.3",
88
- "yup": "^1.6.1"
85
+ "storybook": "^9.1.1",
86
+ "stylelint": "^16.23.0",
87
+ "typescript": "^5.9.2",
88
+ "yup": "^1.7.0"
89
89
  }
90
90
  }