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

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

@@ -12,6 +12,7 @@
     --gap-xs: 8px;
 }
 :root {
+    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -35,8 +36,8 @@
 .calendar__monthsTable_14iuc {
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
-    justify-content: space-between
+    width: var(--calendar-inner-width);
+    justify-content: flex-start
 }
 @media (max-width: 374px) {
 .calendar__monthsTable_14iuc {
@@ -44,7 +45,8 @@
 }
     }
 .calendar__button_14iuc {
-    width: 33%;
+    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+    margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
 .calendar__button_14iuc:nth-child(3n) {

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-7e766274.js');
+require('../../tslib.es6-a7d75da2.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/components/select-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-7e766274.js');
+var tslib_es6 = require('../../tslib.es6-a7d75da2.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../button');

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

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

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-7e766274.js');
+var tslib_es6 = require('../../tslib.es6-a7d75da2.js');
 var React = require('react');
 require('classnames');
 require('../../../button');

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

@@ -12,6 +12,7 @@
     --gap-xs: 8px;
 }
 :root {
+    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -36,7 +37,6 @@
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
-    justify-content: space-between;
 }
 .calendar__inner_plhrj {
     display: flex;
@@ -45,6 +45,7 @@
     position: relative;
 
     /* (width - inner-width) / 2 */
+    left: 32px;
     overflow: hidden
 }
 @media (max-width: 374px) {
@@ -54,7 +55,8 @@
     }
 .calendar__button_plhrj {
     /* 3 колонки с равными отступами */
-    width: 33%;
+    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+    margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
 .calendar__button_plhrj:nth-child(3n) {

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

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

package/calendar/cssm/Component.d.ts

@@ -15,6 +15,14 @@ type CalendarProps = {
      * Вид шапки — месяц и год или только месяц
      */
     selectorView?: SelectorView;
+    /**
+     * Возможность выбора месяца и года, если selectorView 'month-only'
+     */
+    isMonthAndYearSelectable?: boolean;
+    /**
+     * Отображать ли текущий год, если isMonthAndYearSelectable true
+     */
+    showCurrentYearSelector?: boolean;
     /**
      * Выбранная дата (timestamp)
      */
@@ -62,7 +70,7 @@ type CalendarProps = {
     /**
      * Обработчик выбора даты
      */
-    onChange?: (date?: number) => void;
+    onChange?: (date: number) => void;
     /**
      * Обработчик нажатия на кнопку месяца
      */
@@ -75,10 +83,6 @@ 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-f8106a15.js');
+var tslib_es6 = require('./tslib.es6-ce870b46.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, 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 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 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 _j = useCalendar.useCalendar({
+    var _h = 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 = _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;
+    }), 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;
     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'](styles__default['default'].component, className, (_b = {},
             _b[styles__default['default'].sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React__default['default'].createElement(components_header_Component.Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React__default['default'].createElement(components_periodSlider_Component.PeriodSlider, { className: styles__default['default'].period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, 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(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 }))),
         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/components/days-table/Component.d.ts

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

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-f8106a15.js');
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');
@@ -47,7 +47,7 @@ var isWithinInterval__default = /*#__PURE__*/_interopDefaultLegacy(isWithinInter
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 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, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e;
+    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 activeMonthRef = React.useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = hooks.usePrevious(activeMonth);
@@ -65,65 +65,44 @@ 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 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 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 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);
-        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__default['default'].dayWrapper, (_a = {},
+        return (React__default['default'].createElement("td", { key: day.date.getTime(), className: cn__default['default'](styles__default['default'].dayWrapper, (_a = {},
                 _a[styles__default['default'].range] = inRange,
                 _a[styles__default['default'].rangeComplete] = inRange && rangeComplete,
                 _a[styles__default['default'].transitLeft] = transitLeft,
                 _a[styles__default['default'].transitRight] = transitRight,
-                _a[styles__default['default'].sharpTransitLeft] = sharpTransitLeft,
-                _a[styles__default['default'].sharpTransitRight] = sharpTransitRight,
                 _a[styles__default['default'].rangeStart] = rangeStart,
                 _a[styles__default['default'].rangeEnd] = rangeEnd,
-                _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__default['default'].day, (_b = {},
+                _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__default['default'].day, (_b = {},
                     _b[styles__default['default'].selected] = daySelected,
                     _b[styles__default['default'].today] = isToday__default['default'](day.date),
                     _b[styles__default['default'].disabled] = day.disabled,
                     _b[styles__default['default'].highlighted] = dayHighlighted,
-                    _b)) },
+                    _b)) }),
                 day.event && React__default['default'].createElement("span", { className: styles__default['default'].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__default['default'].daysTable, direction && styles__default['default'][direction]) },
-        hasHeader && (React__default['default'].createElement("thead", null,
-            React__default['default'].createElement("tr", null, renderHeader()))),
+        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: 250, classNames: {
+            React__default['default'].createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
                     enter: styles__default['default'].daysEnter,
                     enterActive: styles__default['default'].daysEnterActive,
                     exit: styles__default['default'].daysExit,

package/calendar/cssm/components/days-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-f8106a15.js');
+require('../../tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/cssm/components/days-table/index.module.css

@@ -67,8 +67,7 @@
 .daysTable {
     border-collapse: separate;
     border-spacing: 0;
-    position: relative;
-    width: 100%
+    position: relative
 }
 .daysTable th {
         padding: 0;
@@ -94,8 +93,6 @@
     line-height: 24px;
     font-weight: 400;
 
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
     position: relative;
     width: var(--calendar-day-size);
     height: var(--calendar-day-size);
@@ -138,22 +135,15 @@
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     }
-@media (hover) {
-            .day.selected:hover {
-                background: var(--calendar-selected-hover-background);
-            }
+.day.selected:hover {
+            background: var(--calendar-selected-hover-background);
         }
-.day:not(.selected):hover {
-        color: var(--color-light-text-primary);
-    }
 .day:focus {
         z-index: 1;
     }
 /* RANGE */
 .dayWrapper {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    position: relative;
-    cursor: pointer
+    position: relative
 }
 .dayWrapper:before {
         content: '';
@@ -164,9 +154,6 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.dayWrapper:focus {
-        outline: none;
-    }
 .range .day:not(.selected):not(.disabled):not(.today) {
         color: var(--calendar-range-color);
     }
@@ -174,16 +161,22 @@
         background: var(--calendar-range-background);
     }
 .rangeEnd:before {
-        width: calc(50% + 20px);
-        border-top-right-radius: var(--calendar-day-border-radius);
-        border-bottom-right-radius: var(--calendar-day-border-radius);
+        border-bottom-right-radius: 50%;
+        border-top-right-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.rangeEnd:after {
+        opacity: 0;
     }
 .rangeStart:before {
         left: auto;
         right: 0;
-        width: calc(50% + 20px);
-        border-top-left-radius: var(--calendar-day-border-radius);
-        border-bottom-left-radius: var(--calendar-day-border-radius);
+        border-bottom-left-radius: 50%;
+        border-top-left-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.rangeStart:after {
+        opacity: 0;
     }
 .rangeComplete:before {
         background: var(--calendar-range-complete-background);
@@ -225,18 +218,6 @@
 .transitRight:last-child:after {
             left: 0;
         }
-.sharpTransitLeft:first-child:before {
-            opacity: 1;
-        }
-.sharpTransitLeft:first-child:after {
-            opacity: 0;
-        }
-.sharpTransitRight:last-child:before {
-            opacity: 1;
-        }
-.sharpTransitRight:last-child:after {
-            opacity: 0;
-        }
 .rangeComplete.transitLeft:after {
         background: linear-gradient(
             270deg,
@@ -252,9 +233,6 @@
         );
     }
 /* SLIDE ANIMATION */
-.daysEnter .dayWrapper {
-    width: 100px;
-}
 .left .daysEnter {
         transform: translateX(var(--calendar-day-size));
     }
@@ -265,10 +243,10 @@
         transform: translateX(0%);
     }
 .left .daysExitActive {
-        transform: translateX(-1 * var(--calendar-day-size));
+        transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
 .right .daysEnter {
-        transform: translateX(-1 * var(--calendar-day-size));
+        transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
 .right .daysEnterActive {
         transform: translateX(0%);
@@ -310,5 +288,5 @@
 }
 .daysEnterActive,
 .daysExitActive {
-    transition: opacity 250ms, transform 250ms;
+    transition: opacity 300ms, transform 300ms;
 }

package/calendar/cssm/components/month-year-header/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-f8106a15.js');
+require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');

package/calendar/cssm/components/month-year-header/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-f8106a15.js');
+require('../../tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/cssm/components/months-table/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-f8106a15.js');
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/cssm/components/months-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-f8106a15.js');
+require('../../tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

package/calendar/cssm/components/months-table/index.module.css

@@ -11,6 +11,7 @@
     --gap-xs: 8px;
 }
 :root {
+    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -34,8 +35,8 @@
 .monthsTable {
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
-    justify-content: space-between
+    width: var(--calendar-inner-width);
+    justify-content: flex-start
 }
 @media (max-width: 374px) {
 .monthsTable {
@@ -43,7 +44,8 @@
 }
     }
 .button {
-    width: 33%;
+    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+    margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
 .button:nth-child(3n) {

package/calendar/cssm/components/select-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-f8106a15.js');
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');

package/calendar/cssm/components/select-button/index.js

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

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-f8106a15.js');
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 require('classnames');
 require('../../../../button/cssm');

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

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

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

@@ -11,6 +11,7 @@
     --gap-xs: 8px;
 }
 :root {
+    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -35,7 +36,6 @@
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
-    justify-content: space-between;
 }
 .inner {
     display: flex;
@@ -44,6 +44,7 @@
     position: relative;
 
     /* (width - inner-width) / 2 */
+    left: 32px;
     overflow: hidden
 }
 @media (max-width: 374px) {
@@ -53,7 +54,8 @@
     }
 .button {
     /* 3 колонки с равными отступами */
-    width: 33%;
+    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+    margin-right: var(--gap-2xs);
     margin-bottom: var(--gap-xs)
 }
 .button:nth-child(3n) {

package/calendar/cssm/index.d.ts

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

package/calendar/cssm/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-f8106a15.js');
+require('./tslib.es6-ce870b46.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');
@@ -65,17 +65,13 @@ require('date-fns/setYear');
 require('date-fns/subYears');
 require('react-merge-refs');
 var useCalendar = require('./useCalendar.js');
+require('./index.module.css');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('./components/month-year-header/index.module.css');
 require('./components/month-year-header/Component.js');
-require('./index.module.css');
 var Component = require('./Component.js');
 require('date-fns/differenceInDays');
 var usePeriod = require('./usePeriod.js');
-require('react-virtuoso');
-require('../../modal/cssm/mobile');
-require('./components/calendar-mobile/index.module.css');
-var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 
 
 
@@ -95,4 +91,3 @@ exports.useCalendar = useCalendar.useCalendar;
 exports.Calendar = Component.Calendar;
 exports.usePeriod = usePeriod.usePeriod;
 exports.usePeriodWithReset = usePeriod.usePeriodWithReset;
-exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;