@alfalab/core-components 41.7.0-beta.0 → 41.8.0

package/README.md

@@ -1,4 +1,4 @@
-<div class="github-doc">
+<div className="github-doc">
 
 ## Библиотека React компонентов для создания веб-интерфейсов
 

package/alert/cssm/index.module.css

@@ -13,7 +13,7 @@
 } :root {
 } :root {
 } :root {
-} .component {
+} .component.component {
     min-height: 48px;
 } .title {
     font-size: 16px;

package/alert/esm/index.css

@@ -14,7 +14,7 @@
 } :root {
 } :root {
 } :root {
-} .alert__component_uohfj {
+} .alert__component_uohfj.alert__component_uohfj {
     min-height: 48px;
 } .alert__title_uohfj {
     font-size: 16px;

package/alert/index.css

@@ -14,7 +14,7 @@
 } :root {
 } :root {
 } :root {
-} .alert__component_uohfj {
+} .alert__component_uohfj.alert__component_uohfj {
     min-height: 48px;
 } .alert__title_uohfj {
     font-size: 16px;

package/alert/modern/index.css

@@ -14,7 +14,7 @@
 } :root {
 } :root {
 } :root {
-} .alert__component_uohfj {
+} .alert__component_uohfj.alert__component_uohfj {
     min-height: 48px;
 } .alert__title_uohfj {
     font-size: 16px;

package/calendar/Component.desktop.d.ts

@@ -75,6 +75,10 @@ type CalendarDesktopProps = {
      * Обработчик нажатия на кнопку года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/Component.desktop.js

@@ -75,7 +75,7 @@ require('./desktop.css');
 
 var CalendarDesktop = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
     var _j = React.useState(defaultView), view = _j[0], setView = _j[1];
     var _k = React.useState(false), scrolled = _k[0], setScrolled = _k[1];
     var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
@@ -143,7 +143,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _b[styles.sixWeeks] = weeks.length === 6,
             _b[styles.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React__default.default.createElement("div", { className: cn__default.default(styles.container, styles[view]) },
             view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React__default.default.createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),

package/calendar/Component.responsive.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('@alfalab/hooks');
-var components_calendarMobile_Component = require('./Component.responsive-90e4925f.js');
+var components_calendarMobile_Component = require('./Component.responsive-c4a5d6dd.js');
 require('./Component.desktop.js');
 require('react-virtuoso');
 require('@juggle/resize-observer');

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

@@ -11,7 +11,7 @@ require('date-fns/startOfMonth');
 require('../../../button');
 require('../../../modal/mobile');
 require('../../Component.desktop.js');
-var components_calendarMobile_Component = require('../../Component.responsive-90e4925f.js');
+var components_calendarMobile_Component = require('../../Component.responsive-c4a5d6dd.js');
 require('date-fns/differenceInDays');
 require('@alfalab/hooks');
 require('../../useCalendar.js');

package/calendar/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-90e4925f";
+export * from "../../Component.responsive-c4a5d6dd";
 export {};

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('../../Component.responsive-90e4925f.js');
+var components_calendarMobile_Component = require('../../Component.responsive-c4a5d6dd.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

package/calendar/components/period-slider/Component.d.ts

@@ -63,6 +63,10 @@ type PeriodSliderProps = {
      * Обработчик нажатия на селектор года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/components/period-slider/Component.js

@@ -46,11 +46,11 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfWeek__default = /*#__PURE__*/_interopDefaultCompat(endOfWeek);
 var startOfWeek__default = /*#__PURE__*/_interopDefaultCompat(startOfWeek);
 
-var styles = {"component":"calendar__component_1czne","period":"calendar__period_1czne","empty":"calendar__empty_1czne","arrow":"calendar__arrow_1czne","full":"calendar__full_1czne","yearSelectorButton":"calendar__yearSelectorButton_1czne"};
+var styles = {"component":"calendar__component_1czne","period":"calendar__period_1czne","clicablePeriod":"calendar__clicablePeriod_1czne","empty":"calendar__empty_1czne","arrow":"calendar__arrow_1czne","full":"calendar__full_1czne","yearSelectorButton":"calendar__yearSelectorButton_1czne"};
 require('./index.css');
 
 var PeriodSlider = function (_a) {
-    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId;
     var _l = React.useMemo(function () {
         var _a;
         var from;
@@ -103,9 +103,17 @@ var PeriodSlider = function (_a) {
         if (!(valueFrom && valueTo)) {
             return React__default.default.createElement("span", { className: cn__default.default(styles.period, styles.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
         }
-        return periodType === 'month' && isMonthAndYearSelectable ? (React__default.default.createElement("div", null,
-            React__default.default.createElement(coreComponentsButton.Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, utils.monthName(valueFrom)),
-            yearSelectorValue && (React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React__default.default.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        if (periodType === 'month' && isMonthAndYearSelectable) {
+            return (React__default.default.createElement("div", null,
+                React__default.default.createElement(coreComponentsButton.Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, utils.monthName(valueFrom)),
+                yearSelectorValue && (React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue))));
+        }
+        if (onPeriodClick) {
+            return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            React__default.default.createElement("a", { role: 'button', tabIndex: 0, onClick: onPeriodClick, className: cn__default.default(styles.period, styles.clicablePeriod) }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        }
+        return (React__default.default.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
         showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),

package/calendar/components/period-slider/index.css

@@ -58,7 +58,9 @@
         width: auto;
         flex-grow: 1
 }
-    } .calendar__empty_1czne {
+    } .calendar__clicablePeriod_1czne {
+    cursor: pointer;
+} .calendar__empty_1czne {
     color: var(--color-light-text-secondary);
 } .calendar__arrow_1czne {
     position: absolute;

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

@@ -75,6 +75,10 @@ type CalendarDesktopProps = {
      * Обработчик нажатия на кнопку года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/cssm/Component.desktop.js

@@ -81,7 +81,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var CalendarDesktop = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
     var _j = React.useState(defaultView), view = _j[0], setView = _j[1];
     var _k = React.useState(false), scrolled = _k[0], setScrolled = _k[1];
     var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
@@ -149,7 +149,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _b[styles__default.default.sixWeeks] = weeks.length === 6,
             _b[styles__default.default.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container, styles__default.default[view]) },
             view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React__default.default.createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),

package/calendar/cssm/components/period-slider/Component.d.ts

@@ -63,6 +63,10 @@ type PeriodSliderProps = {
      * Обработчик нажатия на селектор года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/cssm/components/period-slider/Component.js

@@ -49,7 +49,7 @@ var startOfWeek__default = /*#__PURE__*/_interopDefaultCompat(startOfWeek);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var PeriodSlider = function (_a) {
-    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId;
     var _l = React.useMemo(function () {
         var _a;
         var from;
@@ -102,9 +102,17 @@ var PeriodSlider = function (_a) {
         if (!(valueFrom && valueTo)) {
             return React__default.default.createElement("span", { className: cn__default.default(styles__default.default.period, styles__default.default.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
         }
-        return periodType === 'month' && isMonthAndYearSelectable ? (React__default.default.createElement("div", null,
-            React__default.default.createElement(coreComponentsButton.Button, { className: styles__default.default.period, view: 'ghost', size: 'l', onClick: onMonthClick }, utils.monthName(valueFrom)),
-            yearSelectorValue && (React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles__default.default.yearSelectorButton, styles__default.default.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React__default.default.createElement("span", { className: styles__default.default.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        if (periodType === 'month' && isMonthAndYearSelectable) {
+            return (React__default.default.createElement("div", null,
+                React__default.default.createElement(coreComponentsButton.Button, { className: styles__default.default.period, view: 'ghost', size: 'l', onClick: onMonthClick }, utils.monthName(valueFrom)),
+                yearSelectorValue && (React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles__default.default.yearSelectorButton, styles__default.default.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue))));
+        }
+        if (onPeriodClick) {
+            return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            React__default.default.createElement("a", { role: 'button', tabIndex: 0, onClick: onPeriodClick, className: cn__default.default(styles__default.default.period, styles__default.default.clicablePeriod) }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        }
+        return (React__default.default.createElement("span", { className: styles__default.default.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
         showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),

package/calendar/cssm/components/period-slider/index.module.css

@@ -57,7 +57,9 @@
         width: auto;
         flex-grow: 1
 }
-    } .empty {
+    } .clicablePeriod {
+    cursor: pointer;
+} .empty {
     color: var(--color-light-text-secondary);
 } .arrow {
     position: absolute;

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

@@ -75,6 +75,10 @@ type CalendarDesktopProps = {
      * Обработчик нажатия на кнопку года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/esm/Component.desktop.js

@@ -65,7 +65,7 @@ require('./desktop.css');
 
 var CalendarDesktop = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
     var _j = useState(defaultView), view = _j[0], setView = _j[1];
     var _k = useState(false), scrolled = _k[0], setScrolled = _k[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
@@ -133,7 +133,7 @@ var CalendarDesktop = forwardRef(function (_a, ref) {
             _b[styles.sixWeeks] = weeks.length === 6,
             _b[styles.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
             view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),

package/calendar/esm/Component.responsive.js

@@ -1,7 +1,7 @@
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-bf2b3ac4.js';
+export { C as CalendarResponsive } from './Component.responsive-d4193012.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -9,7 +9,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/esm';
 import '../../../../modal/esm/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-bf2b3ac4.js';
+export { a as CalendarMobile } from '../../Component.responsive-d4193012.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

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

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-bf2b3ac4";
+export * from "../../Component.responsive-d4193012";
 export {};

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

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-bf2b3ac4.js';
+export { a as CalendarMobile } from '../../Component.responsive-d4193012.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/components/period-slider/Component.d.ts

@@ -63,6 +63,10 @@ type PeriodSliderProps = {
      * Обработчик нажатия на селектор года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/esm/components/period-slider/Component.js

@@ -37,11 +37,11 @@ import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 
-var styles = {"component":"calendar__component_1czne","period":"calendar__period_1czne","empty":"calendar__empty_1czne","arrow":"calendar__arrow_1czne","full":"calendar__full_1czne","yearSelectorButton":"calendar__yearSelectorButton_1czne"};
+var styles = {"component":"calendar__component_1czne","period":"calendar__period_1czne","clicablePeriod":"calendar__clicablePeriod_1czne","empty":"calendar__empty_1czne","arrow":"calendar__arrow_1czne","full":"calendar__full_1czne","yearSelectorButton":"calendar__yearSelectorButton_1czne"};
 require('./index.css');
 
 var PeriodSlider = function (_a) {
-    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId;
     var _l = useMemo(function () {
         var _a;
         var from;
@@ -94,9 +94,17 @@ var PeriodSlider = function (_a) {
         if (!(valueFrom && valueTo)) {
             return React.createElement("span", { className: cn(styles.period, styles.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
         }
-        return periodType === 'month' && isMonthAndYearSelectable ? (React.createElement("div", null,
-            React.createElement(Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, monthName(valueFrom)),
-            yearSelectorValue && (React.createElement(Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        if (periodType === 'month' && isMonthAndYearSelectable) {
+            return (React.createElement("div", null,
+                React.createElement(Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, monthName(valueFrom)),
+                yearSelectorValue && (React.createElement(Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue))));
+        }
+        if (onPeriodClick) {
+            return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            React.createElement("a", { role: 'button', tabIndex: 0, onClick: onPeriodClick, className: cn(styles.period, styles.clicablePeriod) }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        }
+        return (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
         showArrow('prev') && (React.createElement(IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),

package/calendar/esm/components/period-slider/index.css

@@ -58,7 +58,9 @@
         width: auto;
         flex-grow: 1
 }
-    } .calendar__empty_1czne {
+    } .calendar__clicablePeriod_1czne {
+    cursor: pointer;
+} .calendar__empty_1czne {
     color: var(--color-light-text-secondary);
 } .calendar__arrow_1czne {
     position: absolute;

package/calendar/esm/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-bf2b3ac4.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-d4193012.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';

package/calendar/esm/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-bf2b3ac4.js';
+export { a as CalendarMobile } from './Component.responsive-d4193012.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-bf2b3ac4";
+export * from "./Component.responsive-d4193012";
 export {};

package/calendar/esm/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-bf2b3ac4.js';
+export { C as CalendarResponsive } from './Component.responsive-d4193012.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/index.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-var components_calendarMobile_Component = require('./Component.responsive-90e4925f.js');
+var components_calendarMobile_Component = require('./Component.responsive-c4a5d6dd.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-90e4925f.js');
+var components_calendarMobile_Component = require('./Component.responsive-c4a5d6dd.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

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

@@ -75,6 +75,10 @@ type CalendarDesktopProps = {
      * Обработчик нажатия на кнопку года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/modern/Component.desktop.js

@@ -62,7 +62,7 @@ import './components/period-slider/utils.js';
 const styles = {"component":"calendar__component_79h3s","responsive":"calendar__responsive_79h3s","period":"calendar__period_79h3s","monthYear":"calendar__monthYear_79h3s","container":"calendar__container_79h3s","sixWeeks":"calendar__sixWeeks_79h3s"};
 require('./desktop.css');
 
-const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
+const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
     const [view, setView] = useState(defaultView);
     const [scrolled, setScrolled] = useState(false);
     const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
@@ -128,7 +128,7 @@ const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorV
             [styles.sixWeeks]: weeks.length === 6,
             [styles.responsive]: responsive,
         }), "data-test-id": dataTestId },
-        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
             view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),

package/calendar/modern/Component.responsive.js

@@ -1,6 +1,6 @@
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-2882d6cd.js';
+export { C as CalendarResponsive } from './Component.responsive-3ea14aa6.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -8,7 +8,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-2882d6cd.js';
+export { a as CalendarMobile } from '../../Component.responsive-3ea14aa6.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

package/calendar/modern/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-2882d6cd";
+export * from "../../Component.responsive-3ea14aa6";
 export {};

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

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-2882d6cd.js';
+export { a as CalendarMobile } from '../../Component.responsive-3ea14aa6.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

package/calendar/modern/components/period-slider/Component.d.ts

@@ -63,6 +63,10 @@ type PeriodSliderProps = {
      * Обработчик нажатия на селектор года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/calendar/modern/components/period-slider/Component.js

@@ -37,10 +37,10 @@ import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 
-const styles = {"component":"calendar__component_1czne","period":"calendar__period_1czne","empty":"calendar__empty_1czne","arrow":"calendar__arrow_1czne","full":"calendar__full_1czne","yearSelectorButton":"calendar__yearSelectorButton_1czne"};
+const styles = {"component":"calendar__component_1czne","period":"calendar__period_1czne","clicablePeriod":"calendar__clicablePeriod_1czne","empty":"calendar__empty_1czne","arrow":"calendar__arrow_1czne","full":"calendar__full_1czne","yearSelectorButton":"calendar__yearSelectorButton_1czne"};
 require('./index.css');
 
-const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, isMonthAndYearSelectable = false, showCurrentYearSelector = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, dataTestId, }) => {
+const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, isMonthAndYearSelectable = false, showCurrentYearSelector = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, onPeriodClick, dataTestId, }) => {
     const [valueFrom, valueTo] = useMemo(() => {
         let from;
         let to;
@@ -92,9 +92,17 @@ const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter
         if (!(valueFrom && valueTo)) {
             return React.createElement("span", { className: cn(styles.period, styles.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
         }
-        return periodType === 'month' && isMonthAndYearSelectable ? (React.createElement("div", null,
-            React.createElement(Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, monthName(valueFrom)),
-            yearSelectorValue && (React.createElement(Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        if (periodType === 'month' && isMonthAndYearSelectable) {
+            return (React.createElement("div", null,
+                React.createElement(Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, monthName(valueFrom)),
+                yearSelectorValue && (React.createElement(Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue))));
+        }
+        if (onPeriodClick) {
+            return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            React.createElement("a", { role: 'button', tabIndex: 0, onClick: onPeriodClick, className: cn(styles.period, styles.clicablePeriod) }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        }
+        return (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
         showArrow('prev') && (React.createElement(IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),

package/calendar/modern/components/period-slider/index.css

@@ -58,7 +58,9 @@
         width: auto;
         flex-grow: 1
 }
-    } .calendar__empty_1czne {
+    } .calendar__clicablePeriod_1czne {
+    cursor: pointer;
+} .calendar__empty_1czne {
     color: var(--color-light-text-secondary);
 } .calendar__arrow_1czne {
     position: absolute;