intelicoreact 0.1.56 → 0.1.59

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

@@ -14,26 +14,26 @@ var getCaretPosition = function getCaretPosition(ctrl) {
     range.moveStart('character', -ctrl.value.length);
     var start = range.text.length - rangelen;
     return {
-      'start': start,
-      'end': start + rangelen
+      start: start,
+      end: start + rangelen
     };
   } // IE >=9 and other browsers
-  else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
+  else if (ctrl.selectionStart || ctrl.selectionStart === '0') {
     return {
-      'start': ctrl.selectionStart,
-      'end': ctrl.selectionEnd
+      start: ctrl.selectionStart,
+      end: ctrl.selectionEnd
     };
   } else {
     return {
-      'start': 0,
-      'end': 0
+      start: 0,
+      end: 0
     };
   }
 };
 
 exports.getCaretPosition = getCaretPosition;
 
-var setCaretPosition = function setCaretPosition(ctrl, start, end) {
+var setCaretPosition = function setCaretPosition(ctrl, start) {
   if (!ctrl) return false;
   var range = document.createRange();
   var sel = window.getSelection();

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = InputMask;
 
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,9 +21,7 @@ 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 _indexConstants = require("./../../../Constants/index.constants.js");
 
 var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
 
@@ -31,6 +31,8 @@ var _InputCarretPosition = require("./InputCarretPosition");
 
 require("./InputMask.scss");
 
+var _config = require("./config");
+
 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; }
@@ -39,19 +41,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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,
@@ -83,7 +72,7 @@ function InputMask() {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$errors = _ref.errors,
-      customErrors = _ref$errors === void 0 ? DEFAULT_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 = _ref.ref,
@@ -108,7 +97,7 @@ function InputMask() {
       _ref$hintPosition = _ref.hintPosition,
       hintPosition = _ref$hintPosition === void 0 ? 'right' : _ref$hintPosition;
 
-  var errors = _objectSpread(_objectSpread({}, DEFAULT_ERRORS), customErrors);
+  var errors = _objectSpread(_objectSpread({}, _config.DEFAULT_ERRORS), customErrors);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -124,13 +113,14 @@ function InputMask() {
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isSelecting = _useState6[0],
-      setIsSelecting = _useState6[1];
+      isFocused = _useState6[0],
+      setFocused = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      isFocused = _useState8[0],
-      setFocused = _useState8[1];
+      isInitValue = _useState8[0],
+      setIsInitValue = _useState8[1]; // ERRORS MANAGEMENT FUNCTIONS | START //
+
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
@@ -149,22 +139,69 @@ function InputMask() {
 
   var clearErrorMessage = function clearErrorMessage() {
     return setErrorMessage(errors.default);
-  };
+  }; // ERRORS MANAGEMENT FUNCTIONS | END //
+  // SELECTION MANAGEMENT FUNCTIONS | START //
 
-  var _useState15 = (0, _react.useState)(null),
+
+  var _useState15 = (0, _react.useState)(false),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      focusedItemRef = _useState16[0],
-      setFocusedItemRef = _useState16[1];
+      isSelecting = _useState16[0],
+      setIsSelecting = _useState16[1];
 
-  var _useState17 = (0, _react.useState)([]),
+  var _useState17 = (0, _react.useState)(''),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      innerValue = _useState18[0],
-      setInnerValue = _useState18[1];
+      selectedText = _useState18[0],
+      setSelectedText = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(''),
+  var _useState19 = (0, _react.useState)(null),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      selectedText = _useState20[0],
-      setSelectedText = _useState20[1];
+      selectionStartX = _useState20[0],
+      setSelectionStartX = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(null),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      selectionEndX = _useState22[0],
+      setSelectionEndX = _useState22[1]; // SELECTION MANAGEMENT FUNCTIONS | END //
+  // SERVICE WATCHERS MANAGEMENT FUNCTIONS | START //
+
+
+  var _useState23 = (0, _react.useState)([]),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      serviceWatchers = _useState24[0],
+      setServiceWatchers = _useState24[1];
+
+  var pushServiceWatcher = function pushServiceWatcher(fn) {
+    return setServiceWatchers(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [{
+        fn: fn,
+        dt: Date.now()
+      }]);
+    });
+  };
+
+  var popServiceWatcher = function popServiceWatcher() {
+    var _serviceWatchers = (0, _toArray2.default)(serviceWatchers),
+        poped = _serviceWatchers[0],
+        rest = _serviceWatchers.slice(1);
+
+    setServiceWatchers(rest);
+    return poped.fn || _functions.voidFn;
+  };
+
+  var serviceWatchersWorker = function serviceWatchersWorker() {
+    popServiceWatcher()();
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!serviceWatchers.length) return false;
+    serviceWatchersWorker();
+  }, [serviceWatchers]); // SERVICE WATCHERS MANAGEMENT FUNCTIONS | END //
+  // INNER VALUE MANAGEMENT FUNCTIONS | START //
+
+  var _useState25 = (0, _react.useState)([]),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      innerValue = _useState26[0],
+      setInnerValue = _useState26[1];
 
   var addInnerValueChar = function addInnerValueChar(_ref2) {
     var char = _ref2.char,
@@ -195,6 +232,7 @@ function InputMask() {
 
     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;
       if (isSelected !== null) stateCopy[i].isSelected = isSelected;
@@ -209,96 +247,20 @@ function InputMask() {
         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;
-    }
-  };
+  }; // INNER VALUE MANAGEMENT FUNCTIONS | END //
+  // CHECKERS | START //
 
-  var getInnerValueAsString = function getInnerValueAsString() {
-    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref4$replaceSpace = _ref4.replaceSpace,
-        replaceSpace = _ref4$replaceSpace === void 0 ? false : _ref4$replaceSpace;
-
-    var result = innerValue.slice(0, innerValue.length - 1).map(function (_ref5, i) {
-      var char = _ref5.char,
-          maskChar = _ref5.maskChar;
-      return char === '' ? getPlaceholderCharByIndex(i) || maskChar : char;
-    }).join('');
-    return replaceSpace ? result.replace(/\u00A0/g, ' ') : result;
-  };
-
-  var getSelectedValueAsString = function getSelectedValueAsString() {
-    return selectedText;
-  };
-
-  var getClearInnerValueAsString = function getClearInnerValueAsString() {
-    return innerValue.reduce(function (result, _ref6) {
-      var char = _ref6.char,
-          maskChar = _ref6.maskChar,
-          isSpecialSymbol = _ref6.isSpecialSymbol;
-      if (char !== maskChar && char !== '' || isSpecialSymbol) result += char;
-      return result;
-    }, '');
-  };
 
-  var getLastTypedIndex = function getLastTypedIndex() {
-    return innerValue.reduce(function (lastIndex, _ref7, i) {
-      var char = _ref7.char,
-          isSpecialSymbol = _ref7.isSpecialSymbol;
-      if (!isSpecialSymbol && char !== SPACE_CHAR && char !== '' || lastIndex === null) lastIndex = i;
-      return lastIndex;
-    }, -1) + 1;
-  };
-
-  var isLetter = function isLetter(char) {
-    return (char === null || char === void 0 ? void 0 : char.length) === 1 && (char === null || char === void 0 ? void 0 : 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 isSpecialSymbolMaskChar = function isSpecialSymbolMaskChar(_ref8) {
-    var char = _ref8.char;
-    return !isDigitMaskChar(char) && !isLetterMaskChar(char);
-  };
-
-  var isValidChar = function isValidChar(_ref9) {
-    var key = _ref9.char,
-        i = _ref9.i,
-        _ref9$disableErrors = _ref9.disableErrors,
-        disableErrors = _ref9$disableErrors === void 0 ? false : _ref9$disableErrors;
+  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 DIGIT_MASK_CHAR:
-        if (!isDigit(key)) {
+      case _config.DIGIT_MASK_CHAR:
+        if (!(0, _functions.isDigit)(key)) {
           if (!disableErrors) {
             setErrorMessage(errors.onlyDigit);
           }
@@ -308,30 +270,30 @@ function InputMask() {
 
         break;
 
-      case UPPERCASE_LETTER_MASK_CHAR:
+      case _config.UPPERCASE_LETTER_MASK_CHAR:
         if (adaptTextCase) key = key.toUpperCase();
 
-        if (!isLetter(key) && !isCaseSensitive) {
+        if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
           if (!disableErrors) setErrorMessage(errors.onlyLetter);
           return false;
         }
 
-        if (isCaseSensitive && !isUpperCaseLetter(key)) {
+        if (isCaseSensitive && !(0, _functions.isUpperCaseLetter)(key)) {
           if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
           return false;
         }
 
         break;
 
-      case LOWERCASE_LETTER_MASK_CHAR:
+      case _config.LOWERCASE_LETTER_MASK_CHAR:
         if (adaptTextCase) key = key.toLowerCase();
 
-        if (!isLetter(key) && !isCaseSensitive) {
+        if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
           if (!disableErrors) setErrorMessage(errors.onlyLetter);
           return false;
         }
 
-        if (isCaseSensitive && !isLowerCaseLetter(key)) {
+        if (isCaseSensitive && !(0, _functions.isLowerCaseLetter)(key)) {
           if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
           return false;
         }
@@ -340,23 +302,24 @@ function InputMask() {
 
       default:
         return false;
-        break;
     }
 
     return true;
   };
 
-  var isSpecialSymbolChar = function isSpecialSymbolChar(_ref10) {
-    var char = _ref10.char;
-    return !isDigit(char) && !isLetter(char);
-  };
+  var isSpecialSymbolChar = function isSpecialSymbolChar(_ref5) {
+    var char = _ref5.char;
+    return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
+  }; // CHECKERS | END //
+  // GETTERS | START //
+
 
   var getCharObj = function getCharObj(char) {
     var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var isSpecialSymbol = isSpecialSymbolChar({
       char: char
     });
-    if (char === ' ') char = SPACE_CHAR;
+    if (char === ' ') char = _config.SPACE_CHAR;
     return _objectSpread({
       char: isSpecialSymbol ? char : '',
       maskChar: char,
@@ -366,14 +329,6 @@ function InputMask() {
     }, 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;
   };
@@ -385,19 +340,98 @@ function InputMask() {
   };
 
   var getSelectStartIndex = function getSelectStartIndex() {
-    var sel = (0, _functions.getSelectionText)();
-    var str = getInnerValueAsString();
-    return str.indexOf(sel);
+    if (selectionStartX === selectionEndX) return 0;
+    var minX = selectionStartX < selectionEndX ? selectionStartX : selectionEndX;
+    var maxX = selectionStartX > selectionEndX ? selectionStartX : selectionEndX;
+
+    var _innerValue$reduce = innerValue.reduce(function (resObj, _ref6, index) {
+      var _ref$current;
+
+      var char = _ref6.char,
+          ref = _ref6.ref;
+      if ((ref === null || ref === void 0 ? void 0 : ref.current) === null) return resObj;
+
+      var _ref$current$getBound = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect(),
+          charX = _ref$current$getBound.left,
+          charWidth = _ref$current$getBound.width;
+
+      var charCenterX = charX + charWidth / 2; // If Char X-Coord Out Of Range
+
+      // 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: index,
+        charX: charCenterX
+      };
+      return resObj;
+    }, {
+      index: null,
+      charX: null
+    }),
+        index = _innerValue$reduce.index;
+
+    return index;
   };
 
+  var getPlaceholderCharByIndex = function getPlaceholderCharByIndex(i) {
+    var _getCharByIndex = getCharByIndex(i),
+        maskChar = _getCharByIndex.maskChar;
+
+    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;
+    }
+  };
+
+  var getInnerValueAsString = function getInnerValueAsString() {
+    var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref7$replaceSpace = _ref7.replaceSpace,
+        replaceSpace = _ref7$replaceSpace === void 0 ? false : _ref7$replaceSpace;
+
+    var result = innerValue.slice(0, innerValue.length - 1).map(function (_ref8, i) {
+      var char = _ref8.char,
+          maskChar = _ref8.maskChar;
+      return char === '' ? getPlaceholderCharByIndex(i) || maskChar : char;
+    }).join('');
+    return replaceSpace ? result.replace(/\u00A0/g, ' ') : result;
+  };
+
+  var getClearInnerValueAsString = function getClearInnerValueAsString() {
+    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    return innerValue.filter(function (charObj, i) {
+      return i >= start;
+    }).filter(function (_ref9) {
+      var isSpecialSymbol = _ref9.isSpecialSymbol;
+      return !isSpecialSymbol;
+    }).reduce(function (result, _ref10) {
+      var char = _ref10.char,
+          maskChar = _ref10.maskChar,
+          isSpecialSymbol = _ref10.isSpecialSymbol;
+      if (char !== maskChar && char !== '' || isSpecialSymbol) result += char;
+      return result;
+    }, '');
+  };
+
+  var getLastTypedIndex = function getLastTypedIndex() {
+    return innerValue.reduce(function (lastIndex, _ref11, i) {
+      var char = _ref11.char,
+          isSpecialSymbol = _ref11.isSpecialSymbol;
+      if (!isSpecialSymbol && char !== _config.SPACE_CHAR && char !== '' || lastIndex === null) lastIndex = i;
+      return lastIndex;
+    }, -1) + 1;
+  }; // GETTERS | END //
+  // SETTERS | START //
+
+
   var setFocusOnChar = function setFocusOnChar(i, prevIndex) {
-    var _ref$current;
+    var _ref$current2;
 
     var charObj = getCharByIndex(i);
     if (!charObj) return false;
-    var char = charObj.char,
-        maskChar = charObj.maskChar,
-        ref = charObj.ref,
+    var ref = charObj.ref,
         isSpecialSymbol = charObj.isSpecialSymbol;
     if (!ref) return false;
 
@@ -405,27 +439,14 @@ function InputMask() {
       return prevIndex > i ? onArrowLeftDown(null, i) : onArrowRightDown(null, i);
     }
 
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.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 ---///
+  }; // SETTERS | END //
+  ///--- Event Handlers ---///
+  // SERVICE KEYS HANDLERS | START //
 
 
   var onArrowLeftDown = function onArrowLeftDown(e, i) {
@@ -433,32 +454,18 @@ function InputMask() {
   };
 
   var onArrowRightDown = function onArrowRightDown(e, i) {
-    var key = (e === null || e === void 0 ? void 0 : e.key) || null;
-    var nextIndex = i + 1;
-    if (maskAsPlaceholder && nextIndex > getLastTypedIndex() && key === 'ArrowRight') nextIndex = getLastTypedIndex();
-    setFocusOnChar(nextIndex, i);
+    var key = (e === null || e === void 0 ? void 0 : e.key) || null; // If Current Index Equals LastTyped Index in MaskAsPlaceholder Mode
+
+    if (maskAsPlaceholder && i === getLastTypedIndex() && key === 'ArrowRight') return false;
+    return setFocusOnChar(i + 1, i);
   };
 
   var onBackspaceDown = function onBackspaceDown(e, i) {
-    // if (Boolean(getSelectionText().length)) {
-    //   const selStartInd = getSelectStartIndex();
-    //   const selEndInd = getSelectionText().length+selStartInd;
-    //   console.log(selStartInd, selEndInd)
-    //   if (selStartInd > 0) {
-    //     resetSelectionText();
-    //     for (let index = selStartInd; index < selEndInd; ++index) {
-    //       console.log({index})
-    //       updateInnerValueChar({char: ''}, index);
-    //     }
-    //     setFocusOnChar(selStartInd, i);
-    //   }
-    //   return true;
-    // }
+    if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
     var prevIndex = i - 1;
     var charObj = getCharByIndex(prevIndex);
     if (!charObj) return false;
-    var char = charObj.char,
-        isSpecialSymbol = charObj.isSpecialSymbol;
+    var isSpecialSymbol = charObj.isSpecialSymbol;
     if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
 
     if (maskAsPlaceholder) {
@@ -479,12 +486,14 @@ function InputMask() {
   };
 
   var onDeleteDown = function onDeleteDown(e, i) {
+    if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
     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);
+    if (char === '') return false;
 
     if (maskAsPlaceholder) {
       var newText = getInnerValueAsString().substr(0, i) + getInnerValueAsString().substr(nextIndex);
@@ -510,8 +519,12 @@ function InputMask() {
   };
 
   var onEndDown = function onEndDown(e, i) {
-    return setFocusOnChar(maskAsPlaceholder ? getLastTypedIndex() : innerValue.length - 1, 0);
-  };
+    return setTimeout(function () {
+      return setFocusOnChar(maskAsPlaceholder ? getLastTypedIndex() : 0, 0);
+    }, 10);
+  }; // SERVICE KEYS HANDLERS | END //
+  // GENERAL EVENT HANDLERS | START //
+
 
   var handleServiceKeyDown = function handleServiceKeyDown(e, i) {
     var key = e.key;
@@ -548,9 +561,11 @@ function InputMask() {
   };
 
   var handleKeyDown = function handleKeyDown(e, i) {
-    var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref11$disableErrors = _ref11.disableErrors,
-        disableErrors = _ref11$disableErrors === void 0 ? false : _ref11$disableErrors;
+    var _getClearInnerValueAs;
+
+    var _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref12$disableErrors = _ref12.disableErrors,
+        disableErrors = _ref12$disableErrors === void 0 ? false : _ref12$disableErrors;
 
     try {
       e.stopPropagation();
@@ -559,17 +574,37 @@ function InputMask() {
 
     var key = e.key;
     var charObj = getCharByIndex(i);
-    if (!charObj) return false;
+    if (!charObj || i === innerValue.length - 1) return false;
+    if (maskAsPlaceholder && i > getLastTypedIndex() + 1) return handleKeyDown(e, getLastTypedIndex() === 0 ? 0 : getLastTypedIndex() + 1, {
+      disableErrors: disableErrors
+    });
     var isSpecialSymbol = charObj.isSpecialSymbol,
-        maskChar = charObj.maskChar; //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
+        maskChar = charObj.maskChar,
+        isReadOnly = charObj.isReadOnly;
+    if (isReadOnly) return false; //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
 
-    if (maskChar === SPACE_CHAR) return handleKeyDown(e, i + 1);
+    if (maskChar === _config.SPACE_CHAR) return handleKeyDown(e, i + 1);
     if (isSpecialSymbol && maskChar !== key) return false;
     if (!isValidChar({
       char: key,
       i: i,
       disableErrors: disableErrors
     })) return false;
+
+    if (maskAsPlaceholder && ((_getClearInnerValueAs = getClearInnerValueAsString(i)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) !== 0) {
+      var fromIndex = i + 1;
+      var text = innerValue.slice().filter(function (charObj, index) {
+        return index >= i;
+      }).map(function (_ref13, index) {
+        var char = _ref13.char;
+        return char;
+      }).join('');
+
+      _onPaste({
+        text: text
+      }, fromIndex, false);
+    }
+
     updateInnerValueChar({
       char: key
     }, i);
@@ -589,33 +624,41 @@ function InputMask() {
     }
   };
 
-  var _onKeyDown = function onKeyDown(e, i) {
+  var _onKeyDown = function onKeyDown(e) {
+    var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    if (!isFocused) return false;
     var key = e.key,
         ctrlKey = e.ctrlKey,
         altKey = e.altKey;
+    if (_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) && _config.EXCLUDED_KEYS.includes(key)) return true;
     setError(false);
     clearErrorMessage();
 
     if (ctrlKey || altKey) {
-      if (!_index.KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
+      if (!_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
       return true;
     }
 
-    var handleResult = _index.KEYBOARD_SERVICE_KEYS.includes(key) ? handleServiceKeyDown(e, i) : handleKeyDown(e, i);
+    e.preventDefault();
+    e.stopPropagation();
+    var handleResult = _indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) ? handleServiceKeyDown(e, i) : handleKeyDown(e, i);
 
-    if (blinkErrors && !handleResult) {
+    if (blinkErrors && !handleResult && i !== null) {
       setBlinkError(true);
     }
   };
 
   var onClick = function onClick(e, cb) {
-    var _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref12$ignoreIsSelect = _ref12.ignoreIsSelecting,
-        ignoreIsSelecting = _ref12$ignoreIsSelect === void 0 ? false : _ref12$ignoreIsSelect;
+    var _ref14 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref14$ignoreIsSelect = _ref14.ignoreIsSelecting,
+        ignoreIsSelecting = _ref14$ignoreIsSelect === void 0 ? false : _ref14$ignoreIsSelect;
 
-    e.stopPropagation();
-    e.preventDefault();
-    if (isSelecting && (Boolean(selectedText.length) || Boolean((0, _functions.getSelectionText)().length)) && !ignoreIsSelecting) return false;
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
+    if (isSelecting && (selectedText.length || (0, _functions.getSelectionText)().length) && !ignoreIsSelecting) return false;
     setFocused(true);
     if (typeof cb === 'function') cb(e);
   };
@@ -637,7 +680,7 @@ function InputMask() {
     (0, _functions.resetSelectionText)();
     setTimeout(function () {
       return onClick(e, function () {
-        return _onFocus(e, i);
+        return setFocusOnChar(i, 0);
       }, {
         ignoreIsSelecting: true
       });
@@ -645,11 +688,28 @@ function InputMask() {
   };
 
   var onWrapperClick = function onWrapperClick(e) {
-    return cancelDefaultAction(e, function () {
-      !isMouseDown ? onClick(e, function () {
-        return onEndDown(e, 0);
-      }) : null;
-    });
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!isMouseDown && !isSelecting) {
+      onClick(e);
+      setFocusOnChar(getLastTypedIndex(), 0);
+    }
+  };
+
+  var onClearClick = function onClearClick(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    resetInnerValue();
+    onHomeDown(null, 0);
+  };
+
+  var onMouseDownMove = function onMouseDownMove(e) {
+    if (!isMouseDown) return false;
+    setIsSelecting(true);
+    var clientX = e.clientX;
+    if (selectionStartX === null) setSelectionStartX(clientX);
+    setSelectionEndX(clientX);
   };
 
   var onBlur = function onBlur(e) {
@@ -675,21 +735,37 @@ function InputMask() {
   };
 
   var _onPaste = function onPaste(e, i) {
-    var _e$clipboardData;
+    var _ref15, _window, _e$clipboardData;
 
-    setIsSelecting(false);
-    (0, _functions.resetSelectionText)();
+    var setFocusToEnd = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 
     try {
-      e.preventDefault();
       e.stopPropagation();
+      e.preventDefault();
     } catch (error) {}
 
-    var pastedText = (e === null || e === void 0 ? void 0 : (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('Text')) || e.text;
+    setIsSelecting(false);
+    (0, _functions.resetSelectionText)();
+    var pastedText = ((_ref15 = (e === null || e === void 0 ? void 0 : e.clipboardData) || ((_window = window) === null || _window === void 0 ? void 0 : _window.clipboardData)) === null || _ref15 === void 0 ? void 0 : _ref15.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;
     var replacedIndexes = [];
-    var result = pastedText.split('').filter(function (char) {
-      return isDigit(char) || isLetter(char);
+
+    if (maskAsPlaceholder && (e === null || e === void 0 ? void 0 : e.type) === 'paste') {
+      var fromIndex = i + parseInt(pastedText === null || pastedText === void 0 ? void 0 : pastedText.length);
+      var text = innerValue.slice().filter(function (charObj, index) {
+        return index >= i;
+      }).map(function (_ref16, index) {
+        var char = _ref16.char;
+        return char;
+      }).join('');
+
+      _onPaste({
+        text: text
+      }, fromIndex, false);
+    }
+
+    pastedText.split('').filter(function (char) {
+      return (0, _functions.isDigit)(char) || (0, _functions.isLetter)(char);
     }).map(function (pastedChar, offset) {
       var charIndex = i + offset;
       var isReplaced = false;
@@ -742,26 +818,39 @@ function InputMask() {
         _replacedIndexes$reve2 = (0, _slicedToArray2.default)(_replacedIndexes$reve, 1),
         lastCharIndex = _replacedIndexes$reve2[0];
 
-    setFocusOnChar(lastCharIndex + 1, i);
+    if (setFocusToEnd) setFocusOnChar(lastCharIndex + 1, i);
+    return lastCharIndex;
   };
 
   var _onCopy = function onCopy(e, i) {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
     (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
     setIsSelecting(false);
     setFocusOnChar(i, 0);
   };
 
   var _onCut = function onCut(e, i) {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
     (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
-    resetInnerValue();
+    deleteSelectedText();
     setIsSelecting(false);
     setFocusOnChar(i, 0);
-  };
+  }; // GENERAL EVENT HANDLERS | END //
+  // FUNCTIONS | START //
+
 
   var cancelDefaultAction = function cancelDefaultAction(e, cb) {
     var key = e.key;
 
-    if (!EXCLUDED_KEYS.includes(key) && _index.KEYBOARD_SERVICE_KEYS.includes(key)) {
+    if (!_config.EXCLUDED_KEYS.includes(key) && _indexConstants.KEYBOARD_SERVICE_KEYS.includes(key)) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -774,30 +863,74 @@ function InputMask() {
     e.preventDefault();
     e.stopPropagation();
     setIsSelecting(true);
+    setSelectionStartX(-1);
+    setSelectionEndX(-1);
     (0, _functions.selectElementContents)(inputRef.current);
     setSelectedText((0, _functions.getSelectionText)());
-  }; ///--- OBSERVERS ---///
+  };
+
+  var deleteSelectedText = function deleteSelectedText() {
+    var _getClearInnerValueAs2;
+
+    var selStartInd = getSelectStartIndex();
+    if (selStartInd === null || selStartInd === undefined || selStartInd < 0) return false;
+    var selEndInd = (0, _functions.getSelectionText)().length + selStartInd;
+    var filteredSelLen = (0, _functions.getSelectionText)().split('').reduce(function (counter, char) {
+      if (!isSpecialSymbolChar(char)) counter += 1;
+      return counter;
+    }, 0);
+    (0, _functions.resetSelectionText)();
+
+    if (maskAsPlaceholder && ((_getClearInnerValueAs2 = getClearInnerValueAsString(selEndInd + 1)) === null || _getClearInnerValueAs2 === void 0 ? void 0 : _getClearInnerValueAs2.length) !== 0) {
+      var text = innerValue.slice().filter(function (_ref17, index) {
+        var isSpecialSymbol = _ref17.isSpecialSymbol;
+        return (index < selStartInd || index >= selEndInd) && !isSpecialSymbol;
+      }).map(function (_ref18, index) {
+        var char = _ref18.char;
+        return char;
+      }).join('');
+      resetInnerValue();
+
+      _onPaste({
+        text: text
+      }, 0, false);
+
+      setFocusOnChar(selStartInd);
+    } else {
+      for (var index = selStartInd; index < selEndInd; ++index) {
+        updateInnerValueChar({
+          char: ''
+        }, index);
+      }
+    }
+
+    setFocusOnChar(selStartInd, -1);
+    return true;
+  }; // FUNCTIONS | END //
+  ///--- OBSERVERS ---///
   //Render Mask
 
 
   (0, _react.useEffect)(function () {
     if (!maskPattern) maskPattern = '';
-    maskPattern.concat(' ').split('').map(function (char, id) {
+    maskPattern.concat(' ').split('').map(function (char, id, i) {
       return addInnerValueChar({
-        char: char
-      }, {
-        id: id
+        char: char,
+        data: {
+          id: id,
+          isReadOnly: id === maskPattern.length
+        }
       });
     });
     setMaskRendered(true);
   }, []);
   (0, _react.useEffect)(function () {
-    if (!isMaskRendered) return false;
+    if (!isMaskRendered || isInitValue) return false;
 
-    if (value && value !== '') {
+    if (value && value !== '' && value !== getClearInnerValueAsString()) {
       var valueCharIndex = 0;
-      innerValue.map(function (_ref13, i) {
-        var isSpecialSymbol = _ref13.isSpecialSymbol;
+      innerValue.map(function (_ref19, i) {
+        var isSpecialSymbol = _ref19.isSpecialSymbol;
         if (isSpecialSymbol) return false;
         var char = value[valueCharIndex];
 
@@ -820,12 +953,12 @@ function InputMask() {
 
         ++valueCharIndex;
       });
+      setIsInitValue(true);
     }
-  }, [isMaskRendered]); // Focus Observer
+  }, [isMaskRendered, value, isInitValue]); // Focus Observer
 
   (0, _react.useEffect)(function () {
     if (!isFocused) {
-      setFocusedItemRef(null);
       setSelectedText('');
     }
   }, [isFocused]); // Default Focused
@@ -840,9 +973,9 @@ function InputMask() {
     if (!isMaskRendered) return false;
     setError(false);
     clearErrorMessage();
-    onChangeProp(getInnerValueAsString({
+    onChangeProp(getClearInnerValueAsString(), getInnerValueAsString({
       replaceSpace: true
-    }), getClearInnerValueAsString());
+    }));
   }, [innerValue, isMaskRendered]); // Blink Error
 
   (0, _react.useEffect)(function () {
@@ -855,14 +988,32 @@ function InputMask() {
     if (!isSelecting) {
       setSelectedText('');
       (0, _functions.resetSelectionText)();
+      setSelectionStartX(null);
+      setSelectionEndX(null);
+    }
+
+    if (!isMouseDown && isSelecting) {
+      document.addEventListener('keydown', function (e) {
+        return pushServiceWatcher(function () {
+          _onKeyDown(e);
+
+          setIsSelecting(false);
+        });
+      }, {
+        once: true
+      });
     }
 
-    if (!isMouseDown && isSelecting && !Boolean((0, _functions.getSelectionText)().length)) setIsSelecting(false);
+    if (!isMouseDown && isSelecting && !(0, _functions.getSelectionText)().length) setIsSelecting(false);
   }, [isSelecting, isMouseDown]);
   (0, _react.useEffect)(function () {
     document.addEventListener('mouseup', function () {
       setIsMouseDown(function (isMouseDown) {
-        document.addEventListener('keydown', _onKeyDown, {
+        document.addEventListener('keydown', function (e) {
+          return pushServiceWatcher(function () {
+            return _onKeyDown(e);
+          });
+        }, {
           once: true
         });
 
@@ -891,17 +1042,20 @@ function InputMask() {
         maskChar = obj.maskChar,
         isSpecialSymbol = obj.isSpecialSymbol,
         isSelected = obj.isSelected;
+    var 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 ? 'auto' : -1,
+      tabIndex: i === 0 ? 0 : -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        "),
+      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          ").concat(isSelected ? 'input-mask_value_item--selected' : '', "\n        ") // ${char === '' || isSpecialSymbol ? 'unselectable' : ''}
+      // ${!isSelecting && (char === '' || isSpecialSymbol) ? 'unselectable' : ''}
+      ,
       onClick: function onClick(e) {
         return onCharClick(e, i);
       },
@@ -915,30 +1069,31 @@ function InputMask() {
       },
       onChange: function onChange() {},
       contentEditable: !isSelecting,
-      inputMode: isDigitMaskChar(maskChar) ? 'numeric' : 'text',
+      inputMode: (0, _functions.isDigitMaskChar)(i !== innerValue.length - 1 ? maskChar : prevChar === null || prevChar === void 0 ? void 0 : prevChar.maskChar) ? 'numeric' : 'text',
       suppressContentEditableWarning: true,
       onPaste: function onPaste(e) {
-        return cancelDefaultAction(e, function () {
-          return _onPaste(e, i);
-        });
+        return _onPaste(e, i);
       },
       onCopy: function onCopy(e) {
-        return cancelDefaultAction(e, function () {
-          return _onCopy(e, i);
-        });
+        return _onCopy(e, i);
       },
       onCut: function onCut(e) {
-        return cancelDefaultAction(e, function () {
-          return _onCut(e, i);
-        });
+        return _onCut(e, i);
       },
-      onSelect: cancelDefaultAction,
       ref: ref,
       onDoubleClick: function onDoubleClick(e) {
         setIsSelecting(true);
         setTimeout(function () {
           return selectAllText(e, i);
         }, 50);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return cancelDefaultAction(e, function () {
+          return setIsMouseDown(true);
+        });
+      },
+      onMouseMove: function onMouseMove(e) {
+        return cancelDefaultAction(e, onMouseDownMove);
       }
     }, isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
   };
@@ -958,7 +1113,6 @@ function InputMask() {
   var renderInputValue = function renderInputValue() {
     return innerValue.map(function (obj, i) {
       var char = obj.char,
-          maskChar = obj.maskChar,
           isSpecialSymbol = obj.isSpecialSymbol;
 
       if (isSpecialSymbol) {
@@ -977,16 +1131,18 @@ function InputMask() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "\n          input-mask_wrapper\n          ".concat(className, "\n          ").concat(isError ? 'input-mask_error' : '', "\n          ").concat(isFocused ? 'input-mask_focus' : '', "\n          ").concat(blinkError ? 'input-mask_blink-error' : '', "\n        "),
       onClick: onWrapperClick,
-      onBlur: onBlur,
-      tabIndex: "auto"
+      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={() => setIsMouseDown(true)}
-      // onMouseUp={() => setIsMouseDown(false)}
-      // onMouseMove={() => isMouseDown ? setIsSelecting(true) : null}
-      ,
-      onMouseDown: cancelDefaultAction,
+      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: function onMouseDown(e) {
+        return cancelDefaultAction(e, function () {
+          return setIsMouseDown(true);
+        });
+      },
+      onMouseMove: function onMouseMove(e) {
+        return cancelDefaultAction(e, onMouseDownMove);
+      },
       onMouseUp: cancelDefaultAction,
-      onMouseMove: cancelDefaultAction,
       onClick: onWrapperClick,
       onBlur: onBlur
     }, showHint && isHintLeft && /*#__PURE__*/_react.default.createElement("div", {
@@ -1001,14 +1157,16 @@ function InputMask() {
       className: "input-mask_value",
       ref: inputRef,
       onKeyUp: cancelDefaultAction,
-      onKeyDown: cancelDefaultAction,
+      onKeyDown: function onKeyDown(e) {
+        return 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: clearValue
+      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", {

package/dist/Atomic/FormElements/InputMask/InputMask.scss

@@ -1,3 +1,13 @@
+.unselectable {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
 .input-mask_wrapper{
   outline: none;
   display: block;
@@ -107,13 +117,11 @@
 
         &_mask-char{
           color: #9c9c9c;
-          user-select: none;
         }
 
         &_value-char,
         &_spec-char{
           color: #333333;
-          //user-select: all;
         }
 
         &_spec-char{

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

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _config = require("./config");
+
 var _InputMask = _interopRequireDefault(require("./InputMask"));
 
 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); }
@@ -30,7 +32,7 @@ var _default = {
   argTypes: {
     maskPattern: {
       title: 'Mask Pattern',
-      description: '<b>"D"</b> - Digit.<br/><b>"L"</b> or <b>"l"</b> - Letter.'
+      description: "<b>\"".concat(_config.DIGIT_MASK_CHAR, "\"</b> - Digit.<br/><b>\"").concat(_config.UPPERCASE_LETTER_MASK_CHAR, "\"</b> or <b>\"").concat(_config.LOWERCASE_LETTER_MASK_CHAR, "\"</b> - Letter.")
     },
     maskPatternPlaceholder: {
       title: 'Pattern Placeholder',
@@ -121,7 +123,9 @@ var _default = {
     },
     errors: {
       type: 'object',
-      description: "Errors Descriptions: <br/>\n\n      {\n        onlyLetter: 'Type letter',\n        onlyDigit: 'Type digit',\n        onlyUpperCase: 'Type letter in UpperCase',\n        onlyLowerCase: 'Type letter in LowerCase',\n        default: null\n      }\n"
+      description: "Errors Descriptions: <br/>\n      {\n        ".concat(Object.keys(_config.DEFAULT_ERRORS).map(function (key) {
+        return "<br/> &nbsp;&nbsp;&nbsp;&nbsp;".concat(key, ": '").concat(_config.DEFAULT_ERRORS[key], "'");
+      }), "\n        <br/>\n      }")
     },
     error: {
       type: 'string',

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

@@ -0,0 +1,16 @@
+"use strict";
+
+module.exports = {
+  UPPERCASE_LETTER_MASK_CHAR: 'L',
+  LOWERCASE_LETTER_MASK_CHAR: 'l',
+  DIGIT_MASK_CHAR: 'D',
+  SPACE_CHAR: "\xA0",
+  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/InputMask/functions.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectElementContents = exports.copyToClipboard = exports.resetSelectionText = exports.getSelectionText = void 0;
+exports.voidFn = exports.isLetterMaskChar = exports.isDigitMaskChar = exports.isDigit = exports.isLowerCaseLetter = exports.isUpperCaseLetter = exports.isLetter = exports.selectElementContents = exports.copyToClipboard = exports.resetSelectionText = exports.getSelectionText = 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") {
+  } else if (document.selection && document.selection.type !== 'Control') {
     text = document.selection.createRange().text;
   }
 
@@ -28,7 +30,8 @@ var resetSelectionText = function resetSelectionText() {
 exports.resetSelectionText = resetSelectionText;
 
 var copyToClipboard = function copyToClipboard(str) {
-  if (navigator && navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(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.');
 };
 
@@ -42,4 +45,46 @@ var selectElementContents = function selectElementContents(el) {
   sel.addRange(range);
 };
 
-exports.selectElementContents = selectElementContents;
+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/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -289,20 +289,24 @@ var NumericInput = function NumericInput(_ref) {
       className: "input__nums"
     }, /*#__PURE__*/_react.default.createElement("button", {
       ref: decRef,
+      className: (0, _classnames.default)('input__num-btn', {
+        'events-none': +value <= min
+      }),
       onMouseDown: function onMouseDown(e) {
         return handle.decrement(e);
-      },
-      className: "input__num-btn"
+      }
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, {
       className: (0, _classnames.default)({
         disabled: +value <= min
       })
     })), /*#__PURE__*/_react.default.createElement("button", {
       ref: incRef,
+      className: (0, _classnames.default)('input__num-btn', {
+        'events-none': +value >= max
+      }),
       onMouseDown: function onMouseDown(e) {
         return handle.increment(e);
-      },
-      className: "input__num-btn"
+      }
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, {
       className: (0, _classnames.default)({
         disabled: +value >= max

package/dist/Atomic/FormElements/NumericInput/NumericInput.scss

@@ -133,3 +133,7 @@
   visibility: visible;
   pointer-events: all;
 }
+
+.events-none {
+  pointer-events: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.56",
+  "version": "0.1.59",
   "description": "fix UserBox crush",
   "main": "dist/index.js",
   "files": ["dist/*", "node_modules/anme/*", "node_modules/moment/*", "node_modules/moment-timezone/*"],