intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/InputMask3/InputMask3.js

@@ -1 +1,766 @@
-function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function e(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),r.forEach(function(e){var r;r=t[e],e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r})}return n}function t(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var t,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=(t=i.next()).done)&&(a.push(t.value),!e||a.length!==e);o=!0);}catch(n){l=!0,r=n}finally{try{o||null==i.return||i.return()}finally{if(l)throw r}}return a}}(n,e)||i(n,e)||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(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(e)||i(e)||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(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.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(e,t)}}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 d}from"react";import f from"classnames";import{Eye as m,EyeOff as p,X as v}from"react-feather";import{KEYBOARD_KEY_CODES as h}from"../../../Constants/index.constants";import{disableDefaultBehavior as y}from"../../../Functions/utils";import b from"../../Layout/Spinner/Spinner";import g from"../../UI/DynamicIcon/DynamicIcon";import k from"../../UI/Hint/Hint";import{DEFAULT_ERRORS as S,DIGIT_MASK_CHAR as _,LOWERCASE_LETTER_MASK_CHAR as C,SPACE_CHAR as O,UPPERCASE_LETTER_MASK_CHAR as w}from"./config";import{isDigit as I,isDigitMaskChar as D,isLetter as P,isLetterMaskChar as j,isLowerCaseLetter as x,isUpperCaseLetter as E}from"./functions";import"./InputMask3.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,H=n.maskPlaceholder,L=n.maskDigitPlaceholder,A=n.maskLetterPlaceholder,K=n.usePatternPlaceholder,U=n.maxEditableIndex,B=void 0===U?-1:U,F=(n.isFocusedDefault,n.isClearable),M=n.isCaseSensitive,R=n.adaptTextCase,V=n.isUseAutoSelect,W=void 0===V||V,Y=n.isLoading,q=void 0!==Y&&Y,z=n.withHiddenMode,$=n.hiddenChar,G=void 0===$?"*":$,J=n.maxHiddenIndex,Q=void 0===J?-1:J,X=n.isValueHiddenDefault,Z=n.isHide,nn=n.icon,ne=n.showIcon,nt=n.isIconLeft,nr=n.isIconRight,ni=n.iconDynamicKey,na=n.iconDynamicProps,no=n.value,nl=n.blinkErrors,nu=void 0===nl||nl,nc=n.blinkDuration,ns=void 0===nc?100:nc,nd=n.showErrors,nf=n.className,nm=void 0===nf?"":nf,np=n.errors,nv=n.error,nh=void 0===nv?"":nv,ny=n.onChange,nb=void 0===ny?function(){}:ny,ng=n.onFocus,nk=void 0===ng?function(){}:ng,nS=n.onBlur,n_=void 0===nS?function(){}:nS,nC=n.onKeyDown,nO=void 0===nC?function(){}:nC,nw=n.onFilled,nI=void 0===nw?function(){}:nw,nD=n.showHint,nP=void 0!==nD&&nD,nj=n.hintText,nx=void 0===nj?"":nj,nE=n.hintClassName,nN=void 0===nE?"":nE,nT=n.isHintRight,nH=n.isHintLeft,nL=n.hintPosition,nA=void 0===nL?"right":nL,nK=n.hideMaskOnBlur,nU=void 0===nK||nK,nB=n.returnMaskedValue,nF=void 0!==nB&&nB,nM=n.name,nR=n.fieldKey,nV=n.id,nW=n.disabled,nY=n.testId,nq=void 0===nY?"input-mask":nY,nz=n.attributesOfNativeInput,n$=e({},S,void 0===np?S:np);-1===B&&(B=N.length);var nG=t(d(!1),2),nJ=nG[0],nQ=nG[1],nX=t(d(!1),2),nZ=nX[0],n0=nX[1],n1=t(d(!1),2),n2=n1[0],n3=n1[1],n8=t(d(0),2),n6=n8[0],n4=n8[1],n5=t(d("boolean"==typeof Z?Z:void 0!==X&&X),2),n7=n5[0],n9=n5[1],en=t(d(!1),2),ee=en[0],et=en[1],er=s(null),ei=s(null),ea=function(n){return ei.current=n},eo=ni&&!nn?a(g,e({iconKey:ni},void 0===na?{}:na)):null,el=function(n){n<0&&(n=0);var e=er.current;e&&setTimeout(function(){return e.setSelectionRange(n,n)},0)},eu=t(d(!1),2),ec=eu[0],es=eu[1],ed=t(d(!1),2),ef=ed[0],em=ed[1],ep=t(d(n$.default),2),ev=ep[0],eh=ep[1],ey=function(){return eh(n$.default)},eb=t(d([]),2),eg=eb[0],ek=eb[1],eS=s([]),e_=function(n){var e=n.char,t=n.data,i=void 0===t?{}:t;ek(function(n){var t=r(n),a=eI(e,i);return t.push(a),t})},eC=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=n.char,t=void 0===e?null:e,i=arguments.length>1?arguments[1]:void 0;ek(function(n){if(!n[i])return n;var e=r(n);return e[i].isSpecialSymbol||null===t||(e[i].char=t),e})},eO=function(){ek(function(n){return n.map(function(n){return n.isSpecialSymbol||null===n.char||(n.char=""),n})})},ew=function(n){var e=!(arguments.length>1)||void 0===arguments[1]||arguments[1];n=null==n?"":n.toString(),eO();var t=N.length-B;n.length>B?n=n.slice(0,n.length-t):B!==(null==N?void 0:N.length)-1&&(n=n.slice(0,B));var r=0;ek(function(t){return t.map(function(t,i){if(t.isSpecialSymbol)return t;for(var a=n[r],o=(null==N?void 0:N.length)||0;o&&(eL({char:n[r]})||!eT({char:a,i:i,disableErrors:!0}));)o--,a=n[++r];return eT({char:a,i:i,disableErrors:e})&&(t.char=a),++r,t})})},eI=function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=eL({char:n}),i=eH({char:n});return" "===n&&(n=O),e({char:i?n:"",maskChar:n,isSpecialSymbol:i,isCharSymbol:!r&&""!==n&&i,ref:l()},t)},eD=function(n){return eg[n]?e({},eg[n]):void 0},eP=function(n){var e;return(null==(e=eg[n])?void 0:e.maskChar)||void 0},ej=function(n){var e=eD(n).maskChar;return K?T[n]||H:D(e)&&L?L:j(e)&&A?A:H},ex=function(){var n,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.noLastTyppedCharIndexCheck,r=e.noHide,i=void 0!==r&&r,a=!0,o=eg.reduce(function(n,e,t){var r=e.char,i=e.isSpecialSymbol;return""===r||i?n:t},0),l=eg.reduce(function(n,e,r){var l=e.char,u=e.isSpecialSymbol;return""!==l&&a&&(t||r<=o)?n7&&!u&&!i&&(-1===Q||r<=Q)?n+=G:n+=l:a=!1,n},"");return(null==(n=eE(l))?void 0:n.length)===0?"":l},eE=function(n){var e,t,r=null==eg?void 0:eg.map(function(n){return{isSpecialSymbol:n.isSpecialSymbol,isCharSymbol:n.isCharSymbol}});return null==(t=null!=n?n:ex({noLastTyppedCharIndexCheck:!0,noHide:!0}))||null==(e=t.split(""))?void 0:e.reduce(function(n,e,t){return(!r[t].isSpecialSymbol||r[t].isCharSymbol)&&(n+=e),n},"")},eN=c(ex,[eg,n7]),eT=function(n){var e=n.char,t=n.i,r=n.disableErrors,i=void 0!==r&&r;switch(eP(t)){case _:if(!I(e))return i||eh(n$.onlyDigit),!1;break;case w:if(R&&(e=e.toUpperCase()),!P(e)&&!M)return i||eh(n$.onlyLetter),!1;if(M&&!E(e))return i||eh(n$.onlyUpperCase),!1;break;case C:if(R&&(e=e.toLowerCase()),!P(e)&&!M)return i||eh(n$.onlyLetter),!1;if(M&&!x(e))return i||eh(n$.onlyLowerCase),!1;break;default:return!1}return!0},eH=function(n){var e=n.char;return!D(e)&&!j(e)},eL=function(n){var e=n.char;return!I(e)&&!P(e)},eA=function(n){var e;return null==(e=eD(n))?void 0:e.isSpecialSymbol},eK=n7?function(n){var e=ex({noHide:!0}),t=n.target.value;if(t.replace(/-/g,"").length<e.replace(/-/g,"").length){var r=e.length-1;ew(e.slice(0,r));return}var i=t.replace(/\D/g,""),a="",o=-1!==Q?Q+1:null==N?void 0:N.length;(a=e.length>o?e.slice(0,o)+i:e+i).length>(null==N?void 0:N.length)||ew(a)}:function(n){ey();var e=n.target,t=e.value,r=e.selectionStart,i=n.nativeEvent.data;if(r>B){y(),el(B),em(!0);return}ew(t);var a=t.length-r;if(!t.lastIndexEqualsTo(r-1)){if(t.longerThan(eN))if(eT({char:i,i:r-1})){var o=t.length-a;el(eA(o)?o+1:o)}else y(n),el(r-1);else if(eN.longerThan(t))switch(ei.current){case h.Backspace:eA(r)&&y(n),el(r);break;case h.Delete:eA(r)?(y(n),el(r+1)):el(r);break;default:n6>0&&el(r)}}nu&&setTimeout(function(){(t.longerThan(eN)&&!eA(r-1)||eN.longerThan(t)&&!eA(r))&&(i&&!eT({char:i,i:r-1})||eN===ex()&&ex()[r-1]!==i)&&(y(n),em(!0))},0)},eU=function(n){var e;n9("boolean"==typeof n?n:!n7),ee&&(null==er||null==(e=er.current)||e.focus())},eB=function(){n0(!0),nk()};u(function(){n3(!1),ek([]),nQ(!1),N||(N=""),N.split("").map(function(n,e){e_({char:n,data:{id:e,isReadOnly:e===N.length}}),(null==no?void 0:no[e])&&eC({char:no[e]},e)}),nQ(!0)},[N]),u(function(){(nJ&&!n2||n2&&![ex(),eE()].includes(no))&&(ew(no),n3(!0))},[nJ,no,n2]),u(function(){if(nJ&&n2){es(!1);var n,e,t=[eE(),ex({noLastTyppedCharIndexCheck:!0,noHide:!0})];nF&&t.reverse(),(null==eS||null==(n=eS.current)?void 0:n[0])!==t[0]&&(null==eS||null==(e=eS.current)?void 0:e[1])!==t[1]&&no!==eE()&&(eS.current=t,nb.apply(void 0,r(t)))}},[eg,nJ,n2]),u(function(){ef&&setTimeout(function(){em(!1)},ns)},[ef]),u(function(){es(""!==nh),eh(""===nh?n$.default:nh)},[nh,ec]),u(function(){"boolean"==typeof Z&&(eU(Z),ee||et(!0))},[Z]);var eF=function(n,e){var t=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":e,className:f("input-mask_value_item",t,{"input-mask_value_item--digit":D(n.maskChar),"input-mask_value_item--letter":j(n.maskChar),"input-mask_value_item--spec":n.isSpecialSymbol,"input-mask_value_item--hidden":e<eN.length}),ref:i,children:!nZ&&nU&&0===eE().length?O:l?o:""===r?ej(e):r},e)},eM=function(n,t){var r,i;return n7&&(-1===Q||t<=Q)?eF((r=e({},n),i=i={char:G},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):(function(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t.push.apply(t,r)}return t})(Object(i)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(i,n))}),r),t,"input-mask_value_item_value-hidden-char"):eF(n,t,"input-mask_value_item_value-char")},eR=function(){return a("div",{className:"input-mask_hint input-mask_hint--".concat(nA),children:a(k,{hint:nx,className:nN,side:nA})})},eV=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"left";return a("div",{className:"input-mask_icon input-mask_icon--".concat(n),children:null!=eo?eo:nn})};return o("div",{"data-testid":nq,className:f("input-mask3_wrapper",nm,{"input-mask_error":ec},{"input-mask_focus":nZ},{"input-mask_blink-error":ef},{disabled:nW||q}),tabIndex:-1,children:[o("div",{className:"\n            input-mask\n            ".concat(ec?"input-mask_error":"","\n            ").concat(nZ?"input-mask_focus":"","\n            ").concat(ef?"input-mask_blink-error":"","\n          "),children:[nP&&void 0!==nH&&nH&&eR(),nt&&ne&&eV("left"),a("div",{className:"input-mask_value",children:eg.map(function(n,e){var t=n.char;return n.isSpecialSymbol?eF(n,e,"input-mask_value_item_spec-char"):""===t?eF(n,e,"input-mask_value_item_mask-char"):eM(n,e)})}),a("input",e({tabIndex:nW||q?-1:0,readOnly:nW||q,name:nM||nR||nV||nq||"",className:"input-mask_input ".concat(nm),ref:er,value:eN,onChange:eK,onKeyDown:function(n){null==nO||nO(n),ea(n.keyCode)},onKeyUp:function(n){ea(null),ex({noLastTyppedCharIndexCheck:!0}).length===N.length&&n.target.selectionStart>=B&&nI()},onBlur:function(){n0(!1),n_()},onClick:function(n){n.target.selectionStart>=B&&el(B)},autoComplete:void 0===i?"off":i,onFocus:function(){for(var n=arguments.length,e=Array(n),t=0;t<n;t++)e[t]=arguments[t];W&&er.current.select(),eB&&eB.apply(void 0,r(e))},onDragStart:function(n){n.stopPropagation(),n.preventDefault()},onDragEnd:function(n){n.stopPropagation(),n.preventDefault()},onSelect:function(n){var e,t=null!=(e=n.target)?e:{},r=t.selectionStart;n4(t.selectionEnd-r),r>=B&&el(B)}},void 0===nz?{}:nz)),void 0!==z&&z&&"boolean"!=typeof Z&&o("span",{className:"formatted-raw-ssn-eye-holder",onClick:eU,children:[" ",n7?a(m,{strokeWidth:1,className:"password-icon"}):a(p,{strokeWidth:1,className:"password-icon"})]}),F&&a("div",{className:"input-mask_clear",children:a(v,{onClick:function(n){var e;n.stopPropagation(),n.preventDefault(),eO(),null==er||null==(e=er.current)||e.focus(),el(0),ey()}})}),nr&&ne&&eV("right"),nP&&(void 0===nT||nT)&&eR()]}),void 0!==nd&&nd&&ev&&a("div",{className:"input-mask_error-text",children:ev}),q&&a(b,{size:"small"})]})}
+import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
+
+import cn from "classnames";
+import { Eye, EyeOff, 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 "./InputMask3.scss";
+
+export default function InputMask3({
+  autocomplete = "off",
+  maskPattern,
+  maskPatternPlaceholder,
+  maskPlaceholder,
+  maskDigitPlaceholder,
+  maskLetterPlaceholder,
+  usePatternPlaceholder,
+
+  maxEditableIndex = -1,
+
+  isFocusedDefault = false,
+  isClearable,
+  isCaseSensitive,
+  adaptTextCase,
+  isUseAutoSelect = true,
+  isLoading = false,
+
+  // Включает/отключает режим скрытия в принциепе.
+  withHiddenMode = false,
+  // Символ которым скрывааеются символы
+  hiddenChar = "*",
+  // Индекс последнего скрываемогосимвола
+  // Индекс нужно передавать с УЧЕТОМ не значащих символов маски,
+  // при этом не значащие символы скрываться НЕ будут
+  maxHiddenIndex = -1,
+  // Инициализационнное значение положения "скрыть" (если НЕ управляется сверху)
+  isValueHiddenDefault = false,
+
+  // ? Если передана как булева, то режим скрытия управляется ей, здешний триггер (глазик) НЕ рендерится
+  // ? Если НЕ передана ка булева, то режим скрытия обеспечиватся своим внутренним стором, здешний триггер (глазик) рендерится
+  isHide, // булева пропа для управления сверху
+
+  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 [isValueHidden, setIsValueHidden] = useState(
+    typeof isHide === "boolean" ? isHide : isValueHiddenDefault,
+  );
+  const [isHiddenLogicInit, setIsHiddenLogicInit] = useState(false);
+
+  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 //
+
+  // 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 getInputValue = ({
+    noLastTyppedCharIndexCheck,
+    noHide = false,
+  } = {}) => {
+    let isValid = true;
+
+    const lastTyppedCharIndex = innerValue.reduce(
+      (result, { char, isSpecialSymbol }, i) =>
+        char !== "" && !isSpecialSymbol ? i : result,
+      0,
+    );
+
+    const value = innerValue.reduce((result, { char, isSpecialSymbol }, i) => {
+      if (
+        char !== "" &&
+        isValid &&
+        (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)
+      ) {
+        if (
+          isValueHidden &&
+          !isSpecialSymbol &&
+          !noHide &&
+          (maxHiddenIndex === -1 || i <= maxHiddenIndex)
+        ) {
+          result += hiddenChar;
+        } else {
+          result += char;
+        }
+      } else {
+        isValid = false;
+      }
+
+      return result;
+    }, "");
+
+    if (getClearInnerValueAsString(value)?.length === 0) return "";
+
+    return value;
+  };
+  const getClearInnerValueAsString = (valueProp) => {
+    const symbolsInfo = innerValue?.map(
+      ({ isSpecialSymbol, isCharSymbol }) => ({
+        isSpecialSymbol,
+        isCharSymbol,
+      }),
+    );
+    const clearValue = (
+      valueProp ??
+      getInputValue({ noLastTyppedCharIndexCheck: true, noHide: true })
+    )
+      ?.split("")
+      ?.reduce((resultStr, symbol, i) => {
+        if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol)
+          resultStr += symbol;
+        return resultStr;
+      }, "");
+
+    return clearValue;
+  };
+  const inputValue = useMemo(getInputValue, [innerValue, isValueHidden]);
+  // GETTERS | 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 //
+
+  /// --- Event Handlers ---///
+
+  // GENERAL EVENT HANDLERS | START //
+  const onVisibleChange = (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 onHiddenChange = (e) => {
+    const SSN = getInputValue({ noHide: true });
+
+    const {
+      target: { value },
+    } = e;
+
+    if (value.replace(/-/g, "").length < SSN.replace(/-/g, "").length) {
+      const last = SSN.length - 1;
+      setValue(SSN.slice(0, last));
+      return;
+    }
+
+    const numValue = value.replace(/\D/g, "");
+    let newSSN = "";
+
+    //! maxHiddenIndex - это индекс, НЕ length. Поэтому нужно добавить 1
+    const staticLength =
+      maxHiddenIndex !== -1 ? maxHiddenIndex + 1 : maskPattern?.length;
+
+    if (SSN.length > staticLength) {
+      newSSN = SSN.slice(0, staticLength) + numValue;
+    } else {
+      newSSN = SSN + numValue;
+    }
+
+    if (newSSN.length > maskPattern?.length) {
+      return;
+    }
+    setValue(newSSN);
+  };
+  const onChange = isValueHidden ? onHiddenChange : onVisibleChange;
+  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 onHiddenToggle = (value) => {
+    // ? Добавлена возможность принудительной установки велью (опционально)
+    const newValue = typeof value === "boolean" ? value : !isValueHidden;
+    setIsValueHidden(newValue);
+    if (isHiddenLogicInit) inputRef?.current?.focus();
+  };
+  const onFocus = () => {
+    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))
+    ) {
+      setValue(value);
+      setIsInitValue(true);
+    }
+  }, [isMaskRendered, value, isInitValue]);
+
+  // OnChange Observer
+  useEffect(() => {
+    if (isMaskRendered && isInitValue) {
+      setError(false);
+      const values = [
+        getClearInnerValueAsString(),
+        getInputValue({ noLastTyppedCharIndexCheck: true, noHide: true }),
+      ];
+      if (returnMaskedValue) values.reverse();
+
+      if (
+        prevValueRef?.current?.[0] !== values[0] &&
+        prevValueRef?.current?.[1] !== values[1] && 
+        value !== getClearInnerValueAsString()
+      ) {
+        prevValueRef.current = values;
+        onChangeProp(...values);
+      }
+    }
+  }, [innerValue, isMaskRendered, isInitValue]);
+
+  // Blink Error
+  useEffect(() => {
+    if (blinkError) {
+      setTimeout(() => {
+        setBlinkError(false);
+      }, blinkDuration);
+    }
+  }, [blinkError]);
+
+  useEffect(() => {
+    setError(customError !== "");
+    setErrorMessage(customError === "" ? errors.default : customError);
+  }, [customError, isError]);
+
+  useEffect(() => {
+    if (typeof isHide === "boolean") {
+      onHiddenToggle(isHide);
+      if (!isHiddenLogicInit) setIsHiddenLogicInit(true);
+    }
+  }, [isHide]);
+
+  /// --- 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) =>
+    isValueHidden && (maxHiddenIndex === -1 || i <= maxHiddenIndex)
+      ? renderChar(
+          { ...obj, char: hiddenChar },
+          i,
+          "input-mask_value_item_value-hidden-char",
+        )
+      : 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
+        tabIndex={disabled || isLoading ? -1 : 0}
+        readOnly={disabled || isLoading}
+        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 renderHideToggler = () => {
+    return (
+      <span className="formatted-raw-ssn-eye-holder" onClick={onHiddenToggle}>
+        {" "}
+        {isValueHidden ? (
+          <Eye strokeWidth={1} className="password-icon" />
+        ) : (
+          <EyeOff strokeWidth={1} className="password-icon" />
+        )}
+      </span>
+    );
+  };
+  const renderClearButton = () => {
+    return (
+      <div className="input-mask_clear">
+        <X onClick={onClearClick} />
+      </div>
+    );
+  };
+  const renderHint = () => {
+    return (
+      <div className={`input-mask_hint input-mask_hint--${hintPosition}`}>
+        <Hint hint={hintText} className={hintClassName} side={hintPosition} />
+      </div>
+    );
+  };
+  const renderIcon = (position = "left") => {
+    return (
+      <div className={`input-mask_icon input-mask_icon--${position}`}>
+        {DynamicIconComponent ?? icon}
+      </div>
+    );
+  };
+  const render = () => {
+    return (
+      <div
+        data-testid={testId}
+        className={cn(
+          "input-mask3_wrapper",
+          className,
+          { "input-mask_error": isError },
+          { "input-mask_focus": isFocused },
+          { "input-mask_blink-error": blinkError },
+          { disabled: disabled || isLoading },
+        )}
+        tabIndex={-1}
+      >
+        <div
+          className={`
+            input-mask
+            ${isError ? "input-mask_error" : ""}
+            ${isFocused ? "input-mask_focus" : ""}
+            ${blinkError ? "input-mask_blink-error" : ""}
+          `}
+        >
+          {showHint && isHintLeft && renderHint()}
+          {isIconLeft && showIcon && renderIcon("left")}
+          {renderMask()}
+          {renderInput()}
+          {/* Если isHide булева, значит будем управлять сверху, значит там свой триггер*/}
+          {withHiddenMode && typeof isHide !== "boolean" && renderHideToggler()}
+          {isClearable && renderClearButton()}
+          {isIconRight && showIcon && renderIcon("right")}
+          {showHint && isHintRight && renderHint()}
+        </div>
+        {showErrors && errorMessage && (
+          <div className="input-mask_error-text">{errorMessage}</div>
+        )}
+        {isLoading && <Spinner size="small" />}
+      </div>
+    );
+  };
+
+  return render();
+}