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

package/calendar/cssm/index.module.css

@@ -12,6 +12,7 @@
 :root {
     --calendar-height: 340px;
     --calendar-width: 344px;
+    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -70,7 +71,7 @@
 }
     }
 .period {
-    width: 100%
+    width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
 .period {
@@ -80,7 +81,7 @@
 }
     }
 .monthYear {
-    width: 100%
+    width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
 .monthYear {

package/calendar/cssm/useCalendar.d.ts

@@ -57,11 +57,11 @@ declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, sele
     getDayProps: (day: Day) => {
         'data-date': number;
         'aria-selected': boolean | undefined;
-        ref: (node: HTMLTableDataCellElement) => void;
+        ref: (node: HTMLButtonElement) => void;
         tabIndex: number;
-        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
+        onMouseEnter: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
         onMouseLeave: () => void;
-        onClick: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
+        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
     };
     getMonthProps: (month: Month) => {
         'data-date': number;

package/calendar/cssm/useCalendar.js

@@ -196,8 +196,7 @@ function useCalendar(_a) {
         if (date && onChange) {
             onChange(+date);
         }
-        handleDayMouseLeave();
-    }, [onChange, handleDayMouseLeave]);
+    }, [onChange]);
     var daysControls = React.useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },
         ArrowRight: function () { return focusDay('next'); },

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

@@ -1,4 +1,4 @@
-import { _ as __assign } from './tslib.es6-374db934.js';
+import { _ as __assign } from './tslib.es6-5b151e17.js';
 import React, { forwardRef, useState, useMemo, useCallback } from 'react';
 import cn from 'classnames';
 import startOfDay from 'date-fns/startOfDay';
@@ -65,9 +65,9 @@ require('./index.css');
 
 var Calendar = 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 = useState(defaultView), view = _g[0], setView = _g[1];
-    var _h = 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 = useState(defaultView), view = _f[0], setView = _f[1];
+    var _g = useState(false), scrolled = _g[0], setScrolled = _g[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = useMemo(function () {
         return startOfMonth(selected ||
@@ -82,7 +82,7 @@ var Calendar = forwardRef(function (_a, ref) {
     var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [
         maxDateTimestamp,
     ]);
-    var _j = useCalendar({
+    var _h = useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -93,7 +93,7 @@ var Calendar = 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 = useCallback(function (newView) {
         setView(view === newView ? 'days' : newView);
     }, [view]);
@@ -134,7 +134,7 @@ var Calendar = forwardRef(function (_a, ref) {
     return (React.createElement("div", __assign({}, getRootProps({ ref: ref }), { className: cn(styles.component, className, (_b = {},
             _b[styles.sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(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.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
             view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),

package/calendar/esm/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/esm/components/days-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-374db934.js';
+import { _ as __assign } from '../../tslib.es6-5b151e17.js';
 import React, { useRef, useCallback } from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';
@@ -29,13 +29,13 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import 'date-fns/format';
 import 'date-fns/parse';
-import { getSelectionRange, WEEKDAYS, russianWeekDay } from '../../utils.js';
+import { getSelectionRange, WEEKDAYS } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_1j1lb","dayName":"calendar__dayName_1j1lb","day":"calendar__day_1j1lb","highlighted":"calendar__highlighted_1j1lb","range":"calendar__range_1j1lb","disabled":"calendar__disabled_1j1lb","today":"calendar__today_1j1lb","rangeComplete":"calendar__rangeComplete_1j1lb","selected":"calendar__selected_1j1lb","dayWrapper":"calendar__dayWrapper_1j1lb","rangeEnd":"calendar__rangeEnd_1j1lb","rangeStart":"calendar__rangeStart_1j1lb","transitLeft":"calendar__transitLeft_1j1lb","transitRight":"calendar__transitRight_1j1lb","sharpTransitLeft":"calendar__sharpTransitLeft_1j1lb","sharpTransitRight":"calendar__sharpTransitRight_1j1lb","daysEnter":"calendar__daysEnter_1j1lb","left":"calendar__left_1j1lb","daysEnterActive":"calendar__daysEnterActive_1j1lb","daysExit":"calendar__daysExit_1j1lb","daysExitActive":"calendar__daysExitActive_1j1lb","right":"calendar__right_1j1lb","dot":"calendar__dot_1j1lb"};
+var styles = {"daysTable":"calendar__daysTable_1j1lb","dayName":"calendar__dayName_1j1lb","day":"calendar__day_1j1lb","highlighted":"calendar__highlighted_1j1lb","range":"calendar__range_1j1lb","disabled":"calendar__disabled_1j1lb","today":"calendar__today_1j1lb","rangeComplete":"calendar__rangeComplete_1j1lb","selected":"calendar__selected_1j1lb","dayWrapper":"calendar__dayWrapper_1j1lb","rangeEnd":"calendar__rangeEnd_1j1lb","rangeStart":"calendar__rangeStart_1j1lb","transitLeft":"calendar__transitLeft_1j1lb","transitRight":"calendar__transitRight_1j1lb","left":"calendar__left_1j1lb","daysEnter":"calendar__daysEnter_1j1lb","daysEnterActive":"calendar__daysEnterActive_1j1lb","daysExit":"calendar__daysExit_1j1lb","daysExitActive":"calendar__daysExitActive_1j1lb","right":"calendar__right_1j1lb","dot":"calendar__dot_1j1lb"};
 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, _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 = useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = usePrevious(activeMonth);
@@ -53,65 +53,44 @@ var DaysTable = function (_a) {
             (selectedTo && isSameDay(day.date, selectedTo));
         var dayHighlighted = highlighted && isEqual(day.date, highlighted);
         var inRange = selection && isWithinInterval(day.date, selection);
-        var firstDayOfMonth = day.date.getDate() === 1;
-        var lastDayOfMonth = isLastDayOfMonth(day.date);
-        var firstDayOfWeek = russianWeekDay(day.date) === 0;
-        var lastDayOfWeek = 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(day.date);
+        var transitLeft = firstDay && inRange && selection && day.date > selection.start;
+        var transitRight = lastDay && inRange && selection && day.date < selection.end;
         var rangeStart = selection && isSameDay(day.date, selection.start);
         var rangeEnd = selection && isSameDay(day.date, selection.end);
-        var sharpTransitLeft = firstDayOfWeek &&
-            firstDayOfMonth &&
-            inRange &&
-            selection &&
-            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
-        var sharpTransitRight = lastDayOfWeek &&
-            lastDayOfMonth &&
-            inRange &&
-            selection &&
-            (isSameDay(day.date, selection.start) || isSameDay(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.createElement("td", __assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
+        return (React.createElement("td", { key: day.date.getTime(), className: cn(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)), align: 'center', ref: function (node) {
-                /**
-                 * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
-                 * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
-                 */
-                if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
-                    dayProps.ref(node);
-                }
-            }, onClick: handleDayClick }),
-            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, (_b = {},
+                _a)) },
+            React.createElement(Button, __assign({}, dayProps, { ref: function (node) {
+                    /**
+                     * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
+                     * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
+                     */
+                    if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
+                        dayProps.ref(node);
+                    }
+                }, type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, (_b = {},
                     _b[styles.selected] = daySelected,
                     _b[styles.today] = isToday(day.date),
                     _b[styles.disabled] = day.disabled,
                     _b[styles.highlighted] = dayHighlighted,
-                    _b)) },
+                    _b)) }),
                 day.event && React.createElement("span", { className: styles.dot }),
                 day.date.getDate())));
     };
     var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     return (React.createElement("table", { className: cn(styles.daysTable, direction && styles[direction]) },
-        hasHeader && (React.createElement("thead", null,
-            React.createElement("tr", null, renderHeader()))),
+        React.createElement("thead", null,
+            React.createElement("tr", null, renderHeader())),
         React.createElement(TransitionGroup, { component: null },
-            React.createElement(CSSTransition, { key: activeMonth.getTime(), timeout: 250, classNames: {
+            React.createElement(CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
                     enter: styles.daysEnter,
                     enterActive: styles.daysEnterActive,
                     exit: styles.daysExit,

package/calendar/esm/components/days-table/index.css

@@ -68,8 +68,7 @@
 .calendar__daysTable_1j1lb {
     border-collapse: separate;
     border-spacing: 0;
-    position: relative;
-    width: 100%
+    position: relative
 }
 .calendar__daysTable_1j1lb th {
         padding: 0;
@@ -95,8 +94,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);
@@ -139,22 +136,15 @@
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     }
-@media (hover) {
-            .calendar__day_1j1lb.calendar__selected_1j1lb:hover {
-                background: var(--calendar-selected-hover-background);
-            }
+.calendar__day_1j1lb.calendar__selected_1j1lb:hover {
+            background: var(--calendar-selected-hover-background);
         }
-.calendar__day_1j1lb:not(.calendar__selected_1j1lb):hover {
-        color: var(--color-light-text-primary);
-    }
 .calendar__day_1j1lb:focus {
         z-index: 1;
     }
 /* RANGE */
 .calendar__dayWrapper_1j1lb {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    position: relative;
-    cursor: pointer
+    position: relative
 }
 .calendar__dayWrapper_1j1lb:before {
         content: '';
@@ -165,9 +155,6 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.calendar__dayWrapper_1j1lb:focus {
-        outline: none;
-    }
 .calendar__range_1j1lb .calendar__day_1j1lb:not(.calendar__selected_1j1lb):not(.calendar__disabled_1j1lb):not(.calendar__today_1j1lb) {
         color: var(--calendar-range-color);
     }
@@ -175,16 +162,22 @@
         background: var(--calendar-range-background);
     }
 .calendar__rangeEnd_1j1lb: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);
+    }
+.calendar__rangeEnd_1j1lb:after {
+        opacity: 0;
     }
 .calendar__rangeStart_1j1lb: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);
+    }
+.calendar__rangeStart_1j1lb:after {
+        opacity: 0;
     }
 .calendar__rangeComplete_1j1lb:before {
         background: var(--calendar-range-complete-background);
@@ -226,18 +219,6 @@
 .calendar__transitRight_1j1lb:last-child:after {
             left: 0;
         }
-.calendar__sharpTransitLeft_1j1lb:first-child:before {
-            opacity: 1;
-        }
-.calendar__sharpTransitLeft_1j1lb:first-child:after {
-            opacity: 0;
-        }
-.calendar__sharpTransitRight_1j1lb:last-child:before {
-            opacity: 1;
-        }
-.calendar__sharpTransitRight_1j1lb:last-child:after {
-            opacity: 0;
-        }
 .calendar__rangeComplete_1j1lb.calendar__transitLeft_1j1lb:after {
         background: linear-gradient(
             270deg,
@@ -253,9 +234,6 @@
         );
     }
 /* SLIDE ANIMATION */
-.calendar__daysEnter_1j1lb .calendar__dayWrapper_1j1lb {
-    width: 100px;
-}
 .calendar__left_1j1lb .calendar__daysEnter_1j1lb {
         transform: translateX(var(--calendar-day-size));
     }
@@ -266,10 +244,10 @@
         transform: translateX(0%);
     }
 .calendar__left_1j1lb .calendar__daysExitActive_1j1lb {
-        transform: translateX(-1 * var(--calendar-day-size));
+        transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
 .calendar__right_1j1lb .calendar__daysEnter_1j1lb {
-        transform: translateX(-1 * var(--calendar-day-size));
+        transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
 .calendar__right_1j1lb .calendar__daysEnterActive_1j1lb {
         transform: translateX(0%);
@@ -311,5 +289,5 @@
 }
 .calendar__daysEnterActive_1j1lb,
 .calendar__daysExitActive_1j1lb {
-    transition: opacity 250ms, transform 250ms;
+    transition: opacity 300ms, transform 300ms;
 }

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-374db934.js';
+import '../../tslib.es6-5b151e17.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-374db934.js';
+import '../../tslib.es6-5b151e17.js';
 import React from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-374db934.js';
+import '../../tslib.es6-5b151e17.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

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

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-374db934.js';
+import { _ as __assign } from '../../tslib.es6-5b151e17.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

package/calendar/esm/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/esm/components/months-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-374db934.js';
+import '../../tslib.es6-5b151e17.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

package/calendar/esm/components/select-button/Component.d.ts

@@ -19,6 +19,6 @@ declare const SelectButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttr
     /**
      * Вид кнопки
      */
-    view?: "selected" | "outlined" | "filled" | "default" | undefined;
+    view?: "outlined" | "filled" | "default" | "selected" | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { SelectButtonProps, SelectButton };

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

@@ -1,4 +1,4 @@
-import { a as __rest, _ as __assign } from '../../tslib.es6-374db934.js';
+import { a as __rest, _ as __assign } from '../../tslib.es6-5b151e17.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-374db934.js';
+import '../../tslib.es6-5b151e17.js';
 import 'react';
 import 'classnames';
 import '../../../../button/esm';

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

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-374db934.js';
+import { _ as __assign } from '../../tslib.es6-5b151e17.js';
 import React, { useRef, useCallback, useLayoutEffect } from 'react';
 import 'classnames';
 import '../../../../button/esm';

package/calendar/esm/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/esm/components/years-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-374db934.js';
+import '../../tslib.es6-5b151e17.js';
 import 'react';
 import 'classnames';
 import '../../../../button/esm';

package/calendar/esm/index.css

@@ -13,6 +13,7 @@
 :root {
     --calendar-height: 340px;
     --calendar-width: 344px;
+    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -71,7 +72,7 @@
 }
     }
 .calendar__period_gn7nu {
-    width: 100%
+    width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
 .calendar__period_gn7nu {
@@ -81,7 +82,7 @@
 }
     }
 .calendar__monthYear_gn7nu {
-    width: 100%
+    width: var(--calendar-inner-width)
 }
 @media (max-width: 374px) {
 .calendar__monthYear_gn7nu {

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

@@ -1,4 +1,4 @@
-import './tslib.es6-374db934.js';
+import './tslib.es6-5b151e17.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';
@@ -62,6 +62,3 @@ import './components/month-year-header/Component.js';
 export { Calendar } from './Component.js';
 import 'date-fns/differenceInDays';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
-import 'react-virtuoso';
-import '../../modal/esm/mobile';
-export { CalendarMobile } from './components/calendar-mobile/Component.js';

package/calendar/esm/useCalendar.d.ts

@@ -57,11 +57,11 @@ declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, sele
     getDayProps: (day: Day) => {
         'data-date': number;
         'aria-selected': boolean | undefined;
-        ref: (node: HTMLTableDataCellElement) => void;
+        ref: (node: HTMLButtonElement) => void;
         tabIndex: number;
-        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
+        onMouseEnter: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
         onMouseLeave: () => void;
-        onClick: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
+        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
     };
     getMonthProps: (month: Month) => {
         'data-date': number;

package/calendar/esm/useCalendar.js

@@ -182,8 +182,7 @@ function useCalendar(_a) {
         if (date && onChange) {
             onChange(+date);
         }
-        handleDayMouseLeave();
-    }, [onChange, handleDayMouseLeave]);
+    }, [onChange]);
     var daysControls = useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },
         ArrowRight: function () { return focusDay('next'); },