@alfalab/core-components 47.1.0 → 47.3.0-beta.0

package/calendar/cssm/useRange.js

@@ -0,0 +1,66 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var usePeriod = require('./usePeriod.js');
+var utils = require('./utils.js');
+
+function useRange(_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'single' : _b, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeBehavior = _a.rangeBehavior, onChange = _a.onChange;
+    var valueFrom = utils.isRangeValue(value) ? value.dateFrom : value;
+    var valueTo = utils.isRangeValue(value) ? value.dateTo : value;
+    var periodHook = rangeBehavior === 'clarification' ? usePeriod.usePeriod : usePeriod.usePeriodWithReset;
+    var period = periodHook({
+        initialSelectedFrom: valueFrom,
+        initialSelectedTo: valueTo,
+    });
+    React.useEffect(function () {
+        if (mode === 'single') {
+            return;
+        }
+        // Внешние изменения
+        if (valueFrom !== period.selectedFrom) {
+            period.setStart(valueFrom);
+        }
+        if (valueTo !== period.selectedTo) {
+            period.setEnd(valueTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, valueFrom, valueTo]);
+    React.useEffect(function () {
+        if (mode === 'single') {
+            return;
+        }
+        // Внутренние изменения (действия пользователя)
+        if (valueFrom !== period.selectedFrom || valueTo !== period.selectedTo) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(period.selectedFrom, period.selectedTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, period.selectedFrom, period.selectedTo]);
+    var minValue = (function () {
+        if (mode === 'single') {
+            return valueFrom;
+        }
+        var values = [period.selectedFrom, period.selectedTo, valueFrom, valueTo].filter(Boolean);
+        if (!values.length)
+            return undefined;
+        return Math.min.apply(Math, values);
+    })();
+    if (mode === 'single') {
+        return {
+            selectedFrom: selectedFrom,
+            selectedTo: selectedTo,
+            onChange: onChange,
+            onReset: onChange ? function () { return onChange(undefined); } : undefined,
+            value: valueFrom,
+        };
+    }
+    return {
+        selectedFrom: period.selectedFrom,
+        selectedTo: period.selectedTo,
+        onChange: period.updatePeriod,
+        onReset: period.resetPeriod,
+        value: minValue,
+    };
+}
+
+exports.useRange = useRange;

package/calendar/cssm/utils.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings";
+import { CalendarProps } from "./index";
 declare const DAYS_IN_WEEK = 7;
 declare const MONTHS_IN_YEAR = 12;
 declare const SUNDAY_INDEX = 6;
@@ -96,4 +97,8 @@ declare function getCalendarMobileTestIds(dataTestId: string): {
     btnNextDate: string;
     btnPreviousDate: string;
 };
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds };
+declare function isRangeValue(value: CalendarProps['value']): value is {
+    dateFrom?: number | undefined;
+    dateTo?: number | undefined;
+};
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue };

package/calendar/cssm/utils.js

@@ -251,6 +251,9 @@ function getCalendarMobileTestIds(dataTestId) {
         btnPreviousDate: coreComponentsShared.getDataTestId(dataTestId, 'slider-btn-previous-day'),
     };
 }
+function isRangeValue(value) {
+    return Boolean(value) && typeof value === 'object';
+}
 
 exports.DATE_FORMAT = DATE_FORMAT;
 exports.DAYS_IN_WEEK = DAYS_IN_WEEK;
@@ -270,6 +273,7 @@ exports.generateWeeks = generateWeeks;
 exports.generateYears = generateYears;
 exports.getCalendarMobileTestIds = getCalendarMobileTestIds;
 exports.getSelectionRange = getSelectionRange;
+exports.isRangeValue = isRangeValue;
 exports.limitDate = limitDate;
 exports.modifyDateByShift = modifyDateByShift;
 exports.monthName = monthName;

package/calendar/desktop/Component.desktop.d.ts

@@ -26,7 +26,20 @@ type CalendarDesktopProps = {
     /**
      * Выбранная дата (timestamp)
      */
-    value?: number;
+    value?: number | {
+        dateFrom?: number;
+        dateTo?: number;
+    };
+    /**
+     * Режим выбора дат
+     * @default single
+     */
+    mode?: 'single' | 'range';
+    /**
+     * Тип выбора границ в календаре
+     * @default clarification
+     */
+    rangeBehavior?: 'clarification' | 'reset';
     /**
      * Открытый месяц (timestamp)
      */
@@ -45,10 +58,12 @@ type CalendarDesktopProps = {
     maxDate?: number;
     /**
      * Начало выделенного периода (timestamp)
+     * @deprecated используйте value вместе с mode='range'
      */
     selectedFrom?: number;
     /**
      * Конец выделенного периода (timestamp)
+     * @deprecated используйте value вместе с mode='range'
      */
     selectedTo?: number;
     /**
@@ -74,7 +89,7 @@ type CalendarDesktopProps = {
     /**
      * Обработчик выбора даты
      */
-    onChange?: (date?: number) => void;
+    onChange?: (date?: number, dateTo?: number) => void;
     /**
      * Обработчик нажатия на кнопку месяца
      */

package/calendar/desktop/Component.desktop.js

@@ -33,6 +33,7 @@ require('date-fns/startOfYear');
 var utils = require('../utils.js');
 var components_yearsTable_Component = require('../components/years-table/Component.js');
 var useCalendar = require('../useCalendar.js');
+var useRange = require('../useRange.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -42,18 +43,26 @@ var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-var styles = {"component":"calendar__component_s6h7h","responsive":"calendar__responsive_s6h7h","period":"calendar__period_s6h7h","monthYear":"calendar__monthYear_s6h7h","container":"calendar__container_s6h7h","customScrollbar":"calendar__customScrollbar_s6h7h","nativeScrollbar":"calendar__nativeScrollbar_s6h7h","sixWeeks":"calendar__sixWeeks_s6h7h"};
+var styles = {"component":"calendar__component_bnlcl","responsive":"calendar__responsive_bnlcl","period":"calendar__period_bnlcl","monthYear":"calendar__monthYear_bnlcl","container":"calendar__container_bnlcl","customScrollbar":"calendar__customScrollbar_bnlcl","nativeScrollbar":"calendar__nativeScrollbar_bnlcl","sixWeeks":"calendar__sixWeeks_bnlcl"};
 require('./desktop.css');
 
 var useCustomWebkitScrollbar = coreComponentsShared.hooks.useCustomWebkitScrollbar;
 var CalendarDesktop = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var className = _a.className, headerClassName = _a.headerClassName, contentClassName = _a.contentClassName, _d = _a.defaultView, defaultView = _d === void 0 ? 'days' : _d, _e = _a.selectorView, selectorView = _e === void 0 ? 'full' : _e, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _f = _a.defaultMonth, defaultMonthTimestamp = _f === void 0 ? +new Date() : _f, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _g = _a.hasHeader, hasHeader = _g === void 0 ? true : _g, responsive = _a.responsive, dayAddons = _a.dayAddons, _h = _a.shape, shape = _h === void 0 ? 'rounded' : _h, _j = _a.showCurrentYearSelector, showCurrentYearSelector = _j === void 0 ? false : _j;
-    var _k = React.useState(defaultView), view = _k[0], setView = _k[1];
-    var _l = React.useState(false), scrolled = _l[0], setScrolled = _l[1];
+    var className = _a.className, headerClassName = _a.headerClassName, contentClassName = _a.contentClassName, _d = _a.defaultView, defaultView = _d === void 0 ? 'days' : _d, _e = _a.selectorView, selectorView = _e === void 0 ? 'full' : _e, _f = _a.mode, mode = _f === void 0 ? 'single' : _f, rangeBehavior = _a.rangeBehavior, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _g = _a.defaultMonth, defaultMonthTimestamp = _g === void 0 ? +new Date() : _g, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _h = _a.hasHeader, hasHeader = _h === void 0 ? true : _h, responsive = _a.responsive, dayAddons = _a.dayAddons, _j = _a.shape, shape = _j === void 0 ? 'rounded' : _j, _k = _a.showCurrentYearSelector, showCurrentYearSelector = _k === void 0 ? false : _k;
+    var _l = React.useState(defaultView), view = _l[0], setView = _l[1];
+    var _m = React.useState(false), scrolled = _m[0], setScrolled = _m[1];
     var scrollableNodeRef = React.useRef(null);
     var firstUpdate = React.useRef(true);
-    var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
+    var range = useRange.useRange({
+        mode: mode,
+        value: value,
+        selectedFrom: selectedFrom,
+        selectedTo: selectedTo,
+        rangeBehavior: rangeBehavior,
+        onChange: onChange,
+    });
+    var selected = React.useMemo(function () { return (range.value ? new Date(range.value) : undefined); }, [range.value]);
     var defaultMonth = React.useMemo(function () {
         return startOfMonth__default.default(selected ||
             utils.limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp));
@@ -63,7 +72,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
     var month = React.useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [monthTimestamp]);
     var minDate = React.useMemo(function () { return (minDateTimestamp ? startOfDay__default.default(minDateTimestamp) : undefined); }, [minDateTimestamp]);
     var maxDate = React.useMemo(function () { return (maxDateTimestamp ? endOfDay__default.default(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
-    var _m = useCalendar.useCalendar({
+    var _o = useCalendar.useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -74,9 +83,9 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
         events: events,
         holidays: holidays,
         dayAddons: dayAddons,
-        onChange: onChange,
+        onChange: range.onChange,
         onMonthChange: onMonthChange,
-    }), activeMonth = _m.activeMonth, weeks = _m.weeks, months = _m.months, years = _m.years, canSetPrevMonth = _m.canSetPrevMonth, canSetNextMonth = _m.canSetNextMonth, setMonthByDate = _m.setMonthByDate, setPrevMonth = _m.setPrevMonth, setNextMonth = _m.setNextMonth, highlighted = _m.highlighted, getDayProps = _m.getDayProps, getMonthProps = _m.getMonthProps, getYearProps = _m.getYearProps, getRootProps = _m.getRootProps;
+    }), activeMonth = _o.activeMonth, weeks = _o.weeks, months = _o.months, years = _o.years, canSetPrevMonth = _o.canSetPrevMonth, canSetNextMonth = _o.canSetNextMonth, setMonthByDate = _o.setMonthByDate, setPrevMonth = _o.setPrevMonth, setNextMonth = _o.setNextMonth, highlighted = _o.highlighted, getDayProps = _o.getDayProps, getMonthProps = _o.getMonthProps, getYearProps = _o.getYearProps, getRootProps = _o.getRootProps;
     var toggleView = function (newView) {
         if (scrollableNodeRef.current)
             scrollableNodeRef.current.scrollTop = 0;
@@ -125,11 +134,11 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
         setScrolled(false);
     }, [view]);
     hooks.useDidUpdateEffect(function () {
-        var newMonth = value && startOfMonth__default.default(value);
+        var newMonth = range.value && startOfMonth__default.default(range.value);
         if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
             setMonthByDate(newMonth);
         }
-    }, [value]);
+    }, [range.value]);
     var shouldUseCustomScrollbar = useCustomWebkitScrollbar();
     return (React__default.default.createElement("div", tslib.__assign({}, getRootProps({ ref: ref }), { className: cn__default.default('cc-calendar', styles.component, className, (_b = {},
             _b[styles.sixWeeks] = weeks.length === 6,
@@ -140,7 +149,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
                 _c[styles.customScrollbar] = view === 'years' && shouldUseCustomScrollbar,
                 _c[styles.nativeScrollbar] = view === 'years' && !shouldUseCustomScrollbar,
                 _c), styles[view], contentClassName), onScroll: handleScroll },
-            view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
+            view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
             view === 'months' && (React__default.default.createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
             view === 'years' && (React__default.default.createElement(components_yearsTable_Component.YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
 });

package/calendar/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 18slg */
+/* hash: vmv58 */
 :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 {
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -44,26 +44,26 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_s6h7h {
+} .calendar__component_bnlcl {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_s6h7h {
+} @media (max-width: 374px) { .calendar__component_bnlcl {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_s6h7h.calendar__responsive_s6h7h {
+    } .calendar__component_bnlcl.calendar__responsive_bnlcl {
         width: 100%
-    } .calendar__component_s6h7h.calendar__responsive_s6h7h .calendar__period_s6h7h {
+    } .calendar__component_bnlcl.calendar__responsive_bnlcl .calendar__period_bnlcl {
             width: 100%;
-        } .calendar__component_s6h7h.calendar__responsive_s6h7h .calendar__monthYear_s6h7h {
+        } .calendar__component_bnlcl.calendar__responsive_bnlcl .calendar__monthYear_bnlcl {
             width: 100%;
-        } .calendar__component_s6h7h.calendar__responsive_s6h7h .calendar__container_s6h7h {
+        } .calendar__component_bnlcl.calendar__responsive_bnlcl .calendar__container_bnlcl {
             width: 100%;
-        } .calendar__container_s6h7h {
+        } .calendar__container_bnlcl {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,65 +71,65 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_s6h7h.calendar__customScrollbar_s6h7h {
+} .calendar__container_bnlcl.calendar__customScrollbar_bnlcl {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-track {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-track-piece {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:vertical {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:horizontal {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:horizontal {
         border-radius: 6px / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-thumb:active {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-resizer {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-button,
-    .calendar__container_s6h7h.calendar__customScrollbar_s6h7h::-webkit-scrollbar-corner {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-button,
+    .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_s6h7h.calendar__customScrollbar_s6h7h {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl {
 
         display: block;
         padding-right: var(--gap-2xs);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_s6h7h.calendar__nativeScrollbar_s6h7h {
+    } .calendar__container_bnlcl.calendar__nativeScrollbar_bnlcl {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_s6h7h {
+    } @media (max-width: 374px) { .calendar__container_bnlcl {
         width: 288px
 }
-    } .calendar__sixWeeks_s6h7h {
+    } .calendar__sixWeeks_bnlcl {
     height: 388px;
-} .calendar__period_s6h7h {
+} .calendar__period_bnlcl {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_s6h7h {
+} @media (max-width: 374px) { .calendar__period_bnlcl {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_s6h7h {
+    } .calendar__monthYear_bnlcl {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_s6h7h {
+} @media (max-width: 374px) { .calendar__monthYear_bnlcl {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/Component.responsive.d.ts

@@ -20,7 +20,7 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     scrollableContainer?: HTMLElement | undefined;
-} & Omit<CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & {
+} & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/calendar/esm/Component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
 import { CalendarDesktop } from './desktop/Component.desktop.js';
 import 'react-merge-refs';
@@ -13,7 +14,6 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
-import '../../shared/esm';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -39,6 +39,10 @@ import 'date-fns/startOfWeek';
 import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
+import './useRange.js';
+import './usePeriod.js';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
@@ -46,7 +50,6 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/esm/desktop';
-import '@alfalab/hooks';
 import './components/header/Component.js';
 import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
@@ -59,7 +62,6 @@ import '@alfalab/icons-glyph/ChevronBackMIcon';
 import './components/period-slider/utils.js';
 import 'date-fns/addQuarters';
 import 'date-fns/addWeeks';
-import 'date-fns/differenceInDays';
 import 'date-fns/endOfMonth';
 import 'date-fns/endOfQuarter';
 import 'date-fns/getQuarter';
@@ -70,7 +72,7 @@ import './components/years-table/Component.js';
 import 'date-fns/isThisYear';
 
 var CalendarResponsive = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React.createElement(CalendarDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarMobile, __assign({}, restProps, { ref: ref })));
 });

package/calendar/esm/components/calendar-mobile/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { CalendarContentProps } from "./typings";
-declare const CalendarMonthOnlyView: ({ value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, }: CalendarContentProps) => React.JSX.Element;
+declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, }: CalendarContentProps) => React.JSX.Element;
 declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
 declare const CalendarMobile: React.ForwardRefExoticComponent<{
     title?: string | undefined;
@@ -14,5 +14,5 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<{
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     scrollableContainer?: HTMLElement | undefined;
-} & Omit<import("../../desktop/index").CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & React.RefAttributes<HTMLDivElement>>;
 export { CalendarMonthOnlyView, CalendarMonthOnlyViewHeader, CalendarMobile };

package/calendar/esm/components/calendar-mobile/Component.js

@@ -1,5 +1,5 @@
 import { __rest, __spreadArray, __assign } from 'tslib';
-import React, { forwardRef, useState, useMemo } from 'react';
+import React, { forwardRef, useState, useMemo, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { Virtuoso } from 'react-virtuoso';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -13,7 +13,8 @@ import { ModalMobile } from '../../../../modal/esm/mobile';
 import { getDataTestId } from '../../../../shared/esm';
 import { CalendarDesktop } from '../../desktop/Component.desktop.js';
 import { useCalendar } from '../../useCalendar.js';
-import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, WEEKDAYS } from '../../utils.js';
+import { useRange } from '../../useRange.js';
+import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, WEEKDAYS, isRangeValue } from '../../utils.js';
 import { DaysTable } from '../days-table/Component.js';
 import '@alfalab/hooks';
 import '../header/Component.js';
@@ -50,6 +51,7 @@ import 'date-fns/isThisYear';
 import 'date-fns/isSameDay';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../../usePeriod.js';
 import 'date-fns/eachDayOfInterval';
 import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
@@ -67,13 +69,13 @@ import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
 
-var backdropTransitionStyles = {"appear":"calendar__appear_sgdrm","enter":"calendar__enter_sgdrm","appearActive":"calendar__appearActive_sgdrm","enterActive":"calendar__enterActive_sgdrm","appearDone":"calendar__appearDone_sgdrm","enterDone":"calendar__enterDone_sgdrm","exit":"calendar__exit_sgdrm","exitActive":"calendar__exitActive_sgdrm","exitDone":"calendar__exitDone_sgdrm"};
+var backdropTransitionStyles = {"appear":"calendar__appear_18z9m","enter":"calendar__enter_18z9m","appearActive":"calendar__appearActive_18z9m","enterActive":"calendar__enterActive_18z9m","appearDone":"calendar__appearDone_18z9m","enterDone":"calendar__enterDone_18z9m","exit":"calendar__exit_18z9m","exitActive":"calendar__exitActive_18z9m","exitDone":"calendar__exitDone_18z9m"};
 require('./backdrop-transitions.css');
 
-var styles = {"wrapper":"calendar__wrapper_z65ow","withZIndex":"calendar__withZIndex_z65ow","calendar":"calendar__calendar_z65ow","dayNames":"calendar__dayNames_z65ow","withHeader":"calendar__withHeader_z65ow","month":"calendar__month_z65ow","daysTable":"calendar__daysTable_z65ow","dayName":"calendar__dayName_z65ow","virtuoso":"calendar__virtuoso_z65ow","contentModal":"calendar__contentModal_z65ow","content":"calendar__content_z65ow"};
+var styles = {"wrapper":"calendar__wrapper_18h7q","withZIndex":"calendar__withZIndex_18h7q","calendar":"calendar__calendar_18h7q","dayNames":"calendar__dayNames_18h7q","withHeader":"calendar__withHeader_18h7q","month":"calendar__month_18h7q","daysTable":"calendar__daysTable_18h7q","dayName":"calendar__dayName_18h7q","virtuoso":"calendar__virtuoso_18h7q","contentModal":"calendar__contentModal_18h7q","content":"calendar__content_18h7q"};
 require('./index.css');
 
-var transitionStyles = {"appear":"calendar__appear_yi39g","enter":"calendar__enter_yi39g","appearActive":"calendar__appearActive_yi39g","enterActive":"calendar__enterActive_yi39g","exit":"calendar__exit_yi39g","exitActive":"calendar__exitActive_yi39g","exitDone":"calendar__exitDone_yi39g"};
+var transitionStyles = {"appear":"calendar__appear_hz7ek","enter":"calendar__enter_hz7ek","appearActive":"calendar__appearActive_hz7ek","enterActive":"calendar__enterActive_hz7ek","exit":"calendar__exit_hz7ek","exitActive":"calendar__exitActive_hz7ek","exitDone":"calendar__exitDone_hz7ek"};
 require('./transitions.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
@@ -81,18 +83,25 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
-    var value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b, dayAddons = _a.dayAddons, _c = _a.shape, shape = _c === void 0 ? 'rounded' : _c, scrollableContainer = _a.scrollableContainer;
+    var value = _a.value, _b = _a.mode, mode = _b === void 0 ? 'single' : _b, _c = _a.rangeBehavior, rangeBehavior = _c === void 0 ? 'clarification' : _c, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.yearsAmount, yearsAmount = _d === void 0 ? 3 : _d, dayAddons = _a.dayAddons, _e = _a.shape, shape = _e === void 0 ? 'rounded' : _e, scrollableContainer = _a.scrollableContainer;
+    var range = useRange({
+        mode: mode,
+        value: value,
+        selectedFrom: selectedFrom,
+        selectedTo: selectedTo,
+        rangeBehavior: rangeBehavior,
+        onChange: onChange,
+    });
     var month = useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [monthTimestamp]);
     var minDate = useMemo(function () { return (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined); }, [minDateTimestamp]);
     var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
-    var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    var startingDate = useMemo(function () { return (value ? new Date(value) : new Date()); }, []);
+    var selected = useMemo(function () { return (range.value ? new Date(range.value) : undefined); }, [range.value]);
+    var startingDate = useRef(range.value);
     var defaultMonth = useMemo(function () {
         return startOfMonth(selected ||
             limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    var _d = useCalendar({
+    var _f = useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: 'months',
@@ -101,9 +110,9 @@ var CalendarMonthOnlyView = function (_a) {
         selected: selected,
         offDays: offDays,
         events: events,
-        onChange: onChange,
+        onChange: range.onChange,
         dayAddons: dayAddons,
-    }), activeMonth = _d.activeMonth, highlighted = _d.highlighted, getDayProps = _d.getDayProps;
+    }), activeMonth = _f.activeMonth, highlighted = _f.highlighted, getDayProps = _f.getDayProps;
     var activeMonths = useMemo(function () {
         var eventsMap = dateArrayToHashTable(events || []);
         var offDaysMap = dateArrayToHashTable(offDays || []);
@@ -111,7 +120,7 @@ var CalendarMonthOnlyView = function (_a) {
         var dayAddonsMap = addonArrayToHashTable(dayAddons || []);
         var prevMonths = [];
         var nextMonths = [];
-        var date = new Date(startingDate.getTime());
+        var date = startingDate.current ? new Date(startingDate.current) : new Date();
         var currentYear = date.getFullYear();
         var currYearMonths = generateMonths(date, {});
         for (var i = 0; i < yearsAmount; i++) {
@@ -132,21 +141,11 @@ var CalendarMonthOnlyView = function (_a) {
                 holidaysMap: holidaysMap,
                 dayAddonsMap: dayAddonsMap,
             }), title: "".concat(monthName(item.date), " ").concat(item.date.getFullYear()) })); });
-    }, [
-        events,
-        offDays,
-        holidays,
-        dayAddons,
-        startingDate,
-        minDate,
-        maxDate,
-        yearsAmount,
-        selected,
-    ]);
+    }, [events, offDays, holidays, dayAddons, minDate, maxDate, yearsAmount, selected]);
     var initialMonthIndex = useMemo(function () {
-        var date = value || selectedFrom || activeMonth.getTime() || Date.now();
+        var date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth(date, m.date); });
-    }, [activeMonth, activeMonths, selectedFrom, value]);
+    }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
     var renderMonth = function (index) { return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
         onMonthTitleClick ? (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
@@ -154,7 +153,7 @@ var CalendarMonthOnlyView = function (_a) {
             " ",
             activeMonths[index].title,
             " ")),
-        React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape }))); };
+        React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape }))); };
     return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
 };
 var CalendarMonthOnlyViewHeader = function () { return (React.createElement("table", { className: styles.dayNames },
@@ -193,10 +192,12 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
     var renderFooter = function () {
-        if (selectedFrom || selectedTo) {
-            var selectButtonDisabled = !selectedFrom || !selectedTo;
+        var valueFrom = isRangeValue(value) ? value.dateFrom : selectedFrom;
+        var valueTo = isRangeValue(value) ? value.dateTo : selectedTo;
+        if (valueFrom || valueTo) {
+            var selectButtonDisabled = !valueFrom || !valueTo;
             if (allowSelectionFromEmptyRange) {
-                selectButtonDisabled = !selectedFrom;
+                selectButtonDisabled = !valueFrom;
             }
             return (React.createElement(React.Fragment, null,
                 React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),