intelicoreact 0.1.34 → 0.1.37

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

@@ -0,0 +1,896 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InputMask;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _index = require("../../../Constants/index.constants");
+
+var _usePrevious = _interopRequireDefault(require("../../../Functions/useFormTools/functions/usePrevious"));
+
+var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
+
+var _functions = require("./functions");
+
+var _InputCarretPosition = require("./InputCarretPosition");
+
+require("./InputMask.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; 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]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var UPPERCASE_LETTER_MASK_CHAR = 'L';
+var LOWERCASE_LETTER_MASK_CHAR = 'l';
+var DIGIT_MASK_CHAR = 'D';
+var SPACE_CHAR = "\xA0";
+var EXCLUDED_KEYS = ["Tab"];
+var DEFAULT_ERRORS = {
+  onlyLetter: 'Type letter',
+  onlyDigit: 'Type digit',
+  onlyUpperCase: 'Type letter in UpperCase',
+  onlyLowerCase: 'Type letter in LowerCase',
+  default: null
+};
+
+function InputMask() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      maskPattern = _ref.maskPattern,
+      maskPatternPlaceholder = _ref.maskPatternPlaceholder,
+      maskPlaceholder = _ref.maskPlaceholder,
+      maskDigitPlaceholder = _ref.maskDigitPlaceholder,
+      maskLetterPlaceholder = _ref.maskLetterPlaceholder,
+      usePatternPlaceholder = _ref.usePatternPlaceholder,
+      _ref$isFocusedDefault = _ref.isFocusedDefault,
+      isFocusedDefault = _ref$isFocusedDefault === void 0 ? false : _ref$isFocusedDefault,
+      isClearable = _ref.isClearable,
+      isCaseSensitive = _ref.isCaseSensitive,
+      adaptTextCase = _ref.adaptTextCase,
+      icon = _ref.icon,
+      showIcon = _ref.showIcon,
+      isIconLeft = _ref.isIconLeft,
+      isIconRight = _ref.isIconRight,
+      value = _ref.value,
+      _ref$onChange = _ref.onChange,
+      onChangeProp = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$blinkErrors = _ref.blinkErrors,
+      blinkErrors = _ref$blinkErrors === void 0 ? true : _ref$blinkErrors,
+      _ref$blinkDuration = _ref.blinkDuration,
+      blinkDuration = _ref$blinkDuration === void 0 ? 100 : _ref$blinkDuration,
+      _ref$showNativeErrors = _ref.showNativeErrors,
+      showNativeErrors = _ref$showNativeErrors === void 0 ? true : _ref$showNativeErrors,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$errors = _ref.errors,
+      customErrors = _ref$errors === void 0 ? DEFAULT_ERRORS : _ref$errors,
+      ref = _ref.ref,
+      _ref$onFocus = _ref.onFocus,
+      onFocusProp = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+      _ref$onBlur = _ref.onBlur,
+      onBlurProp = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      _ref$imitateTypingOnP = _ref.imitateTypingOnPaste,
+      imitateTypingOnPaste = _ref$imitateTypingOnP === void 0 ? true : _ref$imitateTypingOnP,
+      _ref$imitateTypingOnP2 = _ref.imitateTypingOnPasteDelay,
+      imitateTypingOnPasteDelay = _ref$imitateTypingOnP2 === void 0 ? 100 : _ref$imitateTypingOnP2,
+      _ref$showHint = _ref.showHint,
+      showHint = _ref$showHint === void 0 ? false : _ref$showHint,
+      _ref$hintText = _ref.hintText,
+      hintText = _ref$hintText === void 0 ? '' : _ref$hintText,
+      _ref$hintClassName = _ref.hintClassName,
+      hintClassName = _ref$hintClassName === void 0 ? '' : _ref$hintClassName,
+      _ref$isHintRight = _ref.isHintRight,
+      isHintRight = _ref$isHintRight === void 0 ? true : _ref$isHintRight,
+      _ref$isHintLeft = _ref.isHintLeft,
+      isHintLeft = _ref$isHintLeft === void 0 ? false : _ref$isHintLeft,
+      _ref$hintPosition = _ref.hintPosition,
+      hintPosition = _ref$hintPosition === void 0 ? 'right' : _ref$hintPosition;
+
+  var errors = _objectSpread(_objectSpread({}, DEFAULT_ERRORS), customErrors);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMaskRendered = _useState2[0],
+      setMaskRendered = _useState2[1];
+
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isMouseDown = _useState4[0],
+      setIsMouseDown = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isSelecting = _useState6[0],
+      setIsSelecting = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isFocused = _useState8[0],
+      setFocused = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isError = _useState10[0],
+      setError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      blinkError = _useState12[0],
+      setBlinkError = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(errors.default),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      errorMessage = _useState14[0],
+      setErrorMessage = _useState14[1];
+
+  var clearErrorMessage = function clearErrorMessage() {
+    return setErrorMessage(errors.default);
+  };
+
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      focusedItemRef = _useState16[0],
+      setFocusedItemRef = _useState16[1];
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      innerValue = _useState18[0],
+      setInnerValue = _useState18[1];
+
+  var _useState19 = (0, _react.useState)([]),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      selectedText = _useState20[0],
+      setSelectedText = _useState20[1];
+
+  var addInnerValueChar = function addInnerValueChar(_ref2) {
+    var char = _ref2.char,
+        _ref2$i = _ref2.i,
+        i = _ref2$i === void 0 ? null : _ref2$i,
+        _ref2$data = _ref2.data,
+        data = _ref2$data === void 0 ? {} : _ref2$data;
+    setInnerValue(function (state) {
+      var stateCopy = (0, _toConsumableArray2.default)(state);
+      var charObj = getCharObj(char, data);
+
+      if (i !== null) {
+        stateCopy[i] = charObj;
+      } else {
+        stateCopy.push(charObj);
+      }
+
+      return stateCopy;
+    });
+  };
+
+  var updateInnerValueChar = function updateInnerValueChar() {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref3$char = _ref3.char,
+        char = _ref3$char === void 0 ? null : _ref3$char,
+        _ref3$isSelected = _ref3.isSelected,
+        isSelected = _ref3$isSelected === void 0 ? null : _ref3$isSelected;
+
+    var i = arguments.length > 1 ? arguments[1] : undefined;
+    setInnerValue(function (state) {
+      var stateCopy = (0, _toConsumableArray2.default)(state);
+      if (!stateCopy[i].isSpecialSymbol && char !== null) stateCopy[i].char = char;
+      if (isSelected !== null) stateCopy[i].isSelected = isSelected;
+      return stateCopy;
+    });
+  };
+
+  var resetInnerValue = function resetInnerValue() {
+    innerValue.map(function (v, i) {
+      return updateInnerValueChar({
+        char: '',
+        isSelected: false
+      }, i);
+    });
+  };
+
+  var getPlaceholderCharByIndex = function getPlaceholderCharByIndex(i) {
+    var _getCharByIndex = getCharByIndex(i),
+        maskChar = _getCharByIndex.maskChar;
+
+    if (usePatternPlaceholder) {
+      return maskPatternPlaceholder[i] || maskPlaceholder;
+    } else {
+      if (isDigitMaskChar(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
+      if (isLetterMaskChar(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
+      return maskPlaceholder;
+    }
+  };
+
+  var getInnerValueAsString = function getInnerValueAsString() {
+    return innerValue.map(function (_ref4, i) {
+      var char = _ref4.char,
+          maskChar = _ref4.maskChar;
+      return char === '' ? getPlaceholderCharByIndex(i) || maskChar : char;
+    }).join('');
+  };
+
+  var getSelectedValueAsString = function getSelectedValueAsString() {
+    return selectedText;
+  };
+
+  var getClearInnerValueAsString = function getClearInnerValueAsString() {
+    return innerValue.reduce(function (result, _ref5) {
+      var char = _ref5.char,
+          maskChar = _ref5.maskChar,
+          isSpecialSymbol = _ref5.isSpecialSymbol;
+      if (char !== maskChar && char !== '' || isSpecialSymbol) result += char;
+      return result;
+    }, '');
+  };
+
+  var isLetter = function isLetter(char) {
+    return char.length === 1 && char.match(/[a-z]/i);
+  };
+
+  var isUpperCaseLetter = function isUpperCaseLetter(char) {
+    return isLetter(char) ? char === char.slice().toUpperCase() : false;
+  };
+
+  var isLowerCaseLetter = function isLowerCaseLetter(char) {
+    return isLetter(char) ? char === char.slice().toLowerCase() : false;
+  };
+
+  var isDigit = function isDigit(char) {
+    return Number.isInteger(parseInt(char));
+  };
+
+  var isDigitMaskChar = function isDigitMaskChar(char) {
+    return char === DIGIT_MASK_CHAR;
+  };
+
+  var isLetterMaskChar = function isLetterMaskChar(char) {
+    return char === UPPERCASE_LETTER_MASK_CHAR || char === LOWERCASE_LETTER_MASK_CHAR;
+  };
+
+  var isValidChar = function isValidChar(_ref6) {
+    var key = _ref6.char,
+        i = _ref6.i,
+        _ref6$disableErrors = _ref6.disableErrors,
+        disableErrors = _ref6$disableErrors === void 0 ? false : _ref6$disableErrors;
+    var maskChar = getMaskCharByIndex(i);
+
+    switch (maskChar) {
+      case DIGIT_MASK_CHAR:
+        if (!isDigit(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyDigit);
+          return false;
+        }
+
+        break;
+
+      case UPPERCASE_LETTER_MASK_CHAR:
+        if (adaptTextCase) key = key.toUpperCase();
+
+        if (!isLetter(key) && !isCaseSensitive) {
+          if (!disableErrors) setErrorMessage(errors.onlyLetter);
+          return false;
+        }
+
+        if (isCaseSensitive && !isUpperCaseLetter(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
+          return false;
+        }
+
+        break;
+
+      case LOWERCASE_LETTER_MASK_CHAR:
+        if (adaptTextCase) key = key.toLowerCase();
+
+        if (!isLetter(key) && !isCaseSensitive) {
+          if (!disableErrors) setErrorMessage(errors.onlyLetter);
+          return false;
+        }
+
+        if (isCaseSensitive && !isLowerCaseLetter(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
+          return false;
+        }
+
+        break;
+
+      default:
+        return false;
+        break;
+    }
+
+    return true;
+  };
+
+  var getCharObj = function getCharObj(char) {
+    var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var isSpecialSymbol = !(isDigitMaskChar(char) || isLetterMaskChar(char));
+    if (char === ' ') char = SPACE_CHAR;
+    return _objectSpread({
+      char: isSpecialSymbol ? char : '',
+      maskChar: char,
+      isSpecialSymbol: isSpecialSymbol,
+      isSelected: false,
+      ref: /*#__PURE__*/(0, _react.createRef)()
+    }, data);
+  };
+
+  var getFirstChar = function getFirstChar() {
+    return innerValue[0] ? _objectSpread({}, innerValue[0]) : undefined;
+  };
+
+  var getLastChar = function getLastChar() {
+    return innerValue.length ? (0, _toConsumableArray2.default)(innerValue).pop() : undefined;
+  };
+
+  var getCharByIndex = function getCharByIndex(i) {
+    return innerValue[i] ? _objectSpread({}, innerValue[i]) : undefined;
+  };
+
+  var getMaskCharByIndex = function getMaskCharByIndex(i) {
+    var _innerValue$i;
+
+    return ((_innerValue$i = innerValue[i]) === null || _innerValue$i === void 0 ? void 0 : _innerValue$i.maskChar) || undefined;
+  };
+
+  var getSelectStartIndex = function getSelectStartIndex() {
+    var sel = (0, _functions.getSelectionText)();
+    var str = getInnerValueAsString();
+    return str.indexOf(sel);
+  };
+
+  var setFocusOnChar = function setFocusOnChar(i, prevIndex) {
+    var _ref$current;
+
+    var charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    var char = charObj.char,
+        maskChar = charObj.maskChar,
+        ref = charObj.ref,
+        isSpecialSymbol = charObj.isSpecialSymbol;
+    if (!ref) return false;
+
+    if (isSpecialSymbol && i < innerValue.length - 1) {
+      return prevIndex > i ? onArrowLeftDown(null, i) : onArrowRightDown(null, i);
+    }
+
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    setTimeout(function () {
+      return (0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
+    }, 10);
+    setFocusedItemRef(ref);
+
+    _onFocus(null, i);
+
+    return true;
+  };
+
+  var clearValue = function clearValue(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    innerValue.map(function (charObj, i) {
+      updateInnerValueChar({
+        char: ''
+      }, i);
+    });
+    onHomeDown(null, 0);
+  }; ///--- Event Handlers ---///
+
+
+  var onArrowLeftDown = function onArrowLeftDown(e, i) {
+    return setFocusOnChar(i - 1, i);
+  };
+
+  var onArrowRightDown = function onArrowRightDown(e, i) {
+    return setFocusOnChar(i + 1, i);
+  };
+
+  var onBackspaceDown = function onBackspaceDown(e, i) {
+    var prevIndex = i - 1;
+    var charObj = getCharByIndex(prevIndex);
+    if (!charObj) return false;
+    var char = charObj.char,
+        isSpecialSymbol = charObj.isSpecialSymbol;
+    if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
+    setFocusOnChar(prevIndex, i);
+    updateInnerValueChar({
+      char: ''
+    }, prevIndex);
+    return true;
+  };
+
+  var onDeleteDown = function onDeleteDown(e, i) {
+    var nextIndex = i + 1;
+    var charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    var char = charObj.char,
+        isSpecialSymbol = charObj.isSpecialSymbol;
+    if (isSpecialSymbol) return onDeleteDown(e, i + 1);
+    setFocusOnChar(nextIndex, i);
+    updateInnerValueChar({
+      char: ''
+    }, i);
+    return true;
+  };
+
+  var onHomeDown = function onHomeDown(e, i) {
+    return setFocusOnChar(0, -1);
+  };
+
+  var onEndDown = function onEndDown(e, i) {
+    return setFocusOnChar(innerValue.length - 1, 0);
+  };
+
+  var handleServiceKeyDown = function handleServiceKeyDown(e, i) {
+    var key = e.key;
+
+    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;
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(e, i) {
+    var _ref7 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref7$disableErrors = _ref7.disableErrors,
+        disableErrors = _ref7$disableErrors === void 0 ? false : _ref7$disableErrors;
+
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (e) {}
+
+    ;
+    var key = e.key;
+    var charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    var isSpecialSymbol = charObj.isSpecialSymbol,
+        maskChar = charObj.maskChar; //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
+
+    if (maskChar === SPACE_CHAR) return handleKeyDown(e, i + 1);
+    if (isSpecialSymbol && maskChar !== key) return false;
+    if (!isValidChar({
+      char: key,
+      i: i,
+      disableErrors: disableErrors
+    })) return false;
+    updateInnerValueChar({
+      char: key
+    }, i);
+    onArrowRightDown(e, i);
+    return true;
+  };
+
+  var handleKeyCombinations = function handleKeyCombinations(e, i) {
+    var key = e.key,
+        keyCode = e.keyCode;
+
+    switch (keyCode) {
+      //Ctrl + A
+      case 65:
+        selectAllText(e);
+        break;
+    }
+  };
+
+  var _onKeyDown = function onKeyDown(e, i) {
+    var key = e.key,
+        ctrlKey = e.ctrlKey,
+        altKey = e.altKey;
+
+    if (ctrlKey || altKey) {
+      if (!_index.KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
+      return true;
+    }
+
+    var handleResult = _index.KEYBOARD_SERVICE_KEYS.includes(key) ? handleServiceKeyDown(e, i) : handleKeyDown(e, i);
+
+    if (blinkErrors && !handleResult) {
+      setBlinkError(true);
+    }
+  };
+
+  var _onClick = function onClick(e, cb) {
+    var _ref8 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref8$ignoreIsSelecti = _ref8.ignoreIsSelecting,
+        ignoreIsSelecting = _ref8$ignoreIsSelecti === void 0 ? false : _ref8$ignoreIsSelecti;
+
+    e.stopPropagation();
+    e.preventDefault();
+    if (isSelecting && !ignoreIsSelecting) return false;
+    setFocused(true);
+    if (typeof cb === 'function') cb(e);
+  };
+
+  var onCharClick = function onCharClick(e, i) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsSelecting(false);
+    (0, _functions.resetSelectionText)();
+    setTimeout(function () {
+      return _onClick(e, function () {
+        return _onFocus(e, i);
+      }, {
+        ignoreIsSelecting: true
+      });
+    }, 50);
+  };
+
+  var onBlur = function onBlur(e) {
+    if (isFocused) onBlurProp();
+    setFocused(false);
+  };
+
+  var _onFocus = function onFocus(e, i) {
+    var charObj = getCharByIndex(i);
+    if (!charObj) return false;
+    var isSpecialSymbol = charObj.isSpecialSymbol,
+        ref = charObj.ref;
+    (0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
+
+    if (isSpecialSymbol && i < innerValue.length - 1) {
+      _onFocus(e, i + 1);
+
+      return false;
+    }
+
+    if (!isFocused) onFocusProp(e);
+    setFocused(true);
+  };
+
+  var _onPaste = function onPaste(e, i) {
+    setIsSelecting(false);
+    (0, _functions.resetSelectionText)();
+    e.preventDefault();
+    e.stopPropagation();
+    var pastedText = e.clipboardData.getData('Text');
+    if (!pastedText) return false;
+    var replacedIndexes = [];
+    var result = pastedText.split('').filter(function (char) {
+      return isDigit(char) || isLetter(char);
+    }).map(function (pastedChar, offset) {
+      var charIndex = i + offset;
+      var isReplaced = false;
+      var isValid = false;
+
+      var _loop = function _loop(index) {
+        var charObj = getCharByIndex(index);
+        if (!charObj) return "continue";
+        var char = charObj.char,
+            maskChar = charObj.maskChar,
+            isSpecialSymbol = charObj.isSpecialSymbol; // If Char Is Valid
+
+        if (!isValidChar({
+          char: pastedChar,
+          i: index,
+          disableErrors: true
+        })) return "continue"; // If Char Already Replaced
+
+        if (replacedIndexes.includes(index)) return "continue";
+        isReplaced = true;
+        isValid = true;
+        replacedIndexes.push(index);
+
+        if (imitateTypingOnPaste) {
+          setTimeout(function () {
+            updateInnerValueChar({
+              char: pastedChar
+            }, index);
+          }, offset * imitateTypingOnPasteDelay);
+        } else {
+          updateInnerValueChar({
+            char: pastedChar
+          }, index);
+        }
+      };
+
+      for (var index = charIndex; index < innerValue.length && !isReplaced; ++index) {
+        var _ret = _loop(index);
+
+        if (_ret === "continue") continue;
+      }
+
+      return {
+        char: pastedChar,
+        isValid: isValid
+      };
+    });
+
+    var _replacedIndexes$reve = replacedIndexes.reverse(),
+        _replacedIndexes$reve2 = (0, _slicedToArray2.default)(_replacedIndexes$reve, 1),
+        lastCharIndex = _replacedIndexes$reve2[0];
+
+    setFocusOnChar(lastCharIndex + 1, i);
+  };
+
+  var _onCopy = function onCopy(e, i) {
+    (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
+    setIsSelecting(false);
+    setFocusOnChar(i, 0);
+  };
+
+  var _onCut = function onCut(e, i) {
+    (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
+    resetInnerValue();
+    setIsSelecting(false);
+    setFocusOnChar(i, 0);
+  };
+
+  var cancelDefaultAction = function cancelDefaultAction(e, cb) {
+    var key = e.key;
+
+    if (!EXCLUDED_KEYS.includes(key) && _index.KEYBOARD_SERVICE_KEYS.includes(key)) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    if (typeof cb === 'function') cb(e);
+    return false;
+  };
+
+  var selectAllText = function selectAllText(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsSelecting(true);
+    (0, _functions.selectElementContents)(inputRef.current);
+    setSelectedText((0, _functions.getSelectionText)());
+  }; ///--- OBSERVERS ---///
+  //Init InnerValue
+
+
+  (0, _react.useEffect)(function () {
+    if (!maskPattern) maskPattern = '';
+    var maskLength = maskPattern.length;
+    maskPattern.concat(' ').split('').map(function (char, id) {
+      return addInnerValueChar({
+        char: char
+      }, {
+        id: id
+      });
+    });
+
+    if (value !== '' && value.length === maskLength) {
+      value.split('').map(function (char, i) {
+        return updateInnerValueChar({
+          char: char
+        }, i);
+      });
+    }
+
+    setMaskRendered(true);
+  }, []); // Focus Observer
+
+  (0, _react.useEffect)(function () {
+    if (!isFocused) {
+      setFocusedItemRef(null);
+      setSelectedText('');
+    }
+  }, [isFocused]); // Default Focused
+
+  (0, _react.useEffect)(function () {
+    if (isFocusedDefault && isMaskRendered) {
+      setFocusOnChar(0, -1);
+    }
+  }, [isFocusedDefault, isMaskRendered]); // OnChange Observer
+
+  (0, _react.useEffect)(function () {
+    if (!isMaskRendered) return false;
+    clearErrorMessage();
+    onChangeProp(getInnerValueAsString(), getClearInnerValueAsString());
+  }, [innerValue, isMaskRendered]); // Blink Error
+
+  (0, _react.useEffect)(function () {
+    if (!blinkError) return false;
+    setTimeout(function () {
+      setBlinkError(false);
+    }, blinkDuration);
+  }, [blinkError]);
+  (0, _react.useEffect)(function () {
+    if (!isSelecting) {
+      setSelectedText('');
+      (0, _functions.resetSelectionText)();
+    }
+  }, [isSelecting]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mouseup', function () {
+      setIsMouseDown(function (isMouseDown) {
+        if (isMouseDown) {
+          setSelectedText((0, _functions.getSelectionText)());
+          document.addEventListener('click', function () {
+            setIsSelecting(false);
+          }, {
+            once: true
+          });
+        }
+
+        return false;
+      });
+    });
+  }, []); ///--- RENDER ---///
+
+  var renderChar = function renderChar(obj, i) {
+    var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    var char = obj.char,
+        ref = obj.ref,
+        maskChar = obj.maskChar,
+        isSpecialSymbol = obj.isSpecialSymbol,
+        isSelected = obj.isSelected;
+    if (i === innerValue.length - 1 && isSelecting) return /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        width: '1px'
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement("span", {
+      tabIndex: i === 0 ? 1 : -1,
+      key: i,
+      maxLength: 1,
+      "attr-char-id": i,
+      className: "\n          input-mask_value_item\n          ".concat(className, "\n          ").concat(isDigitMaskChar(obj.maskChar) ? 'input-mask_value_item--digit' : '', "\n          ").concat(isLetterMaskChar(obj.maskChar) ? 'input-mask_value_item--letter' : '', "\n          ").concat(obj.isSpecialSymbol ? 'input-mask_value_item--spec' : '', "\n          ").concat(isSelected ? 'input-mask_value_item--selected' : '', "\n        "),
+      onClick: function onClick(e) {
+        onCharClick(e, i);
+      },
+      onFocus: function onFocus(e) {
+        return _onFocus(e, i);
+      },
+      onBlur: onBlur,
+      onKeyPress: cancelDefaultAction,
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e, i);
+      },
+      onChange: function onChange() {},
+      contentEditable: !isSelecting,
+      inputMode: isDigitMaskChar(maskChar) ? 'numeric' : 'text',
+      suppressContentEditableWarning: true,
+      onPaste: function onPaste(e) {
+        return cancelDefaultAction(e, function () {
+          return _onPaste(e, i);
+        });
+      },
+      onCopy: function onCopy(e) {
+        return cancelDefaultAction(e, function () {
+          return _onCopy(e, i);
+        });
+      },
+      onCut: function onCut(e) {
+        return cancelDefaultAction(e, function () {
+          return _onCut(e, i);
+        });
+      },
+      on: true,
+      ref: ref,
+      onDoubleClick: function onDoubleClick(e) {
+        setIsSelecting(true);
+        setTimeout(function () {
+          return selectAllText(e, i);
+        }, 50);
+      }
+    }, isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
+  };
+
+  var renderMaskChar = function renderMaskChar(obj, i) {
+    return renderChar(obj, i, 'input-mask_value_item_mask-char');
+  };
+
+  var renderValueChar = function renderValueChar(obj, i) {
+    return renderChar(obj, i, 'input-mask_value_item_value-char');
+  };
+
+  var renderSpecialChar = function renderSpecialChar(obj, i) {
+    return renderChar(obj, i, 'input-mask_value_item_spec-char');
+  };
+
+  var renderInputValue = function renderInputValue() {
+    return innerValue.map(function (obj, i) {
+      var char = obj.char,
+          maskChar = obj.maskChar,
+          isSpecialSymbol = obj.isSpecialSymbol;
+
+      if (isSpecialSymbol) {
+        return renderSpecialChar(obj, i);
+      }
+
+      var isMaskItem = function () {
+        return char === '';
+      }();
+
+      return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
+    });
+  };
+
+  var render = function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_wrapper ".concat(className),
+      onBlur: onBlur
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask ".concat(isFocused ? 'input-mask_focus' : '', " ").concat(isError ? 'input-mask_error' : '', " ").concat(blinkError ? 'input-mask_blink-error' : ''),
+      onMouseDown: function onMouseDown() {
+        return setIsMouseDown(true);
+      },
+      onMouseMove: function onMouseMove() {
+        return isMouseDown ? setIsSelecting(true) : null;
+      },
+      onClick: function onClick(e) {
+        return cancelDefaultAction(e, function () {
+          return !isMouseDown ? _onClick(e, function () {
+            return onEndDown(e, 0);
+          }) : null;
+        });
+      },
+      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: cancelDefaultAction,
+      onKeyPress: cancelDefaultAction,
+      onBlur: onBlur
+    }, renderInputValue()), isClearable && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_clear"
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+      onClick: clearValue
+    })), 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
+    }))), showNativeErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_error-text"
+    }, errorMessage));
+  };
+
+  return render();
+}