@itcase/forms 1.0.78 → 1.0.79

package/dist/css/form/Field/Group/Group.css

@@ -1,15 +1,16 @@
 .form {
   &__group {
     width: 100%;
+    padding: var(--form-group-padding, 0);
     margin: 0 0 12px 0;
     &_hidden {
-      visibility: hidden;
-      display: none;
       position: absolute;
+      display: none;
+      visibility: hidden;
       z-index: -1;
     }
     &_type_row.&_hidden {
-      visibility: hidden
+      visibility: hidden;
     }
     &-wrapper {
       display: flex;
@@ -31,5 +32,4 @@
       }
     }
   }
-
 }

package/dist/css/form/Field/MaskedInput/MaskedInput.css

@@ -0,0 +1,45 @@
+.form {
+  &-maskedInput {
+    position: relative;
+    &&_state {
+      &_success {
+        & .input {
+          border: solid 1px var(--input-success-border, green);
+          &:hover {
+            border: solid 1px var(--input-success-border-hover);
+          }
+        }
+      }
+      &_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);
+        }
+      }
+      &_focus {
+        & .input {
+          background: var(--input-focus-background);
+          border: solid 1px var(--input-focus-border);
+        }
+      }
+    }
+  }
+}
+
+:root {
+  --input-success-border: var(--color-success-border-primary);
+  --input-success-border-hover: var(--color-surface-border-quaternary);
+  --input-error-border: var(--color-error-border-primary);
+  --input-focus-background: var(--color-surface-primary);
+  --input-focus-border: var(--color-surface-border-quaternary);
+}

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

@@ -12,6 +12,7 @@
     &-item {
       height: var(--form-field-helptext-height, 20px);
       line-height: var(--form-field-helptext-line-height, 20px);
+      padding: var(--form-field-helptext-padding, 0);
       display: block;
     }
   }
@@ -37,10 +38,10 @@
 
 .form {
   &^&-field_type_float {
+    padding: var(--form-field_type_float-padding);
+    margin: var(--form-field_type_float-margin);
     position: relative;
     gap: var(--form-field_type_float-gap);
-    margin: var(--form-field_type_float-margin);
-    padding: var(--form-field_type_float-padding);
     &^&__item_state_focus,
     &^&__item_state_filled {
       & .form {
@@ -59,26 +60,26 @@
     & .form {
       &-field {
         &__label {
-          pointer-events: none;
+          background: var(--color-surface-primary);
+          padding: 0 4px;
           position: absolute;
           display: flex;
           top: 0;
           z-index: 2;
           transform: scale(1) translate(8px, 20px);
           transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+          pointer-events: none;
           transform-origin: top left;
-          background: var(--color-surface-primary);
-          padding: 0 4px;
         }
         &__message {
-          padding: 0 0 0 12px;
+          padding: var(--form-field-type-float-message-padding, 0 0 0 12px);
         }
       }
     }
     & .input {
       &::placeholder {
-        opacity: 0%;
         transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0%;
       }
     }
   }

package/dist/itcase-forms.cjs.js

@@ -14,6 +14,7 @@ var useStyles = require('@itcase/ui/hooks/useStyles');
 var camelCase = require('lodash/camelCase');
 var snakeCase = require('lodash/snakeCase');
 var Choice = require('@itcase/ui/components/Choice');
+var Icon = require('@itcase/ui/components/Icon');
 var Code = require('@itcase/ui/components/Code');
 var DatePicker = require('@itcase/ui/components/DatePicker');
 var axios = require('axios');
@@ -23,7 +24,6 @@ var reactDropzone = require('react-dropzone');
 var common = require('@itcase/common');
 var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
-var Icon = require('@itcase/ui/components/Icon');
 var Input = require('@itcase/ui/components/Input');
 var Radio = require('@itcase/ui/components/Radio');
 var Segmented = require('@itcase/ui/components/Segmented');
@@ -126,11 +126,17 @@ function useYupValidationSchema(schema, language) {
 
 function FieldWrapperBase(props) {
   const {
+    id,
+    children,
+    isDisabled,
+    isErrorState,
+    isHidden,
+    isRequired,
+    isValidState,
     after,
     afterItem,
     before,
     beforeItem,
-    children,
     className,
     dataTour,
     desc,
@@ -141,13 +147,17 @@ function FieldWrapperBase(props) {
     dividerFill,
     dividerSize,
     dividerWidth,
+    errorKey,
+    errorMessage,
     fieldClassName,
-    id,
+    helpText,
+    helpTextColor,
+    helpTextColorSuccess,
+    helpTextSize,
+    helpTextSizeMobile,
+    helpTextWeight,
     inputName,
     inputValue,
-    isDisabled,
-    isHidden,
-    isRequired,
     label,
     labelHidden,
     labelTextColor,
@@ -155,21 +165,12 @@ function FieldWrapperBase(props) {
     labelTextSizeMobile,
     labelTextSizeTablet,
     labelTextWeight,
-    helpText,
-    helpTextSize,
-    helpTextSizeMobile,
-    helpTextWeight,
-    helpTextColor,
-    isErrorState,
-    isValidState,
-    errorMessage,
     messageTextSize,
     metaActive,
     metaError,
     set,
     showDivider,
     showMessage,
-    errorKey,
     tag: Tag,
     type
   } = props;
@@ -241,10 +242,10 @@ function FieldWrapperBase(props) {
     className: clsx__default.default('form-field__content-inner', fieldClass)
   }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
     className: "form-field__item-divider",
-    direction: dividerDirection,
+    width: dividerWidth,
     fill: dividerFill,
-    size: dividerSize,
-    width: dividerWidth
+    direction: dividerDirection,
+    size: dividerSize
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message",
     "data-test-id": `${inputName}FieldMessage`
@@ -260,7 +261,7 @@ function FieldWrapperBase(props) {
     dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
     sizeMobile: helpTextSizeMobile,
-    textColor: helpTextColor,
+    textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
@@ -269,20 +270,24 @@ function FieldWrapperBase(props) {
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
-  requiredMessageTextSize: 's',
-  requiredMessageTextColor: 'warningTextPrimary',
-  errorMessageTextSize: 's',
   errorMessageTextColor: 'errorTextPrimary',
+  errorMessageTextSize: 's',
+  requiredMessageTextColor: 'warningTextPrimary',
+  requiredMessageTextSize: 's',
   tag: 'div',
   type: 'normal'
 };
 FieldWrapperBase.propTypes = {
+  id: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  isDisabled: PropTypes__default.default.bool,
+  isHidden: PropTypes__default.default.bool,
+  isRequired: PropTypes__default.default.bool,
   after: PropTypes__default.default.any,
   afterItem: PropTypes__default.default.any,
   autoComplete: PropTypes__default.default.string,
   before: PropTypes__default.default.any,
   beforeItem: PropTypes__default.default.any,
-  children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   dataTour: PropTypes__default.default.string,
   desc: PropTypes__default.default.string,
@@ -294,15 +299,11 @@ FieldWrapperBase.propTypes = {
   dividerSize: PropTypes__default.default.string,
   dividerWidth: PropTypes__default.default.string,
   fieldClassName: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
   inputName: PropTypes__default.default.string,
   inputOnBlur: PropTypes__default.default.func,
   inputOnChange: PropTypes__default.default.func,
   inputOnFocus: PropTypes__default.default.func,
   inputValue: PropTypes__default.default.any,
-  isDisabled: PropTypes__default.default.bool,
-  isHidden: PropTypes__default.default.bool,
-  isRequired: PropTypes__default.default.bool,
   itemType: PropTypes__default.default.string,
   label: PropTypes__default.default.any,
   labelHidden: PropTypes__default.default.bool,
@@ -659,7 +660,13 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
     initialValue,
     fieldProps,
     classNameGroupItem,
-    showMessage
+    showMessage,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     initialValue: initialValue,
@@ -708,7 +715,16 @@ const CustomField = /*#__PURE__*/React__default.default.memo(function CustomFiel
       input: input,
       isDisabled: isDisabled,
       meta: meta
-    })));
+    })), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
   });
 });
 CustomField.defaultProps = {
@@ -1567,6 +1583,14 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
     isRequired,
     isRevealable,
     classNameGroupItem,
+    // dataTestId,
+    // iconBorder,
+    // iconBorderHover,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
     fieldProps,
     iconFill,
     iconFillHover,
@@ -1579,10 +1603,8 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
     name,
     parse,
     showMessage,
-    onChange
-    // dataTestId,
-    // iconBorder,
-    // iconBorderHover,
+    onChange,
+    onClickClearIcon
   } = props;
   const [isRevealed, setIsRevealed] = React.useState(false);
   const inputType = React.useMemo(() => {
@@ -1665,6 +1687,15 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       size: iconSize,
       SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
       onClick: onClickIconReveal
+    }), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
     }));
   });
 });
@@ -2032,7 +2063,7 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
     fieldProps,
     initialValue,
     name,
-    options,
+    options = [],
     selectProps,
     selectRef,
     showMessage,
@@ -2057,8 +2088,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       const optionsValues = getDefaultValue(options, input.value);
       if (!optionsValues.length && input.value?.length) {
         optionsValues.push({
-          value: input.value,
-          label: input.value
+          label: input.value,
+          value: input.value
         });
       }
       return optionsValues;
@@ -2088,8 +2119,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       meta: meta
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: selectProps
+      inputProps: selectProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
@@ -2098,33 +2129,33 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       fieldClassName: 'form-select',
       inputName: input.name,
       inputValue: input.value,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage,
       isDisabled: isDisabled,
       isErrorState: isErrorState,
       isRequired: isRequired,
-      isValidState: isValidState,
-      metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
       className: "form-select-item",
+      ref: selectRef,
       instanceId: `id_${input.name}`,
-      isDisabled: isDisabled,
       options: options,
-      ref: selectRef,
       value: selectedOptions,
+      isDisabled: isDisabled,
       onChange: onChangeValue,
       onInputChange: onInputChange
     }, updatedSelectProps)));
   });
 });
 SelectField.propTypes = {
-  name: PropTypes__default.default.string.isRequired,
-  classNameGroupItem: PropTypes__default.default.string,
-  fieldProps: PropTypes__default.default.object,
   isDisabled: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
+  classNameGroupItem: PropTypes__default.default.string,
+  fieldProps: PropTypes__default.default.object,
   label: PropTypes__default.default.any,
   messageType: PropTypes__default.default.string,
+  name: PropTypes__default.default.string.isRequired,
   options: PropTypes__default.default.array,
   selectProps: PropTypes__default.default.object,
   selectRef: PropTypes__default.default.any,
@@ -2306,7 +2337,13 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
     showMessage,
     inputProps,
     optionsMask,
-    unmasked
+    unmasked,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     initialValue: initialValue,
@@ -2373,7 +2410,16 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
       value: value,
       onBlur: input.onBlur,
       onFocus: input.onFocus
-    }, updatedInputProps)));
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
   });
 });
 MaskedInputField.defaultProps = {

package/dist/itcase-forms.esm.js

@@ -13,6 +13,7 @@ import { useStyles } from '@itcase/ui/hooks/useStyles';
 import camelCase from 'lodash/camelCase';
 import snakeCase from 'lodash/snakeCase';
 import { Choice } from '@itcase/ui/components/Choice';
+import { Icon } from '@itcase/ui/components/Icon';
 import { Code } from '@itcase/ui/components/Code';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import axios from 'axios';
@@ -22,7 +23,6 @@ import { useDropzone, ErrorCode } from 'react-dropzone';
 import { createFileFromDataURL } from '@itcase/common';
 import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
-import { Icon } from '@itcase/ui/components/Icon';
 import { Input } from '@itcase/ui/components/Input';
 import { Radio } from '@itcase/ui/components/Radio';
 import { Segmented } from '@itcase/ui/components/Segmented';
@@ -114,11 +114,17 @@ function useYupValidationSchema(schema, language) {
 
 function FieldWrapperBase(props) {
   const {
+    id,
+    children,
+    isDisabled,
+    isErrorState,
+    isHidden,
+    isRequired,
+    isValidState,
     after,
     afterItem,
     before,
     beforeItem,
-    children,
     className,
     dataTour,
     desc,
@@ -129,13 +135,17 @@ function FieldWrapperBase(props) {
     dividerFill,
     dividerSize,
     dividerWidth,
+    errorKey,
+    errorMessage,
     fieldClassName,
-    id,
+    helpText,
+    helpTextColor,
+    helpTextColorSuccess,
+    helpTextSize,
+    helpTextSizeMobile,
+    helpTextWeight,
     inputName,
     inputValue,
-    isDisabled,
-    isHidden,
-    isRequired,
     label,
     labelHidden,
     labelTextColor,
@@ -143,21 +153,12 @@ function FieldWrapperBase(props) {
     labelTextSizeMobile,
     labelTextSizeTablet,
     labelTextWeight,
-    helpText,
-    helpTextSize,
-    helpTextSizeMobile,
-    helpTextWeight,
-    helpTextColor,
-    isErrorState,
-    isValidState,
-    errorMessage,
     messageTextSize,
     metaActive,
     metaError,
     set,
     showDivider,
     showMessage,
-    errorKey,
     tag: Tag,
     type
   } = props;
@@ -229,10 +230,10 @@ function FieldWrapperBase(props) {
     className: clsx('form-field__content-inner', fieldClass)
   }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
     className: "form-field__item-divider",
-    direction: dividerDirection,
+    width: dividerWidth,
     fill: dividerFill,
-    size: dividerSize,
-    width: dividerWidth
+    direction: dividerDirection,
+    size: dividerSize
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
     "data-test-id": `${inputName}FieldMessage`
@@ -248,7 +249,7 @@ function FieldWrapperBase(props) {
     dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
     sizeMobile: helpTextSizeMobile,
-    textColor: helpTextColor,
+    textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
@@ -257,20 +258,24 @@ function FieldWrapperBase(props) {
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
-  requiredMessageTextSize: 's',
-  requiredMessageTextColor: 'warningTextPrimary',
-  errorMessageTextSize: 's',
   errorMessageTextColor: 'errorTextPrimary',
+  errorMessageTextSize: 's',
+  requiredMessageTextColor: 'warningTextPrimary',
+  requiredMessageTextSize: 's',
   tag: 'div',
   type: 'normal'
 };
 FieldWrapperBase.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isHidden: PropTypes.bool,
+  isRequired: PropTypes.bool,
   after: PropTypes.any,
   afterItem: PropTypes.any,
   autoComplete: PropTypes.string,
   before: PropTypes.any,
   beforeItem: PropTypes.any,
-  children: PropTypes.any,
   className: PropTypes.string,
   dataTour: PropTypes.string,
   desc: PropTypes.string,
@@ -282,15 +287,11 @@ FieldWrapperBase.propTypes = {
   dividerSize: PropTypes.string,
   dividerWidth: PropTypes.string,
   fieldClassName: PropTypes.string,
-  id: PropTypes.string,
   inputName: PropTypes.string,
   inputOnBlur: PropTypes.func,
   inputOnChange: PropTypes.func,
   inputOnFocus: PropTypes.func,
   inputValue: PropTypes.any,
-  isDisabled: PropTypes.bool,
-  isHidden: PropTypes.bool,
-  isRequired: PropTypes.bool,
   itemType: PropTypes.string,
   label: PropTypes.any,
   labelHidden: PropTypes.bool,
@@ -647,7 +648,13 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
     initialValue,
     fieldProps,
     classNameGroupItem,
-    showMessage
+    showMessage,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     initialValue: initialValue,
@@ -696,7 +703,16 @@ const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
       input: input,
       isDisabled: isDisabled,
       meta: meta
-    })));
+    })), clearIcon && /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
   });
 });
 CustomField.defaultProps = {
@@ -1555,6 +1571,14 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
     isRequired,
     isRevealable,
     classNameGroupItem,
+    // dataTestId,
+    // iconBorder,
+    // iconBorderHover,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
     fieldProps,
     iconFill,
     iconFillHover,
@@ -1567,10 +1591,8 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
     name,
     parse,
     showMessage,
-    onChange
-    // dataTestId,
-    // iconBorder,
-    // iconBorderHover,
+    onChange,
+    onClickClearIcon
   } = props;
   const [isRevealed, setIsRevealed] = useState(false);
   const inputType = useMemo(() => {
@@ -1653,6 +1675,15 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
       size: iconSize,
       SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
       onClick: onClickIconReveal
+    }), clearIcon && /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
     }));
   });
 });
@@ -2020,7 +2051,7 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
     fieldProps,
     initialValue,
     name,
-    options,
+    options = [],
     selectProps,
     selectRef,
     showMessage,
@@ -2045,8 +2076,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       const optionsValues = getDefaultValue(options, input.value);
       if (!optionsValues.length && input.value?.length) {
         optionsValues.push({
-          value: input.value,
-          label: input.value
+          label: input.value,
+          value: input.value
         });
       }
       return optionsValues;
@@ -2076,8 +2107,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       meta: meta
     });
     const updatedSelectProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: selectProps
+      inputProps: selectProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
@@ -2086,33 +2117,33 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       fieldClassName: 'form-select',
       inputName: input.name,
       inputValue: input.value,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage,
       isDisabled: isDisabled,
       isErrorState: isErrorState,
       isRequired: isRequired,
-      isValidState: isValidState,
-      metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
       className: "form-select-item",
+      ref: selectRef,
       instanceId: `id_${input.name}`,
-      isDisabled: isDisabled,
       options: options,
-      ref: selectRef,
       value: selectedOptions,
+      isDisabled: isDisabled,
       onChange: onChangeValue,
       onInputChange: onInputChange
     }, updatedSelectProps)));
   });
 });
 SelectField.propTypes = {
-  name: PropTypes.string.isRequired,
-  classNameGroupItem: PropTypes.string,
-  fieldProps: PropTypes.object,
   isDisabled: PropTypes.bool,
   isRequired: PropTypes.bool,
+  classNameGroupItem: PropTypes.string,
+  fieldProps: PropTypes.object,
   label: PropTypes.any,
   messageType: PropTypes.string,
+  name: PropTypes.string.isRequired,
   options: PropTypes.array,
   selectProps: PropTypes.object,
   selectRef: PropTypes.any,
@@ -2294,7 +2325,13 @@ const MaskedInputField = /*#__PURE__*/React.memo(function MaskedInputField(props
     showMessage,
     inputProps,
     optionsMask,
-    unmasked
+    unmasked,
+    clearIcon,
+    clearIconFill,
+    clearIconFillHover,
+    clearIconShape,
+    clearIconSize,
+    onClickClearIcon
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     initialValue: initialValue,
@@ -2361,7 +2398,16 @@ const MaskedInputField = /*#__PURE__*/React.memo(function MaskedInputField(props
       value: value,
       onBlur: input.onBlur,
       onFocus: input.onFocus
-    }, updatedInputProps)));
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      iconFill: clearIconFill,
+      iconFillHover: clearIconFillHover,
+      imageSrc: clearIcon,
+      shape: clearIconShape,
+      size: clearIconSize,
+      SvgImage: clearIcon,
+      onClick: onClickClearIcon
+    }));
   });
 });
 MaskedInputField.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.78",
+  "version": "1.0.79",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,37 +30,34 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.17",
-    "@itcase/ui": "^1.3.15",
+    "@itcase/common": "^1.2.18",
+    "@itcase/config": "^1.0.16",
+    "@itcase/ui": "^1.3.27",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.11.18",
+    "libphonenumber-js": "^1.11.20",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
-    "postcss": "^8.5.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-date-range": "^2.0.1",
-    "react-datepicker": "^7.6.0",
+    "react-datepicker": "^8.1.0",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.3.5",
+    "react-dropzone": "^14.3.8",
     "react-final-form": "^6.5.9",
     "react-imask": "^7.6.1",
-    "react-select": "^5.9.0"
+    "react-select": "^5.10.0"
   },
   "devDependencies": {
-    "@itcase/lint": "^1.0.36",
-    "@babel/core": "^7.26.0",
-    "@babel/eslint-parser": "^7.26.5",
-    "@babel/preset-env": "^7.26.0",
+    "@itcase/lint": "^1.0.41",
+    "@babel/core": "^7.26.9",
+    "@babel/eslint-parser": "^7.26.8",
+    "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/eslintrc": "^3.2.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
@@ -74,50 +71,15 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.18.0",
-    "eslint-config-prettier": "10.0.1",
-    "eslint-config-standard": "17.1.0",
-    "eslint-plugin-babel": "5.3.1",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-n": "17.15.1",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.2.3",
-    "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-standard": "5.0.0",
+    "eslint": "9.21.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.4.1",
-    "npm": "^11.0.0",
-    "postcss-aspect-ratio-polyfill": "^2.0.0",
-    "postcss-cli": "^11.0.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-dark-theme-class": "^1.3.0",
-    "postcss-discard-duplicates": "^7.0.1",
-    "postcss-each": "^1.1.0",
-    "postcss-easings": "^4.0.0",
-    "postcss-extend-rule": "^4.0.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-hexrgba": "^2.1.0",
-    "postcss-import": "^16.1.0",
-    "postcss-import-ext-glob": "^2.1.1",
-    "postcss-mixins": "^11.0.3",
-    "postcss-nested": "^7.0.2",
-    "postcss-nested-ancestors": "^3.0.0",
-    "postcss-normalize": "^13.0.1",
-    "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.1.3",
-    "postcss-pxtorem": "^6.1.0",
-    "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
-    "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "3.4.2",
-    "rollup": "^4.31.0",
+    "lint-staged": "^15.4.3",
+    "postcss": "^8.5.3",
+    "prettier": "3.5.2",
+    "rollup": "^4.34.8",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^24.2.1",
-    "stylelint": "^16.13.2",
-    "stylelint-config-standard": "^37.0.0",
-    "stylelint-no-unsupported-browser-features": "^8.0.2",
-    "stylelint-order": "^6.0.4",
+    "semantic-release": "^24.2.3",
+    "stylelint": "^16.14.1",
     "typescript": "^5.7.3"
   }
 }