@alfalab/core-components 20.2.0 → 20.4.0

package/calendar/cssm/Component.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import React from 'react';
+import { View, SelectorView } from "./typings";
+type CalendarProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид по умолчанию (выбор дней, месяцев, лет)
+     */
+    defaultView?: View;
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    selectorView?: SelectorView;
+    /**
+     * Выбранная дата (timestamp)
+     */
+    value?: number;
+    /**
+     * Открытый месяц (timestamp)
+     */
+    month?: number;
+    /**
+     * Месяц, открытый по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Начало выделенного периода (timestamp)
+     */
+    selectedFrom?: number;
+    /**
+     * Конец выделенного периода (timestamp)
+     */
+    selectedTo?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+export { CalendarProps, Calendar };

package/calendar/cssm/Component.js

@@ -0,0 +1,103 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-ce870b46.js');
+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('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/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('react-merge-refs');
+var useCalendar = require('./useCalendar.js');
+var styles = require('./index.module.css');
+
+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__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, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, 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]);
+    var defaultMonth = React.useMemo(function () {
+        return dateFns.startOfMonth(selected ||
+            utils.limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    var month = React.useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [
+        monthTimestamp,
+    ]);
+    var minDate = React.useMemo(function () { return (minDateTimestamp ? dateFns.startOfDay(minDateTimestamp) : undefined); }, [minDateTimestamp]);
+    var maxDate = React.useMemo(function () { return (maxDateTimestamp ? dateFns.endOfDay(maxDateTimestamp) : undefined); }, [
+        maxDateTimestamp,
+    ]);
+    var _h = useCalendar.useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: view,
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        onChange: onChange,
+        onMonthChange: onMonthChange,
+    }), activeMonth = _h.activeMonth, weeks = _h.weeks, months = _h.months, years = _h.years, canSetPrevMonth = _h.canSetPrevMonth, canSetNextMonth = _h.canSetNextMonth, setMonthByDate = _h.setMonthByDate, setPrevMonth = _h.setPrevMonth, setNextMonth = _h.setNextMonth, highlighted = _h.highlighted, getDayProps = _h.getDayProps, getMonthProps = _h.getMonthProps, getYearProps = _h.getYearProps, getRootProps = _h.getRootProps;
+    var toggleView = React.useCallback(function (newView) {
+        setView(view === newView ? 'days' : newView);
+    }, [view]);
+    var handleScroll = React.useCallback(function (scrollTop) {
+        setScrolled(scrollTop > 0);
+    }, []);
+    var handlePrevArrowClick = React.useCallback(function () {
+        // TODO: Что должны делать стрелки при view !== days?
+        setPrevMonth();
+    }, [setPrevMonth]);
+    var handleNextArrowClick = React.useCallback(function () {
+        setNextMonth();
+    }, [setNextMonth]);
+    var handleMonthClick = React.useCallback(function () {
+        toggleView('months');
+    }, [toggleView]);
+    var handleYearClick = React.useCallback(function () {
+        toggleView('years');
+    }, [toggleView]);
+    hooks.useDidUpdateEffect(function () {
+        setView('days');
+    }, [activeMonth]);
+    hooks.useDidUpdateEffect(function () {
+        setScrolled(false);
+    }, [view]);
+    hooks.useDidUpdateEffect(function () {
+        var newMonth = value && dateFns.startOfMonth(value);
+        if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
+            setMonthByDate(newMonth);
+        }
+    }, [value]);
+    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("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 })),
+            view === 'years' && (React__default['default'].createElement(components_yearsTable_Component.YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll })))));
+});
+
+exports.Calendar = Calendar;

package/calendar/cssm/components/days-table/Component.d.ts

@@ -0,0 +1,32 @@
+import { FC, RefCallback } from 'react';
+import { Day } from "../../typings";
+type DaysTableProps = {
+    /**
+     * Массив-календарь недель
+     */
+    weeks?: Day[][];
+    /**
+     * Активный месяц
+     */
+    activeMonth?: Date;
+    /**
+     * Начало выделенного периода
+     */
+    selectedFrom?: Date | number;
+    /**
+     * Конец выделенного периода
+     */
+    selectedTo?: Date | number;
+    /**
+     * Подсвеченная дата (ховер)
+     */
+    highlighted?: Date | number;
+    /**
+     * Доп. пропсы для переданного дня
+     */
+    getDayProps: (day: Day) => Record<string, unknown> & {
+        ref: RefCallback<HTMLButtonElement>;
+    };
+};
+declare const DaysTable: FC<DaysTableProps>;
+export { DaysTableProps, DaysTable };

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

@@ -0,0 +1,77 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+var dateFns = require('date-fns');
+var hooks = require('@alfalab/hooks');
+var coreComponentsButton = require('../../../../button/cssm');
+var reactTransitionGroup = require('react-transition-group');
+var utils = require('../../utils.js');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var DaysTable = function (_a) {
+    var _b = _a.weeks, weeks = _b === void 0 ? [] : _b, _c = _a.activeMonth, activeMonth = _c === void 0 ? new Date() : _c, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, getDayProps = _a.getDayProps;
+    var activeMonthRef = React.useRef(activeMonth);
+    activeMonthRef.current = activeMonth;
+    var prevActiveMonth = hooks.usePrevious(activeMonth);
+    var direction = prevActiveMonth && (activeMonth < prevActiveMonth ? 'right' : 'left');
+    var selection = utils.getSelectionRange(selectedFrom, selectedTo, highlighted);
+    var renderHeader = React.useCallback(function () {
+        return utils.WEEKDAYS.map(function (dayName) { return (React__default['default'].createElement("th", { className: styles__default['default'].dayName, key: dayName }, dayName)); });
+    }, []);
+    var renderDay = function (day) {
+        var _a;
+        var daySelected = day.selected ||
+            (selectedFrom && dateFns.isSameDay(day.date, selectedFrom)) ||
+            (selectedTo && dateFns.isSameDay(day.date, selectedTo));
+        var inRange = !daySelected && selection && dateFns.isWithinInterval(day.date, selection);
+        var firstDay = day.date.getDate() === 1;
+        var lastDay = dateFns.isLastDayOfMonth(day.date);
+        var transitLeft = firstDay && inRange && selection && day.date > selection.start;
+        var transitRight = lastDay && inRange && selection && day.date < selection.end;
+        var rangeStart = selection && dateFns.isSameDay(day.date, selection.start);
+        var dayProps = getDayProps(day);
+        return (React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({}, dayProps, { ref: function (node) {
+                /**
+                 * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
+                 * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
+                 */
+                if (dateFns.startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
+                    dayProps.ref(node);
+                }
+            }, type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn__default['default'](styles__default['default'].day, (_a = {},
+                _a[styles__default['default'].selected] = daySelected,
+                _a[styles__default['default'].range] = inRange,
+                _a[styles__default['default'].rangeStart] = rangeStart,
+                _a[styles__default['default'].transitLeft] = transitLeft,
+                _a[styles__default['default'].transitRight] = transitRight,
+                _a[styles__default['default'].today] = dateFns.isToday(day.date),
+                _a[styles__default['default'].firstDay] = firstDay,
+                _a[styles__default['default'].lastDay] = lastDay,
+                _a[styles__default['default'].event] = day.event,
+                _a[styles__default['default'].disabled] = day.disabled,
+                _a[styles__default['default'].highlighted] = highlighted && dateFns.isEqual(day.date, highlighted),
+                _a)) }), day.date.getDate()));
+    };
+    var renderWeek = function (week, weekIdx) { return (React__default['default'].createElement("tr", { key: weekIdx }, week.map(function (day, dayIdx) { return (React__default['default'].createElement("td", { key: day ? day.date.getTime() : dayIdx }, day && renderDay(day))); }))); };
+    return (React__default['default'].createElement("table", { className: cn__default['default'](styles__default['default'].daysTable, direction && styles__default['default'][direction]) },
+        React__default['default'].createElement("thead", null,
+            React__default['default'].createElement("tr", null, renderHeader())),
+        React__default['default'].createElement(reactTransitionGroup.TransitionGroup, { component: null },
+            React__default['default'].createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
+                    enter: styles__default['default'].daysEnter,
+                    enterActive: styles__default['default'].daysEnterActive,
+                    exit: styles__default['default'].daysExit,
+                    exitActive: styles__default['default'].daysExitActive,
+                } },
+                React__default['default'].createElement("tbody", null, weeks.map(renderWeek))))));
+};
+
+exports.DaysTable = DaysTable;

package/calendar/cssm/components/days-table/index.d.ts

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

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

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('date-fns');
+require('@alfalab/hooks');
+require('../../../../button/cssm');
+require('react-transition-group');
+require('../../utils.js');
+require('./index.module.css');
+var components_daysTable_Component = require('./Component.js');
+
+
+
+exports.DaysTable = components_daysTable_Component.DaysTable;

package/calendar/cssm/components/days-table/index.module.css

@@ -0,0 +1,240 @@
+:root {
+    --color-static-graphic-solitude: #e8f2fe;
+}
+:root {
+    --color-light-border-key: #0b1f35;
+    --color-light-graphic-neutral: #dbdee1;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: #546272;
+    --color-light-text-tertiary: #b6bcc3;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xs: 4px;
+}
+:root {
+    --border-radius-s: 4px;
+    --border-radius-circle: 50%;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+    --calendar-day-size: 40px;
+    --calendar-day-border-radius: var(--border-radius-s);
+
+    /* today */
+    --calendar-today-border-color: var(--color-light-border-key);
+
+    /* highlighted */
+    --calendar-highlighted-color: var(--color-light-text-primary);
+    --calendar-highlighted-background: var(--color-light-graphic-neutral);
+
+    /* range */
+    --calendar-range-color: var(--color-light-text-primary);
+    --calendar-range-background: var(--color-static-graphic-solitude);
+
+    /* selected */
+    --calendar-selected-color: var(--color-light-text-primary-inverted);
+    --calendar-selected-background: var(--color-light-graphic-primary);
+
+    /* disabled */
+    --calendar-disabled-color: var(--color-light-text-tertiary);
+    --calendar-disabled-background: transparent;
+
+    /* marker */
+    --calendar-marker-background: var(--color-light-graphic-tertiary);
+}
+.daysTable {
+    border-collapse: separate;
+    border-spacing: 0;
+    position: relative
+}
+.daysTable th {
+        padding: 0;
+    }
+.daysTable td {
+        padding: var(--gap-2xs) 0 0
+    }
+.daysTable td:first-child .transitLeft {
+            background: linear-gradient(
+                270deg,
+                var(--calendar-range-background) 0%,
+                var(--color-light-specialbg-nulled) 100%
+            )
+        }
+.daysTable td:first-child .transitLeft:after {
+                display: none;
+            }
+.daysTable td:last-child .transitRight {
+            background: linear-gradient(
+                270deg,
+                var(--color-light-specialbg-nulled) 0%,
+                var(--calendar-range-background) 100%
+            )
+        }
+.daysTable td:last-child .transitRight:after {
+                display: none;
+            }
+.dayName {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    height: 40px;
+    color: var(--color-light-text-secondary);
+}
+.day {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    position: relative;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    box-sizing: border-box;
+    border-radius: var(--calendar-day-border-radius);
+    color: var(--color-light-text-primary)
+}
+.day.event:before {
+            content: '';
+            display: block;
+            position: absolute;
+            bottom: 2px;
+            width: 6px;
+            height: 6px;
+            border-radius: var(--border-radius-circle);
+            background: var(--calendar-marker-background);
+        }
+.day.today {
+        font-weight: bold
+    }
+.day.today span:after {
+            content: '';
+            border: 1px solid var(--calendar-today-border-color);
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: var(--calendar-day-border-radius);
+            box-sizing: border-box;
+        }
+.day.highlighted {
+        color: var(--calendar-highlighted-color);
+        background: var(--calendar-highlighted-background);
+    }
+.day.disabled {
+        pointer-events: none;
+        color: var(--calendar-disabled-color);
+
+        background: var(--calendar-disabled-background);
+        cursor: default;
+    }
+.day.range {
+        color: var(--calendar-range-color);
+        background: var(--calendar-range-background);
+        border-radius: 0;
+    }
+.day.selected,
+    .day.disabled.selected {
+        color: var(--calendar-selected-color);
+        background: var(--calendar-selected-background);
+        cursor: default;
+    }
+.day.rangeStart {
+        cursor: pointer;
+    }
+.day.firstDay:after, .day.lastDay:after {
+            transition: opacity 0.2s ease;
+            content: '';
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            pointer-events: none;
+        }
+.day.firstDay:after {
+            right: 100%;
+            background: linear-gradient(
+                270deg,
+                var(--calendar-range-background) 0%,
+                var(--color-light-specialbg-nulled) 100%
+            );
+        }
+.day.lastDay:after {
+            left: 100%;
+            background: linear-gradient(
+                270deg,
+                var(--color-light-specialbg-nulled) 0%,
+                var(--calendar-range-background) 100%
+            );
+        }
+.day.transitLeft:after, .day.transitRight:after {
+            opacity: 1;
+        }
+.day:focus {
+        z-index: 1;
+    }
+.left .daysEnter {
+        transform: translateX(var(--calendar-day-size));
+    }
+.left .daysEnterActive {
+        transform: translateX(0%);
+    }
+.left .daysExit {
+        transform: translateX(0%);
+    }
+.left .daysExitActive {
+        transform: translateX(calc(-1 * var(--calendar-day-size)));
+    }
+.right .daysEnter {
+        transform: translateX(calc(-1 * var(--calendar-day-size)));
+    }
+.right .daysEnterActive {
+        transform: translateX(0%);
+    }
+.right .daysExit {
+        transform: translateX(0%);
+    }
+.right .daysExitActive {
+        transform: translateX(var(--calendar-day-size));
+    }
+.daysEnter {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+}
+.daysEnterActive {
+    opacity: 1;
+}
+.daysExit {
+    pointer-events: none;
+    opacity: 1;
+}
+.daysExitActive {
+    opacity: 0;
+}
+.daysEnterActive,
+.daysExitActive {
+    transition: opacity 300ms, transform 300ms;
+}

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

@@ -0,0 +1,46 @@
+import { FC, MouseEvent } from 'react';
+import { SelectorView } from "../../typings";
+type HeaderProps = {
+    /**
+     * Выбранный месяц
+     */
+    month?: string;
+    /**
+     * Выбранный год
+     */
+    year?: string;
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    view?: SelectorView;
+    /**
+     * Отображать тень? (нужна при прокрутке)
+     */
+    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

@@ -0,0 +1,38 @@
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+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;
+    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' })))));
+};
+
+exports.Header = Header;

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

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

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

@@ -0,0 +1,14 @@
+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');
+
+
+
+exports.Header = components_header_Component.Header;