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

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

package/calendar/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/mobile');
 var mobile = require('../../../modal/mobile');
 var coreComponentsShared = require('../../../shared');
+var coreComponentsTypography = require('../../../typography');
 var desktop_Component_desktop = require('../../desktop/Component.desktop.js');
 var useCalendar = require('../../useCalendar.js');
 var useRange = require('../../useRange.js');
@@ -25,6 +27,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);
@@ -32,7 +35,7 @@ var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 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"};
@@ -43,7 +46,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,
@@ -54,25 +58,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 || []);
@@ -106,14 +105,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.daysTable, id: "month-".concat(index) },
-        onMonthTitleClick ? (
-        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-        React__default.default.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (React__default.default.createElement("span", { className: styles.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.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.daysTable, id: "month-".concat(index) },
+            onMonthTitleClick ? (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React__default.default.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__default.default.createElement("span", tslib.__assign({ className: cn__default.default(styles.month, tslib.__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__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.virtuoso }));
 };
 var CalendarMonthOnlyViewHeader = function () { return (React__default.default.createElement("table", { className: styles.dayNames },
@@ -121,8 +151,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.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)
@@ -133,8 +164,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 () {
@@ -147,7 +180,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.calendar), contentClassName: styles.content, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };
@@ -163,7 +196,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/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/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/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/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');
@@ -25,14 +26,16 @@ var isToday__default = /*#__PURE__*/_interopDefaultCompat(isToday);
 var isWithinInterval__default = /*#__PURE__*/_interopDefaultCompat(isWithinInterval);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-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 = 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) {
@@ -75,6 +78,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.dayWrapper, (_a = {},
@@ -87,6 +99,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.
@@ -113,6 +126,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.daysTable, directionRef.current && styles[directionRef.current], (_b = {},
             _b[styles.responsive] = responsive,
             _b)) },

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