intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/InputColor/InputColor.js

@@ -1 +1,64 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import r from"classnames";import{formatToHex as o,formatToOnlyASCIICodeText as n}from"../../../Functions/fieldValueFormatters";import i from"../Input/Input";import"./InputColor.scss";export default function(l){var a,c,s=l.value,u=l.className,p=l.symbolsLimit,b=void 0===p?7:p,m=l.onChange,f=l.withHexFormat,O=void 0===f?{withSharp:!1,isTurnOn:!0}:f,y=l.initialHexOfColorBlock,g=l.testId,h=l.withDelete,v=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],!(e.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(l,["value","className","symbolsLimit","onChange","withHexFormat","initialHexOfColorBlock","testId","withDelete"]),j=O.withSharp,d=O.isTurnOn;return e("div",{className:r("inputColor",u),children:[t("div",{className:r("inputColor__color-block"),style:{backgroundColor:s&&7===s.length?s:void 0===y?"#9AA0B9":y}}),t(i,(a=function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),o.forEach(function(e){var o;o=r[e],e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o})}return t}({},v),c=c={value:s,withDelete:void 0===h||h,onChange:function(t){var e=(null==t?void 0:t.target)?t.target.value:t;e=n(e),d&&(e=o({inputValue:e,withSharp:j})),b&&e.length>Number(b)&&(e=e.substring(0,Number(b))),null==m||m(e)},symbolsLimit:b||7,testId:"inputColor--key-".concat(void 0===g?"":g),className:r("input inputColor__input"),type:"text"},Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(c)):(function(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);r.push.apply(r,o)}return r})(Object(c)).forEach(function(t){Object.defineProperty(a,t,Object.getOwnPropertyDescriptor(c,t))}),a))]})}
+import React from "react";
+
+import cn from "classnames";
+
+import {
+  formatToHex,
+  formatToOnlyASCIICodeText,
+} from "../../../Functions/fieldValueFormatters";
+import Input from "../Input/Input";
+
+import "./InputColor.scss";
+
+const InputColor = ({
+  value,
+  className,
+  symbolsLimit = 7,
+  onChange,
+  withHexFormat = {
+    withSharp: false,
+    isTurnOn: true,
+  },
+  initialHexOfColorBlock = "#9AA0B9",
+  testId = "",
+  withDelete = true,
+  ...args
+}) => {
+  const { withSharp, isTurnOn: isHex } = withHexFormat;
+  // HANDLES
+  const handle = {
+    change: (e) => {
+      let inputValue = e?.target ? e.target.value : e;
+      inputValue = formatToOnlyASCIICodeText(inputValue);
+      if (isHex) inputValue = formatToHex({ inputValue, withSharp: withSharp });
+      if (symbolsLimit && inputValue.length > Number(symbolsLimit))
+        inputValue = inputValue.substring(0, Number(symbolsLimit));
+
+      onChange?.(inputValue);
+    },
+  };
+
+  return (
+    <div className={cn("inputColor", className)}>
+      <div
+        className={cn("inputColor__color-block")}
+        style={{
+          backgroundColor:
+            value && value.length === 7 ? value : initialHexOfColorBlock,
+        }}
+      />
+      <Input
+        {...args}
+        value={value}
+        withDelete={withDelete}
+        onChange={handle.change}
+        symbolsLimit={symbolsLimit || 7}
+        testId={`inputColor--key-${testId}`}
+        className={cn("input inputColor__input")}
+        type="text"
+      />
+    </div>
+  );
+};
+
+export default InputColor;

package/dist/Atomic/FormElements/InputCurrency/InputCurrency.js

@@ -1 +1,200 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function t(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){var n;n=r[t],t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n})}return e}function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r})(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}function n(t,r){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var r,n,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var u=[],c=!0,a=!1;try{for(o=o.call(e);!(c=(r=o.next()).done)&&(u.push(r.value),!t||u.length!==t);c=!0);}catch(e){a=!0,n=e}finally{try{c||null==o.return||o.return()}finally{if(a)throw n}}return u}}(t,r)||function(t,r){if(t){if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}}(t,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return b}});var o,u=require("react/jsx-runtime"),c=(o=require("classnames"))&&o.__esModule?o:{default:o},a=function(e,t){if(e&&e.__esModule)return e;if(null===e||(void 0===e?"undefined":e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e)!="object"&&"function"!=typeof e)return{default:e};var r=l(t);if(r&&r.has(e))return r.get(e);var n={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var c=o?Object.getOwnPropertyDescriptor(e,u):null;c&&(c.get||c.set)?Object.defineProperty(n,u,c):n[u]=e[u]}return n.default=e,r&&r.set(e,n),n}(require("react")),i=require("../../../Functions/fieldValueFormatters");function l(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(l=function(e){return e?r:t})(e)}require("./InputCurrency.scss");var f={},s="input-currency",p={type:"float",decimalPlaces:2},y=function(e){var o=e.currencySymbol,l=void 0===o?"$":o,y=e.testId,b=void 0===y?s:y,d=e.onChange,v=e.className,m=e.value,O=e.disabled,g=e.attributesOfNativeInput,j=void 0===g?f:g,h=e.min,P=void 0===h?0:h,w=e.max,N=e.error,S=e.isNoCheckMinMax,_=e.allowZero,x=void 0!==_&&_,M=e.onlyNumbers,k=void 0===M?p:M,I=n((0,a.useState)(l),2),C=I[0],D=I[1],F=n((0,a.useState)(!1),2),A=F[0],q=F[1],E=(0,a.useRef)(null),B=function(e){var t=e.toString().split(".");return t[0]=t[0].replace(/\B(?=(\d{3})+(?!\d))/g,","),t.join(".")},W=function(e,t){var r,n=null!=t?t:(0,i.filterNumeric)((null==e||null==(r=e.target)?void 0:r.value)||"",k);if(!n)return!1;var o="string"==typeof n?Number.parseFloat(n):n;return o<P?(D("".concat(l).concat(B(P))),d(P),!1):!w||!(o>w)||(D("".concat(l).concat(B(w))),d(w),!1)};return(0,a.useEffect)(function(){0===m||"0"===m?x?(D("".concat(l,"0")),d(0)):(D(l),d("")):m?D("".concat(l).concat(B(m))):D(l)},[m,l,x]),(0,u.jsx)("div",{"data-testid":b,className:(0,c.default)("input-currency-box",v,{disabled:O,"input-currency__error":N,"input-currency__focused":A}),children:(0,u.jsx)("input",r(t({className:s,type:"text",ref:E,value:C,onChange:function(e){var n=e.target.value,o=(n=n.replace(l,"")).split("."),u=o[0],c=o[1],a=Number.parseInt((0,i.filterNumeric)(u,r(t({},k),{type:"int"})));if(Number.isNaN(a))D(l),d("");else if(0!==a||c){var f=B(a);if(void 0!==c){var s=(0,i.filterNumeric)(c,{type:"int"});s?f+=".".concat(s.slice(0,k.decimalPlaces)):""===c&&(f+=".")}D("".concat(l).concat(f)),d(Number.parseFloat(f.replace(/,/g,"")))}else x?(D("".concat(l,"0")),d(0)):(D(l),d(""))},onClick:function(){!C&&E.current&&(E.current.selectionStart=E.current.selectionEnd=l?l.length:1)},onKeyDown:function(e){e.key.match(/^[a-z0-9]$/i)&&E.current&&D(C.slice(0,E.current.selectionStart||0))}},j),{onFocus:function(e){var t;null==j||null==(t=j.onFocus)||t.call(j,e),q(!0)},onBlur:function(e){var t;null==j||null==(t=j.onBlur)||t.call(j,e),S||W(null,Number.parseFloat((0,i.filterNumeric)(C.replace(l,""),k))),q(!1)}}))})};y.displayName="InputCurrency";var b=y;
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+require("./InputCurrency.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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 _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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;
+}
+const attrsOfNativeInputDefault = {};
+const CN = 'input-currency';
+const ONLY_NUMBERS_DEFAULT = {
+    type: 'float',
+    decimalPlaces: 2
+};
+const InputCurrency = ({ currencySymbol = '$', testId = CN, onChange, className, value, disabled, attributesOfNativeInput = attrsOfNativeInputDefault, min = 0, max, error, isNoCheckMinMax, allowZero = false, onlyNumbers = ONLY_NUMBERS_DEFAULT })=>{
+    const [inputValue, setInputValue] = (0, _react.useState)(currencySymbol);
+    const [isFocused, setIsFocused] = (0, _react.useState)(false);
+    const inputRef = (0, _react.useRef)(null);
+    const formatNumberWithCommas = (number)=>{
+        const parts = number.toString().split('.');
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        return parts.join('.');
+    };
+    const formatCurrencyInput = (event)=>{
+        let newValue = event.target.value;
+        newValue = newValue.replace(currencySymbol, '');
+        // Handle decimal input separately
+        const parts = newValue.split('.');
+        const integerPart = parts[0];
+        const decimalPart = parts[1];
+        // Filter and format the integer part
+        const preparedIntegerValue = (0, _fieldValueFormatters.filterNumeric)(integerPart, {
+            ...onlyNumbers,
+            type: 'int'
+        });
+        const parsedIntegerValue = Number.parseInt(preparedIntegerValue);
+        if (!Number.isNaN(parsedIntegerValue)) {
+            if (parsedIntegerValue === 0 && !decimalPart) {
+                if (allowZero) {
+                    setInputValue(`${currencySymbol}0`);
+                    onChange(0);
+                } else {
+                    setInputValue(currencySymbol);
+                    onChange('');
+                }
+            } else {
+                let formattedValue = formatNumberWithCommas(parsedIntegerValue);
+                // Add decimal part if exists
+                if (decimalPart !== undefined) {
+                    const filteredDecimal = (0, _fieldValueFormatters.filterNumeric)(decimalPart, {
+                        type: 'int'
+                    });
+                    if (filteredDecimal) {
+                        formattedValue += `.${filteredDecimal.slice(0, onlyNumbers.decimalPlaces)}`;
+                    } else if (decimalPart === '') {
+                        formattedValue += '.';
+                    }
+                }
+                setInputValue(`${currencySymbol}${formattedValue}`);
+                onChange(Number.parseFloat(formattedValue.replace(/,/g, '')));
+            }
+        } else {
+            setInputValue(currencySymbol);
+            onChange('');
+        }
+    };
+    const onInputClick = ()=>{
+        if (!inputValue && inputRef.current) {
+            inputRef.current.selectionStart = inputRef.current.selectionEnd = currencySymbol ? currencySymbol.length : 1;
+        }
+    };
+    const onKeyDown = (event)=>{
+        if (event.key.match(/^[a-z0-9]$/i) && inputRef.current) {
+            setInputValue(inputValue.slice(0, inputRef.current.selectionStart || 0));
+        }
+    };
+    const checkMinMax = (event, checkValue)=>{
+        var _event_target;
+        const clearValue = checkValue !== null && checkValue !== void 0 ? checkValue : (0, _fieldValueFormatters.filterNumeric)((event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value) || '', onlyNumbers);
+        if (!clearValue) return false;
+        const numericValue = typeof clearValue === 'string' ? Number.parseFloat(clearValue) : clearValue;
+        if (numericValue < min) {
+            setInputValue(`${currencySymbol}${formatNumberWithCommas(min)}`);
+            onChange(min);
+            return false;
+        }
+        if (max && numericValue > max) {
+            setInputValue(`${currencySymbol}${formatNumberWithCommas(max)}`);
+            onChange(max);
+            return false;
+        }
+        return true;
+    };
+    (0, _react.useEffect)(()=>{
+        if (value === 0 || value === '0') {
+            if (allowZero) {
+                setInputValue(`${currencySymbol}0`);
+                onChange(0);
+            } else {
+                setInputValue(currencySymbol);
+                onChange('');
+            }
+        } else if (value) {
+            setInputValue(`${currencySymbol}${formatNumberWithCommas(value)}`);
+        } else {
+            setInputValue(currencySymbol);
+        }
+    }, [
+        value,
+        currencySymbol,
+        allowZero
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": testId,
+        className: (0, _classnames.default)('input-currency-box', className, {
+            disabled,
+            'input-currency__error': error,
+            'input-currency__focused': isFocused
+        }),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+            className: CN,
+            type: "text",
+            ref: inputRef,
+            value: inputValue,
+            onChange: formatCurrencyInput,
+            onClick: onInputClick,
+            onKeyDown: onKeyDown,
+            ...attributesOfNativeInput,
+            onFocus: (e)=>{
+                var _attributesOfNativeInput_onFocus;
+                attributesOfNativeInput === null || attributesOfNativeInput === void 0 ? void 0 : (_attributesOfNativeInput_onFocus = attributesOfNativeInput.onFocus) === null || _attributesOfNativeInput_onFocus === void 0 ? void 0 : _attributesOfNativeInput_onFocus.call(attributesOfNativeInput, e);
+                setIsFocused(true);
+            },
+            onBlur: (e)=>{
+                var _attributesOfNativeInput_onBlur;
+                attributesOfNativeInput === null || attributesOfNativeInput === void 0 ? void 0 : (_attributesOfNativeInput_onBlur = attributesOfNativeInput.onBlur) === null || _attributesOfNativeInput_onBlur === void 0 ? void 0 : _attributesOfNativeInput_onBlur.call(attributesOfNativeInput, e);
+                if (!isNoCheckMinMax) {
+                    const currentValue = Number.parseFloat((0, _fieldValueFormatters.filterNumeric)(inputValue.replace(currencySymbol, ''), onlyNumbers));
+                    checkMinMax(null, currentValue);
+                }
+                setIsFocused(false);
+            }
+        })
+    });
+};
+InputCurrency.displayName = 'InputCurrency';
+const _default = InputCurrency;

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -1 +1,354 @@
-function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function e(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),n.forEach(function(e){var n;n=r[e],e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n})}return t}function r(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):(function(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r.push.apply(r,n)}return r})(Object(e)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))}),t}function n(e,r){return function(t){if(Array.isArray(t))return t}(e)||function(t,e){var r,n,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=(r=a.next()).done)&&(o.push(r.value),!e||o.length!==e);i=!0);}catch(t){l=!0,n=t}finally{try{i||null==a.return||a.return()}finally{if(l)throw n}}return o}}(e,r)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}}(e,r)||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 a,jsxs as o,Fragment as i}from"react/jsx-runtime";import l,{useLayoutEffect as s,useRef as d,useState as u}from"react";import c from"classnames";import m from"moment-timezone";import f from"../../../Functions/useIsMobile/useIsMobile";import p from"../../UI/Arrow/Arrow";import v from"./components/OpenedPart";import{ALL_TIME_KEY as g,CUSTOM_INTERVAL_KEY_TEXT as b,INTERVALS as y,MAIN_FORMAT as h,MAIN_TIME_FORMAT as _,getActualDateRange as O,useClickOutside as D,useToggle as w}from"./dependencies";import"./InputDateRange.scss";var P=function(t,e){var r=m(t,e);return r.isValid()?r.format(e):null};export default l.memo(function(t){var l,j,N=t.txt,I=t.id,A=t.label,C=t.subLabel,M=t.className,S=t.value,x=t.onChange,k=void 0===x?function(){}:x,K=t.error,L=t.disabled,E=t.isHoverable,F=t.isCompact,B=void 0!==F&&F,T=t.hideArrows,Y=void 0!==T&&T,R=t.isOptionsRight,U=t.isUseAbs,q=t.testId,V=void 0===q?"input-date-range":q,z=t.minDate,H=t.maxDate,$=t.minMaxDateParseFormat,G=void 0===$?"MM/DD/YYYY":$,J=t.isDontLimitFuture,Q=t.isListTop,W=t.isAltArrows,X=t.renderIntervals,Z=t.isDoNotPullOutListOfMainContainer,tt=f().isMobile,te=P(void 0===z?null:z,G),tr=P(void 0===H?null:H,G),tn=m(te,G).startOf("day"),ta=m(tr,G).startOf("day"),to=O(S),ti=w(!1),tl=ti.isToggled,ts=ti.toggle,td=ti.toggleOn,tu=ti.toggleOff,tc=n(u(null==to?void 0:to.intervalKey),2),tm=tc[0],tf=tc[1],tp=n(u(null==to?void 0:to.compare),2),tv=tp[0],tg=tp[1],tb=document.getElementsByClassName("dropdown__container"),ty=U||tt?d(null):D(tu,tb),th=d(null),t_=n(u(Math.random().toString(16).slice(2)),2),tO=t_[0];t_[1];var tD=function(t){var r=O(t),n=e({intervalKey:r.intervalKey,start:r.start?m(r.start).format(h):r.start,end:r.end?m(r.end).format(h):r.end},r.compare?{compare:r.compare}:{},r.startPrevDate?{startPrevDate:m(r.startPrevDate).format(h)}:{},r.endPrevDate?{endPrevDate:m(r.endPrevDate).format(h)}:{});return k(n),n},tw=function(){var t,n,a,o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"forward",i=to.start,l=to.end,s=m(l).diff(i,"hours"),d=m(l).hours(),u=m(i).hours();"forward"===o?(a=m(l).add(+(0!==d),"day").hours(u).toDate(),n=m(a).add(s,"hours")):(n=m(i).subtract(+(0!==d),"day").hours(d).toDate(),a=m(n).subtract(s,"hours"));var c=m(a).subtract(s,"hours").subtract(1,"seconds"),f=m(n).subtract(1,"seconds");tD(r(e({},S),{intervalKey:null==(t=O({start:a,end:n}))?void 0:t.intervalKey,start:a,end:n,startPrevDate:c,endPrevDate:f}))},tP=function(t){tw("right"===t?"forward":"back"),tu()},tj=function(){var t;return null!=(t=document.querySelector("div#root"))?t:document.querySelector("div#app")},tN=function(){null==(t=document.getElementById(tO))||t.remove();var t,e,r=document.createElement("div");r.setAttribute("id",tO),r.classList.add("input-date-range__mobile-container"),null==(e=tj())||e.append(r)};return s(function(){return tN(),function(){var t;null==(t=document.getElementById(tO))||t.remove()}},[]),o("div",{"data-testid":V,ref:th,className:c("date-range-input",M,{"date-range-input_compact":B,"date-range-input_hide-arrows":Y,"date-range-input_focused":tl,"date-range-input_error":K,"date-range-input_disabled":L}),children:[a("span",{className:"date-range-input__label",children:A}),a("div",{className:"date-range-input__wraper",ref:ty,onMouseEnter:E?td:function(){return null},onMouseLeave:E?tu:function(){return null},children:o("div",{className:c("date-range-input__absolut-wraper",{"date-range-input__absolut-wraper_right-position":R}),children:[o("div",{className:c("date-range-input__static-part"),children:[o("button",{id:I,className:c("date-range-input__toggle-button"),disabled:L,onClick:L||E?void 0:ts,children:[o("div",{className:"date-range-input__interval-key",children:[C&&o("span",{className:"date-range-input__label",children:[C,": "]}),a("span",{children:null!=(j=(null==N?void 0:N.labels)&&N.labels[null==to?void 0:to.intervalKey])?j:(null==(l=y[null==to?void 0:to.intervalKey])?void 0:l.label)||b}),tm!==g&&a("span",{children:":"})]}),!B&&a("div",{className:c("date-range-input__range",{}),children:a(function(){!to.start&&S.start&&(to.start=S.start,to.end=S.end||"");var t=to.start,e=to.end;if(!t||!e)return null;var r=m(t).format(_),n=m(e).format(_),l="".concat(m(t).format("ll")," ").concat("00:00"!==r?"(".concat(r,")"):""),s="".concat(("00:00"!==n?m(e):m(e).subtract(1,"days")).format("ll")," ").concat("00:00"!==n?"(".concat(n,")"):""),d=function(t){return c("date-range-input__range-text",{"date-range-input__range-text_little":t.length>13})};return o(i,{children:[o("span",{className:d(l),children:[l,"00:00"===n&&m(e).isSame(m(t).add(1,"days"),"day")?"":" - "]}),"00:00"===n&&m(e).isSame(m(t).add(1,"days"),"day")?null:a("span",{className:d(s),children:s})]})},{})})]}),!B&&!Y&&o("div",{className:c("date-range-input__arrows-block"),children:[a(p,{testId:V,type:"left",className:"date-range-input__arrow",onClick:function(){return tP("left")},disabled:L||(null==to?void 0:to.intervalKey)===g||te&&m(null==to?void 0:to.start).subtract(m(null==to?void 0:to.end).diff(null==to?void 0:to.start,"hours"),"hours").isBefore(tn),isAlt:W}),a(p,{testId:V,type:"right",className:"date-range-input__arrow",onClick:function(){return tP("right")},disabled:L||(null==to?void 0:to.intervalKey)===g||!J&&(tr?m(null==to?void 0:to.end).endOf("day").subtract(m(null==to?void 0:to.end).diff(null==to?void 0:to.start,"hours"),"hours").isAfter(ta.startOf("day")):m(null==to?void 0:to.end).add(m(null==to?void 0:to.end).diff(null==to?void 0:to.start,"hours"),"hours").isAfter(m().add(1,"day").startOf("day"))),isAlt:W})]})]}),tl&&!U&&a(v,r(e({},t),{dateRangeContainerId:tO,mainId:I,testId:V,ref:th,actualValues:to,current:tm,setCurrent:tf,isCompare:tv,setIsCompare:tg,toggleOff:tu,onChange:tD,minDate:te,maxDate:tr,momentMinDate:tn,momentMaxDate:ta,isDontLimitFuture:J,isListTop:Q,renderIntervals:X,isDoNotPullOutListOfMainContainer:Z}))]})}),K&&a("span",{className:"date-range-input__error-block",children:K})]})});
+import React, { useLayoutEffect, useRef, useState } from "react";
+
+import cn from "classnames";
+import moment from "moment-timezone";
+
+import useIsMobile from "../../../Functions/useIsMobile/useIsMobile";
+import Arrow from "../../UI/Arrow/Arrow";
+
+import OpenedPart from "./components/OpenedPart";
+import {
+  ALL_TIME_KEY,
+  CUSTOM_INTERVAL_KEY_TEXT,
+  INTERVALS,
+  MAIN_FORMAT,
+  MAIN_TIME_FORMAT,
+  getActualDateRange,
+  useClickOutside,
+  useToggle,
+} from "./dependencies";
+
+import "./InputDateRange.scss";
+
+const checkFormat = (date, format) => {
+  const momentObj = moment(date, format);
+  return momentObj.isValid() ? momentObj.format(format) : null;
+};
+
+const InputDateRange = (props) => {
+  const {
+    txt,
+    id,
+    label,
+    subLabel,
+    className,
+    value,
+    onChange = () => {},
+    error,
+    disabled,
+    isHoverable,
+    isCompact = false,
+    hideArrows = false,
+    isOptionsRight,
+    isUseAbs,
+    testId = "input-date-range",
+    minDate = null,
+    maxDate = null,
+    minMaxDateParseFormat = "MM/DD/YYYY",
+    isDontLimitFuture,
+    isListTop,
+    isAltArrows,
+    renderIntervals,
+    isDoNotPullOutListOfMainContainer,
+  } = props;
+
+  const { isMobile } = useIsMobile();
+
+  const formatedMinDate = checkFormat(minDate, minMaxDateParseFormat);
+  const formatedMaxDate = checkFormat(maxDate, minMaxDateParseFormat);
+
+  const momentMinDate = moment(formatedMinDate, minMaxDateParseFormat).startOf(
+    "day",
+  );
+  const momentMaxDate = moment(formatedMaxDate, minMaxDateParseFormat).startOf(
+    "day",
+  );
+
+  const actualValues = getActualDateRange(value);
+  const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
+  const [current, setCurrent] = useState(actualValues?.intervalKey);
+  const [isCompare, setIsCompare] = useState(actualValues?.compare);
+
+  const dropdownContainers = document.getElementsByClassName(
+    "dropdown__container",
+  );
+  const ref =
+    !isUseAbs && !isMobile
+      ? useClickOutside(toggleOff, dropdownContainers)
+      : useRef(null);
+  const internalContainerRef = useRef(null);
+
+  const [dateRangeContainerId, setDateRangeContainerId] = useState(
+    Math.random().toString(16).slice(2),
+  );
+
+  const handleChange = (input) => {
+    const newValue = getActualDateRange(input);
+    const formatedValue = {
+      intervalKey: newValue.intervalKey,
+      start: newValue.start
+        ? moment(newValue.start).format(MAIN_FORMAT)
+        : newValue.start,
+      end: newValue.end
+        ? moment(newValue.end).format(MAIN_FORMAT)
+        : newValue.end,
+      ...(newValue.compare ? { compare: newValue.compare } : {}),
+      ...(newValue.startPrevDate
+        ? { startPrevDate: moment(newValue.startPrevDate).format(MAIN_FORMAT) }
+        : {}),
+      ...(newValue.endPrevDate
+        ? { endPrevDate: moment(newValue.endPrevDate).format(MAIN_FORMAT) }
+        : {}),
+    };
+
+    onChange(formatedValue);
+    return formatedValue;
+  };
+
+  const Range = () => {
+    const SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+    if (!actualValues.start && value.start) {
+      actualValues.start = value.start;
+      actualValues.end = value.end || "";
+    }
+    const { start, end } = actualValues;
+    if (!start || !end) return null;
+
+    const startTime = moment(start).format(MAIN_TIME_FORMAT);
+    const endTime = moment(end).format(MAIN_TIME_FORMAT);
+
+    const firstPart = `${moment(start).format("ll")} ${startTime !== "00:00" ? `(${startTime})` : ""}`;
+    const secondPart = `${(endTime !== "00:00" ? moment(end) : moment(end).subtract(1, "days")).format("ll")} ${
+      endTime !== "00:00" ? `(${endTime})` : ""
+    }`;
+
+    const getClasses = (base) =>
+      cn("date-range-input__range-text", {
+        "date-range-input__range-text_little":
+          base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED,
+      });
+
+    return (
+      <>
+        <span className={getClasses(firstPart)}>
+          {firstPart}
+          {endTime === "00:00" &&
+          moment(end).isSame(moment(start).add(1, "days"), "day")
+            ? ""
+            : ` - `}
+        </span>
+        {endTime === "00:00" &&
+        moment(end).isSame(moment(start).add(1, "days"), "day") ? null : (
+          <span className={getClasses(secondPart)}>{secondPart}</span>
+        )}
+      </>
+    );
+  };
+
+  const slideInterval = (direction = "forward") => {
+    const { start, end } = actualValues;
+    const intervalHoursCount = moment(end).diff(start, "hours");
+    let newEnd;
+    let newStart;
+    const endHours = moment(end).hours();
+    const startHours = moment(start).hours();
+    if (direction === "forward") {
+      newStart = moment(end)
+        .add(endHours === 0 ? 0 : 1, "day")
+        .hours(startHours)
+        .toDate();
+      newEnd = moment(newStart).add(intervalHoursCount, "hours");
+    } else {
+      newEnd = moment(start)
+        .subtract(endHours === 0 ? 0 : 1, "day")
+        .hours(endHours)
+        .toDate();
+      newStart = moment(newEnd).subtract(intervalHoursCount, "hours");
+    }
+    const startPrevDate = moment(newStart)
+      .subtract(intervalHoursCount, "hours")
+      .subtract(1, "seconds");
+    const endPrevDate = moment(newEnd).subtract(1, "seconds");
+    handleChange({
+      ...value,
+      intervalKey: getActualDateRange({
+        start: newStart,
+        end: newEnd,
+      })?.intervalKey,
+      start: newStart,
+      end: newEnd,
+      startPrevDate,
+      endPrevDate,
+    });
+  };
+
+  const handleArrowClick = (type) => {
+    slideInterval(type === "right" ? "forward" : "back");
+    toggleOff();
+  };
+
+  const getParentNode = () => {
+    return (
+      document.querySelector("div#root") ?? document.querySelector("div#app")
+    );
+  };
+  const initDateRangeContainer = () => {
+    document.getElementById(dateRangeContainerId)?.remove();
+
+    const dateRangeContainer = document.createElement("div");
+
+    dateRangeContainer.setAttribute("id", dateRangeContainerId);
+    dateRangeContainer.classList.add("input-date-range__mobile-container");
+
+    getParentNode()?.append(dateRangeContainer);
+  };
+
+  const getDateRangeContainer = () => {
+    return document.getElementById(dateRangeContainerId);
+  };
+
+  useLayoutEffect(() => {
+    initDateRangeContainer();
+    return () => {
+      getDateRangeContainer()?.remove();
+    };
+  }, []);
+
+  return (
+    <div
+      data-testid={testId}
+      ref={internalContainerRef}
+      className={cn("date-range-input", className, {
+        "date-range-input_compact": isCompact,
+        "date-range-input_hide-arrows": hideArrows,
+        "date-range-input_focused": isToggled,
+        "date-range-input_error": error,
+        "date-range-input_disabled": disabled,
+      })}
+    >
+      <span className="date-range-input__label">{label}</span>
+      <div
+        className="date-range-input__wraper"
+        ref={ref}
+        onMouseEnter={isHoverable ? toggleOn : () => null}
+        onMouseLeave={isHoverable ? toggleOff : () => null}
+      >
+        <div
+          className={cn("date-range-input__absolut-wraper", {
+            "date-range-input__absolut-wraper_right-position": isOptionsRight,
+          })}
+        >
+          <div className={cn("date-range-input__static-part")}>
+            <button
+              id={id}
+              className={cn("date-range-input__toggle-button")}
+              disabled={disabled}
+              onClick={!disabled && !isHoverable ? toggle : undefined}
+            >
+              <div className="date-range-input__interval-key">
+                {subLabel && (
+                  <span className="date-range-input__label">{subLabel}: </span>
+                )}
+                <span>
+                  {(txt?.labels && txt.labels[actualValues?.intervalKey]) ??
+                    (INTERVALS[actualValues?.intervalKey]?.label ||
+                      CUSTOM_INTERVAL_KEY_TEXT)}
+                </span>
+                {current !== ALL_TIME_KEY && <span>:</span>}
+              </div>
+              {!isCompact && (
+                <div className={cn("date-range-input__range", {})}>
+                  <Range />
+                </div>
+              )}
+            </button>
+            {!isCompact && !hideArrows && (
+              <div className={cn("date-range-input__arrows-block")}>
+                <Arrow
+                  testId={testId}
+                  type="left"
+                  className="date-range-input__arrow"
+                  onClick={() => handleArrowClick("left")}
+                  disabled={
+                    disabled ||
+                    actualValues?.intervalKey === ALL_TIME_KEY ||
+                    (formatedMinDate &&
+                      moment(actualValues?.start)
+                        .subtract(
+                          moment(actualValues?.end).diff(
+                            actualValues?.start,
+                            "hours",
+                          ),
+                          "hours",
+                        )
+                        .isBefore(momentMinDate))
+                  }
+                  isAlt={isAltArrows}
+                />
+                <Arrow
+                  testId={testId}
+                  type="right"
+                  className="date-range-input__arrow"
+                  onClick={() => handleArrowClick("right")}
+                  disabled={
+                    disabled ||
+                    actualValues?.intervalKey === ALL_TIME_KEY ||
+                    (!isDontLimitFuture &&
+                      (formatedMaxDate
+                        ? moment(actualValues?.end)
+                            .endOf("day")
+                            .subtract(
+                              moment(actualValues?.end).diff(
+                                actualValues?.start,
+                                "hours",
+                              ),
+                              "hours",
+                            )
+                            .isAfter(momentMaxDate.startOf("day"))
+                        : moment(actualValues?.end)
+                            .add(
+                              moment(actualValues?.end).diff(
+                                actualValues?.start,
+                                "hours",
+                              ),
+                              "hours",
+                            )
+                            .isAfter(moment().add(1, "day").startOf("day"))))
+                  }
+                  isAlt={isAltArrows}
+                />
+              </div>
+            )}
+          </div>
+          {isToggled && !isUseAbs && (
+            <OpenedPart
+              {...props}
+              dateRangeContainerId={dateRangeContainerId}
+              mainId={id}
+              testId={testId}
+              ref={internalContainerRef}
+              actualValues={actualValues}
+              current={current}
+              setCurrent={setCurrent}
+              isCompare={isCompare}
+              setIsCompare={setIsCompare}
+              toggleOff={toggleOff}
+              onChange={handleChange}
+              minDate={formatedMinDate}
+              maxDate={formatedMaxDate}
+              momentMinDate={momentMinDate}
+              momentMaxDate={momentMaxDate}
+              isDontLimitFuture={isDontLimitFuture}
+              isListTop={isListTop}
+              renderIntervals={renderIntervals}
+              isDoNotPullOutListOfMainContainer={isDoNotPullOutListOfMainContainer}
+            />
+          )}
+        </div>
+      </div>
+      {error && <span className="date-range-input__error-block">{error}</span>}
+    </div>
+  );
+};
+
+export default React.memo(InputDateRange);