intelicoreact 1.6.25 → 1.6.26

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

@@ -1,766 +1 @@
-import React, { createRef, useEffect, useMemo, useRef, useState } from "react";
-
-import cn from "classnames";
-import { Eye, EyeOff, X } from "react-feather";
-
-import { KEYBOARD_KEY_CODES as KEY_CODES } from "../../../Constants/index.constants";
-import { disableDefaultBehavior } from "../../../Functions/utils";
-import Spinner from "../../Layout/Spinner/Spinner";
-import DynamicIcon from "../../UI/DynamicIcon/DynamicIcon";
-import Hint from "../../UI/Hint/Hint";
-
-import {
-  DEFAULT_ERRORS,
-  DIGIT_MASK_CHAR,
-  LOWERCASE_LETTER_MASK_CHAR,
-  SPACE_CHAR,
-  UPPERCASE_LETTER_MASK_CHAR,
-} from "./config";
-import {
-  isDigit,
-  isDigitMaskChar,
-  isLetter,
-  isLetterMaskChar,
-  isLowerCaseLetter,
-  isUpperCaseLetter,
-} from "./functions";
-
-import "./InputMask3.scss";
-
-export default function InputMask3({
-  autocomplete = "off",
-  maskPattern,
-  maskPatternPlaceholder,
-  maskPlaceholder,
-  maskDigitPlaceholder,
-  maskLetterPlaceholder,
-  usePatternPlaceholder,
-
-  maxEditableIndex = -1,
-
-  isFocusedDefault = false,
-  isClearable,
-  isCaseSensitive,
-  adaptTextCase,
-  isUseAutoSelect = true,
-  isLoading = false,
-
-  // Включает/отключает режим скрытия в принциепе.
-  withHiddenMode = false,
-  // Символ которым скрывааеются символы
-  hiddenChar = "*",
-  // Индекс последнего скрываемогосимвола
-  // Индекс нужно передавать с УЧЕТОМ не значащих символов маски,
-  // при этом не значащие символы скрываться НЕ будут
-  maxHiddenIndex = -1,
-  // Инициализационнное значение положения "скрыть" (если НЕ управляется сверху)
-  isValueHiddenDefault = false,
-
-  // ? Если передана как булева, то режим скрытия управляется ей, здешний триггер (глазик) НЕ рендерится
-  // ? Если НЕ передана ка булева, то режим скрытия обеспечиватся своим внутренним стором, здешний триггер (глазик) рендерится
-  isHide, // булева пропа для управления сверху
-
-  icon,
-  showIcon,
-  isIconLeft,
-  isIconRight,
-  iconDynamicKey,
-  iconDynamicProps = {},
-  value,
-  blinkErrors = true,
-  blinkDuration = 100,
-  showErrors = false,
-
-  className = "",
-  errors: customErrors = DEFAULT_ERRORS,
-  error: customError = "",
-
-  onChange: onChangeProp = () => {},
-  onFocus: onFocusProp = () => {},
-  onBlur: onBlurProp = () => {},
-  onKeyDown: onKeyDownProp = () => {},
-  onFilled: onFilledProp = () => {},
-
-  showHint = false,
-  hintText = "",
-  hintClassName = "",
-  isHintRight = true,
-  isHintLeft = false,
-  hintPosition = "right",
-
-  hideMaskOnBlur = true,
-  returnMaskedValue = false,
-
-  name,
-  fieldKey,
-  id,
-  disabled,
-  testId = "input-mask",
-
-  attributesOfNativeInput = {},
-} = {}) {
-  const errors = {
-    ...DEFAULT_ERRORS,
-    ...customErrors,
-  };
-
-  if (maxEditableIndex === -1) maxEditableIndex = maskPattern.length;
-
-  const [isMaskRendered, setMaskRendered] = useState(false);
-  const [isFocused, setFocused] = useState(false);
-  const [isInitValue, setIsInitValue] = useState(false);
-  const [selectedLength, setSelectedLength] = useState(0);
-  //? Если управляется сверху, то инициируемся текущим внешним значением
-  const [isValueHidden, setIsValueHidden] = useState(
-    typeof isHide === "boolean" ? isHide : isValueHiddenDefault,
-  );
-  const [isHiddenLogicInit, setIsHiddenLogicInit] = useState(false);
-
-  const inputRef = useRef(null);
-  const keyDownRef = useRef(null);
-  const setKeyDown = (keyCode) => (keyDownRef.current = keyCode);
-  const getKeyDown = () => keyDownRef.current;
-
-  const DynamicIconComponent =
-    iconDynamicKey && !icon ? (
-      <DynamicIcon 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 //
-  const [isError, setError] = useState(false);
-  const [blinkError, setBlinkError] = useState(false);
-
-  const [errorMessage, setErrorMessage] = useState(errors.default);
-  const clearErrorMessage = () => setErrorMessage(errors.default);
-  // ERRORS MANAGEMENT FUNCTIONS | END //
-
-  // INNER VALUE MANAGEMENT FUNCTIONS | START //
-  const [innerValue, setInnerValue] = useState([]);
-
-  const prevValueRef = useRef([]);
-
-  const addInnerValueChar = ({ char, data = {} }) => {
-    setInnerValue((state) => {
-      const stateCopy = [...state];
-      const charObj = getCharObj(char, data);
-
-      stateCopy.push(charObj);
-
-      return stateCopy;
-    });
-  };
-  const updateInnerValueChar = ({ char = null } = {}, i) => {
-    setInnerValue((state) => {
-      if (!state[i]) return state;
-
-      const stateCopy = [...state];
-
-      if (!stateCopy[i].isSpecialSymbol && char !== null)
-        stateCopy[i].char = char;
-
-      return stateCopy;
-    });
-  };
-  const resetInnerValue = () => {
-    setInnerValue((innerValue) =>
-      innerValue.map((item) => {
-        if (!item.isSpecialSymbol && item.char !== null) item.char = "";
-        return item;
-      }),
-    );
-  };
-  const setValue = (value, disableErrors = true) => {
-    value = value === null || value === undefined ? "" : value.toString();
-
-    resetInnerValue();
-    const staticLength = maskPattern.length - maxEditableIndex;
-
-    if (value.length > maxEditableIndex)
-      value = value.slice(0, value.length - staticLength);
-    else if (maxEditableIndex !== maskPattern?.length - 1)
-      value = value.slice(0, maxEditableIndex);
-    let valueCharIndex = 0;
-    setInnerValue((innerValue) => {
-      const newValue = innerValue.map((item, i) => {
-        const { isSpecialSymbol } = item;
-        if (isSpecialSymbol) return item;
-        let char = value[valueCharIndex];
-        let whileLimit = maskPattern?.length || 0;
-
-        while (
-          whileLimit &&
-          (isSpecialSymbolChar({ char: value[valueCharIndex] }) ||
-            !isValidChar({ char, i, disableErrors: true }))
-        ) {
-          whileLimit--;
-          char = value[++valueCharIndex];
-        }
-
-        // If Valid
-        if (isValidChar({ char, i, disableErrors })) {
-          item.char = char;
-        }
-
-        ++valueCharIndex;
-
-        return item;
-      });
-
-      return newValue;
-    });
-  };
-  // INNER VALUE MANAGEMENT FUNCTIONS | END //
-
-  // GETTERS | START //
-  const getCharObj = (char, data = {}) => {
-    const isSpecialSymbol = isSpecialSymbolChar({ char });
-    const isSpecialSymbolMask = isSpecialSymbolMaskChar({ char });
-
-    if (char === " ") char = SPACE_CHAR;
-
-    return {
-      char: isSpecialSymbolMask ? char : "",
-      maskChar: char,
-      isSpecialSymbol: isSpecialSymbolMask,
-      isCharSymbol: !isSpecialSymbol && char !== "" && isSpecialSymbolMask,
-      ref: createRef(),
-      ...data,
-    };
-  };
-  const getCharByIndex = (i) => {
-    return innerValue[i] ? { ...innerValue[i] } : undefined;
-  };
-  const getMaskCharByIndex = (i) => {
-    return innerValue[i]?.maskChar || undefined;
-  };
-  const getPlaceholderCharByIndex = (i) => {
-    const { maskChar } = getCharByIndex(i);
-
-    if (usePatternPlaceholder) {
-      return maskPatternPlaceholder[i] || maskPlaceholder;
-    }
-    if (isDigitMaskChar(maskChar) && maskDigitPlaceholder)
-      return maskDigitPlaceholder;
-    if (isLetterMaskChar(maskChar) && maskLetterPlaceholder)
-      return maskLetterPlaceholder;
-    return maskPlaceholder;
-  };
-  const getInputValue = ({
-    noLastTyppedCharIndexCheck,
-    noHide = false,
-  } = {}) => {
-    let isValid = true;
-
-    const lastTyppedCharIndex = innerValue.reduce(
-      (result, { char, isSpecialSymbol }, i) =>
-        char !== "" && !isSpecialSymbol ? i : result,
-      0,
-    );
-
-    const value = innerValue.reduce((result, { char, isSpecialSymbol }, i) => {
-      if (
-        char !== "" &&
-        isValid &&
-        (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)
-      ) {
-        if (
-          isValueHidden &&
-          !isSpecialSymbol &&
-          !noHide &&
-          (maxHiddenIndex === -1 || i <= maxHiddenIndex)
-        ) {
-          result += hiddenChar;
-        } else {
-          result += char;
-        }
-      } else {
-        isValid = false;
-      }
-
-      return result;
-    }, "");
-
-    if (getClearInnerValueAsString(value)?.length === 0) return "";
-
-    return value;
-  };
-  const getClearInnerValueAsString = (valueProp) => {
-    const symbolsInfo = innerValue?.map(
-      ({ isSpecialSymbol, isCharSymbol }) => ({
-        isSpecialSymbol,
-        isCharSymbol,
-      }),
-    );
-    const clearValue = (
-      valueProp ??
-      getInputValue({ noLastTyppedCharIndexCheck: true, noHide: true })
-    )
-      ?.split("")
-      ?.reduce((resultStr, symbol, i) => {
-        if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol)
-          resultStr += symbol;
-        return resultStr;
-      }, "");
-
-    return clearValue;
-  };
-  const inputValue = useMemo(getInputValue, [innerValue, isValueHidden]);
-  // GETTERS | END //
-
-  // CHECKERS | START //
-  const isValidChar = ({ char: key, i, disableErrors = false }) => {
-    const 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;
-    }
-
-    return true;
-  };
-  const isSpecialSymbolMaskChar = ({ char }) => {
-    return !isDigitMaskChar(char) && !isLetterMaskChar(char);
-  };
-  const isSpecialSymbolChar = ({ char }) => {
-    return !isDigit(char) && !isLetter(char);
-  };
-  const isSpecialSymbol = (i) => getCharByIndex(i)?.isSpecialSymbol;
-  // CHECKERS | END //
-
-  /// --- Event Handlers ---///
-
-  // GENERAL EVENT HANDLERS | START //
-  const onVisibleChange = (e) => {
-    clearErrorMessage();
-
-    const {
-      target: { value, selectionStart: caretPos },
-      nativeEvent: { data: char },
-    } = e;
-
-    if (caretPos > maxEditableIndex) {
-      disableDefaultBehavior();
-      setCaret(maxEditableIndex);
-      setBlinkError(true);
-      return;
-    }
-
-    setValue(value);
-
-    const caretOffset = value.length - caretPos;
-
-    // Correct Caret Position
-    if (!value.lastIndexEqualsTo(caretPos - 1)) {
-      if (value.longerThan(inputValue)) {
-        if (!isValidChar({ char, i: caretPos - 1 })) {
-          disableDefaultBehavior(e);
-          setCaret(caretPos - 1);
-        } else {
-          const newCaretPos = value.length - caretOffset;
-          setCaret(
-            isSpecialSymbol(newCaretPos) ? newCaretPos + 1 : newCaretPos,
-          );
-        }
-      } else if (inputValue.longerThan(value)) {
-        switch (getKeyDown()) {
-          case KEY_CODES.Backspace:
-            if (isSpecialSymbol(caretPos)) {
-              disableDefaultBehavior(e);
-            }
-            setCaret(caretPos);
-            break;
-          case KEY_CODES.Delete:
-            if (isSpecialSymbol(caretPos)) {
-              disableDefaultBehavior(e);
-              setCaret(caretPos + 1);
-            } else {
-              setCaret(caretPos);
-            }
-            break;
-          default:
-            if (selectedLength > 0) {
-              setCaret(caretPos);
-            }
-        }
-      }
-    }
-
-    /* Checking if the character is a special symbol and if it is not, it is checking if the character
-  is valid or not. If it is not valid, it will blink the error. */
-    if (blinkErrors) {
-      setTimeout(() => {
-        if (
-          ((value.longerThan(inputValue) && !isSpecialSymbol(caretPos - 1)) ||
-            (inputValue.longerThan(value) && !isSpecialSymbol(caretPos))) &&
-          ((char && !isValidChar({ char, i: caretPos - 1 })) ||
-            (inputValue === getInputValue() &&
-              getInputValue()[caretPos - 1] !== char))
-        ) {
-          disableDefaultBehavior(e);
-          setBlinkError(true);
-        }
-      }, 0);
-    }
-  };
-  const onHiddenChange = (e) => {
-    const SSN = getInputValue({ noHide: true });
-
-    const {
-      target: { 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 = "";
-
-    //! maxHiddenIndex - это индекс, НЕ length. Поэтому нужно добавить 1
-    const staticLength =
-      maxHiddenIndex !== -1 ? maxHiddenIndex + 1 : maskPattern?.length;
-
-    if (SSN.length > staticLength) {
-      newSSN = SSN.slice(0, staticLength) + numValue;
-    } else {
-      newSSN = SSN + numValue;
-    }
-
-    if (newSSN.length > maskPattern?.length) {
-      return;
-    }
-    setValue(newSSN);
-  };
-  const onChange = isValueHidden ? onHiddenChange : onVisibleChange;
-  const onKeyDown = (e) => {
-    onKeyDownProp?.(e);
-
-    const { keyCode } = e;
-    setKeyDown(keyCode);
-  };
-  const onKeyUp = (e) => {
-    setKeyDown(null);
-    // On Filled Callback
-    if (
-      getInputValue({ noLastTyppedCharIndexCheck: true }).length ===
-        maskPattern.length &&
-      e.target.selectionStart >= maxEditableIndex
-    ) {
-      onFilledProp();
-    }
-  };
-  const onClearClick = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-
-    resetInnerValue();
-
-    inputRef?.current?.focus();
-    setCaret(0);
-    clearErrorMessage();
-  };
-  const onHiddenToggle = (value) => {
-    // ? Добавлена возможность принудительной установки велью (опционально)
-    const newValue = typeof value === "boolean" ? value : !isValueHidden;
-    setIsValueHidden(newValue);
-    if (isHiddenLogicInit) inputRef?.current?.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) => {
-    const { selectionStart, selectionEnd } = e.target ?? {};
-    setSelectedLength(selectionEnd - selectionStart ?? 0);
-    if (selectionStart >= maxEditableIndex) setCaret(maxEditableIndex);
-  };
-  // GENERAL EVENT HANDLERS | END //
-
-  /// --- OBSERVERS ---///
-  // Render Mask
-  useEffect(() => {
-    setIsInitValue(false);
-    setInnerValue([]);
-    setMaskRendered(false);
-
-    if (!maskPattern) maskPattern = "";
-
-    maskPattern.split("").map((char, id) => {
-      addInnerValueChar({
-        char,
-        data: { id, isReadOnly: id === maskPattern.length },
-      });
-      if (value?.[id]) updateInnerValueChar({ char: value[id] }, id);
-    });
-    setMaskRendered(true);
-  }, [maskPattern]);
-
-  useEffect(() => {
-    if (
-      (isMaskRendered && !isInitValue) ||
-      (isInitValue &&
-        ![getInputValue(), getClearInnerValueAsString()].includes(value))
-    ) {
-      setValue(value);
-      setIsInitValue(true);
-    }
-  }, [isMaskRendered, value, isInitValue]);
-
-  // OnChange Observer
-  useEffect(() => {
-    if (isMaskRendered && isInitValue) {
-      setError(false);
-      const values = [
-        getClearInnerValueAsString(),
-        getInputValue({ noLastTyppedCharIndexCheck: true, noHide: true }),
-      ];
-      if (returnMaskedValue) values.reverse();
-
-      if (
-        prevValueRef?.current?.[0] !== values[0] &&
-        prevValueRef?.current?.[1] !== values[1] && 
-        value !== getClearInnerValueAsString()
-      ) {
-        prevValueRef.current = values;
-        onChangeProp(...values);
-      }
-    }
-  }, [innerValue, isMaskRendered, isInitValue]);
-
-  // Blink Error
-  useEffect(() => {
-    if (blinkError) {
-      setTimeout(() => {
-        setBlinkError(false);
-      }, blinkDuration);
-    }
-  }, [blinkError]);
-
-  useEffect(() => {
-    setError(customError !== "");
-    setErrorMessage(customError === "" ? errors.default : customError);
-  }, [customError, isError]);
-
-  useEffect(() => {
-    if (typeof isHide === "boolean") {
-      onHiddenToggle(isHide);
-      if (!isHiddenLogicInit) setIsHiddenLogicInit(true);
-    }
-  }, [isHide]);
-
-  /// --- RENDER ---///
-
-  const renderChar = (obj, i, className = "") => {
-    const { char, ref, maskChar, isSpecialSymbol } = obj;
-
-    return (
-      <span
-        tabIndex={-1}
-        key={i}
-        attr-char-id={i}
-        className={cn("input-mask_value_item", className, {
-          "input-mask_value_item--digit": isDigitMaskChar(obj.maskChar),
-          "input-mask_value_item--letter": isLetterMaskChar(obj.maskChar),
-          "input-mask_value_item--spec": obj.isSpecialSymbol,
-          "input-mask_value_item--hidden": i < inputValue.length,
-        })}
-        ref={ref}
-      >
-        {!isFocused &&
-        hideMaskOnBlur &&
-        getClearInnerValueAsString().length === 0
-          ? SPACE_CHAR
-          : isSpecialSymbol
-            ? maskChar
-            : char === ""
-              ? getPlaceholderCharByIndex(i)
-              : char}
-      </span>
-    );
-  };
-  const renderMaskChar = (obj, i) =>
-    renderChar(obj, i, "input-mask_value_item_mask-char");
-  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 <div className="input-mask_value">{renderInputValue()}</div>;
-  };
-  const renderInput = () => {
-    return (
-      <input
-        tabIndex={disabled || isLoading ? -1 : 0}
-        readOnly={disabled || isLoading}
-        name={name || fieldKey || id || testId || ""}
-        className={`input-mask_input ${className}`}
-        ref={inputRef}
-        value={inputValue}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        onKeyUp={onKeyUp}
-        onBlur={onBlur}
-        onClick={onClick}
-        autoComplete={autocomplete}
-        onFocus={(...params) => {
-          if (isUseAutoSelect) inputRef.current.select();
-          if (onFocus) onFocus(...params);
-        }}
-        onDragStart={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        onDragEnd={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-        onSelect={onSelect}
-        {...attributesOfNativeInput}
-      />
-    );
-  };
-  const renderHideToggler = () => {
-    return (
-      <span className="formatted-raw-ssn-eye-holder" onClick={onHiddenToggle}>
-        {" "}
-        {isValueHidden ? (
-          <Eye strokeWidth={1} className="password-icon" />
-        ) : (
-          <EyeOff strokeWidth={1} className="password-icon" />
-        )}
-      </span>
-    );
-  };
-  const renderClearButton = () => {
-    return (
-      <div className="input-mask_clear">
-        <X onClick={onClearClick} />
-      </div>
-    );
-  };
-  const renderHint = () => {
-    return (
-      <div className={`input-mask_hint input-mask_hint--${hintPosition}`}>
-        <Hint hint={hintText} className={hintClassName} side={hintPosition} />
-      </div>
-    );
-  };
-  const renderIcon = (position = "left") => {
-    return (
-      <div className={`input-mask_icon input-mask_icon--${position}`}>
-        {DynamicIconComponent ?? icon}
-      </div>
-    );
-  };
-  const render = () => {
-    return (
-      <div
-        data-testid={testId}
-        className={cn(
-          "input-mask3_wrapper",
-          className,
-          { "input-mask_error": isError },
-          { "input-mask_focus": isFocused },
-          { "input-mask_blink-error": blinkError },
-          { disabled: disabled || isLoading },
-        )}
-        tabIndex={-1}
-      >
-        <div
-          className={`
-            input-mask
-            ${isError ? "input-mask_error" : ""}
-            ${isFocused ? "input-mask_focus" : ""}
-            ${blinkError ? "input-mask_blink-error" : ""}
-          `}
-        >
-          {showHint && isHintLeft && renderHint()}
-          {isIconLeft && showIcon && renderIcon("left")}
-          {renderMask()}
-          {renderInput()}
-          {/* Если isHide булева, значит будем управлять сверху, значит там свой триггер*/}
-          {withHiddenMode && typeof isHide !== "boolean" && renderHideToggler()}
-          {isClearable && renderClearButton()}
-          {isIconRight && showIcon && renderIcon("right")}
-          {showHint && isHintRight && renderHint()}
-        </div>
-        {showErrors && errorMessage && (
-          <div className="input-mask_error-text">{errorMessage}</div>
-        )}
-        {isLoading && <Spinner size="small" />}
-      </div>
-    );
-  };
-
-  return render();
-}
+function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function e(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),r.forEach(function(e){var r;r=t[e],e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r})}return n}function t(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var t,r,i=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=i){var a=[],o=!0,l=!1;try{for(i=i.call(n);!(o=(t=i.next()).done)&&(a.push(t.value),!e||a.length!==e);o=!0);}catch(n){l=!0,r=n}finally{try{o||null==i.return||i.return()}finally{if(l)throw r}}return a}}(n,e)||i(n,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(e)||i(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,t)}}import{jsx as a,jsxs as o}from"react/jsx-runtime";import{createRef as l,useEffect as u,useMemo as c,useRef as s,useState as d}from"react";import f from"classnames";import{Eye as m,EyeOff as p,X as v}from"react-feather";import{KEYBOARD_KEY_CODES as h}from"../../../Constants/index.constants";import{disableDefaultBehavior as y}from"../../../Functions/utils";import b from"../../Layout/Spinner/Spinner";import g from"../../UI/DynamicIcon/DynamicIcon";import k from"../../UI/Hint/Hint";import{DEFAULT_ERRORS as S,DIGIT_MASK_CHAR as _,LOWERCASE_LETTER_MASK_CHAR as C,SPACE_CHAR as O,UPPERCASE_LETTER_MASK_CHAR as w}from"./config";import{isDigit as I,isDigitMaskChar as D,isLetter as P,isLetterMaskChar as j,isLowerCaseLetter as x,isUpperCaseLetter as E}from"./functions";import"./InputMask3.scss";export default function N(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=n.autocomplete,N=n.maskPattern,T=n.maskPatternPlaceholder,H=n.maskPlaceholder,L=n.maskDigitPlaceholder,A=n.maskLetterPlaceholder,K=n.usePatternPlaceholder,U=n.maxEditableIndex,B=void 0===U?-1:U,F=(n.isFocusedDefault,n.isClearable),M=n.isCaseSensitive,R=n.adaptTextCase,V=n.isUseAutoSelect,W=void 0===V||V,Y=n.isLoading,q=void 0!==Y&&Y,z=n.withHiddenMode,$=n.hiddenChar,G=void 0===$?"*":$,J=n.maxHiddenIndex,Q=void 0===J?-1:J,X=n.isValueHiddenDefault,Z=n.isHide,nn=n.icon,ne=n.showIcon,nt=n.isIconLeft,nr=n.isIconRight,ni=n.iconDynamicKey,na=n.iconDynamicProps,no=n.value,nl=n.blinkErrors,nu=void 0===nl||nl,nc=n.blinkDuration,ns=void 0===nc?100:nc,nd=n.showErrors,nf=n.className,nm=void 0===nf?"":nf,np=n.errors,nv=n.error,nh=void 0===nv?"":nv,ny=n.onChange,nb=void 0===ny?function(){}:ny,ng=n.onFocus,nk=void 0===ng?function(){}:ng,nS=n.onBlur,n_=void 0===nS?function(){}:nS,nC=n.onKeyDown,nO=void 0===nC?function(){}:nC,nw=n.onFilled,nI=void 0===nw?function(){}:nw,nD=n.showHint,nP=void 0!==nD&&nD,nj=n.hintText,nx=void 0===nj?"":nj,nE=n.hintClassName,nN=void 0===nE?"":nE,nT=n.isHintRight,nH=n.isHintLeft,nL=n.hintPosition,nA=void 0===nL?"right":nL,nK=n.hideMaskOnBlur,nU=void 0===nK||nK,nB=n.returnMaskedValue,nF=void 0!==nB&&nB,nM=n.name,nR=n.fieldKey,nV=n.id,nW=n.disabled,nY=n.testId,nq=void 0===nY?"input-mask":nY,nz=n.attributesOfNativeInput,n$=e({},S,void 0===np?S:np);-1===B&&(B=N.length);var nG=t(d(!1),2),nJ=nG[0],nQ=nG[1],nX=t(d(!1),2),nZ=nX[0],n0=nX[1],n1=t(d(!1),2),n2=n1[0],n3=n1[1],n8=t(d(0),2),n6=n8[0],n4=n8[1],n5=t(d("boolean"==typeof Z?Z:void 0!==X&&X),2),n7=n5[0],n9=n5[1],en=t(d(!1),2),ee=en[0],et=en[1],er=s(null),ei=s(null),ea=function(n){return ei.current=n},eo=ni&&!nn?a(g,e({iconKey:ni},void 0===na?{}:na)):null,el=function(n){n<0&&(n=0);var e=er.current;e&&setTimeout(function(){return e.setSelectionRange(n,n)},0)},eu=t(d(!1),2),ec=eu[0],es=eu[1],ed=t(d(!1),2),ef=ed[0],em=ed[1],ep=t(d(n$.default),2),ev=ep[0],eh=ep[1],ey=function(){return eh(n$.default)},eb=t(d([]),2),eg=eb[0],ek=eb[1],eS=s([]),e_=function(n){var e=n.char,t=n.data,i=void 0===t?{}:t;ek(function(n){var t=r(n),a=eI(e,i);return t.push(a),t})},eC=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=n.char,t=void 0===e?null:e,i=arguments.length>1?arguments[1]:void 0;ek(function(n){if(!n[i])return n;var e=r(n);return e[i].isSpecialSymbol||null===t||(e[i].char=t),e})},eO=function(){ek(function(n){return n.map(function(n){return n.isSpecialSymbol||null===n.char||(n.char=""),n})})},ew=function(n){var e=!(arguments.length>1)||void 0===arguments[1]||arguments[1];n=null==n?"":n.toString(),eO();var t=N.length-B;n.length>B?n=n.slice(0,n.length-t):B!==(null==N?void 0:N.length)-1&&(n=n.slice(0,B));var r=0;ek(function(t){return t.map(function(t,i){if(t.isSpecialSymbol)return t;for(var a=n[r],o=(null==N?void 0:N.length)||0;o&&(eL({char:n[r]})||!eT({char:a,i:i,disableErrors:!0}));)o--,a=n[++r];return eT({char:a,i:i,disableErrors:e})&&(t.char=a),++r,t})})},eI=function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=eL({char:n}),i=eH({char:n});return" "===n&&(n=O),e({char:i?n:"",maskChar:n,isSpecialSymbol:i,isCharSymbol:!r&&""!==n&&i,ref:l()},t)},eD=function(n){return eg[n]?e({},eg[n]):void 0},eP=function(n){var e;return(null==(e=eg[n])?void 0:e.maskChar)||void 0},ej=function(n){var e=eD(n).maskChar;return K?T[n]||H:D(e)&&L?L:j(e)&&A?A:H},ex=function(){var n,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.noLastTyppedCharIndexCheck,r=e.noHide,i=void 0!==r&&r,a=!0,o=eg.reduce(function(n,e,t){var r=e.char,i=e.isSpecialSymbol;return""===r||i?n:t},0),l=eg.reduce(function(n,e,r){var l=e.char,u=e.isSpecialSymbol;return""!==l&&a&&(t||r<=o)?n7&&!u&&!i&&(-1===Q||r<=Q)?n+=G:n+=l:a=!1,n},"");return(null==(n=eE(l))?void 0:n.length)===0?"":l},eE=function(n){var e,t,r=null==eg?void 0:eg.map(function(n){return{isSpecialSymbol:n.isSpecialSymbol,isCharSymbol:n.isCharSymbol}});return null==(t=null!=n?n:ex({noLastTyppedCharIndexCheck:!0,noHide:!0}))||null==(e=t.split(""))?void 0:e.reduce(function(n,e,t){return(!r[t].isSpecialSymbol||r[t].isCharSymbol)&&(n+=e),n},"")},eN=c(ex,[eg,n7]),eT=function(n){var e=n.char,t=n.i,r=n.disableErrors,i=void 0!==r&&r;switch(eP(t)){case _:if(!I(e))return i||eh(n$.onlyDigit),!1;break;case w:if(R&&(e=e.toUpperCase()),!P(e)&&!M)return i||eh(n$.onlyLetter),!1;if(M&&!E(e))return i||eh(n$.onlyUpperCase),!1;break;case C:if(R&&(e=e.toLowerCase()),!P(e)&&!M)return i||eh(n$.onlyLetter),!1;if(M&&!x(e))return i||eh(n$.onlyLowerCase),!1;break;default:return!1}return!0},eH=function(n){var e=n.char;return!D(e)&&!j(e)},eL=function(n){var e=n.char;return!I(e)&&!P(e)},eA=function(n){var e;return null==(e=eD(n))?void 0:e.isSpecialSymbol},eK=n7?function(n){var e=ex({noHide:!0}),t=n.target.value;if(t.replace(/-/g,"").length<e.replace(/-/g,"").length){var r=e.length-1;ew(e.slice(0,r));return}var i=t.replace(/\D/g,""),a="",o=-1!==Q?Q+1:null==N?void 0:N.length;(a=e.length>o?e.slice(0,o)+i:e+i).length>(null==N?void 0:N.length)||ew(a)}:function(n){ey();var e=n.target,t=e.value,r=e.selectionStart,i=n.nativeEvent.data;if(r>B){y(),el(B),em(!0);return}ew(t);var a=t.length-r;if(!t.lastIndexEqualsTo(r-1)){if(t.longerThan(eN))if(eT({char:i,i:r-1})){var o=t.length-a;el(eA(o)?o+1:o)}else y(n),el(r-1);else if(eN.longerThan(t))switch(ei.current){case h.Backspace:eA(r)&&y(n),el(r);break;case h.Delete:eA(r)?(y(n),el(r+1)):el(r);break;default:n6>0&&el(r)}}nu&&setTimeout(function(){(t.longerThan(eN)&&!eA(r-1)||eN.longerThan(t)&&!eA(r))&&(i&&!eT({char:i,i:r-1})||eN===ex()&&ex()[r-1]!==i)&&(y(n),em(!0))},0)},eU=function(n){var e;n9("boolean"==typeof n?n:!n7),ee&&(null==er||null==(e=er.current)||e.focus())},eB=function(){n0(!0),nk()};u(function(){n3(!1),ek([]),nQ(!1),N||(N=""),N.split("").map(function(n,e){e_({char:n,data:{id:e,isReadOnly:e===N.length}}),(null==no?void 0:no[e])&&eC({char:no[e]},e)}),nQ(!0)},[N]),u(function(){(nJ&&!n2||n2&&![ex(),eE()].includes(no))&&(ew(no),n3(!0))},[nJ,no,n2]),u(function(){if(nJ&&n2){es(!1);var n,e,t=[eE(),ex({noLastTyppedCharIndexCheck:!0,noHide:!0})];nF&&t.reverse(),(null==eS||null==(n=eS.current)?void 0:n[0])!==t[0]&&(null==eS||null==(e=eS.current)?void 0:e[1])!==t[1]&&no!==eE()&&(eS.current=t,nb.apply(void 0,r(t)))}},[eg,nJ,n2]),u(function(){ef&&setTimeout(function(){em(!1)},ns)},[ef]),u(function(){es(""!==nh),eh(""===nh?n$.default:nh)},[nh,ec]),u(function(){"boolean"==typeof Z&&(eU(Z),ee||et(!0))},[Z]);var eF=function(n,e){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",r=n.char,i=n.ref,o=n.maskChar,l=n.isSpecialSymbol;return a("span",{tabIndex:-1,"attr-char-id":e,className:f("input-mask_value_item",t,{"input-mask_value_item--digit":D(n.maskChar),"input-mask_value_item--letter":j(n.maskChar),"input-mask_value_item--spec":n.isSpecialSymbol,"input-mask_value_item--hidden":e<eN.length}),ref:i,children:!nZ&&nU&&0===eE().length?O:l?o:""===r?ej(e):r},e)},eM=function(n,t){var r,i;return n7&&(-1===Q||t<=Q)?eF((r=e({},n),i=i={char:G},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):(function(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t.push.apply(t,r)}return t})(Object(i)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(i,n))}),r),t,"input-mask_value_item_value-hidden-char"):eF(n,t,"input-mask_value_item_value-char")},eR=function(){return a("div",{className:"input-mask_hint input-mask_hint--".concat(nA),children:a(k,{hint:nx,className:nN,side:nA})})},eV=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"left";return a("div",{className:"input-mask_icon input-mask_icon--".concat(n),children:null!=eo?eo:nn})};return o("div",{"data-testid":nq,className:f("input-mask3_wrapper",nm,{"input-mask_error":ec},{"input-mask_focus":nZ},{"input-mask_blink-error":ef},{disabled:nW||q}),tabIndex:-1,children:[o("div",{className:"\n            input-mask\n            ".concat(ec?"input-mask_error":"","\n            ").concat(nZ?"input-mask_focus":"","\n            ").concat(ef?"input-mask_blink-error":"","\n          "),children:[nP&&void 0!==nH&&nH&&eR(),nt&&ne&&eV("left"),a("div",{className:"input-mask_value",children:eg.map(function(n,e){var t=n.char;return n.isSpecialSymbol?eF(n,e,"input-mask_value_item_spec-char"):""===t?eF(n,e,"input-mask_value_item_mask-char"):eM(n,e)})}),a("input",e({tabIndex:nW||q?-1:0,readOnly:nW||q,name:nM||nR||nV||nq||"",className:"input-mask_input ".concat(nm),ref:er,value:eN,onChange:eK,onKeyDown:function(n){null==nO||nO(n),ea(n.keyCode)},onKeyUp:function(n){ea(null),ex({noLastTyppedCharIndexCheck:!0}).length===N.length&&n.target.selectionStart>=B&&nI()},onBlur:function(){n0(!1),n_()},onClick:function(n){n.target.selectionStart>=B&&el(B)},autoComplete:void 0===i?"off":i,onFocus:function(){for(var n=arguments.length,e=Array(n),t=0;t<n;t++)e[t]=arguments[t];W&&er.current.select(),eB&&eB.apply(void 0,r(e))},onDragStart:function(n){n.stopPropagation(),n.preventDefault()},onDragEnd:function(n){n.stopPropagation(),n.preventDefault()},onSelect:function(n){var e,t=null!=(e=n.target)?e:{},r=t.selectionStart;n4(t.selectionEnd-r),r>=B&&el(B)}},void 0===nz?{}:nz)),void 0!==z&&z&&"boolean"!=typeof Z&&o("span",{className:"formatted-raw-ssn-eye-holder",onClick:eU,children:[" ",n7?a(m,{strokeWidth:1,className:"password-icon"}):a(p,{strokeWidth:1,className:"password-icon"})]}),F&&a("div",{className:"input-mask_clear",children:a(v,{onClick:function(n){var e;n.stopPropagation(),n.preventDefault(),eO(),null==er||null==(e=er.current)||e.focus(),el(0),ey()}})}),nr&&ne&&eV("right"),nP&&(void 0===nT||nT)&&eR()]}),void 0!==nd&&nd&&ev&&a("div",{className:"input-mask_error-text",children:ev}),q&&a(b,{size:"small"})]})}