intelicoreact 1.5.33 → 1.5.35

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

@@ -1,709 +1,673 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = InputMask3;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactFeather = require("react-feather");
-var _index = require("../../../Constants/index.constants");
-var _utils = require("../../../Functions/utils");
-var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
-var _DynamicIcon = _interopRequireDefault(require("../../UI/DynamicIcon/DynamicIcon"));
-var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
-var _config = require("./config");
-var _functions = require("./functions");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return InputMask3;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _indexconstants = require("../../../Constants/index.constants");
+const _utils = require("../../../Functions/utils");
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("../../Layout/Spinner/Spinner"));
+const _DynamicIcon = /*#__PURE__*/ _interop_require_default(require("../../UI/DynamicIcon/DynamicIcon"));
+const _Hint = /*#__PURE__*/ _interop_require_default(require("../../UI/Hint/Hint"));
+const _config = require("./config");
+const _functions = require("./functions");
 require("./InputMask3.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function InputMask3() {
-  let {
-    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 = _config.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 = {}
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const errors = {
-    ..._config.DEFAULT_ERRORS,
-    ...customErrors
-  };
-  if (maxEditableIndex === -1) maxEditableIndex = maskPattern.length;
-  const [isMaskRendered, setMaskRendered] = (0, _react.useState)(false);
-  const [isFocused, setFocused] = (0, _react.useState)(false);
-  const [isInitValue, setIsInitValue] = (0, _react.useState)(false);
-  const [selectedLength, setSelectedLength] = (0, _react.useState)(0);
-  //? Если управляется сверху, то инициируемся текущим внешним значением
-  const [isValueHidden, setIsValueHidden] = (0, _react.useState)(typeof isHide === "boolean" ? isHide : isValueHiddenDefault);
-  const [isHiddenLogicInit, setIsHiddenLogicInit] = (0, _react.useState)(false);
-  const inputRef = (0, _react.useRef)(null);
-  const keyDownRef = (0, _react.useRef)(null);
-  const setKeyDown = keyCode => keyDownRef.current = keyCode;
-  const getKeyDown = () => keyDownRef.current;
-  const DynamicIconComponent = iconDynamicKey && !icon ? /*#__PURE__*/_react.default.createElement(_DynamicIcon.default, (0, _extends2.default)({
-    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] = (0, _react.useState)(false);
-  const [blinkError, setBlinkError] = (0, _react.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, _react.useState)(errors.default);
-  const clearErrorMessage = () => setErrorMessage(errors.default);
-  // ERRORS MANAGEMENT FUNCTIONS | END //
-
-  // INNER VALUE MANAGEMENT FUNCTIONS | START //
-  const [innerValue, setInnerValue] = (0, _react.useState)([]);
-  const prevValueRef = (0, _react.useRef)([]);
-  const addInnerValueChar = _ref => {
-    let {
-      char,
-      data = {}
-    } = _ref;
-    setInnerValue(state => {
-      const stateCopy = [...state];
-      const charObj = getCharObj(char, data);
-      stateCopy.push(charObj);
-      return stateCopy;
-    });
-  };
-  const updateInnerValueChar = function () {
-    let {
-      char = null
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let i = arguments.length > 1 ? arguments[1] : undefined;
-    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 = function (value) {
-    var _maskPattern;
-    let disableErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 = maskPattern) === null || _maskPattern === void 0 ? void 0 : _maskPattern.length) - 1) value = value.slice(0, maxEditableIndex);
-    let valueCharIndex = 0;
-    setInnerValue(innerValue => {
-      const newValue = innerValue.map((item, i) => {
-        var _maskPattern2;
-        const {
-          isSpecialSymbol
-        } = item;
-        if (isSpecialSymbol) return item;
-        let char = value[valueCharIndex];
-        let whileLimit = ((_maskPattern2 = maskPattern) === null || _maskPattern2 === void 0 ? void 0 : _maskPattern2.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;
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
         }
-        ++valueCharIndex;
-        return item;
-      });
-      return newValue;
-    });
-  };
-  // INNER VALUE MANAGEMENT FUNCTIONS | END //
-
-  // GETTERS | START //
-  const getCharObj = function (char) {
-    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    const isSpecialSymbol = isSpecialSymbolChar({
-      char
-    });
-    const isSpecialSymbolMask = isSpecialSymbolMaskChar({
-      char
-    });
-    if (char === " ") char = _config.SPACE_CHAR;
-    return {
-      char: isSpecialSymbolMask ? char : "",
-      maskChar: char,
-      isSpecialSymbol: isSpecialSymbolMask,
-      isCharSymbol: !isSpecialSymbol && char !== "" && isSpecialSymbolMask,
-      ref: /*#__PURE__*/(0, _react.createRef)(),
-      ...data
-    };
-  };
-  const getCharByIndex = i => {
-    return innerValue[i] ? {
-      ...innerValue[i]
-    } : undefined;
-  };
-  const getMaskCharByIndex = i => {
-    var _innerValue$i;
-    return ((_innerValue$i = innerValue[i]) === null || _innerValue$i === void 0 ? void 0 : _innerValue$i.maskChar) || undefined;
-  };
-  const getPlaceholderCharByIndex = i => {
-    const {
-      maskChar
-    } = getCharByIndex(i);
-    if (usePatternPlaceholder) {
-      return maskPatternPlaceholder[i] || maskPlaceholder;
     }
-    if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
-    if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
-    return maskPlaceholder;
-  };
-  const getInputValue = function () {
-    var _getClearInnerValueAs;
-    let {
-      noLastTyppedCharIndexCheck,
-      noHide = false
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let isValid = true;
-    const lastTyppedCharIndex = innerValue.reduce((result, _ref2, i) => {
-      let {
-        char,
-        isSpecialSymbol
-      } = _ref2;
-      return char !== "" && !isSpecialSymbol ? i : result;
-    }, 0);
-    const value = innerValue.reduce((result, _ref3, i) => {
-      let {
-        char,
-        isSpecialSymbol
-      } = _ref3;
-      if (char !== "" && isValid && (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)) {
-        if (isValueHidden && !isSpecialSymbol && !noHide && (maxHiddenIndex === -1 || i <= maxHiddenIndex)) {
-          result += hiddenChar;
-        } else {
-          result += char;
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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 = _config.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 = {
+        ..._config.DEFAULT_ERRORS,
+        ...customErrors
+    };
+    if (maxEditableIndex === -1) maxEditableIndex = maskPattern.length;
+    const [isMaskRendered, setMaskRendered] = (0, _react.useState)(false);
+    const [isFocused, setFocused] = (0, _react.useState)(false);
+    const [isInitValue, setIsInitValue] = (0, _react.useState)(false);
+    const [selectedLength, setSelectedLength] = (0, _react.useState)(0);
+    //? Если управляется сверху, то инициируемся текущим внешним значением
+    const [isValueHidden, setIsValueHidden] = (0, _react.useState)(typeof isHide === "boolean" ? isHide : isValueHiddenDefault);
+    const [isHiddenLogicInit, setIsHiddenLogicInit] = (0, _react.useState)(false);
+    const inputRef = (0, _react.useRef)(null);
+    const keyDownRef = (0, _react.useRef)(null);
+    const setKeyDown = (keyCode)=>keyDownRef.current = keyCode;
+    const getKeyDown = ()=>keyDownRef.current;
+    const DynamicIconComponent = iconDynamicKey && !icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_DynamicIcon.default, {
+        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] = (0, _react.useState)(false);
+    const [blinkError, setBlinkError] = (0, _react.useState)(false);
+    const [errorMessage, setErrorMessage] = (0, _react.useState)(errors.default);
+    const clearErrorMessage = ()=>setErrorMessage(errors.default);
+    // ERRORS MANAGEMENT FUNCTIONS | END //
+    // INNER VALUE MANAGEMENT FUNCTIONS | START //
+    const [innerValue, setInnerValue] = (0, _react.useState)([]);
+    const prevValueRef = (0, _react.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 === null || maskPattern === void 0 ? void 0 : 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 === null || maskPattern === void 0 ? void 0 : 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 = _config.SPACE_CHAR;
+        return {
+            char: isSpecialSymbolMask ? char : "",
+            maskChar: char,
+            isSpecialSymbol: isSpecialSymbolMask,
+            isCharSymbol: !isSpecialSymbol && char !== "" && isSpecialSymbolMask,
+            ref: /*#__PURE__*/ (0, _react.createRef)(),
+            ...data
+        };
+    };
+    const getCharByIndex = (i)=>{
+        return innerValue[i] ? {
+            ...innerValue[i]
+        } : undefined;
+    };
+    const getMaskCharByIndex = (i)=>{
+        var _innerValue_i;
+        return ((_innerValue_i = innerValue[i]) === null || _innerValue_i === void 0 ? void 0 : _innerValue_i.maskChar) || undefined;
+    };
+    const getPlaceholderCharByIndex = (i)=>{
+        const { maskChar } = getCharByIndex(i);
+        if (usePatternPlaceholder) {
+            return maskPatternPlaceholder[i] || maskPlaceholder;
         }
-      } else {
-        isValid = false;
-      }
-      return result;
-    }, "");
-    if (((_getClearInnerValueAs = getClearInnerValueAsString(value)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) === 0) return "";
-    return value;
-  };
-  const getClearInnerValueAsString = valueProp => {
-    var _ref5;
-    const symbolsInfo = innerValue === null || innerValue === void 0 ? void 0 : innerValue.map(_ref4 => {
-      let {
-        isSpecialSymbol,
-        isCharSymbol
-      } = _ref4;
-      return {
-        isSpecialSymbol,
-        isCharSymbol
-      };
-    });
-    const clearValue = (_ref5 = valueProp !== null && valueProp !== void 0 ? valueProp : getInputValue({
-      noLastTyppedCharIndexCheck: true,
-      noHide: true
-    })) === null || _ref5 === void 0 || (_ref5 = _ref5.split("")) === null || _ref5 === void 0 ? void 0 : _ref5.reduce((resultStr, symbol, i) => {
-      if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol) resultStr += symbol;
-      return resultStr;
-    }, "");
-    return clearValue;
-  };
-  const inputValue = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]);
-  // GETTERS | END //
-
-  // CHECKERS | START //
-  const isValidChar = _ref6 => {
-    let {
-      char: key,
-      i,
-      disableErrors = false
-    } = _ref6;
-    const maskChar = getMaskCharByIndex(i);
-    switch (maskChar) {
-      case _config.DIGIT_MASK_CHAR:
-        if (!(0, _functions.isDigit)(key)) {
-          if (!disableErrors) {
-            setErrorMessage(errors.onlyDigit);
-          }
-          return false;
+        if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
+        if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
+        return maskPlaceholder;
+    };
+    const getInputValue = ({ noLastTyppedCharIndexCheck, noHide = false } = {})=>{
+        var _getClearInnerValueAsString;
+        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 = getClearInnerValueAsString(value)) === null || _getClearInnerValueAsString === void 0 ? void 0 : _getClearInnerValueAsString.length) === 0) return "";
+        return value;
+    };
+    const getClearInnerValueAsString = (valueProp)=>{
+        var _split, _this;
+        const symbolsInfo = innerValue === null || innerValue === void 0 ? void 0 : innerValue.map(({ isSpecialSymbol, isCharSymbol })=>({
+                isSpecialSymbol,
+                isCharSymbol
+            }));
+        const clearValue = (_this = valueProp !== null && valueProp !== void 0 ? valueProp : getInputValue({
+            noLastTyppedCharIndexCheck: true,
+            noHide: true
+        })) === null || _this === void 0 ? void 0 : (_split = _this.split("")) === null || _split === void 0 ? void 0 : _split.reduce((resultStr, symbol, i)=>{
+            if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol) resultStr += symbol;
+            return resultStr;
+        }, "");
+        return clearValue;
+    };
+    const inputValue = (0, _react.useMemo)(getInputValue, [
+        innerValue,
+        isValueHidden
+    ]);
+    // GETTERS | END //
+    // CHECKERS | START //
+    const isValidChar = ({ char: key, i, disableErrors = false })=>{
+        const maskChar = getMaskCharByIndex(i);
+        switch(maskChar){
+            case _config.DIGIT_MASK_CHAR:
+                if (!(0, _functions.isDigit)(key)) {
+                    if (!disableErrors) {
+                        setErrorMessage(errors.onlyDigit);
+                    }
+                    return false;
+                }
+                break;
+            case _config.UPPERCASE_LETTER_MASK_CHAR:
+                if (adaptTextCase) key = key.toUpperCase();
+                if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
+                    if (!disableErrors) setErrorMessage(errors.onlyLetter);
+                    return false;
+                }
+                if (isCaseSensitive && !(0, _functions.isUpperCaseLetter)(key)) {
+                    if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
+                    return false;
+                }
+                break;
+            case _config.LOWERCASE_LETTER_MASK_CHAR:
+                if (adaptTextCase) key = key.toLowerCase();
+                if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
+                    if (!disableErrors) setErrorMessage(errors.onlyLetter);
+                    return false;
+                }
+                if (isCaseSensitive && !(0, _functions.isLowerCaseLetter)(key)) {
+                    if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
+                    return false;
+                }
+                break;
+            default:
+                return false;
         }
-        break;
-      case _config.UPPERCASE_LETTER_MASK_CHAR:
-        if (adaptTextCase) key = key.toUpperCase();
-        if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
-          if (!disableErrors) setErrorMessage(errors.onlyLetter);
-          return false;
+        return true;
+    };
+    const isSpecialSymbolMaskChar = ({ char })=>{
+        return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
+    };
+    const isSpecialSymbolChar = ({ char })=>{
+        return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
+    };
+    const isSpecialSymbol = (i)=>{
+        var _getCharByIndex;
+        return (_getCharByIndex = getCharByIndex(i)) === null || _getCharByIndex === void 0 ? void 0 : _getCharByIndex.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) {
+            (0, _utils.disableDefaultBehavior)();
+            setCaret(maxEditableIndex);
+            setBlinkError(true);
+            return;
         }
-        if (isCaseSensitive && !(0, _functions.isUpperCaseLetter)(key)) {
-          if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
-          return false;
+        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
+                })) {
+                    (0, _utils.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 _indexconstants.KEYBOARD_KEY_CODES.Backspace:
+                        if (isSpecialSymbol(caretPos)) {
+                            (0, _utils.disableDefaultBehavior)(e);
+                        }
+                        setCaret(caretPos);
+                        break;
+                    case _indexconstants.KEYBOARD_KEY_CODES.Delete:
+                        if (isSpecialSymbol(caretPos)) {
+                            (0, _utils.disableDefaultBehavior)(e);
+                            setCaret(caretPos + 1);
+                        } else {
+                            setCaret(caretPos);
+                        }
+                        break;
+                    default:
+                        if (selectedLength > 0) {
+                            setCaret(caretPos);
+                        }
+                }
+            }
         }
-        break;
-      case _config.LOWERCASE_LETTER_MASK_CHAR:
-        if (adaptTextCase) key = key.toLowerCase();
-        if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
-          if (!disableErrors) setErrorMessage(errors.onlyLetter);
-          return false;
+        /* 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)) {
+                    (0, _utils.disableDefaultBehavior)(e);
+                    setBlinkError(true);
+                }
+            }, 0);
         }
-        if (isCaseSensitive && !(0, _functions.isLowerCaseLetter)(key)) {
-          if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
-          return false;
+    };
+    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;
         }
-        break;
-      default:
-        return false;
-    }
-    return true;
-  };
-  const isSpecialSymbolMaskChar = _ref7 => {
-    let {
-      char
-    } = _ref7;
-    return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
-  };
-  const isSpecialSymbolChar = _ref8 => {
-    let {
-      char
-    } = _ref8;
-    return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
-  };
-  const isSpecialSymbol = i => {
-    var _getCharByIndex;
-    return (_getCharByIndex = getCharByIndex(i)) === null || _getCharByIndex === void 0 ? void 0 : _getCharByIndex.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) {
-      (0, _utils.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
-        })) {
-          (0, _utils.disableDefaultBehavior)(e);
-          setCaret(caretPos - 1);
+        const numValue = value.replace(/\D/g, "");
+        let newSSN = "";
+        //! maxHiddenIndex - это индекс, НЕ length. Поэтому нужно добавить 1
+        const staticLength = maxHiddenIndex !== -1 ? maxHiddenIndex + 1 : maskPattern === null || maskPattern === void 0 ? void 0 : maskPattern.length;
+        if (SSN.length > staticLength) {
+            newSSN = SSN.slice(0, staticLength) + numValue;
         } else {
-          const newCaretPos = value.length - caretOffset;
-          setCaret(isSpecialSymbol(newCaretPos) ? newCaretPos + 1 : newCaretPos);
+            newSSN = SSN + numValue;
         }
-      } else if (inputValue.longerThan(value)) {
-        switch (getKeyDown()) {
-          case _index.KEYBOARD_KEY_CODES.Backspace:
-            if (isSpecialSymbol(caretPos)) {
-              (0, _utils.disableDefaultBehavior)(e);
-            }
-            setCaret(caretPos);
-            break;
-          case _index.KEYBOARD_KEY_CODES.Delete:
-            if (isSpecialSymbol(caretPos)) {
-              (0, _utils.disableDefaultBehavior)(e);
-              setCaret(caretPos + 1);
-            } else {
-              setCaret(caretPos);
-            }
-            break;
-          default:
-            if (selectedLength > 0) {
-              setCaret(caretPos);
-            }
+        if (newSSN.length > (maskPattern === null || maskPattern === void 0 ? void 0 : maskPattern.length)) {
+            return;
         }
-      }
-    }
-
-    /* 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)) {
-          (0, _utils.disableDefaultBehavior)(e);
-          setBlinkError(true);
-        }
-      }, 0);
-    }
-  };
-  const onHiddenChange = e => {
-    var _maskPattern3, _maskPattern4;
-    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 : (_maskPattern3 = maskPattern) === null || _maskPattern3 === void 0 ? void 0 : _maskPattern3.length;
-    if (SSN.length > staticLength) {
-      newSSN = SSN.slice(0, staticLength) + numValue;
-    } else {
-      newSSN = SSN + numValue;
-    }
-    if (newSSN.length > ((_maskPattern4 = maskPattern) === null || _maskPattern4 === void 0 ? void 0 : _maskPattern4.length)) {
-      return;
-    }
-    setValue(newSSN);
-  };
-  const onChange = isValueHidden ? onHiddenChange : onVisibleChange;
-  const onKeyDown = e => {
-    onKeyDownProp === null || onKeyDownProp === void 0 || 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 => {
-    var _inputRef$current;
-    e.stopPropagation();
-    e.preventDefault();
-    resetInnerValue();
-    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-    setCaret(0);
-    clearErrorMessage();
-  };
-  const onHiddenToggle = value => {
-    var _inputRef$current2;
-    // ? Добавлена возможность принудительной установки велью (опционально)
-    const newValue = typeof value === "boolean" ? value : !isValueHidden;
-    setIsValueHidden(newValue);
-    if (isHiddenLogicInit) inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.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 => {
-    var _e$target, _ref9;
-    const {
-      selectionStart,
-      selectionEnd
-    } = (_e$target = e.target) !== null && _e$target !== void 0 ? _e$target : {};
-    setSelectedLength((_ref9 = selectionEnd - selectionStart) !== null && _ref9 !== void 0 ? _ref9 : 0);
-    if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
-  };
-  // GENERAL EVENT HANDLERS | END //
-
-  /// --- OBSERVERS ---///
-  // Render Mask
-  (0, _react.useEffect)(() => {
-    setIsInitValue(false);
-    setInnerValue([]);
-    setMaskRendered(false);
-    if (!maskPattern) maskPattern = "";
-    maskPattern.split("").map((char, id) => {
-      addInnerValueChar({
-        char,
-        data: {
-          id,
-          isReadOnly: id === maskPattern.length
+        setValue(newSSN);
+    };
+    const onChange = isValueHidden ? onHiddenChange : onVisibleChange;
+    const onKeyDown = (e)=>{
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : 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();
         }
-      });
-      if (value !== null && value !== void 0 && value[id]) updateInnerValueChar({
-        char: value[id]
-      }, id);
-    });
-    setMaskRendered(true);
-  }, [maskPattern]);
-  (0, _react.useEffect)(() => {
-    if (isMaskRendered && !isInitValue || isInitValue && ![getInputValue(), getClearInnerValueAsString()].includes(value)) {
-      setValue(value);
-      setIsInitValue(true);
-    }
-  }, [isMaskRendered, value, isInitValue]);
-
-  // OnChange Observer
-  (0, _react.useEffect)(() => {
-    if (isMaskRendered && isInitValue) {
-      var _prevValueRef$current, _prevValueRef$current2;
-      setError(false);
-      const values = [getClearInnerValueAsString(), getInputValue({
-        noLastTyppedCharIndexCheck: true,
-        noHide: true
-      })];
-      if (returnMaskedValue) values.reverse();
-      if ((prevValueRef === null || prevValueRef === void 0 || (_prevValueRef$current = prevValueRef.current) === null || _prevValueRef$current === void 0 ? void 0 : _prevValueRef$current[0]) !== values[0] && (prevValueRef === null || prevValueRef === void 0 || (_prevValueRef$current2 = prevValueRef.current) === null || _prevValueRef$current2 === void 0 ? void 0 : _prevValueRef$current2[1]) !== values[1] && value !== getClearInnerValueAsString()) {
-        prevValueRef.current = values;
-        onChangeProp(...values);
-      }
-    }
-  }, [innerValue, isMaskRendered, isInitValue]);
-
-  // Blink Error
-  (0, _react.useEffect)(() => {
-    if (blinkError) {
-      setTimeout(() => {
-        setBlinkError(false);
-      }, blinkDuration);
-    }
-  }, [blinkError]);
-  (0, _react.useEffect)(() => {
-    setError(customError !== "");
-    setErrorMessage(customError === "" ? errors.default : customError);
-  }, [customError, isError]);
-  (0, _react.useEffect)(() => {
-    if (typeof isHide === "boolean") {
-      onHiddenToggle(isHide);
-      if (!isHiddenLogicInit) setIsHiddenLogicInit(true);
-    }
-  }, [isHide]);
-
-  /// --- RENDER ---///
-
-  const renderChar = function (obj, i) {
-    let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
-    const {
-      char,
-      ref,
-      maskChar,
-      isSpecialSymbol
-    } = obj;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      tabIndex: -1,
-      key: i,
-      "attr-char-id": i,
-      className: (0, _classnames.default)("input-mask_value_item", className, {
-        "input-mask_value_item--digit": (0, _functions.isDigitMaskChar)(obj.maskChar),
-        "input-mask_value_item--letter": (0, _functions.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 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === "" ? getPlaceholderCharByIndex(i) : char);
-  };
-  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 /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_value"
-    }, renderInputValue());
-  };
-  const renderInput = () => {
-    return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-      tabIndex: disabled || isLoading ? -1 : 0,
-      readOnly: disabled || isLoading,
-      name: name || fieldKey || id || testId || "",
-      className: "input-mask_input ".concat(className),
-      ref: inputRef,
-      value: inputValue,
-      onChange: onChange,
-      onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp,
-      onBlur: onBlur,
-      onClick: onClick,
-      autoComplete: autocomplete,
-      onFocus: function () {
-        if (isUseAutoSelect) inputRef.current.select();
-        if (onFocus) onFocus(...arguments);
-      },
-      onDragStart: e => {
-        e.stopPropagation();
-        e.preventDefault();
-      },
-      onDragEnd: e => {
+    };
+    const onClearClick = (e)=>{
+        var _inputRef_current;
         e.stopPropagation();
         e.preventDefault();
-      },
-      onSelect: onSelect
-    }, attributesOfNativeInput));
-  };
-  const renderHideToggler = () => {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "formatted-raw-ssn-eye-holder",
-      onClick: onHiddenToggle
-    }, " ", isValueHidden ? /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
-      strokeWidth: 1,
-      className: "password-icon"
-    }) : /*#__PURE__*/_react.default.createElement(_reactFeather.EyeOff, {
-      strokeWidth: 1,
-      className: "password-icon"
-    }));
-  };
-  const renderClearButton = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_clear"
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
-      onClick: onClearClick
-    }));
-  };
-  const renderHint = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_hint input-mask_hint--".concat(hintPosition)
-    }, /*#__PURE__*/_react.default.createElement(_Hint.default, {
-      hint: hintText,
-      className: hintClassName,
-      side: hintPosition
-    }));
-  };
-  const renderIcon = function () {
-    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "left";
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_icon input-mask_icon--".concat(position)
-    }, DynamicIconComponent !== null && DynamicIconComponent !== void 0 ? DynamicIconComponent : icon);
-  };
-  const render = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      "data-testid": testId,
-      className: (0, _classnames.default)("input-mask3_wrapper", className, {
-        "input-mask_error": isError
-      }, {
-        "input-mask_focus": isFocused
-      }, {
-        "input-mask_blink-error": blinkError
-      }, {
-        disabled: disabled || isLoading
-      }),
-      tabIndex: -1
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "\n            input-mask\n            ".concat(isError ? "input-mask_error" : "", "\n            ").concat(isFocused ? "input-mask_focus" : "", "\n            ").concat(blinkError ? "input-mask_blink-error" : "", "\n          ")
-    }, showHint && isHintLeft && renderHint(), isIconLeft && showIcon && renderIcon("left"), renderMask(), renderInput(), withHiddenMode && typeof isHide !== "boolean" && renderHideToggler(), isClearable && renderClearButton(), isIconRight && showIcon && renderIcon("right"), showHint && isHintRight && renderHint()), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_error-text"
-    }, errorMessage), isLoading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
-      size: "small"
-    }));
-  };
-  return render();
-}
+        resetInnerValue();
+        inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        setCaret(0);
+        clearErrorMessage();
+    };
+    const onHiddenToggle = (value)=>{
+        var _inputRef_current;
+        // ? Добавлена возможность принудительной установки велью (опционально)
+        const newValue = typeof value === "boolean" ? value : !isValueHidden;
+        setIsValueHidden(newValue);
+        if (isHiddenLogicInit) inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _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)=>{
+        var _e_target;
+        const { selectionStart, selectionEnd } = (_e_target = e.target) !== null && _e_target !== void 0 ? _e_target : {};
+        var _ref;
+        setSelectedLength((_ref = selectionEnd - selectionStart) !== null && _ref !== void 0 ? _ref : 0);
+        if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
+    };
+    // GENERAL EVENT HANDLERS | END //
+    /// --- OBSERVERS ---///
+    // Render Mask
+    (0, _react.useEffect)(()=>{
+        setIsInitValue(false);
+        setInnerValue([]);
+        setMaskRendered(false);
+        if (!maskPattern) maskPattern = "";
+        maskPattern.split("").map((char, id)=>{
+            addInnerValueChar({
+                char,
+                data: {
+                    id,
+                    isReadOnly: id === maskPattern.length
+                }
+            });
+            if (value === null || value === void 0 ? void 0 : value[id]) updateInnerValueChar({
+                char: value[id]
+            }, id);
+        });
+        setMaskRendered(true);
+    }, [
+        maskPattern
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (isMaskRendered && !isInitValue || isInitValue && ![
+            getInputValue(),
+            getClearInnerValueAsString()
+        ].includes(value)) {
+            setValue(value);
+            setIsInitValue(true);
+        }
+    }, [
+        isMaskRendered,
+        value,
+        isInitValue
+    ]);
+    // OnChange Observer
+    (0, _react.useEffect)(()=>{
+        if (isMaskRendered && isInitValue) {
+            var _prevValueRef_current, _prevValueRef_current1;
+            setError(false);
+            const values = [
+                getClearInnerValueAsString(),
+                getInputValue({
+                    noLastTyppedCharIndexCheck: true,
+                    noHide: true
+                })
+            ];
+            if (returnMaskedValue) values.reverse();
+            if ((prevValueRef === null || prevValueRef === void 0 ? void 0 : (_prevValueRef_current = prevValueRef.current) === null || _prevValueRef_current === void 0 ? void 0 : _prevValueRef_current[0]) !== values[0] && (prevValueRef === null || prevValueRef === void 0 ? void 0 : (_prevValueRef_current1 = prevValueRef.current) === null || _prevValueRef_current1 === void 0 ? void 0 : _prevValueRef_current1[1]) !== values[1] && value !== getClearInnerValueAsString()) {
+                prevValueRef.current = values;
+                onChangeProp(...values);
+            }
+        }
+    }, [
+        innerValue,
+        isMaskRendered,
+        isInitValue
+    ]);
+    // Blink Error
+    (0, _react.useEffect)(()=>{
+        if (blinkError) {
+            setTimeout(()=>{
+                setBlinkError(false);
+            }, blinkDuration);
+        }
+    }, [
+        blinkError
+    ]);
+    (0, _react.useEffect)(()=>{
+        setError(customError !== "");
+        setErrorMessage(customError === "" ? errors.default : customError);
+    }, [
+        customError,
+        isError
+    ]);
+    (0, _react.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 /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+            tabIndex: -1,
+            "attr-char-id": i,
+            className: (0, _classnames.default)("input-mask_value_item", className, {
+                "input-mask_value_item--digit": (0, _functions.isDigitMaskChar)(obj.maskChar),
+                "input-mask_value_item--letter": (0, _functions.isLetterMaskChar)(obj.maskChar),
+                "input-mask_value_item--spec": obj.isSpecialSymbol,
+                "input-mask_value_item--hidden": i < inputValue.length
+            }),
+            ref: ref,
+            children: !isFocused && hideMaskOnBlur && getClearInnerValueAsString().length === 0 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === "" ? getPlaceholderCharByIndex(i) : char
+        }, i);
+    };
+    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 /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "input-mask_value",
+            children: renderInputValue()
+        });
+    };
+    const renderInput = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("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 /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+            className: "formatted-raw-ssn-eye-holder",
+            onClick: onHiddenToggle,
+            children: [
+                " ",
+                isValueHidden ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Eye, {
+                    strokeWidth: 1,
+                    className: "password-icon"
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.EyeOff, {
+                    strokeWidth: 1,
+                    className: "password-icon"
+                })
+            ]
+        });
+    };
+    const renderClearButton = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "input-mask_clear",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                onClick: onClearClick
+            })
+        });
+    };
+    const renderHint = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: `input-mask_hint input-mask_hint--${hintPosition}`,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                hint: hintText,
+                className: hintClassName,
+                side: hintPosition
+            })
+        });
+    };
+    const renderIcon = (position = "left")=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: `input-mask_icon input-mask_icon--${position}`,
+            children: DynamicIconComponent !== null && DynamicIconComponent !== void 0 ? DynamicIconComponent : icon
+        });
+    };
+    const render = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            "data-testid": testId,
+            className: (0, _classnames.default)("input-mask3_wrapper", className, {
+                "input-mask_error": isError
+            }, {
+                "input-mask_focus": isFocused
+            }, {
+                "input-mask_blink-error": blinkError
+            }, {
+                disabled: disabled || isLoading
+            }),
+            tabIndex: -1,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: `
+            input-mask
+            ${isError ? "input-mask_error" : ""}
+            ${isFocused ? "input-mask_focus" : ""}
+            ${blinkError ? "input-mask_blink-error" : ""}
+          `,
+                    children: [
+                        showHint && isHintLeft && renderHint(),
+                        isIconLeft && showIcon && renderIcon("left"),
+                        renderMask(),
+                        renderInput(),
+                        withHiddenMode && typeof isHide !== "boolean" && renderHideToggler(),
+                        isClearable && renderClearButton(),
+                        isIconRight && showIcon && renderIcon("right"),
+                        showHint && isHintRight && renderHint()
+                    ]
+                }),
+                showErrors && errorMessage && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "input-mask_error-text",
+                    children: errorMessage
+                }),
+                isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                    size: "small"
+                })
+            ]
+        });
+    };
+    return render();
+}