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

package/button/modern/typings.d.ts

@@ -69,6 +69,8 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+};
+type PrivateButtonProps = {
     /**
      * Основные стили компонента.
      */
@@ -80,16 +82,12 @@ type ComponentProps = {
      */
     colorStylesMap: StyleColors;
 };
-type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
-type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
-type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/button/typings.d.ts

@@ -69,6 +69,8 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+};
+type PrivateButtonProps = {
     /**
      * Основные стили компонента.
      */
@@ -80,16 +82,12 @@ type ComponentProps = {
      */
     colorStylesMap: StyleColors;
 };
-type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
-type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
-type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/calendar/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/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/Component.desktop.d.ts

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

package/calendar/Component.desktop.js

@@ -70,14 +70,16 @@ var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-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 = React.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 = 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 ||
@@ -102,33 +104,49 @@ var CalendarDesktop = React.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 = React.useCallback(function (newView) {
+    var toggleView = function (newView) {
+        if (scrollableNodeRef.current)
+            scrollableNodeRef.current.scrollTop = 0;
         setView(view === newView ? 'days' : newView);
-    }, [view]);
-    var handleScroll = React.useCallback(function (scrollTop) {
-        setScrolled(scrollTop > 0);
-    }, []);
-    var handlePrevArrowClick = React.useCallback(function () {
+    };
+    var handleScroll = function (event) {
+        return setScrolled(event.currentTarget.scrollTop > 0);
+    };
+    var handlePrevArrowClick = function () {
         // TODO: Что должны делать стрелки при view !== days?
         setPrevMonth();
-    }, [setPrevMonth]);
-    var handleNextArrowClick = React.useCallback(function () {
-        setNextMonth();
-    }, [setNextMonth]);
-    var handleMonthClick = React.useCallback(function (event) {
+    };
+    var handleNextArrowClick = function () { return setNextMonth(); };
+    var handleMonthClick = function (event) {
         toggleView('months');
         if (onMonthClick) {
             onMonthClick(event);
         }
-    }, [onMonthClick, toggleView]);
-    var handleYearClick = React.useCallback(function (event) {
+    };
+    var handleYearClick = function (event) {
         toggleView('years');
         if (onYearClick) {
             onYearClick(event);
         }
-    }, [onYearClick, toggleView]);
-    hooks.useDidUpdateEffect(function () {
-        setView('days');
+    };
+    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);
@@ -143,11 +161,11 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _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 }, 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", { className: cn__default.default(styles.container, (_c = {}, _c[styles.customScrollbar] = view === 'years', _c), styles[view]) },
-            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 })),
+        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', _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, onScroll: handleScroll, 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/Component.responsive.js

@@ -2,24 +2,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var hooks = require('@alfalab/hooks');
+var coreComponentsMq = require('../mq');
 var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 var Component_desktop = require('./Component.desktop.js');
+require('react-merge-refs');
 require('react-virtuoso');
 require('@juggle/resize-observer');
 require('classnames');
 require('date-fns/endOfDay');
-require('date-fns/getMonth');
+require('date-fns/isSameMonth');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../button/mobile');
 require('../modal/mobile');
 require('./useCalendar.js');
-require('react-merge-refs');
 require('date-fns/addMonths');
 require('date-fns/addYears');
 require('date-fns/isSameDay');
-require('date-fns/isSameMonth');
 require('date-fns/isSameYear');
 require('date-fns/setYear');
 require('date-fns/subYears');
@@ -48,6 +47,7 @@ require('date-fns/isLastDayOfMonth');
 require('date-fns/isToday');
 require('date-fns/isWithinInterval');
 require('../button/desktop');
+require('@alfalab/hooks');
 require('./components/header/Component.js');
 require('./components/month-year-header/Component.js');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
@@ -75,11 +75,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
     var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
-    var view = hooks.useMedia([
-        ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
-        ['desktop', "(min-width: ".concat(breakpoint, "px)")],
-    ], 'desktop')[0];
-    return view === 'desktop' ? (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
+    return isDesktop ? (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });
 
 exports.CalendarResponsive = CalendarResponsive;

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

@@ -2,11 +2,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var reactVirtuoso = require('react-virtuoso');
 var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var endOfDay = require('date-fns/endOfDay');
-var getMonth = require('date-fns/getMonth');
+var isSameMonth = require('date-fns/isSameMonth');
 var startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var mobile$1 = require('../../../button/mobile');
@@ -22,7 +23,6 @@ require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('../select-button/Component.js');
 require('../../../button/desktop');
 require('../months-table/Component.js');
-require('date-fns/isSameMonth');
 require('date-fns/isThisMonth');
 require('../period-slider/Component.js');
 require('date-fns/endOfWeek');
@@ -47,7 +47,6 @@ require('date-fns/startOfYear');
 require('../years-table/Component.js');
 require('date-fns/isSameYear');
 require('date-fns/isThisYear');
-require('react-merge-refs');
 require('date-fns/isSameDay');
 require('date-fns/setYear');
 require('date-fns/subYears');
@@ -71,30 +70,28 @@ require('date-fns/isWithinInterval');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
-var getMonth__default = /*#__PURE__*/_interopDefaultCompat(getMonth);
+var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-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.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 = React.useMemo(function () {
-        var currentMonthIndex = new Date().getMonth();
-        var monthIndex = currentMonthIndex;
-        if (value)
-            monthIndex = getMonth__default.default(value);
-        if (selectedFrom)
-            monthIndex = getMonth__default.default(selectedFrom);
-        return yearsAmount * 12 + monthIndex;
-    }, [selectedFrom, value, yearsAmount]);
     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]);
@@ -115,7 +112,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 = React.useMemo(function () {
         var eventsMap = utils.dateArrayToHashTable(events || []);
         var offDaysMap = utils.dateArrayToHashTable(offDays || []);
@@ -125,6 +122,7 @@ var CalendarMonthOnlyView = function (_a) {
         var nextMonths = [];
         var date = new Date();
         var currentYear = date.getFullYear();
+        var currYearMonths = utils.generateMonths(date, {});
         for (var i = 0; i < yearsAmount; i++) {
             var prevYear = date.setFullYear(currentYear - (i + 1));
             var nextYear = date.setFullYear(currentYear + (i + 1));
@@ -133,7 +131,7 @@ var CalendarMonthOnlyView = function (_a) {
             prevMonths.unshift.apply(prevMonths, prevYearMonths);
             nextMonths.push.apply(nextMonths, nextYearMonths);
         }
-        var generatedMonths = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], prevMonths, true), months, true), nextMonths, true);
+        var generatedMonths = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], prevMonths, true), currYearMonths, true), nextMonths, true);
         return generatedMonths.map(function (item) { return (tslib.__assign(tslib.__assign({}, item), { weeks: utils.generateWeeks(item.date, {
                 minDate: minDate,
                 maxDate: maxDate,
@@ -143,7 +141,11 @@ var CalendarMonthOnlyView = function (_a) {
                 holidaysMap: holidaysMap,
                 dayAddonsMap: dayAddonsMap,
             }), title: "".concat(utils.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 = React.useMemo(function () {
+        var date = value || selectedFrom || Date.now();
+        return activeMonths.findIndex(function (m) { return isSameMonth__default.default(date, m.date); });
+    }, [activeMonths, selectedFrom, value]);
     var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
         onMonthTitleClick ? (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
@@ -151,14 +153,12 @@ var CalendarMonthOnlyView = function (_a) {
             " ",
             activeMonths[index].title,
             " ")),
-        React__default.default.createElement(components_daysTable_Component.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__default.default.createElement(reactVirtuoso.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__default.default.createElement(components_daysTable_Component.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__default.default.createElement(reactVirtuoso.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 = React.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 = tslib.__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 = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
     var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
@@ -169,9 +169,11 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (onChange)
             onChange();
     };
-    var renderDayNames = function () { return (React__default.default.createElement("table", { className: styles.dayNames },
-        React__default.default.createElement("thead", null,
-            React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); };
+    var renderDayNames = function () {
+        return monthOnlyView ? (React__default.default.createElement("table", { className: styles.dayNames },
+            React__default.default.createElement("thead", null,
+                React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))) : null;
+    };
     var renderContent = function () {
         var commonProps = {
             value: value,
@@ -184,7 +186,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar) }, commonProps, restProps)));
+        return (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar), headerClassName: styles.header, contentClassName: styles.content }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {
@@ -201,11 +203,16 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         }
         return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
-    return (React__default.default.createElement("div", { className: cn__default.default(className, styles.component), ref: ref, "data-test-id": dataTestId },
-        React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: function (node) { return setModalRef(node); }, className: styles.modal, wrapperClassName: styles.wrapper },
-            hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn__default.default((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
-            React__default.default.createElement(mobile.ModalMobile.Content, { flex: true }, renderContent()),
-            React__default.default.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn__default.default((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter()))));
+    return (React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: mergeRefs__default.default([function (node) { return setModalRef(node); }, ref]), className: className, wrapperClassName: styles.wrapper, transitionProps: {
+            timeout: 360,
+            classNames: transitionStyles,
+        }, backdropProps: {
+            transitionClassNames: backdropTransitionStyles,
+            timeout: 360,
+        } },
+        hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn__default.default((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
+        React__default.default.createElement(mobile.ModalMobile.Content, { flex: true }, renderContent()),
+        React__default.default.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn__default.default((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter())));
 });
 
 exports.CalendarMobile = CalendarMobile;

package/calendar/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/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;
+}

package/calendar/components/calendar-mobile/index.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var components_calendarMobile_Component = require('./Component.js');
 require('tslib');
 require('react');
+require('react-merge-refs');
 require('react-virtuoso');
 require('@juggle/resize-observer');
 require('classnames');
 require('date-fns/endOfDay');
-require('date-fns/getMonth');
+require('date-fns/isSameMonth');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../../../button/mobile');
@@ -46,7 +47,6 @@ require('../month-year-header/Component.js');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('../select-button/Component.js');
 require('../months-table/Component.js');
-require('date-fns/isSameMonth');
 require('date-fns/isThisMonth');
 require('../period-slider/Component.js');
 require('../../../icon-button');
@@ -65,7 +65,6 @@ require('../years-table/Component.js');
 require('date-fns/isSameYear');
 require('date-fns/isThisYear');
 require('../../useCalendar.js');
-require('react-merge-refs');
 require('date-fns/setYear');
 require('date-fns/subYears');
 

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

@@ -0,0 +1,31 @@
+/* hash: 204zl */
+: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 */
+} :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_1965y,
+.calendar__enter_1965y {
+    transform: translateX(100%);
+} .calendar__appearActive_1965y,
+.calendar__enterActive_1965y {
+    transform: translateX(0);
+    transition: transform 280ms ease-in-out;
+    transition-delay: 80ms;
+} .calendar__exit_1965y {
+    transform: translateX(0);
+} .calendar__exitActive_1965y,
+.calendar__exitDone_1965y {
+    transform: translateX(100%);
+    transition: transform 280ms ease-in-out;
+}