@alfalab/core-components 41.9.0 → 41.10.0

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

@@ -37,7 +37,7 @@ import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 
-var styles = {"component":"calendar__component_16dxj","period":"calendar__period_16dxj","clicablePeriod":"calendar__clicablePeriod_16dxj","empty":"calendar__empty_16dxj","arrow":"calendar__arrow_16dxj","full":"calendar__full_16dxj","yearSelectorButton":"calendar__yearSelectorButton_16dxj"};
+var styles = {"component":"calendar__component_1vg2o","period":"calendar__period_1vg2o","clicablePeriod":"calendar__clicablePeriod_1vg2o","empty":"calendar__empty_1vg2o","arrow":"calendar__arrow_1vg2o","full":"calendar__full_1vg2o","yearSelectorButton":"calendar__yearSelectorButton_1vg2o"};
 require('./index.css');
 
 var PeriodSlider = function (_a) {

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

@@ -42,37 +42,37 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_16dxj {
+} .calendar__component_1vg2o {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .calendar__period_16dxj {
+} .calendar__period_1vg2o {
     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_16dxj {
+} @media (max-width: 374px) { .calendar__period_1vg2o {
         width: auto;
         flex-grow: 1
 }
-    } .calendar__clicablePeriod_16dxj {
+    } .calendar__clicablePeriod_1vg2o {
     cursor: pointer;
-} .calendar__empty_16dxj {
+} .calendar__empty_1vg2o {
     color: var(--color-light-text-secondary);
-} .calendar__arrow_16dxj {
+} .calendar__arrow_1vg2o {
     position: absolute;
     top: 4px
-} .calendar__arrow_16dxj:first-child {
+} .calendar__arrow_1vg2o:first-child {
         left: 0;
-    } .calendar__arrow_16dxj:last-child {
+    } .calendar__arrow_1vg2o:last-child {
         right: 0;
         transform: rotateY(180deg);
-    } @media (max-width: 374px) { .calendar__full_16dxj .calendar__arrow_16dxj {
+    } @media (max-width: 374px) { .calendar__full_1vg2o .calendar__arrow_1vg2o {
         display: none
 }
-    } .calendar__yearSelectorButton_16dxj {
+    } .calendar__yearSelectorButton_1vg2o {
     margin-left: var(--gap-xs);
 }

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

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';
 
-var styles = {"button":"calendar__button_zpxcg","filled":"calendar__filled_zpxcg","outlined":"calendar__outlined_zpxcg","selected":"calendar__selected_zpxcg"};
+var styles = {"button":"calendar__button_1os2h","filled":"calendar__filled_1os2h","outlined":"calendar__outlined_1os2h","selected":"calendar__selected_1os2h"};
 require('./index.css');
 
 var SelectButton = forwardRef(function (_a, ref) {

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

@@ -45,7 +45,7 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__button_zpxcg {
+} .cc-calendar .calendar__button_1os2h {
         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_zpxcg:not(:disabled):hover {
+    } .cc-calendar .calendar__button_1os2h:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary);
             color: var(--color-light-text-primary);
-        } .cc-calendar .calendar__button_zpxcg.calendar__filled_zpxcg {
+        } .cc-calendar .calendar__button_1os2h.calendar__filled_1os2h {
             background-color: var(--color-light-bg-tertiary)
-        } .cc-calendar .calendar__button_zpxcg.calendar__filled_zpxcg:not(:disabled):hover {
+        } .cc-calendar .calendar__button_1os2h.calendar__filled_1os2h:not(:disabled):hover {
                 background-color: var(--color-light-bg-tertiary-shade-7);
-            } .cc-calendar .calendar__button_zpxcg.calendar__outlined_zpxcg {
+            } .cc-calendar .calendar__button_1os2h.calendar__outlined_1os2h {
             border: 1px solid var(--calendar-select-button-today-border-color);
-        } .cc-calendar .calendar__button_zpxcg.calendar__selected_zpxcg,
-        .cc-calendar .calendar__button_zpxcg.calendar__selected_zpxcg:disabled {
+        } .cc-calendar .calendar__button_1os2h.calendar__selected_1os2h,
+        .cc-calendar .calendar__button_1os2h.calendar__selected_1os2h:disabled {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted)
-        } .cc-calendar .calendar__button_zpxcg.calendar__selected_zpxcg:not(:disabled):hover, .cc-calendar .calendar__button_zpxcg.calendar__selected_zpxcg:disabled:not(:disabled):hover {
+        } .cc-calendar .calendar__button_1os2h.calendar__selected_1os2h:not(:disabled):hover, .cc-calendar .calendar__button_1os2h.calendar__selected_1os2h:disabled:not(:disabled):hover {
                 background-color: var(--calendar-select-button-selected-background);
                 color: var(--color-light-text-primary-inverted);
-            } .cc-calendar .calendar__button_zpxcg > * {
+            } .cc-calendar .calendar__button_1os2h > * {
             flex-grow: 1;
         }

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

@@ -6,7 +6,7 @@ import isThisYear from 'date-fns/isThisYear';
 import { SelectButton } from '../select-button/Component.js';
 import '../../../../button/esm';
 
-var styles = {"yearsTable":"calendar__yearsTable_1jmqk","responsive":"calendar__responsive_1jmqk","inner":"calendar__inner_1jmqk","button":"calendar__button_1jmqk"};
+var styles = {"yearsTable":"calendar__yearsTable_9nrn5","responsive":"calendar__responsive_9nrn5","inner":"calendar__inner_9nrn5","button":"calendar__button_9nrn5"};
 require('./index.css');
 
 var YearsTable = function (_a) {

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

@@ -49,21 +49,21 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_1jmqk {
+} .cc-calendar .calendar__yearsTable_9nrn5 {
         overflow: auto;
         overflow-x: hidden;
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1jmqk {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_9nrn5 {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_1jmqk.calendar__responsive_1jmqk {
+        } .cc-calendar .calendar__yearsTable_9nrn5.calendar__responsive_9nrn5 {
             justify-content: space-between
-        } .cc-calendar .calendar__yearsTable_1jmqk.calendar__responsive_1jmqk .calendar__inner_1jmqk {
+        } .cc-calendar .calendar__yearsTable_9nrn5.calendar__responsive_9nrn5 .calendar__inner_9nrn5 {
                 left: auto;
-            } .cc-calendar .calendar__yearsTable_1jmqk.calendar__responsive_1jmqk .calendar__button_1jmqk {
+            } .cc-calendar .calendar__yearsTable_9nrn5.calendar__responsive_9nrn5 .calendar__button_9nrn5 {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__inner_1jmqk {
+            } .cc-calendar .calendar__inner_9nrn5 {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
@@ -72,26 +72,26 @@
         /* (width - inner-width) / 2 */
         left: 32px;
         overflow: hidden
-    } @media (max-width: 374px) { .cc-calendar .calendar__inner_1jmqk {
+    } @media (max-width: 374px) { .cc-calendar .calendar__inner_9nrn5 {
             left: 16px
     }
-        } .cc-calendar .calendar__button_1jmqk {
+        } .cc-calendar .calendar__button_9nrn5 {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1jmqk:nth-child(3n) {
+    } .cc-calendar .calendar__button_9nrn5:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1jmqk {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_9nrn5 {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_1jmqk:nth-child(3n) {
+            .cc-calendar .calendar__button_9nrn5:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_1jmqk:nth-child(2n) {
+            .cc-calendar .calendar__button_9nrn5:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1jmqk {
+            } .cc-calendar .calendar__button_9nrn5 {
 
             height: 36px
     }

package/calendar/esm/desktop.css

@@ -1,6 +1,8 @@
 /* hash: jw06m */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
+    --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
 } :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 {
@@ -11,6 +13,7 @@
 
     /* Hard up */
 } :root {
+    --border-radius-circle: 50%;
 } :root {
     --gap-m: 16px;
 } :root {
@@ -40,52 +43,84 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1q2ns {
+} .calendar__component_10ijm {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_1q2ns {
+} @media (max-width: 374px) { .calendar__component_10ijm {
         align-items: center;
         width: 100%;
         height: 321px
 }
-    } .calendar__component_1q2ns.calendar__responsive_1q2ns {
+    } .calendar__component_10ijm.calendar__responsive_10ijm {
         width: 100%
-    } .calendar__component_1q2ns.calendar__responsive_1q2ns .calendar__period_1q2ns {
+    } .calendar__component_10ijm.calendar__responsive_10ijm .calendar__period_10ijm {
             width: 100%;
-        } .calendar__component_1q2ns.calendar__responsive_1q2ns .calendar__monthYear_1q2ns {
+        } .calendar__component_10ijm.calendar__responsive_10ijm .calendar__monthYear_10ijm {
             width: 100%;
-        } .calendar__component_1q2ns.calendar__responsive_1q2ns .calendar__container_1q2ns {
+        } .calendar__component_10ijm.calendar__responsive_10ijm .calendar__container_10ijm {
             width: 100%;
-        } .calendar__container_1q2ns {
+        } .calendar__container_10ijm {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-bottom: var(--gap-m);
+    padding: 0 var(--gap-m) var(--gap-m);
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} @media (max-width: 374px) { .calendar__container_1q2ns {
+} .calendar__container_10ijm.calendar__customScrollbar_10ijm {
+        overflow: auto;
+        overflow: overlay;
+        cursor: auto;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar {
+        width: 12px;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-track {
+        background-color: transparent;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-thumb {
+        background-color: var(--color-light-graphic-primary-alpha-30);
+        border-radius: var(--border-radius-circle) / 6px;
+        border-color: transparent;
+        border-style: solid;
+        border-width: 4px;
+        background-clip: padding-box;
+        min-height: 40px;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-thumb:hover {
+        border-radius: var(--border-radius-circle) / 7px;
+        border-width: 4px 3px;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-thumb:active {
+        background-color: var(--color-light-graphic-primary-alpha-60);
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-resizer {
+        background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
+            no-repeat right bottom;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-button,
+    .calendar__container_10ijm.calendar__customScrollbar_10ijm::-webkit-scrollbar-corner {
+        display: none;
+    } .calendar__container_10ijm.calendar__customScrollbar_10ijm {
+
+        display: block;
+    } @media (max-width: 374px) { .calendar__container_10ijm {
         width: 288px
 }
-    } .calendar__sixWeeks_1q2ns {
+    } .calendar__sixWeeks_10ijm {
     height: 388px
-} @media (max-width: 374px) { .calendar__sixWeeks_1q2ns {
+} @media (max-width: 374px) { .calendar__sixWeeks_10ijm {
         height: 361px
 }
-    } .calendar__period_1q2ns {
+    } .calendar__period_10ijm {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_1q2ns {
+} @media (max-width: 374px) { .calendar__period_10ijm {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_1q2ns {
+    } .calendar__monthYear_10ijm {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_1q2ns {
+} @media (max-width: 374px) { .calendar__monthYear_10ijm {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-87789363.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-8561958d.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';
@@ -47,6 +47,7 @@ import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
 import 'react-virtuoso';
 import '@juggle/resize-observer';
+import 'date-fns/getMonth';
 import '../../modal/esm/mobile';
 import 'date-fns/differenceInDays';
 import '../../icon-button/esm';

package/calendar/esm/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-87789363.js';
+export { a as CalendarMobile } from './Component.responsive-8561958d.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
@@ -6,6 +6,7 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm';

package/calendar/esm/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-87789363";
+export * from "./Component.responsive-8561958d";
 export {};

package/calendar/esm/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-87789363.js';
+export { C as CalendarResponsive } from './Component.responsive-8561958d.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
@@ -6,6 +6,7 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm';

package/calendar/index.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-var components_calendarMobile_Component = require('./Component.responsive-a84a66b1.js');
+var components_calendarMobile_Component = require('./Component.responsive-b08c863a.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');
@@ -49,6 +49,7 @@ require('date-fns/isSameYear');
 require('date-fns/isThisYear');
 require('react-virtuoso');
 require('@juggle/resize-observer');
+require('date-fns/getMonth');
 require('../modal/mobile');
 require('date-fns/differenceInDays');
 require('../icon-button');

package/calendar/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-a84a66b1.js');
+var components_calendarMobile_Component = require('./Component.responsive-b08c863a.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');
@@ -8,6 +8,7 @@ require('react-virtuoso');
 require('@juggle/resize-observer');
 require('classnames');
 require('date-fns/endOfDay');
+require('date-fns/getMonth');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../button');

package/calendar/modern/Component.desktop.js

@@ -59,7 +59,7 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import './components/period-slider/utils.js';
 
-const styles = {"component":"calendar__component_1q2ns","responsive":"calendar__responsive_1q2ns","period":"calendar__period_1q2ns","monthYear":"calendar__monthYear_1q2ns","container":"calendar__container_1q2ns","sixWeeks":"calendar__sixWeeks_1q2ns"};
+const styles = {"component":"calendar__component_10ijm","responsive":"calendar__responsive_10ijm","period":"calendar__period_10ijm","monthYear":"calendar__monthYear_10ijm","container":"calendar__container_10ijm","customScrollbar":"calendar__customScrollbar_10ijm","sixWeeks":"calendar__sixWeeks_10ijm"};
 require('./desktop.css');
 
 const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
@@ -129,7 +129,7 @@ const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorV
             [styles.responsive]: responsive,
         }), "data-test-id": dataTestId },
         hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
-        React.createElement("div", { className: cn(styles.container, styles[view]) },
+        React.createElement("div", { className: cn(styles.container, { [styles.customScrollbar]: view === 'years' }, styles[view]) },
             view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
             view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll, responsive: responsive })))));

package/calendar/modern/{Component.responsive-41766d9d.js → Component.responsive-0fcd06d9.js}

@@ -1,9 +1,10 @@
-import React, { forwardRef, useRef, useMemo } from 'react';
+import React, { forwardRef, useState, useMemo } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import { Virtuoso } from 'react-virtuoso';
 import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import endOfDay from 'date-fns/endOfDay';
+import getMonth from 'date-fns/getMonth';
 import startOfDay from 'date-fns/startOfDay';
 import startOfMonth from 'date-fns/startOfMonth';
 import { Button } from '../../button/modern';
@@ -64,18 +65,23 @@ import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 
-const styles = {"wrapper":"calendar__wrapper_1mnmi","withZIndex":"calendar__withZIndex_1mnmi","calendar":"calendar__calendar_1mnmi","dayNames":"calendar__dayNames_1mnmi","withHeader":"calendar__withHeader_1mnmi","month":"calendar__month_1mnmi","daysTable":"calendar__daysTable_1mnmi","dayName":"calendar__dayName_1mnmi"};
+const styles = {"wrapper":"calendar__wrapper_vkxx3","withZIndex":"calendar__withZIndex_vkxx3","calendar":"calendar__calendar_vkxx3","dayNames":"calendar__dayNames_vkxx3","withHeader":"calendar__withHeader_vkxx3","month":"calendar__month_vkxx3","daysTable":"calendar__daysTable_vkxx3","dayName":"calendar__dayName_vkxx3"};
 require('./components/calendar-mobile/index.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
 if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
-const CalendarMonthOnlyView = ({ value, defaultView, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, selectedFrom, selectedTo, rangeComplete, onMonthChange, yearsAmount = 3, dayAddons, shape = 'rounded', }) => {
+const CalendarMonthOnlyView = ({ value, defaultView, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, selectedFrom, selectedTo, rangeComplete, onMonthChange, yearsAmount = 3, dayAddons, shape = 'rounded', scrollableContainer, }) => {
     const initialMonthIndex = useMemo(() => {
         const currentMonthIndex = new Date().getMonth();
-        return yearsAmount * 12 + currentMonthIndex;
-    }, [yearsAmount]);
+        let monthIndex = currentMonthIndex;
+        if (value)
+            monthIndex = getMonth(value);
+        if (selectedFrom)
+            monthIndex = getMonth(selectedFrom);
+        return yearsAmount * 12 + monthIndex;
+    }, [selectedFrom, value, yearsAmount]);
     const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
     const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
     const maxDate = useMemo(() => (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined), [maxDateTimestamp]);
@@ -130,10 +136,12 @@ const CalendarMonthOnlyView = ({ value, defaultView, month: monthTimestamp, minD
     const renderMonth = (index) => (React.createElement("div", { className: styles.daysTable, id: `month-${index}` },
         React.createElement("span", { className: styles.month }, activeMonths[index].title),
         React.createElement(DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape })));
-    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, increaseViewportBy: 800, itemSize: (el) => el.getBoundingClientRect().height + 32 }));
+    if (!scrollableContainer)
+        return null;
+    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex, align: 'center' }, increaseViewportBy: 1000, itemSize: (el) => el.getBoundingClientRect().height + 32, customScrollParent: scrollableContainer, useWindowScroll: true }));
 };
 const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRange = false, className, defaultView = 'days', selectorView = 'full', value, selectedFrom, selectedTo, onChange, dataTestId, open, onClose, title = 'Календарь', yearsAmount = 3, ...restProps }, ref) => {
-    const modalRef = useRef(null);
+    const [modalRef, setModalRef] = useState();
     const monthOnlyView = selectorView === 'month-only';
     const handleClose = () => {
         if (onClose)
@@ -156,7 +164,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
             selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, { open: open, yearsAmount: yearsAmount, ...commonProps, ...restProps }));
+            return (React.createElement(CalendarMonthOnlyView, { open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, ...commonProps, ...restProps }));
         }
         return (React.createElement(CalendarDesktop, { responsive: true, className: styles.calendar, ...commonProps, ...restProps }));
     };
@@ -167,8 +175,8 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
                 selectButtonDisabled = !selectedFrom;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"),
-                React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")));
+                React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
+                React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
         }
         if (value) {
             return (React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
@@ -176,9 +184,8 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
         return (React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
     return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
-        React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.wrapper },
-            hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, sticky: true, className: cn({ [styles.withZIndex]: selectorView === 'full' }) })),
-            monthOnlyView && renderDayNames(),
+        React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: (node) => setModalRef(node), className: styles.modal, wrapperClassName: styles.wrapper },
+            hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn({ [styles.withZIndex]: selectorView === 'full' }) })),
             React.createElement(ModalMobile.Content, { flex: true }, renderContent()),
             React.createElement(ModalMobile.Footer, { sticky: true, className: cn({ [styles.withZIndex]: selectorView === 'full' }) }, renderFooter()))));
 });

package/calendar/modern/Component.responsive.js

@@ -1,11 +1,12 @@
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-41766d9d.js';
+export { C as CalendarResponsive } from './Component.responsive-0fcd06d9.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern';

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

@@ -3,12 +3,13 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../../button/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-41766d9d.js';
+export { a as CalendarMobile } from '../../Component.responsive-0fcd06d9.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

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

@@ -17,7 +17,6 @@
 } :root {
 } :root {
     --gap-xs: 8px;
-    --gap-m: 16px;
     --gap-2xl: 32px;
 } :root {
 } :root {
@@ -57,25 +56,23 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_1mnmi {
+} .calendar__wrapper_vkxx3 {
     background: var(--color-light-bg-primary);
-} .calendar__withZIndex_1mnmi {
+} .calendar__withZIndex_vkxx3 {
     z-index: 2;
-} .calendar__calendar_1mnmi th {
+} .calendar__calendar_vkxx3 th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_1mnmi {
-    padding: 0 var(--gap-m);
+} .calendar__dayNames_vkxx3 {
     width: 100%;
     position: sticky;
-    border-bottom: 1px solid var(--color-light-border-primary);
     background: var(--modal-header-background);
     top: 0;
     height: 32px
-} .calendar__dayNames_1mnmi.calendar__withHeader_1mnmi {
+} .calendar__dayNames_vkxx3.calendar__withHeader_vkxx3 {
         top: 48px;
-    } .calendar__dayNames_1mnmi th {
+    } .calendar__dayNames_vkxx3 th {
     height: 100%;
-} .calendar__month_1mnmi {
+} .calendar__month_vkxx3 {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -84,18 +81,18 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_1mnmi {
+} .calendar__daysTable_vkxx3 {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_1mnmi {
+} .calendar__dayName_vkxx3 {
     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_1mnmi {
+} @media (max-width: 374px) { .calendar__dayName_vkxx3 {
         height: 36px
 }
     }

package/calendar/modern/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-41766d9d";
+export * from "../../Component.responsive-0fcd06d9";
 export {};

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

@@ -1,10 +1,11 @@
-export { a as CalendarMobile } from '../../Component.responsive-41766d9d.js';
+export { a as CalendarMobile } from '../../Component.responsive-0fcd06d9.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../../button/modern';

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

@@ -30,7 +30,7 @@ import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 
-const styles = {"daysTable":"calendar__daysTable_17t69","responsive":"calendar__responsive_17t69","dayName":"calendar__dayName_17t69","day":"calendar__day_17t69","rounded":"calendar__rounded_17t69","rectangular":"calendar__rectangular_17t69","highlighted":"calendar__highlighted_17t69","range":"calendar__range_17t69","disabled":"calendar__disabled_17t69","holiday":"calendar__holiday_17t69","today":"calendar__today_17t69","rangeComplete":"calendar__rangeComplete_17t69","selected":"calendar__selected_17t69","dayWrapper":"calendar__dayWrapper_17t69","cursorPointer":"calendar__cursorPointer_17t69","rangeEnd":"calendar__rangeEnd_17t69","rangeStart":"calendar__rangeStart_17t69","transitLeft":"calendar__transitLeft_17t69","transitRight":"calendar__transitRight_17t69","sharpTransitLeft":"calendar__sharpTransitLeft_17t69","sharpTransitRight":"calendar__sharpTransitRight_17t69","daysEnter":"calendar__daysEnter_17t69","left":"calendar__left_17t69","daysEnterActive":"calendar__daysEnterActive_17t69","daysExit":"calendar__daysExit_17t69","daysExitActive":"calendar__daysExitActive_17t69","right":"calendar__right_17t69","dayAddons":"calendar__dayAddons_17t69","dayContent":"calendar__dayContent_17t69","addons":"calendar__addons_17t69","dot":"calendar__dot_17t69","bottomAddon":"calendar__bottomAddon_17t69"};
+const styles = {"daysTable":"calendar__daysTable_swyl1","responsive":"calendar__responsive_swyl1","dayName":"calendar__dayName_swyl1","day":"calendar__day_swyl1","rounded":"calendar__rounded_swyl1","rectangular":"calendar__rectangular_swyl1","highlighted":"calendar__highlighted_swyl1","range":"calendar__range_swyl1","disabled":"calendar__disabled_swyl1","holiday":"calendar__holiday_swyl1","today":"calendar__today_swyl1","rangeComplete":"calendar__rangeComplete_swyl1","selected":"calendar__selected_swyl1","dayWrapper":"calendar__dayWrapper_swyl1","cursorPointer":"calendar__cursorPointer_swyl1","rangeEnd":"calendar__rangeEnd_swyl1","rangeStart":"calendar__rangeStart_swyl1","transitLeft":"calendar__transitLeft_swyl1","transitRight":"calendar__transitRight_swyl1","sharpTransitLeft":"calendar__sharpTransitLeft_swyl1","sharpTransitRight":"calendar__sharpTransitRight_swyl1","daysEnter":"calendar__daysEnter_swyl1","left":"calendar__left_swyl1","daysEnterActive":"calendar__daysEnterActive_swyl1","daysExit":"calendar__daysExit_swyl1","daysExitActive":"calendar__daysExitActive_swyl1","right":"calendar__right_swyl1","dayAddons":"calendar__dayAddons_swyl1","dayContent":"calendar__dayContent_swyl1","addons":"calendar__addons_swyl1","dot":"calendar__dot_swyl1","bottomAddon":"calendar__bottomAddon_swyl1"};
 require('./index.css');
 
 /* eslint-disable complexity */