intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -0,0 +1,657 @@
+// eslint-disable-next-line no-unused-vars
+"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 _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _momenttimezone = /*#__PURE__*/ _interop_require_default(require("moment-timezone"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../../../UI/Button/Button"));
+const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../../Dropdown/Dropdown"));
+const _RangeCalendar = /*#__PURE__*/ _interop_require_default(require("../../RangeCalendar/RangeCalendar"));
+const _Switcher = /*#__PURE__*/ _interop_require_default(require("../../Switcher/Switcher"));
+const _dependencies = require("../dependencies");
+const _DateInput = /*#__PURE__*/ _interop_require_default(require("./DateInput"));
+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 outsideScope = {
+    handleHoverTimerId: null
+};
+const DATE_INPUT_FORMAT = "MM/DD/YYYY";
+const padTime = (time)=>{
+    return `${time.toString().padStart(2, "0")}:00`;
+};
+const Datepicker = (props)=>{
+    const { txt, className, buttonsTypes = {}, values = {}, onChange, onChangeMobile, onChangeCompare, onCancel, getSelectedMode, onChangeInterval, isCompareHidden, limitRange, handleItemClick, setActiveInterval, isShortWeekNames, minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture, testId, mainId, withMobileLogic } = props;
+    const { start = null, end = null, compare = false } = values;
+    const startDateInputRef = (0, _react.useRef)(null);
+    const endDateInputRef = (0, _react.useRef)(null);
+    const [startDate, setStartDate] = (0, _react.useState)((0, _dependencies.getIsDateValid)(start) ? (0, _momenttimezone.default)(start) : "");
+    const [endDate, setEndDate] = (0, _react.useState)((0, _dependencies.getIsDateValid)(end) ? (0, _momenttimezone.default)(end) : "");
+    const dateInterval = getSelectedMode({
+        start: startDate,
+        end: endDate
+    });
+    const [startDateInput, setStartDateInput] = (0, _react.useState)(null);
+    const [endDateInput, setEndDateInput] = (0, _react.useState)(null);
+    const [isStartFocused, setIsStartFocused] = (0, _react.useState)(false);
+    const [isEndFocused, setIsEndFocused] = (0, _react.useState)(false);
+    const [startHour, setStartHour] = (0, _react.useState)(start ? (0, _momenttimezone.default)(start).hour() : 0);
+    const [endHour, setEndHour] = (0, _react.useState)(end ? (0, _momenttimezone.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, _momenttimezone.default)(start) : (0, _momenttimezone.default)().subtract(1, "month"));
+    const [date2, setDate2] = (0, _react.useState)(end ? (0, _momenttimezone.default)(end) : (0, _momenttimezone.default)());
+    const [hoverStatus, setHoverStatus] = (0, _react.useState)(null);
+    // ********************
+    // Constants
+    // ********************
+    const isNearby = (0, _react.useMemo)(()=>(0, _momenttimezone.default)(date2).subtract(1, "month").isSame((0, _momenttimezone.default)(date1), "month"), [
+        date1,
+        date2
+    ]);
+    const isPreviousPeriodShowed = (0, _react.useMemo)(()=>isCompare && !isCompareHidden && startDate && endDate, [
+        startDate,
+        endDate,
+        isCompare
+    ]);
+    const prevEndHour = (0, _react.useRef)(endHour);
+    const startPrevDate = (0, _react.useMemo)(()=>{
+        if (isPreviousPeriodShowed) {
+            const intervalHoursCount = (0, _momenttimezone.default)(endDate).diff(startDate, "hours");
+            return (0, _momenttimezone.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, _momenttimezone.default)(startPrevDate).format("ll")} (${(0, _momenttimezone.default)(startPrevDate).format(_dependencies.MAIN_TIME_FORMAT)}) - ${(0, _momenttimezone.default)(endPrevDate).format("ll")} (${(0, _momenttimezone.default)(endPrevDate).format(_dependencies.MAIN_TIME_FORMAT)})`;
+        } else return "";
+    }, [
+        startDate,
+        endDate,
+        isCompare
+    ]);
+    // ********************
+    // Methods
+    // ********************
+    const subtractDay = (date)=>endHour === 0 ? (0, _momenttimezone.default)(date).subtract(1, "days") : (0, _momenttimezone.default)(date);
+    const addDay = (date)=>endHour === 0 ? (0, _momenttimezone.default)(date).add(1, "days") : (0, _momenttimezone.default)(date);
+    const getCorrectedDateForDateInput = (key, date)=>{
+        if (key === "startDateInput") return (0, _momenttimezone.default)(date);
+        // return moment(date).subtract(1, 'm');
+        return subtractDay((0, _momenttimezone.default)(date));
+    };
+    const setInterval = ()=>{
+        setActiveInterval((0, _dependencies.getActualDateRange)({
+            start: startDate,
+            end: endDate
+        }).intervalKey);
+    };
+    // ********************
+    // Handlers
+    // ********************
+    const handleClick = (date)=>{
+        prevEndHour.current = 0;
+        if (!startDate || startDate && endDate && !((0, _momenttimezone.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0)) {
+            setStartDate((0, _momenttimezone.default)(date).startOf("day"));
+            setEndDate((0, _momenttimezone.default)(date).add(1, "d").startOf("day"));
+            setStartHour(0);
+            setEndHour(0);
+        } else if ((0, _momenttimezone.default)(date).isBefore((0, _momenttimezone.default)(startDate), "day")) {
+            setEndDate((0, _momenttimezone.default)(startDate).add(1, "d").startOf("day"));
+            setStartDate((0, _momenttimezone.default)(date).set("hour", parseInt(startHour, 10)));
+        } else if ((0, _momenttimezone.default)(date).isAfter((0, _momenttimezone.default)(startDate), "day")) {
+            setEndDate((0, _momenttimezone.default)(date).add(1, "d").startOf("day"));
+        }
+        setHoverStatus(null);
+    };
+    const handleHover = (date)=>{
+        if (outsideScope.handleHoverTimerId) clearTimeout(outsideScope.handleHoverTimerId);
+        if (!date) {
+            outsideScope.handleHoverTimerId = setTimeout(()=>{
+                setHoverStatus(null);
+            }, 400);
+            return;
+        }
+        if ((0, _momenttimezone.default)(startDate).add(1, "d").isSame(endDate, "day") && endHour === 0) {
+            if ((0, _momenttimezone.default)(date).isAfter((0, _momenttimezone.default)(startDate), "day")) setHoverStatus("end");
+            else if ((0, _momenttimezone.default)(date).isBefore((0, _momenttimezone.default)(startDate), "day")) setHoverStatus("start");
+            else setHoverStatus(null);
+        } else {
+            setHoverStatus("start");
+        }
+    };
+    const handleChangeStartHour = (val)=>{
+        setStartHour(Number(val));
+        setStartDate((0, _momenttimezone.default)(startDate || (0, _momenttimezone.default)()).set("hour", Number(val)));
+    };
+    const handleChangeEndHour = (val)=>{
+        const newHour = Number(val);
+        setEndHour(newHour);
+        let newEndDate = (0, _momenttimezone.default)();
+        if (endDate) {
+            if (prevEndHour.current === 0 && newHour !== 0) {
+                newEndDate = (0, _momenttimezone.default)(endDate).subtract(1, "days");
+            } else if (prevEndHour.current !== 0 && newHour === 0) {
+                newEndDate = (0, _momenttimezone.default)(endDate).add(1, "days");
+            }
+        }
+        prevEndHour.current = newHour;
+        setEndDate((0, _momenttimezone.default)(newEndDate).set("hour", newHour));
+    };
+    // const doBlur = (type, e) => {
+    //   const executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
+    //   e.target.blur();
+    //   executor(false);
+    // };
+    // const handleStartDateBlur = e => {
+    //   let newDate;
+    //   if (!moment(startDateInput).isValid()) {
+    //     newDate = moment(startDate);
+    //   } else {
+    //     if (minDate && moment(startDateInput).isBefore(minDate)) newDate = momentMinDate;
+    //     else if (!isDontLimitFuture) {
+    //       const edge = maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day');
+    //       if (moment(startDateInput).isAfter(edge)) newDate = edge;
+    //       else newDate = moment(startDateInput);
+    //     } else newDate = moment(startDateInput);
+    //   }
+    //   setStartDateInput(newDate.format(format));
+    //   setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
+    //   doBlur('start', e);
+    //   setDate1(
+    //     moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate),
+    //   );
+    // };
+    // const handleEndDateBlur = e => {
+    //   let newDate;
+    //   if (!moment(endDateInput).isValid()) {
+    //     newDate = moment(endDate);
+    //   } else {
+    //     if (minDate && moment(endDateInput).isBefore(minDate)) newDate = momentMinDate;
+    //     else if (!isDontLimitFuture) {
+    //       const edge = maxDate ? momentMaxDate : moment().endOf('day');
+    //       if (moment(endDateInput).isAfter(edge)) newDate = maxDate ? edge : edge.startOf('day');
+    //       else newDate = moment(startDateInput);
+    //     } else newDate = moment(startDateInput);
+    //   }
+    //   setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
+    //   setEndDateInput(newDate.format(format));
+    //   doBlur('end', e);
+    //   setDate2(newDate);
+    // };
+    const handleDateInputFocus = (key, e)=>{
+        const changeFlag = key === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+        const set = key === "startDateInput" ? setStartDateInput : setEndDateInput;
+        const date = key === "startDateInput" ? startDate : endDate;
+        changeFlag(true);
+        set(date ? getCorrectedDateForDateInput(key, date).format("L") : "");
+        setTimeout(()=>{
+            const defaultTarget = key === "startDateInput" ? startDateInputRef.current : endDateInputRef.current;
+            var _e_target;
+            const target = (_e_target = e === null || e === void 0 ? void 0 : e.target) !== null && _e_target !== void 0 ? _e_target : defaultTarget;
+            target.select();
+        //? Для инпут-маск, почему-то нужно пропустить 2 эвентлупа
+        // setTimeout(() => {
+        //   target.select();
+        // }, 0);
+        }, 0);
+    };
+    const doBlur = (type, e)=>{
+        const executor = type === "startDateInput" ? setIsStartFocused : setIsEndFocused;
+        e.target.blur();
+        executor(false);
+    };
+    const processOverflow = (newDateAsString, valueForRollback, key)=>{
+        const newDateAsMomentObj = (0, _momenttimezone.default)(newDateAsString, DATE_INPUT_FORMAT);
+        // console.log('processOverflow - newDateAsString - ', newDateAsString);
+        // console.log('processOverflow - valueForRollback - ', valueForRollback);
+        // console.log('----------');
+        // console.log('processOverflow - minDate - ', minDate);
+        // console.log('processOverflow - maxDate - ', maxDate);
+        // console.log('----------');
+        // console.log('processOverflow - momentMinDate - ', momentMinDate);
+        // console.log('processOverflow - momentMaxDate - ', momentMaxDate);
+        // console.log('----------');
+        // console.log('processOverflow - newDateAsMomentObj - ', newDateAsMomentObj);
+        // console.log('*********');
+        //? Если значение не валидно...
+        if (!newDateAsMomentObj.isValid()) {
+            //? ... то откатываем к дате до набора руками
+            return valueForRollback;
+        } else {
+            const beforeOfFuture = (0, _momenttimezone.default)().endOf("day");
+            const hour = key === "startDateInput" ? startHour : endHour;
+            let output;
+            //? Если есть минимальная дата и введенная меньше минимальной, то ставим минимальную
+            if (minDate && newDateAsMomentObj.isBefore(momentMinDate)) output = momentMinDate;
+            else if (maxDate && newDateAsMomentObj.isAfter(momentMaxDate)) output = momentMaxDate;
+            else if (!isDontLimitFuture && newDateAsMomentObj.isAfter(beforeOfFuture)) {
+                output = beforeOfFuture.startOf("day");
+            } else output = newDateAsMomentObj;
+            // if (key === 'startDateInput') {
+            //   console.log('endDate - ', endDate.format('YYYY-MM-DDTHH:mm'));
+            //   console.log('endDate.subtract(1, d) - ', endDate.subtract(1, 'd').format('YYYY-MM-DDTHH:mm'));
+            //   if (output.isAfter(endDate.subtract(1, 'd'))) output = endDate.subtract(1, 'd');
+            // }
+            if (key === "endDateInput") {
+                // console.log('startDate - ', startDate.format('YYYY-MM-DDTHH:mm'));
+                // if (output.isBefore(startDate)) output = startDate.add(1, 'd');
+                output = addDay(output);
+            }
+            // console.log('output - ', output.format('YYYY-MM-DDTHH:mm'));
+            // console.log('************');
+            return output.set("hour", parseInt(hour, 10));
+        }
+    };
+    const handleDateInputBlur = (key, e)=>{
+        var _e_target;
+        const reserveValue = key === "startDateInput" ? startDateInput : endDateInput;
+        const valueForRollback = key === "startDateInput" ? startDate : endDate;
+        const execute = key === "startDateInput" ? setStartDate : setEndDate;
+        const executeForCalendar = key === "startDateInput" ? setDate1 : setDate2;
+        const prepareValueForCalendar = (newDate)=>{
+            if (key === "endDateInput") return newDate;
+            return (0, _momenttimezone.default)(newDate).isSameOrAfter((0, _momenttimezone.default)(date2), "month") ? (0, _momenttimezone.default)(date2).subtract(1, "month") : (0, _momenttimezone.default)(newDate);
+        };
+        var _e_target_value;
+        const newDateValue = (_e_target_value = e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.value) !== null && _e_target_value !== void 0 ? _e_target_value : reserveValue;
+        const processedNewDate = processOverflow(newDateValue, valueForRollback, key);
+        execute(processedNewDate);
+        executeForCalendar(prepareValueForCalendar(processedNewDate));
+        doBlur(key, e);
+    };
+    const handleKeyPressed = (code, e, type)=>{
+        if (code === 13) handleDateInputBlur(type, e);
+        if (code === 27) doBlur(type, e);
+    };
+    // ********************
+    // Render Functions
+    // ********************
+    const getStartHourItems = ()=>[
+            ...Array(24).keys()
+        ].map((hour)=>({
+                label: padTime(hour),
+                value: hour,
+                disabled: (0, _momenttimezone.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, _momenttimezone.default)(startDate).isSame(endDate, "day") || (0, _momenttimezone.default)(startDate).isSame((0, _momenttimezone.default)(endDate).subtract(1, "days"), "day") && endHour === 0) && hour < startHour
+            }));
+    const renderButtons = ()=>{
+        var _txt_buttons, _txt_buttons1;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    className: "date-picker__button",
+                    onClick: ()=>onCancel(),
+                    variant: buttonsTypes === null || buttonsTypes === void 0 ? void 0 : buttonsTypes.cancel,
+                    children: (txt === null || txt === void 0 ? void 0 : (_txt_buttons = txt.buttons) === null || _txt_buttons === void 0 ? void 0 : _txt_buttons.cancel) || "Cancel"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    className: "date-picker__button",
+                    variant: buttonsTypes === null || buttonsTypes === void 0 ? void 0 : buttonsTypes.apply,
+                    disabled: !startDate || !endDate,
+                    onClick: ()=>onChange({
+                            start: (0, _momenttimezone.default)(startDate).format(_dependencies.MAIN_FORMAT),
+                            end: (0, _momenttimezone.default)(endDate).format(_dependencies.MAIN_FORMAT),
+                            startPrevDate: (0, _momenttimezone.default)(startPrevDate).format(_dependencies.MAIN_FORMAT),
+                            endPrevDate: (0, _momenttimezone.default)(endPrevDate).format(_dependencies.MAIN_FORMAT),
+                            compare: isCompare
+                        }),
+                    children: (txt === null || txt === void 0 ? void 0 : (_txt_buttons1 = txt.buttons) === null || _txt_buttons1 === void 0 ? void 0 : _txt_buttons1.apply) || "apply"
+                })
+            ]
+        });
+    };
+    const renderPreviousPeriod = ()=>{
+        var _txt_labels;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                (txt === null || txt === void 0 ? void 0 : (_txt_labels = txt.labels) === null || _txt_labels === void 0 ? void 0 : _txt_labels.previousPeriod) || "",
+                ":",
+                " ",
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: "date-picker__previous-period-interval",
+                    children: title
+                })
+            ]
+        });
+    };
+    // ********************
+    // useEffects
+    // ********************
+    (0, _react.useEffect)(()=>{
+        if ((0, _momenttimezone.default)(startDate).isSameOrAfter(endDate)) {
+            setStartDate((0, _momenttimezone.default)(endDate).subtract(1, "d"));
+            setDate1((0, _momenttimezone.default)(endDate).subtract(1, "d"));
+        }
+    }, [
+        startDate
+    ]);
+    (0, _react.useEffect)(()=>{
+        if ((0, _momenttimezone.default)(endDate).isSameOrBefore(startDate)) {
+            setEndDate((0, _momenttimezone.default)(startDate).add(1, "d"));
+            setDate2((0, _momenttimezone.default)(startDate).add(1, "d"));
+        }
+    }, [
+        endDate
+    ]);
+    (0, _react.useEffect)(()=>{
+        if ((0, _momenttimezone.default)(startDate).isBefore((0, _momenttimezone.default)(endDate), "month")) {
+            setDate1((0, _momenttimezone.default)(startDate));
+            setDate2((0, _momenttimezone.default)(endDate));
+        }
+        setInterval();
+    }, [
+        startDate,
+        endDate
+    ]);
+    (0, _react.useEffect)(()=>{
+        if ((0, _momenttimezone.default)(date1).isSameOrAfter((0, _momenttimezone.default)(date2), "month") && !withMobileLogic) {
+            setDate1((0, _momenttimezone.default)(date2).subtract(1, "month"));
+        }
+    }, [
+        date1,
+        date2
+    ]);
+    (0, _react.useEffect)(()=>{
+        onChangeInterval(dateInterval);
+    }, [
+        dateInterval
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (typeof onChangeMobile === "function") {
+            onChangeMobile({
+                start: (0, _momenttimezone.default)(startDate).format(_dependencies.MAIN_FORMAT),
+                end: (0, _momenttimezone.default)(endDate).format(_dependencies.MAIN_FORMAT),
+                startPrevDate: (0, _momenttimezone.default)(startPrevDate).format(_dependencies.MAIN_FORMAT),
+                endPrevDate: (0, _momenttimezone.default)(endPrevDate).format(_dependencies.MAIN_FORMAT),
+                compare: isCompare
+            });
+        }
+    }, [
+        startDate,
+        endDate,
+        startPrevDate,
+        endPrevDate,
+        isCompare
+    ]);
+    const renderRowStart = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "date-picker__date-row",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_DateInput.default, {
+                    ref: startDateInputRef,
+                    testId: `datepicker-${testId}_start-date-input`,
+                    RC: "date-picker__date-input",
+                    className: (0, _classnames.default)("date-picker__date-input"),
+                    isFocused: isStartFocused,
+                    value: startDateInput,
+                    date: getCorrectedDateForDateInput("startDateInput", startDate),
+                    disabled: !startDate,
+                    onChange: setStartDateInput,
+                    onFocus: (e)=>handleDateInputFocus("startDateInput", e),
+                    onBlur: (e)=>handleDateInputBlur("startDateInput", e),
+                    onKeyUp: (code, e)=>handleKeyPressed(code, e, "startDateInput")
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
+                    testId: testId,
+                    id: `datepicker-id-${mainId}_start-hour-select-input`,
+                    dataTest: "datepicker_start-hour-select-input",
+                    className: (0, _classnames.default)("date-picker__hour-select-input"),
+                    onChange: (value)=>handleChangeStartHour(value),
+                    value: startHour,
+                    options: getStartHourItems(),
+                    disabled: !startDate,
+                    isDoNotPullOutListOfMainContainer: true,
+                    short: true,
+                    withMobileLogic: withMobileLogic
+                })
+            ]
+        });
+    };
+    const renderRowEnd = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "date-picker__date-row",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_DateInput.default, {
+                    ref: endDateInputRef,
+                    testId: `datepicker-${testId}_start-date-input`,
+                    RC: "date-picker__date-input",
+                    className: (0, _classnames.default)("date-picker__date-input"),
+                    isFocused: isEndFocused,
+                    value: endDateInput,
+                    date: getCorrectedDateForDateInput("endDateInput", endDate),
+                    disabled: !endDate,
+                    onChange: setEndDateInput,
+                    onFocus: (e)=>handleDateInputFocus("endDateInput", e),
+                    onBlur: (e)=>handleDateInputBlur("endDateInput", e),
+                    onKeyUp: (code, e)=>handleKeyPressed(code, e, "endDateInput")
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
+                    testId: testId,
+                    id: `datepicker-id-${mainId}_end-hour-select-input`,
+                    dataTest: "datepicker_end-hour-select-input",
+                    className: (0, _classnames.default)("date-picker__hour-select-input"),
+                    onChange: (value)=>handleChangeEndHour(value),
+                    value: endHour,
+                    options: getEndHourItems(),
+                    disabled: !endDate,
+                    isDoNotPullOutListOfMainContainer: true,
+                    short: true,
+                    withMobileLogic: withMobileLogic
+                })
+            ]
+        });
+    };
+    const renderCalendarStart = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeCalendar.default, {
+            testId: testId,
+            className: "date-picker__calendar",
+            date: date1,
+            setDate: setDate1,
+            allowNext: withMobileLogic ? !(0, _momenttimezone.default)(date1).startOf("month").isSameOrAfter((0, _momenttimezone.default)().startOf("day"), "months") : !isNearby,
+            startDate: startDate,
+            endDate: endDate,
+            startPrevDate: startPrevDate,
+            endPrevDate: endPrevDate,
+            onClick: handleClick,
+            onHover: handleHover,
+            limitRange: limitRange,
+            isShortWeekNames: isShortWeekNames,
+            minDate: minDate,
+            maxDate: maxDate,
+            momentMinDate: momentMinDate,
+            momentMaxDate: momentMaxDate
+        });
+    };
+    const renderCalendarEnd = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeCalendar.default, {
+            className: "date-picker__calendar",
+            date: date2,
+            setDate: setDate2,
+            allowPrev: !isNearby,
+            startDate: startDate,
+            endDate: endDate,
+            startPrevDate: startPrevDate,
+            endPrevDate: endPrevDate,
+            onClick: handleClick,
+            onHover: handleHover,
+            isShortWeekNames: isShortWeekNames,
+            minDate: minDate,
+            maxDate: maxDate,
+            momentMinDate: momentMinDate,
+            momentMaxDate: momentMaxDate,
+            isDontLimitFuture: isDontLimitFuture
+        });
+    };
+    const render = ()=>{
+        var _txt_labels;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)("date-picker", className),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "date-picker__header",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "date-picker__inputs-block",
+                            children: [
+                                renderRowStart(),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "date-picker__inputs-separator date-picker__header--gray",
+                                    children: "—"
+                                }),
+                                renderRowEnd()
+                            ]
+                        }),
+                        isCompare && !isCompareHidden && startDate && endDate && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "date-picker__previous-period",
+                            children: renderPreviousPeriod()
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "date-picker__calendars",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "date-picker__calendars-wrapper",
+                        children: [
+                            renderCalendarStart(),
+                            renderCalendarEnd()
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)("date-picker__footer", {
+                        "date-picker__footer_once-element": isCompareHidden
+                    }),
+                    children: [
+                        !isCompareHidden ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "date-picker__compare-block",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "mr5",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Switcher.default, {
+                                    dataTest: "datepicker_compare",
+                                    label: (txt === null || txt === void 0 ? void 0 : (_txt_labels = txt.labels) === null || _txt_labels === void 0 ? void 0 : _txt_labels.compare) || "Compare",
+                                    isSwitchOn: isCompare,
+                                    onChange: ()=>{
+                                        onChangeCompare(!isCompare);
+                                        setIsCompare((state)=>!state);
+                                    }
+                                })
+                            })
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {}),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "date-picker__buttons-block",
+                            children: renderButtons()
+                        })
+                    ]
+                })
+            ]
+        });
+    };
+    const renderMobile = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)("date-picker", className),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "date-picker__header",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "date-picker__inputs-block",
+                            children: [
+                                renderRowStart(),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "date-picker__inputs-separator date-picker__header--gray",
+                                    children: "—"
+                                }),
+                                renderRowEnd()
+                            ]
+                        }),
+                        isCompare && !isCompareHidden && startDate && endDate && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "date-picker__previous-period",
+                            children: renderPreviousPeriod()
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "date-picker__calendars",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "date-picker__calendars-wrapper",
+                        children: renderCalendarStart()
+                    })
+                })
+            ]
+        });
+    };
+    return withMobileLogic ? renderMobile() : render();
+};
+const _default = Datepicker;