intelicoreact 0.1.36 → 0.1.37

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

@@ -23,6 +23,10 @@ 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");
@@ -38,6 +42,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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',
@@ -47,8 +52,9 @@ var DEFAULT_ERRORS = {
   default: null
 };
 
-function InputMask(_ref) {
-  var maskPattern = _ref.maskPattern,
+function InputMask() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      maskPattern = _ref.maskPattern,
       maskPatternPlaceholder = _ref.maskPatternPlaceholder,
       maskPlaceholder = _ref.maskPlaceholder,
       maskDigitPlaceholder = _ref.maskDigitPlaceholder,
@@ -80,7 +86,23 @@ function InputMask(_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;
+      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);
 
@@ -90,42 +112,55 @@ function InputMask(_ref) {
       setMaskRendered = _useState2[1];
 
   var inputRef = (0, _react.useRef)(null);
-  var inputRefWrapper = (0, _react.useRef)(null);
-  var wrapperRef = (0, _react.useRef)(null);
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isFocused = _useState4[0],
-      setFocused = _useState4[1];
+      isMouseDown = _useState4[0],
+      setIsMouseDown = _useState4[1];
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isError = _useState6[0],
-      setError = _useState6[1];
+      isSelecting = _useState6[0],
+      setIsSelecting = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      blinkError = _useState8[0],
-      setBlinkError = _useState8[1];
+      isFocused = _useState8[0],
+      setFocused = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(errors.default),
+  var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      errorMessage = _useState10[0],
-      setErrorMessage = _useState10[1];
+      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 _useState11 = (0, _react.useState)(null),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      focusedItemRef = _useState12[0],
-      setFocusedItemRef = _useState12[1];
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      focusedItemRef = _useState16[0],
+      setFocusedItemRef = _useState16[1];
 
-  var _useState13 = (0, _react.useState)([]),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      innerValue = _useState14[0],
-      setInnerValue = _useState14[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,
@@ -147,14 +182,31 @@ function InputMask(_ref) {
     });
   };
 
-  var updateInnerValueChar = function updateInnerValueChar(char, i) {
+  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) stateCopy[i].char = char;
+      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;
@@ -169,18 +221,22 @@ function InputMask(_ref) {
   };
 
   var getInnerValueAsString = function getInnerValueAsString() {
-    return innerValue.map(function (_ref3, i) {
-      var char = _ref3.char,
-          maskChar = _ref3.maskChar;
+    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, _ref4) {
-      var char = _ref4.char,
-          maskChar = _ref4.maskChar,
-          isSpecialSymbol = _ref4.isSpecialSymbol;
+    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;
     }, '');
@@ -210,14 +266,69 @@ function InputMask(_ref) {
     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 = "\xA0";
+    if (char === ' ') char = SPACE_CHAR;
     return _objectSpread({
       char: isSpecialSymbol ? char : '',
       maskChar: char,
       isSpecialSymbol: isSpecialSymbol,
+      isSelected: false,
       ref: /*#__PURE__*/(0, _react.createRef)()
     }, data);
   };
@@ -235,10 +346,20 @@ function InputMask(_ref) {
   };
 
   var getMaskCharByIndex = function getMaskCharByIndex(i) {
-    return maskPattern[i] || undefined;
+    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,
@@ -251,7 +372,7 @@ function InputMask(_ref) {
       return prevIndex > i ? onArrowLeftDown(null, i) : onArrowRightDown(null, i);
     }
 
-    ref.current.focus();
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     setTimeout(function () {
       return (0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
     }, 10);
@@ -266,7 +387,9 @@ function InputMask(_ref) {
     e.stopPropagation();
     e.preventDefault();
     innerValue.map(function (charObj, i) {
-      updateInnerValueChar('', i);
+      updateInnerValueChar({
+        char: ''
+      }, i);
     });
     onHomeDown(null, 0);
   }; ///--- Event Handlers ---///
@@ -288,7 +411,9 @@ function InputMask(_ref) {
         isSpecialSymbol = charObj.isSpecialSymbol;
     if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
     setFocusOnChar(prevIndex, i);
-    updateInnerValueChar('', prevIndex);
+    updateInnerValueChar({
+      char: ''
+    }, prevIndex);
     return true;
   };
 
@@ -300,7 +425,9 @@ function InputMask(_ref) {
         isSpecialSymbol = charObj.isSpecialSymbol;
     if (isSpecialSymbol) return onDeleteDown(e, i + 1);
     setFocusOnChar(nextIndex, i);
-    updateInnerValueChar('', i);
+    updateInnerValueChar({
+      char: ''
+    }, i);
     return true;
   };
 
@@ -340,10 +467,6 @@ function InputMask(_ref) {
         return onEndDown(e, i);
         break;
 
-      case 'Tab':
-        return onTabDown(e, i);
-        break;
-
       default:
         return true;
         break;
@@ -351,68 +474,58 @@ function InputMask(_ref) {
   };
 
   var handleKeyDown = function handleKeyDown(e, i) {
-    e.stopPropagation();
-    e.preventDefault();
+    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 === ' ') return handleKeyDown(e, i + 1);
+    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;
+  };
 
-    switch (maskChar) {
-      case DIGIT_MASK_CHAR:
-        if (!isDigit(key)) {
-          setErrorMessage(errors.onlyDigit);
-          return false;
-        }
-
-        break;
-
-      case UPPERCASE_LETTER_MASK_CHAR:
-        if (adaptTextCase) key = key.toUpperCase();
-
-        if (!isLetter(key) && !isCaseSensitive) {
-          setErrorMessage(errors.onlyLetter);
-          return false;
-        }
-
-        if (isCaseSensitive && !isUpperCaseLetter(key)) {
-          setErrorMessage(errors.onlyUpperCase);
-          return false;
-        }
-
-        break;
-
-      case LOWERCASE_LETTER_MASK_CHAR:
-        if (adaptTextCase) key = key.toLowerCase();
-
-        if (!isLetter(key) && !isCaseSensitive) {
-          setErrorMessage(errors.onlyLetter);
-          return false;
-        }
-
-        if (isCaseSensitive && !isLowerCaseLetter(key)) {
-          setErrorMessage(errors.onlyLowerCase);
-          return false;
-        }
-
-        break;
+  var handleKeyCombinations = function handleKeyCombinations(e, i) {
+    var key = e.key,
+        keyCode = e.keyCode;
 
-      default:
-        return false;
+    switch (keyCode) {
+      //Ctrl + A
+      case 65:
+        selectAllText(e);
         break;
     }
-
-    updateInnerValueChar(key, i);
-    onArrowRightDown(e, i);
-    return true;
   };
 
   var _onKeyDown = function onKeyDown(e, i) {
-    var key = e.key;
+    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) {
@@ -421,11 +534,31 @@ function InputMask(_ref) {
   };
 
   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);
@@ -448,6 +581,84 @@ function InputMask(_ref) {
     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;
 
@@ -458,6 +669,14 @@ function InputMask(_ref) {
 
     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
 
@@ -465,15 +684,19 @@ function InputMask(_ref) {
   (0, _react.useEffect)(function () {
     if (!maskPattern) maskPattern = '';
     var maskLength = maskPattern.length;
-    maskPattern.concat(' ').split('').map(function (char) {
+    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, i);
+        return updateInnerValueChar({
+          char: char
+        }, i);
       });
     }
 
@@ -481,7 +704,10 @@ function InputMask(_ref) {
   }, []); // Focus Observer
 
   (0, _react.useEffect)(function () {
-    if (!isFocused) setFocusedItemRef(null);
+    if (!isFocused) {
+      setFocusedItemRef(null);
+      setSelectedText('');
+    }
   }, [isFocused]); // Default Focused
 
   (0, _react.useEffect)(function () {
@@ -501,24 +727,50 @@ function InputMask(_ref) {
     setTimeout(function () {
       setBlinkError(false);
     }, blinkDuration);
-  }, [blinkError]); ///--- RENDER ---///
+  }, [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;
-    return /*#__PURE__*/_react.default.createElement("div", {
+        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: "input-mask_value_item ".concat(className, " ").concat(isDigitMaskChar(obj.maskChar) ? 'input-mask_value_item--digit' : '', " ").concat(isLetterMaskChar(obj.maskChar) ? 'input-mask_value_item--letter' : '', " ").concat(obj.isSpecialSymbol ? 'input-mask_value_item--spec' : ''),
+      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) {
-        _onClick(e, function () {
-          return _onFocus(e, i);
-        });
+        onCharClick(e, i);
       },
       onFocus: function onFocus(e) {
         return _onFocus(e, i);
@@ -529,15 +781,32 @@ function InputMask(_ref) {
         return _onKeyDown(e, i);
       },
       onChange: function onChange() {},
-      contentEditable: true,
+      contentEditable: !isSelecting,
       inputMode: isDigitMaskChar(maskChar) ? 'numeric' : 'text',
       suppressContentEditableWarning: true,
-      unselectable: true,
-      onSelect: cancelDefaultAction,
-      onMouseDown: cancelDefaultAction,
-      onPaste: cancelDefaultAction // TODO IF NEEDED
-      ,
-      ref: ref
+      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);
   };
 
@@ -571,27 +840,33 @@ function InputMask(_ref) {
     });
   };
 
-  var renderSingleInputValue = function renderSingleInputValue() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      onClick: function onClick() {
-        return setFocused(true);
-      }
-    }, getInnerValueAsString());
-  };
-
   var render = function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_wrapper ".concat(className),
-      onBlur: onBlur,
-      ref: wrapperRef
+      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' : ''),
-      ref: inputRefWrapper,
+      onMouseDown: function onMouseDown() {
+        return setIsMouseDown(true);
+      },
+      onMouseMove: function onMouseMove() {
+        return isMouseDown ? setIsSelecting(true) : null;
+      },
       onClick: function onClick(e) {
-        return _onClick(e, onEndDown(e, 0));
+        return cancelDefaultAction(e, function () {
+          return !isMouseDown ? _onClick(e, function () {
+            return onEndDown(e, 0);
+          }) : null;
+        });
       },
       onBlur: onBlur
-    }, isIconLeft && showIcon && /*#__PURE__*/_react.default.createElement("div", {
+    }, 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",
@@ -606,7 +881,13 @@ function InputMask(_ref) {
       onClick: clearValue
     })), isIconRight && showIcon && /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_icon input-mask_icon--right"
-    }, icon)), showNativeErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+    }, 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));
   };

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

@@ -1,16 +1,7 @@
-.unselectable {
-  -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
-}
-
 .input-mask_wrapper {
   outline: none;
   display: block;
+  // width: fit-content;
   width: 250px;
 
   .input-mask{
@@ -55,6 +46,43 @@
       }
     }
 
+    &_hint{
+      display: flex;
+      text-align: center;
+      align-items: 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{
+        margin-left: 4px;
+        right: 0;
+      }
+    }
+
     &_clear{
       height: 16px;
       width: 16px;
@@ -70,7 +98,6 @@
       width: 100%;
 
       &_item{
-        @extend .unselectable;
         display: inline-flex;
         min-width: 0;
         font-size: 16px;

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

@@ -134,6 +134,46 @@ var _default = {
       type: 'boolean',
       description: 'Set Autofocus On Render',
       default: false
+    },
+    imitateTypingOnPaste: {
+      type: 'boolean',
+      description: '<b>Manual Input Simulation Mode</b> when called <b>Pasting Text Event</b>.',
+      default: false
+    },
+    imitateTypingOnPasteDelay: {
+      type: 'number',
+      description: '<b>Delay Time</b> for <b>Manual Input Simulation Mode</b> when called <b>Pasting Text Event</b>.',
+      default: 100
+    },
+    showHint: {
+      type: 'boolean',
+      description: 'Turn <b>On/Off</b> Input Hint.',
+      default: false
+    },
+    hintText: {
+      type: 'string',
+      description: 'Input Hint Text.',
+      default: ''
+    },
+    hintClassName: {
+      type: 'string',
+      description: 'ClassName for Input Hint.',
+      default: ''
+    },
+    isHintLeft: {
+      type: 'boolean',
+      default: false,
+      description: 'Display Input Hint on Left Side.'
+    },
+    isHintRight: {
+      type: 'boolean',
+      default: true,
+      description: 'Display Input Hint on Right Side.'
+    },
+    hintPosition: {
+      type: 'string',
+      description: 'Position of <b>Input Hint Text</b>',
+      default: 'right'
     }
   }
 };
@@ -173,8 +213,8 @@ var Template = function Template(args) {
 var InputMaskTemplate = Template.bind({});
 exports.InputMaskTemplate = InputMaskTemplate;
 InputMaskTemplate.args = {
-  maskPattern: 'DDD DDD DDDD | LLL ll',
-  maskPatternPlaceholder: 'XXX xxx XXXX | AAA aa',
+  maskPattern: 'DDDD DDDD DDDD DDDD',
+  maskPatternPlaceholder: 'xxxx xxxx xxxx xxxx',
   usePatternPlaceholder: false,
   maskPlaceholder: '_',
   maskDigitPlaceholder: '',
@@ -185,7 +225,7 @@ InputMaskTemplate.args = {
   showIcon: false,
   isIconLeft: true,
   isIconRight: false,
-  isClearable: false,
+  isClearable: true,
   value: '',
   onChange: function onChange() {},
   blinkErrors: false,
@@ -195,5 +235,13 @@ InputMaskTemplate.args = {
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
   className: '',
-  isFocusedDefault: false
+  isFocusedDefault: false,
+  imitateTypingOnPaste: false,
+  imitateTypingOnPasteDelay: 100,
+  showHint: false,
+  hintText: 'Hint Text',
+  hintClassName: '',
+  isHintRight: true,
+  isHintLeft: false,
+  hintPosition: 'right'
 };

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectElementContents = exports.copyToClipboard = exports.resetSelectionText = exports.getSelectionText = void 0;
+
+var getSelectionText = function getSelectionText() {
+  var text = "";
+
+  if (window.getSelection) {
+    text = window.getSelection().toString();
+  } else if (document.selection && document.selection.type != "Control") {
+    text = document.selection.createRange().text;
+  }
+
+  return 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);
+  return Promise.reject('The Clipboard API is not available.');
+};
+
+exports.copyToClipboard = copyToClipboard;
+
+var selectElementContents = function selectElementContents(el) {
+  var range = document.createRange();
+  range.selectNodeContents(el);
+  var sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+};
+
+exports.selectElementContents = selectElementContents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "fixes",
   "main": "dist/index.js",
   "files": ["dist/*", "node_modules/anme/*", "node_modules/moment/*", "node_modules/moment-timezone/*"],