@alfalab/core-components 42.9.1 → 42.11.0

package/calendar/Component-72308007.d.ts

@@ -0,0 +1,186 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
+import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
+import { NavigationBarProps } from "./types-1c79e231";
+interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Текст после иконки
+     */
+    text?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид компонента
+     */
+    view: "mobile" | "desktop";
+    /**
+     * Прозрачность текста
+     */
+    textOpacity?: number;
+    /**
+     * Обработчик клика
+     */
+    onClick?: () => void;
+}
+declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
+declare const colors: readonly [
+    "tertiary",
+    "disabled",
+    "accent",
+    "primary",
+    "attention",
+    "positive",
+    "secondary",
+    "tertiary-inverted",
+    "primary-inverted",
+    "secondary-inverted",
+    "link",
+    "negative",
+    "static-primary-light",
+    "static-secondary-light",
+    "static-tertiary-light",
+    "static-primary-dark",
+    "static-secondary-dark",
+    "static-tertiary-dark",
+    "static-accent"
+];
+type Color = (typeof colors)[number];
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+type TextBaseProps = {
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
+     */
+    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+    /**
+     * HTML тег
+     */
+    tag?: "span" | "div";
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Добавляет отступы к тэгу 'p'
+     */
+    defaultMargins?: never;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+    /**
+     * Пропы для скелетона
+     */
+    skeletonProps?: TextSkeletonProps;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
+type TitleProps = Omit<NativeProps$0, "color"> & {
+    /**
+     * HTML тег
+     */
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Шрифт текста
+     */
+    font?: "styrene" | "system";
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+    /**
+     * Пропы для скелетона
+     */
+    skeletonProps?: TextSkeletonProps;
+};
+type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+declare const TitleResponsive: FC<TitleProps>;
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export { BackArrowAddonProps, BackArrowAddon, Typography, typographyPresets, TitleResponsive, NavigationBar };
+export type { TitleProps, TextProps, Color };
+export * from "./useSkeleton-1b036d4b";

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

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_aqstq","responsive":"calendar__responsive_aqstq","period":"calendar__period_aqstq","monthYear":"calendar__monthYear_aqstq","container":"calendar__container_aqstq","customScrollbar":"calendar__customScrollbar_aqstq","sixWeeks":"calendar__sixWeeks_aqstq"};
+var styles = {"component":"calendar__component_bhr9j","responsive":"calendar__responsive_bhr9j","period":"calendar__period_bhr9j","monthYear":"calendar__monthYear_bhr9j","container":"calendar__container_bhr9j","customScrollbar":"calendar__customScrollbar_bhr9j","sixWeeks":"calendar__sixWeeks_bhr9j"};
 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_1iptg","withZIndex":"calendar__withZIndex_1iptg","calendar":"calendar__calendar_1iptg","dayNames":"calendar__dayNames_1iptg","withHeader":"calendar__withHeader_1iptg","month":"calendar__month_1iptg","daysTable":"calendar__daysTable_1iptg","dayName":"calendar__dayName_1iptg"};
+var backdropTransitionStyles = {"appear":"calendar__appear_nszbd","enter":"calendar__enter_nszbd","appearActive":"calendar__appearActive_nszbd","enterActive":"calendar__enterActive_nszbd","appearDone":"calendar__appearDone_nszbd","enterDone":"calendar__enterDone_nszbd","exit":"calendar__exit_nszbd","exitActive":"calendar__exitActive_nszbd","exitDone":"calendar__exitDone_nszbd"};
+require('./backdrop-transitions.css');
+
+var styles = {"wrapper":"calendar__wrapper_vvgot","withZIndex":"calendar__withZIndex_vvgot","calendar":"calendar__calendar_vvgot","dayNames":"calendar__dayNames_vvgot","withHeader":"calendar__withHeader_vvgot","month":"calendar__month_vvgot","daysTable":"calendar__daysTable_vvgot","dayName":"calendar__dayName_vvgot","header":"calendar__header_vvgot","content":"calendar__content_vvgot"};
 require('./index.css');
 
+var transitionStyles = {"appear":"calendar__appear_167gk","enter":"calendar__enter_167gk","appearActive":"calendar__appearActive_167gk","enterActive":"calendar__enterActive_167gk","exit":"calendar__exit_167gk","exitActive":"calendar__exitActive_167gk","exitDone":"calendar__exitDone_167gk"};
+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: m4hbi */
+: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_nszbd,
+.calendar__enter_nszbd {
+    background-color: transparent;
+} .calendar__appearActive_nszbd,
+.calendar__enterActive_nszbd,
+.calendar__appearDone_nszbd,
+.calendar__enterDone_nszbd {
+    background-color: var(--color-light-bg-primary-inverted-alpha-10);
+    transition: background-color 80ms linear;
+} .calendar__exit_nszbd {
+    background-color: var(--color-light-bg-primary-inverted-alpha-10);
+} .calendar__exitActive_nszbd,
+.calendar__exitDone_nszbd {
+    background-color: transparent;
+    transition: background-color 80ms linear;
+    transition-delay: 280ms;
+}

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

@@ -1,4 +1,4 @@
-/* hash: o358h */
+/* hash: 1uak2 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -56,23 +56,24 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_1iptg {
-    background: var(--color-light-bg-primary);
-} .calendar__withZIndex_1iptg {
+} .calendar__wrapper_vvgot {
+    overflow-x: hidden;
+} .calendar__withZIndex_vvgot {
     z-index: 2;
-} .calendar__calendar_1iptg th {
+} .calendar__calendar_vvgot th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_1iptg {
+} .calendar__dayNames_vvgot {
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
     top: 0;
-    height: 32px
-} .calendar__dayNames_1iptg.calendar__withHeader_1iptg {
+    height: 32px;
+    padding: 0 6px
+} .calendar__dayNames_vvgot.calendar__withHeader_vvgot {
         top: 48px;
-    } .calendar__dayNames_1iptg th {
+    } .calendar__dayNames_vvgot th {
     height: 100%;
-} .calendar__month_1iptg {
+} .calendar__month_vvgot {
     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_1iptg {
+} .calendar__daysTable_vvgot {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_1iptg {
+} .calendar__dayName_vvgot {
     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_1iptg {
+} @media (max-width: 374px) { .calendar__dayName_vvgot {
         height: 36px
 }
-    }
+    } .calendar__header_vvgot.calendar__header_vvgot,
+.calendar__content_vvgot.calendar__content_vvgot {
+    padding-right: 0;
+    padding-left: 0;
+}