intelicoreact 1.1.50 → 1.1.53

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

@@ -0,0 +1,834 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InputMask3;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _DynamicIcon = _interopRequireDefault(require("../../UI/DynamicIcon/DynamicIcon"));
+
+var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
+
+var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
+
+var _index = require("../../../Constants/index.constants");
+
+var _config = require("./config");
+
+var _functions = require("./functions");
+
+var _utils = require("../../../Functions/utils");
+
+require("./InputMask3.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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function InputMask3() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$autocomplete = _ref.autocomplete,
+      autocomplete = _ref$autocomplete === void 0 ? 'off' : _ref$autocomplete,
+      maskPattern = _ref.maskPattern,
+      maskPatternPlaceholder = _ref.maskPatternPlaceholder,
+      maskPlaceholder = _ref.maskPlaceholder,
+      maskDigitPlaceholder = _ref.maskDigitPlaceholder,
+      maskLetterPlaceholder = _ref.maskLetterPlaceholder,
+      usePatternPlaceholder = _ref.usePatternPlaceholder,
+      _ref$maxEditableIndex = _ref.maxEditableIndex,
+      maxEditableIndex = _ref$maxEditableIndex === void 0 ? -1 : _ref$maxEditableIndex,
+      _ref$isFocusedDefault = _ref.isFocusedDefault,
+      isFocusedDefault = _ref$isFocusedDefault === void 0 ? false : _ref$isFocusedDefault,
+      isClearable = _ref.isClearable,
+      isCaseSensitive = _ref.isCaseSensitive,
+      adaptTextCase = _ref.adaptTextCase,
+      _ref$isUseAutoSelect = _ref.isUseAutoSelect,
+      isUseAutoSelect = _ref$isUseAutoSelect === void 0 ? true : _ref$isUseAutoSelect,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$hiddenChar = _ref.hiddenChar,
+      hiddenChar = _ref$hiddenChar === void 0 ? '*' : _ref$hiddenChar,
+      _ref$withHiddenMode = _ref.withHiddenMode,
+      withHiddenMode = _ref$withHiddenMode === void 0 ? false : _ref$withHiddenMode,
+      icon = _ref.icon,
+      showIcon = _ref.showIcon,
+      isIconLeft = _ref.isIconLeft,
+      isIconRight = _ref.isIconRight,
+      iconDynamicKey = _ref.iconDynamicKey,
+      _ref$iconDynamicProps = _ref.iconDynamicProps,
+      iconDynamicProps = _ref$iconDynamicProps === void 0 ? {} : _ref$iconDynamicProps,
+      value = _ref.value,
+      _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$showErrors = _ref.showErrors,
+      showErrors = _ref$showErrors === void 0 ? false : _ref$showErrors,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$errors = _ref.errors,
+      customErrors = _ref$errors === void 0 ? _config.DEFAULT_ERRORS : _ref$errors,
+      _ref$error = _ref.error,
+      customError = _ref$error === void 0 ? '' : _ref$error,
+      _ref$onChange = _ref.onChange,
+      onChangeProp = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _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$onKeyDown = _ref.onKeyDown,
+      onKeyDownProp = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
+      _ref$onFilled = _ref.onFilled,
+      onFilledProp = _ref$onFilled === void 0 ? function () {} : _ref$onFilled,
+      _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,
+      _ref$hideMaskOnBlur = _ref.hideMaskOnBlur,
+      hideMaskOnBlur = _ref$hideMaskOnBlur === void 0 ? true : _ref$hideMaskOnBlur,
+      _ref$returnMaskedValu = _ref.returnMaskedValue,
+      returnMaskedValue = _ref$returnMaskedValu === void 0 ? false : _ref$returnMaskedValu,
+      name = _ref.name,
+      fieldKey = _ref.fieldKey,
+      id = _ref.id,
+      disabled = _ref.disabled,
+      testId = _ref.testId;
+
+  var errors = _objectSpread(_objectSpread({}, _config.DEFAULT_ERRORS), customErrors);
+
+  if (maxEditableIndex === -1) maxEditableIndex = maskPattern.length;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMaskRendered = _useState2[0],
+      setMaskRendered = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isFocused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isInitValue = _useState6[0],
+      setIsInitValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      selectedLength = _useState8[0],
+      setSelectedLength = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isValueHidden = _useState10[0],
+      setIsValueHidden = _useState10[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  var keyDownRef = (0, _react.useRef)(null);
+
+  var setKeyDown = function setKeyDown(keyCode) {
+    return keyDownRef.current = keyCode;
+  };
+
+  var getKeyDown = function getKeyDown() {
+    return keyDownRef.current;
+  };
+
+  var DynamicIconComponent = iconDynamicKey && !icon ? /*#__PURE__*/_react.default.createElement(_DynamicIcon.default, (0, _extends2.default)({
+    iconKey: iconDynamicKey
+  }, iconDynamicProps)) : null;
+
+  var setCaret = function setCaret(caret) {
+    if (caret < 0) caret = 0;
+    var input = inputRef.current;
+    if (input) setTimeout(function () {
+      return input.setSelectionRange(caret, caret);
+    }, 0);
+  }; // ERRORS MANAGEMENT FUNCTIONS | START //
+
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      isError = _useState12[0],
+      setError = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      blinkError = _useState14[0],
+      setBlinkError = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(errors.default),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      errorMessage = _useState16[0],
+      setErrorMessage = _useState16[1];
+
+  var clearErrorMessage = function clearErrorMessage() {
+    return setErrorMessage(errors.default);
+  }; // ERRORS MANAGEMENT FUNCTIONS | END //
+  // INNER VALUE MANAGEMENT FUNCTIONS | START //
+
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      innerValue = _useState18[0],
+      setInnerValue = _useState18[1];
+
+  var prevValueRef = (0, _react.useRef)([]);
+
+  var addInnerValueChar = function addInnerValueChar(_ref2) {
+    var char = _ref2.char,
+        _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);
+      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;
+
+    var i = arguments.length > 1 ? arguments[1] : undefined;
+    setInnerValue(function (state) {
+      if (!state[i]) return state;
+      var stateCopy = (0, _toConsumableArray2.default)(state);
+      if (!stateCopy[i].isSpecialSymbol && char !== null) stateCopy[i].char = char;
+      return stateCopy;
+    });
+  };
+
+  var resetInnerValue = function resetInnerValue() {
+    setInnerValue(function (innerValue) {
+      return innerValue.map(function (item) {
+        if (!item.isSpecialSymbol && item.char !== null) item.char = '';
+        return item;
+      });
+    });
+  };
+
+  var setValue = function setValue(value) {
+    var _maskPattern;
+
+    var disableErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    value = value === null || value === undefined ? '' : value.toString();
+    resetInnerValue();
+    var staticLength = maskPattern.length - maxEditableIndex;
+    if (value.length > maxEditableIndex) value = value.slice(0, value.length - staticLength);else if (maxEditableIndex !== ((_maskPattern = maskPattern) === null || _maskPattern === void 0 ? void 0 : _maskPattern.length) - 1) value = value.slice(0, maxEditableIndex);
+    var valueCharIndex = 0;
+    setInnerValue(function (innerValue) {
+      var newValue = innerValue.map(function (item, i) {
+        var _maskPattern2;
+
+        var isSpecialSymbol = item.isSpecialSymbol;
+        if (isSpecialSymbol) return item;
+        var char = value[valueCharIndex];
+        var whileLimit = ((_maskPattern2 = maskPattern) === null || _maskPattern2 === void 0 ? void 0 : _maskPattern2.length) || 0;
+
+        while (whileLimit && (isSpecialSymbolChar({
+          char: value[valueCharIndex]
+        }) || !isValidChar({
+          char: char,
+          i: i,
+          disableErrors: true
+        }))) {
+          whileLimit--;
+          char = value[++valueCharIndex];
+        } // If Valid
+
+
+        if (isValidChar({
+          char: char,
+          i: i,
+          disableErrors: disableErrors
+        })) {
+          item.char = char;
+        }
+
+        ++valueCharIndex;
+        return item;
+      });
+      return newValue;
+    });
+  }; // INNER VALUE MANAGEMENT FUNCTIONS | END //
+  // CHECKERS | START //
+
+
+  var isValidChar = function isValidChar(_ref4) {
+    var key = _ref4.char,
+        i = _ref4.i,
+        _ref4$disableErrors = _ref4.disableErrors,
+        disableErrors = _ref4$disableErrors === void 0 ? false : _ref4$disableErrors;
+    var 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;
+  };
+
+  var isSpecialSymbolMaskChar = function isSpecialSymbolMaskChar(_ref5) {
+    var char = _ref5.char;
+    return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
+  };
+
+  var isSpecialSymbolChar = function isSpecialSymbolChar(_ref6) {
+    var char = _ref6.char;
+    return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
+  };
+
+  var isSpecialSymbol = function isSpecialSymbol(i) {
+    var _getCharByIndex;
+
+    return (_getCharByIndex = getCharByIndex(i)) === null || _getCharByIndex === void 0 ? void 0 : _getCharByIndex.isSpecialSymbol;
+  }; // CHECKERS | END //
+  // GETTERS | START //
+
+
+  var getCharObj = function getCharObj(char) {
+    var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var isSpecialSymbol = isSpecialSymbolChar({
+      char: char
+    });
+    var isSpecialSymbolMask = isSpecialSymbolMaskChar({
+      char: char
+    });
+    if (char === ' ') char = _config.SPACE_CHAR;
+    return _objectSpread({
+      char: isSpecialSymbolMask ? char : '',
+      maskChar: char,
+      isSpecialSymbol: isSpecialSymbolMask,
+      isCharSymbol: !isSpecialSymbol && char !== '' && isSpecialSymbolMask,
+      ref: /*#__PURE__*/(0, _react.createRef)()
+    }, data);
+  };
+
+  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 getPlaceholderCharByIndex = function getPlaceholderCharByIndex(i) {
+    var _getCharByIndex2 = getCharByIndex(i),
+        maskChar = _getCharByIndex2.maskChar;
+
+    if (usePatternPlaceholder) {
+      return maskPatternPlaceholder[i] || maskPlaceholder;
+    }
+
+    if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
+    if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
+    return maskPlaceholder;
+  };
+
+  var getClearInnerValueAsString = function getClearInnerValueAsString() {
+    var _getInputValue, _getInputValue$split;
+
+    var symbolsInfo = innerValue === null || innerValue === void 0 ? void 0 : innerValue.map(function (_ref7) {
+      var isSpecialSymbol = _ref7.isSpecialSymbol,
+          isCharSymbol = _ref7.isCharSymbol;
+      return {
+        isSpecialSymbol: isSpecialSymbol,
+        isCharSymbol: isCharSymbol
+      };
+    });
+    var clearValue = (_getInputValue = getInputValue({
+      noLastTyppedCharIndexCheck: true
+    })) === null || _getInputValue === void 0 ? void 0 : (_getInputValue$split = _getInputValue.split('')) === null || _getInputValue$split === void 0 ? void 0 : _getInputValue$split.reduce(function (resultStr, symbol, i) {
+      if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol) resultStr += symbol;
+      return resultStr;
+    }, '');
+    return clearValue;
+  };
+
+  var getInputValue = function getInputValue() {
+    var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        noLastTyppedCharIndexCheck = _ref8.noLastTyppedCharIndexCheck,
+        _ref8$noHide = _ref8.noHide,
+        noHide = _ref8$noHide === void 0 ? false : _ref8$noHide;
+
+    var isValid = true;
+    var lastTyppedCharIndex = innerValue.reduce(function (result, _ref9, i) {
+      var char = _ref9.char,
+          isSpecialSymbol = _ref9.isSpecialSymbol;
+      return char !== '' && !isSpecialSymbol ? i : result;
+    }, 0);
+    var value = innerValue.reduce(function (result, _ref10, i) {
+      var char = _ref10.char,
+          isSpecialSymbol = _ref10.isSpecialSymbol;
+
+      if (char !== '' && isValid && (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)) {
+        if (isValueHidden && !isSpecialSymbol && !noHide) {
+          result += hiddenChar;
+        } else {
+          result += char;
+        }
+      } else {
+        isValid = false;
+      }
+
+      return result;
+    }, '');
+    return value;
+  };
+
+  var inputValue = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]); // GETTERS | END //
+  /// --- Event Handlers ---///
+  // GENERAL EVENT HANDLERS | START //
+
+  var onVisibleChange = function onVisibleChange(e) {
+    clearErrorMessage();
+    var _e$target = e.target,
+        value = _e$target.value,
+        caretPos = _e$target.selectionStart,
+        char = e.nativeEvent.data;
+
+    if (caretPos > maxEditableIndex) {
+      (0, _utils.disableDefaultBehavior)();
+      setCaret(maxEditableIndex);
+      setBlinkError(true);
+      return;
+    }
+
+    setValue(value);
+    var caretOffset = value.length - caretPos; // Correct Caret Position
+
+    if (!value.lastIndexEqualsTo(caretPos - 1)) {
+      if (value.longerThan(inputValue)) {
+        if (!isValidChar({
+          char: char,
+          i: caretPos - 1
+        })) {
+          (0, _utils.disableDefaultBehavior)(e);
+          setCaret(caretPos - 1);
+        } else {
+          var newCaretPos = value.length - caretOffset;
+          setCaret(isSpecialSymbol(newCaretPos) ? newCaretPos + 1 : newCaretPos);
+        }
+      } else if (inputValue.longerThan(value)) {
+        switch (getKeyDown()) {
+          case _index.KEYBOARD_KEY_CODES.Backspace:
+            if (isSpecialSymbol(caretPos)) {
+              (0, _utils.disableDefaultBehavior)(e);
+            }
+
+            setCaret(caretPos);
+            break;
+
+          case _index.KEYBOARD_KEY_CODES.Delete:
+            if (isSpecialSymbol(caretPos)) {
+              (0, _utils.disableDefaultBehavior)(e);
+              setCaret(caretPos + 1);
+            } else {
+              setCaret(caretPos);
+            }
+
+            break;
+
+          default:
+            if (selectedLength > 0) {
+              setCaret(caretPos);
+            }
+
+        }
+      }
+    }
+    /* Checking if the character is a special symbol and if it is not, it is checking if the character
+    is valid or not. If it is not valid, it will blink the error. */
+
+
+    if (blinkErrors) {
+      setTimeout(function () {
+        if ((value.longerThan(inputValue) && !isSpecialSymbol(caretPos - 1) || inputValue.longerThan(value) && !isSpecialSymbol(caretPos)) && (char && !isValidChar({
+          char: char,
+          i: caretPos - 1
+        }) || inputValue === getInputValue() && getInputValue()[caretPos - 1] !== char)) {
+          (0, _utils.disableDefaultBehavior)(e);
+          setBlinkError(true);
+        }
+      }, 0);
+    }
+  };
+
+  var onHiddenChange = function onHiddenChange(e) {
+    var _maskPattern3, _maskPattern4;
+
+    var SSN = getInputValue({
+      noHide: true
+    });
+    var _e$target2 = e.target,
+        value = _e$target2.value,
+        caretPos = _e$target2.selectionStart,
+        char = e.nativeEvent.data;
+
+    if (value.replace(/-/g, '').length < SSN.replace(/-/g, '').length) {
+      var last = SSN.length - 1;
+      setValue(SSN.slice(0, last));
+      return;
+    }
+
+    var numValue = value.replace(/\D/g, '');
+    var newSSN = '';
+    var staticLength = maxEditableIndex !== -1 ? maxEditableIndex : (_maskPattern3 = maskPattern) === null || _maskPattern3 === void 0 ? void 0 : _maskPattern3.length;
+
+    if (SSN.length > staticLength) {
+      newSSN = SSN.slice(0, staticLength) + numValue;
+    } else {
+      newSSN = SSN + numValue;
+    }
+
+    if (newSSN.length > ((_maskPattern4 = maskPattern) === null || _maskPattern4 === void 0 ? void 0 : _maskPattern4.length)) {
+      return;
+    }
+
+    setValue(newSSN);
+  };
+
+  var onChange = isValueHidden ? onHiddenChange : onVisibleChange;
+
+  var onKeyDown = function onKeyDown(e) {
+    onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+    var keyCode = e.keyCode;
+    setKeyDown(keyCode);
+  };
+
+  var onKeyUp = function onKeyUp(e) {
+    setKeyDown(null); // On Filled Callback
+
+    if (getInputValue({
+      noLastTyppedCharIndexCheck: true
+    }).length === maskPattern.length && e.target.selectionStart >= maxEditableIndex) onFilledProp();
+  };
+
+  var onClearClick = function onClearClick(e) {
+    var _inputRef$current;
+
+    e.stopPropagation();
+    e.preventDefault();
+    resetInnerValue();
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    setCaret(0);
+    clearErrorMessage();
+  };
+
+  var onHiddenToggle = function onHiddenToggle(e) {
+    var _inputRef$current2;
+
+    setIsValueHidden(function (v) {
+      return !v;
+    });
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+  };
+
+  var _onFocus = function onFocus(e) {
+    setFocused(true);
+    onFocusProp();
+  };
+
+  var onBlur = function onBlur() {
+    setFocused(false);
+    onBlurProp();
+  };
+
+  var onClick = function onClick(e) {
+    var cursor = e.target.selectionStart;
+    if (cursor >= maxEditableIndex) setCaret(maxEditableIndex);
+  };
+
+  var onSelect = function onSelect(e) {
+    var _e$target3, _ref12;
+
+    var _ref11 = (_e$target3 = e.target) !== null && _e$target3 !== void 0 ? _e$target3 : {},
+        selectionStart = _ref11.selectionStart,
+        selectionEnd = _ref11.selectionEnd;
+
+    setSelectedLength((_ref12 = selectionEnd - selectionStart) !== null && _ref12 !== void 0 ? _ref12 : 0);
+    if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
+  }; // GENERAL EVENT HANDLERS | END //
+  /// --- OBSERVERS ---///
+  // Render Mask
+
+
+  (0, _react.useEffect)(function () {
+    setIsInitValue(false);
+    setInnerValue([]);
+    setMaskRendered(false);
+    if (!maskPattern) maskPattern = '';
+    maskPattern.split('').map(function (char, id) {
+      addInnerValueChar({
+        char: char,
+        data: {
+          id: id,
+          isReadOnly: id === maskPattern.length
+        }
+      });
+      if (value !== null && value !== void 0 && value[id]) updateInnerValueChar({
+        char: value[id]
+      }, id);
+    });
+    setMaskRendered(true);
+  }, [maskPattern]);
+  (0, _react.useEffect)(function () {
+    if (isMaskRendered && !isInitValue || isInitValue && ![getInputValue(), getClearInnerValueAsString()].includes(value) && value !== '') {
+      setValue(value);
+      setIsInitValue(true);
+    }
+  }, [isMaskRendered, value, isInitValue]); // OnChange Observer
+
+  (0, _react.useEffect)(function () {
+    if (isMaskRendered && isInitValue) {
+      var _prevValueRef$current, _prevValueRef$current2;
+
+      setError(false);
+      var values = [getClearInnerValueAsString(), getInputValue({
+        noLastTyppedCharIndexCheck: true
+      })];
+      if (returnMaskedValue) values.reverse();
+
+      if ((prevValueRef === null || prevValueRef === void 0 ? void 0 : (_prevValueRef$current = prevValueRef.current) === null || _prevValueRef$current === void 0 ? void 0 : _prevValueRef$current[0]) !== values[0] && (prevValueRef === null || prevValueRef === void 0 ? void 0 : (_prevValueRef$current2 = prevValueRef.current) === null || _prevValueRef$current2 === void 0 ? void 0 : _prevValueRef$current2[1]) !== values[1] && value !== values[0] && value !== values[1]) {
+        prevValueRef.current = values;
+        onChangeProp.apply(void 0, values);
+      }
+    }
+  }, [innerValue, isMaskRendered, isInitValue, value]); // Blink Error
+
+  (0, _react.useEffect)(function () {
+    if (blinkError) {
+      setTimeout(function () {
+        setBlinkError(false);
+      }, blinkDuration);
+    }
+  }, [blinkError]);
+  (0, _react.useEffect)(function () {
+    setError(customError !== '');
+    setErrorMessage(customError === '' ? errors.default : customError);
+  }, [customError, isError]); /// --- 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;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      tabIndex: -1,
+      key: i,
+      "attr-char-id": i,
+      className: (0, _classnames.default)('input-mask_value_item', className, {
+        'input-mask_value_item--digit': (0, _functions.isDigitMaskChar)(obj.maskChar),
+        'input-mask_value_item--letter': (0, _functions.isLetterMaskChar)(obj.maskChar),
+        'input-mask_value_item--spec': obj.isSpecialSymbol,
+        'input-mask_value_item--hidden': i < inputValue.length
+      }),
+      ref: ref
+    }, !isFocused && hideMaskOnBlur && getClearInnerValueAsString().length === 0 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
+  };
+
+  var renderMaskChar = function renderMaskChar(obj, i) {
+    return renderChar(obj, i, 'input-mask_value_item_mask-char');
+  };
+
+  var renderValueChar = function renderValueChar(obj, i) {
+    return isValueHidden ? renderChar(_objectSpread(_objectSpread({}, obj), {}, {
+      char: hiddenChar
+    }), i, 'input-mask_value_item_value-hidden-char') : 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,
+          isSpecialSymbol = obj.isSpecialSymbol;
+
+      if (isSpecialSymbol) {
+        return renderSpecialChar(obj, i);
+      }
+
+      var isMaskItem = function () {
+        return char === '';
+      }();
+
+      return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
+    });
+  };
+
+  var renderMask = function renderMask() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_value"
+    }, renderInputValue());
+  };
+
+  var renderInput = function renderInput() {
+    return /*#__PURE__*/_react.default.createElement("input", {
+      name: name || fieldKey || id || testId || '',
+      "data-testid": testId,
+      className: "input-mask_input ".concat(className),
+      ref: inputRef,
+      value: inputValue,
+      onChange: onChange,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onBlur: onBlur,
+      onClick: onClick,
+      autoComplete: autocomplete,
+      onFocus: function onFocus() {
+        if (isUseAutoSelect) inputRef.current.select();
+        if (_onFocus) _onFocus.apply(void 0, arguments);
+      },
+      onDragStart: function onDragStart(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onDragEnd: function onDragEnd(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onSelect: onSelect
+    });
+  };
+
+  var renderHideToggler = function renderHideToggler() {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "formatted-raw-ssn-eye-holder",
+      onClick: onHiddenToggle,
+      "data-testid": "formattedRawSNN--eye--key-".concat(testId, "--container")
+    }, ' ', isValueHidden ? /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
+      strokeWidth: 1,
+      className: "password-icon"
+    }) : /*#__PURE__*/_react.default.createElement(_reactFeather.EyeOff, {
+      strokeWidth: 1,
+      className: "password-icon"
+    }));
+  };
+
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_clear"
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+      onClick: onClearClick
+    }));
+  };
+
+  var renderHint = function renderHint() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_hint input-mask_hint--".concat(hintPosition)
+    }, /*#__PURE__*/_react.default.createElement(_Hint.default, {
+      hint: hintText,
+      className: hintClassName,
+      side: hintPosition
+    }));
+  };
+
+  var renderIcon = function renderIcon() {
+    var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'left';
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_icon input-mask_icon--".concat(position)
+    }, DynamicIconComponent !== null && DynamicIconComponent !== void 0 ? DynamicIconComponent : icon);
+  };
+
+  var render = function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('input-mask3_wrapper', className, {
+        'input-mask_error': isError
+      }, {
+        'input-mask_focus': isFocused
+      }, {
+        'input-mask_blink-error': blinkError
+      }, {
+        disabled: disabled || isLoading
+      })
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "\n            input-mask\n            ".concat(isError ? 'input-mask_error' : '', "\n            ").concat(isFocused ? 'input-mask_focus' : '', "\n            ").concat(blinkError ? 'input-mask_blink-error' : '', "\n          ")
+    }, showHint && isHintLeft && renderHint(), isIconLeft && showIcon && renderIcon('left'), renderMask(), renderInput(), withHiddenMode && renderHideToggler(), isClearable && renderClearButton(), isIconRight && showIcon && renderIcon('right'), showHint && isHintRight && renderHint()), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input-mask_error-text"
+    }, errorMessage), isLoading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      size: "small"
+    }));
+  };
+
+  return render();
+}

package/dist/Atomic/FormElements/InputMask3/InputMask3.scss

@@ -0,0 +1,182 @@
+.unselectable {
+  -webkit-touch-callout: none; /* iOS Safari */ /* Chrome/Safari/Opera */ /* Konqueror */ /* Firefox */ /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
+.input-mask3_wrapper {
+  position: relative;
+  display: block;
+  // width: fit-content;
+  width: 100%;
+
+  outline: none;
+
+  & .input-mask {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px;
+
+    cursor: text;
+
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    background-color: #FFF;
+
+    &_input {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 8px;
+
+      color: #333;
+      border: none;
+      outline: none;
+      background: rgb(0 0 0 / 0%);
+
+      font-size: 16px;
+    }
+
+    &_focus {
+      border-color: #6B81DD;
+      filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
+    }
+
+    &_error,
+    &_blink-error {
+      border-color: #DD6B6B;
+      filter: drop-shadow(0 0 4px rgb(255 93 93 / 50%));
+    }
+
+    &_icon {
+      position: relative;
+
+      width: 16px;
+      height: 16px;
+
+      &--left {
+        margin-right: 4px;
+      }
+
+      &--right {
+        right: 0;
+
+        margin-left: 4px;
+      }
+    }
+
+    &_hint {
+      display: flex;
+      align-items: center;
+
+      text-align: center;
+
+      & .hint__text_right {
+        top: 50%;
+        left: 24px;
+
+        transform: translateY(-50%);
+
+        &::before {
+          top: calc(50% - 4px);
+          left: -3px;
+        }
+      }
+
+      & .hint__text_left {
+        top: 50%;
+        right: 32px;
+
+        transform: translateY(-50%);
+
+        &::before {
+          top: calc(50% - 4px);
+          right: -3px;
+        }
+      }
+
+      &--left {
+        margin-right: 4px;
+      }
+
+      &--right {
+        right: 0;
+
+        margin-left: 4px;
+      }
+    }
+
+    &_clear {
+      position: relative;
+      z-index: 9;
+
+      width: 16px;
+      height: 16px;
+
+      cursor: pointer !important;
+    }
+
+    &_value {
+      position: relative;
+
+      display: flex;
+      align-items: center;
+
+      width: 100%;
+
+      outline: none;
+
+      &_item {
+        display: inline-flex;
+
+        width: unset;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+
+        border: none;
+        outline: none;
+
+        font-size: 16px;
+
+        &_mask-char {
+          color: #9C9C9C;
+        }
+
+        &_value-char {
+          opacity: 0;
+        }
+
+        &_spec-char {
+          text-align: center;
+        }
+
+        &--hidden {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  .input-mask_error-text {
+    margin-top: 8px;
+
+    color: rgb(211 82 82);
+
+    font-size: 12px;
+  }
+
+  .lds-ring.lds-ring_small {
+    top: calc(50% - 18px);
+  }
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+
+module.exports = {
+  UPPERCASE_LETTER_MASK_CHAR: 'L',
+  LOWERCASE_LETTER_MASK_CHAR: 'l',
+  DIGIT_MASK_CHAR: 'D',
+  SPACE_CHAR: "\xA0",
+  ANDROID_CHROME_TEXT_CODE: 229,
+  EXCLUDED_KEYS: ['Tab'],
+  DEFAULT_ERRORS: {
+    onlyLetter: 'Type letter',
+    onlyDigit: 'Type digit',
+    onlyUpperCase: 'Type letter in UpperCase',
+    onlyLowerCase: 'Type letter in LowerCase',
+    default: null
+  }
+};

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.voidFn = exports.selectElementContents = exports.resetSelectionText = exports.isUpperCaseLetter = exports.isLowerCaseLetter = exports.isLetterMaskChar = exports.isLetter = exports.isDigitMaskChar = exports.isDigit = exports.getSelectionText = exports.copyToClipboard = void 0;
+
+var _config = require("./config");
+
+var getSelectionText = function getSelectionText() {
+  var _text;
+
+  var text = '';
+
+  if (window.getSelection) {
+    text = window.getSelection().toString();
+  } else if (document.selection && document.selection.type !== 'Control') {
+    text = document.selection.createRange().text;
+  }
+
+  return (_text = text) === null || _text === void 0 ? void 0 : _text.replace(/\n/g, '');
+};
+
+exports.getSelectionText = getSelectionText;
+
+var resetSelectionText = function resetSelectionText() {
+  if (window.getSelection) {
+    window.getSelection().removeAllRanges();
+  }
+};
+
+exports.resetSelectionText = resetSelectionText;
+
+var copyToClipboard = function copyToClipboard(str) {
+  if (navigator && navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(str); // eslint-disable-next-line prefer-promise-reject-errors
+
+  return Promise.reject('The Clipboard API is not available.');
+};
+
+exports.copyToClipboard = copyToClipboard;
+
+var selectElementContents = function selectElementContents(el) {
+  var startOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var endOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+  var sel = window.getSelection();
+  sel.selectAllChildren(el);
+};
+
+exports.selectElementContents = selectElementContents;
+
+var isLetter = function isLetter(char) {
+  return Boolean((char === null || char === void 0 ? void 0 : char.length) === 1 && (char === null || char === void 0 ? void 0 : char.match(/[a-z]/i)));
+};
+
+exports.isLetter = isLetter;
+
+var isUpperCaseLetter = function isUpperCaseLetter(char) {
+  return isLetter(char) ? char === char.slice().toUpperCase() : false;
+};
+
+exports.isUpperCaseLetter = isUpperCaseLetter;
+
+var isLowerCaseLetter = function isLowerCaseLetter(char) {
+  return isLetter(char) ? char === char.slice().toLowerCase() : false;
+};
+
+exports.isLowerCaseLetter = isLowerCaseLetter;
+
+var isDigit = function isDigit(char) {
+  return Boolean(Number.isInteger(parseInt(char)));
+};
+
+exports.isDigit = isDigit;
+
+var isDigitMaskChar = function isDigitMaskChar(char) {
+  return char === _config.DIGIT_MASK_CHAR;
+};
+
+exports.isDigitMaskChar = isDigitMaskChar;
+
+var isLetterMaskChar = function isLetterMaskChar(char) {
+  return char === _config.UPPERCASE_LETTER_MASK_CHAR || char === _config.LOWERCASE_LETTER_MASK_CHAR;
+};
+
+exports.isLetterMaskChar = isLetterMaskChar;
+
+var voidFn = function voidFn() {
+  console.error('Void Function Called');
+};
+
+exports.voidFn = voidFn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.1.50",
+  "version": "1.1.53",
   "description": "",
   "main": "dist/index.js",
   "files": [