@alfalab/core-components 26.5.3 → 26.9.1

package/calendar/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_1e6en {
+.calendar__component_19yt0 {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__period_1e6en {
+.calendar__period_19yt0 {
     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_1e6en {
+.calendar__period_19yt0 {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__empty_1e6en {
+.calendar__empty_19yt0 {
     color: var(--color-light-text-secondary);
 }
-.calendar__arrow_1e6en {
+.calendar__arrow_19yt0 {
     position: absolute;
     top: 4px
 }
-.calendar__arrow_1e6en:first-child {
+.calendar__arrow_19yt0:first-child {
         left: 0;
     }
-.calendar__arrow_1e6en:last-child {
+.calendar__arrow_19yt0:last-child {
         right: 0;
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {
-.calendar__full_1e6en .calendar__arrow_1e6en {
+.calendar__full_19yt0 .calendar__arrow_19yt0 {
         display: none
 }
     }
+.calendar__yearSelectorButton_19yt0 {
+    margin-left: var(--gap-xs);
+}

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

@@ -4,6 +4,7 @@ require('react');
 require('classnames');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
+require('../../../button');
 require('date-fns/isSameDay');
 require('date-fns/isToday');
 require('date-fns/eachDayOfInterval');

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

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

@@ -75,6 +75,16 @@ var formatPeriod = function (valueFrom, valueTo, periodType) {
     }
     return utils.formatDate(valueFrom) + " - " + utils.formatDate(valueTo);
 };
+var getYearSelectorValue = function (valueFrom, showCurrentYear) {
+    if (!valueFrom) {
+        return '';
+    }
+    var year = getYear__default['default'](valueFrom);
+    if (year === getYear__default['default'](new Date())) {
+        return showCurrentYear ? year : '';
+    }
+    return year;
+};
 var shiftValues = function (valueFrom, valueTo, periodType, direction) {
     var newValueFrom = valueFrom;
     var newValueTo = valueTo;
@@ -108,4 +118,5 @@ var shiftValues = function (valueFrom, valueTo, periodType, direction) {
 };
 
 exports.formatPeriod = formatPeriod;
+exports.getYearSelectorValue = getYearSelectorValue;
 exports.shiftValues = shiftValues;

package/calendar/components/select-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-62d3ead5.js');
+var tslib_es6 = require('../../tslib.es6-7f0f19e4.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../button');
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"button":"calendar__button_37e06","filled":"calendar__filled_37e06","outlined":"calendar__outlined_37e06","selected":"calendar__selected_37e06"};
+var styles = {"button":"calendar__button_7eznr","filled":"calendar__filled_7eznr","outlined":"calendar__outlined_7eznr","selected":"calendar__selected_7eznr"};
 require('./index.css');
 
 var SelectButton = React.forwardRef(function (_a, ref) {

package/calendar/components/select-button/index.css

@@ -1,4 +1,4 @@
-/* hash: f8u45 */
+/* hash: mj1jp */
 :root {
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-bg-tertiary: #e7e9eb;
@@ -43,7 +43,7 @@
 
     /* marker */
 }
-.calendar__button_37e06 {
+.calendar__button_7eznr {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -54,28 +54,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-l)
 }
-.calendar__button_37e06:not(:disabled):hover {
+.calendar__button_7eznr:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_37e06.calendar__filled_37e06 {
+.calendar__button_7eznr.calendar__filled_7eznr {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_37e06.calendar__filled_37e06:not(:disabled):hover {
+.calendar__button_7eznr.calendar__filled_7eznr:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_37e06.calendar__outlined_37e06 {
+.calendar__button_7eznr.calendar__outlined_7eznr {
         border: 1px solid var(--calendar-select-button-today-border-color);
     }
-.calendar__button_37e06.calendar__selected_37e06,
-    .calendar__button_37e06.calendar__selected_37e06:disabled {
+.calendar__button_7eznr.calendar__selected_7eznr,
+    .calendar__button_7eznr.calendar__selected_7eznr:disabled {
         background-color: var(--calendar-select-button-selected-background);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_37e06.calendar__selected_37e06:not(:disabled):hover, .calendar__button_37e06.calendar__selected_37e06:disabled:not(:disabled):hover {
+.calendar__button_7eznr.calendar__selected_7eznr:not(:disabled):hover, .calendar__button_7eznr.calendar__selected_7eznr:disabled:not(:disabled):hover {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_37e06 > * {
+.calendar__button_7eznr > * {
         flex-grow: 1;
     }

package/calendar/components/select-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-62d3ead5.js');
+require('../../tslib.es6-7f0f19e4.js');
 require('react');
 require('classnames');
 require('../../../button');

package/calendar/components/years-table/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-62d3ead5.js');
+var tslib_es6 = require('../../tslib.es6-7f0f19e4.js');
 var React = require('react');
 require('classnames');
 require('../../../button');
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isSameYear__default = /*#__PURE__*/_interopDefaultLegacy(isSameYear);
 var isThisYear__default = /*#__PURE__*/_interopDefaultLegacy(isThisYear);
 
-var styles = {"yearsTable":"calendar__yearsTable_hsjlc","inner":"calendar__inner_hsjlc","button":"calendar__button_hsjlc"};
+var styles = {"yearsTable":"calendar__yearsTable_bkmbg","inner":"calendar__inner_bkmbg","button":"calendar__button_bkmbg"};
 require('./index.css');
 
 var YearsTable = function (_a) {

package/calendar/components/years-table/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ml2y */
+/* hash: 1tvad */
 :root {
 
     /* Hard */
@@ -33,12 +33,12 @@
 
     /* marker */
 }
-.calendar__yearsTable_hsjlc {
+.calendar__yearsTable_bkmbg {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
 }
-.calendar__inner_hsjlc {
+.calendar__inner_bkmbg {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -49,32 +49,32 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__inner_hsjlc {
+.calendar__inner_bkmbg {
         left: 16px
 }
     }
-.calendar__button_hsjlc {
+.calendar__button_bkmbg {
     /* 3 колонки с равными отступами */
     width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
     margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_hsjlc:nth-child(3n) {
+.calendar__button_bkmbg:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_hsjlc {
+.calendar__button_bkmbg {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_hsjlc:nth-child(3n) {
+        .calendar__button_bkmbg:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_hsjlc:nth-child(2n) {
+        .calendar__button_bkmbg:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_hsjlc {
+.calendar__button_bkmbg {
 
         height: 36px
 }

package/calendar/components/years-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-62d3ead5.js');
+require('../../tslib.es6-7f0f19e4.js');
 require('react');
 require('classnames');
 require('../../../button');

package/calendar/cssm/Component.d.ts

@@ -15,6 +15,14 @@ type CalendarProps = {
      * Вид шапки — месяц и год или только месяц
      */
     selectorView?: SelectorView;
+    /**
+     * Возможность выбора месяца и года, если selectorView 'month-only'
+     */
+    isMonthAndYearSelectable?: boolean;
+    /**
+     * Отображать ли текущий год, если isMonthAndYearSelectable true
+     */
+    showCurrentYearSelector?: boolean;
     /**
      * Выбранная дата (timestamp)
      */

package/calendar/cssm/Component.js

@@ -81,7 +81,7 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Calendar = 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, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, isMonthAndYearSelectable = _a.isMonthAndYearSelectable, showCurrentYearSelector = _a.showCurrentYearSelector, 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, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
     var _f = React.useState(defaultView), view = _f[0], setView = _f[1];
     var _g = React.useState(false), scrolled = _g[0], setScrolled = _g[1];
     var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
@@ -150,7 +150,7 @@ var Calendar = React.forwardRef(function (_a, ref) {
     return (React__default['default'].createElement("div", tslib_es6.__assign({}, getRootProps({ ref: ref }), { className: cn__default['default'](styles__default['default'].component, className, (_b = {},
             _b[styles__default['default'].sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        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, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React__default['default'].createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default['default'].monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        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, isMonthAndYearSelectable: isMonthAndYearSelectable, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick })) : (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 })),
             view === 'months' && (React__default['default'].createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),

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

@@ -4,6 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
+var coreComponentsButton = require('../../../../button/cssm');
 require('date-fns/isSameDay');
 require('date-fns/isToday');
 require('date-fns/eachDayOfInterval');
@@ -24,7 +25,7 @@ require('date-fns/subDays');
 require('date-fns/subMonths');
 require('date-fns/format');
 require('date-fns/parse');
-require('../../utils.js');
+var utils = require('../../utils.js');
 var coreComponentsIconButton = require('../../../../icon-button/cssm');
 var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
 require('date-fns/addQuarters');
@@ -48,8 +49,8 @@ var startOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(startOfWeek);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(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.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 = React.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 ? 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 _l = React.useMemo(function () {
         var _a;
         var from;
         var to;
@@ -66,7 +67,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 = React.useMemo(function () { return components_periodSlider_utils.getYearSelectorValue(valueFrom, showCurrentYearSelector); }, [showCurrentYearSelector, valueFrom]);
     var showArrow = function (direction) {
         if (hideDisabledArrows) {
             var disabled = direction === 'prev' ? prevArrowDisabled : nextArrowDisabled;
@@ -96,9 +98,17 @@ var PeriodSlider = function (_a) {
             periodType: periodType,
         });
     };
+    var renderHeader = function () {
+        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)));
+    };
     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' })),
-        valueFrom && valueTo ? (React__default['default'].createElement("span", { className: styles__default['default'].period }, periodFormatter(valueFrom, valueTo, periodType))) : (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")),
+        renderHeader(),
         showArrow('next') && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default['default'].arrow, icon: ChevronBackMIcon.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/cssm/components/period-slider/index.js

@@ -4,6 +4,7 @@ require('react');
 require('classnames');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
+require('../../../../button/cssm');
 require('date-fns/isSameDay');
 require('date-fns/isToday');
 require('date-fns/eachDayOfInterval');

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

@@ -9,6 +9,9 @@
 
     /* Hard up */
 }
+:root {
+    --gap-xs: 8px;
+}
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
@@ -75,3 +78,6 @@
         display: none
 }
     }
+.yearSelectorButton {
+    margin-left: var(--gap-xs);
+}

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

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

@@ -75,6 +75,16 @@ var formatPeriod = function (valueFrom, valueTo, periodType) {
     }
     return utils.formatDate(valueFrom) + " - " + utils.formatDate(valueTo);
 };
+var getYearSelectorValue = function (valueFrom, showCurrentYear) {
+    if (!valueFrom) {
+        return '';
+    }
+    var year = getYear__default['default'](valueFrom);
+    if (year === getYear__default['default'](new Date())) {
+        return showCurrentYear ? year : '';
+    }
+    return year;
+};
 var shiftValues = function (valueFrom, valueTo, periodType, direction) {
     var newValueFrom = valueFrom;
     var newValueTo = valueTo;
@@ -108,4 +118,5 @@ var shiftValues = function (valueFrom, valueTo, periodType, direction) {
 };
 
 exports.formatPeriod = formatPeriod;
+exports.getYearSelectorValue = getYearSelectorValue;
 exports.shiftValues = shiftValues;

package/calendar/esm/Component.d.ts

@@ -15,6 +15,14 @@ type CalendarProps = {
      * Вид шапки — месяц и год или только месяц
      */
     selectorView?: SelectorView;
+    /**
+     * Возможность выбора месяца и года, если selectorView 'month-only'
+     */
+    isMonthAndYearSelectable?: boolean;
+    /**
+     * Отображать ли текущий год, если isMonthAndYearSelectable true
+     */
+    showCurrentYearSelector?: boolean;
     /**
      * Выбранная дата (timestamp)
      */

package/calendar/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from './tslib.es6-cd5fba57.js';
+import { _ as __assign } from './tslib.es6-d09f952d.js';
 import React, { forwardRef, useState, useMemo, useCallback } from 'react';
 import cn from 'classnames';
 import startOfDay from 'date-fns/startOfDay';
@@ -60,12 +60,12 @@ import { useCalendar } from './useCalendar.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import { MonthYearHeader } from './components/month-year-header/Component.js';
 
-var styles = {"component":"calendar__component_2x09c","container":"calendar__container_2x09c","sixWeeks":"calendar__sixWeeks_2x09c","period":"calendar__period_2x09c","monthYear":"calendar__monthYear_2x09c"};
+var styles = {"component":"calendar__component_1a3f3","container":"calendar__container_1a3f3","sixWeeks":"calendar__sixWeeks_1a3f3","period":"calendar__period_1a3f3","monthYear":"calendar__monthYear_1a3f3"};
 require('./index.css');
 
 var Calendar = 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, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, isMonthAndYearSelectable = _a.isMonthAndYearSelectable, showCurrentYearSelector = _a.showCurrentYearSelector, 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, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
     var _f = useState(defaultView), view = _f[0], setView = _f[1];
     var _g = useState(false), scrolled = _g[0], setScrolled = _g[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
@@ -134,7 +134,7 @@ var Calendar = forwardRef(function (_a, ref) {
     return (React.createElement("div", __assign({}, getRootProps({ ref: ref }), { className: cn(styles.component, className, (_b = {},
             _b[styles.sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        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, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        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, isMonthAndYearSelectable: isMonthAndYearSelectable, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick })) : (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 })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),

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

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-cd5fba57.js';
+import { _ as __assign } from '../../tslib.es6-d09f952d.js';
 import React, { useRef, useCallback } from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';
@@ -31,7 +31,7 @@ import 'date-fns/format';
 import 'date-fns/parse';
 import { getSelectionRange, WEEKDAYS } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_1o7o8","dayName":"calendar__dayName_1o7o8","day":"calendar__day_1o7o8","highlighted":"calendar__highlighted_1o7o8","range":"calendar__range_1o7o8","disabled":"calendar__disabled_1o7o8","today":"calendar__today_1o7o8","rangeComplete":"calendar__rangeComplete_1o7o8","selected":"calendar__selected_1o7o8","dayWrapper":"calendar__dayWrapper_1o7o8","rangeEnd":"calendar__rangeEnd_1o7o8","rangeStart":"calendar__rangeStart_1o7o8","transitLeft":"calendar__transitLeft_1o7o8","transitRight":"calendar__transitRight_1o7o8","left":"calendar__left_1o7o8","daysEnter":"calendar__daysEnter_1o7o8","daysEnterActive":"calendar__daysEnterActive_1o7o8","daysExit":"calendar__daysExit_1o7o8","daysExitActive":"calendar__daysExitActive_1o7o8","right":"calendar__right_1o7o8","dot":"calendar__dot_1o7o8"};
+var styles = {"daysTable":"calendar__daysTable_o4l5y","dayName":"calendar__dayName_o4l5y","day":"calendar__day_o4l5y","highlighted":"calendar__highlighted_o4l5y","range":"calendar__range_o4l5y","disabled":"calendar__disabled_o4l5y","today":"calendar__today_o4l5y","rangeComplete":"calendar__rangeComplete_o4l5y","selected":"calendar__selected_o4l5y","dayWrapper":"calendar__dayWrapper_o4l5y","rangeEnd":"calendar__rangeEnd_o4l5y","rangeStart":"calendar__rangeStart_o4l5y","transitLeft":"calendar__transitLeft_o4l5y","transitRight":"calendar__transitRight_o4l5y","left":"calendar__left_o4l5y","daysEnter":"calendar__daysEnter_o4l5y","daysEnterActive":"calendar__daysEnterActive_o4l5y","daysExit":"calendar__daysExit_o4l5y","daysExitActive":"calendar__daysExitActive_o4l5y","right":"calendar__right_o4l5y","dot":"calendar__dot_o4l5y"};
 require('./index.css');
 
 var DaysTable = function (_a) {