@alfalab/core-components 45.6.0-beta.0 → 45.6.0-beta.1

package/calendar-range/cssm/hooks.js

@@ -0,0 +1,151 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var addMonths = require('date-fns/addMonths');
+var isEqual = require('date-fns/isEqual');
+var max = require('date-fns/max');
+var min = require('date-fns/min');
+var startOfMonth = require('date-fns/startOfMonth');
+var subMonths = require('date-fns/subMonths');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var addMonths__default = /*#__PURE__*/_interopDefaultCompat(addMonths);
+var isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
+var max__default = /*#__PURE__*/_interopDefaultCompat(max);
+var min__default = /*#__PURE__*/_interopDefaultCompat(min);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var subMonths__default = /*#__PURE__*/_interopDefaultCompat(subMonths);
+
+function usePopoverViewMonthes(_a) {
+    var dateFrom = _a.dateFrom, dateTo = _a.dateTo, defaultMonth = _a.defaultMonth, resetKey = _a.resetKey;
+    var _b = React.useState(), monthFrom = _b[0], setMonthFrom = _b[1];
+    var _c = React.useState(), monthTo = _c[0], setMonthTo = _c[1];
+    var handleMonthFromChange = React.useCallback(function (newMonthFrom) {
+        setMonthFrom(newMonthFrom);
+        if (!dateTo) {
+            setMonthTo(newMonthFrom);
+        }
+    }, [dateTo]);
+    var handleMonthToChange = React.useCallback(function (newMonthTo) {
+        setMonthTo(newMonthTo);
+        if (!dateFrom) {
+            setMonthFrom(newMonthTo);
+        }
+    }, [dateFrom]);
+    React.useEffect(function () {
+        setMonthFrom(dateFrom ? startOfMonth__default.default(dateFrom).getTime() : defaultMonth);
+    }, [defaultMonth, dateFrom, resetKey]);
+    React.useEffect(function () {
+        setMonthTo(dateTo ? startOfMonth__default.default(dateTo).getTime() : monthFrom);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dateTo, resetKey]);
+    return {
+        monthFrom: monthFrom,
+        monthTo: monthTo,
+        handleMonthFromChange: handleMonthFromChange,
+        handleMonthToChange: handleMonthToChange,
+    };
+}
+function useStaticViewMonthes(_a) {
+    var selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, defaultMonth = _a.defaultMonth, defaultMonthPosition = _a.defaultMonthPosition;
+    /**
+     * Если указана начальная дата — левый месяц равен ей, иначе используется дата конца.
+     * Если обе даты не указаны, то используется дефолтный месяц
+     */
+    var initialMonthFrom = React.useMemo(function () { return startOfMonth__default.default(selectedFrom || selectedTo || defaultMonth).getTime(); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    /**
+     * Правый месяц должен быть как минимум на 1 месяц больше левого
+     */
+    var initialMonthTo = React.useMemo(function () {
+        return max__default.default([
+            selectedTo ? startOfMonth__default.default(selectedTo) : 0,
+            addMonths__default.default(initialMonthFrom, 1),
+        ]).getTime();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    if (defaultMonthPosition === 'right') {
+        initialMonthTo = initialMonthFrom;
+        initialMonthFrom = subMonths__default.default(initialMonthFrom, 1).getTime();
+    }
+    var _b = React.useState(initialMonthFrom), monthFrom = _b[0], setMonthFrom = _b[1];
+    var _c = React.useState(initialMonthTo), monthTo = _c[0], setMonthTo = _c[1];
+    var handleMonthFromChange = React.useCallback(function (newMonthFrom) {
+        setMonthFrom(newMonthFrom);
+        if (monthTo && isEqual__default.default(newMonthFrom, monthTo)) {
+            var nextMonth = addMonths__default.default(newMonthFrom, 1).getTime();
+            setMonthTo(nextMonth);
+        }
+    }, [monthTo]);
+    var handleMonthToChange = React.useCallback(function (newMonthTo) {
+        setMonthTo(newMonthTo);
+        if (monthFrom && isEqual__default.default(newMonthTo, monthFrom)) {
+            var prevMonth = subMonths__default.default(newMonthTo, 1).getTime();
+            setMonthFrom(prevMonth);
+        }
+    }, [monthFrom]);
+    // eslint-disable-next-line complexity
+    React.useEffect(function () {
+        var selectedFromMonth = selectedFrom ? startOfMonth__default.default(selectedFrom).getTime() : undefined;
+        var selectedToMonth = selectedTo ? startOfMonth__default.default(selectedTo).getTime() : undefined;
+        // Проверяем, показываются ли выбранные месяцы в левой или правой части компонента
+        var fromMonthOnLeft = selectedFromMonth && selectedFromMonth === monthFrom;
+        var fromMonthOnRight = selectedFromMonth && selectedFromMonth === monthTo;
+        var toMonthOnRight = selectedToMonth && selectedToMonth === monthTo;
+        var toMonthOnLeft = selectedToMonth && selectedToMonth === monthFrom;
+        var fromMonthOnScreen = fromMonthOnLeft || fromMonthOnRight;
+        var toMonthOnScreen = toMonthOnLeft || toMonthOnRight;
+        if (fromMonthOnLeft && toMonthOnLeft) {
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), monthTo]).getTime());
+            return;
+        }
+        if (fromMonthOnRight && toMonthOnRight) {
+            setMonthFrom(min__default.default([subMonths__default.default(selectedToMonth, 1), monthFrom]).getTime());
+            return;
+        }
+        if (selectedFromMonth && selectedToMonth) {
+            setMonthFrom(selectedFromMonth);
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), selectedToMonth]).getTime());
+            return;
+        }
+        if (selectedFromMonth && !selectedToMonth && !fromMonthOnScreen) {
+            setMonthFrom(selectedFromMonth);
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), monthTo]).getTime());
+        }
+        if (selectedToMonth && !selectedFromMonth && !toMonthOnScreen) {
+            setMonthTo(selectedToMonth);
+            setMonthFrom(min__default.default([subMonths__default.default(selectedToMonth, 1), monthFrom]).getTime());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedFrom, selectedTo]);
+    return {
+        monthFrom: monthFrom,
+        monthTo: monthTo,
+        handleMonthFromChange: handleMonthFromChange,
+        handleMonthToChange: handleMonthToChange,
+    };
+}
+function useSelectionProps(from, to, highlighted) {
+    return React.useMemo(function () {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min__default.default([from, to]).getTime(),
+                selectedTo: max__default.default([from, to]).getTime(),
+            };
+        }
+        var dates = [from, to, highlighted].filter(function (date) { return date !== undefined; });
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min__default.default(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max__default.default(dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}
+
+exports.usePopoverViewMonthes = usePopoverViewMonthes;
+exports.useSelectionProps = useSelectionProps;
+exports.useStaticViewMonthes = useStaticViewMonthes;

package/calendar-range/cssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/calendar-range/cssm/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.CalendarRange = Component.CalendarRange;

package/calendar-range/cssm/utils.d.ts

@@ -0,0 +1,2 @@
+declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
+export { isDayButton };

package/calendar-range/cssm/utils.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isDayButton = function (node) {
+    return node && node.tagName === 'BUTTON' && node.dataset.date;
+};
+
+exports.isDayButton = isDayButton;

package/calendar-range/cssm/views/index.module.css

@@ -0,0 +1,52 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+    --gap-m: 16px;
+} :root {
+} :root {
+} :root {
+    --calendar-inner-width: 280px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+} .component {
+    display: flex
+} .component button[aria-selected='true'] {
+        cursor: pointer;
+    } .component *[class*='errorIcon_'] {
+        display: none;
+    } .component *[class*='calendarIcon_'] {
+        margin-right: 0;
+    } .static .calendar {
+        width: var(--calendar-inner-width)
+    } .static .calendar > div:first-child {
+            padding: var(--gap-m) 0 var(--gap-s);
+        }

package/calendar-range/cssm/views/popover.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../Component";
+type CalendarRangePopoverProps = Omit<CalendarRangeProps, 'calendarPosition'>;
+declare const CalendarRangePopover: FC<CalendarRangePopoverProps>;
+export { CalendarRangePopoverProps, CalendarRangePopover };

package/calendar-range/cssm/views/popover.js

@@ -0,0 +1,131 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var startOfMonth = require('date-fns/startOfMonth');
+var coreComponentsCalendarInput = require('../../../calendar-input/cssm');
+var shared = require('../../../calendar-input/cssm/shared');
+var coreComponentsDateInput = require('../../../date-input/cssm');
+var hooks$1 = require('@alfalab/hooks');
+var components_divider_Component = require('../components/divider/Component.js');
+var hooks = require('../hooks.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CalendarRangePopover = function (_a) {
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default.default(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.valueFrom, valueFrom = _c === void 0 ? '' : _c, _d = _a.valueTo, valueTo = _d === void 0 ? '' : _d, _e = _a.onDateFromChange, onDateFromChange = _e === void 0 ? function () { return null; } : _e, _f = _a.onDateToChange, onDateToChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { return null; } : _g, onError = _a.onError, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, _k = _a.returnInvalidDates, returnInvalidDates = _k === void 0 ? false : _k, dataTestId = _a.dataTestId;
+    var _l = React.useState(valueFrom), inputFromValue = _l[0], setInputFromValue = _l[1];
+    var _m = React.useState(valueTo), inputToValue = _m[0], setInputToValue = _m[1];
+    /**
+     * Ключ для сброса календарей
+     * Пользователь открыл календарь, изменил месяц, но ничего не выбрал
+     * — при следующем открытии в календаре будет установлен начальный месяц
+     */
+    var _o = React.useState(0), resetKey = _o[0], setResetKey = _o[1];
+    var dateFrom = shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? shared.parseDateString(inputFromValue).getTime()
+        : null;
+    var dateTo = shared.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? shared.parseDateString(inputToValue).getTime()
+        : null;
+    var _p = React.useState(coreComponentsDateInput.isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _p[0], setInputFromInvalid = _p[1];
+    var _q = React.useState(coreComponentsDateInput.isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _q[0], setInputToInvalid = _q[1];
+    var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
+        coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
+        shared.parseDateString(inputFromValue).getTime() > shared.parseDateString(inputToValue).getTime();
+    var hasValidateError = inputFromInvalid || inputToInvalid || bothInvalid;
+    var _r = hooks.usePopoverViewMonthes({
+        dateFrom: dateFrom,
+        dateTo: dateTo,
+        defaultMonth: defaultMonth,
+        resetKey: resetKey,
+    }), monthFrom = _r.monthFrom, monthTo = _r.monthTo, handleMonthFromChange = _r.handleMonthFromChange, handleMonthToChange = _r.handleMonthToChange;
+    var handleValidInputFrom = React.useCallback(function () {
+        setInputFromInvalid(inputFromValue !== '' && !shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays));
+    }, [inputFromValue, maxDate, minDate, offDays]);
+    var handleValidInputTo = React.useCallback(function () {
+        setInputToInvalid(inputToValue !== '' &&
+            !shared.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays));
+    }, [dateFrom, inputToValue, maxDate, minDate, offDays]);
+    var handleInputFromChange = function (event, payload) {
+        var _a;
+        setInputFromValue(payload.value);
+        (_a = inputFromProps.onInputChange) === null || _a === void 0 ? void 0 : _a.call(inputFromProps, event, payload);
+    };
+    var handleInputToChange = function (event, payload) {
+        var _a;
+        setInputToValue(payload.value);
+        (_a = inputToProps.onInputChange) === null || _a === void 0 ? void 0 : _a.call(inputToProps, event, payload);
+    };
+    var handleInputFromBlur = React.useCallback(function () {
+        handleValidInputFrom();
+        setResetKey(+new Date());
+    }, [handleValidInputFrom]);
+    var handleInputToBlur = React.useCallback(function () {
+        handleValidInputTo();
+        setResetKey(+new Date());
+    }, [handleValidInputTo]);
+    var handleFromChange = React.useCallback(function (_, payload) {
+        setInputFromValue(payload.value);
+    }, []);
+    var handleToChange = React.useCallback(function (_, payload) {
+        setInputToValue(payload.value);
+    }, []);
+    React.useEffect(function () {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+    React.useEffect(function () {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+    hooks$1.useDidUpdateEffect(function () {
+        onDateFromChange({ value: inputFromValue, date: dateFrom });
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom: dateFrom,
+            dateTo: dateTo,
+        });
+        if (!inputFromValue || coreComponentsDateInput.isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+    hooks$1.useDidUpdateEffect(function () {
+        onDateToChange({ value: inputToValue, date: dateTo });
+        // eslint-disable-next-line no-nested-ternary
+        var inputDateTo = returnInvalidDates
+            ? coreComponentsDateInput.isCompleteDateInput(inputToValue)
+                ? shared.parseDateString(inputToValue).getTime()
+                : null
+            : dateTo;
+        onChange({
+            valueFrom: inputFromValue,
+            valueTo: inputToValue,
+            dateFrom: dateFrom,
+            dateTo: inputDateTo,
+        });
+        if (!inputToValue || coreComponentsDateInput.isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+    React.useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "data-test-id": dataTestId },
+        React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, tslib.__assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-start', error: inputFromInvalid || bothInvalid || inputFromProps.error, onChange: handleFromChange, onInputChange: handleInputFromChange, onBlur: handleInputFromBlur, value: inputFromValue, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib.__assign(tslib.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
+        React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, tslib.__assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib.__assign(tslib.__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
+};
+
+exports.CalendarRangePopover = CalendarRangePopover;

package/calendar-range/cssm/views/static.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../Component";
+type CalendarRangeStaticProps = Omit<CalendarRangeProps, 'calendarPosition'> & {
+    /**
+     * Отображать начальный месяц слева или справа (влияет только на начальный рендер)
+     */
+    defaultMonthPosition?: 'left' | 'right';
+};
+declare const CalendarRangeStatic: FC<CalendarRangeStaticProps>;
+export { CalendarRangeStaticProps, CalendarRangeStatic };

package/calendar-range/cssm/views/static.js

@@ -0,0 +1,191 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var addMonths = require('date-fns/addMonths');
+var endOfMonth = require('date-fns/endOfMonth');
+var isSameMonth = require('date-fns/isSameMonth');
+var max = require('date-fns/max');
+var startOfMonth = require('date-fns/startOfMonth');
+var subMonths = require('date-fns/subMonths');
+var desktop = require('../../../calendar/cssm/desktop');
+var shared$1 = require('../../../calendar/cssm/shared');
+var shared = require('../../../calendar-input/cssm/shared');
+var coreComponentsDateInput = require('../../../date-input/cssm');
+var components_divider_Component = require('../components/divider/Component.js');
+var hooks = require('../hooks.js');
+var utils = require('../utils.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var addMonths__default = /*#__PURE__*/_interopDefaultCompat(addMonths);
+var endOfMonth__default = /*#__PURE__*/_interopDefaultCompat(endOfMonth);
+var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
+var max__default = /*#__PURE__*/_interopDefaultCompat(max);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var subMonths__default = /*#__PURE__*/_interopDefaultCompat(subMonths);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var CalendarRangeStatic = function (_a) {
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default.default(new Date()).getTime() : _b, _c = _a.defaultMonthPosition, defaultMonthPosition = _c === void 0 ? 'left' : _c, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.valueFrom, valueFrom = _d === void 0 ? '' : _d, _e = _a.valueTo, valueTo = _e === void 0 ? '' : _e, _f = _a.onDateFromChange, onDateFromChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onDateToChange, onDateToChange = _g === void 0 ? function () { return null; } : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { return null; } : _h, onError = _a.onError, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, _l = _a.returnInvalidDates, returnInvalidDates = _l === void 0 ? false : _l, dataTestId = _a.dataTestId;
+    var _m = React.useState(valueFrom), inputFromValue = _m[0], setInputFromValue = _m[1];
+    var _o = React.useState(valueTo), inputToValue = _o[0], setInputToValue = _o[1];
+    var dateFrom = shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
+        ? shared.parseDateString(inputFromValue).getTime()
+        : null;
+    var dateTo = shared.isValidInputValue(inputToValue, dateFrom || minDate, maxDate, offDays)
+        ? shared.parseDateString(inputToValue).getTime()
+        : null;
+    if (coreComponentsDateInput.isCompleteDateInput(inputToValue) && !dateTo && !returnInvalidDates) {
+        dateFrom = null;
+    }
+    var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
+        coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
+        shared.parseDateString(inputFromValue).getTime() > shared.parseDateString(inputToValue).getTime();
+    var _p = React.useState(undefined), highlightedDate = _p[0], setHighlightedDate = _p[1];
+    var period = shared$1.usePeriodWithReset({
+        initialSelectedFrom: dateFrom ? shared.parseDateString(inputFromValue).getTime() : undefined,
+        initialSelectedTo: dateTo ? shared.parseDateString(inputToValue).getTime() : undefined,
+    });
+    var validateInputFromValue = React.useCallback(function (value) { return shared.isValidInputValue(value, minDate, dateFrom || maxDate, offDays); }, [dateFrom, maxDate, minDate, offDays]);
+    var validateInputToValue = React.useCallback(function (value) { return shared.isValidInputValue(value, dateFrom || minDate, maxDate, offDays); }, [dateFrom, minDate, maxDate, offDays]);
+    var _q = React.useState(coreComponentsDateInput.isCompleteDateInput(inputFromValue) && dateFrom === null), inputFromInvalid = _q[0], setInputFromInvalid = _q[1];
+    var _r = React.useState(coreComponentsDateInput.isCompleteDateInput(inputToValue) && dateTo === null), inputToInvalid = _r[0], setInputToInvalid = _r[1];
+    var hasValidateError = bothInvalid || inputFromInvalid || inputToInvalid;
+    var calendarFromProps = inputFromProps.calendarProps, onInputChangeFrom = inputFromProps.onInputChange, dateInputFromProps = tslib.__rest(inputFromProps, ["calendarProps", "onInputChange"]);
+    var calendarToProps = inputToProps.calendarProps, onInputChangeTo = inputToProps.onInputChange, dateInputToProps = tslib.__rest(inputToProps, ["calendarProps", "onInputChange"]);
+    var _s = hooks.useStaticViewMonthes({
+        selectedFrom: period.selectedFrom,
+        selectedTo: period.selectedTo,
+        defaultMonth: defaultMonth,
+        defaultMonthPosition: defaultMonthPosition,
+    }), monthFrom = _s.monthFrom, monthTo = _s.monthTo, handleMonthFromChange = _s.handleMonthFromChange, handleMonthToChange = _s.handleMonthToChange;
+    var handleValidInputFrom = React.useCallback(function () {
+        setInputFromInvalid(inputFromValue !== '' && !validateInputFromValue(inputFromValue));
+    }, [inputFromValue, validateInputFromValue]);
+    var handleValidInputTo = React.useCallback(function () {
+        setInputToInvalid(inputToValue !== '' && !validateInputToValue(inputToValue));
+    }, [inputToValue, validateInputToValue]);
+    var handleInputFromChange = function (event, payload) {
+        setInputFromValue(payload.value);
+        onInputChangeFrom === null || onInputChangeFrom === void 0 ? void 0 : onInputChangeFrom(event, payload);
+    };
+    var handleInputToChange = function (event, payload) {
+        setInputToValue(payload.value);
+        onInputChangeTo === null || onInputChangeTo === void 0 ? void 0 : onInputChangeTo(event, payload);
+    };
+    var handleMouseOver = React.useCallback(function (event) {
+        var target = event.target;
+        var mouseOverDayButton = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
+        var date;
+        if (mouseOverDayButton) {
+            var button = target.tagName === 'BUTTON' ? target : target.parentElement;
+            if (button.dataset.date) {
+                date = +button.dataset.date;
+            }
+        }
+        setHighlightedDate(date);
+    }, []);
+    var handleClearFrom = React.useCallback(function () {
+        setInputFromValue('');
+    }, []);
+    var handleClearTo = React.useCallback(function () {
+        setInputToValue('');
+    }, []);
+    React.useEffect(function () {
+        setInputFromValue(period.selectedFrom ? shared.formatDate(period.selectedFrom) : '');
+    }, [period.selectedFrom]);
+    React.useEffect(function () {
+        setInputToValue(period.selectedTo ? shared.formatDate(period.selectedTo) : '');
+    }, [period.selectedTo]);
+    React.useEffect(function () {
+        setInputFromValue(valueFrom);
+    }, [valueFrom]);
+    React.useEffect(function () {
+        setInputToValue(valueTo);
+    }, [valueTo]);
+    React.useEffect(function () {
+        if (!inputFromValue || coreComponentsDateInput.isCompleteDateInput(inputFromValue)) {
+            handleValidInputFrom();
+        }
+        period.setStart(dateFrom || undefined);
+        if (dateTo) {
+            period.setEnd(dateTo);
+        }
+        if (inputFromValue !== valueFrom) {
+            onDateFromChange({
+                value: inputFromValue,
+                date: dateFrom,
+            });
+            onChange({
+                valueFrom: inputFromValue,
+                valueTo: inputToValue,
+                dateFrom: dateFrom,
+                dateTo: dateTo,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputFromValue]);
+    React.useEffect(function () {
+        if (!inputToValue || coreComponentsDateInput.isCompleteDateInput(inputToValue)) {
+            handleValidInputTo();
+        }
+        period.setEnd(dateTo || undefined);
+        if (dateFrom) {
+            period.setStart(dateFrom);
+        }
+        if (inputToValue !== valueTo) {
+            // eslint-disable-next-line no-nested-ternary
+            var inputDateTo = returnInvalidDates
+                ? coreComponentsDateInput.isCompleteDateInput(inputToValue)
+                    ? shared.parseDateString(inputToValue).getTime()
+                    : null
+                : dateTo;
+            onDateToChange({
+                value: inputToValue,
+                date: inputDateTo,
+            });
+            onChange({
+                valueFrom: inputFromValue,
+                valueTo: inputToValue,
+                dateFrom: dateFrom,
+                dateTo: inputDateTo,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputToValue]);
+    React.useEffect(function () {
+        if (onError) {
+            onError(hasValidateError);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasValidateError]);
+    var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
+    var CalendarFromComponent = dateInputFromProps.Calendar || desktop.CalendarDesktop;
+    var CalendarToComponent = dateInputToProps.Calendar || desktop.CalendarDesktop;
+    var minMaxInSameMonth = minDate && maxDate && isSameMonth__default.default(minDate, maxDate);
+    return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
+        React__default.default.createElement("div", null,
+            React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, dateInputFromProps, { mobileMode: dateInputFromProps.mobileMode === 'popover'
+                    ? 'input'
+                    : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true })),
+            React__default.default.createElement(CalendarFromComponent, tslib.__assign({}, calendarFromProps, { className: cn__default.default(styles__default.default.calendar, calendarFromProps === null || calendarFromProps === void 0 ? void 0 : calendarFromProps.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: minMaxInSameMonth
+                    ? maxDate
+                    : maxDate && max__default.default([maxDate, endOfMonth__default.default(subMonths__default.default(maxDate, 1))]).getTime() }, rangeProps))),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
+        React__default.default.createElement("div", null,
+            React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
+                    ? 'input'
+                    : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid || dateInputToProps.error, clear: true, block: true })),
+            React__default.default.createElement(CalendarToComponent, tslib.__assign({}, calendarToProps, { className: cn__default.default(styles__default.default.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minMaxInSameMonth
+                    ? minDate
+                    : minDate && startOfMonth__default.default(addMonths__default.default(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
+};
+
+exports.CalendarRangeStatic = CalendarRangeStatic;