@alfalab/core-components 43.1.3 → 44.0.0

package/calendar/cssm/desktop/Component.desktop.js

@@ -0,0 +1,183 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var endOfDay = require('date-fns/endOfDay');
+var startOfDay = require('date-fns/startOfDay');
+var startOfMonth = require('date-fns/startOfMonth');
+var coreComponentsShared = require('../../../shared/cssm');
+var hooks = require('@alfalab/hooks');
+var components_daysTable_Component = require('../components/days-table/Component.js');
+var components_header_Component = require('../components/header/Component.js');
+var components_monthYearHeader_Component = require('../components/month-year-header/Component.js');
+var components_monthsTable_Component = require('../components/months-table/Component.js');
+var components_periodSlider_Component = require('../components/period-slider/Component.js');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/addQuarters');
+require('date-fns/addWeeks');
+require('date-fns/addYears');
+require('date-fns/endOfMonth');
+require('date-fns/endOfQuarter');
+require('date-fns/endOfWeek');
+require('date-fns/endOfYear');
+require('date-fns/getQuarter');
+require('date-fns/getYear');
+require('date-fns/isToday');
+require('date-fns/isYesterday');
+require('date-fns/startOfQuarter');
+require('date-fns/startOfWeek');
+require('date-fns/startOfYear');
+var utils = require('../utils.js');
+var components_yearsTable_Component = require('../components/years-table/Component.js');
+var useCalendar = require('../useCalendar.js');
+var styles = require('./desktop.module.css');
+require('react-transition-group');
+require('date-fns/isEqual');
+require('date-fns/isLastDayOfMonth');
+require('date-fns/isSameDay');
+require('date-fns/isWithinInterval');
+require('../../../button/cssm/desktop');
+require('../components/days-table/index.module.css');
+require('../components/header/index.module.css');
+require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('../components/select-button/Component.js');
+require('../components/select-button/index.module.css');
+require('../components/month-year-header/index.module.css');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
+require('../components/months-table/index.module.css');
+require('../../../icon-button/cssm');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
+require('../components/period-slider/utils.js');
+require('../components/period-slider/index.module.css');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/format');
+require('date-fns/isAfter');
+require('date-fns/isBefore');
+require('date-fns/lastDayOfMonth');
+require('date-fns/max');
+require('date-fns/min');
+require('date-fns/parse');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/isSameYear');
+require('date-fns/isThisYear');
+require('../components/years-table/index.module.css');
+require('react-merge-refs');
+require('date-fns/setYear');
+require('date-fns/subYears');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
+var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var useCustomWebkitScrollbar = coreComponentsShared.hooks.useCustomWebkitScrollbar;
+var CalendarDesktop = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var className = _a.className, headerClassName = _a.headerClassName, contentClassName = _a.contentClassName, _d = _a.defaultView, defaultView = _d === void 0 ? 'days' : _d, _e = _a.selectorView, selectorView = _e === void 0 ? 'full' : _e, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _f = _a.defaultMonth, defaultMonthTimestamp = _f === void 0 ? +new Date() : _f, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _g = _a.hasHeader, hasHeader = _g === void 0 ? true : _g, responsive = _a.responsive, dayAddons = _a.dayAddons, _h = _a.shape, shape = _h === void 0 ? 'rounded' : _h, _j = _a.showCurrentYearSelector, showCurrentYearSelector = _j === void 0 ? false : _j;
+    var _k = React.useState(defaultView), view = _k[0], setView = _k[1];
+    var _l = React.useState(false), scrolled = _l[0], setScrolled = _l[1];
+    var scrollableNodeRef = React.useRef(null);
+    var firstUpdate = React.useRef(true);
+    var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
+    var defaultMonth = React.useMemo(function () {
+        return startOfMonth__default.default(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 ? startOfDay__default.default(minDateTimestamp) : undefined); }, [minDateTimestamp]);
+    var maxDate = React.useMemo(function () { return (maxDateTimestamp ? endOfDay__default.default(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
+    var _m = useCalendar.useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: view,
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        holidays: holidays,
+        dayAddons: dayAddons,
+        onChange: onChange,
+        onMonthChange: onMonthChange,
+    }), activeMonth = _m.activeMonth, weeks = _m.weeks, months = _m.months, years = _m.years, canSetPrevMonth = _m.canSetPrevMonth, canSetNextMonth = _m.canSetNextMonth, setMonthByDate = _m.setMonthByDate, setPrevMonth = _m.setPrevMonth, setNextMonth = _m.setNextMonth, highlighted = _m.highlighted, getDayProps = _m.getDayProps, getMonthProps = _m.getMonthProps, getYearProps = _m.getYearProps, getRootProps = _m.getRootProps;
+    var toggleView = function (newView) {
+        if (scrollableNodeRef.current)
+            scrollableNodeRef.current.scrollTop = 0;
+        setView(view === newView ? 'days' : newView);
+    };
+    var handleScroll = function (event) {
+        return setScrolled(event.currentTarget.scrollTop > 0);
+    };
+    var handlePrevArrowClick = function () {
+        // TODO: Что должны делать стрелки при view !== days?
+        setPrevMonth();
+    };
+    var handleNextArrowClick = function () { return setNextMonth(); };
+    var handleMonthClick = function (event) {
+        toggleView('months');
+        if (onMonthClick) {
+            onMonthClick(event);
+        }
+    };
+    var handleYearClick = function (event) {
+        toggleView('years');
+        if (onYearClick) {
+            onYearClick(event);
+        }
+    };
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        if (view === 'years') {
+            var listNode = scrollableNodeRef.current;
+            var selectedYearNode = listNode === null || listNode === void 0 ? void 0 : listNode.querySelector('button[tabIndex="0"]');
+            if (listNode && selectedYearNode) {
+                var topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
+                listNode.scrollTop = selectedYearNode.offsetTop - topIndent;
+                setScrolled(listNode.scrollTop > 0);
+            }
+        }
+    }, [view]);
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+        }
+        else {
+            toggleView('days');
+        }
+    }, [activeMonth]);
+    hooks.useDidUpdateEffect(function () {
+        setScrolled(false);
+    }, [view]);
+    hooks.useDidUpdateEffect(function () {
+        var newMonth = value && startOfMonth__default.default(value);
+        if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
+            setMonthByDate(newMonth);
+        }
+    }, [value]);
+    var shouldUseCustomScrollbar = useCustomWebkitScrollbar();
+    return (React__default.default.createElement("div", tslib.__assign({}, getRootProps({ ref: ref }), { className: cn__default.default('cc-calendar', styles__default.default.component, className, (_b = {},
+            _b[styles__default.default.sixWeeks] = weeks.length === 6,
+            _b[styles__default.default.responsive] = responsive,
+            _b)), "data-test-id": dataTestId }),
+        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        React__default.default.createElement("div", { ref: scrollableNodeRef, className: cn__default.default(styles__default.default.container, (_c = {},
+                _c[styles__default.default.customScrollbar] = view === 'years' && shouldUseCustomScrollbar,
+                _c[styles__default.default.nativeScrollbar] = view === 'years' && !shouldUseCustomScrollbar,
+                _c), styles__default.default[view], contentClassName), onScroll: handleScroll },
+            view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
+            view === 'months' && (React__default.default.createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
+            view === 'years' && (React__default.default.createElement(components_yearsTable_Component.YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
+});
+
+exports.CalendarDesktop = CalendarDesktop;

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

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

package/calendar/cssm/desktop/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component_desktop = require('../Component.desktop.js');
+var desktop_Component_desktop = require('./Component.desktop.js');
 require('tslib');
 require('react');
 require('classnames');
@@ -70,8 +70,8 @@ require('../useCalendar.js');
 require('react-merge-refs');
 require('date-fns/setYear');
 require('date-fns/subYears');
-require('../desktop.module.css');
+require('./desktop.module.css');
 
 
 
-exports.CalendarDesktop = Component_desktop.CalendarDesktop;
+exports.CalendarDesktop = desktop_Component_desktop.CalendarDesktop;

package/calendar/cssm/index.js

@@ -15,7 +15,7 @@ require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../../button/cssm/mobile');
 require('../../modal/cssm/mobile');
-require('./Component.desktop.js');
+require('./desktop/Component.desktop.js');
 require('../../shared/cssm');
 require('@alfalab/hooks');
 require('./components/days-table/Component.js');
@@ -77,7 +77,7 @@ require('./components/years-table/index.module.css');
 require('./useCalendar.js');
 require('date-fns/setYear');
 require('date-fns/subYears');
-require('./desktop.module.css');
+require('./desktop/desktop.module.css');
 require('./components/calendar-mobile/backdrop-transitions.module.css');
 require('./components/calendar-mobile/index.module.css');
 require('./components/calendar-mobile/transitions.module.css');

package/calendar/cssm/mobile/index.js

@@ -13,7 +13,7 @@ require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../../../button/cssm/mobile');
 require('../../../modal/cssm/mobile');
-require('../Component.desktop.js');
+require('../desktop/Component.desktop.js');
 require('../../../shared/cssm');
 require('@alfalab/hooks');
 require('../components/days-table/Component.js');
@@ -75,7 +75,7 @@ require('../components/years-table/index.module.css');
 require('../useCalendar.js');
 require('date-fns/setYear');
 require('date-fns/subYears');
-require('../desktop.module.css');
+require('../desktop/desktop.module.css');
 require('../components/calendar-mobile/backdrop-transitions.module.css');
 require('../components/calendar-mobile/index.module.css');
 require('../components/calendar-mobile/transitions.module.css');

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

@@ -0,0 +1,117 @@
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent } from "react";
+import { DayAddons, SelectorView, View } from "../typings";
+type CalendarDesktopProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс шапки десктопного календаря
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс контента десктопного календаря
+     */
+    contentClassName?: 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;
+    /**
+     * Индикатор, что выбран полный период
+     */
+    rangeComplete?: boolean;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней.
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date?: number) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+    /**
+     * Форма ячейки дня
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Отображать ли текущий год, если selectorView 'month-only'
+     * @default false
+     */
+    showCurrentYearSelector?: boolean;
+};
+declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { CalendarDesktopProps, CalendarDesktop };

package/calendar/desktop/Component.desktop.js

@@ -0,0 +1,177 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var endOfDay = require('date-fns/endOfDay');
+var startOfDay = require('date-fns/startOfDay');
+var startOfMonth = require('date-fns/startOfMonth');
+var coreComponentsShared = require('../../shared');
+var hooks = require('@alfalab/hooks');
+var components_daysTable_Component = require('../components/days-table/Component.js');
+var components_header_Component = require('../components/header/Component.js');
+var components_monthYearHeader_Component = require('../components/month-year-header/Component.js');
+var components_monthsTable_Component = require('../components/months-table/Component.js');
+var components_periodSlider_Component = require('../components/period-slider/Component.js');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/addQuarters');
+require('date-fns/addWeeks');
+require('date-fns/addYears');
+require('date-fns/endOfMonth');
+require('date-fns/endOfQuarter');
+require('date-fns/endOfWeek');
+require('date-fns/endOfYear');
+require('date-fns/getQuarter');
+require('date-fns/getYear');
+require('date-fns/isToday');
+require('date-fns/isYesterday');
+require('date-fns/startOfQuarter');
+require('date-fns/startOfWeek');
+require('date-fns/startOfYear');
+var utils = require('../utils.js');
+var components_yearsTable_Component = require('../components/years-table/Component.js');
+var useCalendar = require('../useCalendar.js');
+require('react-transition-group');
+require('date-fns/isEqual');
+require('date-fns/isLastDayOfMonth');
+require('date-fns/isSameDay');
+require('date-fns/isWithinInterval');
+require('../../button/desktop');
+require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('../components/select-button/Component.js');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
+require('../../icon-button');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
+require('../components/period-slider/utils.js');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/format');
+require('date-fns/isAfter');
+require('date-fns/isBefore');
+require('date-fns/lastDayOfMonth');
+require('date-fns/max');
+require('date-fns/min');
+require('date-fns/parse');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/isSameYear');
+require('date-fns/isThisYear');
+require('react-merge-refs');
+require('date-fns/setYear');
+require('date-fns/subYears');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
+var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+
+var styles = {"component":"calendar__component_zxdwb","responsive":"calendar__responsive_zxdwb","period":"calendar__period_zxdwb","monthYear":"calendar__monthYear_zxdwb","container":"calendar__container_zxdwb","customScrollbar":"calendar__customScrollbar_zxdwb","nativeScrollbar":"calendar__nativeScrollbar_zxdwb","sixWeeks":"calendar__sixWeeks_zxdwb"};
+require('./desktop.css');
+
+var useCustomWebkitScrollbar = coreComponentsShared.hooks.useCustomWebkitScrollbar;
+var CalendarDesktop = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var className = _a.className, headerClassName = _a.headerClassName, contentClassName = _a.contentClassName, _d = _a.defaultView, defaultView = _d === void 0 ? 'days' : _d, _e = _a.selectorView, selectorView = _e === void 0 ? 'full' : _e, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _f = _a.defaultMonth, defaultMonthTimestamp = _f === void 0 ? +new Date() : _f, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId, _g = _a.hasHeader, hasHeader = _g === void 0 ? true : _g, responsive = _a.responsive, dayAddons = _a.dayAddons, _h = _a.shape, shape = _h === void 0 ? 'rounded' : _h, _j = _a.showCurrentYearSelector, showCurrentYearSelector = _j === void 0 ? false : _j;
+    var _k = React.useState(defaultView), view = _k[0], setView = _k[1];
+    var _l = React.useState(false), scrolled = _l[0], setScrolled = _l[1];
+    var scrollableNodeRef = React.useRef(null);
+    var firstUpdate = React.useRef(true);
+    var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
+    var defaultMonth = React.useMemo(function () {
+        return startOfMonth__default.default(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 ? startOfDay__default.default(minDateTimestamp) : undefined); }, [minDateTimestamp]);
+    var maxDate = React.useMemo(function () { return (maxDateTimestamp ? endOfDay__default.default(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
+    var _m = useCalendar.useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: view,
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        holidays: holidays,
+        dayAddons: dayAddons,
+        onChange: onChange,
+        onMonthChange: onMonthChange,
+    }), activeMonth = _m.activeMonth, weeks = _m.weeks, months = _m.months, years = _m.years, canSetPrevMonth = _m.canSetPrevMonth, canSetNextMonth = _m.canSetNextMonth, setMonthByDate = _m.setMonthByDate, setPrevMonth = _m.setPrevMonth, setNextMonth = _m.setNextMonth, highlighted = _m.highlighted, getDayProps = _m.getDayProps, getMonthProps = _m.getMonthProps, getYearProps = _m.getYearProps, getRootProps = _m.getRootProps;
+    var toggleView = function (newView) {
+        if (scrollableNodeRef.current)
+            scrollableNodeRef.current.scrollTop = 0;
+        setView(view === newView ? 'days' : newView);
+    };
+    var handleScroll = function (event) {
+        return setScrolled(event.currentTarget.scrollTop > 0);
+    };
+    var handlePrevArrowClick = function () {
+        // TODO: Что должны делать стрелки при view !== days?
+        setPrevMonth();
+    };
+    var handleNextArrowClick = function () { return setNextMonth(); };
+    var handleMonthClick = function (event) {
+        toggleView('months');
+        if (onMonthClick) {
+            onMonthClick(event);
+        }
+    };
+    var handleYearClick = function (event) {
+        toggleView('years');
+        if (onYearClick) {
+            onYearClick(event);
+        }
+    };
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        if (view === 'years') {
+            var listNode = scrollableNodeRef.current;
+            var selectedYearNode = listNode === null || listNode === void 0 ? void 0 : listNode.querySelector('button[tabIndex="0"]');
+            if (listNode && selectedYearNode) {
+                var topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
+                listNode.scrollTop = selectedYearNode.offsetTop - topIndent;
+                setScrolled(listNode.scrollTop > 0);
+            }
+        }
+    }, [view]);
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+        }
+        else {
+            toggleView('days');
+        }
+    }, [activeMonth]);
+    hooks.useDidUpdateEffect(function () {
+        setScrolled(false);
+    }, [view]);
+    hooks.useDidUpdateEffect(function () {
+        var newMonth = value && startOfMonth__default.default(value);
+        if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
+            setMonthByDate(newMonth);
+        }
+    }, [value]);
+    var shouldUseCustomScrollbar = useCustomWebkitScrollbar();
+    return (React__default.default.createElement("div", tslib.__assign({}, getRootProps({ ref: ref }), { className: cn__default.default('cc-calendar', styles.component, className, (_b = {},
+            _b[styles.sixWeeks] = weeks.length === 6,
+            _b[styles.responsive] = responsive,
+            _b)), "data-test-id": dataTestId }),
+        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        React__default.default.createElement("div", { ref: scrollableNodeRef, className: cn__default.default(styles.container, (_c = {},
+                _c[styles.customScrollbar] = view === 'years' && shouldUseCustomScrollbar,
+                _c[styles.nativeScrollbar] = view === 'years' && !shouldUseCustomScrollbar,
+                _c), styles[view], contentClassName), onScroll: handleScroll },
+            view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
+            view === 'months' && (React__default.default.createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
+            view === 'years' && (React__default.default.createElement(components_yearsTable_Component.YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
+});
+
+exports.CalendarDesktop = CalendarDesktop;