@alfalab/core-components 23.13.0 → 25.1.0

package/calendar-range/Component.js

@@ -1,197 +1,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var index_module = require('./index.module-a9bc9731.js');
 var React = require('react');
-var cn = require('classnames');
-var dateFns = require('date-fns');
-var coreComponentsCalendar = require('../calendar');
-var coreComponentsCalendarInput = require('../calendar-input');
-var utils = require('./utils.js');
-var useCalendarMonthes = require('./useCalendarMonthes.js');
-var useCalendarMaxMinDates = require('./useCalendarMaxMinDates.js');
+require('classnames');
+require('date-fns/startOfMonth');
+require('../calendar-input');
+require('../date-input');
+require('date-fns/addMonths');
+require('date-fns/subMonths');
+require('date-fns/max');
+require('date-fns/min');
+require('date-fns/isEqual');
+require('./hooks.js');
+var views_popover = require('./views/popover.js');
+require('date-fns/endOfMonth');
+require('../calendar');
+require('./utils.js');
+var views_static = require('./views/static.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var styles = {"component":"calendar-range__component_ft44u","divider":"calendar-range__divider_ft44u"};
-require('./index.css');
 
 var CalendarRange = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? dateFns.startOfMonth(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, valueFrom = _a.valueFrom, valueTo = _a.valueTo, onDateFromChange = _a.onDateFromChange, onDateToChange = _a.onDateToChange, _c = _a.inputFromProps, inputFromProps = _c === void 0 ? {} : _c, _d = _a.inputToProps, inputToProps = _d === void 0 ? {} : _d, _e = _a.calendarPosition, calendarPosition = _e === void 0 ? 'static' : _e, dataTestId = _a.dataTestId;
-    var uncontrolled = valueFrom === undefined && valueTo === undefined;
-    var isPopover = calendarPosition === 'popover';
-    var period = coreComponentsCalendar.usePeriod({
-        initialSelectedFrom: valueFrom ? coreComponentsCalendarInput.parseDateString(valueFrom).getTime() : undefined,
-        initialSelectedTo: valueTo ? coreComponentsCalendarInput.parseDateString(valueTo).getTime() : undefined,
-    });
-    var setStart = period.setStart, setEnd = period.setEnd, resetPeriod = period.resetPeriod;
-    var selectedFrom = period.selectedFrom, selectedTo = period.selectedTo;
-    if (!coreComponentsCalendar.dateInLimits(selectedFrom, minDate, maxDate))
-        selectedFrom = undefined;
-    if (!coreComponentsCalendar.dateInLimits(selectedTo, minDate, maxDate))
-        selectedTo = undefined;
-    var _f = React.useState(utils.initialValueState), stateFrom = _f[0], setStateFrom = _f[1];
-    var _g = React.useState(utils.initialValueState), stateTo = _g[0], setStateTo = _g[1];
-    var inputValueFrom = utils.getCorrectValueState(stateFrom, valueFrom, minDate, maxDate);
-    var inputValueTo = utils.getCorrectValueState(stateTo, valueTo, minDate, maxDate);
-    var handleStateFromChange = React.useCallback(function (newFromState) {
-        if (uncontrolled)
-            setStateFrom(newFromState);
-        if (onDateFromChange)
-            onDateFromChange(newFromState);
-    }, [onDateFromChange, uncontrolled]);
-    var handleStateToChange = React.useCallback(function (newToState) {
-        if (uncontrolled)
-            setStateTo(newToState);
-        if (onDateToChange)
-            onDateToChange(newToState);
-    }, [onDateToChange, uncontrolled]);
-    var _h = useCalendarMonthes.useCalendarMonthes({
-        inputValueFrom: inputValueFrom,
-        inputValueTo: inputValueTo,
-        defaultMonth: defaultMonth,
-        isPopover: isPopover,
-    }), monthFrom = _h.monthFrom, monthTo = _h.monthTo, handleMonthFromChange = _h.handleMonthFromChange, handleMonthToChange = _h.handleMonthToChange;
-    var handleInputFromChange = React.useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setStart(undefined);
-            handleStateFromChange(utils.initialValueState);
-        }
-        if (!coreComponentsCalendarInput.isCompleteDateInput(value)) {
-            return;
-        }
-        if (coreComponentsCalendar.dateInLimits(date, minDate, maxDate)) {
-            setStart(date.getTime());
-            handleMonthFromChange(dateFns.startOfMonth(date).getTime());
-            handleStateFromChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setStart(undefined);
-            handleStateFromChange({ date: null, value: value });
-        }
-    }, [handleMonthFromChange, handleStateFromChange, maxDate, minDate, setStart]);
-    var handleInputToChange = React.useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setEnd(undefined);
-            handleStateToChange(utils.initialValueState);
-        }
-        if (!coreComponentsCalendarInput.isCompleteDateInput(value)) {
-            return;
-        }
-        if (coreComponentsCalendar.dateInLimits(date, minDate, maxDate)) {
-            setEnd(date.getTime());
-            handleMonthToChange(dateFns.subMonths(dateFns.startOfMonth(date), 1).getTime());
-            handleStateToChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setEnd(undefined);
-            handleStateToChange({ date: null, value: value });
-        }
-    }, [handleMonthToChange, handleStateToChange, maxDate, minDate, setEnd]);
-    var handleCalendarChange = React.useCallback(function (date) {
-        if (!inputValueFrom.date) {
-            setStart(date);
-            handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-            return;
-        }
-        if (date < inputValueFrom.date) {
-            resetPeriod();
-            setStart(date);
-            handleStateToChange(utils.initialValueState);
-            handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-            return;
-        }
-        if (date === inputValueFrom.date && date === inputValueTo.date) {
-            resetPeriod();
-            handleStateFromChange(utils.initialValueState);
-            handleStateToChange(utils.initialValueState);
-            return;
-        }
-        handleStateToChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-        setEnd(date);
-    }, [
-        inputValueFrom.date,
-        inputValueTo.date,
-        handleStateToChange,
-        setEnd,
-        setStart,
-        handleStateFromChange,
-        resetPeriod,
-    ]);
-    var handleFromCalendarChange = React.useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        setStart(date);
-        handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-    }, [handleCalendarChange, handleStateFromChange, isPopover, setStart]);
-    var handleToCalendarChange = React.useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        handleStateToChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-        setEnd(date);
-    }, [handleCalendarChange, handleStateToChange, isPopover, setEnd]);
-    var _j = React.useState(false), nextMonthHighlighted = _j[0], setNextMonthHighlighted = _j[1];
-    var handleCalendarToMouseOver = React.useCallback(function (event) {
-        var target = event.target;
-        var dayHighlighted = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
-        if (nextMonthHighlighted && !dayHighlighted)
-            setNextMonthHighlighted(false);
-        if (!nextMonthHighlighted && dayHighlighted)
-            setNextMonthHighlighted(true);
-    }, [nextMonthHighlighted]);
-    var selectorView = isPopover ? 'full' : 'month-only';
-    var calendarSelectedTo = selectedTo || (nextMonthHighlighted ? monthTo : undefined);
-    var maxMinDates = useCalendarMaxMinDates.useCalendarMaxMinDates({
-        isPopover: isPopover,
-        monthTo: monthTo,
-        monthFrom: monthFrom,
-        selectedFrom: selectedFrom,
-        selectedTo: calendarSelectedTo,
-        maxDate: maxDate,
-        minDate: minDate,
-    });
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className), "data-test-id": dataTestId },
-        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
-                selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
-        React__default['default'].createElement("span", { className: styles.divider }),
-        React__default['default'].createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
-                    selectedFrom: selectedFrom,
-                    selectedTo: selectedTo }) })))));
+    var _b = _a.calendarPosition, calendarPosition = _b === void 0 ? 'static' : _b, restProps = index_module.__rest(_a, ["calendarPosition"]);
+    var View = calendarPosition === 'popover' ? views_popover.CalendarRangePopover : views_static.CalendarRangeStatic;
+    return React__default['default'].createElement(View, index_module.__assign({}, restProps));
 };
 
 exports.CalendarRange = CalendarRange;

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

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { CalendarInputProps } from "../../calendar-input";
-import { ValueState } from "./utils";
 type CalendarRangeProps = {
     /**
      * Дополнительный класс
@@ -29,11 +28,34 @@ type CalendarRangeProps = {
     /**
      * Обработчик изменения даты от
      */
-    onDateFromChange?: (payload: ValueState) => void;
+    onDateFromChange?: (payload: {
+        date: number | null;
+        value: string;
+    }) => void;
     /**
      * Обработчик изменения даты до
      */
-    onDateToChange?: (payload: ValueState) => void;
+    onDateToChange?: (payload: {
+        date: number | null;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик изменения
+     */
+    onChange?: (payload: {
+        dateFrom: number | null;
+        valueFrom: string;
+        dateTo: number | null;
+        valueTo: string;
+    }) => void;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
     /**
      * Пропсы для инпута даты от
      */

package/calendar-range/cssm/Component.js

@@ -1,196 +1,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('./tslib.es6-ce870b46.js');
 var React = require('react');
-var cn = require('classnames');
-var dateFns = require('date-fns');
-var coreComponentsCalendar = require('../../calendar/cssm');
-var coreComponentsCalendarInput = require('../../calendar-input/cssm');
-var utils = require('./utils.js');
-var useCalendarMonthes = require('./useCalendarMonthes.js');
-var useCalendarMaxMinDates = require('./useCalendarMaxMinDates.js');
-var styles = require('./index.module.css');
+require('classnames');
+require('date-fns/startOfMonth');
+require('../../calendar-input/cssm');
+require('../../date-input/cssm');
+require('date-fns/addMonths');
+require('date-fns/subMonths');
+require('date-fns/max');
+require('date-fns/min');
+require('date-fns/isEqual');
+require('./hooks.js');
+require('./views/index.module.css');
+var views_popover = require('./views/popover.js');
+require('date-fns/endOfMonth');
+require('../../calendar/cssm');
+require('./utils.js');
+var views_static = require('./views/static.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 
 var CalendarRange = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? dateFns.startOfMonth(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, valueFrom = _a.valueFrom, valueTo = _a.valueTo, onDateFromChange = _a.onDateFromChange, onDateToChange = _a.onDateToChange, _c = _a.inputFromProps, inputFromProps = _c === void 0 ? {} : _c, _d = _a.inputToProps, inputToProps = _d === void 0 ? {} : _d, _e = _a.calendarPosition, calendarPosition = _e === void 0 ? 'static' : _e, dataTestId = _a.dataTestId;
-    var uncontrolled = valueFrom === undefined && valueTo === undefined;
-    var isPopover = calendarPosition === 'popover';
-    var period = coreComponentsCalendar.usePeriod({
-        initialSelectedFrom: valueFrom ? coreComponentsCalendarInput.parseDateString(valueFrom).getTime() : undefined,
-        initialSelectedTo: valueTo ? coreComponentsCalendarInput.parseDateString(valueTo).getTime() : undefined,
-    });
-    var setStart = period.setStart, setEnd = period.setEnd, resetPeriod = period.resetPeriod;
-    var selectedFrom = period.selectedFrom, selectedTo = period.selectedTo;
-    if (!coreComponentsCalendar.dateInLimits(selectedFrom, minDate, maxDate))
-        selectedFrom = undefined;
-    if (!coreComponentsCalendar.dateInLimits(selectedTo, minDate, maxDate))
-        selectedTo = undefined;
-    var _f = React.useState(utils.initialValueState), stateFrom = _f[0], setStateFrom = _f[1];
-    var _g = React.useState(utils.initialValueState), stateTo = _g[0], setStateTo = _g[1];
-    var inputValueFrom = utils.getCorrectValueState(stateFrom, valueFrom, minDate, maxDate);
-    var inputValueTo = utils.getCorrectValueState(stateTo, valueTo, minDate, maxDate);
-    var handleStateFromChange = React.useCallback(function (newFromState) {
-        if (uncontrolled)
-            setStateFrom(newFromState);
-        if (onDateFromChange)
-            onDateFromChange(newFromState);
-    }, [onDateFromChange, uncontrolled]);
-    var handleStateToChange = React.useCallback(function (newToState) {
-        if (uncontrolled)
-            setStateTo(newToState);
-        if (onDateToChange)
-            onDateToChange(newToState);
-    }, [onDateToChange, uncontrolled]);
-    var _h = useCalendarMonthes.useCalendarMonthes({
-        inputValueFrom: inputValueFrom,
-        inputValueTo: inputValueTo,
-        defaultMonth: defaultMonth,
-        isPopover: isPopover,
-    }), monthFrom = _h.monthFrom, monthTo = _h.monthTo, handleMonthFromChange = _h.handleMonthFromChange, handleMonthToChange = _h.handleMonthToChange;
-    var handleInputFromChange = React.useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setStart(undefined);
-            handleStateFromChange(utils.initialValueState);
-        }
-        if (!coreComponentsCalendarInput.isCompleteDateInput(value)) {
-            return;
-        }
-        if (coreComponentsCalendar.dateInLimits(date, minDate, maxDate)) {
-            setStart(date.getTime());
-            handleMonthFromChange(dateFns.startOfMonth(date).getTime());
-            handleStateFromChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setStart(undefined);
-            handleStateFromChange({ date: null, value: value });
-        }
-    }, [handleMonthFromChange, handleStateFromChange, maxDate, minDate, setStart]);
-    var handleInputToChange = React.useCallback(function (_, _a) {
-        var value = _a.value, date = _a.date;
-        if (value === '') {
-            setEnd(undefined);
-            handleStateToChange(utils.initialValueState);
-        }
-        if (!coreComponentsCalendarInput.isCompleteDateInput(value)) {
-            return;
-        }
-        if (coreComponentsCalendar.dateInLimits(date, minDate, maxDate)) {
-            setEnd(date.getTime());
-            handleMonthToChange(dateFns.subMonths(dateFns.startOfMonth(date), 1).getTime());
-            handleStateToChange({ date: date.getTime(), value: value });
-        }
-        else {
-            setEnd(undefined);
-            handleStateToChange({ date: null, value: value });
-        }
-    }, [handleMonthToChange, handleStateToChange, maxDate, minDate, setEnd]);
-    var handleCalendarChange = React.useCallback(function (date) {
-        if (!inputValueFrom.date) {
-            setStart(date);
-            handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-            return;
-        }
-        if (date < inputValueFrom.date) {
-            resetPeriod();
-            setStart(date);
-            handleStateToChange(utils.initialValueState);
-            handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-            return;
-        }
-        if (date === inputValueFrom.date && date === inputValueTo.date) {
-            resetPeriod();
-            handleStateFromChange(utils.initialValueState);
-            handleStateToChange(utils.initialValueState);
-            return;
-        }
-        handleStateToChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-        setEnd(date);
-    }, [
-        inputValueFrom.date,
-        inputValueTo.date,
-        handleStateToChange,
-        setEnd,
-        setStart,
-        handleStateFromChange,
-        resetPeriod,
-    ]);
-    var handleFromCalendarChange = React.useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        setStart(date);
-        handleStateFromChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-    }, [handleCalendarChange, handleStateFromChange, isPopover, setStart]);
-    var handleToCalendarChange = React.useCallback(function (date) {
-        if (!isPopover) {
-            handleCalendarChange(date);
-            return;
-        }
-        handleStateToChange({ date: date, value: coreComponentsCalendarInput.formatDate(date) });
-        setEnd(date);
-    }, [handleCalendarChange, handleStateToChange, isPopover, setEnd]);
-    var _j = React.useState(false), nextMonthHighlighted = _j[0], setNextMonthHighlighted = _j[1];
-    var handleCalendarToMouseOver = React.useCallback(function (event) {
-        var target = event.target;
-        var dayHighlighted = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
-        if (nextMonthHighlighted && !dayHighlighted)
-            setNextMonthHighlighted(false);
-        if (!nextMonthHighlighted && dayHighlighted)
-            setNextMonthHighlighted(true);
-    }, [nextMonthHighlighted]);
-    var selectorView = isPopover ? 'full' : 'month-only';
-    var calendarSelectedTo = selectedTo || (nextMonthHighlighted ? monthTo : undefined);
-    var maxMinDates = useCalendarMaxMinDates.useCalendarMaxMinDates({
-        isPopover: isPopover,
-        monthTo: monthTo,
-        monthFrom: monthFrom,
-        selectedFrom: selectedFrom,
-        selectedTo: calendarSelectedTo,
-        maxDate: maxDate,
-        minDate: minDate,
-    });
-    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, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
-                selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
-        React__default['default'].createElement("span", { className: styles__default['default'].divider }),
-        React__default['default'].createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
-                    selectedFrom: selectedFrom,
-                    selectedTo: selectedTo }) })))));
+    var _b = _a.calendarPosition, calendarPosition = _b === void 0 ? 'static' : _b, restProps = tslib_es6.__rest(_a, ["calendarPosition"]);
+    var View = calendarPosition === 'popover' ? views_popover.CalendarRangePopover : views_static.CalendarRangeStatic;
+    return React__default['default'].createElement(View, tslib_es6.__assign({}, restProps));
 };
 
 exports.CalendarRange = CalendarRange;

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

@@ -0,0 +1,27 @@
+declare function usePopoverViewMonthes({ dateFrom, dateTo, defaultMonth, resetKey, }: {
+    defaultMonth: number;
+    dateFrom: number | null;
+    dateTo: number | null;
+    resetKey?: number;
+}): {
+    monthFrom: number | undefined;
+    monthTo: number | undefined;
+    handleMonthFromChange: (newMonthFrom: number) => void;
+    handleMonthToChange: (newMonthTo: number) => void;
+};
+declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth, }: {
+    selectedFrom?: number;
+    selectedTo?: number;
+    defaultMonth: number;
+}): {
+    monthFrom: number;
+    monthTo: number;
+    handleMonthFromChange: (newMonthFrom: number) => void;
+    handleMonthToChange: (newMonthTo: number) => void;
+};
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/calendar-range/cssm/hooks.js

@@ -0,0 +1,147 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var startOfMonth = require('date-fns/startOfMonth');
+var addMonths = require('date-fns/addMonths');
+var subMonths = require('date-fns/subMonths');
+var max = require('date-fns/max');
+var min = require('date-fns/min');
+var isEqual = require('date-fns/isEqual');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
+var addMonths__default = /*#__PURE__*/_interopDefaultLegacy(addMonths);
+var subMonths__default = /*#__PURE__*/_interopDefaultLegacy(subMonths);
+var max__default = /*#__PURE__*/_interopDefaultLegacy(max);
+var min__default = /*#__PURE__*/_interopDefaultLegacy(min);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+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;
+    /**
+     * Если указана начальная дата — левый месяц равен ей, иначе используется дата конца.
+     * Если обе даты не указаны, то используется дефолтный месяц
+     */
+    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
+    []);
+    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;