intelicoreact 1.5.38 → 1.5.41

package/dist/Atomic/FormElements/Datepicker/Datepicker.js

@@ -1,421 +1,319 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _moment = /*#__PURE__*/ _interop_require_default(require("moment"));
-const _Langs = /*#__PURE__*/ _interop_require_default(require("../../../../../Langs"));
-const _Button = /*#__PURE__*/ _interop_require_default(require("../../UI/Button/Button"));
-const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../Dropdown/Dropdown"));
-const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
-const _Switcher = /*#__PURE__*/ _interop_require_default(require("../Switcher/Switcher"));
-const _Calendar = /*#__PURE__*/ _interop_require_default(require("./components/Calendar"));
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _moment = _interopRequireDefault(require("moment"));
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+var _Langs = _interopRequireDefault(require("../../../../../Langs"));
+var _useClickOutside = require("../../../Functions/useClickOutside");
+var _Button = _interopRequireDefault(require("../../UI/Button/Button"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown/Dropdown"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
+var _Switcher = _interopRequireDefault(require("../Switcher/Switcher"));
+var _Calendar = _interopRequireDefault(require("./components/Calendar"));
 require("./Datepicker.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;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const padTime = time => {
+  return `${time.toString().padStart(2, "0")}:00`;
+};
+const Datepicker = props => {
+  const {
+    isCompareHidden,
+    limitRange,
+    onChange = () => {},
+    values = {},
+    onChangeCompare = () => {},
+    onCancel = () => {},
+    getSelectedMode = () => {},
+    onChangeInterval = () => {}
+  } = props;
+  const {
+    start = null,
+    end = null,
+    compare = false
+  } = values;
+  const txt = _Langs.default[global.lng];
+  const startDateInputRef = (0, _react.useRef)(null);
+  const endDateInputRef = (0, _react.useRef)(null);
+  const [startDate, setStartDate] = (0, _react.useState)(start);
+  const [endDate, setEndDate] = (0, _react.useState)(end);
+  const dateInterval = getSelectedMode({
+    start: startDate,
+    end: endDate
+  });
+  const [startDateInput, setStartDateInput] = (0, _react.useState)(start);
+  const [endDateInput, setEndDateInput] = (0, _react.useState)(end);
+  const [startHour, setStartHour] = (0, _react.useState)(start ? (0, _moment.default)(start).hour() : 0);
+  const [endHour, setEndHour] = (0, _react.useState)(end ? (0, _moment.default)(end).hour() : 0);
+  // eslint-disable-next-line no-unused-vars
+  const [isCompare, setIsCompare] = (0, _react.useState)(compare);
+  const [date1, setDate1] = (0, _react.useState)(start ? (0, _moment.default)(start).toDate() : (0, _moment.default)().subtract(1, "month").toDate());
+  const [date2, setDate2] = (0, _react.useState)(end ? (0, _moment.default)(end).toDate() : (0, _moment.default)().toDate());
+  const [isStartFocused, setIsStartFocused] = (0, _react.useState)(false);
+  const [isEndFocused, setIsEndFocused] = (0, _react.useState)(false);
+  const [hoverStatus, setHoverStatus] = (0, _react.useState)(null);
+  const isNearby = (0, _react.useMemo)(() => (0, _moment.default)(date2).subtract(1, "month").isSame((0, _moment.default)(date1), "month"), [date1, date2]);
+  const isPreviousPeriodShowed = (0, _react.useMemo)(() => isCompare && !isCompareHidden && startDate && endDate, [startDate, endDate, isCompare]);
+  const prevEndHour = (0, _react.useRef)(endHour);
+  const getStartHourItems = () => [...Array(24).keys()].map(hour => ({
+    label: padTime(hour),
+    value: hour,
+    disabled: (0, _moment.default)(startDate).isSame(endDate, "day") && endHour <= hour
+  }));
+  const getEndHourItems = () => [...Array(24).keys()].map(hour => ({
+    label: padTime(hour + 1),
+    value: hour === 23 ? 0 : hour + 1,
+    disabled: ((0, _moment.default)(startDate).isSame(endDate, "day") || (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate).subtract(1, "days"), "day") && endHour === 0) && hour < startHour
+  }));
+  const startPrevDate = (0, _react.useMemo)(() => {
+    if (isPreviousPeriodShowed) {
+      const intervalHoursCount = (0, _moment.default)(endDate).diff(startDate, "hours");
+      return (0, _moment.default)(startDate).subtract(intervalHoursCount, "hours").toDate();
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+  const endPrevDate = (0, _react.useMemo)(() => {
+    if (isPreviousPeriodShowed) {
+      return startDate;
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+  const title = (0, _react.useMemo)(() => {
+    if (isCompare && !isCompareHidden && startDate && endDate) {
+      return `${(0, _moment.default)(startPrevDate).format("ll")} (${(0, _moment.default)(startPrevDate).format("HH:mm")}) - ${(0, _moment.default)(endPrevDate).format("ll")} (${(0, _moment.default)(endPrevDate).format("HH:mm")})`;
+    } else return "";
+  }, [startDate, endDate, isCompare]);
+  const subtractDay = date => endHour === 0 ? (0, _moment.default)(date).subtract(1, "days") : date;
+  const addDay = date => endHour === 0 ? (0, _moment.default)(date).add(1, "days") : date;
+  (0, _react.useEffect)(() => {
+    if ((0, _moment.default)(startDate).isSameOrAfter(endDate)) {
+      setStartDate((0, _moment.default)(endDate).subtract(1, "d").toDate());
+      setDate1((0, _moment.default)(endDate).subtract(1, "d"));
     }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
+  }, [startDate]);
+  (0, _react.useEffect)(() => {
+    if ((0, _moment.default)(endDate).isSameOrBefore(startDate)) {
+      setEndDate((0, _moment.default)(startDate).add(1, "d").toDate());
+      setDate2((0, _moment.default)(startDate).add(1, "d"));
     }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
+  }, [endDate]);
+  (0, _react.useEffect)(() => {
+    setStartDateInput(startDate);
+    setEndDateInput(endDate);
+    if ((0, _moment.default)(startDate).isBefore((0, _moment.default)(endDate), "month")) {
+      setDate1((0, _moment.default)(startDate));
+      setDate2((0, _moment.default)(endDate));
     }
-    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];
-            }
-        }
+  }, [startDate, endDate]);
+  (0, _react.useEffect)(() => {
+    if ((0, _moment.default)(date1).isSameOrAfter((0, _moment.default)(date2), "month")) {
+      setDate1((0, _moment.default)(date2).subtract(1, "month"));
     }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
+  }, [date1, date2]);
+  (0, _react.useEffect)(() => {
+    onChangeInterval(dateInterval);
+  }, [dateInterval]);
+  const handleClick = date => {
+    prevEndHour.current = 0;
+    if (!startDate || startDate && endDate && !((0, _moment.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
+      setStartDate((0, _moment.default)(date).startOf("day").toDate());
+      setEndDate((0, _moment.default)(date).add(1, "d").startOf("day").toDate());
+      setStartHour(0);
+      setEndHour(0);
+    } else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), "day")) {
+      setEndDate((0, _moment.default)(startDate).add(1, "d").startOf("day").toDate());
+      setStartDate((0, _moment.default)(date).set("hour", parseInt(startHour, 10)).toDate());
+    } else if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), "day")) {
+      setEndDate((0, _moment.default)(date).add(1, "d").startOf("day").toDate());
     }
-    return newObj;
-}
-const padTime = (time)=>{
-    return `${time.toString().padStart(2, "0")}:00`;
-};
-const Datepicker = (props)=>{
-    const { isCompareHidden, limitRange, onChange = ()=>{}, values = {}, onChangeCompare = ()=>{}, onCancel = ()=>{}, getSelectedMode = ()=>{}, onChangeInterval = ()=>{} } = props;
-    const { start = null, end = null, compare = false } = values;
-    const txt = _Langs.default[global.lng];
-    const startDateInputRef = (0, _react.useRef)(null);
-    const endDateInputRef = (0, _react.useRef)(null);
-    const [startDate, setStartDate] = (0, _react.useState)(start);
-    const [endDate, setEndDate] = (0, _react.useState)(end);
-    const dateInterval = getSelectedMode({
-        start: startDate,
-        end: endDate
-    });
-    const [startDateInput, setStartDateInput] = (0, _react.useState)(start);
-    const [endDateInput, setEndDateInput] = (0, _react.useState)(end);
-    const [startHour, setStartHour] = (0, _react.useState)(start ? (0, _moment.default)(start).hour() : 0);
-    const [endHour, setEndHour] = (0, _react.useState)(end ? (0, _moment.default)(end).hour() : 0);
-    // eslint-disable-next-line no-unused-vars
-    const [isCompare, setIsCompare] = (0, _react.useState)(compare);
-    const [date1, setDate1] = (0, _react.useState)(start ? (0, _moment.default)(start).toDate() : (0, _moment.default)().subtract(1, "month").toDate());
-    const [date2, setDate2] = (0, _react.useState)(end ? (0, _moment.default)(end).toDate() : (0, _moment.default)().toDate());
-    const [isStartFocused, setIsStartFocused] = (0, _react.useState)(false);
-    const [isEndFocused, setIsEndFocused] = (0, _react.useState)(false);
-    const [hoverStatus, setHoverStatus] = (0, _react.useState)(null);
-    const isNearby = (0, _react.useMemo)(()=>(0, _moment.default)(date2).subtract(1, "month").isSame((0, _moment.default)(date1), "month"), [
-        date1,
-        date2
-    ]);
-    const isPreviousPeriodShowed = (0, _react.useMemo)(()=>isCompare && !isCompareHidden && startDate && endDate, [
-        startDate,
-        endDate,
-        isCompare
-    ]);
-    const prevEndHour = (0, _react.useRef)(endHour);
-    const getStartHourItems = ()=>[
-            ...Array(24).keys()
-        ].map((hour)=>({
-                label: padTime(hour),
-                value: hour,
-                disabled: (0, _moment.default)(startDate).isSame(endDate, "day") && endHour <= hour
-            }));
-    const getEndHourItems = ()=>[
-            ...Array(24).keys()
-        ].map((hour)=>({
-                label: padTime(hour + 1),
-                value: hour === 23 ? 0 : hour + 1,
-                disabled: ((0, _moment.default)(startDate).isSame(endDate, "day") || (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate).subtract(1, "days"), "day") && endHour === 0) && hour < startHour
-            }));
-    const startPrevDate = (0, _react.useMemo)(()=>{
-        if (isPreviousPeriodShowed) {
-            const intervalHoursCount = (0, _moment.default)(endDate).diff(startDate, "hours");
-            return (0, _moment.default)(startDate).subtract(intervalHoursCount, "hours").toDate();
-        } else return null;
-    }, [
-        startDate,
-        endDate,
-        isCompare
-    ]);
-    const endPrevDate = (0, _react.useMemo)(()=>{
-        if (isPreviousPeriodShowed) {
-            return startDate;
-        } else return null;
-    }, [
-        startDate,
-        endDate,
-        isCompare
-    ]);
-    const title = (0, _react.useMemo)(()=>{
-        if (isCompare && !isCompareHidden && startDate && endDate) {
-            return `${(0, _moment.default)(startPrevDate).format("ll")} (${(0, _moment.default)(startPrevDate).format("HH:mm")}) - ${(0, _moment.default)(endPrevDate).format("ll")} (${(0, _moment.default)(endPrevDate).format("HH:mm")})`;
-        } else return "";
-    }, [
-        startDate,
-        endDate,
-        isCompare
-    ]);
-    const subtractDay = (date)=>endHour === 0 ? (0, _moment.default)(date).subtract(1, "days") : date;
-    const addDay = (date)=>endHour === 0 ? (0, _moment.default)(date).add(1, "days") : date;
-    (0, _react.useEffect)(()=>{
-        if ((0, _moment.default)(startDate).isSameOrAfter(endDate)) {
-            setStartDate((0, _moment.default)(endDate).subtract(1, "d").toDate());
-            setDate1((0, _moment.default)(endDate).subtract(1, "d"));
-        }
-    }, [
-        startDate
-    ]);
-    (0, _react.useEffect)(()=>{
-        if ((0, _moment.default)(endDate).isSameOrBefore(startDate)) {
-            setEndDate((0, _moment.default)(startDate).add(1, "d").toDate());
-            setDate2((0, _moment.default)(startDate).add(1, "d"));
-        }
-    }, [
-        endDate
-    ]);
-    (0, _react.useEffect)(()=>{
-        setStartDateInput(startDate);
-        setEndDateInput(endDate);
-        if ((0, _moment.default)(startDate).isBefore((0, _moment.default)(endDate), "month")) {
-            setDate1((0, _moment.default)(startDate));
-            setDate2((0, _moment.default)(endDate));
-        }
-    }, [
-        startDate,
-        endDate
-    ]);
-    (0, _react.useEffect)(()=>{
-        if ((0, _moment.default)(date1).isSameOrAfter((0, _moment.default)(date2), "month")) {
-            setDate1((0, _moment.default)(date2).subtract(1, "month"));
-        }
-    }, [
-        date1,
-        date2
-    ]);
-    (0, _react.useEffect)(()=>{
-        onChangeInterval(dateInterval);
-    }, [
-        dateInterval
-    ]);
-    const handleClick = (date)=>{
-        prevEndHour.current = 0;
-        if (!startDate || startDate && endDate && !((0, _moment.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
-            setStartDate((0, _moment.default)(date).startOf("day").toDate());
-            setEndDate((0, _moment.default)(date).add(1, "d").startOf("day").toDate());
-            setStartHour(0);
-            setEndHour(0);
-        } else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), "day")) {
-            setEndDate((0, _moment.default)(startDate).add(1, "d").startOf("day").toDate());
-            setStartDate((0, _moment.default)(date).set("hour", parseInt(startHour, 10)).toDate());
-        } else if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), "day")) {
-            setEndDate((0, _moment.default)(date).add(1, "d").startOf("day").toDate());
-        }
+    setHoverStatus(null);
+  };
+  let timerId;
+  const handleHover = date => {
+    if (!date) {
+      timerId = setTimeout(() => {
         setHoverStatus(null);
-    };
-    let timerId;
-    const handleHover = (date)=>{
-        if (!date) {
-            timerId = setTimeout(()=>{
-                setHoverStatus(null);
-            }, 400);
-            return;
-        }
-        if (timerId) clearTimeout(timerId);
-        if ((0, _moment.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0) {
-            if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), "day")) setHoverStatus("end");
-            else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), "day")) setHoverStatus("start");
-            else setHoverStatus(null);
-        } else {
-            setHoverStatus("start");
-        }
-    };
-    const handleChangeStartHour = ({ target: { value: val } })=>{
-        setStartHour(Number(val));
-        setStartDate((0, _moment.default)(startDate).set("hour", Number(val)).toDate());
-    };
-    const handleChangeEndHour = ({ target: { value: val } })=>{
-        const newHour = Number(val);
-        setEndHour(newHour);
-        let newEndDate;
-        if (prevEndHour.current === 0 && newHour !== 0) {
-            newEndDate = (0, _moment.default)(endDate).subtract(1, "days");
-        } else if (prevEndHour.current !== 0 && newHour === 0) {
-            newEndDate = (0, _moment.default)(endDate).add(1, "days");
-        } else {
-            newEndDate = endDate;
-        }
-        prevEndHour.current = newHour;
-        setEndDate((0, _moment.default)(newEndDate).set("hour", newHour).toDate());
-    };
-    const renderButtons = ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                    className: "plr15 mr5",
-                    onClick: ()=>onCancel(),
-                    children: txt.buttons.cancel
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                    className: "plr20",
-                    type: "filled",
-                    disabled: !startDate || !endDate,
-                    onClick: ()=>onChange({
-                            start: startDate,
-                            end: endDate,
-                            startPrevDate,
-                            endPrevDate,
-                            compare: isCompare
-                        }),
-                    children: txt.buttons.apply
-                })
-            ]
-        });
-    const renderPreviousPeriod = ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-            children: [
-                txt.labels.previousPeriod,
-                ":",
-                " ",
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                    className: "date-picker__previous-period-interval",
-                    children: title
-                })
-            ]
-        });
-    const handleStartDateFocus = ()=>{
-        setIsStartFocused(true);
-        setStartDateInput((0, _moment.default)(startDate).format("L"));
-    };
-    const handleStartDateBlur = ()=>{
-        let newDate;
-        if ((0, _moment.default)(startDateInput).isValid()) {
-            newDate = (0, _moment.default)(startDateInput).set("hour", parseInt(startHour, 10)).toDate();
-            setStartDate(newDate);
-        } else {
-            newDate = startDate;
-            setStartDateInput(newDate);
-        }
-        setIsStartFocused(false);
-        startDateInputRef.current.blur();
-        setDate1((0, _moment.default)(newDate).isSameOrAfter((0, _moment.default)(date2), "month") ? (0, _moment.default)(date2).subtract(1, "month") : (0, _moment.default)(newDate));
-    };
-    const handleEndDateFocus = ()=>{
-        setIsEndFocused(true);
-        setEndDateInput((0, _moment.default)(subtractDay(endDateInput)).format("L"));
-    };
-    const handleEndDateBlur = ()=>{
-        let newDate;
-        if ((0, _moment.default)(endDateInput).isValid()) {
-            newDate = (0, _moment.default)(endDateInput).set("hour", parseInt(endHour, 10)).toDate();
-            setEndDate(addDay(newDate));
-        } else {
-            newDate = endDate;
-            setEndDateInput(newDate);
-        }
-        setIsEndFocused(false);
-        endDateInputRef.current.blur();
-        setDate2(newDate);
-        setEndDateInput();
-    };
-    const handleKeyPressed = (e, handleDateBlur)=>{
-        if (e.key === "Enter") handleDateBlur();
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: "date-picker",
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "date-picker__header",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
-                        dataTest: "datepicker_start-date-input",
-                        className: (0, _classnames.default)("mr5", {
-                            "date-picker-text-input--active": hoverStatus === "start"
-                        }),
-                        value: isStartFocused ? startDateInput : (0, _moment.default)(startDate).format("ll"),
-                        disabled: !startDate,
-                        onChange: (e)=>setStartDateInput(e.target.value),
-                        onFocus: handleStartDateFocus,
-                        onBlur: handleStartDateBlur,
-                        onKeyPress: (e)=>handleKeyPressed(e, handleStartDateBlur),
-                        ref: startDateInputRef
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
-                        dataTest: "datepicker_start-hour-select-input",
-                        onChange: handleChangeStartHour,
-                        value: startHour,
-                        items: getStartHourItems(),
-                        disabled: !startDate,
-                        short: true
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "pl5 pr5 date-picker__header--gray",
-                        children: "—"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
-                        dataTest: "datepicker_end-date-input",
-                        className: (0, _classnames.default)("mr5", {
-                            "date-picker-text-input--active": hoverStatus === "end"
-                        }),
-                        value: isEndFocused ? endDateInput : (0, _moment.default)(subtractDay(endDate)).format("ll"),
-                        disabled: !endDate,
-                        onChange: (e)=>setEndDateInput(e.target.value),
-                        onFocus: handleEndDateFocus,
-                        onBlur: handleEndDateBlur,
-                        onKeyPress: (e)=>handleKeyPressed(e, handleEndDateBlur),
-                        ref: endDateInputRef
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
-                        dataTest: "datepicker_end-hour-select-input",
-                        onChange: handleChangeEndHour,
-                        value: endHour,
-                        items: getEndHourItems(),
-                        disabled: !endDate,
-                        short: true
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "date-picker__previous-period",
-                children: isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "date-picker__calendars",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.default, {
-                        date: date1,
-                        setDate: setDate1,
-                        allowNext: !isNearby,
-                        startDate: startDate,
-                        endDate: endDate,
-                        startPrevDate: startPrevDate,
-                        endPrevDate: endPrevDate,
-                        onClick: handleClick,
-                        onHover: handleHover,
-                        limitRange: limitRange
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.default, {
-                        date: date2,
-                        setDate: setDate2,
-                        allowPrev: !isNearby,
-                        startDate: startDate,
-                        endDate: endDate,
-                        startPrevDate: startPrevDate,
-                        endPrevDate: endPrevDate,
-                        onClick: handleClick,
-                        onHover: handleHover
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "date-picker__footer j46",
-                children: [
-                    !isCompareHidden ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "j4",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: "mr5",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Switcher.default, {
-                                dataTest: "datepicker_compare",
-                                label: txt.labels.compare,
-                                isSwitchOn: isCompare,
-                                onChange: ()=>{
-                                    onChangeCompare(!isCompare);
-                                    setIsCompare((state)=>!state);
-                                }
-                            })
-                        })
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {}),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        children: renderButtons()
-                    })
-                ]
-            })
-        ]
-    });
+      }, 400);
+      return;
+    }
+    if (timerId) clearTimeout(timerId);
+    if ((0, _moment.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0) {
+      if ((0, _moment.default)(date).isAfter((0, _moment.default)(startDate), "day")) setHoverStatus("end");else if ((0, _moment.default)(date).isBefore((0, _moment.default)(startDate), "day")) setHoverStatus("start");else setHoverStatus(null);
+    } else {
+      setHoverStatus("start");
+    }
+  };
+  const handleChangeStartHour = _ref => {
+    let {
+      target: {
+        value: val
+      }
+    } = _ref;
+    setStartHour(Number(val));
+    setStartDate((0, _moment.default)(startDate).set("hour", Number(val)).toDate());
+  };
+  const handleChangeEndHour = _ref2 => {
+    let {
+      target: {
+        value: val
+      }
+    } = _ref2;
+    const newHour = Number(val);
+    setEndHour(newHour);
+    let newEndDate;
+    if (prevEndHour.current === 0 && newHour !== 0) {
+      newEndDate = (0, _moment.default)(endDate).subtract(1, "days");
+    } else if (prevEndHour.current !== 0 && newHour === 0) {
+      newEndDate = (0, _moment.default)(endDate).add(1, "days");
+    } else {
+      newEndDate = endDate;
+    }
+    prevEndHour.current = newHour;
+    setEndDate((0, _moment.default)(newEndDate).set("hour", newHour).toDate());
+  };
+  const renderButtons = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "plr15 mr5",
+    onClick: () => onCancel()
+  }, txt.buttons.cancel), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "plr20",
+    type: "filled",
+    disabled: !startDate || !endDate,
+    onClick: () => onChange({
+      start: startDate,
+      end: endDate,
+      startPrevDate,
+      endPrevDate,
+      compare: isCompare
+    })
+  }, txt.buttons.apply));
+  const renderPreviousPeriod = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, txt.labels.previousPeriod, ":", " ", /*#__PURE__*/_react.default.createElement("span", {
+    className: "date-picker__previous-period-interval"
+  }, title));
+  const handleStartDateFocus = () => {
+    setIsStartFocused(true);
+    setStartDateInput((0, _moment.default)(startDate).format("L"));
+  };
+  const handleStartDateBlur = () => {
+    let newDate;
+    if ((0, _moment.default)(startDateInput).isValid()) {
+      newDate = (0, _moment.default)(startDateInput).set("hour", parseInt(startHour, 10)).toDate();
+      setStartDate(newDate);
+    } else {
+      newDate = startDate;
+      setStartDateInput(newDate);
+    }
+    setIsStartFocused(false);
+    startDateInputRef.current.blur();
+    setDate1((0, _moment.default)(newDate).isSameOrAfter((0, _moment.default)(date2), "month") ? (0, _moment.default)(date2).subtract(1, "month") : (0, _moment.default)(newDate));
+  };
+  const handleEndDateFocus = () => {
+    setIsEndFocused(true);
+    setEndDateInput((0, _moment.default)(subtractDay(endDateInput)).format("L"));
+  };
+  const handleEndDateBlur = () => {
+    let newDate;
+    if ((0, _moment.default)(endDateInput).isValid()) {
+      newDate = (0, _moment.default)(endDateInput).set("hour", parseInt(endHour, 10)).toDate();
+      setEndDate(addDay(newDate));
+    } else {
+      newDate = endDate;
+      setEndDateInput(newDate);
+    }
+    setIsEndFocused(false);
+    endDateInputRef.current.blur();
+    setDate2(newDate);
+    setEndDateInput();
+  };
+  const handleKeyPressed = (e, handleDateBlur) => {
+    if (e.key === "Enter") handleDateBlur();
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__header"
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    dataTest: "datepicker_start-date-input",
+    className: (0, _classnames.default)("mr5", {
+      "date-picker-text-input--active": hoverStatus === "start"
+    }),
+    value: isStartFocused ? startDateInput : (0, _moment.default)(startDate).format("ll"),
+    disabled: !startDate,
+    onChange: e => setStartDateInput(e.target.value),
+    onFocus: handleStartDateFocus,
+    onBlur: handleStartDateBlur,
+    onKeyPress: e => handleKeyPressed(e, handleStartDateBlur),
+    ref: startDateInputRef
+  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    dataTest: "datepicker_start-hour-select-input",
+    onChange: handleChangeStartHour,
+    value: startHour,
+    items: getStartHourItems(),
+    disabled: !startDate,
+    short: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pl5 pr5 date-picker__header--gray"
+  }, "\u2014"), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    dataTest: "datepicker_end-date-input",
+    className: (0, _classnames.default)("mr5", {
+      "date-picker-text-input--active": hoverStatus === "end"
+    }),
+    value: isEndFocused ? endDateInput : (0, _moment.default)(subtractDay(endDate)).format("ll"),
+    disabled: !endDate,
+    onChange: e => setEndDateInput(e.target.value),
+    onFocus: handleEndDateFocus,
+    onBlur: handleEndDateBlur,
+    onKeyPress: e => handleKeyPressed(e, handleEndDateBlur),
+    ref: endDateInputRef
+  }), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+    dataTest: "datepicker_end-hour-select-input",
+    onChange: handleChangeEndHour,
+    value: endHour,
+    items: getEndHourItems(),
+    disabled: !endDate,
+    short: true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__previous-period"
+  }, isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__calendars"
+  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date1,
+    setDate: setDate1,
+    allowNext: !isNearby,
+    startDate: startDate,
+    endDate: endDate,
+    startPrevDate: startPrevDate,
+    endPrevDate: endPrevDate,
+    onClick: handleClick,
+    onHover: handleHover,
+    limitRange: limitRange
+  }), /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date2,
+    setDate: setDate2,
+    allowPrev: !isNearby,
+    startDate: startDate,
+    endDate: endDate,
+    startPrevDate: startPrevDate,
+    endPrevDate: endPrevDate,
+    onClick: handleClick,
+    onHover: handleHover
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "date-picker__footer j46"
+  }, !isCompareHidden ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "j4"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mr5"
+  }, /*#__PURE__*/_react.default.createElement(_Switcher.default, {
+    dataTest: "datepicker_compare",
+    label: txt.labels.compare,
+    isSwitchOn: isCompare,
+    onChange: () => {
+      onChangeCompare(!isCompare);
+      setIsCompare(state => !state);
+    }
+  }))) : /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null, renderButtons())));
 };
-const _default = Datepicker;
+var _default = exports.default = Datepicker;