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

package/calendar/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/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-9910ce3e.js');
+var tslib_es6 = require('./tslib.es6-b32742c1.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfDay = require('date-fns/startOfDay');
@@ -70,14 +70,14 @@ var startOfDay__default = /*#__PURE__*/_interopDefaultLegacy(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(startOfMonth);
 var endOfDay__default = /*#__PURE__*/_interopDefaultLegacy(endOfDay);
 
-var styles = {"component":"calendar__component_qbnvz","container":"calendar__container_qbnvz","sixWeeks":"calendar__sixWeeks_qbnvz","period":"calendar__period_qbnvz","monthYear":"calendar__monthYear_qbnvz"};
+var styles = {"component":"calendar__component_bfg73","container":"calendar__container_bfg73","sixWeeks":"calendar__sixWeeks_bfg73","period":"calendar__period_bfg73","monthYear":"calendar__monthYear_bfg73"};
 require('./index.css');
 
 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 ||
@@ -92,7 +92,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,
@@ -103,7 +103,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]);
@@ -144,7 +144,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.component, className, (_b = {},
             _b[styles.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.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.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.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.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React__default['default'].createElement("div", { className: cn__default['default'](styles.container, styles[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/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/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/components/calendar-mobile/Component.js

@@ -0,0 +1,202 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-b32742c1.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/Component.js');
+var coreComponentsButton = require('../../../button');
+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');
+var components_daysTable_Component = require('../days-table/Component.js');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
+require('../select-button/Component.js');
+require('../months-table/Component.js');
+require('date-fns/isSameYear');
+require('date-fns/isThisYear');
+require('../years-table/Component.js');
+require('../../../icon-button');
+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/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/Component.js');
+var Component = require('../../Component.js');
+require('date-fns/differenceInDays');
+var reactVirtuoso = require('react-virtuoso');
+var mobile = require('../../../modal/mobile');
+
+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 = {"wrapper":"calendar__wrapper_czdzi","modalHeader":"calendar__modalHeader_czdzi","modalFooter":"calendar__modalFooter_czdzi","calendar":"calendar__calendar_czdzi","calendarHeader":"calendar__calendarHeader_czdzi","month":"calendar__month_czdzi","daysTable":"calendar__daysTable_czdzi","dayName":"calendar__dayName_czdzi"};
+require('./index.css');
+
+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.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.dayName, key: dayName }, dayName)); }))))); }, []);
+    var renderMonth = React.useCallback(function (index, key) {
+        return (React__default['default'].createElement("div", { className: styles.daysTable, id: "month-" + index, key: key },
+            React__default['default'].createElement("span", { className: styles.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.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.component), ref: ref, "data-test-id": dataTestId },
+        React__default['default'].createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.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.modalHeader }),
+            monthOnlyView && renderHeader(),
+            React__default['default'].createElement(mobile.ModalMobile.Content, { flex: true, className: styles.modalContent }, renderContent()),
+            React__default['default'].createElement(mobile.ModalMobile.Footer, { sticky: true, className: styles.modalFooter }, renderFooter()))));
+});
+
+exports.CalendarMobile = CalendarMobile;

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

@@ -0,0 +1,97 @@
+/* hash: 1iqq9 */
+: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 */
+}
+.calendar__wrapper_czdzi {
+    background: var(--color-light-bg-primary);
+}
+.calendar__modalHeader_czdzi {
+    z-index: 1000;
+}
+.calendar__modalFooter_czdzi {
+    z-index: 1000;
+}
+.calendar__calendar_czdzi {
+    width: unset;
+}
+.calendar__calendar_czdzi th {
+    border-bottom: 1px solid var(--color-light-border-primary);
+}
+.calendar__calendarHeader_czdzi {
+    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;
+}
+.calendar__calendarHeader_czdzi th {
+    height: 100%;
+}
+.calendar__month_czdzi {
+    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);
+}
+.calendar__daysTable_czdzi {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--gap-2xl);
+}
+.calendar__dayName_czdzi {
+    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_czdzi {
+        height: 36px
+}
+    }

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

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

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

@@ -0,0 +1,72 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-b32742c1.js');
+require('react');
+require('classnames');
+require('date-fns/startOfDay');
+require('date-fns/startOfMonth');
+require('date-fns/endOfDay');
+require('@alfalab/hooks');
+require('../header/Component.js');
+require('../../../button');
+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/Component.js');
+require('date-fns/isSameMonth');
+require('date-fns/isThisMonth');
+require('../select-button/Component.js');
+require('../months-table/Component.js');
+require('date-fns/isSameYear');
+require('date-fns/isThisYear');
+require('../years-table/Component.js');
+require('../../../icon-button');
+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/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/Component.js');
+require('../../Component.js');
+require('date-fns/differenceInDays');
+require('react-virtuoso');
+require('../../../modal/mobile');
+var components_calendarMobile_Component = require('./Component.js');
+
+
+
+exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;

package/calendar/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 };

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-9910ce3e.js');
+var tslib_es6 = require('../../tslib.es6-b32742c1.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');
@@ -44,11 +44,11 @@ var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
 var isToday__default = /*#__PURE__*/_interopDefaultLegacy(isToday);
 var isWithinInterval__default = /*#__PURE__*/_interopDefaultLegacy(isWithinInterval);
 
-var styles = {"daysTable":"calendar__daysTable_4ctys","dayName":"calendar__dayName_4ctys","day":"calendar__day_4ctys","highlighted":"calendar__highlighted_4ctys","range":"calendar__range_4ctys","disabled":"calendar__disabled_4ctys","today":"calendar__today_4ctys","rangeComplete":"calendar__rangeComplete_4ctys","selected":"calendar__selected_4ctys","dayWrapper":"calendar__dayWrapper_4ctys","rangeEnd":"calendar__rangeEnd_4ctys","rangeStart":"calendar__rangeStart_4ctys","transitLeft":"calendar__transitLeft_4ctys","transitRight":"calendar__transitRight_4ctys","left":"calendar__left_4ctys","daysEnter":"calendar__daysEnter_4ctys","daysEnterActive":"calendar__daysEnterActive_4ctys","daysExit":"calendar__daysExit_4ctys","daysExitActive":"calendar__daysExitActive_4ctys","right":"calendar__right_4ctys","dot":"calendar__dot_4ctys"};
+var styles = {"daysTable":"calendar__daysTable_1dttu","dayName":"calendar__dayName_1dttu","day":"calendar__day_1dttu","highlighted":"calendar__highlighted_1dttu","range":"calendar__range_1dttu","disabled":"calendar__disabled_1dttu","today":"calendar__today_1dttu","rangeComplete":"calendar__rangeComplete_1dttu","selected":"calendar__selected_1dttu","dayWrapper":"calendar__dayWrapper_1dttu","rangeEnd":"calendar__rangeEnd_1dttu","rangeStart":"calendar__rangeStart_1dttu","transitLeft":"calendar__transitLeft_1dttu","transitRight":"calendar__transitRight_1dttu","sharpTransitLeft":"calendar__sharpTransitLeft_1dttu","sharpTransitRight":"calendar__sharpTransitRight_1dttu","daysEnter":"calendar__daysEnter_1dttu","left":"calendar__left_1dttu","daysEnterActive":"calendar__daysEnterActive_1dttu","daysExit":"calendar__daysExit_1dttu","daysExitActive":"calendar__daysExitActive_1dttu","right":"calendar__right_1dttu","dot":"calendar__dot_1dttu"};
 require('./index.css');
 
 var DaysTable = function (_a) {
-    var _b = _a.weeks, weeks = _b === void 0 ? [] : _b, _c = _a.activeMonth, activeMonth = _c === void 0 ? new Date() : _c, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.rangeComplete, rangeComplete = _d === void 0 ? selectedFrom && selectedTo : _d, getDayProps = _a.getDayProps;
+    var _b = _a.weeks, weeks = _b === void 0 ? [] : _b, _c = _a.activeMonth, activeMonth = _c === void 0 ? new Date() : _c, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.rangeComplete, rangeComplete = _d === void 0 ? selectedFrom && selectedTo : _d, getDayProps = _a.getDayProps, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e;
     var activeMonthRef = React.useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = hooks.usePrevious(activeMonth);
@@ -66,42 +66,63 @@ var DaysTable = function (_a) {
             (selectedTo && isSameDay__default['default'](day.date, selectedTo));
         var dayHighlighted = highlighted && isEqual__default['default'](day.date, highlighted);
         var inRange = selection && isWithinInterval__default['default'](day.date, selection);
-        var firstDay = day.date.getDate() === 1;
-        var lastDay = isLastDayOfMonth__default['default'](day.date);
-        var transitLeft = firstDay && inRange && selection && day.date > selection.start;
-        var transitRight = lastDay && inRange && selection && day.date < selection.end;
+        var firstDayOfMonth = day.date.getDate() === 1;
+        var lastDayOfMonth = isLastDayOfMonth__default['default'](day.date);
+        var firstDayOfWeek = utils.russianWeekDay(day.date) === 0;
+        var lastDayOfWeek = utils.russianWeekDay(day.date) === 6;
+        var transitLeft = firstDayOfMonth && inRange && selection && day.date > selection.start;
+        var transitRight = lastDayOfMonth && inRange && selection && day.date < selection.end;
         var rangeStart = selection && isSameDay__default['default'](day.date, selection.start);
         var rangeEnd = selection && isSameDay__default['default'](day.date, selection.end);
+        var sharpTransitLeft = firstDayOfWeek &&
+            firstDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay__default['default'](day.date, selection.start) || isSameDay__default['default'](day.date, selection.end));
+        var sharpTransitRight = lastDayOfWeek &&
+            lastDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay__default['default'](day.date, selection.start) || isSameDay__default['default'](day.date, selection.end));
         var dayProps = getDayProps(day);
-        return (React__default['default'].createElement("td", { key: day.date.getTime(), className: cn__default['default'](styles.dayWrapper, (_a = {},
+        var onClick = dayProps.onClick;
+        var handleDayClick = function (e) {
+            if (!day.disabled)
+                onClick(e);
+        };
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        React__default['default'].createElement("td", tslib_es6.__assign({}, dayProps, { key: day.date.getTime(), className: cn__default['default'](styles.dayWrapper, (_a = {},
                 _a[styles.range] = inRange,
                 _a[styles.rangeComplete] = inRange && rangeComplete,
                 _a[styles.transitLeft] = transitLeft,
                 _a[styles.transitRight] = transitRight,
+                _a[styles.sharpTransitLeft] = sharpTransitLeft,
+                _a[styles.sharpTransitRight] = sharpTransitRight,
                 _a[styles.rangeStart] = rangeStart,
                 _a[styles.rangeEnd] = rangeEnd,
-                _a)) },
-            React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({}, dayProps, { ref: function (node) {
-                    /**
-                     * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
-                     * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
-                     */
-                    if (startOfMonth__default['default'](day.date).getTime() === activeMonthRef.current.getTime()) {
-                        dayProps.ref(node);
-                    }
-                }, type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn__default['default'](styles.day, (_b = {},
+                _a)), align: 'center', ref: function (node) {
+                /**
+                 * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
+                 * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
+                 */
+                if (startOfMonth__default['default'](day.date).getTime() === activeMonthRef.current.getTime()) {
+                    dayProps.ref(node);
+                }
+            }, onClick: handleDayClick }),
+            React__default['default'].createElement(coreComponentsButton.Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn__default['default'](styles.day, (_b = {},
                     _b[styles.selected] = daySelected,
                     _b[styles.today] = isToday__default['default'](day.date),
                     _b[styles.disabled] = day.disabled,
                     _b[styles.highlighted] = dayHighlighted,
-                    _b)) }),
+                    _b)) },
                 day.event && React__default['default'].createElement("span", { className: styles.dot }),
                 day.date.getDate())));
     };
     var renderWeek = function (week, weekIdx) { return (React__default['default'].createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     return (React__default['default'].createElement("table", { className: cn__default['default'](styles.daysTable, direction && styles[direction]) },
-        React__default['default'].createElement("thead", null,
-            React__default['default'].createElement("tr", null, renderHeader())),
+        hasHeader && (React__default['default'].createElement("thead", null,
+            React__default['default'].createElement("tr", null, renderHeader()))),
         React__default['default'].createElement(reactTransitionGroup.TransitionGroup, { component: null },
             React__default['default'].createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
                     enter: styles.daysEnter,