@itcase/forms 1.0.47 → 1.0.49

package/dist/css/form/Field/Input/Input.css

@@ -9,6 +9,16 @@
         }
       }
     }
+    &_disabled {
+      & .input {
+        background: var(--input-disabled-background, #ECECEC);
+        border: solid 1px var(--input-disabled-border, #747474);
+        &:hover {
+          background: var(--input-disabled-background, #ECECEC);
+          border: solid 1px var(--input-disabled-border, #747474);
+        }
+      }
+    }
     &_error {
       & .input {
         border: solid 1px var(--input-error-border);

package/dist/css/form/FormField/FormField.css

@@ -87,3 +87,10 @@
     }
   }
 }
+.form-field {
+  &_state {
+    &_disabled {
+    }
+  }
+}
+

package/dist/itcase-forms.cjs.js

@@ -160,6 +160,7 @@ function FieldWrapperBase(props) {
     type,
     labelHidden,
     hideMessage,
+    isDisabled,
     isHidden,
     tag: Tag,
     dataTour,
@@ -178,8 +179,8 @@ function FieldWrapperBase(props) {
     const isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
     return hasValue && (metaValid || isModifiedAfterSubmit);
   }, [inputValue, metaValid, metaError, metaSubmitError, metaModifiedSinceLastSubmit]);
-  const formFieldClass = React.useMemo(() => clsx__default.default(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue]);
-  const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`), [fieldClassName, showError, showValid, metaActive, inputValue]);
+  const formFieldClass = React.useMemo(() => clsx__default.default(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue, isDisabled]);
+  const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`), [fieldClassName, showError, showValid, metaActive, inputValue, isDisabled]);
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -212,7 +213,7 @@ function FieldWrapperBase(props) {
     styles: formFieldStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
@@ -240,18 +241,18 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), !hideMessage && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message"
-  }, Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
     id: `${inputName}-error`
-  }, error), Boolean(message) && !showError && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
     textWeight: messageTextWeight,
     textColor: messageTextColor
-  }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+  }, message), (!showError && !message || showError && !message && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize
   }, '\u00A0')), after);
@@ -351,6 +352,7 @@ FieldWrapper.propTypes = {
 const CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxField(props) {
   const {
     name,
+    isDisabled,
     isRequired,
     onChange,
     fieldProps,
@@ -377,6 +379,7 @@ const CheckboxField = /*#__PURE__*/React__default.default.memo(function Checkbox
       inputName: input.name,
       inputValue: input.checked,
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -390,6 +393,7 @@ const CheckboxField = /*#__PURE__*/React__default.default.memo(function Checkbox
       autoComplete: "nope",
       checked: input.checked,
       name: input.name,
+      isDisabled: isDisabled,
       type: "checkbox",
       onBlur: input.onBlur,
       onChange: onChangeField,
@@ -418,6 +422,7 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     inputProps,
     isMultiple,
     isRequired,
+    isDisabled,
     label,
     messageType,
     name,
@@ -458,6 +463,7 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
       inputName: input.name,
       inputValue: input.value || [],
       isRequired: isRequired,
+      isDisabled: isDisabled,
       label: label,
       messageType: messageType,
       metaActive: meta.active,
@@ -477,7 +483,8 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
       isRequired: isRequired,
       placeholder: placeholder,
       active: activeOption,
-      setActiveSegment: setActiveSegment
+      setActiveSegment: setActiveSegment,
+      isDisabled: isDisabled
     }, inputProps)));
   });
 });
@@ -500,6 +507,7 @@ ChoiceField.propTypes = {
 const CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(props) {
   const {
     Component,
+    isDisabled,
     isRequired,
     name,
     fieldProps,
@@ -514,6 +522,7 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
   }) => /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
     className: clsx__default.default('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
     fieldClassName: 'form-custom',
+    isDisabled: isDisabled,
     inputName: input.name,
     inputValue: input.value,
     isRequired: isRequired,
@@ -526,6 +535,7 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
     metaValid: meta.valid,
     hideMessage: hideMessage
   }, fieldProps), /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, props, {
+    isDisabled: isDisabled,
     input: input,
     meta: meta
   }))));
@@ -544,6 +554,7 @@ CustomField.propTypes = {
 const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(props) {
   const {
     isRequired,
+    isDisabled,
     name,
     fieldProps,
     inputProps,
@@ -561,6 +572,7 @@ const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(pr
     inputName: input.name,
     inputValue: input.value,
     isRequired: isRequired,
+    isDisabled: isDisabled,
     metaActive: meta.active,
     metaError: meta.error,
     metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -572,6 +584,7 @@ const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(pr
   }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
     autoComplete: "nope",
     name: input.name,
+    isDisabled: isDisabled,
     value: input.value,
     onBlur: input.onBlur,
     onChange: input.onChange,
@@ -601,6 +614,7 @@ function DatePickerField(props) {
     iconBorderHover,
     iconFill,
     iconFillHover,
+    isDisabled,
     iconRevealableShow,
     iconRevealableHide,
     iconShape,
@@ -626,6 +640,7 @@ function DatePickerField(props) {
       inputName: input.name,
       inputValue: input.value || '',
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -638,6 +653,7 @@ function DatePickerField(props) {
       name: input.name,
       value: input.value || '',
       onBlur: input.onBlur,
+      isDisabled: isDisabled,
       onChange: onChangeField,
       onFocus: input.onFocus,
       inputProps: inputProps,
@@ -1211,7 +1227,7 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
     messageTextColor,
     children,
     dataTour,
-    hideMessage,
+    hideGroupMessage,
     name,
     showErrorsOnSubmit
   } = props;
@@ -1242,13 +1258,13 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
       textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-items"
-    }, children), after), !hideMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    }, children), after), !hideGroupMessage && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
       className: "form__group-message form__group-message_type-error",
       size: errorMessageTextSize,
       textWeight: errorMessageTextWeight,
       textColor: errorMessageTextColor,
       id: `${name}-error`
-    }, error), Boolean(message) && !showError && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
       className: "form__group-message",
       size: messageTextSize,
       textWeight: messageTextWeight,
@@ -1285,6 +1301,7 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
     name,
     parse,
     iconSize,
+    isDisabled,
     iconBorder,
     iconBorderHover,
     iconFill,
@@ -1327,6 +1344,7 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       inputName: input.name,
       inputValue: input.value || '',
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1343,7 +1361,8 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       value: input.value || '',
       onBlur: input.onBlur,
       onChange: onChangeField,
-      onFocus: input.onFocus
+      onFocus: input.onFocus,
+      isDisabled: isDisabled
     }, inputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
@@ -1518,6 +1537,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
     editableProps,
     inputProps,
     onChange,
+    isDisabled,
     hideMessage
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
@@ -1531,6 +1551,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
     inputName: input.name,
     inputValue: input.value || '',
     isRequired: isRequired,
+    isDisabled: isDisabled,
     metaActive: meta.active,
     metaError: meta.error,
     metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1542,6 +1563,7 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
   }, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
     input: input,
     options: options,
+    isDisabled: isDisabled,
     onChange: onChange,
     editableProps: editableProps,
     inputProps: inputProps
@@ -1571,6 +1593,7 @@ function SegmentedField(props) {
     name,
     fieldProps,
     inputProps,
+    isDisabled,
     hideMessage
   } = props;
   const {
@@ -1602,6 +1625,7 @@ function SegmentedField(props) {
       inputName: input.name,
       inputValue: input.value || [],
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1612,6 +1636,7 @@ function SegmentedField(props) {
       hideMessage: hideMessage
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Segmented.Segmented, Object.assign({
       segments: options,
+      isDisabled: isDisabled,
       setActiveSegment: setActiveSegment,
       activeSegment: activeOption
     }, inputProps)));
@@ -1654,6 +1679,7 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
     classNameGroupItem,
     fieldProps,
     hideMessage,
+    isDisabled,
     isRequired,
     name,
     options,
@@ -1696,6 +1722,7 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       inputName: input.name,
       inputValue: input.value,
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1709,6 +1736,7 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       instanceId: `id_${input.name}`,
       value: selectedOptions,
       onChange: onChangeValue,
+      isDisabled: isDisabled,
       options: options,
       ref: selectRef
     }, selectProps)));
@@ -1727,6 +1755,7 @@ SelectField.propTypes = {
 const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(props) {
   const {
     name,
+    isDisabled,
     isRequired,
     onChange,
     fieldProps,
@@ -1753,6 +1782,7 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
       inputName: input.name,
       inputValue: input.checked,
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1764,6 +1794,7 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
       tag: "label"
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Switch.Switch, Object.assign({
       autoComplete: "nope",
+      isDisabled: isDisabled,
       checked: input.checked,
       name: input.name,
       type: "checkbox",
@@ -1788,6 +1819,7 @@ SwitchField.propTypes = {
 const TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaField(props) {
   const {
     isRequired,
+    isDisabled,
     name,
     fieldProps,
     inputProps,
@@ -1805,6 +1837,7 @@ const TextareaField = /*#__PURE__*/React__default.default.memo(function Textarea
     inputName: input.name,
     inputValue: input.value,
     isRequired: isRequired,
+    isDisabled: isDisabled,
     metaActive: meta.active,
     metaError: meta.error,
     metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1817,6 +1850,7 @@ const TextareaField = /*#__PURE__*/React__default.default.memo(function Textarea
     autoComplete: "nope",
     name: input.name,
     value: input.value,
+    isDisabled: isDisabled,
     onBlur: input.onBlur,
     onChange: input.onChange,
     onFocus: input.onFocus

package/dist/itcase-forms.esm.js

@@ -150,6 +150,7 @@ function FieldWrapperBase(props) {
     type,
     labelHidden,
     hideMessage,
+    isDisabled,
     isHidden,
     tag: Tag,
     dataTour,
@@ -168,8 +169,8 @@ function FieldWrapperBase(props) {
     const isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
     return hasValue && (metaValid || isModifiedAfterSubmit);
   }, [inputValue, metaValid, metaError, metaSubmitError, metaModifiedSinceLastSubmit]);
-  const formFieldClass = useMemo(() => clsx(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue]);
-  const fieldClass = useMemo(() => clsx(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`), [fieldClassName, showError, showValid, metaActive, inputValue]);
+  const formFieldClass = useMemo(() => clsx(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue, isDisabled]);
+  const fieldClass = useMemo(() => clsx(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`), [fieldClassName, showError, showValid, metaActive, inputValue, isDisabled]);
   const sizeClass = useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -202,7 +203,7 @@ function FieldWrapperBase(props) {
     styles: formFieldStyles
   } = useStyles(props);
   return /*#__PURE__*/React.createElement(Tag, {
-    className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
@@ -230,18 +231,18 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), !hideMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message"
-  }, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
+  }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
     id: `${inputName}-error`
-  }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
+  }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
     textWeight: messageTextWeight,
     textColor: messageTextColor
-  }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
+  }, message), (!showError && !message || showError && !message && (!error || typeof error !== 'string')) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize
   }, '\u00A0')), after);
@@ -341,6 +342,7 @@ FieldWrapper.propTypes = {
 const CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
   const {
     name,
+    isDisabled,
     isRequired,
     onChange,
     fieldProps,
@@ -367,6 +369,7 @@ const CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
       inputName: input.name,
       inputValue: input.checked,
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -380,6 +383,7 @@ const CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
       autoComplete: "nope",
       checked: input.checked,
       name: input.name,
+      isDisabled: isDisabled,
       type: "checkbox",
       onBlur: input.onBlur,
       onChange: onChangeField,
@@ -408,6 +412,7 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
     inputProps,
     isMultiple,
     isRequired,
+    isDisabled,
     label,
     messageType,
     name,
@@ -448,6 +453,7 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       inputName: input.name,
       inputValue: input.value || [],
       isRequired: isRequired,
+      isDisabled: isDisabled,
       label: label,
       messageType: messageType,
       metaActive: meta.active,
@@ -467,7 +473,8 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       isRequired: isRequired,
       placeholder: placeholder,
       active: activeOption,
-      setActiveSegment: setActiveSegment
+      setActiveSegment: setActiveSegment,
+      isDisabled: isDisabled
     }, inputProps)));
   });
 });
@@ -490,6 +497,7 @@ ChoiceField.propTypes = {
 const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
   const {
     Component,
+    isDisabled,
     isRequired,
     name,
     fieldProps,
@@ -504,6 +512,7 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
   }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
     className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
     fieldClassName: 'form-custom',
+    isDisabled: isDisabled,
     inputName: input.name,
     inputValue: input.value,
     isRequired: isRequired,
@@ -516,6 +525,7 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
     metaValid: meta.valid,
     hideMessage: hideMessage
   }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
+    isDisabled: isDisabled,
     input: input,
     meta: meta
   }))));
@@ -534,6 +544,7 @@ CustomField.propTypes = {
 const CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
   const {
     isRequired,
+    isDisabled,
     name,
     fieldProps,
     inputProps,
@@ -551,6 +562,7 @@ const CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
     inputName: input.name,
     inputValue: input.value,
     isRequired: isRequired,
+    isDisabled: isDisabled,
     metaActive: meta.active,
     metaError: meta.error,
     metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -562,6 +574,7 @@ const CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
   }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
     autoComplete: "nope",
     name: input.name,
+    isDisabled: isDisabled,
     value: input.value,
     onBlur: input.onBlur,
     onChange: input.onChange,
@@ -591,6 +604,7 @@ function DatePickerField(props) {
     iconBorderHover,
     iconFill,
     iconFillHover,
+    isDisabled,
     iconRevealableShow,
     iconRevealableHide,
     iconShape,
@@ -616,6 +630,7 @@ function DatePickerField(props) {
       inputName: input.name,
       inputValue: input.value || '',
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -628,6 +643,7 @@ function DatePickerField(props) {
       name: input.name,
       value: input.value || '',
       onBlur: input.onBlur,
+      isDisabled: isDisabled,
       onChange: onChangeField,
       onFocus: input.onFocus,
       inputProps: inputProps,
@@ -1201,7 +1217,7 @@ const Group = /*#__PURE__*/React.memo(function Group(props) {
     messageTextColor,
     children,
     dataTour,
-    hideMessage,
+    hideGroupMessage,
     name,
     showErrorsOnSubmit
   } = props;
@@ -1232,13 +1248,13 @@ const Group = /*#__PURE__*/React.memo(function Group(props) {
       textWeight: labelTextWeight
     }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
-    }, children), after), !hideMessage && /*#__PURE__*/React.createElement(React.Fragment, null, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
+    }, children), after), !hideGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message form__group-message_type-error",
       size: errorMessageTextSize,
       textWeight: errorMessageTextWeight,
       textColor: errorMessageTextColor,
       id: `${name}-error`
-    }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
+    }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize,
       textWeight: messageTextWeight,
@@ -1275,6 +1291,7 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
     name,
     parse,
     iconSize,
+    isDisabled,
     iconBorder,
     iconBorderHover,
     iconFill,
@@ -1317,6 +1334,7 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
       inputName: input.name,
       inputValue: input.value || '',
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1333,7 +1351,8 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
       value: input.value || '',
       onBlur: input.onBlur,
       onChange: onChangeField,
-      onFocus: input.onFocus
+      onFocus: input.onFocus,
+      isDisabled: isDisabled
     }, inputProps)), isRevealable && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
@@ -1508,6 +1527,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
     editableProps,
     inputProps,
     onChange,
+    isDisabled,
     hideMessage
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
@@ -1521,6 +1541,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
     inputName: input.name,
     inputValue: input.value || '',
     isRequired: isRequired,
+    isDisabled: isDisabled,
     metaActive: meta.active,
     metaError: meta.error,
     metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1532,6 +1553,7 @@ const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
   }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
     input: input,
     options: options,
+    isDisabled: isDisabled,
     onChange: onChange,
     editableProps: editableProps,
     inputProps: inputProps
@@ -1561,6 +1583,7 @@ function SegmentedField(props) {
     name,
     fieldProps,
     inputProps,
+    isDisabled,
     hideMessage
   } = props;
   const {
@@ -1592,6 +1615,7 @@ function SegmentedField(props) {
       inputName: input.name,
       inputValue: input.value || [],
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1602,6 +1626,7 @@ function SegmentedField(props) {
       hideMessage: hideMessage
     }, fieldProps), /*#__PURE__*/React.createElement(Segmented, Object.assign({
       segments: options,
+      isDisabled: isDisabled,
       setActiveSegment: setActiveSegment,
       activeSegment: activeOption
     }, inputProps)));
@@ -1644,6 +1669,7 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
     classNameGroupItem,
     fieldProps,
     hideMessage,
+    isDisabled,
     isRequired,
     name,
     options,
@@ -1686,6 +1712,7 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       inputName: input.name,
       inputValue: input.value,
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1699,6 +1726,7 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       instanceId: `id_${input.name}`,
       value: selectedOptions,
       onChange: onChangeValue,
+      isDisabled: isDisabled,
       options: options,
       ref: selectRef
     }, selectProps)));
@@ -1717,6 +1745,7 @@ SelectField.propTypes = {
 const SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
   const {
     name,
+    isDisabled,
     isRequired,
     onChange,
     fieldProps,
@@ -1743,6 +1772,7 @@ const SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
       inputName: input.name,
       inputValue: input.checked,
       isRequired: isRequired,
+      isDisabled: isDisabled,
       metaActive: meta.active,
       metaError: meta.error,
       metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1754,6 +1784,7 @@ const SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
       tag: "label"
     }, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
       autoComplete: "nope",
+      isDisabled: isDisabled,
       checked: input.checked,
       name: input.name,
       type: "checkbox",
@@ -1778,6 +1809,7 @@ SwitchField.propTypes = {
 const TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
   const {
     isRequired,
+    isDisabled,
     name,
     fieldProps,
     inputProps,
@@ -1795,6 +1827,7 @@ const TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
     inputName: input.name,
     inputValue: input.value,
     isRequired: isRequired,
+    isDisabled: isDisabled,
     metaActive: meta.active,
     metaError: meta.error,
     metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
@@ -1807,6 +1840,7 @@ const TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
     autoComplete: "nope",
     name: input.name,
     value: input.value,
+    isDisabled: isDisabled,
     onBlur: input.onBlur,
     onChange: input.onChange,
     onFocus: input.onFocus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,14 +30,14 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.10",
-    "@itcase/ui": "^1.0.84",
+    "@itcase/common": "^1.1.11",
+    "@itcase/ui": "^1.0.88",
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
     "date-fns": "2.0.0-alpha.7",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.10.51",
+    "libphonenumber-js": "^1.10.52",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "prop-types": "^15.8.1",
@@ -63,12 +63,12 @@
     "@semantic-release/git": "^10.0.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.4.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-n": "^16.5.0",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-standard": "^5.0.0",
@@ -97,12 +97,12 @@
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.1.1",
-    "react-datepicker": "^4.24.0",
-    "rollup": "^4.9.0",
+    "react-datepicker": "^4.25.0",
+    "rollup": "^4.9.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^22.0.12",
-    "stylelint": "^16.0.2",
-    "stylelint-config-standard": "^35.0.0",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
     "stylelint-no-unsupported-browser-features": "^7.0.0",
     "stylelint-order": "^6.0.4"
   }