@alfalab/core-components 26.5.2 → 26.8.0

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

@@ -1,4 +1,4 @@
-/* hash: 1c0c7 */
+/* hash: bnbbj */
 :root {
     --color-static-graphic-solitude: #e8f2fe;
 }
@@ -65,18 +65,18 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.calendar__daysTable_17ih3 {
+.calendar__daysTable_5nu51 {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
 }
-.calendar__daysTable_17ih3 th {
+.calendar__daysTable_5nu51 th {
         padding: 0;
     }
-.calendar__daysTable_17ih3 td {
+.calendar__daysTable_5nu51 td {
         padding: var(--gap-2xs) 0 0;
     }
-.calendar__dayName_17ih3 {
+.calendar__dayName_5nu51 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -85,11 +85,11 @@
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
-.calendar__dayName_17ih3 {
+.calendar__dayName_5nu51 {
         height: 36px
 }
     }
-.calendar__day_17ih3 {
+.calendar__day_5nu51 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -107,46 +107,46 @@
     z-index: 1
 }
 @media (max-width: 374px) {
-.calendar__day_17ih3 {
+.calendar__day_5nu51 {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_17ih3.calendar__highlighted_17ih3,
-    .calendar__day_17ih3.calendar__range_17ih3.calendar__highlighted_17ih3:not(.calendar__disabled_17ih3) {
+.calendar__day_5nu51.calendar__highlighted_5nu51,
+    .calendar__day_5nu51.calendar__range_5nu51.calendar__highlighted_5nu51:not(.calendar__disabled_5nu51) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_17ih3.calendar__disabled_17ih3 {
+.calendar__day_5nu51.calendar__disabled_5nu51 {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_17ih3.calendar__today_17ih3 {
+.calendar__day_5nu51.calendar__today_5nu51 {
         font-weight: bold;
         color: var(--calendar-today-color);
     }
-.calendar__day_17ih3.calendar__rangeComplete_17ih3 {
+.calendar__day_5nu51.calendar__rangeComplete_5nu51 {
         background: var(--calendar-range-complete-background);
     }
-.calendar__day_17ih3.calendar__selected_17ih3,
-    .calendar__day_17ih3.calendar__disabled_17ih3.calendar__selected_17ih3 {
+.calendar__day_5nu51.calendar__selected_5nu51,
+    .calendar__day_5nu51.calendar__disabled_5nu51.calendar__selected_5nu51 {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     }
-.calendar__day_17ih3.calendar__selected_17ih3:hover {
+.calendar__day_5nu51.calendar__selected_5nu51:hover {
             background: var(--calendar-selected-hover-background);
         }
-.calendar__day_17ih3:focus {
+.calendar__day_5nu51:focus {
         z-index: 1;
     }
 /* RANGE */
-.calendar__dayWrapper_17ih3 {
+.calendar__dayWrapper_5nu51 {
     position: relative
 }
-.calendar__dayWrapper_17ih3:before {
+.calendar__dayWrapper_5nu51:before {
         content: '';
         display: block;
         position: absolute;
@@ -155,34 +155,34 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.calendar__range_17ih3 .calendar__day_17ih3:not(.calendar__selected_17ih3):not(.calendar__disabled_17ih3):not(.calendar__today_17ih3) {
+.calendar__range_5nu51 .calendar__day_5nu51:not(.calendar__selected_5nu51):not(.calendar__disabled_5nu51):not(.calendar__today_5nu51) {
         color: var(--calendar-range-color);
     }
-.calendar__range_17ih3:before {
+.calendar__range_5nu51:before {
         background: var(--calendar-range-background);
     }
-.calendar__rangeEnd_17ih3:before {
+.calendar__rangeEnd_5nu51:before {
         border-bottom-right-radius: 50%;
         border-top-right-radius: 50%;
         width: var(--calendar-day-size);
     }
-.calendar__rangeEnd_17ih3:after {
+.calendar__rangeEnd_5nu51:after {
         opacity: 0;
     }
-.calendar__rangeStart_17ih3:before {
+.calendar__rangeStart_5nu51:before {
         left: auto;
         right: 0;
         border-bottom-left-radius: 50%;
         border-top-left-radius: 50%;
         width: var(--calendar-day-size);
     }
-.calendar__rangeStart_17ih3:after {
+.calendar__rangeStart_5nu51:after {
         opacity: 0;
     }
-.calendar__rangeComplete_17ih3:before {
+.calendar__rangeComplete_5nu51:before {
         background: var(--calendar-range-complete-background);
     }
-.calendar__transitLeft_17ih3:after, .calendar__transitRight_17ih3:after {
+.calendar__transitLeft_5nu51:after, .calendar__transitRight_5nu51:after {
         content: '';
         position: absolute;
         display: block;
@@ -191,7 +191,7 @@
         bottom: 0;
         pointer-events: none;
     }
-.calendar__transitLeft_17ih3:after {
+.calendar__transitLeft_5nu51:after {
         right: 100%;
         background: linear-gradient(
             270deg,
@@ -199,13 +199,13 @@
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__transitLeft_17ih3:first-child:before {
+.calendar__transitLeft_5nu51:first-child:before {
             opacity: 0;
         }
-.calendar__transitLeft_17ih3:first-child:after {
+.calendar__transitLeft_5nu51:first-child:after {
             right: 0;
         }
-.calendar__transitRight_17ih3:after {
+.calendar__transitRight_5nu51:after {
         left: 100%;
         background: linear-gradient(
             270deg,
@@ -213,20 +213,20 @@
             var(--calendar-range-background) 100%
         );
     }
-.calendar__transitRight_17ih3:last-child:before {
+.calendar__transitRight_5nu51:last-child:before {
             opacity: 0;
         }
-.calendar__transitRight_17ih3:last-child:after {
+.calendar__transitRight_5nu51:last-child:after {
             left: 0;
         }
-.calendar__rangeComplete_17ih3.calendar__transitLeft_17ih3:after {
+.calendar__rangeComplete_5nu51.calendar__transitLeft_5nu51:after {
         background: linear-gradient(
             270deg,
             var(--calendar-range-complete-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__rangeComplete_17ih3.calendar__transitRight_17ih3:after {
+.calendar__rangeComplete_5nu51.calendar__transitRight_5nu51:after {
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
@@ -234,31 +234,31 @@
         );
     }
 /* SLIDE ANIMATION */
-.calendar__left_17ih3 .calendar__daysEnter_17ih3 {
+.calendar__left_5nu51 .calendar__daysEnter_5nu51 {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_17ih3 .calendar__daysEnterActive_17ih3 {
+.calendar__left_5nu51 .calendar__daysEnterActive_5nu51 {
         transform: translateX(0%);
     }
-.calendar__left_17ih3 .calendar__daysExit_17ih3 {
+.calendar__left_5nu51 .calendar__daysExit_5nu51 {
         transform: translateX(0%);
     }
-.calendar__left_17ih3 .calendar__daysExitActive_17ih3 {
+.calendar__left_5nu51 .calendar__daysExitActive_5nu51 {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_17ih3 .calendar__daysEnter_17ih3 {
+.calendar__right_5nu51 .calendar__daysEnter_5nu51 {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_17ih3 .calendar__daysEnterActive_17ih3 {
+.calendar__right_5nu51 .calendar__daysEnterActive_5nu51 {
         transform: translateX(0%);
     }
-.calendar__right_17ih3 .calendar__daysExit_17ih3 {
+.calendar__right_5nu51 .calendar__daysExit_5nu51 {
         transform: translateX(0%);
     }
-.calendar__right_17ih3 .calendar__daysExitActive_17ih3 {
+.calendar__right_5nu51 .calendar__daysExitActive_5nu51 {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__dot_17ih3 {
+.calendar__dot_5nu51 {
     display: block;
     position: absolute;
     bottom: 4px;
@@ -269,25 +269,25 @@
     border-radius: var(--border-radius-circle);
     background: var(--calendar-marker-background);
 }
-.calendar__selected_17ih3 .calendar__dot_17ih3 {
+.calendar__selected_5nu51 .calendar__dot_5nu51 {
     background: var(--calendar-marker-selected-background);
 }
-.calendar__daysEnter_17ih3 {
+.calendar__daysEnter_5nu51 {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_17ih3 {
+.calendar__daysEnterActive_5nu51 {
     opacity: 1;
 }
-.calendar__daysExit_17ih3 {
+.calendar__daysExit_5nu51 {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_17ih3 {
+.calendar__daysExitActive_5nu51 {
     opacity: 0;
 }
-.calendar__daysEnterActive_17ih3,
-.calendar__daysExitActive_17ih3 {
+.calendar__daysEnterActive_5nu51,
+.calendar__daysExitActive_5nu51 {
     transition: opacity 300ms, transform 300ms;
 }

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-ddb4d839.js';
+import '../../tslib.es6-62d5d25d.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

package/calendar/esm/components/header/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_1q7sw","withShadow":"calendar__withShadow_1q7sw"};
+var styles = {"header":"calendar__header_btcea","withShadow":"calendar__withShadow_btcea"};
 require('./index.css');
 
 var Header = function (_a) {

package/calendar/esm/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1mpxt */
+/* hash: 1u059 */
 :root {
     --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__header_1q7sw {
+.calendar__header_btcea {
     width: 100%;
     box-sizing: border-box;
     padding: var(--gap-m) 0 var(--gap-s);
@@ -40,6 +40,6 @@
     display: flex;
     justify-content: center;
 }
-.calendar__withShadow_1q7sw {
+.calendar__withShadow_btcea {
     box-shadow: var(--shadow-s);
 }

package/calendar/esm/components/month-year-header/Component.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-ddb4d839.js';
+import '../../tslib.es6-62d5d25d.js';
 import React from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';
@@ -27,7 +27,7 @@ import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 
-var styles = {"component":"calendar__component_1bxkm","button":"calendar__button_1bxkm","month":"calendar__month_1bxkm","year":"calendar__year_1bxkm","buttonContent":"calendar__buttonContent_1bxkm","upDownIcon":"calendar__upDownIcon_1bxkm"};
+var styles = {"component":"calendar__component_1q7re","button":"calendar__button_1q7re","month":"calendar__month_1q7re","year":"calendar__year_1q7re","buttonContent":"calendar__buttonContent_1q7re","upDownIcon":"calendar__upDownIcon_1q7re"};
 require('./index.css');
 
 var MonthYearHeader = function (_a) {

package/calendar/esm/components/month-year-header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ppnl */
+/* hash: 1ep9t */
 :root {
 
     /* Hard */
@@ -33,44 +33,44 @@
 
     /* marker */
 }
-.calendar__component_1bxkm {
+.calendar__component_1q7re {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__button_1bxkm {
+.calendar__button_1q7re {
     border-radius: var(--border-radius-s);
 }
-.calendar__month_1bxkm {
+.calendar__month_1q7re {
     flex-basis: 65%
 }
 @media (max-width: 374px) {
-.calendar__month_1bxkm {
+.calendar__month_1q7re {
         flex-grow: 1
 }
     }
-.calendar__year_1bxkm {
+.calendar__year_1q7re {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__year_1bxkm {
+.calendar__year_1q7re {
         width: 90px
 }
     }
-.calendar__buttonContent_1bxkm {
+.calendar__buttonContent_1q7re {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
-.calendar__upDownIcon_1bxkm {
+.calendar__upDownIcon_1q7re {
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__upDownIcon_1bxkm {
+.calendar__upDownIcon_1q7re {
         margin-left: auto
 }
     }

package/calendar/esm/components/month-year-header/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-ddb4d839.js';
+import '../../tslib.es6-62d5d25d.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

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

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-ddb4d839.js';
+import { _ as __assign } from '../../tslib.es6-62d5d25d.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import 'date-fns/startOfDay';
@@ -28,7 +28,7 @@ import isSameMonth from 'date-fns/isSameMonth';
 import isThisMonth from 'date-fns/isThisMonth';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_szq4z","button":"calendar__button_szq4z"};
+var styles = {"monthsTable":"calendar__monthsTable_1q678","button":"calendar__button_1q678"};
 require('./index.css');
 
 var MonthsTable = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 1t4fq */
+/* hash: sreuj */
 :root {
 
     /* Hard */
@@ -33,38 +33,38 @@
 
     /* marker */
 }
-.calendar__monthsTable_szq4z {
+.calendar__monthsTable_1q678 {
     display: flex;
     flex-wrap: wrap;
     width: var(--calendar-inner-width);
     justify-content: flex-start
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_szq4z {
+.calendar__monthsTable_1q678 {
         width: var(--calendar-mobile-inner-width)
 }
     }
-.calendar__button_szq4z {
+.calendar__button_1q678 {
     width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
     margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_szq4z:nth-child(3n) {
+.calendar__button_1q678:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_szq4z {
+.calendar__button_1q678 {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_szq4z:nth-child(3n) {
+        .calendar__button_1q678:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_szq4z:nth-child(2n) {
+        .calendar__button_1q678:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_szq4z {
+.calendar__button_1q678 {
 
         height: 36px
 }

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-ddb4d839.js';
+import '../../tslib.es6-62d5d25d.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

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

@@ -25,6 +25,14 @@ type PeriodSliderProps = {
      * Скрывает заблокированные кнопки
      */
     hideDisabledArrows?: boolean;
+    /**
+     * Возможность выбора месяца и года, если periodType 'month'
+     */
+    isMonthAndYearSelectable?: boolean;
+    /**
+     * Отображать ли текущий год, если isMonthAndYearSelectable true
+     */
+    showCurrentYearSelector?: boolean;
     /**
      * Функция для форматирование выбранного периода
      */
@@ -47,6 +55,14 @@ type PeriodSliderProps = {
         valueTo: Date;
         periodType: PeriodType;
     }) => void;
+    /**
+     * Обработчик нажатия на селектор месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на селектор года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

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

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
+import { Button } from '../../../../button/esm';
 import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/eachDayOfInterval';
@@ -22,7 +23,7 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import 'date-fns/format';
 import 'date-fns/parse';
-import '../../utils.js';
+import { monthName } from '../../utils.js';
 import { IconButton } from '../../../../icon-button/esm';
 import { ChevronBackMIcon } from '@alfalab/icons-glyph/ChevronBackMIcon';
 import 'date-fns/addQuarters';
@@ -34,14 +35,14 @@ import 'date-fns/getQuarter';
 import 'date-fns/getYear';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
-import { formatPeriod, shiftValues } from './utils.js';
+import { getYearSelectorValue, shiftValues, formatPeriod } from './utils.js';
 
-var styles = {"component":"calendar__component_f2srf","period":"calendar__period_f2srf","empty":"calendar__empty_f2srf","arrow":"calendar__arrow_f2srf","full":"calendar__full_f2srf"};
+var styles = {"component":"calendar__component_1unom","period":"calendar__period_1unom","empty":"calendar__empty_1unom","arrow":"calendar__arrow_1unom","full":"calendar__full_1unom","yearSelectorButton":"calendar__yearSelectorButton_1unom"};
 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.onPrevArrowClick, onPrevArrowClick = _g === void 0 ? function () { return null; } : _g, _h = _a.onNextArrowClick, onNextArrowClick = _h === void 0 ? function () { return null; } : _h, dataTestId = _a.dataTestId;
-    var _j = useMemo(function () {
+    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 _l = useMemo(function () {
         var _a;
         var from;
         var to;
@@ -58,7 +59,8 @@ var PeriodSlider = function (_a) {
             }
         }
         return [from, to];
-    }, [periodType, value]), valueFrom = _j[0], valueTo = _j[1];
+    }, [periodType, value]), valueFrom = _l[0], valueTo = _l[1];
+    var yearSelectorValue = useMemo(function () { return getYearSelectorValue(valueFrom, showCurrentYearSelector); }, [showCurrentYearSelector, valueFrom]);
     var showArrow = function (direction) {
         if (hideDisabledArrows) {
             var disabled = direction === 'prev' ? prevArrowDisabled : nextArrowDisabled;
@@ -88,9 +90,17 @@ var PeriodSlider = function (_a) {
             periodType: periodType,
         });
     };
+    var renderHeader = function () {
+        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)));
+    };
     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' })),
-        valueFrom && valueTo ? (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType))) : (React.createElement("span", { className: cn(styles.period, styles.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434")),
+        renderHeader(),
         showArrow('next') && (React.createElement(IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
 };
 

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

@@ -1,4 +1,4 @@
-/* hash: 6pspg */
+/* hash: rl9bt */
 :root {
     --color-light-text-secondary: #546272;
 }
@@ -10,6 +10,9 @@
 
     /* Hard up */
 }
+:root {
+    --gap-xs: 8px;
+}
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
@@ -37,14 +40,14 @@
 
     /* marker */
 }
-.calendar__component_f2srf {
+.calendar__component_1unom {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__period_f2srf {
+.calendar__period_1unom {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
@@ -52,27 +55,30 @@
     text-align: center
 }
 @media (max-width: 374px) {
-.calendar__period_f2srf {
+.calendar__period_1unom {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__empty_f2srf {
+.calendar__empty_1unom {
     color: var(--color-light-text-secondary);
 }
-.calendar__arrow_f2srf {
+.calendar__arrow_1unom {
     position: absolute;
     top: 4px
 }
-.calendar__arrow_f2srf:first-child {
+.calendar__arrow_1unom:first-child {
         left: 0;
     }
-.calendar__arrow_f2srf:last-child {
+.calendar__arrow_1unom:last-child {
         right: 0;
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {
-.calendar__full_f2srf .calendar__arrow_f2srf {
+.calendar__full_1unom .calendar__arrow_1unom {
         display: none
 }
     }
+.calendar__yearSelectorButton_1unom {
+    margin-left: var(--gap-xs);
+}

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

@@ -2,6 +2,7 @@ import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
+import '../../../../button/esm';
 import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/eachDayOfInterval';

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

@@ -1,7 +1,8 @@
 import { PeriodType } from "./index";
 declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
+declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
 declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: "prev" | "next") => {
     valueFrom: Date;
     valueTo: Date;
 };
-export { formatPeriod, shiftValues };
+export { formatPeriod, getYearSelectorValue, shiftValues };