intelicoreact 1.5.38 → 1.5.41

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

@@ -1,673 +1,701 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-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");
+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");
 require("./InputMask3.scss");
-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];
-            }
+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 && {}.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) {
+    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?.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 = 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 => {
+    return innerValue[i]?.maskChar || undefined;
+  };
+  const getPlaceholderCharByIndex = i => {
+    const {
+      maskChar
+    } = getCharByIndex(i);
+    if (usePatternPlaceholder) {
+      return maskPatternPlaceholder[i] || maskPlaceholder;
     }
-    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;
+    if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
+    if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
+    return maskPlaceholder;
+  };
+  const getInputValue = function () {
+    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;
         }
-        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;
+      } else {
+        isValid = false;
+      }
+      return result;
+    }, "");
+    if (getClearInnerValueAsString(value)?.length === 0) return "";
+    return value;
+  };
+  const getClearInnerValueAsString = valueProp => {
+    const symbolsInfo = innerValue?.map(_ref4 => {
+      let {
+        isSpecialSymbol,
+        isCharSymbol
+      } = _ref4;
+      return {
+        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 = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]);
+  // GETTERS | END //
+
+  // CHECKERS | START //
+  const isValidChar = _ref5 => {
+    let {
+      char: key,
+      i,
+      disableErrors = false
+    } = _ref5;
+    const maskChar = getMaskCharByIndex(i);
+    switch (maskChar) {
+      case _config.DIGIT_MASK_CHAR:
+        if (!(0, _functions.isDigit)(key)) {
+          if (!disableErrors) {
+            setErrorMessage(errors.onlyDigit);
+          }
+          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;
+        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;
         }
-        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);
-                        }
-                }
-            }
+        if (isCaseSensitive && !(0, _functions.isUpperCaseLetter)(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
+          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);
+        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;
         }
-    };
-    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;
+        if (isCaseSensitive && !(0, _functions.isLowerCaseLetter)(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
+          return false;
         }
-        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;
+        break;
+      default:
+        return false;
+    }
+    return true;
+  };
+  const isSpecialSymbolMaskChar = _ref6 => {
+    let {
+      char
+    } = _ref6;
+    return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
+  };
+  const isSpecialSymbolChar = _ref7 => {
+    let {
+      char
+    } = _ref7;
+    return !(0, _functions.isDigit)(char) && !(0, _functions.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) {
+      (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);
         } else {
-            newSSN = SSN + numValue;
-        }
-        if (newSSN.length > (maskPattern === null || maskPattern === void 0 ? void 0 : maskPattern.length)) {
-            return;
-        }
-        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();
+          const newCaretPos = value.length - caretOffset;
+          setCaret(isSpecialSymbol(newCaretPos) ? newCaretPos + 1 : newCaretPos);
         }
-    };
-    const onClearClick = (e)=>{
-        var _inputRef_current;
-        e.stopPropagation();
-        e.preventDefault();
-        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);
+      } 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);
             }
         }
-    }, [
-        innerValue,
-        isMaskRendered,
-        isInitValue
-    ]);
-    // Blink Error
-    (0, _react.useEffect)(()=>{
-        if (blinkError) {
-            setTimeout(()=>{
-                setBlinkError(false);
-            }, blinkDuration);
+      }
+    }
+
+    /* 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);
         }
-    }, [
-        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);
+      }, 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
+  (0, _react.useEffect)(() => {
+    setIsInitValue(false);
+    setInnerValue([]);
+    setMaskRendered(false);
+    if (!maskPattern) maskPattern = "";
+    maskPattern.split("").map((char, id) => {
+      addInnerValueChar({
+        char,
+        data: {
+          id,
+          isReadOnly: id === maskPattern.length
         }
-    }, [
-        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: `
+      });
+      if (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) {
+      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
+  (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 ${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 => {
+        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--${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--${position}`
+    }, 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: `
             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();
-}
+          `
+    }, 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();
+}