intelicoreact 1.5.41 → 1.6.0

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

@@ -1,319 +1,421 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-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"));
+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"));
 require("./Datepicker.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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"));
+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;
     }
-  }, [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"));
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: 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 cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-  }, [startDate, endDate]);
-  (0, _react.useEffect)(() => {
-    if ((0, _moment.default)(date1).isSameOrAfter((0, _moment.default)(date2), "month")) {
-      setDate1((0, _moment.default)(date2).subtract(1, "month"));
+    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];
+            }
+        }
     }
-  }, [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());
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-    setHoverStatus(null);
-  };
-  let timerId;
-  const handleHover = date => {
-    if (!date) {
-      timerId = setTimeout(() => {
+    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);
-      }, 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())));
+    };
+    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()
+                    })
+                ]
+            })
+        ]
+    });
 };
-var _default = exports.default = Datepicker;
+const _default = Datepicker;