intelicoreact 1.5.38 → 1.5.41

package/dist/Atomic/FormElements/InputMask/InputMask.js

@@ -1,969 +1,1084 @@
-/* eslint-disable no-return-await */ /* eslint-disable no-extra-boolean-cast */ /* eslint-disable no-unsafe-optional-chaining */ /* eslint-disable comma-dangle */ /* eslint-disable array-callback-return */ /* eslint-disable no-continue */ /* eslint-disable no-unused-expressions */ /* eslint-disable no-empty */ /* eslint-disable no-unreachable */ /* eslint-disable default-case */ /* eslint-disable no-use-before-define */ /* eslint-disable no-unused-vars */ /* eslint-disable default-param-last */ "use strict";
+"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 InputMask;
-    }
-});
-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 _Hint = /*#__PURE__*/ _interop_require_default(require("../../UI/Hint/Hint"));
-const _indexconstants = require("./../../../Constants/index.constants.js");
-const _InputCarretPosition = require("./InputCarretPosition");
-const _config = require("./config");
-const _functions = require("./functions");
+exports.default = InputMask;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactFeather = require("react-feather");
+var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
+var _indexConstants = require("./../../../Constants/index.constants.js");
+var _InputCarretPosition = require("./InputCarretPosition");
+var _config = require("./config");
+var _functions = require("./functions");
 require("./InputMask.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+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; }
+/* eslint-disable no-return-await */
+/* eslint-disable no-extra-boolean-cast */
+/* eslint-disable no-unsafe-optional-chaining */
+/* eslint-disable comma-dangle */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-continue */
+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-empty */
+/* eslint-disable no-unreachable */
+/* eslint-disable default-case */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-unused-vars */
+/* eslint-disable default-param-last */
+
+// import { KEYBOARD_SERVICE_KEYS } from './index.constants.js';
+
+function InputMask() {
+  let {
+    maskPattern,
+    maskPatternPlaceholder,
+    maskPlaceholder,
+    maskDigitPlaceholder,
+    maskLetterPlaceholder,
+    usePatternPlaceholder,
+    disabled,
+    maskAsPlaceholder = true,
+    maxEditableLen = -1,
+    isFocusedDefault = false,
+    isClearable,
+    isCaseSensitive,
+    adaptTextCase,
+    isUseAutoSelect = true,
+    icon,
+    showIcon,
+    isIconLeft,
+    isIconRight,
+    value,
+    blinkErrors = true,
+    blinkDuration = 100,
+    showErrors = false,
+    className = "",
+    errors: customErrors = _config.DEFAULT_ERRORS,
+    error: customError = "",
+    ref,
+    onChange: onChangeProp = () => {},
+    onFocus: onFocusProp = () => {},
+    onBlur: onBlurProp = () => {},
+    onKeyDown: onKeyDownProp = () => {},
+    imitateTypingOnPaste = false,
+    imitateTypingOnPasteDelay = 100,
+    showHint = false,
+    hintText = "",
+    hintClassName = "",
+    isHintRight = true,
+    isHintLeft = false,
+    hintPosition = "right",
+    hideMaskOnBlur = true,
+    returnMaskedValue = false,
+    name,
+    testId = "input-mask"
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const errors = {
+    ..._config.DEFAULT_ERRORS,
+    ...customErrors
+  };
+  const [isMaskRendered, setMaskRendered] = (0, _react.useState)(false);
+  const inputRef = (0, _react.useRef)(null);
+  const [isMouseDown, setIsMouseDown] = (0, _react.useState)(false);
+  const [isFocused, setFocused] = (0, _react.useState)(false);
+  const [isInitValue, setIsInitValue] = (0, _react.useState)(false);
+  const inputThrottlingTimeout = 20;
+  const [isInputThrottled, setIsInputThrottled] = (0, _react.useState)(false);
+
+  // 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 //
+
+  // SELECTION MANAGEMENT FUNCTIONS | START //
+  const [isSelecting, setIsSelecting] = (0, _react.useState)(false);
+  const [selectedText, setSelectedText] = (0, _react.useState)("");
+  const [selectionStartX, setSelectionStartX] = (0, _react.useState)(null);
+  const [selectionEndX, setSelectionEndX] = (0, _react.useState)(null);
+  // SELECTION MANAGEMENT FUNCTIONS | END //
+
+  // SERVICE WATCHERS MANAGEMENT FUNCTIONS | START //
+  const [serviceWatchers, setServiceWatchers] = (0, _react.useState)([]);
+  const pushServiceWatcher = fn => setServiceWatchers(state => [...state, {
+    fn,
+    dt: Date.now()
+  }]);
+  const popServiceWatcher = () => {
+    const [poped, ...rest] = serviceWatchers;
+    setServiceWatchers(rest);
+    return poped.fn || _functions.voidFn;
+  };
+  const serviceWatchersWorker = () => {
+    popServiceWatcher()();
+  };
+  (0, _react.useEffect)(() => {
+    if (serviceWatchers.length) serviceWatchersWorker();
+  }, [serviceWatchers]);
+  // SERVICE WATCHERS MANAGEMENT FUNCTIONS | END //
+
+  // INNER VALUE MANAGEMENT FUNCTIONS | START //
+  const [innerValue, setInnerValue] = (0, _react.useState)([]);
+  const [undoValue, setUndoValue] = (0, _react.useState)("");
+  const [redoValue, setRedoValue] = (0, _react.useState)(null);
+  const [isUndoValueBlocked, setIsUndoValueBlocked] = (0, _react.useState)(false);
+  const addInnerValueChar = _ref => {
+    let {
+      char,
+      i = null,
+      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 = () => {
+    innerValue.map((v, i) => updateInnerValueChar({
+      char: ""
+    }, i));
+  };
+  // INNER VALUE MANAGEMENT FUNCTIONS | END //
+
+  // CHECKERS | START //
+  const isValidChar = _ref2 => {
+    let {
+      char: key,
+      i,
+      disableErrors = false
+    } = _ref2;
+    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;
+    }
+    return true;
+  };
+  const isSpecialSymbolMaskChar = _ref3 => {
+    let {
+      char
+    } = _ref3;
+    return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
+  };
+  const isSpecialSymbolChar = _ref4 => {
+    let {
+      char
+    } = _ref4;
+    return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
+  };
+  // CHECKERS | 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
     };
-}
-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;
+  };
+  const getCharByIndex = i => {
+    return innerValue[i] ? {
+      ...innerValue[i]
+    } : undefined;
+  };
+  const getMaskCharByIndex = i => {
+    return innerValue[i]?.maskChar || undefined;
+  };
+  const getSelectStartIndex = () => {
+    if (selectionStartX === selectionEndX) return 0;
+    const minX = selectionStartX < selectionEndX ? selectionStartX : selectionEndX;
+    const maxX = selectionStartX > selectionEndX ? selectionStartX : selectionEndX;
+    const {
+      index
+    } = innerValue.reduce((resObj, _ref5, index) => {
+      let {
+        char,
+        ref
+      } = _ref5;
+      if (ref?.current === null) return resObj;
+      const {
+        left: charX,
+        width: charWidth
+      } = ref?.current?.getBoundingClientRect();
+      const charCenterX = charX + charWidth / 2;
+
+      // If Char X-Coord Out Of Range
+      if (!charX || minX > charCenterX || maxX < charCenterX) return resObj;
+      if (resObj.index === null || minX <= charCenterX && charCenterX >= maxX && charCenterX < resObj.charX) return {
+        index,
+        charX: charCenterX
+      };
+      return resObj;
+    }, {
+      index: null,
+      charX: null
+    });
+    return index;
+  };
+  const getPlaceholderCharByIndex = i => {
+    const {
+      maskChar
+    } = getCharByIndex(i);
+    if (usePatternPlaceholder) {
+      return maskPatternPlaceholder[i] || maskPlaceholder;
+    } else {
+      if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
+      if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
+      return maskPlaceholder;
     }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
+  };
+  const getInnerValueAsString = function () {
+    let {
+      replaceSpace = false
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const result = innerValue.slice(0, innerValue.length - 1).map((_ref6, i) => {
+      let {
+        char,
+        maskChar
+      } = _ref6;
+      return char === "" ? getPlaceholderCharByIndex(i) || maskChar : char;
+    }).join("");
+    return replaceSpace ? result?.replace(/\u00A0/g, " ") : result;
+  };
+  const getClearInnerValueAsString = function () {
+    let start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    return innerValue.filter((charObj, i) => i >= start).reduce((result, _ref7, i, arr) => {
+      let {
+        char,
+        maskChar,
+        isSpecialSymbol,
+        isCharSymbol
+      } = _ref7;
+      if (char !== maskChar && char !== "" || !isSpecialSymbol || isCharSymbol) result += char; // || isCharSymbol
+      return result;
+    }, "");
+  };
+  const getLastTypedIndex = () => {
+    return innerValue.reduce((lastIndex, _ref8, i) => {
+      let {
+        char,
+        isSpecialSymbol
+      } = _ref8;
+      if (!isSpecialSymbol && char !== _config.SPACE_CHAR && char !== "" || lastIndex === null) lastIndex = i;
+      return lastIndex;
+    }, -1) + 1;
+  };
+  // GETTERS | END //
+
+  // SETTERS | START //
+  const setFocusOnChar = (i, prevIndex) => {
+    const charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    const {
+      ref,
+      isSpecialSymbol
+    } = charObj;
+    if (!ref) return false;
+    if ((maxEditableLen !== -1 ? i < maxEditableLen : true) && isSpecialSymbol && i < innerValue.length - 1) {
+      return prevIndex > i ? onArrowLeftDown(null, i) : onArrowRightDown(null, i);
     }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
+    if (maxEditableLen !== -1 && i > maxEditableLen) {
+      setFocusOnChar(maxEditableLen, i);
+      return false;
     }
-    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];
-            }
-        }
+    ref.current?.focus();
+    setTimeout(() => (0, _InputCarretPosition.setCaretPosition)(ref.current, 0), 10);
+    return true;
+  };
+  // SETTERS | END //
+
+  ///--- Event Handlers ---///
+
+  // SERVICE KEYS HANDLERS | START //
+  const onArrowLeftDown = (e, i) => setFocusOnChar(i - 1, i);
+  const onArrowRightDown = (e, i) => {
+    const key = e?.key || null;
+    if (maskAsPlaceholder && i > getLastTypedIndex()) {
+      return setFocusOnChar(getLastTypedIndex() + 1, i);
     }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
+    // If Current Index Equals LastTyped Index in MaskAsPlaceholder Mode
+    if (maskAsPlaceholder && i === getLastTypedIndex() && key === "ArrowRight") return false;
+    return setFocusOnChar(i + 1, i);
+  };
+  const onBackspaceDown = (e, i) => {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
     }
-    return newObj;
-}
-function InputMask({ maskPattern, maskPatternPlaceholder, maskPlaceholder, maskDigitPlaceholder, maskLetterPlaceholder, usePatternPlaceholder, disabled, maskAsPlaceholder = true, maxEditableLen = -1, isFocusedDefault = false, isClearable, isCaseSensitive, adaptTextCase, isUseAutoSelect = true, icon, showIcon, isIconLeft, isIconRight, value, blinkErrors = true, blinkDuration = 100, showErrors = false, className = "", errors: customErrors = _config.DEFAULT_ERRORS, error: customError = "", ref, onChange: onChangeProp = ()=>{}, onFocus: onFocusProp = ()=>{}, onBlur: onBlurProp = ()=>{}, onKeyDown: onKeyDownProp = ()=>{}, imitateTypingOnPaste = false, imitateTypingOnPasteDelay = 100, showHint = false, hintText = "", hintClassName = "", isHintRight = true, isHintLeft = false, hintPosition = "right", hideMaskOnBlur = true, returnMaskedValue = false, name, testId = "input-mask" } = {}) {
-    const errors = {
-        ..._config.DEFAULT_ERRORS,
-        ...customErrors
-    };
-    const [isMaskRendered, setMaskRendered] = (0, _react.useState)(false);
-    const inputRef = (0, _react.useRef)(null);
-    const [isMouseDown, setIsMouseDown] = (0, _react.useState)(false);
-    const [isFocused, setFocused] = (0, _react.useState)(false);
-    const [isInitValue, setIsInitValue] = (0, _react.useState)(false);
-    const inputThrottlingTimeout = 20;
-    const [isInputThrottled, setIsInputThrottled] = (0, _react.useState)(false);
-    // 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 //
-    // SELECTION MANAGEMENT FUNCTIONS | START //
-    const [isSelecting, setIsSelecting] = (0, _react.useState)(false);
-    const [selectedText, setSelectedText] = (0, _react.useState)("");
-    const [selectionStartX, setSelectionStartX] = (0, _react.useState)(null);
-    const [selectionEndX, setSelectionEndX] = (0, _react.useState)(null);
-    // SELECTION MANAGEMENT FUNCTIONS | END //
-    // SERVICE WATCHERS MANAGEMENT FUNCTIONS | START //
-    const [serviceWatchers, setServiceWatchers] = (0, _react.useState)([]);
-    const pushServiceWatcher = (fn)=>setServiceWatchers((state)=>[
-                ...state,
-                {
-                    fn,
-                    dt: Date.now()
-                }
-            ]);
-    const popServiceWatcher = ()=>{
-        const [poped, ...rest] = serviceWatchers;
-        setServiceWatchers(rest);
-        return poped.fn || _functions.voidFn;
-    };
-    const serviceWatchersWorker = ()=>{
-        popServiceWatcher()();
-    };
-    (0, _react.useEffect)(()=>{
-        if (serviceWatchers.length) serviceWatchersWorker();
-    }, [
-        serviceWatchers
-    ]);
-    // SERVICE WATCHERS MANAGEMENT FUNCTIONS | END //
-    // INNER VALUE MANAGEMENT FUNCTIONS | START //
-    const [innerValue, setInnerValue] = (0, _react.useState)([]);
-    const [undoValue, setUndoValue] = (0, _react.useState)("");
-    const [redoValue, setRedoValue] = (0, _react.useState)(null);
-    const [isUndoValueBlocked, setIsUndoValueBlocked] = (0, _react.useState)(false);
-    const addInnerValueChar = ({ char, i = null, 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 = ()=>{
-        innerValue.map((v, i)=>updateInnerValueChar({
-                char: ""
-            }, i));
-    };
-    // INNER VALUE MANAGEMENT FUNCTIONS | 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;
-        }
-        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);
-    };
-    // CHECKERS | 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 getSelectStartIndex = ()=>{
-        if (selectionStartX === selectionEndX) return 0;
-        const minX = selectionStartX < selectionEndX ? selectionStartX : selectionEndX;
-        const maxX = selectionStartX > selectionEndX ? selectionStartX : selectionEndX;
-        const { index } = innerValue.reduce((resObj, { char, ref }, index)=>{
-            var _ref_current;
-            if ((ref === null || ref === void 0 ? void 0 : ref.current) === null) return resObj;
-            const { left: charX, width: charWidth } = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.getBoundingClientRect();
-            const charCenterX = charX + charWidth / 2;
-            // If Char X-Coord Out Of Range
-            if (!charX || minX > charCenterX || maxX < charCenterX) return resObj;
-            if (resObj.index === null || minX <= charCenterX && charCenterX >= maxX && charCenterX < resObj.charX) return {
-                index,
-                charX: charCenterX
-            };
-            return resObj;
-        }, {
-            index: null,
-            charX: null
-        });
-        return index;
-    };
-    const getPlaceholderCharByIndex = (i)=>{
-        const { maskChar } = getCharByIndex(i);
-        if (usePatternPlaceholder) {
-            return maskPatternPlaceholder[i] || maskPlaceholder;
-        } else {
-            if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
-            if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
-            return maskPlaceholder;
-        }
-    };
-    const getInnerValueAsString = ({ replaceSpace = false } = {})=>{
-        const result = innerValue.slice(0, innerValue.length - 1).map(({ char, maskChar }, i)=>{
-            return char === "" ? getPlaceholderCharByIndex(i) || maskChar : char;
-        }).join("");
-        return replaceSpace ? result === null || result === void 0 ? void 0 : result.replace(/\u00A0/g, " ") : result;
-    };
-    const getClearInnerValueAsString = (start = 0)=>{
-        return innerValue.filter((charObj, i)=>i >= start).reduce((result, { char, maskChar, isSpecialSymbol, isCharSymbol }, i, arr)=>{
-            if (char !== maskChar && char !== "" || !isSpecialSymbol || isCharSymbol) result += char; // || isCharSymbol
-            return result;
-        }, "");
-    };
-    const getLastTypedIndex = ()=>{
-        return innerValue.reduce((lastIndex, { char, isSpecialSymbol }, i)=>{
-            if (!isSpecialSymbol && char !== _config.SPACE_CHAR && char !== "" || lastIndex === null) lastIndex = i;
-            return lastIndex;
-        }, -1) + 1;
-    };
-    // GETTERS | END //
-    // SETTERS | START //
-    const setFocusOnChar = (i, prevIndex)=>{
-        var _ref_current;
-        const charObj = getCharByIndex(i);
-        if (!charObj) return false;
-        const { ref, isSpecialSymbol } = charObj;
-        if (!ref) return false;
-        if ((maxEditableLen !== -1 ? i < maxEditableLen : true) && isSpecialSymbol && i < innerValue.length - 1) {
-            return prevIndex > i ? onArrowLeftDown(null, i) : onArrowRightDown(null, i);
-        }
-        if (maxEditableLen !== -1 && i > maxEditableLen) {
-            setFocusOnChar(maxEditableLen, i);
-            return false;
-        }
-        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
-        setTimeout(()=>(0, _InputCarretPosition.setCaretPosition)(ref.current, 0), 10);
+    if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
+    const prevIndex = i - 1;
+    const charObj = getCharByIndex(prevIndex);
+    if (!charObj) return false;
+    const {
+      isSpecialSymbol
+    } = charObj;
+    if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
+    if (maskAsPlaceholder) {
+      const newText = innerValue.slice(0, prevIndex).concat(innerValue.slice(i, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce((text, _ref9) => {
+        let {
+          char
+        } = _ref9;
+        return text.concat(char);
+      }, "");
+      resetInnerValue();
+      onPaste({
+        text: newText
+      }, 0);
+    } else {
+      updateInnerValueChar({
+        char: ""
+      }, prevIndex);
+    }
+    setFocusOnChar(prevIndex, i);
+    return true;
+  };
+  const onDeleteDown = (e, i) => {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+    if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
+    const nextIndex = i + 1;
+    const charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    const {
+      char,
+      isSpecialSymbol
+    } = charObj;
+    if (isSpecialSymbol) return onDeleteDown(e, i + 1);
+    if (char === "") return false;
+    if (maskAsPlaceholder) {
+      const newText = innerValue.slice(0, i).concat(innerValue.slice(nextIndex, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce((text, _ref10) => {
+        let {
+          char
+        } = _ref10;
+        return text.concat(char);
+      }, "");
+      resetInnerValue();
+      onPaste({
+        text: newText
+      }, 0);
+      setFocusOnChar(i, i);
+    } else {
+      updateInnerValueChar({
+        char: ""
+      }, i);
+      setFocusOnChar(nextIndex, i);
+    }
+    return true;
+  };
+  const onHomeDown = (e, i) => setFocusOnChar(0, -1);
+  const onEndDown = (e, i) => setTimeout(() => setFocusOnChar(maskAsPlaceholder ? getLastTypedIndex() : 0, 0), 10);
+  // SERVICE KEYS HANDLERS | END //
+
+  // GENERAL EVENT HANDLERS | START //
+  const handleServiceKeyDown = (e, i) => {
+    const {
+      key
+    } = e;
+    switch (key) {
+      case "ArrowLeft":
+        return onArrowLeftDown(e, i);
+        break;
+      case "ArrowRight":
+        return onArrowRightDown(e, i);
+        break;
+      case "Backspace":
+        return onBackspaceDown(e, i);
+        break;
+      case "Delete":
+        return onDeleteDown(e, i);
+        break;
+      case "Home":
+        return onHomeDown(e, i);
+        break;
+      case "End":
+        return onEndDown(e, i);
+        break;
+      default:
         return true;
-    };
-    // SETTERS | END //
-    ///--- Event Handlers ---///
-    // SERVICE KEYS HANDLERS | START //
-    const onArrowLeftDown = (e, i)=>setFocusOnChar(i - 1, i);
-    const onArrowRightDown = (e, i)=>{
-        const key = (e === null || e === void 0 ? void 0 : e.key) || null;
-        if (maskAsPlaceholder && i > getLastTypedIndex()) {
-            return setFocusOnChar(getLastTypedIndex() + 1, i);
-        }
-        // If Current Index Equals LastTyped Index in MaskAsPlaceholder Mode
-        if (maskAsPlaceholder && i === getLastTypedIndex() && key === "ArrowRight") return false;
-        return setFocusOnChar(i + 1, i);
-    };
-    const onBackspaceDown = (e, i)=>{
-        if (!isUndoValueBlocked) {
-            setUndoValue(getClearInnerValueAsString());
-            setIsUndoValueBlocked(true);
+        break;
+    }
+  };
+  const handleKeyDown = async function (e, i) {
+    let {
+      disableErrors = false,
+      disableIsSelectingCheck = false
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (isSelecting && !disableIsSelectingCheck) {
+      deleteSelectedText();
+      (0, _functions.resetSelectionText)();
+      setIsSelecting(false);
+      setTimeout(() => handleKeyDown(e, getSelectStartIndex(), {
+        disableErrors,
+        disableIsSelectingCheck: true
+      }), 10);
+      return null;
+    }
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (e) {}
+    if (isInputThrottled) return false;
+    setIsInputThrottled(true);
+    let {
+      key,
+      keyCode
+    } = e;
+    const charObj = getCharByIndex(i);
+
+    // Android Text Typing FIX
+    // eslint-disable-next-line eqeqeq
+    if (keyCode == _config.ANDROID_CHROME_TEXT_CODE) {
+      const {
+        ref: charRef
+      } = charObj;
+      key = await new Promise(resolve => {
+        setTimeout(() => {
+          //Typed Text
+          if (charRef?.current?.innerText?.length >= 2) {
+            const [key, prevChar] = charRef?.current?.innerText;
+            charRef.current.innerText = prevChar;
+            resolve(key);
+          } else {
+            resolve(null);
+          }
+        }, 1);
+      });
+    }
+    if (!charObj || i === innerValue.length - 1) return false;
+    if (maskAsPlaceholder && i > getLastTypedIndex() + 1) return await handleKeyDown(e, getLastTypedIndex() === 0 ? 0 : getLastTypedIndex() + 1, {
+      disableErrors
+    });
+    const {
+      isSpecialSymbol,
+      maskChar,
+      isReadOnly
+    } = charObj;
+    if (isReadOnly) return false;
+
+    //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
+    if (maskChar === _config.SPACE_CHAR) return await handleKeyDown(e, i + 1);
+    if (isSpecialSymbol && maskChar !== key) return false;
+    if (!isValidChar({
+      char: key,
+      i,
+      disableErrors
+    })) return false;
+    if (maskAsPlaceholder && getClearInnerValueAsString(i)?.length !== 0) {
+      const fromIndex = i + 1;
+      const text = innerValue.slice().filter((_ref11, index) => {
+        let {
+          isCharSymbol
+        } = _ref11;
+        return index >= i && !isCharSymbol;
+      }).map((_ref12, index) => {
+        let {
+          char
+        } = _ref12;
+        return char;
+      }).join("");
+      onPaste({
+        text
+      }, fromIndex, false);
+    }
+    setIsUndoValueBlocked(false);
+    updateInnerValueChar({
+      char: key
+    }, i);
+    setTimeout(() => onArrowRightDown(e, i), 1);
+    return true;
+  };
+  const handleKeyCombinations = (e, i) => {
+    const {
+      key,
+      keyCode
+    } = e;
+    switch (keyCode) {
+      //Ctrl + A
+      case 65:
+        selectAllText(e);
+        break;
+      //Ctrl + Y
+      case 89:
+        if (redoValue) {
+          resetInnerValue();
+          onPaste({
+            text: redoValue
+          }, 0, true);
         }
-        if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
-        const prevIndex = i - 1;
-        const charObj = getCharByIndex(prevIndex);
-        if (!charObj) return false;
-        const { isSpecialSymbol } = charObj;
-        if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
-        if (maskAsPlaceholder) {
-            const newText = innerValue.slice(0, prevIndex).concat(innerValue.slice(i, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce((text, { char })=>{
-                return text.concat(char);
-            }, "");
-            resetInnerValue();
-            onPaste({
-                text: newText
-            }, 0);
-        } else {
+        break;
+      //Ctrl + Z
+      case 90:
+        setRedoValue(getClearInnerValueAsString());
+        resetInnerValue();
+        onPaste({
+          text: undoValue
+        }, 0, true);
+        break;
+    }
+  };
+  const onKeyDown = async function (e) {
+    let i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    if (!isFocused && !isSelecting) return false;
+    const {
+      key,
+      ctrlKey,
+      altKey
+    } = e;
+    const target = innerValue[0].ref?.current || e.target;
+    onKeyDownProp({
+      ...e,
+      target
+    }, i);
+    if (_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) && _config.EXCLUDED_KEYS.includes(key)) return true;
+    setError(false);
+    clearErrorMessage();
+    if (ctrlKey || altKey) {
+      if (!_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
+      return true;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const handleResult = _indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) ? handleServiceKeyDown(e, i) : await handleKeyDown(e, i);
+    if (blinkErrors && !handleResult && i !== null) {
+      setBlinkError(true);
+    }
+  };
+  const onClick = function (e, cb) {
+    let {
+      ignoreIsSelecting = false
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+    if (isSelecting && (selectedText.length || (0, _functions.getSelectionText)().length) && !ignoreIsSelecting) return false;
+    setFocused(true);
+    if (e.detail === 2) selectAllText(e);
+    if (typeof cb === "function") cb(e);
+  };
+  const onCharClick = (e, i) => {
+    if (e.detail == 2) {
+      selectAllText(e);
+      return true;
+    }
+    const {
+      char,
+      maskChar
+    } = getCharByIndex(i);
+    if (maskAsPlaceholder && !isValidChar({
+      char,
+      i,
+      disableErrors: true
+    })) i = getLastTypedIndex();
+    setIsSelecting(false);
+    (0, _functions.resetSelectionText)();
+    setTimeout(() => onClick(e, () => setFocusOnChar(i, 0), {
+      ignoreIsSelecting: true
+    }), 50);
+  };
+  const onWrapperClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!isMouseDown && !isSelecting) {
+      onClick(e);
+      setFocusOnChar(getLastTypedIndex(), 0);
+    }
+  };
+  const onClearClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    resetInnerValue();
+    onHomeDown(null, 0);
+  };
+  const onMouseDownMove = e => {
+    if (!isMouseDown) return false;
+    setIsSelecting(true);
+    const {
+      clientX
+    } = e;
+    if (selectionStartX === null) setSelectionStartX(clientX);
+    setSelectionEndX(clientX);
+  };
+  const onBlur = e => {
+    if (isFocused) onBlurProp();
+    setFocused(false);
+  };
+  const onFocus = (e, i) => {
+    const charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    const {
+      isSpecialSymbol,
+      ref
+    } = charObj;
+    (0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
+    if ((maxEditableLen !== -1 ? i < maxEditableLen : true) && isSpecialSymbol && i < innerValue.length - 1) {
+      onFocus(e, i + 1);
+      return false;
+    }
+    if (!isFocused) onFocusProp(e);
+    setFocused(true);
+  };
+  const onPaste = function (e, i) {
+    let setFocusToEnd = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+    setIsSelecting(false);
+    (0, _functions.resetSelectionText)();
+    const pastedText = (e?.clipboardData || window?.clipboardData)?.getData("text/plain") || e?.clipboardData?.getData("Text") || e.text;
+    if (!pastedText) return false;
+    const replacedIndexes = [];
+    if (maskAsPlaceholder && e?.type === "paste") {
+      const fromIndex = i + parseInt(pastedText?.length, 10);
+      const text = innerValue.slice().filter((_ref13, index) => {
+        let {
+          isCharSymbol
+        } = _ref13;
+        return index >= i && !isCharSymbol;
+      }).map((_ref14, index) => {
+        let {
+          char
+        } = _ref14;
+        return char;
+      }).join("");
+      onPaste({
+        text
+      }, fromIndex, false);
+    }
+    pastedText.split("").filter(char => (0, _functions.isDigit)(char) || (0, _functions.isLetter)(char)).map((pastedChar, offset) => {
+      const charIndex = i + offset;
+      let isReplaced = false;
+      let isValid = false;
+      for (let index = charIndex; index < innerValue.length && !isReplaced; ++index) {
+        const charObj = getCharByIndex(index);
+        if (!charObj) continue;
+        const {
+          char,
+          maskChar,
+          isSpecialSymbol
+        } = charObj;
+
+        // If Char Is Valid
+        if (!isValidChar({
+          char: pastedChar,
+          i: index,
+          disableErrors: true
+        })) continue;
+
+        // If Char Already Replaced
+        if (replacedIndexes.includes(index)) continue;
+        isReplaced = true;
+        isValid = true;
+        replacedIndexes.push(index);
+        if (imitateTypingOnPaste) {
+          setTimeout(() => {
             updateInnerValueChar({
-                char: ""
-            }, prevIndex);
-        }
-        setFocusOnChar(prevIndex, i);
-        return true;
-    };
-    const onDeleteDown = (e, i)=>{
-        if (!isUndoValueBlocked) {
-            setUndoValue(getClearInnerValueAsString());
-            setIsUndoValueBlocked(true);
-        }
-        if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
-        const nextIndex = i + 1;
-        const charObj = getCharByIndex(i);
-        if (!charObj) return false;
-        const { char, isSpecialSymbol } = charObj;
-        if (isSpecialSymbol) return onDeleteDown(e, i + 1);
-        if (char === "") return false;
-        if (maskAsPlaceholder) {
-            const newText = innerValue.slice(0, i).concat(innerValue.slice(nextIndex, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce((text, { char })=>{
-                return text.concat(char);
-            }, "");
-            resetInnerValue();
-            onPaste({
-                text: newText
-            }, 0);
-            setFocusOnChar(i, i);
+              char: pastedChar
+            }, index);
+          }, offset * imitateTypingOnPasteDelay);
         } else {
-            updateInnerValueChar({
-                char: ""
-            }, i);
-            setFocusOnChar(nextIndex, i);
-        }
-        return true;
-    };
-    const onHomeDown = (e, i)=>setFocusOnChar(0, -1);
-    const onEndDown = (e, i)=>setTimeout(()=>setFocusOnChar(maskAsPlaceholder ? getLastTypedIndex() : 0, 0), 10);
-    // SERVICE KEYS HANDLERS | END //
-    // GENERAL EVENT HANDLERS | START //
-    const handleServiceKeyDown = (e, i)=>{
-        const { key } = e;
-        switch(key){
-            case "ArrowLeft":
-                return onArrowLeftDown(e, i);
-                break;
-            case "ArrowRight":
-                return onArrowRightDown(e, i);
-                break;
-            case "Backspace":
-                return onBackspaceDown(e, i);
-                break;
-            case "Delete":
-                return onDeleteDown(e, i);
-                break;
-            case "Home":
-                return onHomeDown(e, i);
-                break;
-            case "End":
-                return onEndDown(e, i);
-                break;
-            default:
-                return true;
-                break;
-        }
-    };
-    const handleKeyDown = async (e, i, { disableErrors = false, disableIsSelectingCheck = false } = {})=>{
-        var _getClearInnerValueAsString;
-        if (isSelecting && !disableIsSelectingCheck) {
-            deleteSelectedText();
-            (0, _functions.resetSelectionText)();
-            setIsSelecting(false);
-            setTimeout(()=>handleKeyDown(e, getSelectStartIndex(), {
-                    disableErrors,
-                    disableIsSelectingCheck: true
-                }), 10);
-            return null;
-        }
-        try {
-            e.stopPropagation();
-            e.preventDefault();
-        } catch (e) {}
-        if (isInputThrottled) return false;
-        setIsInputThrottled(true);
-        let { key, keyCode } = e;
-        const charObj = getCharByIndex(i);
-        // Android Text Typing FIX
-        // eslint-disable-next-line eqeqeq
-        if (keyCode == _config.ANDROID_CHROME_TEXT_CODE) {
-            const { ref: charRef } = charObj;
-            key = await new Promise((resolve)=>{
-                setTimeout(()=>{
-                    var _charRef_current_innerText, _charRef_current;
-                    //Typed Text
-                    if ((charRef === null || charRef === void 0 ? void 0 : (_charRef_current = charRef.current) === null || _charRef_current === void 0 ? void 0 : (_charRef_current_innerText = _charRef_current.innerText) === null || _charRef_current_innerText === void 0 ? void 0 : _charRef_current_innerText.length) >= 2) {
-                        var _charRef_current1;
-                        const [key, prevChar] = charRef === null || charRef === void 0 ? void 0 : (_charRef_current1 = charRef.current) === null || _charRef_current1 === void 0 ? void 0 : _charRef_current1.innerText;
-                        charRef.current.innerText = prevChar;
-                        resolve(key);
-                    } else {
-                        resolve(null);
-                    }
-                }, 1);
-            });
-        }
-        if (!charObj || i === innerValue.length - 1) return false;
-        if (maskAsPlaceholder && i > getLastTypedIndex() + 1) return await handleKeyDown(e, getLastTypedIndex() === 0 ? 0 : getLastTypedIndex() + 1, {
-            disableErrors
-        });
-        const { isSpecialSymbol, maskChar, isReadOnly } = charObj;
-        if (isReadOnly) return false;
-        //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
-        if (maskChar === _config.SPACE_CHAR) return await handleKeyDown(e, i + 1);
-        if (isSpecialSymbol && maskChar !== key) return false;
-        if (!isValidChar({
-            char: key,
-            i,
-            disableErrors
-        })) return false;
-        if (maskAsPlaceholder && ((_getClearInnerValueAsString = getClearInnerValueAsString(i)) === null || _getClearInnerValueAsString === void 0 ? void 0 : _getClearInnerValueAsString.length) !== 0) {
-            const fromIndex = i + 1;
-            const text = innerValue.slice().filter(({ isCharSymbol }, index)=>index >= i && !isCharSymbol).map(({ char }, index)=>char).join("");
-            onPaste({
-                text
-            }, fromIndex, false);
-        }
-        setIsUndoValueBlocked(false);
-        updateInnerValueChar({
-            char: key
-        }, i);
-        setTimeout(()=>onArrowRightDown(e, i), 1);
-        return true;
-    };
-    const handleKeyCombinations = (e, i)=>{
-        const { key, keyCode } = e;
-        switch(keyCode){
-            //Ctrl + A
-            case 65:
-                selectAllText(e);
-                break;
-            //Ctrl + Y
-            case 89:
-                if (redoValue) {
-                    resetInnerValue();
-                    onPaste({
-                        text: redoValue
-                    }, 0, true);
-                }
-                break;
-            //Ctrl + Z
-            case 90:
-                setRedoValue(getClearInnerValueAsString());
-                resetInnerValue();
-                onPaste({
-                    text: undoValue
-                }, 0, true);
-                break;
+          updateInnerValueChar({
+            char: pastedChar
+          }, index);
         }
-    };
-    const onKeyDown = async (e, i = null)=>{
-        var _innerValue__ref;
-        if (!isFocused && !isSelecting) return false;
-        const { key, ctrlKey, altKey } = e;
-        const target = ((_innerValue__ref = innerValue[0].ref) === null || _innerValue__ref === void 0 ? void 0 : _innerValue__ref.current) || e.target;
-        onKeyDownProp({
-            ...e,
-            target
-        }, i);
-        if (_indexconstants.KEYBOARD_SERVICE_KEYS.includes(key) && _config.EXCLUDED_KEYS.includes(key)) return true;
-        setError(false);
-        clearErrorMessage();
-        if (ctrlKey || altKey) {
-            if (!_indexconstants.KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
-            return true;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const handleResult = _indexconstants.KEYBOARD_SERVICE_KEYS.includes(key) ? handleServiceKeyDown(e, i) : await handleKeyDown(e, i);
-        if (blinkErrors && !handleResult && i !== null) {
-            setBlinkError(true);
-        }
-    };
-    const onClick = (e, cb, { ignoreIsSelecting = false } = {})=>{
-        try {
-            e.stopPropagation();
-            e.preventDefault();
-        } catch (error) {}
-        if (isSelecting && (selectedText.length || (0, _functions.getSelectionText)().length) && !ignoreIsSelecting) return false;
-        setFocused(true);
-        if (e.detail === 2) selectAllText(e);
-        if (typeof cb === "function") cb(e);
-    };
-    const onCharClick = (e, i)=>{
-        if (e.detail == 2) {
-            selectAllText(e);
-            return true;
+      }
+      return {
+        char: pastedChar,
+        isValid
+      };
+    });
+    const [lastCharIndex] = replacedIndexes.reverse();
+    if (setFocusToEnd) setFocusOnChar(lastCharIndex + 1, i);
+    return lastCharIndex;
+  };
+  const onCopy = (e, i) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+    (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
+  };
+  const onCut = (e, i) => {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+    (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
+    deleteSelectedText();
+    setIsSelecting(false);
+    setFocusOnChar(i, 0);
+  };
+  // GENERAL EVENT HANDLERS | END //
+
+  // FUNCTIONS | START //
+  const cancelDefaultAction = (e, cb) => {
+    const {
+      key
+    } = e;
+    if (!_config.EXCLUDED_KEYS.includes(key) && _indexConstants.KEYBOARD_SERVICE_KEYS.includes(key)) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (typeof cb === "function") cb(e);
+    return false;
+  };
+  const selectAllText = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsSelecting(true);
+    setSelectionStartX(-1);
+    setSelectionEndX(-1);
+    (0, _functions.selectElementContents)(inputRef.current);
+    setSelectedText((0, _functions.getSelectionText)());
+  };
+  const deleteSelectedText = () => {
+    const selStartInd = getSelectStartIndex();
+    if (selStartInd === null || selStartInd === undefined) return false;
+    const selEndInd = (0, _functions.getSelectionText)().length + selStartInd;
+    (0, _functions.resetSelectionText)();
+    if (maskAsPlaceholder && getClearInnerValueAsString(selEndInd + 1)?.length !== 0) {
+      const text = innerValue.slice().filter((_ref15, index) => {
+        let {
+          isSpecialSymbol,
+          isCharSymbol
+        } = _ref15;
+        if (maxEditableLen !== -1 && index > maxEditableLen - 1) return false;
+        return (index < selStartInd || index >= selEndInd) && !isSpecialSymbol && !isCharSymbol;
+      }).map((_ref16, index) => {
+        let {
+          char
+        } = _ref16;
+        return char;
+      }).join("");
+      resetInnerValue();
+      onPaste({
+        text
+      }, 0, false);
+      setFocusOnChar(selStartInd);
+    } else {
+      for (let index = selStartInd; index < selEndInd; ++index) updateInnerValueChar({
+        char: ""
+      }, index);
+    }
+    setFocusOnChar(selStartInd, -1);
+    return true;
+  };
+  // FUNCTIONS | END //
+
+  ///--- OBSERVERS ---///
+  // Input Throttling
+  (0, _react.useEffect)(() => {
+    if (isInputThrottled) setTimeout(() => setIsInputThrottled(false), inputThrottlingTimeout);
+  }, [isInputThrottled]);
+  //Render Mask
+  (0, _react.useEffect)(() => {
+    setInnerValue([]);
+    setMaskRendered(false);
+    if (!maskPattern) maskPattern = "";
+    maskPattern.concat(" ").split("").map((char, id, i) => {
+      addInnerValueChar({
+        char,
+        i,
+        data: {
+          id,
+          isReadOnly: id === maskPattern.length
         }
-        const { char, maskChar } = getCharByIndex(i);
-        if (maskAsPlaceholder && !isValidChar({
+      });
+      if (value?.[id]) updateInnerValueChar({
+        char: value[id]
+      }, id);
+    });
+    setMaskRendered(true);
+  }, [maskPattern]);
+  (0, _react.useEffect)(() => {
+    if (value !== getClearInnerValueAsString()) setIsInitValue(false);
+  }, [value]);
+  (0, _react.useEffect)(() => {
+    if (isMaskRendered && !isInitValue && value !== getClearInnerValueAsString()) {
+      if (value && value !== "") {
+        let valueCharIndex = 0;
+        innerValue.map((_ref17, i) => {
+          let {
+            isSpecialSymbol
+          } = _ref17;
+          if (isSpecialSymbol) return false;
+          let char = value[valueCharIndex];
+          let whileLimit = maskPattern?.length || 0;
+          while (whileLimit && isSpecialSymbolChar({
+            char: value[valueCharIndex]
+          })) {
+            whileLimit--;
+            char = value[++valueCharIndex];
+          }
+
+          //If Valid
+          if (isValidChar({
             char,
             i,
             disableErrors: true
-        })) i = getLastTypedIndex();
-        setIsSelecting(false);
-        (0, _functions.resetSelectionText)();
-        setTimeout(()=>onClick(e, ()=>setFocusOnChar(i, 0), {
-                ignoreIsSelecting: true
-            }), 50);
-    };
-    const onWrapperClick = (e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        if (!isMouseDown && !isSelecting) {
-            onClick(e);
-            setFocusOnChar(getLastTypedIndex(), 0);
-        }
-    };
-    const onClearClick = (e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        resetInnerValue();
-        onHomeDown(null, 0);
-    };
-    const onMouseDownMove = (e)=>{
-        if (!isMouseDown) return false;
-        setIsSelecting(true);
-        const { clientX } = e;
-        if (selectionStartX === null) setSelectionStartX(clientX);
-        setSelectionEndX(clientX);
-    };
-    const onBlur = (e)=>{
-        if (isFocused) onBlurProp();
-        setFocused(false);
-    };
-    const onFocus = (e, i)=>{
-        const charObj = getCharByIndex(i);
-        if (!charObj) return false;
-        const { isSpecialSymbol, ref } = charObj;
-        (0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
-        if ((maxEditableLen !== -1 ? i < maxEditableLen : true) && isSpecialSymbol && i < innerValue.length - 1) {
-            onFocus(e, i + 1);
-            return false;
-        }
-        if (!isFocused) onFocusProp(e);
-        setFocused(true);
-    };
-    const onPaste = (e, i, setFocusToEnd = true)=>{
-        var _this, _window, _e_clipboardData;
-        try {
-            e.stopPropagation();
-            e.preventDefault();
-        } catch (error) {}
-        setIsSelecting(false);
-        (0, _functions.resetSelectionText)();
-        const pastedText = ((_this = (e === null || e === void 0 ? void 0 : e.clipboardData) || ((_window = window) === null || _window === void 0 ? void 0 : _window.clipboardData)) === null || _this === void 0 ? void 0 : _this.getData("text/plain")) || (e === null || e === void 0 ? void 0 : (_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : _e_clipboardData.getData("Text")) || e.text;
-        if (!pastedText) return false;
-        const replacedIndexes = [];
-        if (maskAsPlaceholder && (e === null || e === void 0 ? void 0 : e.type) === "paste") {
-            const fromIndex = i + parseInt(pastedText === null || pastedText === void 0 ? void 0 : pastedText.length, 10);
-            const text = innerValue.slice().filter(({ isCharSymbol }, index)=>index >= i && !isCharSymbol).map(({ char }, index)=>char).join("");
-            onPaste({
-                text
-            }, fromIndex, false);
-        }
-        pastedText.split("").filter((char)=>(0, _functions.isDigit)(char) || (0, _functions.isLetter)(char)).map((pastedChar, offset)=>{
-            const charIndex = i + offset;
-            let isReplaced = false;
-            let isValid = false;
-            for(let index = charIndex; index < innerValue.length && !isReplaced; ++index){
-                const charObj = getCharByIndex(index);
-                if (!charObj) continue;
-                const { char, maskChar, isSpecialSymbol } = charObj;
-                // If Char Is Valid
-                if (!isValidChar({
-                    char: pastedChar,
-                    i: index,
-                    disableErrors: true
-                })) continue;
-                // If Char Already Replaced
-                if (replacedIndexes.includes(index)) continue;
-                isReplaced = true;
-                isValid = true;
-                replacedIndexes.push(index);
-                if (imitateTypingOnPaste) {
-                    setTimeout(()=>{
-                        updateInnerValueChar({
-                            char: pastedChar
-                        }, index);
-                    }, offset * imitateTypingOnPasteDelay);
-                } else {
-                    updateInnerValueChar({
-                        char: pastedChar
-                    }, index);
-                }
-            }
-            return {
-                char: pastedChar,
-                isValid
-            };
+          })) {
+            updateInnerValueChar({
+              char
+            }, i);
+          }
+          ++valueCharIndex;
         });
-        const [lastCharIndex] = replacedIndexes.reverse();
-        if (setFocusToEnd) setFocusOnChar(lastCharIndex + 1, i);
-        return lastCharIndex;
-    };
-    const onCopy = (e, i)=>{
-        try {
-            e.stopPropagation();
-            e.preventDefault();
-        } catch (error) {}
-        (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
-    };
-    const onCut = (e, i)=>{
-        if (!isUndoValueBlocked) {
-            setUndoValue(getClearInnerValueAsString());
-            setIsUndoValueBlocked(true);
-        }
-        try {
-            e.stopPropagation();
-            e.preventDefault();
-        } catch (error) {}
-        (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
-        deleteSelectedText();
-        setIsSelecting(false);
-        setFocusOnChar(i, 0);
-    };
-    // GENERAL EVENT HANDLERS | END //
-    // FUNCTIONS | START //
-    const cancelDefaultAction = (e, cb)=>{
-        const { key } = e;
-        if (!_config.EXCLUDED_KEYS.includes(key) && _indexconstants.KEYBOARD_SERVICE_KEYS.includes(key)) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        if (typeof cb === "function") cb(e);
+      }
+      setIsInitValue(true);
+    }
+  }, [isMaskRendered, value, isInitValue]);
+  (0, _react.useEffect)(() => {
+    if (isInitValue) setUndoValue(getClearInnerValueAsString());
+  }, [isInitValue]);
+
+  // Focus Observer
+  (0, _react.useEffect)(() => {
+    if (!isFocused) setSelectedText("");
+  }, [isFocused]);
+
+  // Default Focused
+  (0, _react.useEffect)(() => {
+    if (isFocusedDefault && isMaskRendered) setFocusOnChar(0, -1);
+  }, [isFocusedDefault, isMaskRendered]);
+
+  // OnChange Observer
+  (0, _react.useEffect)(() => {
+    if (isMaskRendered && isFocused) {
+      setError(false);
+      clearErrorMessage();
+      const values = [getClearInnerValueAsString(), getInnerValueAsString({
+        replaceSpace: true
+      })];
+      if (returnMaskedValue) values.reverse();
+      onChangeProp(...values);
+    }
+  }, [innerValue, isMaskRendered]);
+
+  // Blink Error
+  (0, _react.useEffect)(() => {
+    if (blinkError) setTimeout(() => setBlinkError(false), blinkDuration);
+  }, [blinkError]);
+  (0, _react.useEffect)(() => {
+    if (!isSelecting) {
+      setSelectedText("");
+      (0, _functions.resetSelectionText)();
+      setSelectionStartX(null);
+      setSelectionEndX(null);
+    }
+    if (!isMouseDown && isSelecting) {
+      document.addEventListener("keydown", e => pushServiceWatcher(() => onKeyDown(e)), {
+        once: true
+      });
+    }
+    if (!isMouseDown && isSelecting && !(0, _functions.getSelectionText)().length) setIsSelecting(false);
+  }, [isSelecting, isMouseDown]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener("mouseup", () => {
+      setIsMouseDown(isMouseDown => {
+        if (isMouseDown) setSelectedText((0, _functions.getSelectionText)());
         return false;
-    };
-    const selectAllText = (e)=>{
-        e.preventDefault();
-        e.stopPropagation();
-        setIsSelecting(true);
-        setSelectionStartX(-1);
-        setSelectionEndX(-1);
-        (0, _functions.selectElementContents)(inputRef.current);
-        setSelectedText((0, _functions.getSelectionText)());
-    };
-    const deleteSelectedText = ()=>{
-        var _getClearInnerValueAsString;
-        const selStartInd = getSelectStartIndex();
-        if (selStartInd === null || selStartInd === undefined) return false;
-        const selEndInd = (0, _functions.getSelectionText)().length + selStartInd;
-        (0, _functions.resetSelectionText)();
-        if (maskAsPlaceholder && ((_getClearInnerValueAsString = getClearInnerValueAsString(selEndInd + 1)) === null || _getClearInnerValueAsString === void 0 ? void 0 : _getClearInnerValueAsString.length) !== 0) {
-            const text = innerValue.slice().filter(({ isSpecialSymbol, isCharSymbol }, index)=>{
-                if (maxEditableLen !== -1 && index > maxEditableLen - 1) return false;
-                return (index < selStartInd || index >= selEndInd) && !isSpecialSymbol && !isCharSymbol;
-            }).map(({ char }, index)=>char).join("");
-            resetInnerValue();
-            onPaste({
-                text
-            }, 0, false);
-            setFocusOnChar(selStartInd);
-        } else {
-            for(let index = selStartInd; index < selEndInd; ++index)updateInnerValueChar({
-                char: ""
-            }, index);
-        }
-        setFocusOnChar(selStartInd, -1);
-        return true;
-    };
-    // FUNCTIONS | END //
-    ///--- OBSERVERS ---///
-    // Input Throttling
-    (0, _react.useEffect)(()=>{
-        if (isInputThrottled) setTimeout(()=>setIsInputThrottled(false), inputThrottlingTimeout);
-    }, [
-        isInputThrottled
-    ]);
-    //Render Mask
-    (0, _react.useEffect)(()=>{
-        setInnerValue([]);
-        setMaskRendered(false);
-        if (!maskPattern) maskPattern = "";
-        maskPattern.concat(" ").split("").map((char, id, i)=>{
-            addInnerValueChar({
-                char,
-                i,
-                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 (value !== getClearInnerValueAsString()) setIsInitValue(false);
-    }, [
-        value
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (isMaskRendered && !isInitValue && value !== getClearInnerValueAsString()) {
-            if (value && value !== "") {
-                let valueCharIndex = 0;
-                innerValue.map(({ isSpecialSymbol }, i)=>{
-                    if (isSpecialSymbol) return false;
-                    let char = value[valueCharIndex];
-                    let whileLimit = (maskPattern === null || maskPattern === void 0 ? void 0 : maskPattern.length) || 0;
-                    while(whileLimit && isSpecialSymbolChar({
-                        char: value[valueCharIndex]
-                    })){
-                        whileLimit--;
-                        char = value[++valueCharIndex];
-                    }
-                    //If Valid
-                    if (isValidChar({
-                        char,
-                        i,
-                        disableErrors: true
-                    })) {
-                        updateInnerValueChar({
-                            char
-                        }, i);
-                    }
-                    ++valueCharIndex;
-                });
-            }
-            setIsInitValue(true);
-        }
-    }, [
-        isMaskRendered,
-        value,
-        isInitValue
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (isInitValue) setUndoValue(getClearInnerValueAsString());
-    }, [
-        isInitValue
-    ]);
-    // Focus Observer
-    (0, _react.useEffect)(()=>{
-        if (!isFocused) setSelectedText("");
-    }, [
-        isFocused
-    ]);
-    // Default Focused
-    (0, _react.useEffect)(()=>{
-        if (isFocusedDefault && isMaskRendered) setFocusOnChar(0, -1);
-    }, [
-        isFocusedDefault,
-        isMaskRendered
-    ]);
-    // OnChange Observer
-    (0, _react.useEffect)(()=>{
-        if (isMaskRendered && isFocused) {
-            setError(false);
-            clearErrorMessage();
-            const values = [
-                getClearInnerValueAsString(),
-                getInnerValueAsString({
-                    replaceSpace: true
-                })
-            ];
-            if (returnMaskedValue) values.reverse();
-            onChangeProp(...values);
-        }
-    }, [
-        innerValue,
-        isMaskRendered
-    ]);
-    // Blink Error
-    (0, _react.useEffect)(()=>{
-        if (blinkError) setTimeout(()=>setBlinkError(false), blinkDuration);
-    }, [
-        blinkError
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (!isSelecting) {
-            setSelectedText("");
-            (0, _functions.resetSelectionText)();
-            setSelectionStartX(null);
-            setSelectionEndX(null);
-        }
-        if (!isMouseDown && isSelecting) {
-            document.addEventListener("keydown", (e)=>pushServiceWatcher(()=>onKeyDown(e)), {
-                once: true
-            });
-        }
-        if (!isMouseDown && isSelecting && !(0, _functions.getSelectionText)().length) setIsSelecting(false);
-    }, [
-        isSelecting,
-        isMouseDown
-    ]);
-    (0, _react.useEffect)(()=>{
-        document.addEventListener("mouseup", ()=>{
-            setIsMouseDown((isMouseDown)=>{
-                if (isMouseDown) setSelectedText((0, _functions.getSelectionText)());
-                return false;
-            });
-        });
-    }, []);
-    (0, _react.useEffect)(()=>{
-        setError(customError !== "");
-        setErrorMessage(customError === "" ? errors.default : customError);
-    }, [
-        customError,
-        isError
-    ]);
-    ///--- RENDER ---///
-    const renderChar = (obj, i, className = "")=>{
-        const { char, ref, maskChar, isSpecialSymbol } = obj;
-        const prevChar = getCharByIndex(i - 1);
-        if (i === innerValue.length - 1 && isSelecting) return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-            style: {
-                width: "1px"
-            }
-        });
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-            tabIndex: i === 0 ? 0 : -1,
-            "attr-char-id": i,
-            className: `
+      });
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    setError(customError !== "");
+    setErrorMessage(customError === "" ? errors.default : customError);
+  }, [customError, isError]);
+
+  ///--- RENDER ---///
+
+  const renderChar = function (obj, i) {
+    let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+    const {
+      char,
+      ref,
+      maskChar,
+      isSpecialSymbol
+    } = obj;
+    const prevChar = getCharByIndex(i - 1);
+    if (i === innerValue.length - 1 && isSelecting) return /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        width: "1px"
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement("span", {
+      tabIndex: i === 0 ? 0 : -1,
+      key: i,
+      "attr-char-id": i,
+      className: `
           input-mask_value_item
           ${className}
           ${(0, _functions.isDigitMaskChar)(obj.maskChar) ? "input-mask_value_item--digit" : ""}
           ${(0, _functions.isLetterMaskChar)(obj.maskChar) ? "input-mask_value_item--letter" : ""}
           ${obj.isSpecialSymbol ? "input-mask_value_item--spec" : ""}
         `,
-            onClick: (e)=>onCharClick(e, i),
-            onFocus: (...params)=>{
-                // if (isUseAutoSelect) inputRef?.current?.select();
-                if (onFocus) onFocus(...params);
-            },
-            onBlur: onBlur,
-            onKeyPress: cancelDefaultAction,
-            onKeyDown: (e)=>onKeyDown(e, i),
-            onChange: cancelDefaultAction,
-            contentEditable: !isSelecting,
-            inputMode: (0, _functions.isDigitMaskChar)(i !== innerValue.length - 1 ? maskChar : prevChar === null || prevChar === void 0 ? void 0 : prevChar.maskChar) ? "numeric" : "text",
-            suppressContentEditableWarning: true,
-            onPaste: (e)=>onPaste(e, i),
-            onCopy: (e)=>onCopy(e, i),
-            onCut: (e)=>onCut(e, i),
-            ref: ref,
-            onDoubleClick: (e)=>{
-                e.stopPropagation();
-                e.preventDefault();
-                setIsSelecting(true);
-                setTimeout(()=>selectAllText(e, i), 50);
-            },
-            onMouseDown: (e)=>cancelDefaultAction(e, ()=>setIsMouseDown(true)),
-            onMouseMove: (e)=>cancelDefaultAction(e, onMouseDownMove),
-            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)=>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 render = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            "data-testid": testId,
-            className: (0, _classnames.default)("input-mask_wrapper", className, {
-                disabled
-            }, {
-                "input-mask_error": isError
-            }, {
-                "input-mask_focus": isFocused
-            }, {
-                "input-mask_blink-error": blinkError
-            }),
-            onClick: onWrapperClick,
-            onBlur: onBlur,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: `
+      onClick: e => onCharClick(e, i),
+      onFocus: function () {
+        // if (isUseAutoSelect) inputRef?.current?.select();
+        if (onFocus) onFocus(...arguments);
+      },
+      onBlur: onBlur,
+      onKeyPress: cancelDefaultAction,
+      onKeyDown: e => onKeyDown(e, i),
+      onChange: cancelDefaultAction,
+      contentEditable: !isSelecting,
+      inputMode: (0, _functions.isDigitMaskChar)(i !== innerValue.length - 1 ? maskChar : prevChar?.maskChar) ? "numeric" : "text",
+      suppressContentEditableWarning: true,
+      onPaste: e => onPaste(e, i),
+      onCopy: e => onCopy(e, i),
+      onCut: e => onCut(e, i),
+      ref: ref,
+      onDoubleClick: e => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsSelecting(true);
+        setTimeout(() => selectAllText(e, i), 50);
+      },
+      onMouseDown: e => cancelDefaultAction(e, () => setIsMouseDown(true)),
+      onMouseMove: e => cancelDefaultAction(e, onMouseDownMove)
+    }, !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) => 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 render = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": testId,
+      className: (0, _classnames.default)("input-mask_wrapper", className, {
+        disabled
+      }, {
+        "input-mask_error": isError
+      }, {
+        "input-mask_focus": isFocused
+      }, {
+        "input-mask_blink-error": blinkError
+      }),
+      onClick: onWrapperClick,
+      onBlur: onBlur
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `
             input-mask
             ${isError ? "input-mask_error" : ""}
             ${isFocused ? "input-mask_focus" : ""}
             ${blinkError ? "input-mask_blink-error" : ""}
           `,
-                    onMouseDown: (e)=>cancelDefaultAction(e, ()=>setIsMouseDown(true)),
-                    onMouseMove: (e)=>cancelDefaultAction(e, onMouseDownMove),
-                    // onMouseUp={cancelDefaultAction}
-                    onClick: onWrapperClick,
-                    onBlur: onBlur,
-                    children: [
-                        showHint && isHintLeft && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "input-mask_hint input-mask_hint--left",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
-                                hint: hintText,
-                                className: hintClassName,
-                                side: hintPosition
-                            })
-                        }),
-                        isIconLeft && showIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "input-mask_icon input-mask_icon--left",
-                            children: icon
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "input-mask_value",
-                            ref: inputRef,
-                            onKeyUp: cancelDefaultAction,
-                            onKeyDown: (e)=>cancelDefaultAction(e, onKeyDown),
-                            onKeyPress: cancelDefaultAction,
-                            onBlur: onBlur,
-                            onClick: onWrapperClick,
-                            children: renderInputValue()
-                        }),
-                        isClearable && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "input-mask_clear",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
-                                onClick: onClearClick
-                            })
-                        }),
-                        isIconRight && showIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "input-mask_icon input-mask_icon--right",
-                            children: icon
-                        }),
-                        showHint && isHintRight && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "input-mask_hint input-mask_hint--right",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
-                                hint: hintText,
-                                className: hintClassName,
-                                side: hintPosition
-                            })
-                        })
-                    ]
-                }),
-                showErrors && errorMessage && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "input-mask_error-text",
-                    children: errorMessage
-                })
-            ]
-        });
-    };
-    return render();
-}
+      onMouseDown: e => cancelDefaultAction(e, () => setIsMouseDown(true)),
+      onMouseMove: e => cancelDefaultAction(e, onMouseDownMove)
+      // onMouseUp={cancelDefaultAction}
+      ,
+      onClick: onWrapperClick,
+      onBlur: onBlur
+    }, showHint && isHintLeft && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_hint input-mask_hint--left"
+    }, /*#__PURE__*/_react.default.createElement(_Hint.default, {
+      hint: hintText,
+      className: hintClassName,
+      side: hintPosition
+    })), isIconLeft && showIcon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_icon input-mask_icon--left"
+    }, icon), /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_value",
+      ref: inputRef,
+      onKeyUp: cancelDefaultAction,
+      onKeyDown: e => cancelDefaultAction(e, onKeyDown),
+      onKeyPress: cancelDefaultAction,
+      onBlur: onBlur,
+      onClick: onWrapperClick
+    }, renderInputValue()), isClearable && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_clear"
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+      onClick: onClearClick
+    })), isIconRight && showIcon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_icon input-mask_icon--right"
+    }, icon), showHint && isHintRight && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_hint input-mask_hint--right"
+    }, /*#__PURE__*/_react.default.createElement(_Hint.default, {
+      hint: hintText,
+      className: hintClassName,
+      side: hintPosition
+    }))), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_error-text"
+    }, errorMessage));
+  };
+  return render();
+}