intelicoreact 1.5.8 → 1.5.9

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

@@ -1,24 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = InputMask3;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _reactFeather = require("react-feather");
+
 var _index = require("../../../Constants/index.constants");
+
 var _utils = require("../../../Functions/utils");
+
 var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
+
 var _DynamicIcon = _interopRequireDefault(require("../../UI/DynamicIcon/DynamicIcon"));
+
 var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
+
 var _config = require("./config");
+
 var _functions = require("./functions");
+
 require("./InputMask3.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _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 InputMask3() {
   let {
     autocomplete = "off",
@@ -49,7 +65,6 @@ function InputMask3() {
     // ? Если НЕ передана ка булева, то режим скрытия обеспечиватся своим внутренним стором, здешний триггер (глазик) рендерится
     isHide,
     // булева пропа для управления сверху
-
     icon,
     showIcon,
     isIconLeft,
@@ -83,40 +98,46 @@ function InputMask3() {
     testId,
     attributesOfNativeInput = {}
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const errors = {
-    ..._config.DEFAULT_ERRORS,
+  const errors = { ..._config.DEFAULT_ERRORS,
     ...customErrors
   };
   if (maxEditableIndex === -1) maxEditableIndex = maskPattern.length;
   const [isMaskRendered, setMaskRendered] = (0, _react.useState)(false);
   const [isFocused, setFocused] = (0, _react.useState)(false);
   const [isInitValue, setIsInitValue] = (0, _react.useState)(false);
-  const [selectedLength, setSelectedLength] = (0, _react.useState)(0);
-  //? Если управляется сверху, то инициируемся текущим внешним значением
-  const [isValueHidden, setIsValueHidden] = (0, _react.useState)(typeof isHide === 'boolean' ? isHide : isValueHiddenDefault);
+  const [selectedLength, setSelectedLength] = (0, _react.useState)(0); //? Если управляется сверху, то инициируемся текущим внешним значением
+
+  const [isValueHidden, setIsValueHidden] = (0, _react.useState)(typeof isHide === "boolean" ? isHide : isValueHiddenDefault);
+  const [isHiddenLogicInit, setIsHiddenLogicInit] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
   const keyDownRef = (0, _react.useRef)(null);
+
   const setKeyDown = keyCode => keyDownRef.current = keyCode;
+
   const getKeyDown = () => keyDownRef.current;
+
   const DynamicIconComponent = iconDynamicKey && !icon ? /*#__PURE__*/_react.default.createElement(_DynamicIcon.default, (0, _extends2.default)({
     iconKey: iconDynamicKey
   }, iconDynamicProps)) : null;
+
   const setCaret = caret => {
     if (caret < 0) caret = 0;
     const input = inputRef.current;
     if (input) setTimeout(() => input.setSelectionRange(caret, caret), 0);
-  };
+  }; // ERRORS MANAGEMENT FUNCTIONS | START //
+
 
-  // ERRORS MANAGEMENT FUNCTIONS | START //
   const [isError, setError] = (0, _react.useState)(false);
   const [blinkError, setBlinkError] = (0, _react.useState)(false);
   const [errorMessage, setErrorMessage] = (0, _react.useState)(errors.default);
-  const clearErrorMessage = () => setErrorMessage(errors.default);
-  // ERRORS MANAGEMENT FUNCTIONS | END //
 
+  const clearErrorMessage = () => setErrorMessage(errors.default); // ERRORS MANAGEMENT FUNCTIONS | END //
   // INNER VALUE MANAGEMENT FUNCTIONS | START //
+
+
   const [innerValue, setInnerValue] = (0, _react.useState)([]);
   const prevValueRef = (0, _react.useRef)([]);
+
   const addInnerValueChar = _ref => {
     let {
       char,
@@ -129,6 +150,7 @@ function InputMask3() {
       return stateCopy;
     });
   };
+
   const updateInnerValueChar = function () {
     let {
       char = null
@@ -141,14 +163,17 @@ function InputMask3() {
       return stateCopy;
     });
   };
+
   const resetInnerValue = () => {
     setInnerValue(innerValue => innerValue.map(item => {
       if (!item.isSpecialSymbol && item.char !== null) item.char = "";
       return item;
     }));
   };
+
   const setValue = function (value) {
     var _maskPattern;
+
     let disableErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     value = value === null || value === undefined ? "" : value.toString();
     resetInnerValue();
@@ -158,12 +183,14 @@ function InputMask3() {
     setInnerValue(innerValue => {
       const newValue = innerValue.map((item, i) => {
         var _maskPattern2;
+
         const {
           isSpecialSymbol
         } = item;
         if (isSpecialSymbol) return item;
         let char = value[valueCharIndex];
         let whileLimit = ((_maskPattern2 = maskPattern) === null || _maskPattern2 === void 0 ? void 0 : _maskPattern2.length) || 0;
+
         while (whileLimit && (isSpecialSymbolChar({
           char: value[valueCharIndex]
         }) || !isValidChar({
@@ -173,9 +200,9 @@ function InputMask3() {
         }))) {
           whileLimit--;
           char = value[++valueCharIndex];
-        }
+        } // If Valid
+
 
-        // If Valid
         if (isValidChar({
           char,
           i,
@@ -183,15 +210,16 @@ function InputMask3() {
         })) {
           item.char = char;
         }
+
         ++valueCharIndex;
         return item;
       });
       return newValue;
     });
-  };
-  // INNER VALUE MANAGEMENT FUNCTIONS | END //
-
+  }; // INNER VALUE MANAGEMENT FUNCTIONS | END //
   // GETTERS | START //
+
+
   const getCharObj = function (char) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const isSpecialSymbol = isSpecialSymbolChar({
@@ -210,28 +238,35 @@ function InputMask3() {
       ...data
     };
   };
+
   const getCharByIndex = i => {
-    return innerValue[i] ? {
-      ...innerValue[i]
+    return innerValue[i] ? { ...innerValue[i]
     } : undefined;
   };
+
   const getMaskCharByIndex = i => {
     var _innerValue$i;
+
     return ((_innerValue$i = innerValue[i]) === null || _innerValue$i === void 0 ? void 0 : _innerValue$i.maskChar) || undefined;
   };
+
   const getPlaceholderCharByIndex = i => {
     const {
       maskChar
     } = getCharByIndex(i);
+
     if (usePatternPlaceholder) {
       return maskPatternPlaceholder[i] || maskPlaceholder;
     }
+
     if ((0, _functions.isDigitMaskChar)(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
     if ((0, _functions.isLetterMaskChar)(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
     return maskPlaceholder;
   };
+
   const getInputValue = function () {
     var _getClearInnerValueAs;
+
     let {
       noLastTyppedCharIndexCheck,
       noHide = false
@@ -249,6 +284,7 @@ function InputMask3() {
         char,
         isSpecialSymbol
       } = _ref3;
+
       if (char !== "" && isValid && (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)) {
         if (isValueHidden && !isSpecialSymbol && !noHide && (maxHiddenIndex === -1 || i <= maxHiddenIndex)) {
           result += hiddenChar;
@@ -258,13 +294,16 @@ function InputMask3() {
       } else {
         isValid = false;
       }
+
       return result;
     }, "");
     if (((_getClearInnerValueAs = getClearInnerValueAsString(value)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) === 0) return "";
     return value;
   };
+
   const getClearInnerValueAsString = valueProp => {
-    var _ref5;
+    var _ref5, _ref5$split;
+
     const symbolsInfo = innerValue === null || innerValue === void 0 ? void 0 : innerValue.map(_ref4 => {
       let {
         isSpecialSymbol,
@@ -278,16 +317,16 @@ function InputMask3() {
     const clearValue = (_ref5 = valueProp !== null && valueProp !== void 0 ? valueProp : getInputValue({
       noLastTyppedCharIndexCheck: true,
       noHide: true
-    })) === null || _ref5 === void 0 || (_ref5 = _ref5.split("")) === null || _ref5 === void 0 ? void 0 : _ref5.reduce((resultStr, symbol, i) => {
+    })) === null || _ref5 === void 0 ? void 0 : (_ref5$split = _ref5.split("")) === null || _ref5$split === void 0 ? void 0 : _ref5$split.reduce((resultStr, symbol, i) => {
       if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol) resultStr += symbol;
       return resultStr;
     }, "");
     return clearValue;
   };
-  const inputValue = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]);
-  // GETTERS | END //
 
+  const inputValue = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]); // GETTERS | END //
   // CHECKERS | START //
+
   const isValidChar = _ref6 => {
     let {
       char: key,
@@ -295,63 +334,79 @@ function InputMask3() {
       disableErrors = false
     } = _ref6;
     const maskChar = getMaskCharByIndex(i);
+
     switch (maskChar) {
       case _config.DIGIT_MASK_CHAR:
         if (!(0, _functions.isDigit)(key)) {
           if (!disableErrors) {
             setErrorMessage(errors.onlyDigit);
           }
+
           return false;
         }
+
         break;
+
       case _config.UPPERCASE_LETTER_MASK_CHAR:
         if (adaptTextCase) key = key.toUpperCase();
+
         if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
           if (!disableErrors) setErrorMessage(errors.onlyLetter);
           return false;
         }
+
         if (isCaseSensitive && !(0, _functions.isUpperCaseLetter)(key)) {
           if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
           return false;
         }
+
         break;
+
       case _config.LOWERCASE_LETTER_MASK_CHAR:
         if (adaptTextCase) key = key.toLowerCase();
+
         if (!(0, _functions.isLetter)(key) && !isCaseSensitive) {
           if (!disableErrors) setErrorMessage(errors.onlyLetter);
           return false;
         }
+
         if (isCaseSensitive && !(0, _functions.isLowerCaseLetter)(key)) {
           if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
           return false;
         }
+
         break;
+
       default:
         return false;
     }
+
     return true;
   };
+
   const isSpecialSymbolMaskChar = _ref7 => {
     let {
       char
     } = _ref7;
     return !(0, _functions.isDigitMaskChar)(char) && !(0, _functions.isLetterMaskChar)(char);
   };
+
   const isSpecialSymbolChar = _ref8 => {
     let {
       char
     } = _ref8;
     return !(0, _functions.isDigit)(char) && !(0, _functions.isLetter)(char);
   };
+
   const isSpecialSymbol = i => {
     var _getCharByIndex;
-    return (_getCharByIndex = getCharByIndex(i)) === null || _getCharByIndex === void 0 ? void 0 : _getCharByIndex.isSpecialSymbol;
-  };
-  // CHECKERS | END //
 
+    return (_getCharByIndex = getCharByIndex(i)) === null || _getCharByIndex === void 0 ? void 0 : _getCharByIndex.isSpecialSymbol;
+  }; // CHECKERS | END //
   /// --- Event Handlers ---///
-
   // GENERAL EVENT HANDLERS | START //
+
+
   const onVisibleChange = e => {
     clearErrorMessage();
     const {
@@ -363,16 +418,17 @@ function InputMask3() {
         data: char
       }
     } = e;
+
     if (caretPos > maxEditableIndex) {
       (0, _utils.disableDefaultBehavior)();
       setCaret(maxEditableIndex);
       setBlinkError(true);
       return;
     }
+
     setValue(value);
-    const caretOffset = value.length - caretPos;
+    const caretOffset = value.length - caretPos; // Correct Caret Position
 
-    // Correct Caret Position
     if (!value.lastIndexEqualsTo(caretPos - 1)) {
       if (value.longerThan(inputValue)) {
         if (!isValidChar({
@@ -391,8 +447,10 @@ function InputMask3() {
             if (isSpecialSymbol(caretPos)) {
               (0, _utils.disableDefaultBehavior)(e);
             }
+
             setCaret(caretPos);
             break;
+
           case _index.KEYBOARD_KEY_CODES.Delete:
             if (isSpecialSymbol(caretPos)) {
               (0, _utils.disableDefaultBehavior)(e);
@@ -400,17 +458,21 @@ function InputMask3() {
             } 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(() => {
         if ((value.longerThan(inputValue) && !isSpecialSymbol(caretPos - 1) || inputValue.longerThan(value) && !isSpecialSymbol(caretPos)) && (char && !isValidChar({
@@ -423,8 +485,10 @@ function InputMask3() {
       }, 0);
     }
   };
+
   const onHiddenChange = e => {
     var _maskPattern3, _maskPattern4;
+
     const SSN = getInputValue({
       noHide: true
     });
@@ -433,84 +497,100 @@ function InputMask3() {
         value
       }
     } = e;
+
     if (value.replace(/-/g, "").length < SSN.replace(/-/g, "").length) {
       const last = SSN.length - 1;
       setValue(SSN.slice(0, last));
       return;
     }
+
     const numValue = value.replace(/\D/g, "");
-    let newSSN = "";
+    let newSSN = ""; //! maxHiddenIndex - это индекс, НЕ length. Поэтому нужно добавить 1
 
-    //! maxHiddenIndex - это индекс, НЕ length. Поэтому нужно добавить 1
     const staticLength = maxHiddenIndex !== -1 ? maxHiddenIndex + 1 : (_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);
   };
+
   const onChange = isValueHidden ? onHiddenChange : onVisibleChange;
+
   const onKeyDown = e => {
-    onKeyDownProp === null || onKeyDownProp === void 0 || onKeyDownProp(e);
+    onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
     const {
       keyCode
     } = e;
     setKeyDown(keyCode);
   };
+
   const onKeyUp = e => {
-    setKeyDown(null);
-    // On Filled Callback
+    setKeyDown(null); // On Filled Callback
+
     if (getInputValue({
       noLastTyppedCharIndexCheck: true
     }).length === maskPattern.length && e.target.selectionStart >= maxEditableIndex) {
       onFilledProp();
     }
   };
+
   const onClearClick = e => {
     var _inputRef$current;
+
     e.stopPropagation();
     e.preventDefault();
     resetInnerValue();
-    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     setCaret(0);
     clearErrorMessage();
   };
+
   const onHiddenToggle = value => {
     var _inputRef$current2;
+
     // ? Добавлена возможность принудительной установки велью (опционально)
-    const newValue = typeof value === 'boolean' ? value : !isValueHidden;
+    const newValue = typeof value === "boolean" ? value : !isValueHidden;
     setIsValueHidden(newValue);
-    inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+    if (isHiddenLogicInit) inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
   };
+
   const onFocus = () => {
     setFocused(true);
     onFocusProp();
   };
+
   const onBlur = () => {
     setFocused(false);
     onBlurProp();
   };
+
   const onClick = e => {
     const cursor = e.target.selectionStart;
     if (cursor >= maxEditableIndex) setCaret(maxEditableIndex);
   };
+
   const onSelect = e => {
     var _e$target, _ref9;
+
     const {
       selectionStart,
       selectionEnd
     } = (_e$target = e.target) !== null && _e$target !== void 0 ? _e$target : {};
     setSelectedLength((_ref9 = selectionEnd - selectionStart) !== null && _ref9 !== void 0 ? _ref9 : 0);
     if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
-  };
-  // GENERAL EVENT HANDLERS | END //
-
+  }; // GENERAL EVENT HANDLERS | END //
   /// --- OBSERVERS ---///
   // Render Mask
+
+
   (0, _react.useEffect)(() => {
     setIsInitValue(false);
     setInnerValue([]);
@@ -535,26 +615,26 @@ function InputMask3() {
       setValue(value);
       setIsInitValue(true);
     }
-  }, [isMaskRendered, value, isInitValue]);
+  }, [isMaskRendered, value, isInitValue]); // OnChange Observer
 
-  // OnChange Observer
   (0, _react.useEffect)(() => {
     if (isMaskRendered && isInitValue) {
       var _prevValueRef$current, _prevValueRef$current2;
+
       setError(false);
       const values = [getClearInnerValueAsString(), getInputValue({
         noLastTyppedCharIndexCheck: true,
         noHide: true
       })];
       if (returnMaskedValue) values.reverse();
-      if ((prevValueRef === null || prevValueRef === void 0 || (_prevValueRef$current = prevValueRef.current) === null || _prevValueRef$current === void 0 ? void 0 : _prevValueRef$current[0]) !== values[0] && (prevValueRef === null || prevValueRef === void 0 || (_prevValueRef$current2 = prevValueRef.current) === null || _prevValueRef$current2 === void 0 ? void 0 : _prevValueRef$current2[1]) !== values[1]) {
+
+      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]) {
         prevValueRef.current = values;
         onChangeProp(...values);
       }
     }
-  }, [innerValue, isMaskRendered, isInitValue]);
+  }, [innerValue, isMaskRendered, isInitValue]); // Blink Error
 
-  // Blink Error
   (0, _react.useEffect)(() => {
     if (blinkError) {
       setTimeout(() => {
@@ -567,12 +647,11 @@ function InputMask3() {
     setErrorMessage(customError === "" ? errors.default : customError);
   }, [customError, isError]);
   (0, _react.useEffect)(() => {
-    if (typeof isHide === 'boolean') {
+    if (typeof isHide === "boolean") {
       onHiddenToggle(isHide);
+      if (!isHiddenLogicInit) setIsHiddenLogicInit(true);
     }
-  }, [isHide]);
-
-  /// --- RENDER ---///
+  }, [isHide]); /// --- RENDER ---///
 
   const renderChar = function (obj, i) {
     let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
@@ -595,30 +674,38 @@ function InputMask3() {
       ref: ref
     }, !isFocused && hideMaskOnBlur && getClearInnerValueAsString().length === 0 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === "" ? getPlaceholderCharByIndex(i) : char);
   };
+
   const renderMaskChar = (obj, i) => renderChar(obj, i, "input-mask_value_item_mask-char");
-  const renderValueChar = (obj, i) => isValueHidden && (maxHiddenIndex === -1 || i <= maxHiddenIndex) ? renderChar({
-    ...obj,
+
+  const renderValueChar = (obj, i) => isValueHidden && (maxHiddenIndex === -1 || i <= maxHiddenIndex) ? renderChar({ ...obj,
     char: hiddenChar
   }, i, "input-mask_value_item_value-hidden-char") : renderChar(obj, i, "input-mask_value_item_value-char");
+
   const renderSpecialChar = (obj, i) => renderChar(obj, i, "input-mask_value_item_spec-char");
+
   const renderInputValue = () => {
     return innerValue.map((obj, i) => {
       const {
         char,
         isSpecialSymbol
       } = obj;
+
       if (isSpecialSymbol) {
         return renderSpecialChar(obj, i);
       }
+
       const isMaskItem = (() => char === "")();
+
       return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
     });
   };
+
   const renderMask = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_value"
     }, renderInputValue());
   };
+
   const renderInput = () => {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       tabIndex: disabled || isLoading ? -1 : 0,
@@ -649,6 +736,7 @@ function InputMask3() {
       onSelect: onSelect
     }, attributesOfNativeInput));
   };
+
   const renderHideToggler = () => {
     return /*#__PURE__*/_react.default.createElement("span", {
       className: "formatted-raw-ssn-eye-holder",
@@ -662,6 +750,7 @@ function InputMask3() {
       className: "password-icon"
     }));
   };
+
   const renderClearButton = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_clear"
@@ -669,6 +758,7 @@ function InputMask3() {
       onClick: onClearClick
     }));
   };
+
   const renderHint = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_hint input-mask_hint--".concat(hintPosition)
@@ -678,12 +768,14 @@ function InputMask3() {
       side: hintPosition
     }));
   };
+
   const renderIcon = function () {
     let 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);
   };
+
   const render = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("input-mask3_wrapper", className, {
@@ -698,11 +790,12 @@ function InputMask3() {
       tabIndex: -1
     }, /*#__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 && typeof isHide !== 'boolean' && renderHideToggler(), isClearable && renderClearButton(), isIconRight && showIcon && renderIcon("right"), showHint && isHintRight && renderHint()), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+    }, showHint && isHintLeft && renderHint(), isIconLeft && showIcon && renderIcon("left"), renderMask(), renderInput(), withHiddenMode && typeof isHide !== "boolean" && 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();
 }