@alfalab/core-components 45.0.0 → 45.2.0

package/calendar/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/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/mobile');
 var mobile = require('../../../modal/mobile');
+var coreComponentsShared = require('../../../shared');
 var desktop_Component_desktop = require('../../desktop/Component.desktop.js');
 var useCalendar = require('../../useCalendar.js');
 var utils = require('../../utils.js');
@@ -27,13 +28,13 @@ var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-var backdropTransitionStyles = {"appear":"calendar__appear_whtn6","enter":"calendar__enter_whtn6","appearActive":"calendar__appearActive_whtn6","enterActive":"calendar__enterActive_whtn6","appearDone":"calendar__appearDone_whtn6","enterDone":"calendar__enterDone_whtn6","exit":"calendar__exit_whtn6","exitActive":"calendar__exitActive_whtn6","exitDone":"calendar__exitDone_whtn6"};
+var backdropTransitionStyles = {"appear":"calendar__appear_dhnyv","enter":"calendar__enter_dhnyv","appearActive":"calendar__appearActive_dhnyv","enterActive":"calendar__enterActive_dhnyv","appearDone":"calendar__appearDone_dhnyv","enterDone":"calendar__enterDone_dhnyv","exit":"calendar__exit_dhnyv","exitActive":"calendar__exitActive_dhnyv","exitDone":"calendar__exitDone_dhnyv"};
 require('./backdrop-transitions.css');
 
-var styles = {"wrapper":"calendar__wrapper_17sw7","withZIndex":"calendar__withZIndex_17sw7","calendar":"calendar__calendar_17sw7","dayNames":"calendar__dayNames_17sw7","withHeader":"calendar__withHeader_17sw7","month":"calendar__month_17sw7","daysTable":"calendar__daysTable_17sw7","dayName":"calendar__dayName_17sw7","virtuoso":"calendar__virtuoso_17sw7","contentModal":"calendar__contentModal_17sw7","content":"calendar__content_17sw7"};
+var styles = {"wrapper":"calendar__wrapper_czm3a","withZIndex":"calendar__withZIndex_czm3a","calendar":"calendar__calendar_czm3a","dayNames":"calendar__dayNames_czm3a","withHeader":"calendar__withHeader_czm3a","month":"calendar__month_czm3a","daysTable":"calendar__daysTable_czm3a","dayName":"calendar__dayName_czm3a","virtuoso":"calendar__virtuoso_czm3a","contentModal":"calendar__contentModal_czm3a","content":"calendar__content_czm3a"};
 require('./index.css');
 
-var transitionStyles = {"appear":"calendar__appear_ugndx","enter":"calendar__enter_ugndx","appearActive":"calendar__appearActive_ugndx","enterActive":"calendar__enterActive_ugndx","exit":"calendar__exit_ugndx","exitActive":"calendar__exitActive_ugndx","exitDone":"calendar__exitDone_ugndx"};
+var transitionStyles = {"appear":"calendar__appear_1dgt2","enter":"calendar__enter_1dgt2","appearActive":"calendar__appearActive_1dgt2","enterActive":"calendar__enterActive_1dgt2","exit":"calendar__exit_1dgt2","exitActive":"calendar__exitActive_1dgt2","exitDone":"calendar__exitDone_1dgt2"};
 require('./transitions.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
@@ -41,7 +42,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]);
@@ -53,14 +54,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 () {
@@ -93,9 +93,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.daysTable, id: "month-".concat(index) },
         onMonthTitleClick ? (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
@@ -103,27 +103,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.virtuoso }));
 };
+var CalendarMonthOnlyViewHeader = function () { return (React__default.default.createElement("table", { className: styles.dayNames },
+    React__default.default.createElement("thead", null,
+        React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); };
 var 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.dayNames },
-            React__default.default.createElement("thead", null,
-                React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))) : null;
-    };
+    var renderDayNames = function () { return (monthOnlyView ? React__default.default.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
         var commonProps = {
             value: value,
@@ -134,7 +137,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.calendar), contentClassName: styles.content }, commonProps, restProps)));
     };
@@ -145,13 +148,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.wrapper, transitionProps: {
             timeout: 360,
@@ -159,10 +162,12 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         }, backdropProps: {
             transitionClassNames: backdropTransitionStyles,
             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.withZIndex] = selectorView === 'full', _b)) })),
         React__default.default.createElement(mobile.ModalMobile.Content, { className: styles.contentModal, flex: true }, renderContent()),
         React__default.default.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn__default.default((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter())));
 });
 
 exports.CalendarMobile = CalendarMobile;
+exports.CalendarMonthOnlyView = CalendarMonthOnlyView;
+exports.CalendarMonthOnlyViewHeader = CalendarMonthOnlyViewHeader;

package/calendar/components/calendar-mobile/backdrop-transitions.css

@@ -1,4 +1,4 @@
-/* hash: 1lc1l */
+/* hash: a54ot */
 :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-bg-primary-inverted-alpha-10: rgba(14, 14, 14, 0.1);
@@ -15,19 +15,19 @@
 } :root {
 } :root {
 } :root {
-} .calendar__appear_whtn6,
-.calendar__enter_whtn6 {
+} .calendar__appear_dhnyv,
+.calendar__enter_dhnyv {
     background-color: transparent;
-} .calendar__appearActive_whtn6,
-.calendar__enterActive_whtn6,
-.calendar__appearDone_whtn6,
-.calendar__enterDone_whtn6 {
+} .calendar__appearActive_dhnyv,
+.calendar__enterActive_dhnyv,
+.calendar__appearDone_dhnyv,
+.calendar__enterDone_dhnyv {
     background-color: var(--color-light-bg-primary-inverted-alpha-10);
     transition: background-color 80ms linear;
-} .calendar__exit_whtn6 {
+} .calendar__exit_dhnyv {
     background-color: var(--color-light-bg-primary-inverted-alpha-10);
-} .calendar__exitActive_whtn6,
-.calendar__exitDone_whtn6 {
+} .calendar__exitActive_dhnyv,
+.calendar__exitDone_dhnyv {
     background-color: transparent;
     transition: background-color 80ms linear;
     transition-delay: 280ms;

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

@@ -1,4 +1,4 @@
-/* hash: 12z78 */
+/* hash: 1vzx0 */
 :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 {
     --color-light-modal-bg-primary: #fff;
@@ -57,26 +57,26 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_17sw7 {
+} .calendar__wrapper_czm3a {
     overflow-x: hidden;
-} .calendar__withZIndex_17sw7 {
+} .calendar__withZIndex_czm3a {
     z-index: 2;
-} .calendar__calendar_17sw7.calendar__calendar_17sw7 {
+} .calendar__calendar_czm3a.calendar__calendar_czm3a {
     height: 100%;
-} .calendar__calendar_17sw7 th {
+} .calendar__calendar_czm3a th {
     border-bottom: 1px solid var(--color-light-neutral-300);
-} .calendar__dayNames_17sw7 {
+} .calendar__dayNames_czm3a {
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
     top: 0;
     height: 32px;
     padding: 0 6px
-} .calendar__dayNames_17sw7.calendar__withHeader_17sw7 {
+} .calendar__dayNames_czm3a.calendar__withHeader_czm3a {
         top: 48px;
-    } .calendar__dayNames_17sw7 th {
+    } .calendar__dayNames_czm3a th {
     height: 100%;
-} .calendar__month_17sw7 {
+} .calendar__month_czm3a {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -85,25 +85,25 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_17sw7 {
+} .calendar__daysTable_czm3a {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_17sw7 {
+} .calendar__dayName_czm3a {
     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_17sw7 {
+} @media (max-width: 374px) { .calendar__dayName_czm3a {
         height: 36px
 }
-    } .calendar__virtuoso_17sw7 {
+    } .calendar__virtuoso_czm3a {
     margin: 0 var(--gap-m);
-} .calendar__contentModal_17sw7 {
+} .calendar__contentModal_czm3a {
     padding-right: 0;
     padding-left: 0;
-} .calendar__content_17sw7.calendar__content_17sw7 {
+} .calendar__content_czm3a.calendar__content_czm3a {
     flex-basis: 0;
 }

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

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

package/calendar/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/components/calendar-mobile/transitions.css

@@ -1,4 +1,4 @@
-/* hash: 64oqz */
+/* hash: 1hbln */
 :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 */
@@ -14,18 +14,18 @@
 } :root {
 } :root {
 } :root {
-} .calendar__appear_ugndx,
-.calendar__enter_ugndx {
+} .calendar__appear_1dgt2,
+.calendar__enter_1dgt2 {
     transform: translateX(100%);
-} .calendar__appearActive_ugndx,
-.calendar__enterActive_ugndx {
+} .calendar__appearActive_1dgt2,
+.calendar__enterActive_1dgt2 {
     transform: translateX(0);
     transition: transform 280ms ease-in-out;
     transition-delay: 80ms;
-} .calendar__exit_ugndx {
+} .calendar__exit_1dgt2 {
     transform: translateX(0);
-} .calendar__exitActive_ugndx,
-.calendar__exitDone_ugndx {
+} .calendar__exitActive_1dgt2,
+.calendar__exitDone_1dgt2 {
     transform: translateX(100%);
     transition: transform 280ms ease-in-out;
 }

package/calendar/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/components/calendar-mobile/typings.js

@@ -0,0 +1 @@
+

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

@@ -25,7 +25,7 @@ var isToday__default = /*#__PURE__*/_interopDefaultCompat(isToday);
 var isWithinInterval__default = /*#__PURE__*/_interopDefaultCompat(isWithinInterval);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-var styles = {"daysTable":"calendar__daysTable_1gf10","responsive":"calendar__responsive_1gf10","dayName":"calendar__dayName_1gf10","day":"calendar__day_1gf10","rounded":"calendar__rounded_1gf10","rectangular":"calendar__rectangular_1gf10","highlighted":"calendar__highlighted_1gf10","range":"calendar__range_1gf10","disabled":"calendar__disabled_1gf10","holiday":"calendar__holiday_1gf10","today":"calendar__today_1gf10","rangeComplete":"calendar__rangeComplete_1gf10","selected":"calendar__selected_1gf10","dayWrapper":"calendar__dayWrapper_1gf10","cursorPointer":"calendar__cursorPointer_1gf10","rangeEnd":"calendar__rangeEnd_1gf10","rangeStart":"calendar__rangeStart_1gf10","transitLeft":"calendar__transitLeft_1gf10","transitRight":"calendar__transitRight_1gf10","sharpTransitLeft":"calendar__sharpTransitLeft_1gf10","sharpTransitRight":"calendar__sharpTransitRight_1gf10","daysEnter":"calendar__daysEnter_1gf10","left":"calendar__left_1gf10","daysEnterActive":"calendar__daysEnterActive_1gf10","daysExit":"calendar__daysExit_1gf10","daysExitActive":"calendar__daysExitActive_1gf10","right":"calendar__right_1gf10","dayAddons":"calendar__dayAddons_1gf10","dayContent":"calendar__dayContent_1gf10","addons":"calendar__addons_1gf10","dot":"calendar__dot_1gf10","bottomAddon":"calendar__bottomAddon_1gf10"};
+var styles = {"daysTable":"calendar__daysTable_abmr8","responsive":"calendar__responsive_abmr8","dayName":"calendar__dayName_abmr8","day":"calendar__day_abmr8","rounded":"calendar__rounded_abmr8","rectangular":"calendar__rectangular_abmr8","highlighted":"calendar__highlighted_abmr8","range":"calendar__range_abmr8","disabled":"calendar__disabled_abmr8","holiday":"calendar__holiday_abmr8","today":"calendar__today_abmr8","rangeComplete":"calendar__rangeComplete_abmr8","selected":"calendar__selected_abmr8","dayWrapper":"calendar__dayWrapper_abmr8","cursorPointer":"calendar__cursorPointer_abmr8","rangeEnd":"calendar__rangeEnd_abmr8","rangeStart":"calendar__rangeStart_abmr8","transitLeft":"calendar__transitLeft_abmr8","transitRight":"calendar__transitRight_abmr8","sharpTransitLeft":"calendar__sharpTransitLeft_abmr8","sharpTransitRight":"calendar__sharpTransitRight_abmr8","daysEnter":"calendar__daysEnter_abmr8","left":"calendar__left_abmr8","daysEnterActive":"calendar__daysEnterActive_abmr8","daysExit":"calendar__daysExit_abmr8","daysExitActive":"calendar__daysExitActive_abmr8","right":"calendar__right_abmr8","dayAddons":"calendar__dayAddons_abmr8","dayContent":"calendar__dayContent_abmr8","addons":"calendar__addons_abmr8","dot":"calendar__dot_abmr8","bottomAddon":"calendar__bottomAddon_abmr8"};
 require('./index.css');
 
 var DaysTable = function (_a) {