@alfalab/core-components 27.8.1 → 27.9.0-beta.0

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-cee35d46.js');
+require('../../tslib.es6-b32742c1.js');
 require('react');
 require('classnames');
 require('../../../button');

package/calendar/cssm/Component.d.ts

@@ -15,14 +15,6 @@ type CalendarProps = {
      * Вид шапки — месяц и год или только месяц
      */
     selectorView?: SelectorView;
-    /**
-     * Возможность выбора месяца и года, если selectorView 'month-only'
-     */
-    isMonthAndYearSelectable?: boolean;
-    /**
-     * Отображать ли текущий год, если isMonthAndYearSelectable true
-     */
-    showCurrentYearSelector?: boolean;
     /**
      * Выбранная дата (timestamp)
      */
@@ -70,7 +62,7 @@ type CalendarProps = {
     /**
      * Обработчик выбора даты
      */
-    onChange?: (date: number) => void;
+    onChange?: (date?: number) => void;
     /**
      * Обработчик нажатия на кнопку месяца
      */
@@ -83,6 +75,10 @@ type CalendarProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
 };
 declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
 export { CalendarProps, Calendar };

package/calendar/cssm/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-ce870b46.js');
+var tslib_es6 = require('./tslib.es6-f8106a15.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfDay = require('date-fns/startOfDay');
@@ -65,10 +65,10 @@ require('date-fns/setYear');
 require('date-fns/subYears');
 require('react-merge-refs');
 var useCalendar = require('./useCalendar.js');
-var styles = require('./index.module.css');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('./components/month-year-header/index.module.css');
 var components_monthYearHeader_Component = require('./components/month-year-header/Component.js');
+var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -81,9 +81,9 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Calendar = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, isMonthAndYearSelectable = _a.isMonthAndYearSelectable, showCurrentYearSelector = _a.showCurrentYearSelector, 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, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
-    var _f = React.useState(defaultView), view = _f[0], setView = _f[1];
-    var _g = React.useState(false), scrolled = _g[0], setScrolled = _g[1];
+    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, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f;
+    var _g = React.useState(defaultView), view = _g[0], setView = _g[1];
+    var _h = React.useState(false), scrolled = _h[0], setScrolled = _h[1];
     var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = React.useMemo(function () {
         return startOfMonth__default['default'](selected ||
@@ -98,7 +98,7 @@ var Calendar = React.forwardRef(function (_a, ref) {
     var maxDate = React.useMemo(function () { return (maxDateTimestamp ? endOfDay__default['default'](maxDateTimestamp) : undefined); }, [
         maxDateTimestamp,
     ]);
-    var _h = useCalendar.useCalendar({
+    var _j = useCalendar.useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -109,7 +109,7 @@ var Calendar = React.forwardRef(function (_a, ref) {
         events: events,
         onChange: onChange,
         onMonthChange: onMonthChange,
-    }), activeMonth = _h.activeMonth, weeks = _h.weeks, months = _h.months, years = _h.years, canSetPrevMonth = _h.canSetPrevMonth, canSetNextMonth = _h.canSetNextMonth, setMonthByDate = _h.setMonthByDate, setPrevMonth = _h.setPrevMonth, setNextMonth = _h.setNextMonth, highlighted = _h.highlighted, getDayProps = _h.getDayProps, getMonthProps = _h.getMonthProps, getYearProps = _h.getYearProps, getRootProps = _h.getRootProps;
+    }), activeMonth = _j.activeMonth, weeks = _j.weeks, months = _j.months, years = _j.years, canSetPrevMonth = _j.canSetPrevMonth, canSetNextMonth = _j.canSetNextMonth, setMonthByDate = _j.setMonthByDate, setPrevMonth = _j.setPrevMonth, setNextMonth = _j.setNextMonth, highlighted = _j.highlighted, getDayProps = _j.getDayProps, getMonthProps = _j.getMonthProps, getYearProps = _j.getYearProps, getRootProps = _j.getRootProps;
     var toggleView = React.useCallback(function (newView) {
         setView(view === newView ? 'days' : newView);
     }, [view]);
@@ -150,7 +150,7 @@ var Calendar = React.forwardRef(function (_a, ref) {
     return (React__default['default'].createElement("div", tslib_es6.__assign({}, getRootProps({ ref: ref }), { className: cn__default['default']('cc-calendar', styles__default['default'].component, className, (_b = {},
             _b[styles__default['default'].sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        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, isMonthAndYearSelectable: isMonthAndYearSelectable, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick })) : (React__default['default'].createElement(components_monthYearHeader_Component.MonthYearHeader, { className: styles__default['default'].monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        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, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (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, 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 })),
             view === 'months' && (React__default['default'].createElement(components_monthsTable_Component.MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),

package/calendar/cssm/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

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

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarProps } from "../../index";
+type CalendarMobileProps = CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string | undefined;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMobileProps, CalendarMobile };

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

@@ -0,0 +1,209 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-f8106a15.js');
+var React = require('react');
+var cn = require('classnames');
+var startOfDay = require('date-fns/startOfDay');
+var startOfMonth = require('date-fns/startOfMonth');
+var endOfDay = require('date-fns/endOfDay');
+require('@alfalab/hooks');
+require('../header/index.module.css');
+require('../header/Component.js');
+var coreComponentsButton = require('../../../../button/cssm');
+require('date-fns/isEqual');
+require('date-fns/isLastDayOfMonth');
+require('date-fns/isSameDay');
+require('date-fns/isToday');
+require('date-fns/isWithinInterval');
+require('react-transition-group');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
+var utils = require('../../utils.js');
+require('../days-table/index.module.css');
+var components_daysTable_Component = require('../days-table/Component.js');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
+require('../select-button/index.module.css');
+require('../select-button/Component.js');
+require('../months-table/index.module.css');
+require('../months-table/Component.js');
+require('date-fns/isSameYear');
+require('date-fns/isThisYear');
+require('../years-table/index.module.css');
+require('../years-table/Component.js');
+require('../../../../icon-button/cssm');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
+require('date-fns/addQuarters');
+require('date-fns/addWeeks');
+require('date-fns/addYears');
+require('date-fns/endOfMonth');
+require('date-fns/endOfQuarter');
+require('date-fns/getQuarter');
+require('date-fns/getYear');
+require('date-fns/isYesterday');
+require('date-fns/startOfQuarter');
+require('../period-slider/utils.js');
+require('../period-slider/index.module.css');
+require('../period-slider/Component.js');
+require('date-fns/setYear');
+require('date-fns/subYears');
+require('react-merge-refs');
+var useCalendar = require('../../useCalendar.js');
+require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('../month-year-header/index.module.css');
+require('../month-year-header/Component.js');
+require('../../index.module.css');
+var Component = require('../../Component.js');
+require('date-fns/differenceInDays');
+var reactVirtuoso = require('react-virtuoso');
+var mobile = require('../../../../modal/cssm/mobile');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var startOfDay__default = /*#__PURE__*/_interopDefaultLegacy(startOfDay);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
+var endOfDay__default = /*#__PURE__*/_interopDefaultLegacy(endOfDay);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var CalendarMobile = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.defaultView, defaultView = _b === void 0 ? 'days' : _b, _c = _a.selectorView, selectorView = _c === void 0 ? 'full' : _c, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _d = _a.defaultMonth, defaultMonthTimestamp = _d === void 0 ? +new Date() : _d, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _e = _a.title, title = _e === void 0 ? 'Календарь' : _e, _f = _a.yearsAmount, yearsAmount = _f === void 0 ? 10 : _f;
+    var modalRef = React.useRef(null);
+    var initialMonthIndex = React.useMemo(function () {
+        var currentMonthIndex = new Date().getMonth();
+        return yearsAmount * 12 + currentMonthIndex;
+    }, [yearsAmount]);
+    var monthOnlyView = React.useMemo(function () { return selectorView === 'month-only'; }, [selectorView]);
+    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 selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
+    var defaultMonth = React.useMemo(function () {
+        return startOfMonth__default['default'](selected ||
+            utils.limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    var _g = useCalendar.useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: defaultView,
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        onChange: onChange,
+        onMonthChange: onMonthChange,
+    }), activeMonth = _g.activeMonth, months = _g.months, highlighted = _g.highlighted, getDayProps = _g.getDayProps;
+    var _h = React.useState(months), activeMonths = _h[0], setActiveMonths = _h[1];
+    var generateInitialMonths = React.useCallback(function () {
+        var prevMonths = [];
+        var nextMonths = [];
+        for (var i = 0; i < yearsAmount; i++) {
+            var prevYear = new Date().setFullYear(new Date().getFullYear() - (i + 1));
+            var nextYear = new Date().setFullYear(new Date().getFullYear() + (i + 1));
+            var prevYearMonths = utils.generateMonths(new Date(prevYear), {});
+            var nextYearMonths = utils.generateMonths(new Date(nextYear), {});
+            prevMonths.unshift.apply(prevMonths, prevYearMonths);
+            nextMonths.push.apply(nextMonths, nextYearMonths);
+        }
+        setActiveMonths(function (prevState) { return tslib_es6.__spreadArrays(prevMonths, prevState, nextMonths); });
+    }, [yearsAmount]);
+    var handleClose = React.useCallback(function () {
+        if (onClose)
+            onClose();
+    }, [onClose]);
+    var handleClear = React.useCallback(function () {
+        if (onChange)
+            onChange();
+    }, [onChange]);
+    React.useEffect(function () {
+        generateInitialMonths();
+    }, [generateInitialMonths]);
+    var renderHeader = React.useCallback(function () { return (React__default['default'].createElement("table", { className: styles__default['default'].calendarHeader },
+        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 renderMonth = React.useCallback(function (index, key) {
+        return (React__default['default'].createElement("div", { className: styles__default['default'].daysTable, id: "month-" + index, key: key },
+            React__default['default'].createElement("span", { className: styles__default['default'].month }, utils.monthName(activeMonths[index].date) + " " + activeMonths[index].date.getFullYear()),
+            React__default['default'].createElement(components_daysTable_Component.DaysTable, { weeks: utils.generateWeeks(activeMonths[index].date, {
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    selected: selected,
+                }), activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false })));
+    }, [
+        activeMonths,
+        minDate,
+        maxDate,
+        selected,
+        activeMonth,
+        selectedFrom,
+        selectedTo,
+        getDayProps,
+        highlighted,
+        rangeComplete,
+    ]);
+    var renderContent = React.useCallback(function () {
+        if (monthOnlyView) {
+            return (React__default['default'].createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, overscan: { main: 1000, reverse: 1000 }, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
+        }
+        return (React__default['default'].createElement(Component.Calendar, { value: value, onChange: onChange, offDays: offDays, events: events, defaultView: defaultView, selectorView: selectorView, className: styles__default['default'].calendar, onMonthClick: onMonthClick, onYearClick: onYearClick, selectedFrom: selectedFrom, selectedTo: selectedTo }));
+    }, [
+        monthOnlyView,
+        activeMonths,
+        selectedFrom,
+        selectedTo,
+        value,
+        onChange,
+        offDays,
+        events,
+        defaultView,
+        selectorView,
+        onMonthClick,
+        onYearClick,
+        renderMonth,
+        initialMonthIndex,
+    ]);
+    var renderFooter = React.useCallback(function () {
+        if (selectedFrom || selectedTo) {
+            return (React__default['default'].createElement(React__default['default'].Fragment, null,
+                React__default['default'].createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: !selectedFrom || !selectedTo }, "\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"));
+        }
+        return (React__default['default'].createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+    }, [value, selectedFrom, selectedTo, handleClose, handleClear]);
+    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: modalRef, className: styles__default['default'].modal, wrapperClassName: styles__default['default'].wrapper },
+            React__default['default'].createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, align: 'center', leftAddons: React__default['default'].createElement("div", null), sticky: true, className: styles__default['default'].modalHeader }),
+            monthOnlyView && renderHeader(),
+            React__default['default'].createElement(mobile.ModalMobile.Content, { flex: true, className: styles__default['default'].modalContent }, renderContent()),
+            React__default['default'].createElement(mobile.ModalMobile.Footer, { sticky: true, className: styles__default['default'].modalFooter }, renderFooter()))));
+});
+
+exports.CalendarMobile = CalendarMobile;

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

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

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

@@ -0,0 +1,81 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-f8106a15.js');
+require('react');
+require('classnames');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
+require('date-fns/endOfDay');
+require('@alfalab/hooks');
+require('../header/index.module.css');
+require('../header/Component.js');
+require('../../../../button/cssm');
+require('date-fns/isEqual');
+require('date-fns/isLastDayOfMonth');
+require('date-fns/isSameDay');
+require('date-fns/isToday');
+require('date-fns/isWithinInterval');
+require('react-transition-group');
+require('date-fns/eachDayOfInterval');
+require('date-fns/eachMonthOfInterval');
+require('date-fns/eachYearOfInterval');
+require('date-fns/lastDayOfMonth');
+require('date-fns/startOfYear');
+require('date-fns/endOfYear');
+require('date-fns/isBefore');
+require('date-fns/isAfter');
+require('date-fns/min');
+require('date-fns/max');
+require('date-fns/addDays');
+require('date-fns/addMonths');
+require('date-fns/endOfWeek');
+require('date-fns/startOfWeek');
+require('date-fns/subDays');
+require('date-fns/subMonths');
+require('date-fns/format');
+require('date-fns/parse');
+require('../../utils.js');
+require('../days-table/index.module.css');
+require('../days-table/Component.js');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
+require('../select-button/index.module.css');
+require('../select-button/Component.js');
+require('../months-table/index.module.css');
+require('../months-table/Component.js');
+require('date-fns/isSameYear');
+require('date-fns/isThisYear');
+require('../years-table/index.module.css');
+require('../years-table/Component.js');
+require('../../../../icon-button/cssm');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
+require('date-fns/addQuarters');
+require('date-fns/addWeeks');
+require('date-fns/addYears');
+require('date-fns/endOfMonth');
+require('date-fns/endOfQuarter');
+require('date-fns/getQuarter');
+require('date-fns/getYear');
+require('date-fns/isYesterday');
+require('date-fns/startOfQuarter');
+require('../period-slider/utils.js');
+require('../period-slider/index.module.css');
+require('../period-slider/Component.js');
+require('date-fns/setYear');
+require('date-fns/subYears');
+require('react-merge-refs');
+require('../../useCalendar.js');
+require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('../month-year-header/index.module.css');
+require('../month-year-header/Component.js');
+require('../../index.module.css');
+require('../../Component.js');
+require('date-fns/differenceInDays');
+require('react-virtuoso');
+require('../../../../modal/cssm/mobile');
+require('./index.module.css');
+var components_calendarMobile_Component = require('./Component.js');
+
+
+
+exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;

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

@@ -0,0 +1,96 @@
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-m: 16px;
+    --gap-2xl: 32px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+    --calendar-day-size: 40px;
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.wrapper {
+    background: var(--color-light-bg-primary);
+}
+.modalHeader {
+    z-index: 1000;
+}
+.modalFooter {
+    z-index: 1000;
+}
+.calendar {
+    width: unset;
+}
+.calendar th {
+    border-bottom: 1px solid var(--color-light-border-primary);
+}
+.calendarHeader {
+    padding: 0 var(--gap-m);
+    width: 100%;
+    position: sticky;
+    border-bottom: 1px solid var(--color-light-border-primary);
+    background: var(--modal-header-background);
+    top: 48px;
+    height: 32px;
+    z-index: 1000;
+}
+.calendarHeader th {
+    height: 100%;
+}
+.month {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    color: var(--color-light-text-primary);
+    margin-bottom: var(--gap-xs);
+}
+.daysTable {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--gap-2xl);
+}
+.dayName {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    height: var(--calendar-day-size);
+    color: var(--color-light-text-secondary)
+}
+@media (max-width: 374px) {
+.dayName {
+        height: 36px
+}
+    }

package/calendar/cssm/components/days-table/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, RefCallback } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, RefCallback } from "react";
 import { Day } from "../../typings";
 type DaysTableProps = {
     /**
@@ -29,8 +31,13 @@ type DaysTableProps = {
      * Доп. пропсы для переданного дня
      */
     getDayProps: (day: Day) => Record<string, unknown> & {
-        ref: RefCallback<HTMLButtonElement>;
+        ref: RefCallback<HTMLTableDataCellElement>;
+        onClick: (e: React.MouseEvent<HTMLTableDataCellElement>) => void;
     };
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };