@alfalab/core-components 47.9.0-beta.1 → 47.10.0

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

@@ -1,16 +1,18 @@
-import { __rest, __spreadArray, __assign } from 'tslib';
-import React, { forwardRef, useState, useMemo, useRef } from 'react';
+import { __rest, __assign, __spreadArray } from 'tslib';
+import React, { forwardRef, useState, useRef, useMemo, useImperativeHandle } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { Virtuoso } from 'react-virtuoso';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import endOfDay from 'date-fns/endOfDay';
+import isAfter from 'date-fns/isAfter';
 import isSameMonth from 'date-fns/isSameMonth';
 import startOfDay from 'date-fns/startOfDay';
 import startOfMonth from 'date-fns/startOfMonth';
 import { ButtonMobile } from '../../../../button/esm/mobile';
 import { ModalMobile } from '../../../../modal/esm/mobile';
 import { getDataTestId } from '../../../../shared/esm';
+import { Typography } from '../../../../typography/esm';
 import { CalendarDesktop } from '../../desktop/Component.desktop.js';
 import { useCalendar } from '../../useCalendar.js';
 import { useRange } from '../../useRange.js';
@@ -56,7 +58,6 @@ import 'date-fns/eachDayOfInterval';
 import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
 import 'date-fns/format';
-import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
@@ -65,6 +66,7 @@ import 'date-fns/parse';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
@@ -72,7 +74,7 @@ import 'date-fns/isWithinInterval';
 var backdropTransitionStyles = {"appear":"calendar__appear_y4uhk","enter":"calendar__enter_y4uhk","appearActive":"calendar__appearActive_y4uhk","enterActive":"calendar__enterActive_y4uhk","appearDone":"calendar__appearDone_y4uhk","enterDone":"calendar__enterDone_y4uhk","exit":"calendar__exit_y4uhk","exitActive":"calendar__exitActive_y4uhk","exitDone":"calendar__exitDone_y4uhk"};
 require('./backdrop-transitions.css');
 
-var styles = {"wrapper":"calendar__wrapper_ocx7c","withZIndex":"calendar__withZIndex_ocx7c","calendar":"calendar__calendar_ocx7c","dayNames":"calendar__dayNames_ocx7c","withHeader":"calendar__withHeader_ocx7c","month":"calendar__month_ocx7c","daysTable":"calendar__daysTable_ocx7c","dayName":"calendar__dayName_ocx7c","virtuoso":"calendar__virtuoso_ocx7c","contentModal":"calendar__contentModal_ocx7c","content":"calendar__content_ocx7c"};
+var styles = {"wrapper":"calendar__wrapper_ocx7c","withZIndex":"calendar__withZIndex_ocx7c","calendar":"calendar__calendar_ocx7c","dayNames":"calendar__dayNames_ocx7c","withHeader":"calendar__withHeader_ocx7c","month":"calendar__month_ocx7c","clickableMonth":"calendar__clickableMonth_ocx7c","rectangular":"calendar__rectangular_ocx7c","active":"calendar__active_ocx7c","monthTitle":"calendar__monthTitle_ocx7c","disabled":"calendar__disabled_ocx7c","daysTable":"calendar__daysTable_ocx7c","dayName":"calendar__dayName_ocx7c","virtuoso":"calendar__virtuoso_ocx7c","contentModal":"calendar__contentModal_ocx7c","content":"calendar__content_ocx7c"};
 require('./index.css');
 
 var transitionStyles = {"appear":"calendar__appear_kl8p5","enter":"calendar__enter_kl8p5","appearActive":"calendar__appearActive_kl8p5","enterActive":"calendar__enterActive_kl8p5","exit":"calendar__exit_kl8p5","exitActive":"calendar__exitActive_kl8p5","exitDone":"calendar__exitDone_kl8p5"};
@@ -83,7 +85,8 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
-    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 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, clickableMonth = _a.clickableMonth, resetCurrentClickedMonth = _a.resetCurrentClickedMonth;
+    var _f = useState(''), activeMonthLabel = _f[0], setActiveMonthLabel = _f[1];
     var range = useRange({
         mode: mode,
         value: value,
@@ -94,25 +97,20 @@ var CalendarMonthOnlyView = function (_a) {
     });
     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 maxDate = useMemo(function () {
+        // блокируем последующие дни после текущего
+        if (clickableMonth && !maxDateTimestamp) {
+            return new Date();
+        }
+        return maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined;
+    }, [maxDateTimestamp, clickableMonth]);
     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 _f = useCalendar({
-        month: month,
-        defaultMonth: defaultMonth,
-        view: 'months',
-        minDate: minDate,
-        maxDate: maxDate,
-        selected: selected,
-        offDays: offDays,
-        events: events,
-        onChange: range.onChange,
-        dayAddons: dayAddons,
-    }), activeMonth = _f.activeMonth, highlighted = _f.highlighted, getDayProps = _f.getDayProps;
+    var _g = useCalendar(__assign({ month: month, defaultMonth: defaultMonth, view: 'months', minDate: minDate, maxDate: maxDate, selected: selected, offDays: offDays, events: events, onChange: range.onChange, dayAddons: dayAddons }, (clickableMonth && { resetCurrentClickedMonth: resetCurrentClickedMonth }))), activeMonth = _g.activeMonth, highlighted = _g.highlighted, getDayProps = _g.getDayProps;
     var activeMonths = useMemo(function () {
         var eventsMap = dateArrayToHashTable(events || []);
         var offDaysMap = dateArrayToHashTable(offDays || []);
@@ -146,14 +144,45 @@ var CalendarMonthOnlyView = function (_a) {
         var date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth(date, m.date); });
     }, [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 */
-        React.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (React.createElement("span", { className: styles.month },
-            " ",
-            activeMonths[index].title,
-            " ")),
-        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 }))); };
+    var handleClickMonthLabel = function (index) {
+        if (activeMonths[index].title !== activeMonthLabel || activeMonthLabel === '') {
+            setActiveMonthLabel(activeMonths[index].title);
+        }
+        else {
+            setActiveMonthLabel('');
+            if (onChange) {
+                onChange();
+            }
+        }
+    };
+    var getMonthTitle = function (index, isClickableMonth) {
+        if (isClickableMonth) {
+            return (React.createElement(Typography.Text, { className: styles.monthTitle, view: 'primary-small', color: 'primary' }, activeMonths[index].title));
+        }
+        return "\u00A0".concat(activeMonths[index].title, "\u00A0");
+    };
+    var renderMonth = function (index) {
+        var _a;
+        var monthClicked = activeMonthLabel === activeMonths[index].title;
+        var isAfterDate = isAfter(activeMonths[index].date, activeMonth);
+        return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
+            onMonthTitleClick ? (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            React.createElement("span", __assign({ className: cn(styles.month, __assign({}, (clickableMonth && (_a = {},
+                    _a[styles.clickableMonth] = true,
+                    _a[styles.rectangular] = shape === 'rectangular',
+                    _a[styles.active] = monthClicked,
+                    _a[styles.disabled] = isAfterDate,
+                    _a)))) }, (clickableMonth && { onClick: function () { return handleClickMonthLabel(index); } })), getMonthTitle(index, clickableMonth))),
+            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, monthClicked: monthClicked, onChange: onChange })));
+    };
+    useImperativeHandle(resetCurrentClickedMonth, function () { return ({
+        resetCurrentClickedMonth: function () {
+            setActiveMonthLabel('');
+        },
+    }); });
     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 },
@@ -161,8 +190,9 @@ var CalendarMonthOnlyViewHeader = function () { return (React.createElement("tab
         React.createElement("tr", null, WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); };
 var CalendarMobile = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, onApply = _a.onApply, restProps = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply"]);
+    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, onApply = _a.onApply, clickableMonth = _a.clickableMonth, restProps = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply", "clickableMonth"]);
     var _k = useState(), modalRef = _k[0], setModalRef = _k[1];
+    var resetCurrentClickedMonth = useRef(null);
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
@@ -173,8 +203,10 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         handleClose === null || handleClose === void 0 ? void 0 : handleClose();
     };
     var handleClear = function () {
+        var _a;
         if (onChange)
             onChange();
+        (_a = resetCurrentClickedMonth === null || resetCurrentClickedMonth === void 0 ? void 0 : resetCurrentClickedMonth.current) === null || _a === void 0 ? void 0 : _a.resetCurrentClickedMonth();
     };
     var renderDayNames = function () { return (monthOnlyView ? React.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
@@ -187,7 +219,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, __assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
+            return (React.createElement(CalendarMonthOnlyView, __assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth }, commonProps, restProps)));
         }
         return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
@@ -203,7 +235,11 @@ var CalendarMobile = forwardRef(function (_a, ref) {
                 React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
                 React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, disabled: selectButtonDisabled, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
         }
-        if (value) {
+        /**
+         * value может быть числом и объектом, для текущего кейса проверяем на typeof number
+         * иначе может приводить к багу, когда выводится кнопка "Выбрать" для дефолтного значения календаря
+         */
+        if (value && typeof value === 'number') {
             return (React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
         }
         return (React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u041E\u0442\u043C\u0435\u043D\u0430"));

package/calendar/esm/components/calendar-mobile/index.css

@@ -1,10 +1,14 @@
 /* hash: 2uyon */
 :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-accent-secondary: #212124;
     --color-light-modal-bg-primary: #fff;
     --color-light-neutral-300: #e7e8eb;
+    --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
-    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -14,7 +18,8 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
@@ -88,8 +93,25 @@
     letter-spacing: 1.25px;
     text-transform: uppercase;
     color: var(--color-light-text-primary);
-    margin-bottom: var(--gap-xs);
-} .calendar__daysTable_ocx7c {
+    margin-bottom: var(--gap-xs)
+} .calendar__month_ocx7c.calendar__clickableMonth_ocx7c {
+        padding: 10px var(--gap-m);
+        align-self: flex-start;
+        border-radius: 999px;
+        background-color: var(--color-light-neutral-translucent-100);
+        cursor: pointer;
+        text-transform: unset
+    } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__rectangular_ocx7c {
+            border-radius: var(--border-radius-l);
+        } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__active_ocx7c {
+            background-color: var(--color-light-accent-secondary)
+        } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__active_ocx7c .calendar__monthTitle_ocx7c {
+                color: var(--color-light-text-primary-inverted);
+            } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__disabled_ocx7c {
+            pointer-events: none
+        } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__disabled_ocx7c .calendar__monthTitle_ocx7c {
+                color: var(--color-light-text-tertiary);
+            } .calendar__daysTable_ocx7c {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);

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

@@ -6,16 +6,19 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../../button/esm/mobile';
 import '../../../../modal/esm/mobile';
 import '../../../../shared/esm';
+import '../../../../typography/esm';
 import '../../desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import '../days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
@@ -31,7 +34,6 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
-import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';

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

@@ -3,6 +3,9 @@ import React from 'react';
 import { CalendarDesktopProps } from "../../desktop/index";
 type OmittedCalendarProps = 'headerClassName' | 'contentClassName';
 type OmittedCalendarContentProps = 'className' | 'defaultView' | 'selectorView' | 'rangeComplete' | 'onMonthChange' | 'onYearClick' | 'onPeriodClick' | 'dataTestId' | 'hasHeader' | 'responsive' | 'showCurrentYearSelector';
+type ResetCurrentClickedMonth = {
+    resetCurrentClickedMonth: () => void;
+};
 type CalendarContentProps = {
     /**
      * Обработчик клика на название месяца в мобильном календаре
@@ -42,5 +45,9 @@ type CalendarMobileProps = {
      * Обработчик клика на кнопку выбрать
      */
     onApply?: () => void;
+    /**
+     * При клике на месяц будут выбраны все доступные дни месяца
+     */
+    clickableMonth?: boolean;
 } & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
-export { CalendarContentProps, CalendarMobileProps };
+export { ResetCurrentClickedMonth, CalendarContentProps, CalendarMobileProps };

package/calendar/esm/components/days-table/Component.d.ts

@@ -54,6 +54,14 @@ type DaysTableProps = {
      * Рендерит компонент, обернутый в Transition
      */
     withTransition?: boolean;
+    /**
+     * При клике на месяц будут выбраны все доступные дни месяца
+     */
+    monthClicked?: boolean;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date?: number, dateTo?: number) => void;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

package/calendar/esm/components/days-table/Component.js

@@ -1,7 +1,8 @@
 import { __assign } from 'tslib';
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
+import { getTime } from 'date-fns';
 import isEqual from 'date-fns/isEqual';
 import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
 import isSameDay from 'date-fns/isSameDay';
@@ -33,14 +34,16 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../../../../shared/esm';
 
-var styles = {"daysTable":"calendar__daysTable_1opka","responsive":"calendar__responsive_1opka","dayName":"calendar__dayName_1opka","day":"calendar__day_1opka","rounded":"calendar__rounded_1opka","rectangular":"calendar__rectangular_1opka","highlighted":"calendar__highlighted_1opka","range":"calendar__range_1opka","disabled":"calendar__disabled_1opka","holiday":"calendar__holiday_1opka","today":"calendar__today_1opka","rangeComplete":"calendar__rangeComplete_1opka","selected":"calendar__selected_1opka","dayWrapper":"calendar__dayWrapper_1opka","cursorPointer":"calendar__cursorPointer_1opka","rangeEnd":"calendar__rangeEnd_1opka","rangeStart":"calendar__rangeStart_1opka","transitLeft":"calendar__transitLeft_1opka","transitRight":"calendar__transitRight_1opka","sharpTransitLeft":"calendar__sharpTransitLeft_1opka","sharpTransitRight":"calendar__sharpTransitRight_1opka","daysEnter":"calendar__daysEnter_1opka","left":"calendar__left_1opka","daysEnterActive":"calendar__daysEnterActive_1opka","daysExit":"calendar__daysExit_1opka","daysExitActive":"calendar__daysExitActive_1opka","right":"calendar__right_1opka","dayAddons":"calendar__dayAddons_1opka","dayContent":"calendar__dayContent_1opka","addons":"calendar__addons_1opka","dot":"calendar__dot_1opka","bottomAddon":"calendar__bottomAddon_1opka"};
+var styles = {"daysTable":"calendar__daysTable_1opka","responsive":"calendar__responsive_1opka","dayName":"calendar__dayName_1opka","day":"calendar__day_1opka","rounded":"calendar__rounded_1opka","rectangular":"calendar__rectangular_1opka","highlighted":"calendar__highlighted_1opka","range":"calendar__range_1opka","disabled":"calendar__disabled_1opka","holiday":"calendar__holiday_1opka","today":"calendar__today_1opka","rangeComplete":"calendar__rangeComplete_1opka","selected":"calendar__selected_1opka","dayWrapper":"calendar__dayWrapper_1opka","cursorPointer":"calendar__cursorPointer_1opka","rangeEnd":"calendar__rangeEnd_1opka","shapeRectangular":"calendar__shapeRectangular_1opka","rangeStart":"calendar__rangeStart_1opka","transitLeft":"calendar__transitLeft_1opka","transitRight":"calendar__transitRight_1opka","sharpTransitLeft":"calendar__sharpTransitLeft_1opka","sharpTransitRight":"calendar__sharpTransitRight_1opka","daysEnter":"calendar__daysEnter_1opka","left":"calendar__left_1opka","daysEnterActive":"calendar__daysEnterActive_1opka","daysExit":"calendar__daysExit_1opka","daysExitActive":"calendar__daysExitActive_1opka","right":"calendar__right_1opka","dayAddons":"calendar__dayAddons_1opka","dayContent":"calendar__dayContent_1opka","addons":"calendar__addons_1opka","dot":"calendar__dot_1opka","bottomAddon":"calendar__bottomAddon_1opka"};
 require('./index.css');
 
 var DaysTable = function (_a) {
     var _b;
-    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.withTransition, withTransition = _h === void 0 ? true : _h;
+    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.withTransition, withTransition = _h === void 0 ? true : _h, _j = _a.monthClicked, monthClicked = _j === void 0 ? false : _j, onChange = _a.onChange;
     var activeMonthRef = useRef(activeMonth);
     var directionRef = useRef();
+    var currentStartMonth = useRef();
+    var currentEndPeriod = useRef();
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -83,6 +86,15 @@ var DaysTable = function (_a) {
             if (!day.disabled)
                 onClick(e);
         };
+        if (dayIdx === 0) {
+            currentStartMonth.current = startOfMonth(day.date).getTime();
+        }
+        if (isToday(day.date)) {
+            currentEndPeriod.current = getTime(day.date);
+        }
+        else if (!currentEndPeriod.current && isLastDayOfMonth(day.date)) {
+            currentEndPeriod.current = getTime(day.date);
+        }
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         React.createElement("td", __assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
@@ -95,6 +107,7 @@ var DaysTable = function (_a) {
                 _a[styles.rangeStart] = rangeStart,
                 _a[styles.rangeEnd] = rangeEnd,
                 _a[styles.cursorPointer] = !day.disabled,
+                _a[styles.shapeRectangular] = shape === 'rectangular',
                 _a)), align: 'center', ref: function (node) {
                 /**
                  * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
@@ -121,6 +134,12 @@ var DaysTable = function (_a) {
     };
     var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     var renderMonth = function () { return React.createElement("tbody", null, weeks.map(renderWeek)); };
+    useEffect(function () {
+        if (monthClicked && onChange) {
+            onChange(currentStartMonth.current, currentEndPeriod.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [monthClicked]);
     return (React.createElement("table", { className: cn(styles.daysTable, directionRef.current && styles[directionRef.current], (_b = {},
             _b[styles.responsive] = responsive,
             _b)) },

package/calendar/esm/components/days-table/index.css

@@ -161,12 +161,20 @@
         width: calc(50% + 20px);
         border-top-right-radius: var(--calendar-day-border-radius);
         border-bottom-right-radius: var(--calendar-day-border-radius);
+    } .calendar__rangeEnd_1opka.calendar__shapeRectangular_1opka:before {
+        width: calc(50% + 22px);
+        border-top-right-radius: var(--border-radius-m);
+        border-bottom-right-radius: var(--border-radius-m);
     } .calendar__rangeStart_1opka:before {
         left: auto;
         right: 0;
         width: calc(50% + 20px);
         border-top-left-radius: var(--calendar-day-border-radius);
         border-bottom-left-radius: var(--calendar-day-border-radius);
+    } .calendar__rangeStart_1opka.calendar__shapeRectangular_1opka:before {
+        width: calc(50% + 22px);
+        border-top-left-radius: var(--border-radius-m);
+        border-bottom-left-radius: var(--border-radius-m);
     } .calendar__rangeComplete_1opka:before {
         background: var(--calendar-range-complete-background);
     } .calendar__transitLeft_1opka:after, .calendar__transitRight_1opka:after {

package/calendar/esm/components/days-table/index.js

@@ -3,6 +3,7 @@ import 'tslib';
 import 'react';
 import 'react-transition-group';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';

package/calendar/esm/desktop/Component.desktop.js

@@ -33,6 +33,7 @@ import { YearsTable } from '../components/years-table/Component.js';
 import { useCalendar } from '../useCalendar.js';
 import { useRange } from '../useRange.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';

package/calendar/esm/desktop/index.js

@@ -9,6 +9,7 @@ import '../../../shared/esm';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';

package/calendar/esm/index.js

@@ -8,16 +8,19 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
 import '../../shared/esm';
+import '../../typography/esm';
 import './desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
@@ -33,7 +36,6 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
-import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';

package/calendar/esm/mobile/index.js

@@ -6,16 +6,19 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../button/esm/mobile';
 import '../../../modal/esm/mobile';
 import '../../../shared/esm';
+import '../../../typography/esm';
 import '../desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
@@ -31,7 +34,6 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
-import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';

package/calendar/esm/useCalendar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { KeyboardEvent, MouseEvent, Ref, RefObject } from 'react';
 import { Day, DayAddons, Month, View } from "./typings";
 type UseCalendarProps = {
     /**
@@ -50,8 +50,14 @@ type UseCalendarProps = {
      * Дополнительный контент под числом
      */
     dayAddons?: DayAddons[];
+    /**
+     * Ref для сброса заголовка clickableMonth
+     */
+    resetCurrentClickedMonth?: RefObject<{
+        resetCurrentClickedMonth: () => void;
+    }>;
 };
-declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, resetCurrentClickedMonth, }: UseCalendarProps): {
     activeMonth: Date;
     weeks: Day[][];
     months: Month[];

package/calendar/esm/useCalendar.js

@@ -31,7 +31,7 @@ import 'date-fns/subMonths';
 import '../../shared/esm';
 
 function useCalendar(_a) {
-    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
+    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange, resetCurrentClickedMonth = _a.resetCurrentClickedMonth;
     var _c = useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
     var _d = useState(), highlighted = _d[0], setHighlighted = _d[1];
     var uncontrolled = month === undefined;
@@ -185,11 +185,14 @@ function useCalendar(_a) {
         setHighlighted(undefined);
     }, []);
     var handleDayClick = function (event) {
+        var _a;
         var date = event.currentTarget.dataset.date;
         if (date && onChange) {
             onChange(+date);
         }
         handleDayMouseLeave();
+        // сбрасываем выбранный месяц если выбираем дату вручную
+        (_a = resetCurrentClickedMonth === null || resetCurrentClickedMonth === void 0 ? void 0 : resetCurrentClickedMonth.current) === null || _a === void 0 ? void 0 : _a.resetCurrentClickedMonth();
     };
     var daysControls = useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },

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

@@ -20,6 +20,7 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     allowSelectionFromEmptyRange?: boolean | undefined;
     hasHeader?: boolean | undefined;
     onApply?: (() => void) | undefined;
+    clickableMonth?: boolean | undefined;
 } & {
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;