@alfalab/core-components 42.14.0 → 42.15.0-beta.2

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

@@ -37,33 +37,33 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_ys6t3 {
+} .calendar__component_1edj4 {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .cc-calendar .calendar__button_ys6t3 {
+} .cc-calendar .calendar__button_1edj4 {
         border-radius: var(--border-radius-s);
-    } .calendar__month_ys6t3 {
+    } .calendar__month_1edj4 {
     flex-basis: 65%
-} @media (max-width: 374px) { .calendar__month_ys6t3 {
+} @media (max-width: 374px) { .calendar__month_1edj4 {
         flex-grow: 1
 }
-    } .calendar__year_ys6t3 {
+    } .calendar__year_1edj4 {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
-} @media (max-width: 374px) { .calendar__year_ys6t3 {
+} @media (max-width: 374px) { .calendar__year_1edj4 {
         width: 90px
 }
-    } .calendar__buttonContent_ys6t3 {
+    } .calendar__buttonContent_1edj4 {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-} .calendar__upDownIcon_ys6t3 {
+} .calendar__upDownIcon_1edj4 {
     margin-left: var(--gap-xs)
-} @media (max-width: 374px) { .calendar__upDownIcon_ys6t3 {
+} @media (max-width: 374px) { .calendar__upDownIcon_1edj4 {
         margin-left: auto
 }
     }

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

@@ -28,7 +28,7 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../../../../button/modern/desktop';
 
-const styles = {"monthsTable":"calendar__monthsTable_1papr","responsive":"calendar__responsive_1papr","button":"calendar__button_1papr"};
+const styles = {"monthsTable":"calendar__monthsTable_1gwgz","responsive":"calendar__responsive_1gwgz","button":"calendar__button_1gwgz"};
 require('./index.css');
 
 const MonthsTable = ({ selectedMonth, months = [], getMonthProps, responsive, }) => {

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

@@ -49,39 +49,40 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__monthsTable_1papr {
+} .cc-calendar .calendar__monthsTable_1gwgz {
         display: flex;
         flex-wrap: wrap;
-        width: var(--calendar-inner-width);
-        justify-content: flex-start
-    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1papr {
+        width: var(--calendar-inner-width)
+    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1gwgz {
             width: var(--calendar-mobile-inner-width);
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__monthsTable_1papr.calendar__responsive_1papr {
-            width: 100%;
-            justify-content: space-between
-        } .cc-calendar .calendar__monthsTable_1papr.calendar__responsive_1papr .calendar__button_1papr {
-                width: 33%;
-                margin-right: 0;
-            } .cc-calendar .calendar__button_1papr {
-        width: var(--calendar-select-button-width);
-        margin-right: var(--gap-2xs);
-        margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1papr:nth-child(3n) {
-            margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1papr {
-            width: var(--calendar-mobile-select-button-width)
-    }
-
-            .cc-calendar .calendar__button_1papr:nth-child(3n) {
-                margin-right: var(--gap-2xs);
+        } .cc-calendar .calendar__monthsTable_1gwgz.calendar__responsive_1gwgz {
+            width: 100%
+        } .cc-calendar .calendar__monthsTable_1gwgz.calendar__responsive_1gwgz .calendar__button_1gwgz {
+                width: calc(33.333% - var(--gap-2xs) / 1.5);
+            } .cc-calendar .calendar__monthsTable_1gwgz:not(.calendar__responsive_1gwgz) .calendar__button_1gwgz {
+                width: var(--calendar-select-button-width)
+            } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1gwgz:not(.calendar__responsive_1gwgz) .calendar__button_1gwgz {
+                    width: var(--calendar-mobile-select-button-width)
             }
 
-            .cc-calendar .calendar__button_1papr:nth-child(2n) {
-                margin-right: 0;
-            } .cc-calendar .calendar__button_1papr {
+                    .cc-calendar .calendar__monthsTable_1gwgz:not(.calendar__responsive_1gwgz) .calendar__button_1gwgz:nth-child(3n) {
+                        margin-right: var(--gap-2xs);
+                    }
 
+                    .cc-calendar .calendar__monthsTable_1gwgz:not(.calendar__responsive_1gwgz) .calendar__button_1gwgz:nth-child(2n) {
+                        margin-right: 0;
+                    } .cc-calendar .calendar__monthsTable_1gwgz:not(.calendar__responsive_1gwgz) .calendar__button_1gwgz {
+
+                    height: 36px
+            }
+                } .cc-calendar .calendar__button_1gwgz {
+        margin-right: var(--gap-2xs);
+        margin-bottom: var(--gap-xs)
+    } .cc-calendar .calendar__button_1gwgz:nth-child(3n) {
+            margin-right: 0;
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_1gwgz {
             height: 36px
     }
         }

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

@@ -38,7 +38,7 @@ import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 
-const styles = {"component":"calendar__component_7wt4m","period":"calendar__period_7wt4m","clicablePeriod":"calendar__clicablePeriod_7wt4m","empty":"calendar__empty_7wt4m","arrow":"calendar__arrow_7wt4m","full":"calendar__full_7wt4m","yearSelectorButton":"calendar__yearSelectorButton_7wt4m"};
+const styles = {"component":"calendar__component_t9xgv","period":"calendar__period_t9xgv","clicablePeriod":"calendar__clicablePeriod_t9xgv","empty":"calendar__empty_t9xgv","arrow":"calendar__arrow_t9xgv","full":"calendar__full_t9xgv","yearSelectorButton":"calendar__yearSelectorButton_t9xgv"};
 require('./index.css');
 
 const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, isMonthAndYearSelectable = false, showCurrentYearSelector = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, onPeriodClick, dataTestId, }) => {

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

@@ -42,37 +42,37 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_7wt4m {
+} .calendar__component_t9xgv {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .calendar__period_7wt4m {
+} .calendar__period_t9xgv {
     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_7wt4m {
+} @media (max-width: 374px) { .calendar__period_t9xgv {
         width: auto;
         flex-grow: 1
 }
-    } .calendar__clicablePeriod_7wt4m {
+    } .calendar__clicablePeriod_t9xgv {
     cursor: pointer;
-} .calendar__empty_7wt4m {
+} .calendar__empty_t9xgv {
     color: var(--color-light-text-secondary);
-} .calendar__arrow_7wt4m {
+} .calendar__arrow_t9xgv {
     position: absolute;
     top: 4px
-} .calendar__arrow_7wt4m:first-child {
+} .calendar__arrow_t9xgv:first-child {
         left: 0;
-    } .calendar__arrow_7wt4m:last-child {
+    } .calendar__arrow_t9xgv:last-child {
         right: 0;
         transform: rotateY(180deg);
-    } @media (max-width: 374px) { .calendar__full_7wt4m .calendar__arrow_7wt4m {
+    } @media (max-width: 374px) { .calendar__full_t9xgv .calendar__arrow_t9xgv {
         display: none
 }
-    } .calendar__yearSelectorButton_7wt4m {
+    } .calendar__yearSelectorButton_t9xgv {
     margin-left: var(--gap-xs);
 }

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { ButtonDesktop } from '../../../../button/modern/desktop';
 
-const styles = {"button":"calendar__button_1frtu","filled":"calendar__filled_1frtu","outlined":"calendar__outlined_1frtu","selected":"calendar__selected_1frtu"};
+const styles = {"button":"calendar__button_uephy","filled":"calendar__filled_uephy","outlined":"calendar__outlined_uephy","selected":"calendar__selected_uephy"};
 require('./index.css');
 
 const SelectButton = forwardRef(({ className, children, view = 'default', ...restProps }, ref) => (React.createElement(ButtonDesktop, { ...restProps, ref: ref, view: 'ghost', size: 'xs', className: cn(styles.button, styles[view], className) }, children)));

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

@@ -45,7 +45,7 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__button_1frtu {
+} .cc-calendar .calendar__button_uephy {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
@@ -55,22 +55,22 @@
         padding: 0 var(--gap-xs);
         background-color: transparent;
         border-radius: var(--border-radius-l)
-    } .cc-calendar .calendar__button_1frtu:not(:disabled):hover {
+    } .cc-calendar .calendar__button_uephy:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary);
             color: var(--color-light-text-primary);
-        } .cc-calendar .calendar__button_1frtu.calendar__filled_1frtu {
+        } .cc-calendar .calendar__button_uephy.calendar__filled_uephy {
             background-color: var(--color-light-bg-tertiary)
-        } .cc-calendar .calendar__button_1frtu.calendar__filled_1frtu:not(:disabled):hover {
+        } .cc-calendar .calendar__button_uephy.calendar__filled_uephy:not(:disabled):hover {
                 background-color: var(--color-light-bg-tertiary-shade-7);
-            } .cc-calendar .calendar__button_1frtu.calendar__outlined_1frtu {
+            } .cc-calendar .calendar__button_uephy.calendar__outlined_uephy {
             border: 1px solid var(--calendar-select-button-today-border-color);
-        } .cc-calendar .calendar__button_1frtu.calendar__selected_1frtu,
-        .cc-calendar .calendar__button_1frtu.calendar__selected_1frtu:disabled {
+        } .cc-calendar .calendar__button_uephy.calendar__selected_uephy,
+        .cc-calendar .calendar__button_uephy.calendar__selected_uephy:disabled {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted)
-        } .cc-calendar .calendar__button_1frtu.calendar__selected_1frtu:not(:disabled):hover, .cc-calendar .calendar__button_1frtu.calendar__selected_1frtu:disabled:not(:disabled):hover {
+        } .cc-calendar .calendar__button_uephy.calendar__selected_uephy:not(:disabled):hover, .cc-calendar .calendar__button_uephy.calendar__selected_uephy:disabled:not(:disabled):hover {
                 background-color: var(--calendar-select-button-selected-background);
                 color: var(--color-light-text-primary-inverted);
-            } .cc-calendar .calendar__button_1frtu > * {
+            } .cc-calendar .calendar__button_uephy > * {
             flex-grow: 1;
         }

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

@@ -5,7 +5,7 @@ import isThisYear from 'date-fns/isThisYear';
 import { SelectButton } from '../select-button/Component.js';
 import '../../../../button/modern/desktop';
 
-const styles = {"yearsTable":"calendar__yearsTable_bv1mi","responsive":"calendar__responsive_bv1mi","inner":"calendar__inner_bv1mi","button":"calendar__button_bv1mi"};
+const styles = {"yearsTable":"calendar__yearsTable_1d037","responsive":"calendar__responsive_1d037","inner":"calendar__inner_1d037","button":"calendar__button_1d037"};
 require('./index.css');
 
 const YearsTable = ({ selectedYear, years = [], getYearProps, responsive, }) => {

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

@@ -49,44 +49,43 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_bv1mi {
-        overflow: auto;
-        overflow-x: hidden;
+} .cc-calendar .calendar__yearsTable_1d037 {
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_bv1mi {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1d037 {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_bv1mi.calendar__responsive_bv1mi {
-            justify-content: space-between
-        } .cc-calendar .calendar__yearsTable_bv1mi.calendar__responsive_bv1mi .calendar__inner_bv1mi {
-                left: auto;
-            } .cc-calendar .calendar__yearsTable_bv1mi.calendar__responsive_bv1mi .calendar__button_bv1mi {
-                width: 33%;
-                margin-right: 0;
-            } .cc-calendar .calendar__inner_bv1mi {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
+        } .cc-calendar .calendar__yearsTable_1d037.calendar__responsive_1d037 .calendar__inner_1d037 {
+                width: 100%;
+            } .cc-calendar .calendar__yearsTable_1d037.calendar__responsive_1d037 .calendar__button_1d037 {
+                width: calc(33.333% - var(--gap-2xs) / 1.5);
+            } .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__inner_1d037 {
+                width: var(--calendar-inner-width);
+                margin: 0 auto
+            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__inner_1d037 {
+                    width: var(--calendar-mobile-inner-width)
+            }
+                } .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037 {
+                width: var(--calendar-select-button-width)
+            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037 {
+                    width: var(--calendar-mobile-select-button-width)
+            }
+
+                    .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037:nth-child(3n) {
+                        margin-right: var(--gap-2xs);
+                    }
+
+                    .cc-calendar .calendar__yearsTable_1d037:not(.calendar__responsive_1d037) .calendar__button_1d037:nth-child(2n) {
+                        margin-right: 0;
+                    }
+                } .cc-calendar .calendar__inner_1d037 {
         position: relative;
         overflow: hidden;
-    } .cc-calendar .calendar__button_bv1mi {
-        width: var(--calendar-select-button-width);
+    } .cc-calendar .calendar__button_1d037 {
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_bv1mi:nth-child(3n) {
+    } .cc-calendar .calendar__button_1d037:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_bv1mi {
-            width: var(--calendar-mobile-select-button-width)
-    }
-
-            .cc-calendar .calendar__button_bv1mi:nth-child(3n) {
-                margin-right: var(--gap-2xs);
-            }
-
-            .cc-calendar .calendar__button_bv1mi:nth-child(2n) {
-                margin-right: 0;
-            } .cc-calendar .calendar__button_bv1mi {
-
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_1d037 {
             height: 36px
     }
         }

package/calendar/modern/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/modern/desktop/Component.desktop.js

@@ -0,0 +1,160 @@
+import React, { forwardRef, useState, useRef, useMemo } from 'react';
+import cn from 'classnames';
+import endOfDay from 'date-fns/endOfDay';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import { hooks } from '../../../shared/modern';
+import { useLayoutEffect_SAFE_FOR_SSR, useDidUpdateEffect } from '@alfalab/hooks';
+import { DaysTable } from '../components/days-table/Component.js';
+import { Header } from '../components/header/Component.js';
+import { MonthYearHeader } from '../components/month-year-header/Component.js';
+import { MonthsTable } from '../components/months-table/Component.js';
+import { PeriodSlider } from '../components/period-slider/Component.js';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isToday';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import { limitDate } from '../utils.js';
+import { YearsTable } from '../components/years-table/Component.js';
+import { useCalendar } from '../useCalendar.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isWithinInterval';
+import '../../../button/modern/desktop';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../components/select-button/Component.js';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import '../../../icon-button/modern';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/format';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import 'react-merge-refs';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import '../components/period-slider/utils.js';
+
+const styles = {"component":"calendar__component_1dvtr","responsive":"calendar__responsive_1dvtr","period":"calendar__period_1dvtr","monthYear":"calendar__monthYear_1dvtr","container":"calendar__container_1dvtr","customScrollbar":"calendar__customScrollbar_1dvtr","nativeScrollbar":"calendar__nativeScrollbar_1dvtr","sixWeeks":"calendar__sixWeeks_1dvtr"};
+require('./desktop.css');
+
+const { useCustomWebkitScrollbar } = hooks;
+const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassName, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
+    const [view, setView] = useState(defaultView);
+    const [scrolled, setScrolled] = useState(false);
+    const scrollableNodeRef = useRef(null);
+    const firstUpdate = useRef(true);
+    const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
+    const defaultMonth = useMemo(() => startOfMonth(selected ||
+        limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
+    const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
+    const maxDate = useMemo(() => (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined), [maxDateTimestamp]);
+    const { activeMonth, weeks, months, years, canSetPrevMonth, canSetNextMonth, setMonthByDate, setPrevMonth, setNextMonth, highlighted, getDayProps, getMonthProps, getYearProps, getRootProps, } = useCalendar({
+        month,
+        defaultMonth,
+        view,
+        minDate,
+        maxDate,
+        selected,
+        offDays,
+        events,
+        holidays,
+        dayAddons,
+        onChange,
+        onMonthChange,
+    });
+    const toggleView = (newView) => {
+        if (scrollableNodeRef.current)
+            scrollableNodeRef.current.scrollTop = 0;
+        setView(view === newView ? 'days' : newView);
+    };
+    const handleScroll = (event) => setScrolled(event.currentTarget.scrollTop > 0);
+    const handlePrevArrowClick = () => {
+        // TODO: Что должны делать стрелки при view !== days?
+        setPrevMonth();
+    };
+    const handleNextArrowClick = () => setNextMonth();
+    const handleMonthClick = (event) => {
+        toggleView('months');
+        if (onMonthClick) {
+            onMonthClick(event);
+        }
+    };
+    const handleYearClick = (event) => {
+        toggleView('years');
+        if (onYearClick) {
+            onYearClick(event);
+        }
+    };
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        if (view === 'years') {
+            const listNode = scrollableNodeRef.current;
+            const selectedYearNode = listNode?.querySelector('button[tabIndex="0"]');
+            if (listNode && selectedYearNode) {
+                const topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
+                listNode.scrollTop = selectedYearNode.offsetTop - topIndent;
+                setScrolled(listNode.scrollTop > 0);
+            }
+        }
+    }, [view]);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+        }
+        else {
+            toggleView('days');
+        }
+    }, [activeMonth]);
+    useDidUpdateEffect(() => {
+        setScrolled(false);
+    }, [view]);
+    useDidUpdateEffect(() => {
+        const newMonth = value && startOfMonth(value);
+        if (newMonth && newMonth.getTime() !== activeMonth.getTime()) {
+            setMonthByDate(newMonth);
+        }
+    }, [value]);
+    const shouldUseCustomScrollbar = useCustomWebkitScrollbar();
+    return (React.createElement("div", { ...getRootProps({ ref }), className: cn('cc-calendar', styles.component, className, {
+            [styles.sixWeeks]: weeks.length === 6,
+            [styles.responsive]: responsive,
+        }), "data-test-id": dataTestId },
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        React.createElement("div", { ref: scrollableNodeRef, className: cn(styles.container, {
+                [styles.customScrollbar]: view === 'years' && shouldUseCustomScrollbar,
+                [styles.nativeScrollbar]: view === 'years' && !shouldUseCustomScrollbar,
+            }, styles[view], contentClassName), onScroll: handleScroll },
+            view === 'days' && (React.createElement(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.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
+            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
+});
+
+export { CalendarDesktop };