@alfalab/core-components 23.3.0 → 23.6.0-beta.0

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

@@ -0,0 +1,68 @@
+import { FC, MouseEvent } from 'react';
+type PeriodType = 'range' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+type PeriodSliderProps = {
+    /**
+     * Активная дата или период
+     */
+    value: Date | [Date, Date];
+    /**
+     * Вид шапки — с кнопками выбора года и месяца или только период
+     */
+    view?: 'full' | 'period';
+    /**
+     * Тип периода
+     */
+    periodType?: PeriodType;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Отключает кнопку назад
+     */
+    prevArrowDisabled?: boolean;
+    /**
+     * Отключает кнопку вперед
+     */
+    nextArrowDisabled?: boolean;
+    /**
+     * Скрывает заблокированные кнопки
+     */
+    hideDisabledArrows?: boolean;
+    /**
+     * Функция для форматирование выбранного периода
+     */
+    periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
+    /**
+     * Обработчик нажатия кнопки переключения на назад
+     */
+    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия кнопки переключения на вперед
+     */
+    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const PeriodSlider: FC<PeriodSliderProps>;
+export { PeriodType, PeriodSliderProps, PeriodSlider };

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

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-cf13d2c0.js');
+var React = require('react');
+var cn = require('classnames');
+var dateFns = require('date-fns');
+var coreComponentsButton = require('../../../button');
+var utils = require('../../utils.js');
+var components_selectButton_Component = require('../select-button/Component.js');
+var components_periodSlider_utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"calendar__component_1ix6u","month":"calendar__month_1ix6u","year":"calendar__year_1ix6u","buttonContent":"calendar__buttonContent_1ix6u","period":"calendar__period_1ix6u","upDownIcon":"calendar__upDownIcon_1ix6u","arrow":"calendar__arrow_1ix6u","full":"calendar__full_1ix6u"};
+require('./index.css');
+
+var PeriodSlider = function (_a) {
+    var _b, _c;
+    var value = _a.value, _d = _a.view, view = _d === void 0 ? 'month-only' : _d, _e = _a.periodType, periodType = _e === void 0 ? 'month' : _e, className = _a.className, _f = _a.periodFormatter, periodFormatter = _f === void 0 ? components_periodSlider_utils.formatPeriod : _f, _g = _a.prevArrowDisabled, prevArrowDisabled = _g === void 0 ? false : _g, _h = _a.nextArrowDisabled, nextArrowDisabled = _h === void 0 ? false : _h, _j = _a.hideDisabledArrows, hideDisabledArrows = _j === void 0 ? false : _j, _k = _a.onPrevArrowClick, onPrevArrowClick = _k === void 0 ? function () { return null; } : _k, _l = _a.onNextArrowClick, onNextArrowClick = _l === void 0 ? function () { return null; } : _l, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var valueFrom;
+    var valueTo;
+    if (Array.isArray(value)) {
+        valueFrom = value[0], valueTo = value[1];
+    }
+    else {
+        _b = [value, value], valueFrom = _b[0], valueTo = _b[1];
+        if (periodType === 'week') {
+            valueFrom = dateFns.startOfWeek(valueFrom, { weekStartsOn: 1 });
+            valueTo = dateFns.endOfWeek(valueFrom, { weekStartsOn: 1 });
+        }
+    }
+    var month = utils.monthName(valueFrom);
+    var year = valueFrom.getFullYear().toString();
+    var showPrevButton = !(hideDisabledArrows && prevArrowDisabled);
+    var showNextButton = !(hideDisabledArrows && nextArrowDisabled);
+    var handleNextArrowClick = function (event) {
+        var newValues = components_periodSlider_utils.shiftValues(valueFrom, valueTo, periodType, 'next');
+        onNextArrowClick(event, {
+            value: newValues.valueFrom,
+            valueFrom: newValues.valueFrom,
+            valueTo: newValues.valueTo,
+            periodType: periodType,
+        });
+    };
+    var handlePrevArrowClick = function (event) {
+        var newValues = components_periodSlider_utils.shiftValues(valueFrom, valueTo, periodType, 'prev');
+        onPrevArrowClick(event, {
+            value: newValues.valueFrom,
+            valueFrom: newValues.valueFrom,
+            valueTo: newValues.valueTo,
+            periodType: periodType,
+        });
+    };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_c = {},
+            _c[styles.full] = view === 'full',
+            _c)), "aria-live": 'polite', "data-test-id": dataTestId },
+        showPrevButton && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles.arrow, onClick: handlePrevArrowClick, disabled: prevArrowDisabled, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        view === 'full' ? (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: styles.month, onClick: onMonthClick },
+                React__default['default'].createElement("span", { className: styles.buttonContent },
+                    month,
+                    React__default['default'].createElement("span", { className: styles.upDownIcon }))),
+            React__default['default'].createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: styles.year, onClick: onYearClick },
+                React__default['default'].createElement("span", { className: styles.buttonContent },
+                    year,
+                    React__default['default'].createElement("span", { className: styles.upDownIcon }))))) : (React__default['default'].createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType))),
+        showNextButton && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles.arrow, onClick: handleNextArrowClick, disabled: nextArrowDisabled, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+};
+
+exports.PeriodSlider = PeriodSlider;

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

@@ -0,0 +1,120 @@
+/* hash: hezgk */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
+    --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
+    --calendar-month-only-header-font-family: var(--font-family-system);
+    --calendar-month-only-header-font-size: 16px;
+    --calendar-month-only-header-font-weight: 400;
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar__component_1ix6u {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.calendar__month_1ix6u {
+    width: 131px
+}
+@media (max-width: 374px) {
+.calendar__month_1ix6u {
+        width: auto;
+        flex-grow: 1
+}
+    }
+.calendar__year_1ix6u {
+    width: 105px;
+
+    margin-left: var(--gap-xs)
+}
+@media (max-width: 374px) {
+.calendar__year_1ix6u {
+        width: 90px
+}
+    }
+.calendar__buttonContent_1ix6u {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.calendar__period_1ix6u {
+    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);
+    line-height: 24px;
+    text-align: center
+}
+@media (max-width: 374px) {
+.calendar__period_1ix6u {
+        width: auto;
+        flex-grow: 1
+}
+    }
+.calendar__upDownIcon_1ix6u {
+    display: block;
+    background: var(--calendar-select-icon-background);
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-xs)
+}
+@media (max-width: 374px) {
+.calendar__upDownIcon_1ix6u {
+        margin-left: auto
+}
+    }
+.calendar__arrow_1ix6u {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 8px;
+    background: var(--calendar-arrow-background)
+}
+.calendar__arrow_1ix6u:disabled {
+        opacity: 0.3;
+    }
+.calendar__arrow_1ix6u:first-child {
+        left: 0;
+    }
+.calendar__arrow_1ix6u:last-child {
+        right: 0;
+        transform: rotateY(180deg);
+    }
+@media (max-width: 374px) {
+.calendar__full_1ix6u .calendar__arrow_1ix6u {
+        display: none
+}
+    }

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

@@ -0,0 +1 @@
+export * from "./Component";

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

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-cf13d2c0.js');
+require('react');
+require('classnames');
+require('date-fns');
+require('../../../button');
+require('../../utils.js');
+require('../select-button/Component.js');
+require('./utils.js');
+var components_periodSlider_Component = require('./Component.js');
+
+
+
+exports.PeriodSlider = components_periodSlider_Component.PeriodSlider;

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

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

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

@@ -0,0 +1,61 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dateFns = require('date-fns');
+var utils = require('../../utils.js');
+
+var formatPeriod = function (valueFrom, valueTo, periodType) {
+    if (periodType === 'day') {
+        if (dateFns.isToday(valueFrom))
+            return 'Сегодня';
+        if (dateFns.isYesterday(valueFrom))
+            return 'Вчера';
+        return utils.formatDate(valueFrom);
+    }
+    if (periodType === 'month') {
+        var year = dateFns.getYear(valueFrom);
+        return year === dateFns.getYear(new Date())
+            ? utils.monthName(valueFrom)
+            : utils.monthName(valueFrom) + " " + dateFns.getYear(valueFrom);
+    }
+    if (periodType === 'quarter') {
+        return dateFns.getQuarter(valueFrom) + " \u043A\u0432\u0430\u0440\u0442\u0430\u043B " + dateFns.getYear(valueFrom);
+    }
+    if (periodType === 'year') {
+        return dateFns.getYear(valueFrom) + " \u0433\u043E\u0434";
+    }
+    return utils.formatDate(valueFrom) + " - " + utils.formatDate(valueTo);
+};
+var shiftValues = function (valueFrom, valueTo, periodType, direction) {
+    var newValueFrom = valueFrom;
+    var newValueTo = valueTo;
+    var amount = direction === 'next' ? 1 : -1;
+    switch (periodType) {
+        case 'day':
+            newValueFrom = dateFns.addDays(valueFrom, amount);
+            newValueTo = dateFns.addDays(valueFrom, amount);
+            break;
+        case 'week':
+            newValueFrom = dateFns.startOfWeek(dateFns.addWeeks(valueFrom, amount), { weekStartsOn: 1 });
+            newValueTo = dateFns.endOfWeek(newValueFrom, { weekStartsOn: 1 });
+            break;
+        case 'month':
+            newValueFrom = dateFns.startOfMonth(dateFns.addMonths(valueFrom, amount));
+            newValueTo = dateFns.endOfMonth(newValueFrom);
+            break;
+        case 'quarter':
+            newValueFrom = dateFns.startOfQuarter(dateFns.addQuarters(valueFrom, amount));
+            newValueTo = dateFns.endOfQuarter(newValueFrom);
+            break;
+        case 'year':
+            newValueFrom = dateFns.startOfYear(dateFns.addYears(valueFrom, amount));
+            newValueTo = dateFns.endOfYear(newValueFrom);
+            break;
+    }
+    return {
+        valueFrom: newValueFrom,
+        valueTo: newValueTo,
+    };
+};
+
+exports.formatPeriod = formatPeriod;
+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-1f1b8ecf.js');
+var tslib_es6 = require('../../tslib.es6-cf13d2c0.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_untd5","filled":"calendar__filled_untd5","outlined":"calendar__outlined_untd5","selected":"calendar__selected_untd5"};
+var styles = {"button":"calendar__button_1y86z","filled":"calendar__filled_1y86z","outlined":"calendar__outlined_1y86z","selected":"calendar__selected_1y86z"};
 require('./index.css');
 
 var SelectButton = React.forwardRef(function (_a, ref) {

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

@@ -1,4 +1,4 @@
-/* hash: 1v69l */
+/* hash: 1t0fy */
 :root {
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-bg-tertiary: #e7e9eb;
@@ -42,7 +42,7 @@
 
     /* marker */
 }
-.calendar__button_untd5 {
+.calendar__button_1y86z {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -53,28 +53,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-s)
 }
-.calendar__button_untd5:not(:disabled):hover {
+.calendar__button_1y86z:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_untd5.calendar__filled_untd5 {
+.calendar__button_1y86z.calendar__filled_1y86z {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_untd5.calendar__filled_untd5:not(:disabled):hover {
+.calendar__button_1y86z.calendar__filled_1y86z:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_untd5.calendar__outlined_untd5 {
+.calendar__button_1y86z.calendar__outlined_1y86z {
         border: 1px solid var(--calendar-selector-button-outline-border-color);
     }
-.calendar__button_untd5.calendar__selected_untd5,
-    .calendar__button_untd5.calendar__selected_untd5:disabled {
+.calendar__button_1y86z.calendar__selected_1y86z,
+    .calendar__button_1y86z.calendar__selected_1y86z:disabled {
         background-color: var(--color-light-bg-primary-inverted);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_untd5.calendar__selected_untd5:not(:disabled):hover, .calendar__button_untd5.calendar__selected_untd5:disabled:not(:disabled):hover {
+.calendar__button_1y86z.calendar__selected_1y86z:not(:disabled):hover, .calendar__button_1y86z.calendar__selected_1y86z:disabled:not(:disabled):hover {
             background-color: var(--color-light-bg-primary-inverted);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_untd5 > * {
+.calendar__button_1y86z > * {
         flex-grow: 1;
     }

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-1f1b8ecf.js');
+require('../../tslib.es6-cf13d2c0.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-1f1b8ecf.js');
+var tslib_es6 = require('../../tslib.es6-cf13d2c0.js');
 var React = require('react');
 require('classnames');
 var dateFns = require('date-fns');
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"yearsTable":"calendar__yearsTable_t55gz","inner":"calendar__inner_t55gz","button":"calendar__button_t55gz"};
+var styles = {"yearsTable":"calendar__yearsTable_1olvw","inner":"calendar__inner_1olvw","button":"calendar__button_1olvw"};
 require('./index.css');
 
 var YearsTable = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 13hed */
+/* hash: 11bkq */
 :root {
 
     /* Hard */
@@ -33,14 +33,14 @@
 
     /* marker */
 }
-.calendar__yearsTable_t55gz {
+.calendar__yearsTable_1olvw {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
     margin-bottom: var(--gap-m-neg);
     padding-top: 6px;
 }
-.calendar__inner_t55gz {
+.calendar__inner_1olvw {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -50,15 +50,15 @@
     left: 13px;
     overflow: hidden;
 }
-.calendar__button_t55gz {
+.calendar__button_1olvw {
     width: var(--calendar-selector-button-width);
     margin: 0 3px var(--gap-xs)
 }
-.calendar__button_t55gz:nth-last-child(-n + 3) {
+.calendar__button_1olvw:nth-last-child(-n + 3) {
         margin-bottom: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_t55gz {
+.calendar__button_1olvw {
         margin: 0 3px var(--gap-2xs);
 
         /* ширина блока, 16 боковые отступы, 2*6px между кнопками */

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-1f1b8ecf.js');
+require('../../tslib.es6-cf13d2c0.js');
 require('react');
 require('classnames');
 require('date-fns');

package/calendar/cssm/Component.js

@@ -5,19 +5,22 @@ var React = require('react');
 var cn = require('classnames');
 var dateFns = require('date-fns');
 var hooks = require('@alfalab/hooks');
-require('../../button/cssm');
-require('./components/select-button/index.module.css');
-require('./components/select-button/Component.js');
 require('./components/header/index.module.css');
 var components_header_Component = require('./components/header/Component.js');
+require('../../button/cssm');
 require('react-transition-group');
 var utils = require('./utils.js');
 require('./components/days-table/index.module.css');
 var components_daysTable_Component = require('./components/days-table/Component.js');
+require('./components/select-button/index.module.css');
+require('./components/select-button/Component.js');
 require('./components/months-table/index.module.css');
 var components_monthsTable_Component = require('./components/months-table/Component.js');
 require('./components/years-table/index.module.css');
 var components_yearsTable_Component = require('./components/years-table/Component.js');
+require('./components/period-slider/utils.js');
+require('./components/period-slider/index.module.css');
+var components_periodSlider_Component = require('./components/period-slider/Component.js');
 require('react-merge-refs');
 var useCalendar = require('./useCalendar.js');
 var styles = require('./index.module.css');
@@ -93,7 +96,8 @@ 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, { month: utils.monthName(activeMonth), year: activeMonth.getFullYear().toString(), prevArrowVisible: canSetPrevMonth, nextArrowVisible: canSetNextMonth, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick, view: selectorView, withShadow: scrolled }),
+        React__default['default'].createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled },
+            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, onMonthClick: handleMonthClick, onYearClick: handleYearClick, view: selectorView === 'month-only' ? 'period' : 'full' })),
         React__default['default'].createElement("div", { className: styles__default['default'].container },
             view === 'days' && (React__default['default'].createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted })),
             view === 'months' && (React__default['default'].createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),

package/calendar/cssm/components/header/Component.d.ts

@@ -1,14 +1,6 @@
-import { FC, MouseEvent } from 'react';
+import { FC } from 'react';
 import { SelectorView } from "../../typings";
 type HeaderProps = {
-    /**
-     * Выбранный месяц
-     */
-    month?: string;
-    /**
-     * Выбранный год
-     */
-    year?: string;
     /**
      * Вид шапки — месяц и год или только месяц
      */
@@ -17,30 +9,6 @@ type HeaderProps = {
      * Отображать тень? (нужна при прокрутке)
      */
     withShadow?: boolean;
-    /**
-     * Показывать кнопку переключения на пред. месяц?
-     */
-    prevArrowVisible?: boolean;
-    /**
-     * Показывать кнопку переключения на след. месяц?
-     */
-    nextArrowVisible?: boolean;
-    /**
-     * Обработчик нажатия кнопки переключения на пред. месяц
-     */
-    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия кнопки переключения на след. месяц
-     */
-    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку месяца
-     */
-    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик нажатия на кнопку года
-     */
-    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

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

@@ -1,11 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsButton = require('../../../../button/cssm');
-require('../select-button/index.module.css');
-var components_selectButton_Component = require('../select-button/Component.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,23 +12,11 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Header = function (_a) {
     var _b;
-    var month = _a.month, year = _a.year, _c = _a.view, view = _c === void 0 ? 'full' : _c, withShadow = _a.withShadow, _d = _a.prevArrowVisible, prevArrowVisible = _d === void 0 ? true : _d, _e = _a.nextArrowVisible, nextArrowVisible = _e === void 0 ? true : _e, onPrevArrowClick = _a.onPrevArrowClick, onNextArrowClick = _a.onNextArrowClick, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick;
+    var _c = _a.view, view = _c === void 0 ? 'full' : _c, withShadow = _a.withShadow, children = _a.children;
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].header, (_b = {},
             _b[styles__default['default'].monthOnly] = view === 'month-only',
             _b[styles__default['default'].withShadow] = withShadow,
-            _b)), "aria-live": 'polite' },
-        React__default['default'].createElement("div", { className: styles__default['default'].inner },
-            prevArrowVisible && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles__default['default'].arrow, onClick: onPrevArrowClick, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446' })),
-            view === 'full' ? (React__default['default'].createElement(React__default['default'].Fragment, null,
-                React__default['default'].createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn__default['default'](styles__default['default'].button, styles__default['default'].month), onClick: onMonthClick },
-                    React__default['default'].createElement("span", { className: styles__default['default'].buttonContent },
-                        month,
-                        React__default['default'].createElement("span", { className: styles__default['default'].upDownIcon }))),
-                React__default['default'].createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn__default['default'](styles__default['default'].button, styles__default['default'].year), onClick: onYearClick },
-                    React__default['default'].createElement("span", { className: styles__default['default'].buttonContent },
-                        year,
-                        React__default['default'].createElement("span", { className: styles__default['default'].upDownIcon }))))) : (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].button, styles__default['default'].month) }, month)),
-            nextArrowVisible && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles__default['default'].arrow, onClick: onNextArrowClick, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446' })))));
+            _b)), "aria-live": 'polite' }, children));
 };
 
 exports.Header = Header;

package/calendar/cssm/components/header/index.js

@@ -1,11 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
-require('../../../../button/cssm');
-require('../select-button/index.module.css');
-require('../select-button/Component.js');
 require('./index.module.css');
 var components_header_Component = require('./Component.js');