intelicoreact 1.5.33 → 1.5.35

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

@@ -1,1083 +1,969 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+/* 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";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* 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;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return InputMask;
     }
-    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
+});
+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");
+require("./InputMask.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
     };
-  };
-  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, _ref5, index) => {
-      var _ref$current;
-      let {
-        char,
-        ref
-      } = _ref5;
-      if ((ref === null || ref === void 0 ? void 0 : ref.current) === null) return resObj;
-      const {
-        left: charX,
-        width: charWidth
-      } = ref === null || ref === 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;
+}
+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 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 === null || result === void 0 ? void 0 : 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) => {
-    var _ref$current2;
-    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 (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
     }
-    if (maxEditableLen !== -1 && i > maxEditableLen) {
-      setFocusOnChar(maxEditableLen, i);
-      return false;
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-    (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.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 === 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);
-    }
-    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);
+    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];
+            }
+        }
     }
-    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);
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-    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 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;
-        break;
-    }
-  };
-  const handleKeyDown = async function (e, i) {
-    var _getClearInnerValueAs;
-    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(() => {
-          var _charRef$current;
-          //Typed Text
-          if ((charRef === null || charRef === void 0 || (_charRef$current = charRef.current) === null || _charRef$current === void 0 || (_charRef$current = _charRef$current.innerText) === null || _charRef$current === void 0 ? void 0 : _charRef$current.length) >= 2) {
-            var _charRef$current2;
-            const [key, prevChar] = charRef === null || charRef === void 0 || (_charRef$current2 = charRef.current) === null || _charRef$current2 === void 0 ? void 0 : _charRef$current2.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 && ((_getClearInnerValueAs = getClearInnerValueAsString(i)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.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);
+    };
+    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;
         }
-        break;
-      //Ctrl + Z
-      case 90:
-        setRedoValue(getClearInnerValueAsString());
-        resetInnerValue();
-        onPaste({
-          text: undoValue
-        }, 0, true);
-        break;
-    }
-  };
-  const onKeyDown = async function (e) {
-    var _innerValue$0$ref;
-    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 = innerValue[0].ref) === null || _innerValue$0$ref === void 0 ? void 0 : _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) {
-    var _ref13, _window, _e$clipboardData;
-    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 = ((_ref13 = (e === null || e === void 0 ? void 0 : e.clipboardData) || ((_window = window) === null || _window === void 0 ? void 0 : _window.clipboardData)) === null || _ref13 === void 0 ? void 0 : _ref13.getData("text/plain")) || (e === null || e === 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((_ref14, index) => {
-        let {
-          isCharSymbol
-        } = _ref14;
-        return index >= i && !isCharSymbol;
-      }).map((_ref15, index) => {
-        let {
-          char
-        } = _ref15;
-        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(() => {
+    };
+    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);
+        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);
+        }
+        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 {
             updateInnerValueChar({
-              char: pastedChar
-            }, index);
-          }, offset * imitateTypingOnPasteDelay);
+                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);
         } else {
-          updateInnerValueChar({
-            char: pastedChar
-          }, index);
+            updateInnerValueChar({
+                char: ""
+            }, i);
+            setFocusOnChar(nextIndex, i);
         }
-      }
-      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 = () => {
-    var _getClearInnerValueAs2;
-    const selStartInd = getSelectStartIndex();
-    if (selStartInd === null || selStartInd === undefined) return false;
-    const selEndInd = (0, _functions.getSelectionText)().length + selStartInd;
-    (0, _functions.resetSelectionText)();
-    if (maskAsPlaceholder && ((_getClearInnerValueAs2 = getClearInnerValueAsString(selEndInd + 1)) === null || _getClearInnerValueAs2 === void 0 ? void 0 : _getClearInnerValueAs2.length) !== 0) {
-      const text = innerValue.slice().filter((_ref16, index) => {
-        let {
-          isSpecialSymbol,
-          isCharSymbol
-        } = _ref16;
-        if (maxEditableLen !== -1 && index > maxEditableLen - 1) return false;
-        return (index < selStartInd || index >= selEndInd) && !isSpecialSymbol && !isCharSymbol;
-      }).map((_ref17, index) => {
-        let {
-          char
-        } = _ref17;
-        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
+        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;
+        }
+    };
+    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);
         }
-      });
-      if (value !== null && value !== 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((_ref18, i) => {
-          var _maskPattern;
-          let {
-            isSpecialSymbol
-          } = _ref18;
-          if (isSpecialSymbol) return false;
-          let char = value[valueCharIndex];
-          let whileLimit = ((_maskPattern = maskPattern) === null || _maskPattern === void 0 ? void 0 : _maskPattern.length) || 0;
-          while (whileLimit && isSpecialSymbolChar({
-            char: value[valueCharIndex]
-          })) {
-            whileLimit--;
-            char = value[++valueCharIndex];
-          }
-
-          //If Valid
-          if (isValidChar({
+    };
+    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;
+        }
+        const { char, maskChar } = getCharByIndex(i);
+        if (maskAsPlaceholder && !isValidChar({
             char,
             i,
             disableErrors: true
-          })) {
-            updateInnerValueChar({
-              char
-            }, i);
-          }
-          ++valueCharIndex;
+        })) 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
+            };
         });
-      }
-      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)());
+        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;
-      });
-    });
-  }, []);
-  (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: "\n          input-mask_value_item\n          ".concat(className, "\n          ").concat((0, _functions.isDigitMaskChar)(obj.maskChar) ? "input-mask_value_item--digit" : "", "\n          ").concat((0, _functions.isLetterMaskChar)(obj.maskChar) ? "input-mask_value_item--letter" : "", "\n          ").concat(obj.isSpecialSymbol ? "input-mask_value_item--spec" : "", "\n        "),
-      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 === 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();
+    };
+    const selectAllText = (e)=>{
         e.preventDefault();
+        e.stopPropagation();
         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: "\n            input-mask\n            ".concat(isError ? "input-mask_error" : "", "\n            ").concat(isFocused ? "input-mask_focus" : "", "\n            ").concat(blinkError ? "input-mask_blink-error" : "", "\n          "),
-      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();
-}
+        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: `
+          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: `
+            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();
+}