intelicoreact 1.6.18 → 1.6.20

package/dist/Atomic/FormElements/InputMask2/InputMask2.js

@@ -1 +1,674 @@
-function n(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,r=Array(t);e<t;e++)r[e]=n[e];return r}function t(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.forEach(function(t){var r;r=e[t],t in n?Object.defineProperty(n,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[t]=r})}return n}function e(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,t){var e,r,i=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=i){var a=[],o=!0,l=!1;try{for(i=i.call(n);!(o=(e=i.next()).done)&&(a.push(e.value),!t||a.length!==t);o=!0);}catch(n){l=!0,r=n}finally{try{o||null==i.return||i.return()}finally{if(l)throw r}}return a}}(n,t)||i(n,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(t)||i(t)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);if("Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(t,e)}}import{jsx as a,jsxs as o}from"react/jsx-runtime";import{createRef as l,useEffect as u,useMemo as c,useRef as s,useState as f}from"react";import m from"classnames";import{X as d}from"react-feather";import{KEYBOARD_KEY_CODES as h}from"../../../Constants/index.constants";import{disableDefaultBehavior as p}from"../../../Functions/utils";import v from"../../Layout/Spinner/Spinner";import y from"../../UI/DynamicIcon/DynamicIcon";import k from"../../UI/Hint/Hint";import{DEFAULT_ERRORS as b,DIGIT_MASK_CHAR as g,LOWERCASE_LETTER_MASK_CHAR as S,SPACE_CHAR as _,UPPERCASE_LETTER_MASK_CHAR as C}from"./config";import{isDigit as I,isDigitMaskChar as D,isLetter as w,isLetterMaskChar as x,isLowerCaseLetter as P,isUpperCaseLetter as E}from"./functions";import"./InputMask2.scss";export default function N(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=n.autocomplete,N=n.maskPattern,T=n.maskPatternPlaceholder,O=n.maskPlaceholder,L=n.maskDigitPlaceholder,j=n.maskLetterPlaceholder,A=n.usePatternPlaceholder,K=n.maxEditableIndex,U=void 0===K?-1:K,B=(n.isFocusedDefault,n.isClearable),F=n.isCaseSensitive,H=n.adaptTextCase,R=n.isUseAutoSelect,M=void 0===R||R,Y=n.isLoading,q=void 0!==Y&&Y,z=n.icon,V=n.showIcon,$=n.isIconLeft,G=n.isIconRight,J=n.iconDynamicKey,Q=n.iconDynamicProps,W=n.value,X=n.blinkErrors,Z=void 0===X||X,nn=n.blinkDuration,nt=void 0===nn?100:nn,ne=n.showErrors,nr=n.className,ni=void 0===nr?"":nr,na=n.errors,no=n.error,nl=void 0===no?"":no,nu=n.onChange,nc=void 0===nu?function(){}:nu,ns=n.onFocus,nf=void 0===ns?function(){}:ns,nm=n.onBlur,nd=void 0===nm?function(){}:nm,nh=n.onKeyDown,np=void 0===nh?function(){}:nh,nv=n.onFilled,ny=void 0===nv?function(){}:nv,nk=n.showHint,nb=void 0!==nk&&nk,ng=n.hintText,nS=void 0===ng?"":ng,n_=n.hintClassName,nC=void 0===n_?"":n_,nI=n.isHintRight,nD=n.isHintLeft,nw=n.hintPosition,nx=void 0===nw?"right":nw,nP=n.hideMaskOnBlur,nE=void 0===nP||nP,nN=n.returnMaskedValue,nT=void 0!==nN&&nN,nO=n.name,nL=n.fieldKey,nj=n.id,nA=n.disabled,nK=n.testId,nU=void 0===nK?"input-mask":nK,nB=n.attributesOfNativeInput,nF=t({},b,void 0===na?b:na);-1===U&&(U=N.length);var nH=e(f(!1),2),nR=nH[0],nM=nH[1],nY=e(f(!1),2),nq=nY[0],nz=nY[1],nV=e(f(!1),2),n$=nV[0],nG=nV[1],nJ=e(f(0),2),nQ=nJ[0],nW=nJ[1],nX=s(null),nZ=s(null),n0=function(n){return nZ.current=n},n1=J&&!z?a(y,t({iconKey:J},void 0===Q?{}:Q)):null,n2=function(n){n<0&&(n=0);var t=nX.current;t&&setTimeout(function(){return t.setSelectionRange(n,n)},0)},n8=e(f(!1),2),n3=n8[0],n6=n8[1],n4=e(f(!1),2),n5=n4[0],n7=n4[1],n9=e(f(nF.default),2),tn=n9[0],tt=n9[1],te=function(){return tt(nF.default)},tr=e(f([]),2),ti=tr[0],ta=tr[1];s([]);var to=function(n){var t=n.char,e=n.data,i=void 0===e?{}:e;ta(function(n){var e=r(n),a=th(t,i);return e.push(a),e})},tl=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=n.char,e=void 0===t?null:t,i=arguments.length>1?arguments[1]:void 0;ta(function(n){if(!n[i])return n;var t=r(n);return t[i].isSpecialSymbol||null===e||(t[i].char=e),t})},tu=function(){ta(function(n){return n.map(function(n){return n.isSpecialSymbol||null===n.char||(n.char=""),n})})},tc=function(n){var t=!(arguments.length>1)||void 0===arguments[1]||arguments[1];n=null==n?"":n.toString(),tu();var e=N.length-U;n.length>U?n=n.slice(0,n.length-e):U!==(null==N?void 0:N.length)-1&&(n=n.slice(0,U));var r=0;ta(function(e){return e.map(function(e,i){if(e.isSpecialSymbol)return e;for(var a=n[r],o=(null==N?void 0:N.length)||0;o&&(tm({char:n[r]})||!ts({char:a,i:i,disableErrors:!0}));)o--,a=n[++r];return ts({char:a,i:i,disableErrors:t})&&(e.char=a),++r,e})})},ts=function(n){var t=n.char,e=n.i,r=n.disableErrors,i=void 0!==r&&r;switch(tv(e)){case g:if(!I(t))return i||tt(nF.onlyDigit),!1;break;case C:if(H&&(t=t.toUpperCase()),!w(t)&&!F)return i||tt(nF.onlyLetter),!1;if(F&&!E(t))return i||tt(nF.onlyUpperCase),!1;break;case S:if(H&&(t=t.toLowerCase()),!w(t)&&!F)return i||tt(nF.onlyLetter),!1;if(F&&!P(t))return i||tt(nF.onlyLowerCase),!1;break;default:return!1}return!0},tf=function(n){var t=n.char;return!D(t)&&!x(t)},tm=function(n){var t=n.char;return!I(t)&&!w(t)},td=function(n){var t;return null==(t=tp(n))?void 0:t.isSpecialSymbol},th=function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=tm({char:n}),i=tf({char:n});return" "===n&&(n=_),t({char:i?n:"",maskChar:n,isSpecialSymbol:i,isCharSymbol:!r&&""!==n&&i,ref:l()},e)},tp=function(n){return ti[n]?t({},ti[n]):void 0},tv=function(n){var t;return(null==(t=ti[n])?void 0:t.maskChar)||void 0},ty=function(n){var t=tp(n).maskChar;return A?T[n]||O:D(t)&&L?L:x(t)&&j?j:O},tk=function(){var n,t,e=null==ti?void 0:ti.map(function(n){return{isSpecialSymbol:n.isSpecialSymbol,isCharSymbol:n.isCharSymbol}});return null==(t=tb({noLastTyppedCharIndexCheck:!0}))||null==(n=t.split(""))?void 0:n.reduce(function(n,t,r){return(!e[r].isSpecialSymbol||e[r].isCharSymbol)&&(n+=t),n},"")},tb=function(){var n=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).noLastTyppedCharIndexCheck,t=!0,e=ti.reduce(function(n,t,e){var r=t.char,i=t.isSpecialSymbol;return""===r||i?n:e},0);return ti.reduce(function(r,i,a){var o=i.char;return""!==o&&t&&(n||a<=e)?r+=o:t=!1,r},"")},tg=c(tb,[ti]),tS=function(n){nz(!0),nf()};u(function(){nG(!1),ta([]),nM(!1),N||(N=""),N.split("").map(function(n,t){to({char:n,data:{id:t,isReadOnly:t===N.length}}),(null==W?void 0:W[t])&&tl({char:W[t]},t)}),nM(!0)},[N]),u(function(){(nR&&!n$||n$&&![tb(),tk()].includes(W)&&""!==W)&&(tc(W),nG(!0))},[nR,W,n$]),u(function(){if(nR&&n$){n6(!1);var n=[tk(),tb({noLastTyppedCharIndexCheck:!0})];nT&&n.reverse(),nc.apply(void 0,r(n))}},[ti,nR,n$,W]),u(function(){n5&&setTimeout(function(){n7(!1)},nt)},[n5]),u(function(){n6(""!==nl),tt(""===nl?nF.default:nl)},[nl,n3]);var t_=function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",r=n.char,i=n.ref,o=n.maskChar,l=n.isSpecialSymbol;return a("span",{tabIndex:-1,"attr-char-id":t,className:m("input-mask_value_item",e,{"input-mask_value_item--digit":D(n.maskChar),"input-mask_value_item--letter":x(n.maskChar),"input-mask_value_item--spec":n.isSpecialSymbol,"input-mask_value_item--hidden":t<tg.length}),ref:i,children:!nq&&nE&&0===tk().length?_:l?o:""===r?ty(t):r},t)};return o("div",{"data-testid":nU,className:m("input-mask2_wrapper",ni,{"input-mask_error":n3},{"input-mask_focus":nq},{"input-mask_blink-error":n5},{disabled:nA||q}),children:[o("div",{className:"\n            input-mask\n            ".concat(n3?"input-mask_error":"","\n            ").concat(nq?"input-mask_focus":"","\n            ").concat(n5?"input-mask_blink-error":"","\n          "),children:[nb&&void 0!==nD&&nD&&a("div",{className:"input-mask_hint input-mask_hint--left",children:a(k,{hint:nS,className:nC,side:nx})}),$&&V&&a("div",{className:"input-mask_icon input-mask_icon--left",children:null!=n1?n1:z}),a("div",{className:"input-mask_value",children:ti.map(function(n,t){var e=n.char;return n.isSpecialSymbol?t_(n,t,"input-mask_value_item_spec-char"):""===e?t_(n,t,"input-mask_value_item_mask-char"):t_(n,t,"input-mask_value_item_value-char")})}),a("input",t({name:nO||nL||nj||nU||"",className:"input-mask_input ".concat(ni),ref:nX,value:tg,onChange:function(n){te();var t=n.target,e=t.value,r=t.selectionStart,i=n.nativeEvent.data;if(r>U){p(),n2(U),n7(!0);return}tc(e);var a=e.length-r;if(!e.lastIndexEqualsTo(r-1)){if(e.longerThan(tg))if(ts({char:i,i:r-1})){var o=e.length-a;n2(td(o)?o+1:o)}else p(n),n2(r-1);else if(tg.longerThan(e))switch(nZ.current){case h.Backspace:td(r)&&p(n),n2(r);break;case h.Delete:td(r)?(p(n),n2(r+1)):n2(r);break;default:nQ>0&&n2(r)}}Z&&setTimeout(function(){(e.longerThan(tg)&&!td(r-1)||tg.longerThan(e)&&!td(r))&&(i&&!ts({char:i,i:r-1})||tg===tb()&&tb()[r-1]!==i)&&(p(n),n7(!0))},0)},onKeyDown:function(n){null==np||np(n),n0(n.keyCode)},onKeyUp:function(n){n0(null),tb({noLastTyppedCharIndexCheck:!0}).length===N.length&&n.target.selectionStart>=U&&ny()},onBlur:function(){nz(!1),nd()},onClick:function(n){n.target.selectionStart>=U&&n2(U)},autoComplete:void 0===i?"off":i,onFocus:function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];M&&nX.current.select(),tS&&tS.apply(void 0,r(t))},onDragStart:function(n){n.stopPropagation(),n.preventDefault()},onDragEnd:function(n){n.stopPropagation(),n.preventDefault()},onSelect:function(n){var t,e=null!=(t=n.target)?t:{},r=e.selectionStart;nW(e.selectionEnd-r),r>=U&&n2(U)}},void 0===nB?{}:nB)),B&&a("div",{className:"input-mask_clear",children:a(d,{onClick:function(n){var t;n.stopPropagation(),n.preventDefault(),tu(),null==nX||null==(t=nX.current)||t.focus(),n2(0),te()}})}),G&&V&&a("div",{className:"input-mask_icon input-mask_icon--right",children:null!=n1?n1:z}),nb&&(void 0===nI||nI)&&a("div",{className:"input-mask_hint input-mask_hint--right",children:a(k,{hint:nS,className:nC,side:nx})})]}),void 0!==ne&&ne&&tn&&a("div",{className:"input-mask_error-text",children:tn}),q&&a(v,{size:"small"})]})}
+import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
+
+import cn from "classnames";
+import { X } from "react-feather";
+
+import { KEYBOARD_KEY_CODES as KEY_CODES } from "../../../Constants/index.constants";
+import { disableDefaultBehavior } from "../../../Functions/utils";
+import Spinner from "../../Layout/Spinner/Spinner";
+import DynamicIcon from "../../UI/DynamicIcon/DynamicIcon";
+import Hint from "../../UI/Hint/Hint";
+
+import {
+  DEFAULT_ERRORS,
+  DIGIT_MASK_CHAR,
+  LOWERCASE_LETTER_MASK_CHAR,
+  SPACE_CHAR,
+  UPPERCASE_LETTER_MASK_CHAR,
+} from "./config";
+import {
+  isDigit,
+  isDigitMaskChar,
+  isLetter,
+  isLetterMaskChar,
+  isLowerCaseLetter,
+  isUpperCaseLetter,
+} from "./functions";
+
+import "./InputMask2.scss";
+
+export default function InputMask2({
+  autocomplete = "off",
+  maskPattern,
+  maskPatternPlaceholder,
+  maskPlaceholder,
+  maskDigitPlaceholder,
+  maskLetterPlaceholder,
+  usePatternPlaceholder,
+
+  maxEditableIndex = -1,
+
+  isFocusedDefault = false,
+  isClearable,
+  isCaseSensitive,
+  adaptTextCase,
+  isUseAutoSelect = true,
+  isLoading = false,
+
+  icon,
+  showIcon,
+  isIconLeft,
+  isIconRight,
+  iconDynamicKey,
+  iconDynamicProps = {},
+  value,
+  blinkErrors = true,
+  blinkDuration = 100,
+  showErrors = false,
+
+  className = "",
+  errors: customErrors = DEFAULT_ERRORS,
+  error: customError = "",
+
+  onChange: onChangeProp = () => {},
+  onFocus: onFocusProp = () => {},
+  onBlur: onBlurProp = () => {},
+  onKeyDown: onKeyDownProp = () => {},
+  onFilled: onFilledProp = () => {},
+
+  showHint = false,
+  hintText = "",
+  hintClassName = "",
+  isHintRight = true,
+  isHintLeft = false,
+  hintPosition = "right",
+
+  hideMaskOnBlur = true,
+  returnMaskedValue = false,
+
+  name,
+  fieldKey,
+  id,
+  disabled,
+  testId = "input-mask",
+
+  attributesOfNativeInput = {},
+} = {}) {
+  const errors = {
+    ...DEFAULT_ERRORS,
+    ...customErrors,
+  };
+
+  if (maxEditableIndex === -1) maxEditableIndex = maskPattern.length;
+
+  const [isMaskRendered, setMaskRendered] = useState(false);
+  const [isFocused, setFocused] = useState(false);
+  const [isInitValue, setIsInitValue] = useState(false);
+  const [selectedLength, setSelectedLength] = useState(0);
+
+  const inputRef = useRef(null);
+  const keyDownRef = useRef(null);
+  const setKeyDown = (keyCode) => (keyDownRef.current = keyCode);
+  const getKeyDown = () => keyDownRef.current;
+
+  const DynamicIconComponent =
+    iconDynamicKey && !icon ? (
+      <DynamicIcon iconKey={iconDynamicKey} {...iconDynamicProps} />
+    ) : null;
+
+  const setCaret = (caret) => {
+    if (caret < 0) caret = 0;
+    const input = inputRef.current;
+    if (input) setTimeout(() => input.setSelectionRange(caret, caret), 0);
+  };
+
+  // ERRORS MANAGEMENT FUNCTIONS | START //
+  const [isError, setError] = useState(false);
+  const [blinkError, setBlinkError] = useState(false);
+
+  const [errorMessage, setErrorMessage] = useState(errors.default);
+  const clearErrorMessage = () => setErrorMessage(errors.default);
+  // ERRORS MANAGEMENT FUNCTIONS | END //
+
+  // INNER VALUE MANAGEMENT FUNCTIONS | START //
+  const [innerValue, setInnerValue] = useState([]);
+
+  const prevValueRef = useRef([]);
+
+  const addInnerValueChar = ({ char, data = {} }) => {
+    setInnerValue((state) => {
+      const stateCopy = [...state];
+      const charObj = getCharObj(char, data);
+
+      stateCopy.push(charObj);
+
+      return stateCopy;
+    });
+  };
+  const updateInnerValueChar = ({ char = null } = {}, i) => {
+    setInnerValue((state) => {
+      if (!state[i]) return state;
+
+      const stateCopy = [...state];
+
+      if (!stateCopy[i].isSpecialSymbol && char !== null)
+        stateCopy[i].char = char;
+
+      return stateCopy;
+    });
+  };
+  const resetInnerValue = () => {
+    setInnerValue((innerValue) =>
+      innerValue.map((item) => {
+        if (!item.isSpecialSymbol && item.char !== null) item.char = "";
+        return item;
+      }),
+    );
+  };
+  const setValue = (value, disableErrors = true) => {
+    value = value === null || value === undefined ? "" : value.toString();
+
+    resetInnerValue();
+    const staticLength = maskPattern.length - maxEditableIndex;
+
+    if (value.length > maxEditableIndex)
+      value = value.slice(0, value.length - staticLength);
+    else if (maxEditableIndex !== maskPattern?.length - 1)
+      value = value.slice(0, maxEditableIndex);
+    let valueCharIndex = 0;
+    setInnerValue((innerValue) => {
+      const newValue = innerValue.map((item, i) => {
+        const { isSpecialSymbol } = item;
+        if (isSpecialSymbol) return item;
+        let char = value[valueCharIndex];
+        let whileLimit = maskPattern?.length || 0;
+
+        while (
+          whileLimit &&
+          (isSpecialSymbolChar({ char: value[valueCharIndex] }) ||
+            !isValidChar({ char, i, disableErrors: true }))
+        ) {
+          whileLimit--;
+          char = value[++valueCharIndex];
+        }
+
+        // If Valid
+        if (isValidChar({ char, i, disableErrors })) {
+          item.char = char;
+        }
+
+        ++valueCharIndex;
+
+        return item;
+      });
+
+      return newValue;
+    });
+  };
+  // INNER VALUE MANAGEMENT FUNCTIONS | END //
+
+  // CHECKERS | START //
+  const isValidChar = ({ char: key, i, disableErrors = false }) => {
+    const maskChar = getMaskCharByIndex(i);
+
+    switch (maskChar) {
+      case DIGIT_MASK_CHAR:
+        if (!isDigit(key)) {
+          if (!disableErrors) {
+            setErrorMessage(errors.onlyDigit);
+          }
+          return false;
+        }
+        break;
+
+      case UPPERCASE_LETTER_MASK_CHAR:
+        if (adaptTextCase) key = key.toUpperCase();
+
+        if (!isLetter(key) && !isCaseSensitive) {
+          if (!disableErrors) setErrorMessage(errors.onlyLetter);
+          return false;
+        }
+
+        if (isCaseSensitive && !isUpperCaseLetter(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
+          return false;
+        }
+        break;
+      case LOWERCASE_LETTER_MASK_CHAR:
+        if (adaptTextCase) key = key.toLowerCase();
+
+        if (!isLetter(key) && !isCaseSensitive) {
+          if (!disableErrors) setErrorMessage(errors.onlyLetter);
+          return false;
+        }
+
+        if (isCaseSensitive && !isLowerCaseLetter(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
+          return false;
+        }
+        break;
+
+      default:
+        return false;
+    }
+
+    return true;
+  };
+  const isSpecialSymbolMaskChar = ({ char }) => {
+    return !isDigitMaskChar(char) && !isLetterMaskChar(char);
+  };
+  const isSpecialSymbolChar = ({ char }) => {
+    return !isDigit(char) && !isLetter(char);
+  };
+  const isSpecialSymbol = (i) => getCharByIndex(i)?.isSpecialSymbol;
+  // CHECKERS | END //
+
+  // GETTERS | START //
+  const getCharObj = (char, data = {}) => {
+    const isSpecialSymbol = isSpecialSymbolChar({ char });
+    const isSpecialSymbolMask = isSpecialSymbolMaskChar({ char });
+
+    if (char === " ") char = SPACE_CHAR;
+
+    return {
+      char: isSpecialSymbolMask ? char : "",
+      maskChar: char,
+      isSpecialSymbol: isSpecialSymbolMask,
+      isCharSymbol: !isSpecialSymbol && char !== "" && isSpecialSymbolMask,
+      ref: createRef(),
+      ...data,
+    };
+  };
+  const getCharByIndex = (i) => {
+    return innerValue[i] ? { ...innerValue[i] } : undefined;
+  };
+  const getMaskCharByIndex = (i) => {
+    return innerValue[i]?.maskChar || undefined;
+  };
+  const getPlaceholderCharByIndex = (i) => {
+    const { maskChar } = getCharByIndex(i);
+
+    if (usePatternPlaceholder) {
+      return maskPatternPlaceholder[i] || maskPlaceholder;
+    }
+    if (isDigitMaskChar(maskChar) && maskDigitPlaceholder)
+      return maskDigitPlaceholder;
+    if (isLetterMaskChar(maskChar) && maskLetterPlaceholder)
+      return maskLetterPlaceholder;
+    return maskPlaceholder;
+  };
+  const getClearInnerValueAsString = () => {
+    const symbolsInfo = innerValue?.map(
+      ({ isSpecialSymbol, isCharSymbol }) => ({
+        isSpecialSymbol,
+        isCharSymbol,
+      }),
+    );
+    const clearValue = getInputValue({ noLastTyppedCharIndexCheck: true })
+      ?.split("")
+      ?.reduce((resultStr, symbol, i) => {
+        if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol)
+          resultStr += symbol;
+        return resultStr;
+      }, "");
+
+    return clearValue;
+  };
+  const getInputValue = ({ noLastTyppedCharIndexCheck } = {}) => {
+    let isValid = true;
+
+    const lastTyppedCharIndex = innerValue.reduce(
+      (result, { char, isSpecialSymbol }, i) =>
+        char !== "" && !isSpecialSymbol ? i : result,
+      0,
+    );
+
+    const value = innerValue.reduce((result, { char }, i) => {
+      if (
+        char !== "" &&
+        isValid &&
+        (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)
+      ) {
+        result += char;
+      } else {
+        isValid = false;
+      }
+
+      return result;
+    }, "");
+
+    return value;
+  };
+  const inputValue = useMemo(getInputValue, [innerValue]);
+  // GETTERS | END //
+
+  /// --- Event Handlers ---///
+
+  // GENERAL EVENT HANDLERS | START //
+  const onChange = (e) => {
+    clearErrorMessage();
+
+    const {
+      target: { value, selectionStart: caretPos },
+      nativeEvent: { data: char },
+    } = e;
+
+    if (caretPos > maxEditableIndex) {
+      disableDefaultBehavior();
+      setCaret(maxEditableIndex);
+      setBlinkError(true);
+      return;
+    }
+
+    setValue(value);
+
+    const caretOffset = value.length - caretPos;
+
+    // Correct Caret Position
+    if (!value.lastIndexEqualsTo(caretPos - 1)) {
+      if (value.longerThan(inputValue)) {
+        if (!isValidChar({ char, i: caretPos - 1 })) {
+          disableDefaultBehavior(e);
+          setCaret(caretPos - 1);
+        } else {
+          const newCaretPos = value.length - caretOffset;
+          setCaret(
+            isSpecialSymbol(newCaretPos) ? newCaretPos + 1 : newCaretPos,
+          );
+        }
+      } else if (inputValue.longerThan(value)) {
+        switch (getKeyDown()) {
+          case KEY_CODES.Backspace:
+            if (isSpecialSymbol(caretPos)) {
+              disableDefaultBehavior(e);
+            }
+            setCaret(caretPos);
+            break;
+          case KEY_CODES.Delete:
+            if (isSpecialSymbol(caretPos)) {
+              disableDefaultBehavior(e);
+              setCaret(caretPos + 1);
+            } else {
+              setCaret(caretPos);
+            }
+            break;
+          default:
+            if (selectedLength > 0) {
+              setCaret(caretPos);
+            }
+        }
+      }
+    }
+
+    /* Checking if the character is a special symbol and if it is not, it is checking if the character
+    is valid or not. If it is not valid, it will blink the error. */
+    if (blinkErrors) {
+      setTimeout(() => {
+        if (
+          ((value.longerThan(inputValue) && !isSpecialSymbol(caretPos - 1)) ||
+            (inputValue.longerThan(value) && !isSpecialSymbol(caretPos))) &&
+          ((char && !isValidChar({ char, i: caretPos - 1 })) ||
+            (inputValue === getInputValue() &&
+              getInputValue()[caretPos - 1] !== char))
+        ) {
+          disableDefaultBehavior(e);
+          setBlinkError(true);
+        }
+      }, 0);
+    }
+  };
+  const onKeyDown = (e) => {
+    onKeyDownProp?.(e);
+
+    const { keyCode } = e;
+    setKeyDown(keyCode);
+  };
+
+  const onKeyUp = (e) => {
+    setKeyDown(null);
+    // On Filled Callback
+    if (
+      getInputValue({ noLastTyppedCharIndexCheck: true }).length ===
+        maskPattern.length &&
+      e.target.selectionStart >= maxEditableIndex
+    )
+      onFilledProp();
+  };
+  const onClearClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    resetInnerValue();
+
+    inputRef?.current?.focus();
+    setCaret(0);
+    clearErrorMessage();
+  };
+  const onFocus = (e) => {
+    setFocused(true);
+    onFocusProp();
+  };
+  const onBlur = () => {
+    setFocused(false);
+    onBlurProp();
+  };
+  const onClick = (e) => {
+    const cursor = e.target.selectionStart;
+    if (cursor >= maxEditableIndex) setCaret(maxEditableIndex);
+  };
+
+  const onSelect = (e) => {
+    const { selectionStart, selectionEnd } = e.target ?? {};
+    setSelectedLength(selectionEnd - selectionStart ?? 0);
+    if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
+  };
+
+  // GENERAL EVENT HANDLERS | END //
+
+  /// --- OBSERVERS ---///
+  // Render Mask
+  useEffect(() => {
+    setIsInitValue(false);
+    setInnerValue([]);
+    setMaskRendered(false);
+
+    if (!maskPattern) maskPattern = "";
+
+    maskPattern.split("").map((char, id) => {
+      addInnerValueChar({
+        char,
+        data: { id, isReadOnly: id === maskPattern.length },
+      });
+      if (value?.[id]) updateInnerValueChar({ char: value[id] }, id);
+    });
+    setMaskRendered(true);
+  }, [maskPattern]);
+
+  useEffect(() => {
+    if (
+      (isMaskRendered && !isInitValue) ||
+      (isInitValue &&
+        ![getInputValue(), getClearInnerValueAsString()].includes(value) &&
+        value !== "")
+    ) {
+      setValue(value);
+      setIsInitValue(true);
+    }
+  }, [isMaskRendered, value, isInitValue]);
+
+  // OnChange Observer
+  useEffect(() => {
+    if (isMaskRendered && isInitValue) {
+      setError(false);
+      const values = [
+        getClearInnerValueAsString(),
+        getInputValue({ noLastTyppedCharIndexCheck: true }),
+      ];
+      if (returnMaskedValue) values.reverse();
+
+      onChangeProp(...values);
+      //todo Этот функционал ломает логику - инпут начиначиет возвращать промежуточные онченджи с пустым вэлью, при правильной отрисовке форма видит пустое вэлью.
+      /*if (
+        prevValueRef?.current?.[0] !== values[0] &&
+        prevValueRef?.current?.[1] !== values[1] &&
+        value !== values[0] &&
+        value !== values[1]
+      ) {
+        prevValueRef.current = values;
+        onChangeProp(...values);
+      }*/
+    }
+  }, [innerValue, isMaskRendered, isInitValue, value]);
+
+  // Blink Error
+  useEffect(() => {
+    if (blinkError) {
+      setTimeout(() => {
+        setBlinkError(false);
+      }, blinkDuration);
+    }
+  }, [blinkError]);
+
+  useEffect(() => {
+    setError(customError !== "");
+    setErrorMessage(customError === "" ? errors.default : customError);
+  }, [customError, isError]);
+
+  /// --- RENDER ---///
+
+  const renderChar = (obj, i, className = "") => {
+    const { char, ref, maskChar, isSpecialSymbol } = obj;
+
+    return (
+      <span
+        tabIndex={-1}
+        key={i}
+        attr-char-id={i}
+        className={cn("input-mask_value_item", className, {
+          "input-mask_value_item--digit": isDigitMaskChar(obj.maskChar),
+          "input-mask_value_item--letter": isLetterMaskChar(obj.maskChar),
+          "input-mask_value_item--spec": obj.isSpecialSymbol,
+          "input-mask_value_item--hidden": i < inputValue.length,
+        })}
+        ref={ref}
+      >
+        {!isFocused &&
+        hideMaskOnBlur &&
+        getClearInnerValueAsString().length === 0
+          ? SPACE_CHAR
+          : isSpecialSymbol
+            ? maskChar
+            : char === ""
+              ? getPlaceholderCharByIndex(i)
+              : char}
+      </span>
+    );
+  };
+  const renderMaskChar = (obj, i) =>
+    renderChar(obj, i, "input-mask_value_item_mask-char");
+  const renderValueChar = (obj, i) =>
+    renderChar(obj, i, "input-mask_value_item_value-char");
+  const renderSpecialChar = (obj, i) =>
+    renderChar(obj, i, "input-mask_value_item_spec-char");
+  const renderInputValue = () => {
+    return innerValue.map((obj, i) => {
+      const { char, isSpecialSymbol } = obj;
+
+      if (isSpecialSymbol) {
+        return renderSpecialChar(obj, i);
+      }
+
+      const isMaskItem = (() => char === "")();
+      return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
+    });
+  };
+  const renderMask = () => {
+    return <div className="input-mask_value">{renderInputValue()}</div>;
+  };
+  const renderInput = () => {
+    return (
+      <input
+        name={name || fieldKey || id || testId || ""}
+        className={`input-mask_input ${className}`}
+        ref={inputRef}
+        value={inputValue}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        onBlur={onBlur}
+        onClick={onClick}
+        autoComplete={autocomplete}
+        onFocus={(...params) => {
+          if (isUseAutoSelect) inputRef.current.select();
+          if (onFocus) onFocus(...params);
+        }}
+        onDragStart={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        onDragEnd={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        onSelect={onSelect}
+        {...attributesOfNativeInput}
+      />
+    );
+  };
+  const render = () => {
+    return (
+      <div
+        data-testid={testId}
+        className={cn(
+          "input-mask2_wrapper",
+          className,
+          { "input-mask_error": isError },
+          { "input-mask_focus": isFocused },
+          { "input-mask_blink-error": blinkError },
+          { disabled: disabled || isLoading },
+        )}
+      >
+        <div
+          className={`
+            input-mask
+            ${isError ? "input-mask_error" : ""}
+            ${isFocused ? "input-mask_focus" : ""}
+            ${blinkError ? "input-mask_blink-error" : ""}
+          `}
+        >
+          {showHint && isHintLeft && (
+            <div className="input-mask_hint input-mask_hint--left">
+              <Hint
+                hint={hintText}
+                className={hintClassName}
+                side={hintPosition}
+              />
+            </div>
+          )}
+          {isIconLeft && showIcon && (
+            <div className="input-mask_icon input-mask_icon--left">
+              {DynamicIconComponent ?? icon}
+            </div>
+          )}
+          {renderMask()}
+          {renderInput()}
+          {isClearable && (
+            <div className="input-mask_clear">
+              <X onClick={onClearClick} />
+            </div>
+          )}
+          {isIconRight && showIcon && (
+            <div className="input-mask_icon input-mask_icon--right">
+              {DynamicIconComponent ?? icon}
+            </div>
+          )}
+          {showHint && isHintRight && (
+            <div className="input-mask_hint input-mask_hint--right">
+              <Hint
+                hint={hintText}
+                className={hintClassName}
+                side={hintPosition}
+              />
+            </div>
+          )}
+        </div>
+        {showErrors && errorMessage && (
+          <div className="input-mask_error-text">{errorMessage}</div>
+        )}
+        {isLoading && <Spinner size="small" />}
+      </div>
+    );
+  };
+
+  return render();
+}