intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/Input/Input.js

@@ -1 +1,467 @@
-function e(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(t){n(e,t,r[t])})}return e}function r(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):(function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t})(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}),e}function o(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var i=[],u=!0,a=!1;try{for(o=o.call(e);!(u=(t=o.next()).done)&&(i.push(t.value),!n||i.length!==n);u=!0);}catch(e){a=!0,r=e}finally{try{u||null==o.return||o.return()}finally{if(a)throw r}}return i}}(e,n)||u(e,n)||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 i(n){return function(n){if(Array.isArray(n))return e(n)}(n)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(n)||u(n)||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 u(n,t){if(n){if("string"==typeof n)return e(n,t);var r=Object.prototype.toString.call(n).slice(8,-1);if("Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(n,t)}}import{jsx as a,jsxs as l}from"react/jsx-runtime";import c from"classnames";import s,{useEffect as f,useMemo as p,useRef as m,useState as d}from"react";import{KEYBOARD_SERVICE_KEYS as y}from"../../../Constants/index.constants";import{filterNumeric as b,formatToAddBitDepthPoints as v,formatToOnlyASCIICodeText as g,formatToRemoveComa as h,getSafelyValue as N}from"../../../Functions/fieldValueFormatters";import{getIsOnlyAnObject as O}from"../../../Functions/utils";import w from"../../Layout/Spinner/Spinner";import j from"../../UI/DynamicIcon/DynamicIcon";import"./Input.scss";var k=s.forwardRef(function(e,u){var s,k=e.blurTrim,S=e.autocomplete,x=e.isSelect,C=e.onChange,P=void 0===C?function(){}:C,E=e.onBlur,D=void 0===E?function(){}:E,A=e.onFocus,I=void 0===A?function(){}:A,M=e.onKeyUp,_=void 0===M?function(){}:M,F=e.onKeyDown,B=void 0===F?function(){}:F,K=e.isNotBlinkErrors,T=e.isPriceInput,R=e.onlyNumbers,U=e.disabled,V=e.withDelete,L=e.value,$=e.placeholder,z=e.className,H=e.type,Y=void 0===H?"text":H,q=e.mask,G=e.maskChar,J=e.formatChars,Q=e.error,W=e.icon,X=e.iconDynamicKey,Z=e.iconDynamicProps,ee=e.symbolsLimit,en=e.blinkTime,et=e.isFocusDefault,er=void 0!==et&&et,eo=e.isNotValidateASCII,ei=void 0!==eo&&eo,eu=e.isNumericMobileKeyboard,ea=e.isCropFirstNool,el=void 0!==ea&&ea,ec=e.testId,es=e.action,ef=e.isUseAutoSelect,ep=void 0===ef||ef,em=e.isReadOnly,ed=e.isLoading,ey=void 0!==ed&&ed,eb=e.name,ev=e.fieldKey,eg=e.id,eh=e.attributesOfNativeInput,eN=void 0===eh?{}:eh,eO=k||{},ew=eO.trimStart,ej=eO.trimEnd,ek=eO.characters,eS=X&&!W?a(j,t({iconKey:X},void 0===Z?{}:Z)):null,ex=o(d(!1),2),eC=ex[0],eP=ex[1],eE=o(d(!1),2),eD=eE[0],eA=eE[1],eI=m(null),eM=p(function(){return u||eI},[u]),e_=o(d(!1),2),eF=e_[0],eB=e_[1],eK=o(d(!1),2),eT=eK[0],eR=eK[1],eU=o(d(!1),2),eV=eU[0],eL=eU[1],e$=o(d(L),2),ez=e$[0],eH=e$[1],eY=o(d({start:null,end:null,keyCode:null}),2),eq=eY[0],eG=eY[1],eJ=!!R&&T,eQ=!K&&!q,eW="pseudoPassword"===Y,eX={correctMinMax:function(e,n){if(!R)return e;var t,r=O(R)?R:{},o=r.min,i=r.max,u=r.isOnlyPositive,a=r.isNoEmptyValues,l=Number.isNaN(Number(o))||null===o||!(o>=0)&&u?void 0:o,c=Number.isNaN(Number(i))||null===i||!(i>=0)&&u?void 0:i,s=N(e),f=function(){!s&&a?s=void 0!==l?l:"0":s&&!Number.isNaN(Number(l))&&Number(l)>Number((null!=t?t:"")+s)&&(s=l)},p=function(){!Number.isNaN(Number(c))&&Number(c)<Number((null!=t?t:"")+s)&&(s=c,t=null)};switch(eJ&&(s=h(s)),!u&&"-"===s[0]&&(t="-",s=s.slice(1)),s=b(s,R),n){case"min":f();break;case"max":p();break;default:f(),p()}return s},processPseudoValue:function(e,n){var t=e.replace(RegExp("•","g"),"");if(t.length>1)return t;var r=e.replace(new RegExp(/^HIDE_SYMBOL/g),"").length<n.length,o=n.split(""),i=function(e){return eq.start===eq.end&&(t?e<eq.start:8===eq.keyCode?e<eq.start-1||e>eq.end-1:e<eq.start||e>eq.end)};if(!t)return o.reduce(function(e,n,t){return i(t)?"".concat(e).concat(n):e},"");var u=o.reduce(function(e,n,r){return i(r)?e.result="".concat(e.result).concat(n):e.position||(e.position=t?r:r-1),e},{result:"",position:r?null:eq.start});return"".concat(u.result.slice(0,u.position)).concat(t).concat(u.result.slice(u.position))},change:function(e){var n,t=(O(R)?R:{}).isOnlyPositive,r=e.target?e.target.value:e;if(eW&&(r=r.includes("•")?eX.processPseudoValue(r,L,e):r),T&&","===r.charAt(r.length-1)&&(r=r.substring(0,r.length-1).concat(".")),eJ&&(r=h(r)),R&&(r=r.replace(/,/g,".")),R&&!t&&"-"===r[0]&&(n="-",r=r.slice(1)),ei||(r=g(r)),ee&&r.length>Number(ee)&&(r=r.substring(0,Number(ee))),el&&0==r[0])return"";R&&(r=eX.correctMinMax(r,"max")),P(((null!=n?n:"")+r).toString())},toggleEdit:function(){eA(!eD),P("")},focus:function(e){eP(!0),I(e)},blur:function(e){var n=eX.correctMinMax(N(L),"min");ew&&(n=n.replace(new RegExp("^[".concat(ek,"]+")),"")),ej&&(n=n.replace(new RegExp("[".concat(ek,"]+$")),"")),L!==n&&P(n),eP(!1),eA(!1),D&&setTimeout(function(){return D(e)},0)},keyDown:function(e){var n;eH(null==e||null==(n=e.target)?void 0:n.value),eG({start:e.target.selectionStart,end:e.target.selectionEnd,keyCode:e.keyCode}),B(e.keyCode,e)},keyUp:function(e){if(eQ){var n="".concat(null!=L?L:""),t="".concat(ez),r=t.length<=n.length?t:n,o=t.length>n.length?t:n,i=r.split("").reduce(function(e,n,t){return e.countOn&&n===o[t]?e.same.push(n):(e.countOn=!1,e.differences.push([t,n])),e},{same:[],countOn:!0,differences:[]}),u=i.same.join(""),a=i.differences.length,l=null==n?void 0:n.replace(u,"");y.includes(e.key)||n!==t||eB(!(!a&&e.key===l))}_(e.keyCode,e)}};f(function(){var e,n;eD&&(null==eM||null==(n=eM.current)||null==(e=n.focus)||e.call(n))},[eD,eC]),f(function(){eA(null!=x&&x)},[x]),f(function(){eQ&&eF&&(eB(null),eR(!0),setTimeout(function(){eR(!1)},en||100))},[eF]),f(function(){(null==eM?void 0:eM.current)&&"boolean"==typeof er&&eP(er),eA(er)},[eM,er]);var eZ=(s=N(L),eW?s.split("").map(function(){return"•"}).join(""):((null==R?void 0:R.isNoEmptyValues)&&(s=eX.correctMinMax(s,"min")),eJ&&(s=v(s,R)),s)),e0=t({name:eb||ev||eg,className:c("input",z,{"input--with-icon":W,"input--with-delete":V}),placeholder:$,value:eZ,inputMode:void 0!==eu&&eu?"decimal":"text",disabled:U,onChange:eX.change,onFocus:eX.focus,onBlur:eX.blur,onKeyUp:eX.keyUp,onKeyDown:eX.keyDown},G?{maskChar:G}:{},J?{formatChars:J}:{});return l("div",{"data-testid":void 0===ec?"input":ec,className:c("input__wrap",n({},"input__wrap_focus",eC),n({},"input__wrap_error",Q||eT),n({},"input__wrap--disabled",U||ey)),onMouseEnter:function(){return eL(!0)},onMouseLeave:function(){return eL(!1)},children:[a("input",r(t(r(t({readOnly:void 0!==em&&em},e0),{ref:eM,type:T||eW?"text":Y,autoComplete:eW||void 0===S?"off":S}),eN),{onFocus:function(){for(var e,n=arguments.length,t=Array(n),r=0;r<n;r++)t[r]=arguments[r];null==eN||null==(e=eN.onFocus)||e.call.apply(e,[eN].concat(i(t))),ep&&eM.current.select(),e0.onFocus&&e0.onFocus.apply(e0,i(t))},onBlur:function(){for(var e,n=arguments.length,t=Array(n),r=0;r<n;r++)t[r]=arguments[r];null==eN||null==(e=eN.onBlur)||e.call.apply(e,[eN].concat(i(t))),e0.onBlur&&e0.onBlur.apply(e0,i(t))}})),null!=eS?eS:W,es,V&&eV&&a("span",{className:c("input__close",{hidden:!N(L)}),onClick:eX.toggleEdit}),ey&&a(w,{size:"small"})]})});export default k;
+import cn from "classnames";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+// import InputMask from 'react-input-mask';
+import { KEYBOARD_SERVICE_KEYS } from "../../../Constants/index.constants";
+import {
+  filterNumeric,
+  formatToAddBitDepthPoints as addCommas,
+  formatToOnlyASCIICodeText,
+  formatToRemoveComa as removeCommas,
+  getSafelyValue
+} from "../../../Functions/fieldValueFormatters";
+import { getIsOnlyAnObject } from "../../../Functions/utils";
+import Spinner from "../../Layout/Spinner/Spinner";
+import DynamicIcon from "../../UI/DynamicIcon/DynamicIcon";
+
+import "./Input.scss";
+
+const HIDE_SYMBOL = "\u2022";
+
+/**
+ * Input компонент.
+ *
+ * @component
+ * @param {object} props.blurTrim - Обрезает ведущие и оконечные символы строки при потере фокуса.
+ * @param {string} props.autocomplete - Определяет, должен ли браузер включать автозаполнение ввода пользователя.
+ * @param {boolean} props.isSelect - Определяет, будет ли компонент редактироваться по умолчанию при загрузке страницы.
+ * @param {function} props.onChange - Функция, которая вызывается при изменении содержимого элемента управления формы.
+ * @param {function} props.onBlur - Функция, которая вызывается при потере элементом управления фокуса.
+ * @param {function} props.onFocus - Функция, вызываемая при получении элементом управления фокуса.
+ * @param {function} props.onKeyUp - Функция, которая вызывается при отпускании клавиши.
+ * @param {function} props.onKeyDown - Функция, вызываемая при нажатии на клавишу.
+ * @param {boolean} props.isNotBlinkErrors - Отключает мигание элемента управления при ошибках.
+ * @param {boolean} props.isPriceInput - Определяет, будет ли компонент ввода формата числа с плавающей точкой.
+ * @param {boolean} props.onlyNumbers - Определяет, будет ли компонент прозволять только цифры.
+ * @param {boolean} props.isOnlyString - Определяет, будет ли компонент разрешать
+ * только строки (без чисел или других символов).
+ * @param {boolean} props.disabled - Блокировка поля ввода.
+ * @param {boolean} props.withDelete - Включает отображение кнопки удаления контента.
+ * @param {string} props.value - Значение поля ввода.
+ * @param {string} props.placeholder - Текст подсказки внутри поля ввода.
+ * @param {string} props.className - Строка с именами классов, применяемыми к компоненту.
+ * @param {string} props.type - Тип компонента ввода (например, 'text', 'password').
+ * @param {boolean} props.softStringMode - Используется для включения нестрогого режима ввода символов.
+ * @param {object} props.mask - Маска для поля ввода.
+ * @param {string} props.maskChar - Свойство определяет символ,
+ * используемый вместо пропущенных символов при введении маски.
+ * @param {object} props.formatChars - Объект, определяющий символы, которые должны быть заменены в маске.
+ * @param {string} props.error - Строка с сообщением об ошибке.
+ * @param {number} props.symbolsLimit - Лимит символов ввода.
+ * @param {number} props.blinkTime - Время мигания в миллисекундах.
+ * @param {boolean} props.isFocusDefault - Определяет, будет ли элемент получать фокус при загрузке страницы.
+ * @param {boolean} props.isNotValidateASCII - Отключает проверку ASCII для вводимых символов.
+ * @param {boolean} props.isNumericMobileKeyboard - Отображает цифровую клавиатуру на мобильных устройствах.
+ */
+const Input = React.forwardRef(
+  (
+    {
+      blurTrim,
+      autocomplete = "off",
+      isSelect,
+      onChange = () => {},
+      onBlur = () => {},
+      onFocus = () => {},
+      onKeyUp = () => {},
+      onKeyDown = () => {},
+      isNotBlinkErrors,
+      isPriceInput,
+      onlyNumbers,
+      disabled,
+      withDelete,
+      value,
+      placeholder,
+      className,
+      type = "text",
+      mask,
+      maskChar,
+      formatChars,
+      error,
+      icon,
+      iconDynamicKey,
+      iconDynamicProps = {},
+      symbolsLimit,
+      blinkTime,
+      isFocusDefault = false,
+      isNotValidateASCII = false,
+      isNumericMobileKeyboard = false,
+      isCropFirstNool = false,
+      testId = "input",
+      action,
+      isUseAutoSelect = true,
+      isReadOnly = false,
+      isLoading = false,
+      name,
+      fieldKey,
+      id,
+      attributesOfNativeInput = {},
+    },
+    ref,
+  ) => {
+    const { trimStart, trimEnd, characters } = blurTrim || {};
+    const DynamicIconComponent =
+      iconDynamicKey && !icon ? (
+        <DynamicIcon iconKey={iconDynamicKey} {...iconDynamicProps} />
+      ) : null;
+    const DEFAULT_BLINK_TIME = 100;
+    // STATES
+    const [isFocused, setIsFocused] = useState(false);
+    const [isEditing, setEditing] = useState(false);
+    const inputInnerRef = useRef(null);
+    const inputRef = useMemo(() => ref || inputInnerRef, [ref]);
+    // const previousValueRef = useRef(value);
+    const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+    const [isToHighlightError, setIsToHighlightError] = useState(false);
+    const [onInputHover, setOnInputHover] = useState(false);
+
+    const [prevValue, setPreviousValue] = useState(value);
+    const [keyDownData, setKeyDownData] = useState({
+      start: null,
+      end: null,
+      keyCode: null,
+    });
+
+    const isUseBitDepthPoints = Boolean(onlyNumbers) && isPriceInput;
+    const isUseErrorsBlink = !isNotBlinkErrors && !mask;
+
+    const inputName = name || fieldKey || id;
+
+    const isPseudoPasswordMode = type === "pseudoPassword";
+
+    // HANDLES
+    const handle = {
+      correctMinMax: (value, correctionType) => {
+        if (!onlyNumbers) return value;
+
+        const { min, max, isOnlyPositive, isNoEmptyValues } = getIsOnlyAnObject(
+          onlyNumbers,
+        )
+          ? onlyNumbers
+          : {};
+        const minimum =
+          !Number.isNaN(Number(min)) &&
+          min !== null &&
+          (min >= 0 || !isOnlyPositive)
+            ? min
+            : undefined;
+        const maximum =
+          !Number.isNaN(Number(max)) &&
+          max !== null &&
+          (max >= 0 || !isOnlyPositive)
+            ? max
+            : undefined;
+
+        let minusSymbol;
+        let inputValue = getSafelyValue(value);
+
+        const checkMin = () => {
+          if (!inputValue && isNoEmptyValues)
+            inputValue = minimum !== undefined ? minimum : "0";
+          else if (
+            inputValue &&
+            !Number.isNaN(Number(minimum)) &&
+            Number(minimum) > Number((minusSymbol ?? "") + inputValue)
+          )
+            inputValue = minimum;
+        };
+
+        const checkMax = () => {
+          if (
+            !Number.isNaN(Number(maximum)) &&
+            Number(maximum) < Number((minusSymbol ?? "") + inputValue)
+          ) {
+            inputValue = maximum;
+            minusSymbol = null;
+          }
+        };
+
+        if (isUseBitDepthPoints) inputValue = removeCommas(inputValue);
+        if (!isOnlyPositive && inputValue[0] === "-") {
+          minusSymbol = "-";
+          inputValue = inputValue.slice(1);
+        }
+
+        inputValue = filterNumeric(inputValue, onlyNumbers);
+
+        switch (correctionType) {
+          case "min":
+            checkMin();
+            break;
+          case "max":
+            checkMax();
+            break;
+          default:
+            checkMin();
+            checkMax();
+            break;
+        }
+        return inputValue;
+      },
+
+      processPseudoValue: (newValue, oldValue) => {
+        const insertedPart = newValue.replace(new RegExp(HIDE_SYMBOL, "g"), "");
+
+        // ? Если insertedPart.length > 1, то это точно копи-паст
+        // ? По договоренности любой копипаст заменяет текущее велью 
+        if (insertedPart.length > 1) return insertedPart;
+
+        const isOldValueHasBeenReduced =
+          newValue.replace(new RegExp(/^HIDE_SYMBOL/g), "").length <
+          oldValue.length;
+        const oldValueArr = oldValue.split("");
+
+        const getIsInclude = (idx) => {
+          const BACKSPACE_CODE = 8;
+
+          // ? Если позиции не равны, значит была выделена область, значит будем воспринимать как копи-паст
+          if (keyDownData.start !== keyDownData.end) return false;
+
+          // ? Если позиции равны и есть вставляемое значение - обрезаем "хвост"
+          if (insertedPart) return idx < keyDownData.start;
+
+          // ? Если позиции равны и нет вставляемого значения - значит симвовол удалили
+          return keyDownData.keyCode === BACKSPACE_CODE
+            ? idx < keyDownData.start - 1 || idx > keyDownData.end - 1
+            : idx < keyDownData.start || idx > keyDownData.end;
+        };
+
+        if (!insertedPart)
+          return oldValueArr.reduce(
+            (acc, sym, idx) => (getIsInclude(idx) ? `${acc}${sym}` : acc),
+            "",
+          );
+
+        const outputStructure = oldValueArr.reduce(
+          (acc, sym, idx) => {
+            if (getIsInclude(idx)) acc.result = `${acc.result}${sym}`;
+            else if (!acc.position) acc.position = insertedPart ? idx : idx - 1;
+            return acc;
+          },
+          {
+            result: "",
+            position: !isOldValueHasBeenReduced ? keyDownData.start : null,
+          },
+        );
+
+        const output = `${outputStructure.result.slice(
+          0,
+          outputStructure.position,
+        )}${insertedPart}${outputStructure.result.slice(outputStructure.position)}`;
+
+        return output;
+      },
+
+      change: (e) => {
+        const { isOnlyPositive } = getIsOnlyAnObject(onlyNumbers)
+          ? onlyNumbers
+          : {};
+
+        let minusSymbol;
+        let inputValue = e.target ? e.target.value : e;
+        if (isPseudoPasswordMode)
+          inputValue = inputValue.includes(HIDE_SYMBOL)
+            ? handle.processPseudoValue(inputValue, value, e)
+            : inputValue;
+        
+        // If user typed comma(',') replace it to dot('.') for float value typing
+        if (isPriceInput && inputValue.charAt(inputValue.length-1) === ',') inputValue = inputValue.substring(0, inputValue.length-1).concat('.');
+
+        if (isUseBitDepthPoints) inputValue = removeCommas(inputValue);
+        if (onlyNumbers) inputValue = inputValue.replace(/,/g, ".");
+
+        if (onlyNumbers && !isOnlyPositive && inputValue[0] === "-") {
+          minusSymbol = "-";
+          inputValue = inputValue.slice(1);
+        }
+        if (!isNotValidateASCII)
+          inputValue = formatToOnlyASCIICodeText(inputValue);
+        if (symbolsLimit && inputValue.length > Number(symbolsLimit))
+          inputValue = inputValue.substring(0, Number(symbolsLimit));
+        if (isCropFirstNool && inputValue[0] == 0) return "";
+        else if (onlyNumbers)
+          inputValue = handle.correctMinMax(inputValue, "max");
+        onChange(((minusSymbol ?? "") + inputValue).toString());
+      },
+      toggleEdit: () => {
+        setEditing(!isEditing);
+        onChange("");
+      },
+      focus: (e) => {
+        setIsFocused(true);
+        onFocus(e);
+      },
+      blur: (e) => {
+        let inputValue = handle.correctMinMax(getSafelyValue(value), "min");
+        if (trimStart)
+          inputValue = inputValue.replace(new RegExp(`^[${characters}]+`), "");
+        if (trimEnd)
+          inputValue = inputValue.replace(new RegExp(`[${characters}]+$`), "");
+
+        if (value !== inputValue) onChange(inputValue);
+
+        setIsFocused(false);
+        setEditing(false);
+        // использую setTimeout для того чтоб прошли переназначения велью, если они есть,
+        // для того, чтоб верхний onBlur при обращении к e.target.value получал обновленное велью
+        if (onBlur) setTimeout(() => onBlur(e), 0);
+      },
+      keyDown: (e) => {
+        setPreviousValue(e?.target?.value);
+        setKeyDownData({
+          start: e.target.selectionStart,
+          end: e.target.selectionEnd,
+          keyCode: e.keyCode,
+        });
+        onKeyDown(e.keyCode, e);
+      },
+      keyUp: (e) => {
+        if (isUseErrorsBlink) {
+          const changedValue = `${value ?? ""}`;
+          const previousValue = `${prevValue}`;
+
+          const short =
+            previousValue.length <= changedValue.length
+              ? previousValue
+              : changedValue;
+          const long =
+            previousValue.length > changedValue.length
+              ? previousValue
+              : changedValue;
+
+          const infoAboutDifferencesSameness = short.split("").reduce(
+            (acc, symbol, idx) => {
+              if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);
+              else {
+                acc.countOn = false;
+                acc.differences.push([idx, symbol]);
+              }
+              return acc;
+            },
+            { same: [], countOn: true, differences: [] },
+          );
+
+          const samePart = infoAboutDifferencesSameness.same.join("");
+          const differencesLength =
+            infoAboutDifferencesSameness.differences.length;
+          const currentSet = changedValue?.replace(samePart, "");
+
+          if (
+            !KEYBOARD_SERVICE_KEYS.includes(e.key) &&
+            changedValue === previousValue
+          )
+            setIsAttemptToChange(!(!differencesLength && e.key === currentSet));
+        }
+
+        onKeyUp(e.keyCode, e);
+      },
+    };
+
+    useEffect(() => {
+      if (isEditing) inputRef?.current?.focus?.();
+    }, [isEditing, isFocused]);
+
+    useEffect(() => {
+      setEditing(isSelect ?? false);
+    }, [isSelect]);
+
+    useEffect(() => {
+      if (isUseErrorsBlink && isAttemptToChange) {
+        setIsAttemptToChange(null);
+        setIsToHighlightError(true);
+        setTimeout(() => {
+          setIsToHighlightError(false);
+        }, blinkTime || DEFAULT_BLINK_TIME);
+      }
+    }, [isAttemptToChange]);
+
+    useEffect(() => {
+      if (inputRef?.current && typeof isFocusDefault === "boolean")
+        setIsFocused(isFocusDefault);
+      setEditing(isFocusDefault);
+    }, [inputRef, isFocusDefault]);
+
+    const getInputType = () => {
+      if (isPriceInput || isPseudoPasswordMode) return "text";
+      return type;
+    };
+
+    const formatedValue = (() => {
+      let safelyValue = getSafelyValue(value);
+
+      const hideSymbols = () =>
+        safelyValue
+          .split("")
+          .map(() => HIDE_SYMBOL)
+          .join("");
+
+      if (isPseudoPasswordMode) return hideSymbols();
+      if (onlyNumbers?.isNoEmptyValues)
+        safelyValue = handle.correctMinMax(safelyValue, "min");
+      if (isUseBitDepthPoints)
+        safelyValue = addCommas(safelyValue, onlyNumbers);
+      return safelyValue;
+    })();
+
+    const uniProps = {
+      name: inputName,
+      className: cn("input", className, {
+        "input--with-icon": icon,
+        "input--with-delete": withDelete,
+      }),
+      placeholder,
+      value: formatedValue,
+      inputMode: isNumericMobileKeyboard ? "decimal" : "text",
+      disabled,
+      onChange: handle.change,
+      onFocus: handle.focus,
+      onBlur: handle.blur,
+      onKeyUp: handle.keyUp,
+      onKeyDown: handle.keyDown,
+      ...(maskChar ? { maskChar } : {}),
+      ...(formatChars ? { formatChars } : {}),
+    };
+
+    return (
+      <div
+        data-testid={testId}
+        className={cn(
+          `input__wrap`,
+          { [`input__wrap_focus`]: isFocused },
+          { [`input__wrap_error`]: error || isToHighlightError },
+          { [`input__wrap--disabled`]: disabled || isLoading },
+        )}
+        onMouseEnter={() => setOnInputHover(true)}
+        onMouseLeave={() => setOnInputHover(false)}
+      >
+        <input
+          readOnly={isReadOnly}
+          {...uniProps}
+          ref={inputRef}
+          type={getInputType()}
+          autoComplete={isPseudoPasswordMode ? "off" : autocomplete}
+          {...attributesOfNativeInput}
+          onFocus={(...params) => {
+            attributesOfNativeInput?.onFocus?.(...params);
+            if (isUseAutoSelect) inputRef.current.select();
+            if (uniProps.onFocus) uniProps.onFocus(...params);
+          }}
+          onBlur={(...params) => {
+            attributesOfNativeInput?.onBlur?.(...params);
+            if (uniProps.onBlur) uniProps.onBlur(...params);
+          }}
+        />
+        {DynamicIconComponent ?? icon}
+        {action}
+        {withDelete && onInputHover && (
+          <span
+            className={cn(`input__close`, { hidden: !getSafelyValue(value) })}
+            onClick={handle.toggleEdit}
+          />
+        )}
+        {isLoading && <Spinner size="small" />}
+      </div>
+    );
+  },
+);
+
+export default Input;

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -1 +1,161 @@
-function t(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=Array(n);e<n;e++)r[e]=t[e];return r}function n(n,e){return function(t){if(Array.isArray(t))return t}(n)||function(t,n){var e,r,a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var o=[],i=!0,l=!1;try{for(a=a.call(t);!(i=(e=a.next()).done)&&(o.push(e.value),!n||o.length!==n);i=!0);}catch(t){l=!0,r=t}finally{try{i||null==a.return||a.return()}finally{if(l)throw r}}return o}}(n,e)||function(n,e){if(n){if("string"==typeof n)return t(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);if("Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return t(n,e)}}(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.")}()}import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as a,useRef as o,useState as i}from"react";import l from"classnames";import u from"moment-timezone";import d from"react-input-mask";import{useClickOutside as f}from"../../../Functions/useClickOutside";import m from"../Calendar/Calendar";import"./InputCalendar.scss";export default function(t){var s,c=t.value,p=t.minDate,y=t.maxDate,v=t.format,b=void 0===v?"MM/DD/YYYY":v,h=t.isDontLimitFuture,D=t.onChange,g=t.className,x=t.placeholder,C=t.mask,I=t.isListTop,O=t.disabled,k=(t.disabledFormattedMaxDate,t.testId),w=t.onKeyDown,A=void 0===w?function(t){}:w,j=t.onKeyUp,L=void 0===j?function(t){}:j,M=t.onBlur,S=n(i(null),2),F=S[0],K=S[1],Y=n(i(!1),2),_=(Y[0],Y[1]),B=o(null),N=o(null),T="Invalid date"!==u(p,b).format(b)?u(p,b).format(b):null,U="Invalid date"!==u(y,b).format(b)?u(y,b).format(b):null,z=u(T,b).startOf("day"),E=u(U,b).startOf("day");f(B,function(){return K(!1)});var $=function(t){D&&D(t)},q=function(t){D&&D(t)};a(function(){"boolean"!=typeof F||F||G()},[F]);var G=function(t){var n,e=null==N||null==(n=N.current)?void 0:n.value;("Invalid date"===u(e,b).format(b)||e.indexOf("_")>-1)&&(e=""),e&&"boolean"==typeof F&&u(e,b).startOf("day").isBefore(z,"days")?D(T):e&&"boolean"==typeof F&&u(e,b).endOf("day").isAfter(E,"days")?D(U):e&&D(u(e,b).format(b))};return r("div",{"data-testid":void 0===k?"input-calendar":k,className:l("input__wrap calendar-container",void 0===g?"":g,{"calendar-container_disabled":O}),ref:B,children:[e(d,{mask:void 0===C?"99/99/9999":C,placeholder:void 0===x?"mm/dd/yyyy":x,value:c,onChange:function(t){return $(t.target.value)},className:"calendar-dropdown",onClick:function(){return K(!0)},onKeyUp:function(t){var n,e=(null==(n=t.target.value)?void 0:n.replace(/[^0-9]/g,"").length)===8;[9,13].includes(t.keyCode)&&(K(!0),_(!0)),e?(K(!1),G()):K(!0),L(t)},onKeyDown:function(t){F&&[9,13].includes(t.keyCode)&&(K(!1),_(!0)),A(t)},onBlur:void 0===M?function(t){}:M,ref:N}),F?e(m,{date:"Invalid date"!==(s=u(c).format("L"))?s:u(new Date).format("L"),setDate:function(t){return q(t)},params:{format:b,minDate:T,maxDate:U,momentMinDate:z,momentMaxDate:E,isDontLimitFuture:h},isListTop:I,setIsOpened:K}):null]})}
+import React, { useEffect, useRef, useState } from "react";
+
+import cn from "classnames";
+import moment from "moment-timezone";
+import InputMask from "react-input-mask";
+
+import { useClickOutside } from "../../../Functions/useClickOutside";
+import Calendar from "../Calendar/Calendar";
+
+import "./InputCalendar.scss";
+
+const InputCalendar = ({
+  value,
+  minDate,
+  maxDate,
+  format = "MM/DD/YYYY",
+  isDontLimitFuture,
+  onChange,
+  className = "",
+  placeholder = "mm/dd/yyyy",
+  mask = "99/99/9999",
+  isListTop,
+  disabled,
+  disabledFormattedMaxDate = false,
+  testId = "input-calendar",
+
+  onKeyDown: onKeyDownProp = (e) => {},
+  onKeyUp: onKeyUpProp = (e) => {},
+  onBlur: onBlurProp = (e) => {},
+}) => {
+  const [isOpened, setIsOpened] = useState(null);
+  const [isOpenedByEnter, setOpenedByEnter] = useState(false);
+  const calendarRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const formattedMinDate =
+    moment(minDate, format).format(format) !== "Invalid date"
+      ? moment(minDate, format).format(format)
+      : null;
+  const formattedMaxDate =
+    moment(maxDate, format).format(format) !== "Invalid date"
+      ? moment(maxDate, format).format(format)
+      : null;
+
+  const momentMinDate = moment(formattedMinDate, format).startOf("day");
+  const momentMaxDate = moment(formattedMaxDate, format).startOf("day");
+
+  useClickOutside(calendarRef, () => setIsOpened(false));
+
+  const changeInputValue = (val) => {
+    if (onChange) onChange(val);
+  };
+
+  const changeCalendarDay = (val) => {
+    if (onChange) onChange(val);
+  };
+
+  const getCalendarValue = (value) => {
+    const date = moment(value).format("L");
+
+    if (date !== "Invalid date") return date;
+
+    return moment(new Date()).format("L");
+  };
+
+  useEffect(() => {
+    if (typeof isOpened === "boolean" && !isOpened) {
+      handleBlur();
+    }
+  }, [isOpened]);
+
+  const handleBlur = (e) => {
+    let value = inputRef?.current?.value;
+    if (
+      moment(value, format).format(format) === "Invalid date" ||
+      value.indexOf("_") > -1
+    )
+      value = "";
+
+    if (
+      value &&
+      typeof isOpened === "boolean" &&
+      moment(value, format).startOf("day").isBefore(momentMinDate, "days")
+    )
+      onChange(formattedMinDate);
+    else if (
+      value &&
+      typeof isOpened === "boolean" &&
+      moment(value, format).endOf("day").isAfter(momentMaxDate, "days")
+    )
+      onChange(formattedMaxDate);
+    else if (value) onChange(moment(value, format).format(format));
+  };
+
+  const onKeyDown = (e) => {
+    if (isOpened && [9, 13].includes(e.keyCode)) {
+      setIsOpened(false);
+      setOpenedByEnter(true);
+    }
+
+    onKeyDownProp(e);
+  };
+
+  const onKeyUp = (e) => {
+    const isValidLenght = e.target.value?.replace(/[^0-9]/g, "").length === 8;
+
+    if ([9, 13].includes(e.keyCode)) {
+      setIsOpened(true);
+      setOpenedByEnter(true);
+    }
+
+    if (isValidLenght) {
+      setIsOpened(false);
+      handleBlur();
+    } else {
+      setIsOpened(true);
+    }
+    onKeyUpProp(e);
+  };
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn("input__wrap calendar-container", className, {
+        "calendar-container_disabled": disabled,
+      })}
+      ref={calendarRef}
+    >
+      <InputMask
+        mask={mask}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => changeInputValue(e.target.value)}
+        className="calendar-dropdown"
+        onClick={() => setIsOpened(true)}
+        onKeyUp={onKeyUp}
+        onKeyDown={onKeyDown}
+        onBlur={onBlurProp}
+        ref={inputRef}
+      />
+      {isOpened ? (
+        <Calendar
+          date={getCalendarValue(value)}
+          setDate={(newDate) => changeCalendarDay(newDate)}
+          params={{
+            format,
+            minDate: formattedMinDate,
+            maxDate: formattedMaxDate,
+            momentMinDate,
+            momentMaxDate,
+            isDontLimitFuture,
+          }}
+          isListTop={isListTop}
+          setIsOpened={setIsOpened}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default InputCalendar;