@alfalab/core-components 42.10.0 → 42.12.0-beta.0

package/calendar/desktop.css

@@ -1,4 +1,4 @@
-/* hash: o60tm */
+/* hash: 1po3i */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
@@ -15,6 +15,7 @@
 } :root {
     --border-radius-circle: 50%;
 } :root {
+    --gap-2xs: 4px;
     --gap-m: 16px;
 } :root {
 } :root {
@@ -43,27 +44,27 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_gojgf {
+} .calendar__component_1phzl {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_gojgf {
+} @media (max-width: 374px) { .calendar__component_1phzl {
         align-items: center;
         width: 100%;
         height: 321px
 }
-    } .calendar__component_gojgf.calendar__responsive_gojgf {
+    } .calendar__component_1phzl.calendar__responsive_1phzl {
         width: 100%
-    } .calendar__component_gojgf.calendar__responsive_gojgf .calendar__period_gojgf {
+    } .calendar__component_1phzl.calendar__responsive_1phzl .calendar__period_1phzl {
             width: 100%;
-        } .calendar__component_gojgf.calendar__responsive_gojgf .calendar__monthYear_gojgf {
+        } .calendar__component_1phzl.calendar__responsive_1phzl .calendar__monthYear_1phzl {
             width: 100%;
-        } .calendar__component_gojgf.calendar__responsive_gojgf .calendar__container_gojgf {
+        } .calendar__component_1phzl.calendar__responsive_1phzl .calendar__container_1phzl {
             width: 100%;
-        } .calendar__container_gojgf {
+        } .calendar__container_1phzl {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,17 +72,16 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_gojgf.calendar__customScrollbar_gojgf {
+} .calendar__container_1phzl.calendar__customScrollbar_1phzl {
         overflow: auto;
-        overflow: overlay;
         cursor: auto;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar {
         width: 12px;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-track {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-track-piece {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-thumb {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-radius: var(--border-radius-circle) / 6px;
         border-color: transparent;
@@ -89,38 +89,39 @@
         border-width: 4px;
         background-clip: padding-box;
         min-height: 40px;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-thumb:hover {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-thumb:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-thumb:active {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-resizer {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-button,
-    .calendar__container_gojgf.calendar__customScrollbar_gojgf::-webkit-scrollbar-corner {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-button,
+    .calendar__container_1phzl.calendar__customScrollbar_1phzl::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_gojgf.calendar__customScrollbar_gojgf {
+    } .calendar__container_1phzl.calendar__customScrollbar_1phzl {
+        padding-right: var(--gap-2xs);
 
         display: block;
-    } @media (max-width: 374px) { .calendar__container_gojgf {
+    } @media (max-width: 374px) { .calendar__container_1phzl {
         width: 288px
 }
-    } .calendar__sixWeeks_gojgf {
+    } .calendar__sixWeeks_1phzl {
     height: 388px
-} @media (max-width: 374px) { .calendar__sixWeeks_gojgf {
+} @media (max-width: 374px) { .calendar__sixWeeks_1phzl {
         height: 361px
 }
-    } .calendar__period_gojgf {
+    } .calendar__period_1phzl {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_gojgf {
+} @media (max-width: 374px) { .calendar__period_1phzl {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_gojgf {
+    } .calendar__monthYear_1phzl {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_gojgf {
+} @media (max-width: 374px) { .calendar__monthYear_1phzl {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/Component-10db897e.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NavigationBarProps } from "./types-1c79e231";
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export * from "./Component-69921c40";
+export { NavigationBar };

package/calendar/esm/Component-89f0cb07.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-89f0cb07";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

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

@@ -7,6 +7,14 @@ type CalendarDesktopProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс шапки десктопного календаря
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс контента десктопного календаря
+     */
+    contentClassName?: string;
     /**
      * Вид по умолчанию (выбор дней, месяцев, лет)
      */

package/calendar/esm/Component.desktop.js

@@ -1,10 +1,10 @@
 import { __assign } from 'tslib';
-import React, { forwardRef, useState, useMemo, useCallback } from 'react';
+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 { useDidUpdateEffect } from '@alfalab/hooks';
+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';
@@ -60,14 +60,16 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import './components/period-slider/utils.js';
 
-var styles = {"component":"calendar__component_gojgf","responsive":"calendar__responsive_gojgf","period":"calendar__period_gojgf","monthYear":"calendar__monthYear_gojgf","container":"calendar__container_gojgf","customScrollbar":"calendar__customScrollbar_gojgf","sixWeeks":"calendar__sixWeeks_gojgf"};
+var styles = {"component":"calendar__component_1phzl","responsive":"calendar__responsive_1phzl","period":"calendar__period_1phzl","monthYear":"calendar__monthYear_1phzl","container":"calendar__container_1phzl","customScrollbar":"calendar__customScrollbar_1phzl","sixWeeks":"calendar__sixWeeks_1phzl"};
 require('./desktop.css');
 
 var CalendarDesktop = forwardRef(function (_a, ref) {
     var _b, _c;
-    var className = _a.className, _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 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 = useState(defaultView), view = _k[0], setView = _k[1];
     var _l = useState(false), scrolled = _l[0], setScrolled = _l[1];
+    var scrollableNodeRef = useRef(null);
+    var firstUpdate = useRef(true);
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = useMemo(function () {
         return startOfMonth(selected ||
@@ -92,33 +94,49 @@ var CalendarDesktop = forwardRef(function (_a, ref) {
         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 = useCallback(function (newView) {
+    var toggleView = function (newView) {
+        if (scrollableNodeRef.current)
+            scrollableNodeRef.current.scrollTop = 0;
         setView(view === newView ? 'days' : newView);
-    }, [view]);
-    var handleScroll = useCallback(function (scrollTop) {
-        setScrolled(scrollTop > 0);
-    }, []);
-    var handlePrevArrowClick = useCallback(function () {
+    };
+    var handleScroll = function (event) {
+        return setScrolled(event.currentTarget.scrollTop > 0);
+    };
+    var handlePrevArrowClick = function () {
         // TODO: Что должны делать стрелки при view !== days?
         setPrevMonth();
-    }, [setPrevMonth]);
-    var handleNextArrowClick = useCallback(function () {
-        setNextMonth();
-    }, [setNextMonth]);
-    var handleMonthClick = useCallback(function (event) {
+    };
+    var handleNextArrowClick = function () { return setNextMonth(); };
+    var handleMonthClick = function (event) {
         toggleView('months');
         if (onMonthClick) {
             onMonthClick(event);
         }
-    }, [onMonthClick, toggleView]);
-    var handleYearClick = useCallback(function (event) {
+    };
+    var handleYearClick = function (event) {
         toggleView('years');
         if (onYearClick) {
             onYearClick(event);
         }
-    }, [onYearClick, toggleView]);
-    useDidUpdateEffect(function () {
-        setView('days');
+    };
+    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]);
+    useLayoutEffect_SAFE_FOR_SSR(function () {
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+        }
+        else {
+            toggleView('days');
+        }
     }, [activeMonth]);
     useDidUpdateEffect(function () {
         setScrolled(false);
@@ -133,11 +151,11 @@ var CalendarDesktop = forwardRef(function (_a, ref) {
             _b[styles.sixWeeks] = weeks.length === 6,
             _b[styles.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
-        React.createElement("div", { className: cn(styles.container, (_c = {}, _c[styles.customScrollbar] = view === 'years', _c), styles[view]) },
-            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
+        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, (_c = {}, _c[styles.customScrollbar] = view === 'years', _c), 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, onScroll: handleScroll, responsive: responsive })))));
+            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, responsive: responsive })))));
 });
 
 export { CalendarDesktop };

package/calendar/esm/Component.responsive.js

@@ -1,22 +1,21 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '../../mq/esm';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
 import { CalendarDesktop } from './Component.desktop.js';
+import 'react-merge-refs';
 import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
-import 'date-fns/getMonth';
+import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
-import 'react-merge-refs';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
 import 'date-fns/isSameDay';
-import 'date-fns/isSameMonth';
 import 'date-fns/isSameYear';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
@@ -44,6 +43,7 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/esm/desktop';
+import '@alfalab/hooks';
 import './components/header/Component.js';
 import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
@@ -69,11 +69,8 @@ import './components/period-slider/utils.js';
 
 var CalendarResponsive = forwardRef(function (_a, ref) {
     var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
-    var view = useMedia([
-        ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
-        ['desktop', "(min-width: ".concat(breakpoint, "px)")],
-    ], 'desktop')[0];
-    return view === 'desktop' ? (React.createElement(CalendarDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarMobile, __assign({}, restProps, { ref: ref })));
+    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
+    return isDesktop ? (React.createElement(CalendarDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarMobile, __assign({}, restProps, { ref: ref })));
 });
 
 export { CalendarResponsive };

package/calendar/esm/components/calendar-mobile/Component.js

@@ -1,10 +1,11 @@
 import { __rest, __assign, __spreadArray } from 'tslib';
 import React, { forwardRef, useState, useMemo } from 'react';
+import mergeRefs from 'react-merge-refs';
 import { Virtuoso } from 'react-virtuoso';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import endOfDay from 'date-fns/endOfDay';
-import getMonth from 'date-fns/getMonth';
+import isSameMonth from 'date-fns/isSameMonth';
 import startOfDay from 'date-fns/startOfDay';
 import startOfMonth from 'date-fns/startOfMonth';
 import { ButtonMobile } from '../../../../button/esm/mobile';
@@ -20,7 +21,6 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../../../../button/esm/desktop';
 import '../months-table/Component.js';
-import 'date-fns/isSameMonth';
 import 'date-fns/isThisMonth';
 import '../period-slider/Component.js';
 import 'date-fns/endOfWeek';
@@ -57,7 +57,6 @@ import 'date-fns/subMonths';
 import '../years-table/Component.js';
 import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
-import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 import 'react-transition-group';
@@ -66,24 +65,21 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
 import '../period-slider/utils.js';
 
-var styles = {"wrapper":"calendar__wrapper_im1r0","withZIndex":"calendar__withZIndex_im1r0","calendar":"calendar__calendar_im1r0","dayNames":"calendar__dayNames_im1r0","withHeader":"calendar__withHeader_im1r0","month":"calendar__month_im1r0","daysTable":"calendar__daysTable_im1r0","dayName":"calendar__dayName_im1r0"};
+var backdropTransitionStyles = {"appear":"calendar__appear_1wq7n","enter":"calendar__enter_1wq7n","appearActive":"calendar__appearActive_1wq7n","enterActive":"calendar__enterActive_1wq7n","appearDone":"calendar__appearDone_1wq7n","enterDone":"calendar__enterDone_1wq7n","exit":"calendar__exit_1wq7n","exitActive":"calendar__exitActive_1wq7n","exitDone":"calendar__exitDone_1wq7n"};
+require('./backdrop-transitions.css');
+
+var styles = {"wrapper":"calendar__wrapper_1bt1m","withZIndex":"calendar__withZIndex_1bt1m","calendar":"calendar__calendar_1bt1m","dayNames":"calendar__dayNames_1bt1m","withHeader":"calendar__withHeader_1bt1m","month":"calendar__month_1bt1m","daysTable":"calendar__daysTable_1bt1m","dayName":"calendar__dayName_1bt1m","header":"calendar__header_1bt1m","content":"calendar__content_1bt1m"};
 require('./index.css');
 
+var transitionStyles = {"appear":"calendar__appear_1965y","enter":"calendar__enter_1965y","appearActive":"calendar__appearActive_1965y","enterActive":"calendar__enterActive_1965y","exit":"calendar__exit_1965y","exitActive":"calendar__exitActive_1965y","exitDone":"calendar__exitDone_1965y"};
+require('./transitions.css');
+
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
 if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
     var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b, dayAddons = _a.dayAddons, _c = _a.shape, shape = _c === void 0 ? 'rounded' : _c, scrollableContainer = _a.scrollableContainer;
-    var initialMonthIndex = useMemo(function () {
-        var currentMonthIndex = new Date().getMonth();
-        var monthIndex = currentMonthIndex;
-        if (value)
-            monthIndex = getMonth(value);
-        if (selectedFrom)
-            monthIndex = getMonth(selectedFrom);
-        return yearsAmount * 12 + monthIndex;
-    }, [selectedFrom, value, yearsAmount]);
     var month = useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [monthTimestamp]);
     var minDate = useMemo(function () { return (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined); }, [minDateTimestamp]);
     var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
@@ -104,7 +100,7 @@ var CalendarMonthOnlyView = function (_a) {
         onChange: onChange,
         onMonthChange: onMonthChange,
         dayAddons: dayAddons,
-    }), activeMonth = _d.activeMonth, months = _d.months, highlighted = _d.highlighted, getDayProps = _d.getDayProps;
+    }), activeMonth = _d.activeMonth, highlighted = _d.highlighted, getDayProps = _d.getDayProps;
     var activeMonths = useMemo(function () {
         var eventsMap = dateArrayToHashTable(events || []);
         var offDaysMap = dateArrayToHashTable(offDays || []);
@@ -114,6 +110,7 @@ var CalendarMonthOnlyView = function (_a) {
         var nextMonths = [];
         var date = new Date();
         var currentYear = date.getFullYear();
+        var currYearMonths = generateMonths(date, {});
         for (var i = 0; i < yearsAmount; i++) {
             var prevYear = date.setFullYear(currentYear - (i + 1));
             var nextYear = date.setFullYear(currentYear + (i + 1));
@@ -122,7 +119,7 @@ var CalendarMonthOnlyView = function (_a) {
             prevMonths.unshift.apply(prevMonths, prevYearMonths);
             nextMonths.push.apply(nextMonths, nextYearMonths);
         }
-        var generatedMonths = __spreadArray(__spreadArray(__spreadArray([], prevMonths, true), months, true), nextMonths, true);
+        var generatedMonths = __spreadArray(__spreadArray(__spreadArray([], prevMonths, true), currYearMonths, true), nextMonths, true);
         return generatedMonths.map(function (item) { return (__assign(__assign({}, item), { weeks: generateWeeks(item.date, {
                 minDate: minDate,
                 maxDate: maxDate,
@@ -132,7 +129,11 @@ var CalendarMonthOnlyView = function (_a) {
                 holidaysMap: holidaysMap,
                 dayAddonsMap: dayAddonsMap,
             }), title: "".concat(monthName(item.date), " ").concat(item.date.getFullYear()) })); });
-    }, [events, offDays, holidays, dayAddons, months, yearsAmount, minDate, maxDate, selected]);
+    }, [events, offDays, holidays, dayAddons, yearsAmount, minDate, maxDate, selected]);
+    var initialMonthIndex = useMemo(function () {
+        var date = value || selectedFrom || Date.now();
+        return activeMonths.findIndex(function (m) { return isSameMonth(date, m.date); });
+    }, [activeMonths, selectedFrom, value]);
     var renderMonth = function (index) { return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
         onMonthTitleClick ? (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
@@ -140,14 +141,12 @@ var CalendarMonthOnlyView = function (_a) {
             " ",
             activeMonths[index].title,
             " ")),
-        React.createElement(DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
-    if (!scrollableContainer)
-        return null;
-    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex, align: 'center' }, increaseViewportBy: 1000, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true }));
+        React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
+    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true }));
 };
 var CalendarMobile = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, restProps = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
+    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick; _a.dataTestId; var open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, restProps = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
     var _k = useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
@@ -158,9 +157,11 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         if (onChange)
             onChange();
     };
-    var renderDayNames = function () { return (React.createElement("table", { className: styles.dayNames },
-        React.createElement("thead", null,
-            React.createElement("tr", null, WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); };
+    var renderDayNames = function () {
+        return monthOnlyView ? (React.createElement("table", { className: styles.dayNames },
+            React.createElement("thead", null,
+                React.createElement("tr", null, WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))) : null;
+    };
     var renderContent = function () {
         var commonProps = {
             value: value,
@@ -173,7 +174,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React.createElement(CalendarMonthOnlyView, __assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar) }, commonProps, restProps)));
+        return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), headerClassName: styles.header, contentClassName: styles.content }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {
@@ -190,11 +191,16 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         }
         return (React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
-    return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
-        React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: function (node) { return setModalRef(node); }, className: styles.modal, wrapperClassName: styles.wrapper },
-            hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
-            React.createElement(ModalMobile.Content, { flex: true }, renderContent()),
-            React.createElement(ModalMobile.Footer, { sticky: true, className: cn((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter()))));
+    return (React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: mergeRefs([function (node) { return setModalRef(node); }, ref]), className: className, wrapperClassName: styles.wrapper, transitionProps: {
+            timeout: 360,
+            classNames: transitionStyles,
+        }, backdropProps: {
+            transitionClassNames: backdropTransitionStyles,
+            timeout: 360,
+        } },
+        hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
+        React.createElement(ModalMobile.Content, { flex: true }, renderContent()),
+        React.createElement(ModalMobile.Footer, { sticky: true, className: cn((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter())));
 });
 
 export { CalendarMobile };

package/calendar/esm/components/calendar-mobile/backdrop-transitions.css

@@ -0,0 +1,34 @@
+/* hash: 1pglc */
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-bg-primary-inverted-alpha-10: rgba(18, 18, 18, 0.1);
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .calendar__appear_1wq7n,
+.calendar__enter_1wq7n {
+    background-color: transparent;
+} .calendar__appearActive_1wq7n,
+.calendar__enterActive_1wq7n,
+.calendar__appearDone_1wq7n,
+.calendar__enterDone_1wq7n {
+    background-color: var(--color-light-bg-primary-inverted-alpha-10);
+    transition: background-color 80ms linear;
+} .calendar__exit_1wq7n {
+    background-color: var(--color-light-bg-primary-inverted-alpha-10);
+} .calendar__exitActive_1wq7n,
+.calendar__exitDone_1wq7n {
+    background-color: transparent;
+    transition: background-color 80ms linear;
+    transition-delay: 280ms;
+}

package/calendar/esm/components/calendar-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: xx6p1 */
+/* hash: 1we77 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -56,23 +56,24 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_im1r0 {
-    background: var(--color-light-bg-primary);
-} .calendar__withZIndex_im1r0 {
+} .calendar__wrapper_1bt1m {
+    overflow-x: hidden;
+} .calendar__withZIndex_1bt1m {
     z-index: 2;
-} .calendar__calendar_im1r0 th {
+} .calendar__calendar_1bt1m th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_im1r0 {
+} .calendar__dayNames_1bt1m {
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
     top: 0;
-    height: 32px
-} .calendar__dayNames_im1r0.calendar__withHeader_im1r0 {
+    height: 32px;
+    padding: 0 6px
+} .calendar__dayNames_1bt1m.calendar__withHeader_1bt1m {
         top: 48px;
-    } .calendar__dayNames_im1r0 th {
+    } .calendar__dayNames_1bt1m th {
     height: 100%;
-} .calendar__month_im1r0 {
+} .calendar__month_1bt1m {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -81,18 +82,22 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_im1r0 {
+} .calendar__daysTable_1bt1m {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_im1r0 {
+} .calendar__dayName_1bt1m {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
-} @media (max-width: 374px) { .calendar__dayName_im1r0 {
+} @media (max-width: 374px) { .calendar__dayName_1bt1m {
         height: 36px
 }
-    }
+    } .calendar__header_1bt1m.calendar__header_1bt1m,
+.calendar__content_1bt1m.calendar__content_1bt1m {
+    padding-right: 0;
+    padding-left: 0;
+}