@itcase/forms 1.1.31 → 1.1.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.
Files changed (10) 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/MaskedInput/FormFieldMaskedInput.css +2 -10
  4. package/dist/css/form/Field/Switch/FormFieldSwitch.css +8 -28
  5. package/dist/css/form/Form/Form.css +0 -1
  6. package/dist/css/form/Form/css/__item/form__item.css +0 -1
  7. package/dist/css/form/FormField/FormField.css +1 -0
  8. package/dist/itcase-forms.cjs.js +109 -57
  9. package/dist/itcase-forms.esm.js +108 -58
  10. package/package.json +2 -2
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/MaskedInput/FormFieldMaskedInput.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .form {
2
- &-maskedInput {
2
+ &-masked-input {
3
3
  position: relative;
4
4
  &&_state {
5
5
  &_success {
@@ -34,12 +34,4 @@
34
34
  }
35
35
  }
36
36
  }
37
- }
38
-
39
- :root {
40
- --input-success-border: var(--color-success-border-primary);
41
- --input-success-border-hover: var(--color-surface-border-quaternary);
42
- --input-error-border: var(--color-error-border-primary);
43
- --input-focus-background: var(--color-surface-primary);
44
- --input-focus-border: var(--color-surface-border-quaternary);
45
- }
37
+ }
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: 8px 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;
package/dist/itcase-forms.cjs.js CHANGED
@@ -229,8 +229,10 @@ function useValidationAppearanceInputProps(props) {
229
229
  updatedInputProps[propKey] = propValue;
230
230
  }
231
231
  });
232
+ return updatedInputProps;
233
+ } else {
234
+ return inputProps;
232
235
  }
233
- return updatedInputProps;
234
236
  }, [validationStateKey, inputProps]);
235
237
  return validationAppearanceInputProps;
236
238
  }
@@ -246,6 +248,15 @@ const defaultFieldProps = {
246
248
  requiredMessageTextColor: 'warningTextSecondary',
247
249
  showMessage: true
248
250
  };
251
+ const defaultFieldSizeS = {
252
+ size: 's',
253
+ labelTextSize: 's',
254
+ messageTextSize: 's',
255
+ errorMessageTextSize: 's',
256
+ helpTextSize: 's',
257
+ requiredMessageTextSize: 's',
258
+ ...defaultFieldProps
259
+ };
249
260
  const defaultFieldSizeM = {
250
261
  size: 'm',
251
262
  labelTextSize: 's',
@@ -255,6 +266,15 @@ const defaultFieldSizeM = {
255
266
  requiredMessageTextSize: 's',
256
267
  ...defaultFieldProps
257
268
  };
269
+ const defaultFieldSizeL = {
270
+ size: 'l',
271
+ labelTextSize: 's',
272
+ messageTextSize: 's',
273
+ errorMessageTextSize: 's',
274
+ helpTextSize: 's',
275
+ requiredMessageTextSize: 's',
276
+ ...defaultFieldProps
277
+ };
258
278
  const defaultFieldSizeXL = {
259
279
  size: 'xl',
260
280
  labelTextSize: 's',
@@ -942,29 +962,34 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
942
962
 
943
963
  const defaultGroupProps = {
944
964
  width: 'fill',
945
- labelTextColor: 'surfaceTextPrimary',
946
- labelTextSize: 'h5',
947
- labelTextWeight: 500
965
+ labelTextSize: 's',
966
+ messageTextColor: 'surfaceTextPrimary',
967
+ messageTextSize: 's',
968
+ errorMessageTextSize: 's',
969
+ errorMessageTextColor: 'errorTextSecondary',
970
+ helpTextSize: 's',
971
+ requiredMessageTextColor: 'warningTextSecondary',
972
+ requiredMessageTextSize: 's'
948
973
  };
949
974
 
950
975
  const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(props) {
951
976
  const {
977
+ dataTour,
952
978
  className,
953
979
  name,
980
+ title,
981
+ titleTextColor,
982
+ titleTextSize,
983
+ titleTextWeight,
954
984
  label,
955
985
  labelTextColor,
956
986
  labelTextSize,
957
987
  labelTextWeight,
958
988
  message,
959
- column,
960
- dataTour,
961
- title,
962
- titleTextSize,
963
- titleTextColor,
964
- titleTextWeight,
965
- messageTextColor = 'surfaceTextTertiary',
966
- messageTextSize = 's',
989
+ messageTextColor,
990
+ messageTextSize,
967
991
  messageTextWeight,
992
+ column,
968
993
  showGroupMessage,
969
994
  before,
970
995
  after,
@@ -984,9 +1009,9 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
984
1009
  * custom React Hook function.
985
1010
  */
986
1011
  const {
987
- isErrorState,
988
1012
  errorKey,
989
- errorMessage
1013
+ errorMessage,
1014
+ isErrorState
990
1015
  } = useFieldValidationState({
991
1016
  fieldProps: props,
992
1017
  // or fieldProps?
@@ -1017,8 +1042,8 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
1017
1042
  }, label)), /*#__PURE__*/React__default.default.createElement("div", {
1018
1043
  className: "form__group-items"
1019
1044
  }, 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
1045
  id: `${name}-error`,
1046
+ className: `form__group-message form__group-message_type-${errorKey}`,
1022
1047
  size: updatedProps.messageTextSize,
1023
1048
  textColor: updatedProps.messageTextColor,
1024
1049
  textWeight: updatedProps.messageTextWeight
@@ -1035,13 +1060,13 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
1035
1060
  });
1036
1061
 
1037
1062
  const defaultCheckboxProps = {
1038
- appearance: 'defaultPrimary sizeM solid',
1063
+ appearance: 'defaultPrimary sizeL solid',
1039
1064
  width: 'fill',
1040
1065
  // useValidationAppearanceInputProps
1041
1066
  // Error
1042
- errorAppearance: 'errorPrimary sizeM solid rounded',
1067
+ errorAppearance: 'errorPrimary sizeL solid',
1043
1068
  // Required
1044
- requiredAppearance: 'requirePrimary sizeM solid rounded'
1069
+ requiredAppearance: 'requirePrimary sizeL solid'
1045
1070
  };
1046
1071
 
1047
1072
  const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function FormFieldCheckbox(props) {
@@ -1081,6 +1106,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
1081
1106
  errorKey,
1082
1107
  errorMessage,
1083
1108
  isErrorState,
1109
+ successKey,
1084
1110
  isValidState
1085
1111
  } = useFieldValidationState({
1086
1112
  fieldProps: fieldProps,
@@ -1089,10 +1115,10 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
1089
1115
  });
1090
1116
  const updatedInputProps = useValidationAppearanceInputProps({
1091
1117
  inputProps: inputProps,
1092
- validationStateKey: isErrorState ? errorKey : 'success'
1118
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1093
1119
  });
1094
1120
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1095
- className: clsx__default.default('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
1121
+ className: clsx__default.default('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
1096
1122
  errorKey: errorKey,
1097
1123
  errorMessage: errorMessage,
1098
1124
  isErrorState: isErrorState,
@@ -1112,6 +1138,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
1112
1138
  isDisabled: isDisabled,
1113
1139
  autoComplete: "nope",
1114
1140
  checked: input.checked,
1141
+ isActive: input.checked,
1115
1142
  onBlur: input.onBlur,
1116
1143
  onChange: onChangeField,
1117
1144
  onFocus: input.onFocus
@@ -1127,6 +1154,8 @@ const defaultChipsProps = {
1127
1154
  errorAppearance: 'errorPrimary sizeM solid rounded',
1128
1155
  // Required
1129
1156
  requiredAppearance: 'requirePrimary sizeM solid rounded'
1157
+ // Success
1158
+ // successAppearance: 'successPrimary sizeM solid rounded',
1130
1159
  };
1131
1160
 
1132
1161
  function FormFieldChips(props) {
@@ -1171,6 +1200,7 @@ function FormFieldChips(props) {
1171
1200
  errorKey,
1172
1201
  errorMessage,
1173
1202
  isErrorState,
1203
+ successKey,
1174
1204
  isValidState
1175
1205
  } = useFieldValidationState({
1176
1206
  fieldProps: fieldProps,
@@ -1179,7 +1209,7 @@ function FormFieldChips(props) {
1179
1209
  });
1180
1210
  const updatedInputProps = useValidationAppearanceInputProps({
1181
1211
  inputProps: inputProps,
1182
- validationStateKey: isErrorState ? errorKey : 'success'
1212
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1183
1213
  });
1184
1214
  const activeOptionsList = React.useMemo(() => {
1185
1215
  const emptyOptionsList = [{
@@ -1193,7 +1223,7 @@ function FormFieldChips(props) {
1193
1223
  return emptyOptionsList;
1194
1224
  }, [input.value]);
1195
1225
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1196
- className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
1226
+ className: clsx__default.default('form-field_chips', 'form__item_chips', classNameGroupItem),
1197
1227
  errorKey: errorKey,
1198
1228
  errorMessage: errorMessage,
1199
1229
  isErrorState: isErrorState,
@@ -1240,11 +1270,11 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1240
1270
  name,
1241
1271
  initialValue,
1242
1272
  label,
1273
+ messageType,
1243
1274
  isDisabled,
1244
1275
  classNameGroupItem,
1245
1276
  fieldProps,
1246
1277
  inputProps,
1247
- messageType,
1248
1278
  options,
1249
1279
  placeholder,
1250
1280
  showMessage,
@@ -1286,10 +1316,11 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1286
1316
  return emptyOption;
1287
1317
  }, [input.value]);
1288
1318
  const {
1289
- isErrorState,
1290
- isValidState,
1291
1319
  errorKey,
1292
- errorMessage
1320
+ errorMessage,
1321
+ isErrorState,
1322
+ successKey,
1323
+ isValidState
1293
1324
  } = useFieldValidationState({
1294
1325
  fieldProps: fieldProps,
1295
1326
  input: input,
@@ -1297,11 +1328,12 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1297
1328
  });
1298
1329
  const updatedInputProps = useValidationAppearanceInputProps({
1299
1330
  inputProps: inputProps,
1300
- validationStateKey: isErrorState ? errorKey : 'success'
1331
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1301
1332
  });
1302
1333
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1303
- className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
1334
+ className: clsx__default.default('form-field_choice', 'form__item_choice', classNameGroupItem),
1304
1335
  label: label,
1336
+ messageType: messageType,
1305
1337
  errorKey: errorKey,
1306
1338
  errorMessage: errorMessage,
1307
1339
  isErrorState: isErrorState,
@@ -1310,7 +1342,6 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1310
1342
  fieldClassName: "form-choice",
1311
1343
  inputName: input.name,
1312
1344
  inputValue: input.value || [],
1313
- messageType: messageType,
1314
1345
  metaActive: meta.active,
1315
1346
  showMessage: showMessage,
1316
1347
  isRequired: isRequired,
@@ -1323,9 +1354,9 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
1323
1354
  inputValue: input.value || [],
1324
1355
  options: options,
1325
1356
  placeholder: placeholder,
1357
+ setActiveSegment: setActiveSegment,
1326
1358
  isCheckbox: isCheckbox,
1327
- isRequired: isRequired,
1328
- setActiveSegment: setActiveSegment
1359
+ isRequired: isRequired
1329
1360
  }, updatedInputProps)));
1330
1361
  });
1331
1362
  });
@@ -1343,6 +1374,8 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
1343
1374
  const {
1344
1375
  name,
1345
1376
  initialValue,
1377
+ messageType,
1378
+ label,
1346
1379
  isDisabled,
1347
1380
  classNameGroupItem,
1348
1381
  fieldProps = {},
@@ -1365,19 +1398,27 @@ const FormFieldCode = /*#__PURE__*/React__default.default.memo(function FormFiel
1365
1398
  */
1366
1399
 
1367
1400
  const {
1401
+ errorKey,
1402
+ errorMessage,
1368
1403
  isErrorState,
1369
- isValidState,
1370
- errorKey} = useFieldValidationState({
1404
+ successKey,
1405
+ isValidState
1406
+ } = useFieldValidationState({
1371
1407
  fieldProps: fieldProps,
1372
1408
  input: input,
1373
1409
  meta: meta
1374
1410
  });
1375
1411
  const updatedInputProps = useValidationAppearanceInputProps({
1376
1412
  inputProps: inputProps,
1377
- validationStateKey: isErrorState ? errorKey : 'success'
1413
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1378
1414
  });
1379
1415
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1380
- className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
1416
+ className: clsx__default.default('form-field-code', 'form__item_code', classNameGroupItem),
1417
+ label: label,
1418
+ messageType: messageType,
1419
+ errorKey: errorKey,
1420
+ errorMessage: errorMessage,
1421
+ isErrorState: isErrorState,
1381
1422
  fieldClassName: 'form-code',
1382
1423
  inputName: input.name,
1383
1424
  inputValue: input.value,
@@ -1444,7 +1485,7 @@ const FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFi
1444
1485
  inputProps: props
1445
1486
  });
1446
1487
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1447
- className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
1488
+ className: clsx__default.default('form-field_custom', 'form__item_custom', classNameGroupItem),
1448
1489
  errorKey: errorKey,
1449
1490
  errorMessage: errorMessage,
1450
1491
  fieldClassName: 'form-custom',
@@ -1543,7 +1584,7 @@ function FormFieldDatePicker(props) {
1543
1584
  validationStateKey: isErrorState ? errorKey : 'success'
1544
1585
  });
1545
1586
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1546
- className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
1587
+ className: clsx__default.default('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
1547
1588
  errorKey: errorKey,
1548
1589
  errorMessage: errorMessage,
1549
1590
  isErrorState: isErrorState,
@@ -1577,7 +1618,9 @@ const defaultInputProps = {
1577
1618
  // Error
1578
1619
  errorAppearance: 'errorPrimary sizeM solid rounded',
1579
1620
  // Required
1580
- requiredAppearance: 'requirePrimary sizeM solid rounded'
1621
+ requiredAppearance: 'requirePrimary sizeM solid rounded',
1622
+ // Success
1623
+ successAppearance: 'successPrimary sizeM solid rounded'
1581
1624
  };
1582
1625
 
1583
1626
  const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFieldInput(props) {
@@ -1627,6 +1670,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
1627
1670
  errorKey,
1628
1671
  errorMessage,
1629
1672
  isErrorState,
1673
+ successKey,
1630
1674
  isValidState
1631
1675
  } = useFieldValidationState({
1632
1676
  fieldProps: fieldProps,
@@ -1635,10 +1679,10 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
1635
1679
  });
1636
1680
  const updatedInputProps = useValidationAppearanceInputProps({
1637
1681
  inputProps: inputProps,
1638
- validationStateKey: isErrorState ? errorKey : 'success'
1682
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1639
1683
  });
1640
1684
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1641
- className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1685
+ className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
1642
1686
  errorKey: errorKey,
1643
1687
  errorMessage: errorMessage,
1644
1688
  isErrorState: isErrorState,
@@ -1732,6 +1776,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
1732
1776
  errorKey,
1733
1777
  errorMessage,
1734
1778
  isErrorState,
1779
+ successKey,
1735
1780
  isValidState
1736
1781
  } = useFieldValidationState({
1737
1782
  fieldProps: fieldProps,
@@ -1740,10 +1785,10 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
1740
1785
  });
1741
1786
  const updatedInputProps = useValidationAppearanceInputProps({
1742
1787
  inputProps: inputProps,
1743
- validationStateKey: isErrorState ? errorKey : 'success'
1788
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1744
1789
  });
1745
1790
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1746
- className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1791
+ className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
1747
1792
  errorKey: errorKey,
1748
1793
  errorMessage: errorMessage,
1749
1794
  isErrorState: isErrorState,
@@ -1831,6 +1876,7 @@ function FormFieldSegmented(props) {
1831
1876
  errorKey,
1832
1877
  errorMessage,
1833
1878
  isErrorState,
1879
+ successKey,
1834
1880
  isValidState
1835
1881
  } = useFieldValidationState({
1836
1882
  fieldProps: fieldProps,
@@ -1839,10 +1885,10 @@ function FormFieldSegmented(props) {
1839
1885
  });
1840
1886
  const updatedInputProps = useValidationAppearanceInputProps({
1841
1887
  inputProps: inputProps,
1842
- validationStateKey: isErrorState ? errorKey : 'success'
1888
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1843
1889
  });
1844
1890
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1845
- className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
1891
+ className: clsx__default.default('form-field_segmented', 'form__item_segmented'),
1846
1892
  errorKey: errorKey,
1847
1893
  errorMessage: errorMessage,
1848
1894
  isErrorState: isErrorState,
@@ -1945,10 +1991,11 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
1945
1991
  setSelectedOptions(defaultValue);
1946
1992
  }, [defaultValue]);
1947
1993
  const {
1948
- isErrorState,
1949
- isValidState,
1950
1994
  errorKey,
1951
- errorMessage
1995
+ errorMessage,
1996
+ isErrorState,
1997
+ successKey,
1998
+ isValidState
1952
1999
  } = useFieldValidationState({
1953
2000
  fieldProps: fieldProps,
1954
2001
  input: input,
@@ -1956,10 +2003,10 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
1956
2003
  });
1957
2004
  const updatedSelectProps = useValidationAppearanceInputProps({
1958
2005
  inputProps: selectProps,
1959
- validationStateKey: isErrorState ? errorKey : 'success'
2006
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1960
2007
  });
1961
2008
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
1962
- className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
2009
+ className: clsx__default.default('form-field_select', 'form__item_select', classNameGroupItem),
1963
2010
  errorKey: errorKey,
1964
2011
  errorMessage: errorMessage,
1965
2012
  isErrorState: isErrorState,
@@ -2029,6 +2076,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
2029
2076
  errorKey,
2030
2077
  errorMessage,
2031
2078
  isErrorState,
2079
+ successKey,
2032
2080
  isValidState
2033
2081
  } = useFieldValidationState({
2034
2082
  fieldProps: fieldProps,
@@ -2037,10 +2085,10 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
2037
2085
  });
2038
2086
  const updatedInputProps = useValidationAppearanceInputProps({
2039
2087
  inputProps: inputProps,
2040
- validationStateKey: isErrorState ? errorKey : 'success'
2088
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2041
2089
  });
2042
2090
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2043
- className: clsx__default.default('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
2091
+ className: clsx__default.default('form-field-switch', 'form__item_switch', classNameGroupItem),
2044
2092
  errorKey: errorKey,
2045
2093
  errorMessage: errorMessage,
2046
2094
  isErrorState: isErrorState,
@@ -2059,7 +2107,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
2059
2107
  name: input.name,
2060
2108
  isDisabled: isDisabled,
2061
2109
  autoComplete: "nope",
2062
- checked: input.checked,
2110
+ isActive: input.checked,
2063
2111
  onBlur: input.onBlur,
2064
2112
  onChange: onChangeField,
2065
2113
  onFocus: input.onFocus
@@ -2103,6 +2151,7 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
2103
2151
  errorKey,
2104
2152
  errorMessage,
2105
2153
  isErrorState,
2154
+ successKey,
2106
2155
  isValidState
2107
2156
  } = useFieldValidationState({
2108
2157
  fieldProps: fieldProps,
@@ -2111,10 +2160,10 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
2111
2160
  });
2112
2161
  const updatedInputProps = useValidationAppearanceInputProps({
2113
2162
  inputProps: inputProps,
2114
- validationStateKey: isErrorState ? errorKey : 'success'
2163
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2115
2164
  });
2116
2165
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2117
- className: clsx__default.default('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
2166
+ className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
2118
2167
  errorKey: errorKey,
2119
2168
  errorMessage: errorMessage,
2120
2169
  isErrorState: isErrorState,
@@ -2195,6 +2244,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
2195
2244
  errorKey,
2196
2245
  errorMessage,
2197
2246
  isErrorState,
2247
+ successKey,
2198
2248
  isValidState
2199
2249
  } = useFieldValidationState({
2200
2250
  fieldProps: fieldProps,
@@ -2203,10 +2253,10 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
2203
2253
  });
2204
2254
  const updatedInputProps = useValidationAppearanceInputProps({
2205
2255
  inputProps: inputProps,
2206
- validationStateKey: isErrorState ? errorKey : 'success'
2256
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2207
2257
  });
2208
2258
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2209
- className: clsx__default.default('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
2259
+ className: clsx__default.default('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
2210
2260
  errorKey: errorKey,
2211
2261
  errorMessage: errorMessage,
2212
2262
  isErrorState: isErrorState,
@@ -2391,7 +2441,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
2391
2441
  validationStateKey: isErrorState ? errorKey : 'success'
2392
2442
  });
2393
2443
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2394
- className: clsx__default.default('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
2444
+ className: clsx__default.default('form-field_radio', 'form__item_radio"', classNameGroupItem),
2395
2445
  errorKey: errorKey,
2396
2446
  errorMessage: errorMessage,
2397
2447
  isErrorState: isErrorState,
@@ -3146,7 +3196,9 @@ exports.defaultCodeProps = defaultCodeProps;
3146
3196
  exports.defaultDatepickerProps = defaultDatepickerProps;
3147
3197
  exports.defaultDropzoneProps = defaultDropzoneProps;
3148
3198
  exports.defaultFieldProps = defaultFieldProps;
3199
+ exports.defaultFieldSizeL = defaultFieldSizeL;
3149
3200
  exports.defaultFieldSizeM = defaultFieldSizeM;
3201
+ exports.defaultFieldSizeS = defaultFieldSizeS;
3150
3202
  exports.defaultFieldSizeXL = defaultFieldSizeXL;
3151
3203
  exports.defaultGroupProps = defaultGroupProps;
3152
3204
  exports.defaultInputProps = defaultInputProps;
package/dist/itcase-forms.esm.js CHANGED
@@ -218,8 +218,10 @@ function useValidationAppearanceInputProps(props) {
218
218
  updatedInputProps[propKey] = propValue;
219
219
  }
220
220
  });
221
+ return updatedInputProps;
222
+ } else {
223
+ return inputProps;
221
224
  }
222
- return updatedInputProps;
223
225
  }, [validationStateKey, inputProps]);
224
226
  return validationAppearanceInputProps;
225
227
  }
@@ -235,6 +237,15 @@ const defaultFieldProps = {
235
237
  requiredMessageTextColor: 'warningTextSecondary',
236
238
  showMessage: true
237
239
  };
240
+ const defaultFieldSizeS = {
241
+ size: 's',
242
+ labelTextSize: 's',
243
+ messageTextSize: 's',
244
+ errorMessageTextSize: 's',
245
+ helpTextSize: 's',
246
+ requiredMessageTextSize: 's',
247
+ ...defaultFieldProps
248
+ };
238
249
  const defaultFieldSizeM = {
239
250
  size: 'm',
240
251
  labelTextSize: 's',
@@ -244,6 +255,15 @@ const defaultFieldSizeM = {
244
255
  requiredMessageTextSize: 's',
245
256
  ...defaultFieldProps
246
257
  };
258
+ const defaultFieldSizeL = {
259
+ size: 'l',
260
+ labelTextSize: 's',
261
+ messageTextSize: 's',
262
+ errorMessageTextSize: 's',
263
+ helpTextSize: 's',
264
+ requiredMessageTextSize: 's',
265
+ ...defaultFieldProps
266
+ };
247
267
  const defaultFieldSizeXL = {
248
268
  size: 'xl',
249
269
  labelTextSize: 's',
@@ -931,29 +951,34 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
931
951
 
932
952
  const defaultGroupProps = {
933
953
  width: 'fill',
934
- labelTextColor: 'surfaceTextPrimary',
935
- labelTextSize: 'h5',
936
- labelTextWeight: 500
954
+ labelTextSize: 's',
955
+ messageTextColor: 'surfaceTextPrimary',
956
+ messageTextSize: 's',
957
+ errorMessageTextSize: 's',
958
+ errorMessageTextColor: 'errorTextSecondary',
959
+ helpTextSize: 's',
960
+ requiredMessageTextColor: 'warningTextSecondary',
961
+ requiredMessageTextSize: 's'
937
962
  };
938
963
 
939
964
  const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
940
965
  const {
966
+ dataTour,
941
967
  className,
942
968
  name,
969
+ title,
970
+ titleTextColor,
971
+ titleTextSize,
972
+ titleTextWeight,
943
973
  label,
944
974
  labelTextColor,
945
975
  labelTextSize,
946
976
  labelTextWeight,
947
977
  message,
948
- column,
949
- dataTour,
950
- title,
951
- titleTextSize,
952
- titleTextColor,
953
- titleTextWeight,
954
- messageTextColor = 'surfaceTextTertiary',
955
- messageTextSize = 's',
978
+ messageTextColor,
979
+ messageTextSize,
956
980
  messageTextWeight,
981
+ column,
957
982
  showGroupMessage,
958
983
  before,
959
984
  after,
@@ -973,9 +998,9 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
973
998
  * custom React Hook function.
974
999
  */
975
1000
  const {
976
- isErrorState,
977
1001
  errorKey,
978
- errorMessage
1002
+ errorMessage,
1003
+ isErrorState
979
1004
  } = useFieldValidationState({
980
1005
  fieldProps: props,
981
1006
  // or fieldProps?
@@ -1006,8 +1031,8 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1006
1031
  }, label)), /*#__PURE__*/React.createElement("div", {
1007
1032
  className: "form__group-items"
1008
1033
  }, 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
1034
  id: `${name}-error`,
1035
+ className: `form__group-message form__group-message_type-${errorKey}`,
1011
1036
  size: updatedProps.messageTextSize,
1012
1037
  textColor: updatedProps.messageTextColor,
1013
1038
  textWeight: updatedProps.messageTextWeight
@@ -1024,13 +1049,13 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1024
1049
  });
1025
1050
 
1026
1051
  const defaultCheckboxProps = {
1027
- appearance: 'defaultPrimary sizeM solid',
1052
+ appearance: 'defaultPrimary sizeL solid',
1028
1053
  width: 'fill',
1029
1054
  // useValidationAppearanceInputProps
1030
1055
  // Error
1031
- errorAppearance: 'errorPrimary sizeM solid rounded',
1056
+ errorAppearance: 'errorPrimary sizeL solid',
1032
1057
  // Required
1033
- requiredAppearance: 'requirePrimary sizeM solid rounded'
1058
+ requiredAppearance: 'requirePrimary sizeL solid'
1034
1059
  };
1035
1060
 
1036
1061
  const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
@@ -1070,6 +1095,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
1070
1095
  errorKey,
1071
1096
  errorMessage,
1072
1097
  isErrorState,
1098
+ successKey,
1073
1099
  isValidState
1074
1100
  } = useFieldValidationState({
1075
1101
  fieldProps: fieldProps,
@@ -1078,10 +1104,10 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
1078
1104
  });
1079
1105
  const updatedInputProps = useValidationAppearanceInputProps({
1080
1106
  inputProps: inputProps,
1081
- validationStateKey: isErrorState ? errorKey : 'success'
1107
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1082
1108
  });
1083
1109
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1084
- className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
1110
+ className: clsx('form-field-checkbox', 'form__item_checkbox', classNameGroupItem),
1085
1111
  errorKey: errorKey,
1086
1112
  errorMessage: errorMessage,
1087
1113
  isErrorState: isErrorState,
@@ -1101,6 +1127,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
1101
1127
  isDisabled: isDisabled,
1102
1128
  autoComplete: "nope",
1103
1129
  checked: input.checked,
1130
+ isActive: input.checked,
1104
1131
  onBlur: input.onBlur,
1105
1132
  onChange: onChangeField,
1106
1133
  onFocus: input.onFocus
@@ -1116,6 +1143,8 @@ const defaultChipsProps = {
1116
1143
  errorAppearance: 'errorPrimary sizeM solid rounded',
1117
1144
  // Required
1118
1145
  requiredAppearance: 'requirePrimary sizeM solid rounded'
1146
+ // Success
1147
+ // successAppearance: 'successPrimary sizeM solid rounded',
1119
1148
  };
1120
1149
 
1121
1150
  function FormFieldChips(props) {
@@ -1160,6 +1189,7 @@ function FormFieldChips(props) {
1160
1189
  errorKey,
1161
1190
  errorMessage,
1162
1191
  isErrorState,
1192
+ successKey,
1163
1193
  isValidState
1164
1194
  } = useFieldValidationState({
1165
1195
  fieldProps: fieldProps,
@@ -1168,7 +1198,7 @@ function FormFieldChips(props) {
1168
1198
  });
1169
1199
  const updatedInputProps = useValidationAppearanceInputProps({
1170
1200
  inputProps: inputProps,
1171
- validationStateKey: isErrorState ? errorKey : 'success'
1201
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1172
1202
  });
1173
1203
  const activeOptionsList = useMemo(() => {
1174
1204
  const emptyOptionsList = [{
@@ -1182,7 +1212,7 @@ function FormFieldChips(props) {
1182
1212
  return emptyOptionsList;
1183
1213
  }, [input.value]);
1184
1214
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1185
- className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
1215
+ className: clsx('form-field_chips', 'form__item_chips', classNameGroupItem),
1186
1216
  errorKey: errorKey,
1187
1217
  errorMessage: errorMessage,
1188
1218
  isErrorState: isErrorState,
@@ -1229,11 +1259,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1229
1259
  name,
1230
1260
  initialValue,
1231
1261
  label,
1262
+ messageType,
1232
1263
  isDisabled,
1233
1264
  classNameGroupItem,
1234
1265
  fieldProps,
1235
1266
  inputProps,
1236
- messageType,
1237
1267
  options,
1238
1268
  placeholder,
1239
1269
  showMessage,
@@ -1275,10 +1305,11 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1275
1305
  return emptyOption;
1276
1306
  }, [input.value]);
1277
1307
  const {
1278
- isErrorState,
1279
- isValidState,
1280
1308
  errorKey,
1281
- errorMessage
1309
+ errorMessage,
1310
+ isErrorState,
1311
+ successKey,
1312
+ isValidState
1282
1313
  } = useFieldValidationState({
1283
1314
  fieldProps: fieldProps,
1284
1315
  input: input,
@@ -1286,11 +1317,12 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1286
1317
  });
1287
1318
  const updatedInputProps = useValidationAppearanceInputProps({
1288
1319
  inputProps: inputProps,
1289
- validationStateKey: isErrorState ? errorKey : 'success'
1320
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1290
1321
  });
1291
1322
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1292
- className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
1323
+ className: clsx('form-field_choice', 'form__item_choice', classNameGroupItem),
1293
1324
  label: label,
1325
+ messageType: messageType,
1294
1326
  errorKey: errorKey,
1295
1327
  errorMessage: errorMessage,
1296
1328
  isErrorState: isErrorState,
@@ -1299,7 +1331,6 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1299
1331
  fieldClassName: "form-choice",
1300
1332
  inputName: input.name,
1301
1333
  inputValue: input.value || [],
1302
- messageType: messageType,
1303
1334
  metaActive: meta.active,
1304
1335
  showMessage: showMessage,
1305
1336
  isRequired: isRequired,
@@ -1312,9 +1343,9 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
1312
1343
  inputValue: input.value || [],
1313
1344
  options: options,
1314
1345
  placeholder: placeholder,
1346
+ setActiveSegment: setActiveSegment,
1315
1347
  isCheckbox: isCheckbox,
1316
- isRequired: isRequired,
1317
- setActiveSegment: setActiveSegment
1348
+ isRequired: isRequired
1318
1349
  }, updatedInputProps)));
1319
1350
  });
1320
1351
  });
@@ -1332,6 +1363,8 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
1332
1363
  const {
1333
1364
  name,
1334
1365
  initialValue,
1366
+ messageType,
1367
+ label,
1335
1368
  isDisabled,
1336
1369
  classNameGroupItem,
1337
1370
  fieldProps = {},
@@ -1354,19 +1387,27 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
1354
1387
  */
1355
1388
 
1356
1389
  const {
1390
+ errorKey,
1391
+ errorMessage,
1357
1392
  isErrorState,
1358
- isValidState,
1359
- errorKey} = useFieldValidationState({
1393
+ successKey,
1394
+ isValidState
1395
+ } = useFieldValidationState({
1360
1396
  fieldProps: fieldProps,
1361
1397
  input: input,
1362
1398
  meta: meta
1363
1399
  });
1364
1400
  const updatedInputProps = useValidationAppearanceInputProps({
1365
1401
  inputProps: inputProps,
1366
- validationStateKey: isErrorState ? errorKey : 'success'
1402
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1367
1403
  });
1368
1404
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1369
- className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
1405
+ className: clsx('form-field-code', 'form__item_code', classNameGroupItem),
1406
+ label: label,
1407
+ messageType: messageType,
1408
+ errorKey: errorKey,
1409
+ errorMessage: errorMessage,
1410
+ isErrorState: isErrorState,
1370
1411
  fieldClassName: 'form-code',
1371
1412
  inputName: input.name,
1372
1413
  inputValue: input.value,
@@ -1433,7 +1474,7 @@ const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props)
1433
1474
  inputProps: props
1434
1475
  });
1435
1476
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1436
- className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
1477
+ className: clsx('form-field_custom', 'form__item_custom', classNameGroupItem),
1437
1478
  errorKey: errorKey,
1438
1479
  errorMessage: errorMessage,
1439
1480
  fieldClassName: 'form-custom',
@@ -1532,7 +1573,7 @@ function FormFieldDatePicker(props) {
1532
1573
  validationStateKey: isErrorState ? errorKey : 'success'
1533
1574
  });
1534
1575
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1535
- className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
1576
+ className: clsx('form-field_datepicker', 'form__item_datepicker', classNameGroupItem),
1536
1577
  errorKey: errorKey,
1537
1578
  errorMessage: errorMessage,
1538
1579
  isErrorState: isErrorState,
@@ -1566,7 +1607,9 @@ const defaultInputProps = {
1566
1607
  // Error
1567
1608
  errorAppearance: 'errorPrimary sizeM solid rounded',
1568
1609
  // Required
1569
- requiredAppearance: 'requirePrimary sizeM solid rounded'
1610
+ requiredAppearance: 'requirePrimary sizeM solid rounded',
1611
+ // Success
1612
+ successAppearance: 'successPrimary sizeM solid rounded'
1570
1613
  };
1571
1614
 
1572
1615
  const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
@@ -1616,6 +1659,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
1616
1659
  errorKey,
1617
1660
  errorMessage,
1618
1661
  isErrorState,
1662
+ successKey,
1619
1663
  isValidState
1620
1664
  } = useFieldValidationState({
1621
1665
  fieldProps: fieldProps,
@@ -1624,10 +1668,10 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
1624
1668
  });
1625
1669
  const updatedInputProps = useValidationAppearanceInputProps({
1626
1670
  inputProps: inputProps,
1627
- validationStateKey: isErrorState ? errorKey : 'success'
1671
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1628
1672
  });
1629
1673
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1630
- className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1674
+ className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
1631
1675
  errorKey: errorKey,
1632
1676
  errorMessage: errorMessage,
1633
1677
  isErrorState: isErrorState,
@@ -1721,6 +1765,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
1721
1765
  errorKey,
1722
1766
  errorMessage,
1723
1767
  isErrorState,
1768
+ successKey,
1724
1769
  isValidState
1725
1770
  } = useFieldValidationState({
1726
1771
  fieldProps: fieldProps,
@@ -1729,10 +1774,10 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
1729
1774
  });
1730
1775
  const updatedInputProps = useValidationAppearanceInputProps({
1731
1776
  inputProps: inputProps,
1732
- validationStateKey: isErrorState ? errorKey : 'success'
1777
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1733
1778
  });
1734
1779
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1735
- className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
1780
+ className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
1736
1781
  errorKey: errorKey,
1737
1782
  errorMessage: errorMessage,
1738
1783
  isErrorState: isErrorState,
@@ -1820,6 +1865,7 @@ function FormFieldSegmented(props) {
1820
1865
  errorKey,
1821
1866
  errorMessage,
1822
1867
  isErrorState,
1868
+ successKey,
1823
1869
  isValidState
1824
1870
  } = useFieldValidationState({
1825
1871
  fieldProps: fieldProps,
@@ -1828,10 +1874,10 @@ function FormFieldSegmented(props) {
1828
1874
  });
1829
1875
  const updatedInputProps = useValidationAppearanceInputProps({
1830
1876
  inputProps: inputProps,
1831
- validationStateKey: isErrorState ? errorKey : 'success'
1877
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1832
1878
  });
1833
1879
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1834
- className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
1880
+ className: clsx('form-field_segmented', 'form__item_segmented'),
1835
1881
  errorKey: errorKey,
1836
1882
  errorMessage: errorMessage,
1837
1883
  isErrorState: isErrorState,
@@ -1934,10 +1980,11 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
1934
1980
  setSelectedOptions(defaultValue);
1935
1981
  }, [defaultValue]);
1936
1982
  const {
1937
- isErrorState,
1938
- isValidState,
1939
1983
  errorKey,
1940
- errorMessage
1984
+ errorMessage,
1985
+ isErrorState,
1986
+ successKey,
1987
+ isValidState
1941
1988
  } = useFieldValidationState({
1942
1989
  fieldProps: fieldProps,
1943
1990
  input: input,
@@ -1945,10 +1992,10 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
1945
1992
  });
1946
1993
  const updatedSelectProps = useValidationAppearanceInputProps({
1947
1994
  inputProps: selectProps,
1948
- validationStateKey: isErrorState ? errorKey : 'success'
1995
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
1949
1996
  });
1950
1997
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
1951
- className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
1998
+ className: clsx('form-field_select', 'form__item_select', classNameGroupItem),
1952
1999
  errorKey: errorKey,
1953
2000
  errorMessage: errorMessage,
1954
2001
  isErrorState: isErrorState,
@@ -2018,6 +2065,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
2018
2065
  errorKey,
2019
2066
  errorMessage,
2020
2067
  isErrorState,
2068
+ successKey,
2021
2069
  isValidState
2022
2070
  } = useFieldValidationState({
2023
2071
  fieldProps: fieldProps,
@@ -2026,10 +2074,10 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
2026
2074
  });
2027
2075
  const updatedInputProps = useValidationAppearanceInputProps({
2028
2076
  inputProps: inputProps,
2029
- validationStateKey: isErrorState ? errorKey : 'success'
2077
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2030
2078
  });
2031
2079
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2032
- className: clsx('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
2080
+ className: clsx('form-field-switch', 'form__item_switch', classNameGroupItem),
2033
2081
  errorKey: errorKey,
2034
2082
  errorMessage: errorMessage,
2035
2083
  isErrorState: isErrorState,
@@ -2048,7 +2096,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
2048
2096
  name: input.name,
2049
2097
  isDisabled: isDisabled,
2050
2098
  autoComplete: "nope",
2051
- checked: input.checked,
2099
+ isActive: input.checked,
2052
2100
  onBlur: input.onBlur,
2053
2101
  onChange: onChangeField,
2054
2102
  onFocus: input.onFocus
@@ -2092,6 +2140,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
2092
2140
  errorKey,
2093
2141
  errorMessage,
2094
2142
  isErrorState,
2143
+ successKey,
2095
2144
  isValidState
2096
2145
  } = useFieldValidationState({
2097
2146
  fieldProps: fieldProps,
@@ -2100,10 +2149,10 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
2100
2149
  });
2101
2150
  const updatedInputProps = useValidationAppearanceInputProps({
2102
2151
  inputProps: inputProps,
2103
- validationStateKey: isErrorState ? errorKey : 'success'
2152
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2104
2153
  });
2105
2154
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2106
- className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
2155
+ className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
2107
2156
  errorKey: errorKey,
2108
2157
  errorMessage: errorMessage,
2109
2158
  isErrorState: isErrorState,
@@ -2184,6 +2233,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
2184
2233
  errorKey,
2185
2234
  errorMessage,
2186
2235
  isErrorState,
2236
+ successKey,
2187
2237
  isValidState
2188
2238
  } = useFieldValidationState({
2189
2239
  fieldProps: fieldProps,
@@ -2192,10 +2242,10 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
2192
2242
  });
2193
2243
  const updatedInputProps = useValidationAppearanceInputProps({
2194
2244
  inputProps: inputProps,
2195
- validationStateKey: isErrorState ? errorKey : 'success'
2245
+ validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2196
2246
  });
2197
2247
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2198
- className: clsx('form-field_type_maskedInput', 'form__item_type_maskedInput', classNameGroupItem),
2248
+ className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
2199
2249
  errorKey: errorKey,
2200
2250
  errorMessage: errorMessage,
2201
2251
  isErrorState: isErrorState,
@@ -2380,7 +2430,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
2380
2430
  validationStateKey: isErrorState ? errorKey : 'success'
2381
2431
  });
2382
2432
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2383
- className: clsx('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
2433
+ className: clsx('form-field_radio', 'form__item_radio"', classNameGroupItem),
2384
2434
  errorKey: errorKey,
2385
2435
  errorMessage: errorMessage,
2386
2436
  isErrorState: isErrorState,
@@ -3094,4 +3144,4 @@ const getErrorsForFinalForm = error => {
3094
3144
  return formErrors;
3095
3145
  };
3096
3146
 
3097
- 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 };
3147
+ 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.31",
3
+ "version": "1.1.33",
4
4
  "description": "Forms fields, inputs, etc.",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -38,7 +38,7 @@
38
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.85",
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",