@alfalab/core-components 42.10.0 → 42.11.0

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

@@ -1,4 +1,4 @@
-/* hash: n12kv */
+/* hash: iduys */
 :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 */
@@ -49,38 +49,38 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__monthsTable_1wi1q {
+} .cc-calendar .calendar__monthsTable_1r8v3 {
         display: flex;
         flex-wrap: wrap;
         width: var(--calendar-inner-width);
         justify-content: flex-start
-    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1wi1q {
+    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1r8v3 {
             width: var(--calendar-mobile-inner-width);
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__monthsTable_1wi1q.calendar__responsive_1wi1q {
+        } .cc-calendar .calendar__monthsTable_1r8v3.calendar__responsive_1r8v3 {
             width: 100%;
             justify-content: space-between
-        } .cc-calendar .calendar__monthsTable_1wi1q.calendar__responsive_1wi1q .calendar__button_1wi1q {
+        } .cc-calendar .calendar__monthsTable_1r8v3.calendar__responsive_1r8v3 .calendar__button_1r8v3 {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1wi1q {
+            } .cc-calendar .calendar__button_1r8v3 {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1wi1q:nth-child(3n) {
+    } .cc-calendar .calendar__button_1r8v3:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1wi1q {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_1r8v3 {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_1wi1q:nth-child(3n) {
+            .cc-calendar .calendar__button_1r8v3:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_1wi1q:nth-child(2n) {
+            .cc-calendar .calendar__button_1r8v3:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1wi1q {
+            } .cc-calendar .calendar__button_1r8v3 {
 
             height: 36px
     }

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

@@ -47,7 +47,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfWeek__default = /*#__PURE__*/_interopDefaultCompat(endOfWeek);
 var startOfWeek__default = /*#__PURE__*/_interopDefaultCompat(startOfWeek);
 
-var styles = {"component":"calendar__component_1a3sg","period":"calendar__period_1a3sg","clicablePeriod":"calendar__clicablePeriod_1a3sg","empty":"calendar__empty_1a3sg","arrow":"calendar__arrow_1a3sg","full":"calendar__full_1a3sg","yearSelectorButton":"calendar__yearSelectorButton_1a3sg"};
+var styles = {"component":"calendar__component_1empx","period":"calendar__period_1empx","clicablePeriod":"calendar__clicablePeriod_1empx","empty":"calendar__empty_1empx","arrow":"calendar__arrow_1empx","full":"calendar__full_1empx","yearSelectorButton":"calendar__yearSelectorButton_1empx"};
 require('./index.css');
 
 var PeriodSlider = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: a8jki */
+/* hash: 3gaas */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
@@ -42,37 +42,37 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1a3sg {
+} .calendar__component_1empx {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .calendar__period_1a3sg {
+} .calendar__period_1empx {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
     line-height: 24px;
     text-align: center
-} @media (max-width: 374px) { .calendar__period_1a3sg {
+} @media (max-width: 374px) { .calendar__period_1empx {
         width: auto;
         flex-grow: 1
 }
-    } .calendar__clicablePeriod_1a3sg {
+    } .calendar__clicablePeriod_1empx {
     cursor: pointer;
-} .calendar__empty_1a3sg {
+} .calendar__empty_1empx {
     color: var(--color-light-text-secondary);
-} .calendar__arrow_1a3sg {
+} .calendar__arrow_1empx {
     position: absolute;
     top: 4px
-} .calendar__arrow_1a3sg:first-child {
+} .calendar__arrow_1empx:first-child {
         left: 0;
-    } .calendar__arrow_1a3sg:last-child {
+    } .calendar__arrow_1empx:last-child {
         right: 0;
         transform: rotateY(180deg);
-    } @media (max-width: 374px) { .calendar__full_1a3sg .calendar__arrow_1a3sg {
+    } @media (max-width: 374px) { .calendar__full_1empx .calendar__arrow_1empx {
         display: none
 }
-    } .calendar__yearSelectorButton_1a3sg {
+    } .calendar__yearSelectorButton_1empx {
     margin-left: var(--gap-xs);
 }

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

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"button":"calendar__button_1rbpd","filled":"calendar__filled_1rbpd","outlined":"calendar__outlined_1rbpd","selected":"calendar__selected_1rbpd"};
+var styles = {"button":"calendar__button_5eg8h","filled":"calendar__filled_5eg8h","outlined":"calendar__outlined_5eg8h","selected":"calendar__selected_5eg8h"};
 require('./index.css');
 
 var SelectButton = React.forwardRef(function (_a, ref) {

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

@@ -1,4 +1,4 @@
-/* hash: 570cc */
+/* hash: mec6j */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary-inverted: #121212;
@@ -45,7 +45,7 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__button_1rbpd {
+} .cc-calendar .calendar__button_5eg8h {
         font-size: 16px;
         line-height: 24px;
         font-weight: 400;
@@ -55,22 +55,22 @@
         padding: 0 var(--gap-xs);
         background-color: transparent;
         border-radius: var(--border-radius-l)
-    } .cc-calendar .calendar__button_1rbpd:not(:disabled):hover {
+    } .cc-calendar .calendar__button_5eg8h:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary);
             color: var(--color-light-text-primary);
-        } .cc-calendar .calendar__button_1rbpd.calendar__filled_1rbpd {
+        } .cc-calendar .calendar__button_5eg8h.calendar__filled_5eg8h {
             background-color: var(--color-light-bg-tertiary)
-        } .cc-calendar .calendar__button_1rbpd.calendar__filled_1rbpd:not(:disabled):hover {
+        } .cc-calendar .calendar__button_5eg8h.calendar__filled_5eg8h:not(:disabled):hover {
                 background-color: var(--color-light-bg-tertiary-shade-7);
-            } .cc-calendar .calendar__button_1rbpd.calendar__outlined_1rbpd {
+            } .cc-calendar .calendar__button_5eg8h.calendar__outlined_5eg8h {
             border: 1px solid var(--calendar-select-button-today-border-color);
-        } .cc-calendar .calendar__button_1rbpd.calendar__selected_1rbpd,
-        .cc-calendar .calendar__button_1rbpd.calendar__selected_1rbpd:disabled {
+        } .cc-calendar .calendar__button_5eg8h.calendar__selected_5eg8h,
+        .cc-calendar .calendar__button_5eg8h.calendar__selected_5eg8h:disabled {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted)
-        } .cc-calendar .calendar__button_1rbpd.calendar__selected_1rbpd:not(:disabled):hover, .cc-calendar .calendar__button_1rbpd.calendar__selected_1rbpd:disabled:not(:disabled):hover {
+        } .cc-calendar .calendar__button_5eg8h.calendar__selected_5eg8h:not(:disabled):hover, .cc-calendar .calendar__button_5eg8h.calendar__selected_5eg8h:disabled:not(:disabled):hover {
                 background-color: var(--calendar-select-button-selected-background);
                 color: var(--color-light-text-primary-inverted);
-            } .cc-calendar .calendar__button_1rbpd > * {
+            } .cc-calendar .calendar__button_5eg8h > * {
             flex-grow: 1;
         }

package/calendar/components/years-table/Component.d.ts

@@ -12,10 +12,6 @@ type YearsTableProps = {
      * Доп. пропсы для переданного года
      */
     getYearProps: (year: Date) => Record<string, unknown>;
-    /**
-     * Обработчик скролла
-     */
-    onScroll: (scrollTop: number) => void;
     /**
      * Должен ли календарь подстраиваться под ширину родителя.
      */

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

@@ -5,7 +5,6 @@ var React = require('react');
 var cn = require('classnames');
 var isSameYear = require('date-fns/isSameYear');
 var isThisYear = require('date-fns/isThisYear');
-var hooks = require('@alfalab/hooks');
 var components_selectButton_Component = require('../select-button/Component.js');
 require('../../../button/desktop');
 
@@ -16,34 +15,20 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var isSameYear__default = /*#__PURE__*/_interopDefaultCompat(isSameYear);
 var isThisYear__default = /*#__PURE__*/_interopDefaultCompat(isThisYear);
 
-var styles = {"yearsTable":"calendar__yearsTable_c7ejh","responsive":"calendar__responsive_c7ejh","inner":"calendar__inner_c7ejh","button":"calendar__button_c7ejh"};
+var styles = {"yearsTable":"calendar__yearsTable_10is2","responsive":"calendar__responsive_10is2","inner":"calendar__inner_10is2","button":"calendar__button_10is2"};
 require('./index.css');
 
 var YearsTable = function (_a) {
     var _b;
-    var selectedYear = _a.selectedYear, _c = _a.years, years = _c === void 0 ? [] : _c, getYearProps = _a.getYearProps, onScroll = _a.onScroll, responsive = _a.responsive;
-    var ref = React.useRef(null);
-    var view = React.useCallback(function (year) {
+    var selectedYear = _a.selectedYear, _c = _a.years, years = _c === void 0 ? [] : _c, getYearProps = _a.getYearProps, responsive = _a.responsive;
+    var view = function (year) {
         if (selectedYear && isSameYear__default.default(selectedYear, year))
             return 'selected';
         if (isThisYear__default.default(year))
             return 'outlined';
         return 'default';
-    }, [selectedYear]);
-    var handleScroll = React.useCallback(function (event) {
-        onScroll(event.currentTarget.scrollTop);
-    }, [onScroll]);
-    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
-        var listNode = ref.current;
-        var selector = ".".concat(styles.button, "[tabIndex=\"0\"]");
-        var selectedYearNode = listNode && listNode.querySelector(selector);
-        if (listNode && selectedYearNode) {
-            var topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
-            listNode.scrollTop = selectedYearNode.offsetTop - topIndent;
-            onScroll(listNode.scrollTop);
-        }
-    }, [onScroll, selectedYear]);
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.yearsTable, (_b = {}, _b[styles.responsive] = responsive, _b)), onScroll: handleScroll, ref: ref },
+    };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.yearsTable, (_b = {}, _b[styles.responsive] = responsive, _b)) },
         React__default.default.createElement("div", { className: styles.inner }, years.map(function (year) { return (React__default.default.createElement(components_selectButton_Component.SelectButton, tslib.__assign({}, getYearProps(year), { key: year.getFullYear(), view: view(year), className: styles.button }), year.getFullYear())); }))));
 };
 

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

@@ -1,4 +1,4 @@
-/* hash: tnc2a */
+/* hash: 1aunw */
 :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 */
@@ -49,49 +49,43 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_c7ejh {
+} .cc-calendar .calendar__yearsTable_10is2 {
         overflow: auto;
         overflow-x: hidden;
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_c7ejh {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_10is2 {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_c7ejh.calendar__responsive_c7ejh {
+        } .cc-calendar .calendar__yearsTable_10is2.calendar__responsive_10is2 {
             justify-content: space-between
-        } .cc-calendar .calendar__yearsTable_c7ejh.calendar__responsive_c7ejh .calendar__inner_c7ejh {
+        } .cc-calendar .calendar__yearsTable_10is2.calendar__responsive_10is2 .calendar__inner_10is2 {
                 left: auto;
-            } .cc-calendar .calendar__yearsTable_c7ejh.calendar__responsive_c7ejh .calendar__button_c7ejh {
+            } .cc-calendar .calendar__yearsTable_10is2.calendar__responsive_10is2 .calendar__button_10is2 {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__inner_c7ejh {
+            } .cc-calendar .calendar__inner_10is2 {
         display: flex;
         flex-wrap: wrap;
-        justify-content: flex-start;
+        justify-content: center;
         position: relative;
-
-        /* (width - inner-width) / 2 */
-        left: 32px;
-        overflow: hidden
-    } @media (max-width: 374px) { .cc-calendar .calendar__inner_c7ejh {
-            left: 16px
-    }
-        } .cc-calendar .calendar__button_c7ejh {
+        overflow: hidden;
+    } .cc-calendar .calendar__button_10is2 {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_c7ejh:nth-child(3n) {
+    } .cc-calendar .calendar__button_10is2:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_c7ejh {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_10is2 {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_c7ejh:nth-child(3n) {
+            .cc-calendar .calendar__button_10is2:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_c7ejh:nth-child(2n) {
+            .cc-calendar .calendar__button_10is2:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_c7ejh {
+            } .cc-calendar .calendar__button_10is2 {
 
             height: 36px
     }

package/calendar/components/years-table/index.js

@@ -6,7 +6,6 @@ require('react');
 require('classnames');
 require('date-fns/isSameYear');
 require('date-fns/isThisYear');
-require('@alfalab/hooks');
 require('../select-button/Component.js');
 require('../../../button/desktop');
 

package/calendar/cssm/Component-72308007.d.ts

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

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

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

package/calendar/cssm/Component.desktop.js

@@ -81,9 +81,11 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 ||
@@ -108,33 +110,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);
@@ -149,11 +167,11 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _b[styles__default.default.sixWeeks] = weeks.length === 6,
             _b[styles__default.default.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React__default.default.createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React__default.default.createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
-        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container, (_c = {}, _c[styles__default.default.customScrollbar] = view === 'years', _c), styles__default.default[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__default.default.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React__default.default.createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default.default.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        React__default.default.createElement("div", { ref: scrollableNodeRef, className: cn__default.default(styles__default.default.container, (_c = {}, _c[styles__default.default.customScrollbar] = view === 'years', _c), styles__default.default[view], contentClassName), onScroll: handleScroll },
+            view === 'days' && (React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape, withTransition: selectorView === 'month-only' })),
             view === 'months' && (React__default.default.createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
-            view === 'years' && (React__default.default.createElement(components_yearsTable_Component.YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, 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/cssm/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/cssm');
 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/cssm/mobile');
 require('../../modal/cssm/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,8 +47,11 @@ require('date-fns/isLastDayOfMonth');
 require('date-fns/isToday');
 require('date-fns/isWithinInterval');
 require('../../button/cssm/desktop');
+require('@alfalab/hooks');
 require('./components/days-table/index.module.css');
+require('./components/calendar-mobile/backdrop-transitions.module.css');
 require('./components/calendar-mobile/index.module.css');
+require('./components/calendar-mobile/transitions.module.css');
 require('./components/header/Component.js');
 require('./components/header/index.module.css');
 require('./components/month-year-header/Component.js');
@@ -84,11 +86,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;