@alfalab/core-components 41.9.0-beta.0 → 41.9.0-beta.1

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

@@ -1,4 +1,4 @@
-/* hash: ctizd */
+/* hash: eyofb */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary-inverted: #121212;
@@ -45,7 +45,7 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__button_1xi0p {
+} .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_1xi0p: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_1xi0p.calendar__filled_1xi0p {
+        } .cc-calendar .calendar__button_1os2h.calendar__filled_1os2h {
             background-color: var(--color-light-bg-tertiary)
-        } .cc-calendar .calendar__button_1xi0p.calendar__filled_1xi0p: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_1xi0p.calendar__outlined_1xi0p {
+            } .cc-calendar .calendar__button_1os2h.calendar__outlined_1os2h {
             border: 1px solid var(--calendar-select-button-today-border-color);
-        } .cc-calendar .calendar__button_1xi0p.calendar__selected_1xi0p,
-        .cc-calendar .calendar__button_1xi0p.calendar__selected_1xi0p: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_1xi0p.calendar__selected_1xi0p:not(:disabled):hover, .cc-calendar .calendar__button_1xi0p.calendar__selected_1xi0p: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_1xi0p > * {
+            } .cc-calendar .calendar__button_1os2h > * {
             flex-grow: 1;
         }

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

@@ -15,7 +15,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var isSameYear__default = /*#__PURE__*/_interopDefaultCompat(isSameYear);
 var isThisYear__default = /*#__PURE__*/_interopDefaultCompat(isThisYear);
 
-var styles = {"yearsTable":"calendar__yearsTable_tl8hg","responsive":"calendar__responsive_tl8hg","inner":"calendar__inner_tl8hg","button":"calendar__button_tl8hg"};
+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/components/years-table/index.css

@@ -1,4 +1,4 @@
-/* hash: iz5hs */
+/* hash: 2o4lg */
 :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,21 +49,21 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_tl8hg {
+} .cc-calendar .calendar__yearsTable_9nrn5 {
         overflow: auto;
         overflow-x: hidden;
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_tl8hg {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_9nrn5 {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_tl8hg.calendar__responsive_tl8hg {
+        } .cc-calendar .calendar__yearsTable_9nrn5.calendar__responsive_9nrn5 {
             justify-content: space-between
-        } .cc-calendar .calendar__yearsTable_tl8hg.calendar__responsive_tl8hg .calendar__inner_tl8hg {
+        } .cc-calendar .calendar__yearsTable_9nrn5.calendar__responsive_9nrn5 .calendar__inner_9nrn5 {
                 left: auto;
-            } .cc-calendar .calendar__yearsTable_tl8hg.calendar__responsive_tl8hg .calendar__button_tl8hg {
+            } .cc-calendar .calendar__yearsTable_9nrn5.calendar__responsive_9nrn5 .calendar__button_9nrn5 {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__inner_tl8hg {
+            } .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_tl8hg {
+    } @media (max-width: 374px) { .cc-calendar .calendar__inner_9nrn5 {
             left: 16px
     }
-        } .cc-calendar .calendar__button_tl8hg {
+        } .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_tl8hg:nth-child(3n) {
+    } .cc-calendar .calendar__button_9nrn5:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_tl8hg {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_9nrn5 {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_tl8hg:nth-child(3n) {
+            .cc-calendar .calendar__button_9nrn5:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_tl8hg:nth-child(2n) {
+            .cc-calendar .calendar__button_9nrn5:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_tl8hg {
+            } .cc-calendar .calendar__button_9nrn5 {
 
             height: 36px
     }

package/calendar/cssm/Component.desktop.js

@@ -80,10 +80,10 @@ var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 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 _k = React.useState(defaultView), view = _k[0], setView = _k[1];
-    var _l = React.useState(false), scrolled = _l[0], setScrolled = _l[1];
+    var _b;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, 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, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, dayAddons = _a.dayAddons, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h;
+    var _j = React.useState(defaultView), view = _j[0], setView = _j[1];
+    var _k = React.useState(false), scrolled = _k[0], setScrolled = _k[1];
     var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = React.useMemo(function () {
         return startOfMonth__default.default(selected ||
@@ -94,7 +94,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
     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]);
-    var _m = useCalendar.useCalendar({
+    var _l = useCalendar.useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -107,7 +107,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
         dayAddons: dayAddons,
         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;
+    }), activeMonth = _l.activeMonth, weeks = _l.weeks, months = _l.months, years = _l.years, canSetPrevMonth = _l.canSetPrevMonth, canSetNextMonth = _l.canSetNextMonth, setMonthByDate = _l.setMonthByDate, setPrevMonth = _l.setPrevMonth, setNextMonth = _l.setNextMonth, highlighted = _l.highlighted, getDayProps = _l.getDayProps, getMonthProps = _l.getMonthProps, getYearProps = _l.getYearProps, getRootProps = _l.getRootProps;
     var toggleView = React.useCallback(function (newView) {
         setView(view === newView ? 'days' : newView);
     }, [view]);
@@ -150,7 +150,7 @@ var CalendarDesktop = React.forwardRef(function (_a, ref) {
             _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]) },
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container, 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 })),
             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 })))));

package/calendar/cssm/{Component.responsive-fa4cf9a1.js → Component.responsive-37401ddd.js}

@@ -5,7 +5,6 @@ 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 startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsButton = require('../../button/cssm');
@@ -41,7 +40,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
-var getMonth__default = /*#__PURE__*/_interopDefaultCompat(getMonth);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
@@ -51,16 +49,11 @@ 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, 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 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, 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;
     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]);
+        return yearsAmount * 12 + currentMonthIndex;
+    }, [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]);
@@ -113,14 +106,12 @@ var CalendarMonthOnlyView = function (_a) {
     var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
         React__default.default.createElement("span", { className: styles__default.default.month }, 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 }));
+    return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, increaseViewportBy: 800, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
 };
 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, 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", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
-    var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
+    var modalRef = React.useRef(null);
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
@@ -143,7 +134,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount }, commonProps, restProps)));
         }
         return (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: styles__default.default.calendar }, commonProps, restProps)));
     };
@@ -154,8 +145,8 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
                 selectButtonDisabled = !selectedFrom;
             }
             return (React__default.default.createElement(React__default.default.Fragment, null,
-                React__default.default.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
-                React__default.default.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
+                React__default.default.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"),
+                React__default.default.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")));
         }
         if (value) {
             return (React__default.default.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
@@ -163,8 +154,9 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         return (React__default.default.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
     return (React__default.default.createElement("div", { className: cn__default.default(className, styles__default.default.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__default.default.modal, wrapperClassName: styles__default.default.wrapper },
-            hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn__default.default((_b = {}, _b[styles__default.default.withZIndex] = selectorView === 'full', _b)) })),
+        React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles__default.default.modal, wrapperClassName: styles__default.default.wrapper },
+            hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, sticky: true, className: cn__default.default((_b = {}, _b[styles__default.default.withZIndex] = selectorView === 'full', _b)) })),
+            monthOnlyView && renderDayNames(),
             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__default.default.withZIndex] = selectorView === 'full', _c)) }, renderFooter()))));
 });

package/calendar/cssm/Component.responsive.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('@alfalab/hooks');
-var components_calendarMobile_Component = require('./Component.responsive-fa4cf9a1.js');
+var components_calendarMobile_Component = require('./Component.responsive-37401ddd.js');
 require('./Component.desktop.js');
 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/cssm');

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

@@ -6,13 +6,12 @@ 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/cssm');
 require('../../../../modal/cssm/mobile');
 require('../../Component.desktop.js');
-var components_calendarMobile_Component = require('../../Component.responsive-fa4cf9a1.js');
+var components_calendarMobile_Component = require('../../Component.responsive-37401ddd.js');
 require('date-fns/differenceInDays');
 require('@alfalab/hooks');
 require('../../useCalendar.js');

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

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-fa4cf9a1";
+export * from "../../Component.responsive-37401ddd";
 export {};

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('../../Component.responsive-fa4cf9a1.js');
+var components_calendarMobile_Component = require('../../Component.responsive-37401ddd.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');
@@ -8,7 +8,6 @@ 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/cssm');

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

@@ -16,6 +16,7 @@
 } :root {
 } :root {
     --gap-xs: 8px;
+    --gap-m: 16px;
     --gap-2xl: 32px;
 } :root {
 } :root {
@@ -62,8 +63,10 @@
 } .calendar th {
     border-bottom: 1px solid var(--color-light-border-primary);
 } .dayNames {
+    padding: 0 var(--gap-m);
     width: 100%;
     position: sticky;
+    border-bottom: 1px solid var(--color-light-border-primary);
     background: var(--modal-header-background);
     top: 0;
     height: 32px

package/calendar/cssm/components/header/index.module.css

@@ -41,7 +41,7 @@
 } .header {
     width: 100%;
     box-sizing: border-box;
-    padding: var(--gap-m) var(--gap-m) var(--gap-s);
+    padding: var(--gap-m) 0 var(--gap-s);
     transition: box-shadow 0.2s ease;
     display: flex;
     justify-content: center;

package/calendar/cssm/desktop.module.css

@@ -1,7 +1,5 @@
 :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 {
@@ -12,7 +10,6 @@
 
     /* Hard up */
 } :root {
-    --border-radius-circle: 50%;
 } :root {
     --gap-m: 16px;
 } :root {
@@ -66,43 +63,11 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 var(--gap-m) var(--gap-m);
+    padding-bottom: var(--gap-m);
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .container.customScrollbar {
-        overflow: auto;
-        overflow: overlay;
-        cursor: auto;
-    } .container.customScrollbar::-webkit-scrollbar {
-        width: 12px;
-    } .container.customScrollbar::-webkit-scrollbar-track {
-        background-color: transparent;
-    } .container.customScrollbar::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    } .container.customScrollbar::-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;
-    } .container.customScrollbar::-webkit-scrollbar-thumb:hover {
-        border-radius: var(--border-radius-circle) / 7px;
-        border-width: 4px 3px;
-    } .container.customScrollbar::-webkit-scrollbar-thumb:active {
-        background-color: var(--color-light-graphic-primary-alpha-60);
-    } .container.customScrollbar::-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;
-    } .container.customScrollbar::-webkit-scrollbar-button,
-    .container.customScrollbar::-webkit-scrollbar-corner {
-        display: none;
-    } .container.customScrollbar {
-
-        display: block;
-    } @media (max-width: 374px) { .container {
+} @media (max-width: 374px) { .container {
         width: 288px
 }
     } .sixWeeks {

package/calendar/cssm/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-fa4cf9a1.js');
+var components_calendarMobile_Component = require('./Component.responsive-37401ddd.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');
@@ -56,7 +56,6 @@ require('./components/years-table/index.module.css');
 require('./desktop.module.css');
 require('react-virtuoso');
 require('@juggle/resize-observer');
-require('date-fns/getMonth');
 require('../../modal/cssm/mobile');
 require('date-fns/differenceInDays');
 require('../../icon-button/cssm');

package/calendar/cssm/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-fa4cf9a1.js');
+var components_calendarMobile_Component = require('./Component.responsive-37401ddd.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');
@@ -8,7 +8,6 @@ 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/cssm');

package/calendar/cssm/responsive.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.responsive-fa4cf9a1";
+export * from "./Component.responsive-37401ddd";
 export {};

package/calendar/cssm/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-fa4cf9a1.js');
+var components_calendarMobile_Component = require('./Component.responsive-37401ddd.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');
@@ -8,7 +8,6 @@ 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/cssm');

package/calendar/desktop.css

@@ -1,8 +1,6 @@
-/* hash: y7qel */
+/* 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 {
@@ -13,7 +11,6 @@
 
     /* Hard up */
 } :root {
-    --border-radius-circle: 50%;
 } :root {
     --gap-m: 16px;
 } :root {
@@ -43,84 +40,52 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1vlce {
+} .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_1vlce {
+} @media (max-width: 374px) { .calendar__component_10ijm {
         align-items: center;
         width: 100%;
         height: 321px
 }
-    } .calendar__component_1vlce.calendar__responsive_1vlce {
+    } .calendar__component_10ijm.calendar__responsive_10ijm {
         width: 100%
-    } .calendar__component_1vlce.calendar__responsive_1vlce .calendar__period_1vlce {
+    } .calendar__component_10ijm.calendar__responsive_10ijm .calendar__period_10ijm {
             width: 100%;
-        } .calendar__component_1vlce.calendar__responsive_1vlce .calendar__monthYear_1vlce {
+        } .calendar__component_10ijm.calendar__responsive_10ijm .calendar__monthYear_10ijm {
             width: 100%;
-        } .calendar__component_1vlce.calendar__responsive_1vlce .calendar__container_1vlce {
+        } .calendar__component_10ijm.calendar__responsive_10ijm .calendar__container_10ijm {
             width: 100%;
-        } .calendar__container_1vlce {
+        } .calendar__container_10ijm {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 var(--gap-m) var(--gap-m);
+    padding-bottom: var(--gap-m);
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_1vlce.calendar__customScrollbar_1vlce {
-        overflow: auto;
-        overflow: overlay;
-        cursor: auto;
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar {
-        width: 12px;
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar-track {
-        background-color: transparent;
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce::-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_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar-thumb:hover {
-        border-radius: var(--border-radius-circle) / 7px;
-        border-width: 4px 3px;
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar-thumb:active {
-        background-color: var(--color-light-graphic-primary-alpha-60);
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce::-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_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar-button,
-    .calendar__container_1vlce.calendar__customScrollbar_1vlce::-webkit-scrollbar-corner {
-        display: none;
-    } .calendar__container_1vlce.calendar__customScrollbar_1vlce {
-
-        display: block;
-    } @media (max-width: 374px) { .calendar__container_1vlce {
+} @media (max-width: 374px) { .calendar__container_10ijm {
         width: 288px
 }
-    } .calendar__sixWeeks_1vlce {
+    } .calendar__sixWeeks_10ijm {
     height: 388px
-} @media (max-width: 374px) { .calendar__sixWeeks_1vlce {
+} @media (max-width: 374px) { .calendar__sixWeeks_10ijm {
         height: 361px
 }
-    } .calendar__period_1vlce {
+    } .calendar__period_10ijm {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_1vlce {
+} @media (max-width: 374px) { .calendar__period_10ijm {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_1vlce {
+    } .calendar__monthYear_10ijm {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_1vlce {
+} @media (max-width: 374px) { .calendar__monthYear_10ijm {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto