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

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

@@ -7,12 +7,14 @@ var reactVirtuoso = require('react-virtuoso');
 var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var endOfDay = require('date-fns/endOfDay');
+var isAfter = require('date-fns/isAfter');
 var isSameMonth = require('date-fns/isSameMonth');
 var startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var mobile$1 = require('../../../../button/cssm/mobile');
 var mobile = require('../../../../modal/cssm/mobile');
 var coreComponentsShared = require('../../../../shared/cssm');
+var coreComponentsTypography = require('../../../../typography/cssm');
 var desktop_Component_desktop = require('../../desktop/Component.desktop.js');
 var useCalendar = require('../../useCalendar.js');
 var useRange = require('../../useRange.js');
@@ -28,6 +30,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
+var isAfter__default = /*#__PURE__*/_interopDefaultCompat(isAfter);
 var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
@@ -40,7 +43,8 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = 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 = React.useState(''), activeMonthLabel = _f[0], setActiveMonthLabel = _f[1];
     var range = useRange.useRange({
         mode: mode,
         value: value,
@@ -51,25 +55,20 @@ var CalendarMonthOnlyView = function (_a) {
     });
     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 maxDate = React.useMemo(function () {
+        // блокируем последующие дни после текущего
+        if (clickableMonth && !maxDateTimestamp) {
+            return new Date();
+        }
+        return maxDateTimestamp ? endOfDay__default.default(maxDateTimestamp) : undefined;
+    }, [maxDateTimestamp, clickableMonth]);
     var selected = React.useMemo(function () { return (range.value ? new Date(range.value) : undefined); }, [range.value]);
     var startingDate = React.useRef(range.value);
     var defaultMonth = React.useMemo(function () {
         return startOfMonth__default.default(selected ||
             utils.limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    var _f = useCalendar.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.useCalendar(tslib.__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 = React.useMemo(function () {
         var eventsMap = utils.dateArrayToHashTable(events || []);
         var offDaysMap = utils.dateArrayToHashTable(offDays || []);
@@ -103,14 +102,45 @@ var CalendarMonthOnlyView = function (_a) {
         var date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth__default.default(date, m.date); });
     }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
-    var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
-        onMonthTitleClick ? (
-        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-        React__default.default.createElement("span", { className: styles__default.default.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (React__default.default.createElement("span", { className: styles__default.default.month },
-            " ",
-            activeMonths[index].title,
-            " ")),
-        React__default.default.createElement(components_daysTable_Component.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__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.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__default.default(activeMonths[index].date, activeMonth);
+        return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
+            onMonthTitleClick ? (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React__default.default.createElement("span", { className: styles__default.default.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__default.default.createElement("span", tslib.__assign({ className: cn__default.default(styles__default.default.month, tslib.__assign({}, (clickableMonth && (_a = {},
+                    _a[styles__default.default.clickableMonth] = true,
+                    _a[styles__default.default.rectangular] = shape === 'rectangular',
+                    _a[styles__default.default.active] = monthClicked,
+                    _a[styles__default.default.disabled] = isAfterDate,
+                    _a)))) }, (clickableMonth && { onClick: function () { return handleClickMonthLabel(index); } })), getMonthTitle(index, clickableMonth))),
+            React__default.default.createElement(components_daysTable_Component.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 })));
+    };
+    React.useImperativeHandle(resetCurrentClickedMonth, function () { return ({
+        resetCurrentClickedMonth: function () {
+            setActiveMonthLabel('');
+        },
+    }); });
     return (React__default.default.createElement(reactVirtuoso.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__default.default.virtuoso }));
 };
 var CalendarMonthOnlyViewHeader = function () { return (React__default.default.createElement("table", { className: styles__default.default.dayNames },
@@ -118,8 +148,9 @@ var CalendarMonthOnlyViewHeader = function () { return (React__default.default.c
         React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles__default.default.dayName, key: dayName }, dayName)); }))))); };
 var CalendarMobile = React.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 = tslib.__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 = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply", "clickableMonth"]);
     var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
+    var resetCurrentClickedMonth = React.useRef(null);
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
@@ -130,8 +161,10 @@ var CalendarMobile = React.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__default.default.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
@@ -144,7 +177,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth }, commonProps, restProps)));
         }
         return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), contentClassName: styles__default.default.content, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
@@ -160,7 +193,11 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
                 React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
                 React__default.default.createElement(mobile$1.ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, disabled: selectButtonDisabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
         }
-        if (value) {
+        /**
+         * value может быть числом и объектом, для текущего кейса проверяем на typeof number
+         * иначе может приводить к багу, когда выводится кнопка "Выбрать" для дефолтного значения календаря
+         */
+        if (value && typeof value === 'number') {
             return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
         }
         return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-reset') }, "\u041E\u0442\u043C\u0435\u043D\u0430"));

package/calendar/cssm/components/calendar-mobile/index.module.css

@@ -1,9 +1,13 @@
 :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 {
@@ -13,7 +17,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 */
@@ -87,8 +92,25 @@
     letter-spacing: 1.25px;
     text-transform: uppercase;
     color: var(--color-light-text-primary);
-    margin-bottom: var(--gap-xs);
-} .daysTable {
+    margin-bottom: var(--gap-xs)
+} .month.clickableMonth {
+        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
+    } .month.clickableMonth.rectangular {
+            border-radius: var(--border-radius-l);
+        } .month.clickableMonth.active {
+            background-color: var(--color-light-accent-secondary)
+        } .month.clickableMonth.active .monthTitle {
+                color: var(--color-light-text-primary-inverted);
+            } .month.clickableMonth.disabled {
+            pointer-events: none
+        } .month.clickableMonth.disabled .monthTitle {
+                color: var(--color-light-text-tertiary);
+            } .daysTable {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);

package/calendar/cssm/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/cssm/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/cssm/components/days-table/Component.js

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
+var dateFns = require('date-fns');
 var isEqual = require('date-fns/isEqual');
 var isLastDayOfMonth = require('date-fns/isLastDayOfMonth');
 var isSameDay = require('date-fns/isSameDay');
@@ -29,9 +30,11 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 = React.useRef(activeMonth);
     var directionRef = React.useRef();
+    var currentStartMonth = React.useRef();
+    var currentEndPeriod = React.useRef();
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = hooks.usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -74,6 +77,15 @@ var DaysTable = function (_a) {
             if (!day.disabled)
                 onClick(e);
         };
+        if (dayIdx === 0) {
+            currentStartMonth.current = startOfMonth__default.default(day.date).getTime();
+        }
+        if (isToday__default.default(day.date)) {
+            currentEndPeriod.current = dateFns.getTime(day.date);
+        }
+        else if (!currentEndPeriod.current && isLastDayOfMonth__default.default(day.date)) {
+            currentEndPeriod.current = dateFns.getTime(day.date);
+        }
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         React__default.default.createElement("td", tslib.__assign({}, dayProps, { key: day.date.getTime(), className: cn__default.default(styles__default.default.dayWrapper, (_a = {},
@@ -86,6 +98,7 @@ var DaysTable = function (_a) {
                 _a[styles__default.default.rangeStart] = rangeStart,
                 _a[styles__default.default.rangeEnd] = rangeEnd,
                 _a[styles__default.default.cursorPointer] = !day.disabled,
+                _a[styles__default.default.shapeRectangular] = shape === 'rectangular',
                 _a)), align: 'center', ref: function (node) {
                 /**
                  * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
@@ -112,6 +125,12 @@ var DaysTable = function (_a) {
     };
     var renderWeek = function (week, weekIdx) { return (React__default.default.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     var renderMonth = function () { return React__default.default.createElement("tbody", null, weeks.map(renderWeek)); };
+    React.useEffect(function () {
+        if (monthClicked && onChange) {
+            onChange(currentStartMonth.current, currentEndPeriod.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [monthClicked]);
     return (React__default.default.createElement("table", { className: cn__default.default(styles__default.default.daysTable, directionRef.current && styles__default.default[directionRef.current], (_b = {},
             _b[styles__default.default.responsive] = responsive,
             _b)) },

package/calendar/cssm/components/days-table/index.module.css

@@ -160,12 +160,20 @@
         width: calc(50% + 20px);
         border-top-right-radius: var(--calendar-day-border-radius);
         border-bottom-right-radius: var(--calendar-day-border-radius);
+    } .rangeEnd.shapeRectangular:before {
+        width: calc(50% + 22px);
+        border-top-right-radius: var(--border-radius-m);
+        border-bottom-right-radius: var(--border-radius-m);
     } .rangeStart: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);
+    } .rangeStart.shapeRectangular:before {
+        width: calc(50% + 22px);
+        border-top-left-radius: var(--border-radius-m);
+        border-bottom-left-radius: var(--border-radius-m);
     } .rangeComplete:before {
         background: var(--calendar-range-complete-background);
     } .transitLeft:after, .transitRight:after {

package/calendar/cssm/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/cssm/useCalendar.js

@@ -25,7 +25,7 @@ var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 var subYears__default = /*#__PURE__*/_interopDefaultCompat(subYears);
 
 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 = React.useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
     var _d = React.useState(), highlighted = _d[0], setHighlighted = _d[1];
     var uncontrolled = month === undefined;
@@ -179,11 +179,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 = React.useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },

package/calendar/esm/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;

package/calendar/esm/Component.responsive.js

@@ -8,12 +8,14 @@ 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 './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -29,7 +31,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';
@@ -45,6 +46,7 @@ import 'date-fns/differenceInDays';
 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/isToday';

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

@@ -1,7 +1,22 @@
 /// <reference types="react" />
 import React from 'react';
-import { CalendarContentProps } from "./typings";
-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;
+import { ResetCurrentClickedMonth } from "./typings";
+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, clickableMonth, resetCurrentClickedMonth, }: {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & {
+    /**
+     * FIXME нужно сделать для компонента CalendarMonthOnlyView отдельный тип пропсов, т.к. тип CalendarContentProps intersection для типа CalendarMobileProps
+     * FIXME это приводит к тому, что в доку сторибука попадают типы пропсов, которые нужны для работы компонента CalendarMonthOnlyView, но не нужны для компонента CalendarMobile
+     * TODO Вынести компонент CalendarMonthOnlyView в отдельный файл
+     */
+    clickableMonth?: boolean | undefined;
+    /**
+     * Ref для сброса заголовка clickableMonth
+     */
+    resetCurrentClickedMonth?: React.RefObject<ResetCurrentClickedMonth> | undefined;
+}) => React.JSX.Element;
 declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
 declare const CalendarMobile: React.ForwardRefExoticComponent<{
     title?: string | undefined;
@@ -10,6 +25,7 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<{
     allowSelectionFromEmptyRange?: boolean | undefined;
     hasHeader?: boolean | undefined;
     onApply?: (() => void) | undefined;
+    clickableMonth?: boolean | undefined;
 } & {
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;