@alfalab/core-components 45.0.0 → 45.2.0

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

@@ -1,4 +1,4 @@
-/* hash: 1moxp */
+/* hash: gojf9 */
 :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 */ /* 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 */ /* 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,43 +49,43 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_1kajb {
+} .cc-calendar .calendar__yearsTable_1q3jv {
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1kajb {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1q3jv {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_1kajb.calendar__responsive_1kajb .calendar__inner_1kajb {
+        } .cc-calendar .calendar__yearsTable_1q3jv.calendar__responsive_1q3jv .calendar__inner_1q3jv {
                 width: 100%;
-            } .cc-calendar .calendar__yearsTable_1kajb.calendar__responsive_1kajb .calendar__button_1kajb {
+            } .cc-calendar .calendar__yearsTable_1q3jv.calendar__responsive_1q3jv .calendar__button_1q3jv {
                 width: calc(33.333% - var(--gap-2xs) / 1.5);
-            } .cc-calendar .calendar__yearsTable_1kajb:not(.calendar__responsive_1kajb) .calendar__inner_1kajb {
+            } .cc-calendar .calendar__yearsTable_1q3jv:not(.calendar__responsive_1q3jv) .calendar__inner_1q3jv {
                 width: var(--calendar-inner-width);
                 margin: 0 auto
-            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1kajb:not(.calendar__responsive_1kajb) .calendar__inner_1kajb {
+            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1q3jv:not(.calendar__responsive_1q3jv) .calendar__inner_1q3jv {
                     width: var(--calendar-mobile-inner-width)
             }
-                } .cc-calendar .calendar__yearsTable_1kajb:not(.calendar__responsive_1kajb) .calendar__button_1kajb {
+                } .cc-calendar .calendar__yearsTable_1q3jv:not(.calendar__responsive_1q3jv) .calendar__button_1q3jv {
                 width: var(--calendar-select-button-width)
-            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1kajb:not(.calendar__responsive_1kajb) .calendar__button_1kajb {
+            } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1q3jv:not(.calendar__responsive_1q3jv) .calendar__button_1q3jv {
                     width: var(--calendar-mobile-select-button-width)
             }
 
-                    .cc-calendar .calendar__yearsTable_1kajb:not(.calendar__responsive_1kajb) .calendar__button_1kajb:nth-child(3n) {
+                    .cc-calendar .calendar__yearsTable_1q3jv:not(.calendar__responsive_1q3jv) .calendar__button_1q3jv:nth-child(3n) {
                         margin-right: var(--gap-2xs);
                     }
 
-                    .cc-calendar .calendar__yearsTable_1kajb:not(.calendar__responsive_1kajb) .calendar__button_1kajb:nth-child(2n) {
+                    .cc-calendar .calendar__yearsTable_1q3jv:not(.calendar__responsive_1q3jv) .calendar__button_1q3jv:nth-child(2n) {
                         margin-right: 0;
                     }
-                } .cc-calendar .calendar__inner_1kajb {
+                } .cc-calendar .calendar__inner_1q3jv {
         position: relative;
         overflow: hidden;
-    } .cc-calendar .calendar__button_1kajb {
+    } .cc-calendar .calendar__button_1q3jv {
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1kajb:nth-child(3n) {
+    } .cc-calendar .calendar__button_1q3jv:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1kajb {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_1q3jv {
             height: 36px
     }
         }

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

@@ -10,14 +10,17 @@ type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
     breakpoint?: number;
 };
 declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
-    open: boolean;
     title?: string | undefined;
+    open: boolean;
     onClose?: (() => void) | undefined;
-    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
-    yearsAmount?: number | undefined;
-    hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
+    hasHeader?: boolean | undefined;
+    onApply?: (() => void) | undefined;
 } & {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

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

@@ -1,64 +1,18 @@
 /// <reference types="react" />
 import React from 'react';
-import { CalendarDesktopProps } from "../../desktop/index";
-type CalendarMobileProps = CalendarDesktopProps & {
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Заголовок календаря
-     */
-    title?: string;
-    /**
-     * Обработчик закрытия модалки
-     */
-    onClose?: () => void;
-    /**
-     * Обработчик клика на название месяца в мобильном календаре
-     */
-    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
-    /**
-     * Количество лет для генерации в обе стороны от текущего года
-     */
-    yearsAmount?: number;
-    /**
-     * Нужно ли рендерить шапку
-     */
-    hasHeader?: boolean;
-    /**
-     * Разрешить выбор из недозаполненного диапазона дат.
-     */
-    allowSelectionFromEmptyRange?: boolean;
-};
-declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopProps & {
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Заголовок календаря
-     */
+import { CalendarContentProps } from "./typings";
+declare const CalendarMonthOnlyView: ({ value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, }: CalendarContentProps) => React.JSX.Element;
+declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
+declare const CalendarMobile: React.ForwardRefExoticComponent<{
     title?: string | undefined;
-    /**
-     * Обработчик закрытия модалки
-     */
+    open: boolean;
     onClose?: (() => void) | undefined;
-    /**
-     * Обработчик клика на название месяца в мобильном календаре
-     */
-    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement>) => void) | undefined;
-    /**
-     * Количество лет для генерации в обе стороны от текущего года
-     */
-    yearsAmount?: number | undefined;
-    /**
-     * Нужно ли рендерить шапку
-     */
-    hasHeader?: boolean | undefined;
-    /**
-     * Разрешить выбор из недозаполненного диапазона дат.
-     */
     allowSelectionFromEmptyRange?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { CalendarMobileProps, CalendarMobile };
+    hasHeader?: boolean | undefined;
+    onApply?: (() => void) | undefined;
+} & {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<import("../../desktop/index").CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMonthOnlyView, CalendarMonthOnlyViewHeader, CalendarMobile };

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

@@ -12,6 +12,7 @@ var startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var mobile$1 = require('../../../../button/cssm/mobile');
 var mobile = require('../../../../modal/cssm/mobile');
+var coreComponentsShared = require('../../../../shared/cssm');
 var desktop_Component_desktop = require('../../desktop/Component.desktop.js');
 var useCalendar = require('../../useCalendar.js');
 var utils = require('../../utils.js');
@@ -38,7 +39,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = resizeObserver.ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
-    var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b, dayAddons = _a.dayAddons, _c = _a.shape, shape = _c === void 0 ? 'rounded' : _c, scrollableContainer = _a.scrollableContainer;
+    var value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _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 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]);
@@ -50,14 +51,13 @@ var CalendarMonthOnlyView = function (_a) {
     var _d = useCalendar.useCalendar({
         month: month,
         defaultMonth: defaultMonth,
-        view: defaultView,
+        view: 'months',
         minDate: minDate,
         maxDate: maxDate,
         selected: selected,
         offDays: offDays,
         events: events,
         onChange: onChange,
-        onMonthChange: onMonthChange,
         dayAddons: dayAddons,
     }), activeMonth = _d.activeMonth, highlighted = _d.highlighted, getDayProps = _d.getDayProps;
     var activeMonths = React.useMemo(function () {
@@ -90,9 +90,9 @@ var CalendarMonthOnlyView = function (_a) {
             }), title: "".concat(utils.monthName(item.date), " ").concat(item.date.getFullYear()) })); });
     }, [events, offDays, holidays, dayAddons, yearsAmount, minDate, maxDate, selected]);
     var initialMonthIndex = React.useMemo(function () {
-        var date = value || selectedFrom || Date.now();
+        var date = value || selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth__default.default(date, m.date); });
-    }, [activeMonths, selectedFrom, value]);
+    }, [activeMonth, activeMonths, selectedFrom, value]);
     var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
         onMonthTitleClick ? (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
@@ -100,27 +100,30 @@ var CalendarMonthOnlyView = function (_a) {
             " ",
             activeMonths[index].title,
             " ")),
-        React__default.default.createElement(components_daysTable_Component.DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
+        React__default.default.createElement(components_daysTable_Component.DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape }))); };
     return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles__default.default.virtuoso }));
 };
+var CalendarMonthOnlyViewHeader = function () { return (React__default.default.createElement("table", { className: styles__default.default.dayNames },
+    React__default.default.createElement("thead", null,
+        React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles__default.default.dayName, key: dayName }, dayName)); }))))); };
 var CalendarMobile = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick; _a.dataTestId; var open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, restProps = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
+    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, onApply = _a.onApply, restProps = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply"]);
     var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
             onClose();
     };
+    var handleApply = function () {
+        onApply === null || onApply === void 0 ? void 0 : onApply();
+        handleClose === null || handleClose === void 0 ? void 0 : handleClose();
+    };
     var handleClear = function () {
         if (onChange)
             onChange();
     };
-    var renderDayNames = function () {
-        return monthOnlyView ? (React__default.default.createElement("table", { className: styles__default.default.dayNames },
-            React__default.default.createElement("thead", null,
-                React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles__default.default.dayName, key: dayName }, dayName)); }))))) : null;
-    };
+    var renderDayNames = function () { return (monthOnlyView ? React__default.default.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
         var commonProps = {
             value: value,
@@ -131,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, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
         return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), contentClassName: styles__default.default.content }, commonProps, restProps)));
     };
@@ -142,13 +145,13 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
                 selectButtonDisabled = !selectedFrom;
             }
             return (React__default.default.createElement(React__default.default.Fragment, null,
-                React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
-                React__default.default.createElement(mobile$1.ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
+                React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
+                React__default.default.createElement(mobile$1.ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, disabled: selectButtonDisabled, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
         }
         if (value) {
-            return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+            return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
         }
-        return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+        return (React__default.default.createElement(mobile$1.ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'btn-reset') }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
     return (React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: mergeRefs__default.default([function (node) { return setModalRef(node); }, ref]), className: className, wrapperClassName: styles__default.default.wrapper, transitionProps: {
             timeout: 360,
@@ -156,10 +159,12 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         }, backdropProps: {
             transitionClassNames: backdropTransitionStyles__default.default,
             timeout: 360,
-        } },
+        }, dataTestId: dataTestId },
         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.Content, { className: styles__default.default.contentModal, 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())));
 });
 
 exports.CalendarMobile = CalendarMobile;
+exports.CalendarMonthOnlyView = CalendarMonthOnlyView;
+exports.CalendarMonthOnlyViewHeader = CalendarMonthOnlyViewHeader;

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

@@ -1 +1,2 @@
 export * from "./Component";
+export * from "./typings";

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

@@ -5,3 +5,5 @@ var components_calendarMobile_Component = require('./Component.js');
 
 
 exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;
+exports.CalendarMonthOnlyView = components_calendarMobile_Component.CalendarMonthOnlyView;
+exports.CalendarMonthOnlyViewHeader = components_calendarMobile_Component.CalendarMonthOnlyViewHeader;

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarDesktopProps } from "../../desktop/index";
+type OmittedCalendarProps = 'headerClassName' | 'contentClassName';
+type OmittedCalendarContentProps = 'className' | 'defaultView' | 'selectorView' | 'rangeComplete' | 'onMonthChange' | 'onYearClick' | 'onPeriodClick' | 'dataTestId' | 'hasHeader' | 'responsive' | 'showCurrentYearSelector';
+type CalendarContentProps = {
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Родительский контейнер для отслеживания скролла
+     */
+    scrollableContainer?: HTMLElement;
+} & Omit<CalendarDesktopProps, OmittedCalendarContentProps | OmittedCalendarProps>;
+type CalendarMobileProps = {
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Обработчик клика на кнопку выбрать
+     */
+    onApply?: () => void;
+} & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
+export { CalendarContentProps, CalendarMobileProps };

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

@@ -0,0 +1 @@
+

package/calendar/cssm/mobile/index.js

@@ -5,3 +5,5 @@ var components_calendarMobile_Component = require('../components/calendar-mobile
 
 
 exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;
+exports.CalendarMonthOnlyView = components_calendarMobile_Component.CalendarMonthOnlyView;
+exports.CalendarMonthOnlyViewHeader = components_calendarMobile_Component.CalendarMonthOnlyViewHeader;

package/calendar/cssm/shared/index.d.ts

@@ -1,4 +1,4 @@
-export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT } from "../utils";
+export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT, getCalendarMobileTestIds } from "../utils";
 export { usePeriod, usePeriodWithReset } from "../usePeriod";
 export { useCalendar } from "../useCalendar";
 export * from "../components/period-slider/index";

package/calendar/cssm/shared/index.js

@@ -15,6 +15,7 @@ exports.MONTHS_IN_YEAR = utils.MONTHS_IN_YEAR;
 exports.SUNDAY_INDEX = utils.SUNDAY_INDEX;
 exports.WEEKDAYS = utils.WEEKDAYS;
 exports.dateInLimits = utils.dateInLimits;
+exports.getCalendarMobileTestIds = utils.getCalendarMobileTestIds;
 exports.limitDate = utils.limitDate;
 exports.monthName = utils.monthName;
 exports.russianWeekDay = utils.russianWeekDay;

package/calendar/cssm/utils.d.ts

@@ -85,4 +85,13 @@ declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date,
 declare function simulateTab(node: HTMLElement): void;
 declare const formatDate: (date: Date | number, dateFormat?: string) => string;
 declare const parseDateString: (value: string, dateFormat?: string) => Date;
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };
+declare function getCalendarMobileTestIds(dataTestId: string): {
+    calendar: string;
+    content: string;
+    footer: string;
+    header: string;
+    closer: string;
+    btnApply: string;
+    btnReset: string;
+};
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds };

package/calendar/cssm/utils.js

@@ -22,6 +22,7 @@ var startOfWeek = require('date-fns/startOfWeek');
 var startOfYear = require('date-fns/startOfYear');
 var subDays = require('date-fns/subDays');
 var subMonths = require('date-fns/subMonths');
+var coreComponentsShared = require('../../shared/cssm');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -237,6 +238,17 @@ var parseDateString = function (value, dateFormat) {
     if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
     return parse__default.default(value, dateFormat, new Date());
 };
+function getCalendarMobileTestIds(dataTestId) {
+    return {
+        calendar: dataTestId,
+        content: coreComponentsShared.getDataTestId(dataTestId, 'content'),
+        footer: coreComponentsShared.getDataTestId(dataTestId, 'footer'),
+        header: coreComponentsShared.getDataTestId(dataTestId, 'header'),
+        closer: coreComponentsShared.getDataTestId(dataTestId, 'header-closer'),
+        btnApply: coreComponentsShared.getDataTestId(dataTestId, 'btn-apply'),
+        btnReset: coreComponentsShared.getDataTestId(dataTestId, 'btn-reset'),
+    };
+}
 
 exports.DATE_FORMAT = DATE_FORMAT;
 exports.DAYS_IN_WEEK = DAYS_IN_WEEK;
@@ -254,6 +266,7 @@ exports.formatDate = formatDate;
 exports.generateMonths = generateMonths;
 exports.generateWeeks = generateWeeks;
 exports.generateYears = generateYears;
+exports.getCalendarMobileTestIds = getCalendarMobileTestIds;
 exports.getSelectionRange = getSelectionRange;
 exports.limitDate = limitDate;
 exports.modifyDateByShift = modifyDateByShift;

package/calendar/desktop/Component.desktop.js

@@ -41,7 +41,7 @@ var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-var styles = {"component":"calendar__component_o51bx","responsive":"calendar__responsive_o51bx","period":"calendar__period_o51bx","monthYear":"calendar__monthYear_o51bx","container":"calendar__container_o51bx","customScrollbar":"calendar__customScrollbar_o51bx","nativeScrollbar":"calendar__nativeScrollbar_o51bx","sixWeeks":"calendar__sixWeeks_o51bx"};
+var styles = {"component":"calendar__component_17570","responsive":"calendar__responsive_17570","period":"calendar__period_17570","monthYear":"calendar__monthYear_17570","container":"calendar__container_17570","customScrollbar":"calendar__customScrollbar_17570","nativeScrollbar":"calendar__nativeScrollbar_17570","sixWeeks":"calendar__sixWeeks_17570"};
 require('./desktop.css');
 
 var useCustomWebkitScrollbar = coreComponentsShared.hooks.useCustomWebkitScrollbar;

package/calendar/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 64e0j */
+/* hash: 1hbax */
 :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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
@@ -44,26 +44,26 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_o51bx {
+} .calendar__component_17570 {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_o51bx {
+} @media (max-width: 374px) { .calendar__component_17570 {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_o51bx.calendar__responsive_o51bx {
+    } .calendar__component_17570.calendar__responsive_17570 {
         width: 100%
-    } .calendar__component_o51bx.calendar__responsive_o51bx .calendar__period_o51bx {
+    } .calendar__component_17570.calendar__responsive_17570 .calendar__period_17570 {
             width: 100%;
-        } .calendar__component_o51bx.calendar__responsive_o51bx .calendar__monthYear_o51bx {
+        } .calendar__component_17570.calendar__responsive_17570 .calendar__monthYear_17570 {
             width: 100%;
-        } .calendar__component_o51bx.calendar__responsive_o51bx .calendar__container_o51bx {
+        } .calendar__component_17570.calendar__responsive_17570 .calendar__container_17570 {
             width: 100%;
-        } .calendar__container_o51bx {
+        } .calendar__container_17570 {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,65 +71,65 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_o51bx.calendar__customScrollbar_o51bx {
+} .calendar__container_17570.calendar__customScrollbar_17570 {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-track {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-track-piece {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-thumb {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-thumb:vertical {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-thumb:horizontal {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-thumb:horizontal {
         border-radius: 6px / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-thumb:active {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-resizer {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-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_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-button,
-    .calendar__container_o51bx.calendar__customScrollbar_o51bx::-webkit-scrollbar-corner {
+    } .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-button,
+    .calendar__container_17570.calendar__customScrollbar_17570::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_o51bx.calendar__customScrollbar_o51bx {
+    } .calendar__container_17570.calendar__customScrollbar_17570 {
 
         display: block;
         padding-right: var(--gap-2xs);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_o51bx.calendar__nativeScrollbar_o51bx {
+    } .calendar__container_17570.calendar__nativeScrollbar_17570 {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_o51bx {
+    } @media (max-width: 374px) { .calendar__container_17570 {
         width: 288px
 }
-    } .calendar__sixWeeks_o51bx {
+    } .calendar__sixWeeks_17570 {
     height: 388px;
-} .calendar__period_o51bx {
+} .calendar__period_17570 {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_o51bx {
+} @media (max-width: 374px) { .calendar__period_17570 {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_o51bx {
+    } .calendar__monthYear_17570 {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_o51bx {
+} @media (max-width: 374px) { .calendar__monthYear_17570 {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/Component.responsive.d.ts

@@ -10,14 +10,17 @@ type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
     breakpoint?: number;
 };
 declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
-    open: boolean;
     title?: string | undefined;
+    open: boolean;
     onClose?: (() => void) | undefined;
-    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
-    yearsAmount?: number | undefined;
-    hasHeader?: boolean | undefined;
     allowSelectionFromEmptyRange?: boolean | undefined;
+    hasHeader?: boolean | undefined;
+    onApply?: (() => void) | undefined;
 } & {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/calendar/esm/Component.responsive.js

@@ -13,6 +13,7 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
+import '../../shared/esm';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -46,7 +47,6 @@ import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/esm/desktop';
 import '@alfalab/hooks';
-import '../../shared/esm';
 import './components/header/Component.js';
 import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';