@alfalab/core-components-calendar-range 5.0.0 → 5.1.2

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@5.1.1...@alfalab/core-components-calendar-range@5.1.2) (2022-03-04)
+
+**Note:** Version bump only for package @alfalab/core-components-calendar-range
+
+
+
+
+
+## [5.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@5.1.0...@alfalab/core-components-calendar-range@5.1.1) (2022-03-01)
+
+**Note:** Version bump only for package @alfalab/core-components-calendar-range
+
+
+
+
+
+# [5.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@5.0.0...@alfalab/core-components-calendar-range@5.1.0) (2022-02-21)
+
+
+### Bug Fixes
+
+* **calendar-range:** correct highlights ([#1002](https://github.com/alfa-laboratory/core-components/issues/1002)) ([5c12da2](https://github.com/alfa-laboratory/core-components/commit/5c12da2eb72b146b0a5f58447312f96f4b424c48))
+
+
+### Features
+
+* Исправить импорты в сторях. ([#998](https://github.com/alfa-laboratory/core-components/issues/998)) ([e6a654a](https://github.com/alfa-laboratory/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
+
+
+
+
+
 # [5.0.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@4.3.0...@alfalab/core-components-calendar-range@5.0.0) (2022-02-17)
 
 

package/dist/Component.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('./index.module-bcae62ec.js');
+var index_module = require('./index.module-0d9c90e3.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/dist/cssm/hooks.d.ts

@@ -19,4 +19,9 @@ declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth,
     handleMonthFromChange: (newMonthFrom: number) => void;
     handleMonthToChange: (newMonthTo: number) => void;
 };
-export { usePopoverViewMonthes, useStaticViewMonthes };
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/dist/cssm/hooks.js

@@ -126,6 +126,24 @@ function useStaticViewMonthes(_a) {
         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/dist/cssm/views/static.js

@@ -32,7 +32,6 @@ var endOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(endOfMonth);
 
 var CalendarRangeStatic = 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, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
-    var calendarToRef = React.useRef(null);
     var _k = React.useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
     var _l = React.useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
     var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -47,7 +46,7 @@ var CalendarRangeStatic = function (_a) {
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
         coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
-    var _m = React.useState(false), nextMonthHighlighted = _m[0], setNextMonthHighlighted = _m[1];
+    var _m = React.useState(undefined), highlightedDate = _m[0], setHighlightedDate = _m[1];
     var period = coreComponentsCalendar.usePeriodWithReset({
         initialSelectedFrom: dateFrom ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime() : undefined,
@@ -73,22 +72,17 @@ var CalendarRangeStatic = function (_a) {
     var handleInputToChange = React.useCallback(function (_, payload) {
         setInputToValue(payload.value);
     }, []);
-    var handleCalendarToMouseOver = React.useCallback(function (event) {
-        var _a;
+    var handleMouseOver = React.useCallback(function (event) {
         var target = event.target;
-        if ((_a = calendarToRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
-            var dayHighlighted_1 = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
-            setNextMonthHighlighted(function (highlighted) {
-                if (highlighted && !dayHighlighted_1)
-                    return false;
-                if (!highlighted && dayHighlighted_1)
-                    return true;
-                return highlighted;
-            });
-        }
-        else {
-            setNextMonthHighlighted(false);
+        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('');
@@ -152,24 +146,25 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = tslib_es6.__rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = tslib_es6.__rest(inputToProps, ["calendarProps"]);
     var CalendarFromComponent = dateInputFromProps.Calendar || coreComponentsCalendar.Calendar;
     var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
     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: handleCalendarToMouseOver, "data-test-id": dataTestId },
+    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_es6.__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_es6.__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: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+            React__default['default'].createElement(CalendarFromComponent, tslib_es6.__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: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime() }, rangeProps))),
         React__default['default'].createElement("span", { className: styles__default['default'].divider }),
         React__default['default'].createElement("div", null,
             React__default['default'].createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React__default['default'].createElement(CalendarToComponent, tslib_es6.__assign({}, calendarToProps, { className: cn__default['default'](styles__default['default'].calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+            React__default['default'].createElement(CalendarToComponent, tslib_es6.__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: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 exports.CalendarRangeStatic = CalendarRangeStatic;

package/dist/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './index.module-1e16472a.js';
+import { _ as __rest, a as __assign } from './index.module-bc6eae37.js';
 import React from 'react';
 import 'classnames';
 import 'date-fns/startOfMonth';

package/dist/esm/hooks.d.ts

@@ -19,4 +19,9 @@ declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth,
     handleMonthFromChange: (newMonthFrom: number) => void;
     handleMonthToChange: (newMonthTo: number) => void;
 };
-export { usePopoverViewMonthes, useStaticViewMonthes };
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/dist/esm/hooks.js

@@ -113,5 +113,22 @@ function useStaticViewMonthes(_a) {
         handleMonthToChange: handleMonthToChange,
     };
 }
+function useSelectionProps(from, to, highlighted) {
+    return useMemo(function () {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min([from, to]).getTime(),
+                selectedTo: max([from, to]).getTime(),
+            };
+        }
+        var dates = [from, to, highlighted].filter(function (date) { return date !== undefined; });
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}
 
-export { usePopoverViewMonthes, useStaticViewMonthes };
+export { usePopoverViewMonthes, useSelectionProps, useStaticViewMonthes };

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import './index.module-1e16472a.js';
+import './index.module-bc6eae37.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfMonth';

package/dist/esm/{index.module-1e16472a.js → index.module-bc6eae37.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_jenpd","divider":"calendar-range__divider_jenpd","static":"calendar-range__static_jenpd","calendar":"calendar-range__calendar_jenpd"};
+var styles = {"component":"calendar-range__component_cvgus","divider":"calendar-range__divider_cvgus","static":"calendar-range__static_cvgus","calendar":"calendar-range__calendar_cvgus"};
 require('./views/index.css')
 
 export { __rest as _, __assign as a, styles as s };

package/dist/esm/views/index.css

@@ -1,4 +1,4 @@
-/* hash: m35lt */
+/* hash: 1kp5k */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_jenpd {
+.calendar-range__component_cvgus {
     display: flex
 }
-.calendar-range__component_jenpd button[aria-selected='true'] {
+.calendar-range__component_cvgus button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_jenpd *[class*='errorIcon_'] {
+.calendar-range__component_cvgus *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_jenpd *[class*='calendarIcon_'] {
+.calendar-range__component_cvgus *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_jenpd {
+.calendar-range__divider_cvgus {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_jenpd:after {
+.calendar-range__divider_cvgus:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_jenpd .calendar-range__calendar_jenpd {
+.calendar-range__static_cvgus .calendar-range__calendar_cvgus {
         width: var(--calendar-inner-width);
     }

package/dist/esm/views/popover.js

@@ -1,4 +1,4 @@
-import { s as styles, a as __assign } from '../index.module-1e16472a.js';
+import { s as styles, a as __assign } from '../index.module-bc6eae37.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';

package/dist/esm/views/static.js

@@ -1,5 +1,5 @@
-import { _ as __rest, s as styles, a as __assign } from '../index.module-1e16472a.js';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { _ as __rest, s as styles, a as __assign } from '../index.module-bc6eae37.js';
+import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
 import { isValidInputValue, parseDateString, formatDate } from '@alfalab/core-components-calendar-input/dist/esm';
@@ -9,14 +9,13 @@ import subMonths from 'date-fns/subMonths';
 import max from 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
-import { useStaticViewMonthes } from '../hooks.js';
+import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import endOfMonth from 'date-fns/endOfMonth';
 import { usePeriodWithReset, Calendar } from '@alfalab/core-components-calendar/dist/esm';
 import { isDayButton } from '../utils.js';
 
 var CalendarRangeStatic = function (_a) {
     var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(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, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
-    var calendarToRef = useRef(null);
     var _k = useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
     var _l = useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
     var dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -31,7 +30,7 @@ var CalendarRangeStatic = function (_a) {
     var bothInvalid = isCompleteDateInput(inputFromValue) &&
         isCompleteDateInput(inputToValue) &&
         parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
-    var _m = useState(false), nextMonthHighlighted = _m[0], setNextMonthHighlighted = _m[1];
+    var _m = useState(undefined), highlightedDate = _m[0], setHighlightedDate = _m[1];
     var period = usePeriodWithReset({
         initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,
@@ -57,22 +56,17 @@ var CalendarRangeStatic = function (_a) {
     var handleInputToChange = useCallback(function (_, payload) {
         setInputToValue(payload.value);
     }, []);
-    var handleCalendarToMouseOver = useCallback(function (event) {
-        var _a;
+    var handleMouseOver = useCallback(function (event) {
         var target = event.target;
-        if ((_a = calendarToRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
-            var dayHighlighted_1 = isDayButton(target) || isDayButton(target.parentElement);
-            setNextMonthHighlighted(function (highlighted) {
-                if (highlighted && !dayHighlighted_1)
-                    return false;
-                if (!highlighted && dayHighlighted_1)
-                    return true;
-                return highlighted;
-            });
-        }
-        else {
-            setNextMonthHighlighted(false);
+        var mouseOverDayButton = isDayButton(target) || 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 = useCallback(function () {
         setInputFromValue('');
@@ -136,24 +130,25 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    var rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = __rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = __rest(inputToProps, ["calendarProps"]);
     var CalendarFromComponent = dateInputFromProps.Calendar || Calendar;
     var CalendarToComponent = dateInputToProps.Calendar || Calendar;
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleCalendarToMouseOver, "data-test-id": dataTestId },
+    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
         React.createElement("div", null,
             React.createElement(DateInput, __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.createElement(CalendarFromComponent, __assign({}, calendarFromProps, { className: cn(styles.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: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+            React.createElement(CalendarFromComponent, __assign({}, calendarFromProps, { className: cn(styles.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: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps))),
         React.createElement("span", { className: styles.divider }),
         React.createElement("div", null,
             React.createElement(DateInput, __assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React.createElement(CalendarToComponent, __assign({}, calendarToProps, { className: cn(styles.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+            React.createElement(CalendarToComponent, __assign({}, calendarToProps, { className: cn(styles.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: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 export { CalendarRangeStatic };

package/dist/hooks.d.ts

@@ -19,4 +19,9 @@ declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth,
     handleMonthFromChange: (newMonthFrom: number) => void;
     handleMonthToChange: (newMonthTo: number) => void;
 };
-export { usePopoverViewMonthes, useStaticViewMonthes };
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/dist/hooks.js

@@ -126,6 +126,24 @@ function useStaticViewMonthes(_a) {
         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/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./index.module-bcae62ec.js');
+require('./index.module-0d9c90e3.js');
 require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/dist/{index.module-bcae62ec.js → index.module-0d9c90e3.js}

@@ -39,7 +39,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_jenpd","divider":"calendar-range__divider_jenpd","static":"calendar-range__static_jenpd","calendar":"calendar-range__calendar_jenpd"};
+var styles = {"component":"calendar-range__component_cvgus","divider":"calendar-range__divider_cvgus","static":"calendar-range__static_cvgus","calendar":"calendar-range__calendar_cvgus"};
 require('./views/index.css')
 
 exports.__rest = __rest;

package/dist/modern/Component.js

@@ -9,7 +9,7 @@ import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import './hooks.js';
-import './index.module-7d74ac8d.js';
+import './index.module-0b0efcd6.js';
 import { CalendarRangePopover } from './views/popover.js';
 import 'date-fns/endOfMonth';
 import '@alfalab/core-components-calendar/dist/modern';

package/dist/modern/hooks.d.ts

@@ -19,4 +19,9 @@ declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth,
     handleMonthFromChange: (newMonthFrom: number) => void;
     handleMonthToChange: (newMonthTo: number) => void;
 };
-export { usePopoverViewMonthes, useStaticViewMonthes };
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/dist/modern/hooks.js

@@ -109,5 +109,22 @@ function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth, }) {
         handleMonthToChange,
     };
 }
+function useSelectionProps(from, to, highlighted) {
+    return useMemo(() => {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min([from, to]).getTime(),
+                selectedTo: max([from, to]).getTime(),
+            };
+        }
+        const dates = [from, to, highlighted].filter(date => date !== undefined);
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}
 
-export { usePopoverViewMonthes, useStaticViewMonthes };
+export { usePopoverViewMonthes, useSelectionProps, useStaticViewMonthes };

package/dist/modern/index.js

@@ -9,7 +9,7 @@ import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import './hooks.js';
-import './index.module-7d74ac8d.js';
+import './index.module-0b0efcd6.js';
 import './views/popover.js';
 import 'date-fns/endOfMonth';
 import '@alfalab/core-components-calendar/dist/modern';

package/dist/modern/index.module-0b0efcd6.js

@@ -0,0 +1,4 @@
+var styles = {"component":"calendar-range__component_cvgus","divider":"calendar-range__divider_cvgus","static":"calendar-range__static_cvgus","calendar":"calendar-range__calendar_cvgus"};
+require('./views/index.css')
+
+export { styles as s };

package/dist/modern/views/index.css

@@ -1,4 +1,4 @@
-/* hash: m35lt */
+/* hash: 1kp5k */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_jenpd {
+.calendar-range__component_cvgus {
     display: flex
 }
-.calendar-range__component_jenpd button[aria-selected='true'] {
+.calendar-range__component_cvgus button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_jenpd *[class*='errorIcon_'] {
+.calendar-range__component_cvgus *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_jenpd *[class*='calendarIcon_'] {
+.calendar-range__component_cvgus *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_jenpd {
+.calendar-range__divider_cvgus {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_jenpd:after {
+.calendar-range__divider_cvgus:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_jenpd .calendar-range__calendar_jenpd {
+.calendar-range__static_cvgus .calendar-range__calendar_cvgus {
         width: var(--calendar-inner-width);
     }

package/dist/modern/views/popover.js

@@ -9,7 +9,7 @@ import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-7d74ac8d.js';
+import { s as styles } from '../index.module-0b0efcd6.js';
 
 const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);

package/dist/modern/views/static.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
 import { isValidInputValue, parseDateString, formatDate } from '@alfalab/core-components-calendar-input/dist/modern';
@@ -8,15 +8,14 @@ import subMonths from 'date-fns/subMonths';
 import max from 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/isEqual';
-import { useStaticViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-7d74ac8d.js';
+import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
+import { s as styles } from '../index.module-0b0efcd6.js';
 import endOfMonth from 'date-fns/endOfMonth';
 import { usePeriodWithReset, Calendar } from '@alfalab/core-components-calendar/dist/modern';
 import { isDayButton } from '../utils.js';
 
 /* eslint-disable complexity */
 const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
-    const calendarToRef = useRef(null);
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -31,7 +30,7 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     const bothInvalid = isCompleteDateInput(inputFromValue) &&
         isCompleteDateInput(inputToValue) &&
         parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
-    const [nextMonthHighlighted, setNextMonthHighlighted] = useState(false);
+    const [highlightedDate, setHighlightedDate] = useState(undefined);
     const period = usePeriodWithReset({
         initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,
@@ -57,21 +56,17 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     const handleInputToChange = useCallback((_, payload) => {
         setInputToValue(payload.value);
     }, []);
-    const handleCalendarToMouseOver = useCallback((event) => {
+    const handleMouseOver = useCallback((event) => {
         const target = event.target;
-        if (calendarToRef.current?.contains(target)) {
-            const dayHighlighted = isDayButton(target) || isDayButton(target.parentElement);
-            setNextMonthHighlighted(highlighted => {
-                if (highlighted && !dayHighlighted)
-                    return false;
-                if (!highlighted && dayHighlighted)
-                    return true;
-                return highlighted;
-            });
-        }
-        else {
-            setNextMonthHighlighted(false);
+        const mouseOverDayButton = isDayButton(target) || isDayButton(target.parentElement);
+        let date;
+        if (mouseOverDayButton) {
+            const button = target.tagName === 'BUTTON' ? target : target.parentElement;
+            if (button.dataset.date) {
+                date = +button.dataset.date;
+            }
         }
+        setHighlightedDate(date);
     }, []);
     const handleClearFrom = useCallback(() => {
         setInputFromValue('');
@@ -135,24 +130,25 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     const { calendarProps: calendarFromProps, ...dateInputFromProps } = inputFromProps;
     const { calendarProps: calendarToProps, ...dateInputToProps } = inputToProps;
     const CalendarFromComponent = dateInputFromProps.Calendar || Calendar;
     const CalendarToComponent = dateInputToProps.Calendar || Calendar;
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleCalendarToMouseOver, "data-test-id": dataTestId },
+    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
         React.createElement("div", null,
             React.createElement(DateInput, Object.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.createElement(CalendarFromComponent, Object.assign({}, calendarFromProps, { className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+            React.createElement(CalendarFromComponent, Object.assign({}, calendarFromProps, { className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps))),
         React.createElement("span", { className: styles.divider }),
         React.createElement("div", null,
             React.createElement(DateInput, Object.assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React.createElement(CalendarToComponent, Object.assign({}, calendarToProps, { className: cn(styles.calendar, calendarToProps?.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+            React.createElement(CalendarToComponent, Object.assign({}, calendarToProps, { className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 export { CalendarRangeStatic };

package/dist/utils.js

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

package/dist/views/index.css

@@ -1,4 +1,4 @@
-/* hash: m35lt */
+/* hash: 1kp5k */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_jenpd {
+.calendar-range__component_cvgus {
     display: flex
 }
-.calendar-range__component_jenpd button[aria-selected='true'] {
+.calendar-range__component_cvgus button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_jenpd *[class*='errorIcon_'] {
+.calendar-range__component_cvgus *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_jenpd *[class*='calendarIcon_'] {
+.calendar-range__component_cvgus *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_jenpd {
+.calendar-range__divider_cvgus {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_jenpd:after {
+.calendar-range__divider_cvgus:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_jenpd .calendar-range__calendar_jenpd {
+.calendar-range__static_cvgus .calendar-range__calendar_cvgus {
         width: var(--calendar-inner-width);
     }

package/dist/views/popover.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bcae62ec.js');
+var index_module = require('../index.module-0d9c90e3.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');

package/dist/views/static.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bcae62ec.js');
+var index_module = require('../index.module-0d9c90e3.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
@@ -30,7 +30,6 @@ var endOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(endOfMonth);
 
 var CalendarRangeStatic = 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, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
-    var calendarToRef = React.useRef(null);
     var _k = React.useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
     var _l = React.useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
     var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -45,7 +44,7 @@ var CalendarRangeStatic = function (_a) {
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
         coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
-    var _m = React.useState(false), nextMonthHighlighted = _m[0], setNextMonthHighlighted = _m[1];
+    var _m = React.useState(undefined), highlightedDate = _m[0], setHighlightedDate = _m[1];
     var period = coreComponentsCalendar.usePeriodWithReset({
         initialSelectedFrom: dateFrom ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime() : undefined,
@@ -71,22 +70,17 @@ var CalendarRangeStatic = function (_a) {
     var handleInputToChange = React.useCallback(function (_, payload) {
         setInputToValue(payload.value);
     }, []);
-    var handleCalendarToMouseOver = React.useCallback(function (event) {
-        var _a;
+    var handleMouseOver = React.useCallback(function (event) {
         var target = event.target;
-        if ((_a = calendarToRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
-            var dayHighlighted_1 = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
-            setNextMonthHighlighted(function (highlighted) {
-                if (highlighted && !dayHighlighted_1)
-                    return false;
-                if (!highlighted && dayHighlighted_1)
-                    return true;
-                return highlighted;
-            });
-        }
-        else {
-            setNextMonthHighlighted(false);
+        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('');
@@ -150,24 +144,25 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = index_module.__rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = index_module.__rest(inputToProps, ["calendarProps"]);
     var CalendarFromComponent = dateInputFromProps.Calendar || coreComponentsCalendar.Calendar;
     var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    React__default['default'].createElement("div", { className: cn__default['default'](index_module.styles.component, index_module.styles.static, className), onMouseOver: handleCalendarToMouseOver, "data-test-id": dataTestId },
+    React__default['default'].createElement("div", { className: cn__default['default'](index_module.styles.component, index_module.styles.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
         React__default['default'].createElement("div", null,
             React__default['default'].createElement(coreComponentsDateInput.DateInput, index_module.__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, index_module.__assign({}, calendarFromProps, { className: cn__default['default'](index_module.styles.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: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+            React__default['default'].createElement(CalendarFromComponent, index_module.__assign({}, calendarFromProps, { className: cn__default['default'](index_module.styles.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: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime() }, rangeProps))),
         React__default['default'].createElement("span", { className: index_module.styles.divider }),
         React__default['default'].createElement("div", null,
             React__default['default'].createElement(coreComponentsDateInput.DateInput, index_module.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React__default['default'].createElement(CalendarToComponent, index_module.__assign({}, calendarToProps, { className: cn__default['default'](index_module.styles.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+            React__default['default'].createElement(CalendarToComponent, index_module.__assign({}, calendarToProps, { className: cn__default['default'](index_module.styles.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: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 exports.CalendarRangeStatic = CalendarRangeStatic;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-range",
-    "version": "5.0.0",
+    "version": "5.1.2",
     "description": "Calendar range component",
     "keywords": [],
     "license": "MIT",
@@ -19,11 +19,11 @@
         "react-dom": "^16.9.0 || ^17.0.1"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^5.0.0",
-        "@alfalab/core-components-calendar-input": "^6.0.0",
-        "@alfalab/core-components-date-input": "^2.0.0",
+        "@alfalab/core-components-calendar": "^5.1.0",
+        "@alfalab/core-components-calendar-input": "^6.1.1",
+        "@alfalab/core-components-date-input": "^2.1.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.16.1"
     },
-    "gitHead": "c807c08f187316e93147175be6feffc3492989c8"
+    "gitHead": "5c900d923b3052a3a677c99b7c927e6213e890b6"
 }

package/dist/modern/index.module-7d74ac8d.js

@@ -1,4 +0,0 @@
-var styles = {"component":"calendar-range__component_jenpd","divider":"calendar-range__divider_jenpd","static":"calendar-range__static_jenpd","calendar":"calendar-range__calendar_jenpd"};
-require('./views/index.css')
-
-export { styles as s };