@itcase/forms 1.1.54 → 1.1.55

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 (4) hide show
  1. package/dist/css/form/Field/RadioGroup/FormFieldRadioGroup.css +7 -2
  2. package/dist/itcase-forms.cjs.js +70 -71
  3. package/dist/itcase-forms.esm.js +70 -71
  4. package/package.json +1 -1
package/dist/css/form/Field/RadioGroup/FormFieldRadioGroup.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .form-radio {
2
2
  &_state_success {
3
3
  & .radio__state {
4
- border: solid 1px var(--radio-success-border);
4
+ border: solid 1px var(--form-radio-success-border);
5
5
  }
6
6
  }
7
7
  &_state_error {
8
8
  & .radio__state {
9
- border: solid 1px var(--radio-error-border);
9
+ border: solid 1px var(--form-radio-error-border);
10
10
  }
11
11
  }
12
12
  }
@@ -55,4 +55,9 @@
55
55
 
56
56
  :root {
57
57
  --form-filed-radio-size-m-gap: 12px;
58
+
59
+ --form-radio-success-border: var(--color-success-border-primary);
60
+ --form-radio-success-border-hover: var(--color-surface-border-quaternary);
61
+ --form-radio-error-border: var(--color-error-border-primary);
62
+ --form-radio-focus-border: var(--color-surface-border-quaternary);
58
63
  }
package/dist/itcase-forms.cjs.js CHANGED
@@ -445,8 +445,8 @@ var defaultFieldProps = {
445
445
  direction: 'vertical',
446
446
  labelTextColor: 'surfaceTextPrimary',
447
447
  messageTextColor: 'surfaceTextSecondary',
448
- errorMessageTextColor: 'errorTextSecondary',
449
448
  dividerFill: 'errorPrimary',
449
+ errorMessageTextColor: 'errorTextSecondary',
450
450
  helpTextColor: 'surfaceTextQuaternary',
451
451
  requiredMessageTextColor: 'warningTextSecondary',
452
452
  showMessage: true
@@ -485,6 +485,7 @@ var defaultFieldSizeXL = Object.assign({
485
485
  }, defaultFieldProps);
486
486
 
487
487
  function FieldWrapperBase(props) {
488
+ var _React$createElement, _React$createElement2;
488
489
  var id = props.id,
489
490
  className = props.className,
490
491
  dataTour = props.dataTour,
@@ -523,7 +524,7 @@ function FieldWrapperBase(props) {
523
524
  showDivider = props.showDivider,
524
525
  showMessage = props.showMessage,
525
526
  _props$tag = props.tag,
526
- Tag = _props$tag === void 0 ? 'div' : _props$tag,
527
+ Tag = _props$tag === void 0 ? "div" : _props$tag,
527
528
  before = props.before,
528
529
  after = props.after,
529
530
  isDisabled = props.isDisabled,
@@ -533,38 +534,38 @@ function FieldWrapperBase(props) {
533
534
  isValidState = props.isValidState,
534
535
  children = props.children;
535
536
  var formFieldClass = React.useMemo(function () {
536
- return clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && "form__item_state_" + errorKey);
537
+ return clsx__default.default(className, isValidState && "form__item_state_success", isRequired && "form__item_state_required", isDisabled && "form__item_state_disabled", metaActive && "form__item_state_focus", inputValue && "form__item_state_filled", isErrorState && "form__item_state_" + errorKey);
537
538
  }, [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
538
539
  var fieldClass = React.useMemo(function () {
539
540
  return clsx__default.default(fieldClassName, isValidState && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled", isDisabled && fieldClassName + "_state_disabled", isErrorState && fieldClassName + "_state_" + errorKey);
540
541
  }, [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
541
542
  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
542
- prefix: 'form-field_size_',
543
- propsKey: 'size'
543
+ prefix: "form-field_size_",
544
+ propsKey: "size"
544
545
  });
545
546
  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
546
- prefix: 'fill_',
547
- propsKey: 'fill'
547
+ prefix: "fill_",
548
+ propsKey: "fill"
548
549
  });
549
550
  var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
550
- prefix: 'fill_',
551
- propsKey: 'inputFill'
551
+ prefix: "fill_",
552
+ propsKey: "inputFill"
552
553
  });
553
554
  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
554
- prefix: 'form-field_shape_',
555
- propsKey: 'shape'
555
+ prefix: "form-field_shape_",
556
+ propsKey: "shape"
556
557
  });
557
558
  var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
558
- prefix: 'form-field__item-value_shape_',
559
- propsKey: 'inputShape'
559
+ prefix: "form-field__item-value_shape_",
560
+ propsKey: "inputShape"
560
561
  });
561
562
  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
562
- prefix: 'direction_',
563
- propsKey: 'direction'
563
+ prefix: "direction_",
564
+ propsKey: "direction"
564
565
  });
565
566
  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
566
- prefix: 'width_',
567
- propsKey: 'width'
567
+ prefix: "width_",
568
+ propsKey: "width"
568
569
  });
569
570
  var _useStyles = useStyles.useStyles(props),
570
571
  formFieldStyles = _useStyles.styles;
@@ -572,12 +573,12 @@ function FieldWrapperBase(props) {
572
573
  var errorTextColor = props[errorKey + "MessageTextColor"];
573
574
  var errorTextWeight = props[errorKey + "MessageTextWeight"];
574
575
  return /*#__PURE__*/React__default.default.createElement(Tag, {
575
- className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
576
+ className: clsx__default.default(formFieldClass, "form__item", "form-field", type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
576
577
  "data-testid": inputName + "-field",
577
578
  "data-tour": dataTour,
578
579
  style: formFieldStyles
579
580
  }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
580
- className: clsx__default.default('form-field__label'),
581
+ className: clsx__default.default("form-field__label"),
581
582
  "data-testid": inputName + "-field-label",
582
583
  htmlFor: id
583
584
  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
@@ -594,9 +595,9 @@ function FieldWrapperBase(props) {
594
595
  textColor: descTextColor,
595
596
  textWeight: descTextWeight
596
597
  }, desc)), /*#__PURE__*/React__default.default.createElement("div", {
597
- className: clsx__default.default('form-field__content', inputFillClass, inputShapeClass)
598
+ className: clsx__default.default("form-field__content", inputFillClass, inputShapeClass)
598
599
  }, /*#__PURE__*/React__default.default.createElement("div", {
599
- className: clsx__default.default('form-field__content-inner', fieldClass)
600
+ className: clsx__default.default("form-field__content-inner", fieldClass)
600
601
  }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
601
602
  className: "form-field__item-divider",
602
603
  width: dividerWidth,
@@ -606,21 +607,14 @@ function FieldWrapperBase(props) {
606
607
  })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
607
608
  className: "form-field__message",
608
609
  "data-testid": inputName + "-field-message"
609
- }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
610
+ }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, (_React$createElement = {
610
611
  id: inputName + "-error",
611
612
  className: "form-field__message-item form-field__message-item_type-error",
612
- dataTestId: inputName + "-field-message-error",
613
- size: errorTextSize,
614
- textColor: errorTextColor,
615
- textWeight: errorTextWeight
616
- }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
613
+ dataTestId: inputName + "FieldMessageError"
614
+ }, _React$createElement["dataTestId"] = inputName + "-field-message-error", _React$createElement.size = errorTextSize, _React$createElement.textColor = errorTextColor, _React$createElement.textWeight = errorTextWeight, _React$createElement), errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, (_React$createElement2 = {
617
615
  className: "form-field__message-item form-field__message-item_type_help-text",
618
- dataTestId: inputName + "-field-message-help-text",
619
- size: helpTextSize,
620
- textColor: isValidState ? helpTextColorSuccess : helpTextColor,
621
- textWeight: helpTextWeight,
622
- sizeMobile: helpTextSizeMobile
623
- }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
616
+ dataTestId: inputName + "FieldMessageHelpText"
617
+ }, _React$createElement2["dataTestId"] = inputName + "-field-message-help-text", _React$createElement2.size = helpTextSize, _React$createElement2.textColor = isValidState ? helpTextColorSuccess : helpTextColor, _React$createElement2.textWeight = helpTextWeight, _React$createElement2.sizeMobile = helpTextSizeMobile, _React$createElement2), helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
624
618
  className: "form-field__message-item form-field__message-item_type_help-text",
625
619
  dataTestId: inputName + "field-message-help-text",
626
620
  size: messageTextSize
@@ -844,13 +838,13 @@ var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFiel
844
838
  initialValue = props.initialValue,
845
839
  label = props.label,
846
840
  messageType = props.messageType,
847
- isDisabled = props.isDisabled,
848
841
  classNameGroupItem = props.classNameGroupItem,
849
842
  fieldProps = props.fieldProps,
850
843
  inputProps = props.inputProps,
851
844
  options = props.options,
852
845
  placeholder = props.placeholder,
853
846
  showMessage = props.showMessage,
847
+ isDisabled = props.isDisabled,
854
848
  isCheckbox = props.isCheckbox,
855
849
  isRequired = props.isRequired,
856
850
  onChange = props.onChange;
@@ -920,14 +914,14 @@ var FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFiel
920
914
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
921
915
  className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && "form-choice_state_" + errorKey),
922
916
  name: input.name,
923
- isDisabled: isDisabled,
924
917
  active: activeOption,
925
918
  inputValue: input.value || [],
926
919
  options: options,
927
920
  placeholder: placeholder,
928
- setActiveSegment: setActiveSegment,
921
+ isDisabled: isDisabled,
929
922
  isCheckbox: isCheckbox,
930
- isRequired: isRequired
923
+ isRequired: isRequired,
924
+ setActiveSegment: setActiveSegment
931
925
  }, updatedInputProps)));
932
926
  });
933
927
  });
@@ -1952,6 +1946,7 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
1952
1946
  });
1953
1947
  return /*#__PURE__*/React__default.default.createElement("div", {
1954
1948
  className: clsx__default.default('form__group', className, isHidden && 'form__group_hidden', column && "form__group_column_" + column),
1949
+ "data-test-id": name + "Group",
1955
1950
  "data-tour": dataTour,
1956
1951
  style: styles
1957
1952
  }, /*#__PURE__*/React__default.default.createElement("div", {
@@ -1961,13 +1956,15 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
1961
1956
  }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
1962
1957
  size: titleTextSize,
1963
1958
  textColor: titleTextColor,
1964
- textWeight: titleTextWeight
1959
+ textWeight: titleTextWeight,
1960
+ dataTestId: name + "GroupTitle"
1965
1961
  }, title)), label && /*#__PURE__*/React__default.default.createElement("div", {
1966
1962
  className: "form__group-label"
1967
1963
  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
1968
1964
  size: labelTextSize,
1969
1965
  textColor: labelTextColor,
1970
- textWeight: labelTextWeight
1966
+ textWeight: labelTextWeight,
1967
+ dataTestId: name + "GroupLabel"
1971
1968
  }, label)), /*#__PURE__*/React__default.default.createElement("div", {
1972
1969
  className: "form__group-items"
1973
1970
  }, children), after), showGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
@@ -1975,12 +1972,14 @@ var FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(pro
1975
1972
  className: "form__group-message form__group-message_type-" + errorKey,
1976
1973
  size: updatedProps.messageTextSize,
1977
1974
  textColor: updatedProps.messageTextColor,
1978
- textWeight: updatedProps.messageTextWeight
1975
+ textWeight: updatedProps.messageTextWeight,
1976
+ dataTestId: name + "GroupMessageError"
1979
1977
  }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
1980
1978
  className: "form__group-message",
1981
1979
  size: messageTextSize,
1982
1980
  textColor: messageTextColor,
1983
- textWeight: messageTextWeight
1981
+ textWeight: messageTextWeight,
1982
+ dataTestId: name + "GroupMessage"
1984
1983
  }, message), !isErrorState && !message && /*#__PURE__*/React__default.default.createElement(Text.Text, {
1985
1984
  className: "form__group-message",
1986
1985
  size: messageTextSize
@@ -2054,12 +2053,12 @@ var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormField
2054
2053
  validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2055
2054
  });
2056
2055
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2057
- className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
2056
+ className: clsx__default.default("form-field_input", "form__item_input", classNameGroupItem),
2058
2057
  errorKey: errorKey,
2059
2058
  errorMessage: errorMessage,
2060
2059
  fieldClassName: "form-input",
2061
2060
  inputName: input.name,
2062
- inputValue: input.value || '',
2061
+ inputValue: input.value || "",
2063
2062
  metaActive: meta.active,
2064
2063
  metaError: meta.error,
2065
2064
  showMessage: showMessage,
@@ -2068,12 +2067,12 @@ var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormField
2068
2067
  isRequired: isRequired,
2069
2068
  isValidState: isValidState
2070
2069
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
2071
- className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
2070
+ className: clsx__default.default(meta.active && "input_state_focus", meta.error && meta.touched && "input_state_" + errorKey),
2072
2071
  dataTestId: input.name + "-field-input",
2073
2072
  type: "text",
2074
2073
  name: input.name,
2075
2074
  autoComplete: "nope",
2076
- value: input.value || '',
2075
+ value: input.value || "",
2077
2076
  isDisabled: isDisabled,
2078
2077
  onBlur: input.onBlur,
2079
2078
  onChange: onChangeField,
@@ -2083,9 +2082,9 @@ var FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormField
2083
2082
  size: clearIconSize,
2084
2083
  iconFill: clearIconFill,
2085
2084
  iconFillHover: clearIconFillHover,
2086
- imageSrc: typeof clearIcon === 'string' && clearIcon,
2085
+ imageSrc: typeof clearIcon === "string" && clearIcon,
2087
2086
  shape: clearIconShape,
2088
- SvgImage: typeof clearIcon !== 'string' && clearIcon,
2087
+ SvgImage: typeof clearIcon !== "string" && clearIcon,
2089
2088
  onClick: onClickClearIcon
2090
2089
  }));
2091
2090
  });
@@ -2314,12 +2313,12 @@ var FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFi
2314
2313
  validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2315
2314
  });
2316
2315
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2317
- className: clsx__default.default('form-field_input-password', 'form__item_input-password', classNameGroupItem),
2316
+ className: clsx__default.default("form-field_input-password", "form__item_input-password", classNameGroupItem),
2318
2317
  errorKey: errorKey,
2319
2318
  errorMessage: errorMessage,
2320
2319
  fieldClassName: "form-password",
2321
2320
  inputName: input.name,
2322
- inputValue: input.value || '',
2321
+ inputValue: input.value || "",
2323
2322
  metaActive: meta.active,
2324
2323
  metaError: meta.error,
2325
2324
  showMessage: showMessage,
@@ -2328,11 +2327,11 @@ var FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFi
2328
2327
  isRequired: isRequired,
2329
2328
  isValidState: isValidState
2330
2329
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(InputPassword.InputPassword, Object.assign({
2331
- className: clsx__default.default(meta.active && 'input-password_state_focus', meta.error && meta.touched && "input-password_state_" + errorKey),
2330
+ className: clsx__default.default(meta.active && "input-password_state_focus", meta.error && meta.touched && "input-password_state_" + errorKey),
2332
2331
  dataTestId: input.name + "-field-input-password",
2333
2332
  name: input.name,
2334
2333
  autoComplete: "nope",
2335
- value: input.value || '',
2334
+ value: input.value || "",
2336
2335
  isDisabled: isDisabled,
2337
2336
  onBlur: input.onBlur,
2338
2337
  onChange: onChangeField,
@@ -2786,10 +2785,10 @@ var FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFi
2786
2785
  validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2787
2786
  });
2788
2787
  return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
2789
- className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
2788
+ className: clsx__default.default("form-field_textarea", "form__item_textarea", classNameGroupItem),
2790
2789
  errorKey: errorKey,
2791
2790
  errorMessage: errorMessage,
2792
- fieldClassName: 'form-textarea',
2791
+ fieldClassName: "form-textarea",
2793
2792
  inputName: input.name,
2794
2793
  inputValue: input.value,
2795
2794
  metaActive: meta.active,
@@ -2800,11 +2799,11 @@ var FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFi
2800
2799
  isRequired: isRequired,
2801
2800
  isValidState: isValidState
2802
2801
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
2803
- className: clsx__default.default(meta.active && 'textarea_state_focus', meta.error && meta.touched && "textarea_state_" + errorKey),
2802
+ className: clsx__default.default(meta.active && "textarea_state_focus", meta.error && meta.touched && "textarea_state_" + errorKey),
2804
2803
  dataTestId: input.name + "-field-textarea",
2805
2804
  name: input.name,
2806
2805
  autoComplete: "nope",
2807
- value: input.value || '',
2806
+ value: input.value || "",
2808
2807
  isDisabled: isDisabled,
2809
2808
  onBlur: input.onBlur,
2810
2809
  onChange: input.onChange,
@@ -3110,7 +3109,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3110
3109
  _props$additionalProp = props.additionalProps,
3111
3110
  additionalProps = _props$additionalProp === void 0 ? {} : _props$additionalProp,
3112
3111
  _props$buttonDirectio = props.buttonDirection,
3113
- buttonDirection = _props$buttonDirectio === void 0 ? 'vertical' : _props$buttonDirectio,
3112
+ buttonDirection = _props$buttonDirectio === void 0 ? "vertical" : _props$buttonDirectio,
3114
3113
  buttonFill = props.buttonFill,
3115
3114
  buttonJustifyContent = props.buttonJustifyContent,
3116
3115
  buttonPadding = props.buttonPadding,
@@ -3133,15 +3132,15 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3133
3132
  loader = props.loader,
3134
3133
  loaderAppearance = props.loaderAppearance,
3135
3134
  _props$loaderFill = props.loaderFill,
3136
- loaderFill = _props$loaderFill === void 0 ? 'surfacePrimary' : _props$loaderFill,
3135
+ loaderFill = _props$loaderFill === void 0 ? "surfacePrimary" : _props$loaderFill,
3137
3136
  _props$loaderItemFill = props.loaderItemFill,
3138
- loaderItemFill = _props$loaderItemFill === void 0 ? 'accentItemSecondary' : _props$loaderItemFill,
3137
+ loaderItemFill = _props$loaderItemFill === void 0 ? "accentItemSecondary" : _props$loaderItemFill,
3139
3138
  loaderShape = props.loaderShape,
3140
3139
  _props$loaderSize = props.loaderSize,
3141
- loaderSize = _props$loaderSize === void 0 ? 'l' : _props$loaderSize,
3140
+ loaderSize = _props$loaderSize === void 0 ? "l" : _props$loaderSize,
3142
3141
  loaderText = props.loaderText,
3143
3142
  _props$loaderType = props.loaderType,
3144
- loaderType = _props$loaderType === void 0 ? 'simple' : _props$loaderType,
3143
+ loaderType = _props$loaderType === void 0 ? "dot" : _props$loaderType,
3145
3144
  mutators = props.mutators,
3146
3145
  notificationCloseButton = props.notificationCloseButton,
3147
3146
  notificationType = props.notificationType,
@@ -3213,19 +3212,19 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3213
3212
  modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
3214
3213
  submitError = _ref.submitError;
3215
3214
  return /*#__PURE__*/React__default.default.createElement("form", {
3216
- className: clsx__default.default(className, 'form', type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
3217
- name: formName || 'form'
3215
+ className: clsx__default.default(className, "form", type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
3216
+ name: formName || "form"
3218
3217
  // We no need set reference to html element, we need reference to "final-form" instance
3219
3218
  ,
3220
3219
  ref: function ref() {
3221
3220
  return onRefFormInstance(form);
3222
3221
  },
3223
- autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
3224
- autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
3225
- autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
3222
+ autoCapitalize: disableFieldsAutoComplete ? "off" : undefined,
3223
+ autoComplete: disableFieldsAutoComplete ? "off" : undefined,
3224
+ autoCorrect: disableFieldsAutoComplete ? "off" : undefined,
3226
3225
  "data-testid": dataTestId || name,
3227
3226
  "data-tour": dataTour,
3228
- spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
3227
+ spellCheck: disableFieldsAutoComplete ? "false" : undefined,
3229
3228
  style: formStyles,
3230
3229
  onSubmit: handleSubmit
3231
3230
  }, before, title && /*#__PURE__*/React__default.default.createElement(Title.Title, {
@@ -3240,7 +3239,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3240
3239
  textColor: descTextColor,
3241
3240
  textWeight: descTextWeight
3242
3241
  }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
3243
- className: clsx__default.default('notification', 'form-notification', notificationType ? "form-notification_" + notificationType : 'form-notification_global')
3242
+ className: clsx__default.default("notification", "form-notification", notificationType ? "form-notification_" + notificationType : "form-notification_global")
3244
3243
  }, /*#__PURE__*/React__default.default.createElement(Notification.Notification, {
3245
3244
  appearance: "errorPrimary sizeM solid rounded",
3246
3245
  type: "global",
@@ -3282,7 +3281,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3282
3281
  }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
3283
3282
  appearance: primaryButtonAppearance,
3284
3283
  className: "form__button-item",
3285
- dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : 'form-primary'),
3284
+ dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : "form-primary"),
3286
3285
  dataTour: dataTourPrimaryButton,
3287
3286
  width: "fill",
3288
3287
  size: primaryButtonSize,
@@ -3292,13 +3291,13 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3292
3291
  labelTextColor: primaryButtonLabelTextColor,
3293
3292
  labelTextSize: primaryButtonLabelSize,
3294
3293
  labelTextWeight: primaryButtonLabelTextWeight,
3295
- htmlType: primaryButtonHtmlType || 'submit',
3294
+ htmlType: primaryButtonHtmlType || "submit",
3296
3295
  loading: primaryButtonIsLoading,
3297
3296
  isDisabled: primaryButtonIsDisabled
3298
3297
  }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
3299
3298
  appearance: secondaryButtonAppearance,
3300
3299
  className: "form__button-item",
3301
- dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : 'form-secondary'),
3300
+ dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : "form-secondary"),
3302
3301
  dataTour: dataTourSecondaryButton,
3303
3302
  width: "fill",
3304
3303
  size: secondaryButtonSize,
@@ -3340,7 +3339,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
3340
3339
  });
3341
3340
  });
3342
3341
  FinalForm.defaultProps = {
3343
- direction: 'vertical'
3342
+ direction: "vertical"
3344
3343
  };
3345
3344
 
3346
3345
  var DEFAULT_MESSAGES_REQUIRED = {
package/dist/itcase-forms.esm.js CHANGED
@@ -434,8 +434,8 @@ var defaultFieldProps = {
434
434
  direction: 'vertical',
435
435
  labelTextColor: 'surfaceTextPrimary',
436
436
  messageTextColor: 'surfaceTextSecondary',
437
- errorMessageTextColor: 'errorTextSecondary',
438
437
  dividerFill: 'errorPrimary',
438
+ errorMessageTextColor: 'errorTextSecondary',
439
439
  helpTextColor: 'surfaceTextQuaternary',
440
440
  requiredMessageTextColor: 'warningTextSecondary',
441
441
  showMessage: true
@@ -474,6 +474,7 @@ var defaultFieldSizeXL = Object.assign({
474
474
  }, defaultFieldProps);
475
475
 
476
476
  function FieldWrapperBase(props) {
477
+ var _React$createElement, _React$createElement2;
477
478
  var id = props.id,
478
479
  className = props.className,
479
480
  dataTour = props.dataTour,
@@ -512,7 +513,7 @@ function FieldWrapperBase(props) {
512
513
  showDivider = props.showDivider,
513
514
  showMessage = props.showMessage,
514
515
  _props$tag = props.tag,
515
- Tag = _props$tag === void 0 ? 'div' : _props$tag,
516
+ Tag = _props$tag === void 0 ? "div" : _props$tag,
516
517
  before = props.before,
517
518
  after = props.after,
518
519
  isDisabled = props.isDisabled,
@@ -522,38 +523,38 @@ function FieldWrapperBase(props) {
522
523
  isValidState = props.isValidState,
523
524
  children = props.children;
524
525
  var formFieldClass = useMemo(function () {
525
- return clsx(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && "form__item_state_" + errorKey);
526
+ return clsx(className, isValidState && "form__item_state_success", isRequired && "form__item_state_required", isDisabled && "form__item_state_disabled", metaActive && "form__item_state_focus", inputValue && "form__item_state_filled", isErrorState && "form__item_state_" + errorKey);
526
527
  }, [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
527
528
  var fieldClass = useMemo(function () {
528
529
  return clsx(fieldClassName, isValidState && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled", isDisabled && fieldClassName + "_state_disabled", isErrorState && fieldClassName + "_state_" + errorKey);
529
530
  }, [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
530
531
  var sizeClass = useDeviceTargetClass(props, {
531
- prefix: 'form-field_size_',
532
- propsKey: 'size'
532
+ prefix: "form-field_size_",
533
+ propsKey: "size"
533
534
  });
534
535
  var fillClass = useDeviceTargetClass(props, {
535
- prefix: 'fill_',
536
- propsKey: 'fill'
536
+ prefix: "fill_",
537
+ propsKey: "fill"
537
538
  });
538
539
  var inputFillClass = useDeviceTargetClass(props, {
539
- prefix: 'fill_',
540
- propsKey: 'inputFill'
540
+ prefix: "fill_",
541
+ propsKey: "inputFill"
541
542
  });
542
543
  var shapeClass = useDeviceTargetClass(props, {
543
- prefix: 'form-field_shape_',
544
- propsKey: 'shape'
544
+ prefix: "form-field_shape_",
545
+ propsKey: "shape"
545
546
  });
546
547
  var inputShapeClass = useDeviceTargetClass(props, {
547
- prefix: 'form-field__item-value_shape_',
548
- propsKey: 'inputShape'
548
+ prefix: "form-field__item-value_shape_",
549
+ propsKey: "inputShape"
549
550
  });
550
551
  var directionClass = useDeviceTargetClass(props, {
551
- prefix: 'direction_',
552
- propsKey: 'direction'
552
+ prefix: "direction_",
553
+ propsKey: "direction"
553
554
  });
554
555
  var widthClass = useDeviceTargetClass(props, {
555
- prefix: 'width_',
556
- propsKey: 'width'
556
+ prefix: "width_",
557
+ propsKey: "width"
557
558
  });
558
559
  var _useStyles = useStyles(props),
559
560
  formFieldStyles = _useStyles.styles;
@@ -561,12 +562,12 @@ function FieldWrapperBase(props) {
561
562
  var errorTextColor = props[errorKey + "MessageTextColor"];
562
563
  var errorTextWeight = props[errorKey + "MessageTextWeight"];
563
564
  return /*#__PURE__*/React.createElement(Tag, {
564
- className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
565
+ className: clsx(formFieldClass, "form__item", "form-field", type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
565
566
  "data-testid": inputName + "-field",
566
567
  "data-tour": dataTour,
567
568
  style: formFieldStyles
568
569
  }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
569
- className: clsx('form-field__label'),
570
+ className: clsx("form-field__label"),
570
571
  "data-testid": inputName + "-field-label",
571
572
  htmlFor: id
572
573
  }, /*#__PURE__*/React.createElement(Text, {
@@ -583,9 +584,9 @@ function FieldWrapperBase(props) {
583
584
  textColor: descTextColor,
584
585
  textWeight: descTextWeight
585
586
  }, desc)), /*#__PURE__*/React.createElement("div", {
586
- className: clsx('form-field__content', inputFillClass, inputShapeClass)
587
+ className: clsx("form-field__content", inputFillClass, inputShapeClass)
587
588
  }, /*#__PURE__*/React.createElement("div", {
588
- className: clsx('form-field__content-inner', fieldClass)
589
+ className: clsx("form-field__content-inner", fieldClass)
589
590
  }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
590
591
  className: "form-field__item-divider",
591
592
  width: dividerWidth,
@@ -595,21 +596,14 @@ function FieldWrapperBase(props) {
595
596
  })), showMessage && /*#__PURE__*/React.createElement("div", {
596
597
  className: "form-field__message",
597
598
  "data-testid": inputName + "-field-message"
598
- }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
599
+ }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, (_React$createElement = {
599
600
  id: inputName + "-error",
600
601
  className: "form-field__message-item form-field__message-item_type-error",
601
- dataTestId: inputName + "-field-message-error",
602
- size: errorTextSize,
603
- textColor: errorTextColor,
604
- textWeight: errorTextWeight
605
- }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
602
+ dataTestId: inputName + "FieldMessageError"
603
+ }, _React$createElement["dataTestId"] = inputName + "-field-message-error", _React$createElement.size = errorTextSize, _React$createElement.textColor = errorTextColor, _React$createElement.textWeight = errorTextWeight, _React$createElement), errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, (_React$createElement2 = {
606
604
  className: "form-field__message-item form-field__message-item_type_help-text",
607
- dataTestId: inputName + "-field-message-help-text",
608
- size: helpTextSize,
609
- textColor: isValidState ? helpTextColorSuccess : helpTextColor,
610
- textWeight: helpTextWeight,
611
- sizeMobile: helpTextSizeMobile
612
- }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
605
+ dataTestId: inputName + "FieldMessageHelpText"
606
+ }, _React$createElement2["dataTestId"] = inputName + "-field-message-help-text", _React$createElement2.size = helpTextSize, _React$createElement2.textColor = isValidState ? helpTextColorSuccess : helpTextColor, _React$createElement2.textWeight = helpTextWeight, _React$createElement2.sizeMobile = helpTextSizeMobile, _React$createElement2), helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
613
607
  className: "form-field__message-item form-field__message-item_type_help-text",
614
608
  dataTestId: inputName + "field-message-help-text",
615
609
  size: messageTextSize
@@ -833,13 +827,13 @@ var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
833
827
  initialValue = props.initialValue,
834
828
  label = props.label,
835
829
  messageType = props.messageType,
836
- isDisabled = props.isDisabled,
837
830
  classNameGroupItem = props.classNameGroupItem,
838
831
  fieldProps = props.fieldProps,
839
832
  inputProps = props.inputProps,
840
833
  options = props.options,
841
834
  placeholder = props.placeholder,
842
835
  showMessage = props.showMessage,
836
+ isDisabled = props.isDisabled,
843
837
  isCheckbox = props.isCheckbox,
844
838
  isRequired = props.isRequired,
845
839
  onChange = props.onChange;
@@ -909,14 +903,14 @@ var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
909
903
  }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
910
904
  className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && "form-choice_state_" + errorKey),
911
905
  name: input.name,
912
- isDisabled: isDisabled,
913
906
  active: activeOption,
914
907
  inputValue: input.value || [],
915
908
  options: options,
916
909
  placeholder: placeholder,
917
- setActiveSegment: setActiveSegment,
910
+ isDisabled: isDisabled,
918
911
  isCheckbox: isCheckbox,
919
- isRequired: isRequired
912
+ isRequired: isRequired,
913
+ setActiveSegment: setActiveSegment
920
914
  }, updatedInputProps)));
921
915
  });
922
916
  });
@@ -1941,6 +1935,7 @@ var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1941
1935
  });
1942
1936
  return /*#__PURE__*/React.createElement("div", {
1943
1937
  className: clsx('form__group', className, isHidden && 'form__group_hidden', column && "form__group_column_" + column),
1938
+ "data-test-id": name + "Group",
1944
1939
  "data-tour": dataTour,
1945
1940
  style: styles
1946
1941
  }, /*#__PURE__*/React.createElement("div", {
@@ -1950,13 +1945,15 @@ var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1950
1945
  }, /*#__PURE__*/React.createElement(Title, {
1951
1946
  size: titleTextSize,
1952
1947
  textColor: titleTextColor,
1953
- textWeight: titleTextWeight
1948
+ textWeight: titleTextWeight,
1949
+ dataTestId: name + "GroupTitle"
1954
1950
  }, title)), label && /*#__PURE__*/React.createElement("div", {
1955
1951
  className: "form__group-label"
1956
1952
  }, /*#__PURE__*/React.createElement(Text, {
1957
1953
  size: labelTextSize,
1958
1954
  textColor: labelTextColor,
1959
- textWeight: labelTextWeight
1955
+ textWeight: labelTextWeight,
1956
+ dataTestId: name + "GroupLabel"
1960
1957
  }, label)), /*#__PURE__*/React.createElement("div", {
1961
1958
  className: "form__group-items"
1962
1959
  }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
@@ -1964,12 +1961,14 @@ var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
1964
1961
  className: "form__group-message form__group-message_type-" + errorKey,
1965
1962
  size: updatedProps.messageTextSize,
1966
1963
  textColor: updatedProps.messageTextColor,
1967
- textWeight: updatedProps.messageTextWeight
1964
+ textWeight: updatedProps.messageTextWeight,
1965
+ dataTestId: name + "GroupMessageError"
1968
1966
  }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
1969
1967
  className: "form__group-message",
1970
1968
  size: messageTextSize,
1971
1969
  textColor: messageTextColor,
1972
- textWeight: messageTextWeight
1970
+ textWeight: messageTextWeight,
1971
+ dataTestId: name + "GroupMessage"
1973
1972
  }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
1974
1973
  className: "form__group-message",
1975
1974
  size: messageTextSize
@@ -2043,12 +2042,12 @@ var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
2043
2042
  validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2044
2043
  });
2045
2044
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2046
- className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
2045
+ className: clsx("form-field_input", "form__item_input", classNameGroupItem),
2047
2046
  errorKey: errorKey,
2048
2047
  errorMessage: errorMessage,
2049
2048
  fieldClassName: "form-input",
2050
2049
  inputName: input.name,
2051
- inputValue: input.value || '',
2050
+ inputValue: input.value || "",
2052
2051
  metaActive: meta.active,
2053
2052
  metaError: meta.error,
2054
2053
  showMessage: showMessage,
@@ -2057,12 +2056,12 @@ var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
2057
2056
  isRequired: isRequired,
2058
2057
  isValidState: isValidState
2059
2058
  }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
2060
- className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
2059
+ className: clsx(meta.active && "input_state_focus", meta.error && meta.touched && "input_state_" + errorKey),
2061
2060
  dataTestId: input.name + "-field-input",
2062
2061
  type: "text",
2063
2062
  name: input.name,
2064
2063
  autoComplete: "nope",
2065
- value: input.value || '',
2064
+ value: input.value || "",
2066
2065
  isDisabled: isDisabled,
2067
2066
  onBlur: input.onBlur,
2068
2067
  onChange: onChangeField,
@@ -2072,9 +2071,9 @@ var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
2072
2071
  size: clearIconSize,
2073
2072
  iconFill: clearIconFill,
2074
2073
  iconFillHover: clearIconFillHover,
2075
- imageSrc: typeof clearIcon === 'string' && clearIcon,
2074
+ imageSrc: typeof clearIcon === "string" && clearIcon,
2076
2075
  shape: clearIconShape,
2077
- SvgImage: typeof clearIcon !== 'string' && clearIcon,
2076
+ SvgImage: typeof clearIcon !== "string" && clearIcon,
2078
2077
  onClick: onClickClearIcon
2079
2078
  }));
2080
2079
  });
@@ -2303,12 +2302,12 @@ var FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props
2303
2302
  validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2304
2303
  });
2305
2304
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2306
- className: clsx('form-field_input-password', 'form__item_input-password', classNameGroupItem),
2305
+ className: clsx("form-field_input-password", "form__item_input-password", classNameGroupItem),
2307
2306
  errorKey: errorKey,
2308
2307
  errorMessage: errorMessage,
2309
2308
  fieldClassName: "form-password",
2310
2309
  inputName: input.name,
2311
- inputValue: input.value || '',
2310
+ inputValue: input.value || "",
2312
2311
  metaActive: meta.active,
2313
2312
  metaError: meta.error,
2314
2313
  showMessage: showMessage,
@@ -2317,11 +2316,11 @@ var FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props
2317
2316
  isRequired: isRequired,
2318
2317
  isValidState: isValidState
2319
2318
  }, fieldProps), /*#__PURE__*/React.createElement(InputPassword, Object.assign({
2320
- className: clsx(meta.active && 'input-password_state_focus', meta.error && meta.touched && "input-password_state_" + errorKey),
2319
+ className: clsx(meta.active && "input-password_state_focus", meta.error && meta.touched && "input-password_state_" + errorKey),
2321
2320
  dataTestId: input.name + "-field-input-password",
2322
2321
  name: input.name,
2323
2322
  autoComplete: "nope",
2324
- value: input.value || '',
2323
+ value: input.value || "",
2325
2324
  isDisabled: isDisabled,
2326
2325
  onBlur: input.onBlur,
2327
2326
  onChange: onChangeField,
@@ -2775,10 +2774,10 @@ var FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props
2775
2774
  validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
2776
2775
  });
2777
2776
  return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
2778
- className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
2777
+ className: clsx("form-field_textarea", "form__item_textarea", classNameGroupItem),
2779
2778
  errorKey: errorKey,
2780
2779
  errorMessage: errorMessage,
2781
- fieldClassName: 'form-textarea',
2780
+ fieldClassName: "form-textarea",
2782
2781
  inputName: input.name,
2783
2782
  inputValue: input.value,
2784
2783
  metaActive: meta.active,
@@ -2789,11 +2788,11 @@ var FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props
2789
2788
  isRequired: isRequired,
2790
2789
  isValidState: isValidState
2791
2790
  }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
2792
- className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && "textarea_state_" + errorKey),
2791
+ className: clsx(meta.active && "textarea_state_focus", meta.error && meta.touched && "textarea_state_" + errorKey),
2793
2792
  dataTestId: input.name + "-field-textarea",
2794
2793
  name: input.name,
2795
2794
  autoComplete: "nope",
2796
- value: input.value || '',
2795
+ value: input.value || "",
2797
2796
  isDisabled: isDisabled,
2798
2797
  onBlur: input.onBlur,
2799
2798
  onChange: input.onChange,
@@ -3099,7 +3098,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3099
3098
  _props$additionalProp = props.additionalProps,
3100
3099
  additionalProps = _props$additionalProp === void 0 ? {} : _props$additionalProp,
3101
3100
  _props$buttonDirectio = props.buttonDirection,
3102
- buttonDirection = _props$buttonDirectio === void 0 ? 'vertical' : _props$buttonDirectio,
3101
+ buttonDirection = _props$buttonDirectio === void 0 ? "vertical" : _props$buttonDirectio,
3103
3102
  buttonFill = props.buttonFill,
3104
3103
  buttonJustifyContent = props.buttonJustifyContent,
3105
3104
  buttonPadding = props.buttonPadding,
@@ -3122,15 +3121,15 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3122
3121
  loader = props.loader,
3123
3122
  loaderAppearance = props.loaderAppearance,
3124
3123
  _props$loaderFill = props.loaderFill,
3125
- loaderFill = _props$loaderFill === void 0 ? 'surfacePrimary' : _props$loaderFill,
3124
+ loaderFill = _props$loaderFill === void 0 ? "surfacePrimary" : _props$loaderFill,
3126
3125
  _props$loaderItemFill = props.loaderItemFill,
3127
- loaderItemFill = _props$loaderItemFill === void 0 ? 'accentItemSecondary' : _props$loaderItemFill,
3126
+ loaderItemFill = _props$loaderItemFill === void 0 ? "accentItemSecondary" : _props$loaderItemFill,
3128
3127
  loaderShape = props.loaderShape,
3129
3128
  _props$loaderSize = props.loaderSize,
3130
- loaderSize = _props$loaderSize === void 0 ? 'l' : _props$loaderSize,
3129
+ loaderSize = _props$loaderSize === void 0 ? "l" : _props$loaderSize,
3131
3130
  loaderText = props.loaderText,
3132
3131
  _props$loaderType = props.loaderType,
3133
- loaderType = _props$loaderType === void 0 ? 'simple' : _props$loaderType,
3132
+ loaderType = _props$loaderType === void 0 ? "dot" : _props$loaderType,
3134
3133
  mutators = props.mutators,
3135
3134
  notificationCloseButton = props.notificationCloseButton,
3136
3135
  notificationType = props.notificationType,
@@ -3202,19 +3201,19 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3202
3201
  modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
3203
3202
  submitError = _ref.submitError;
3204
3203
  return /*#__PURE__*/React.createElement("form", {
3205
- className: clsx(className, 'form', type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
3206
- name: formName || 'form'
3204
+ className: clsx(className, "form", type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
3205
+ name: formName || "form"
3207
3206
  // We no need set reference to html element, we need reference to "final-form" instance
3208
3207
  ,
3209
3208
  ref: function ref() {
3210
3209
  return onRefFormInstance(form);
3211
3210
  },
3212
- autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
3213
- autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
3214
- autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
3211
+ autoCapitalize: disableFieldsAutoComplete ? "off" : undefined,
3212
+ autoComplete: disableFieldsAutoComplete ? "off" : undefined,
3213
+ autoCorrect: disableFieldsAutoComplete ? "off" : undefined,
3215
3214
  "data-testid": dataTestId || name,
3216
3215
  "data-tour": dataTour,
3217
- spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
3216
+ spellCheck: disableFieldsAutoComplete ? "false" : undefined,
3218
3217
  style: formStyles,
3219
3218
  onSubmit: handleSubmit
3220
3219
  }, before, title && /*#__PURE__*/React.createElement(Title, {
@@ -3229,7 +3228,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3229
3228
  textColor: descTextColor,
3230
3229
  textWeight: descTextWeight
3231
3230
  }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
3232
- className: clsx('notification', 'form-notification', notificationType ? "form-notification_" + notificationType : 'form-notification_global')
3231
+ className: clsx("notification", "form-notification", notificationType ? "form-notification_" + notificationType : "form-notification_global")
3233
3232
  }, /*#__PURE__*/React.createElement(Notification, {
3234
3233
  appearance: "errorPrimary sizeM solid rounded",
3235
3234
  type: "global",
@@ -3271,7 +3270,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3271
3270
  }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
3272
3271
  appearance: primaryButtonAppearance,
3273
3272
  className: "form__button-item",
3274
- dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : 'form-primary'),
3273
+ dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : "form-primary"),
3275
3274
  dataTour: dataTourPrimaryButton,
3276
3275
  width: "fill",
3277
3276
  size: primaryButtonSize,
@@ -3281,13 +3280,13 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3281
3280
  labelTextColor: primaryButtonLabelTextColor,
3282
3281
  labelTextSize: primaryButtonLabelSize,
3283
3282
  labelTextWeight: primaryButtonLabelTextWeight,
3284
- htmlType: primaryButtonHtmlType || 'submit',
3283
+ htmlType: primaryButtonHtmlType || "submit",
3285
3284
  loading: primaryButtonIsLoading,
3286
3285
  isDisabled: primaryButtonIsDisabled
3287
3286
  }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
3288
3287
  appearance: secondaryButtonAppearance,
3289
3288
  className: "form__button-item",
3290
- dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : 'form-secondary'),
3289
+ dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : "form-secondary"),
3291
3290
  dataTour: dataTourSecondaryButton,
3292
3291
  width: "fill",
3293
3292
  size: secondaryButtonSize,
@@ -3329,7 +3328,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
3329
3328
  });
3330
3329
  });
3331
3330
  FinalForm.defaultProps = {
3332
- direction: 'vertical'
3331
+ direction: "vertical"
3333
3332
  };
3334
3333
 
3335
3334
  var DEFAULT_MESSAGES_REQUIRED = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/forms",
3
- "version": "1.1.54",
3
+ "version": "1.1.55",
4
4
  "description": "Forms fields, inputs, etc.",
5
5
  "keywords": [],
6
6
  "license": "MIT",