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

package/calendar/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/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/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');
@@ -59,14 +59,11 @@ require('date-fns/setYear');
 require('date-fns/subYears');
 require('react-merge-refs');
 var useCalendar = require('./useCalendar.js');
+var Component = require('./Component.js');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('./components/month-year-header/Component.js');
-var Component = require('./Component.js');
 require('date-fns/differenceInDays');
 var usePeriod = require('./usePeriod.js');
-require('react-virtuoso');
-require('../modal/mobile');
-var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 
 
 
@@ -86,4 +83,3 @@ exports.useCalendar = useCalendar.useCalendar;
 exports.Calendar = Component.Calendar;
 exports.usePeriod = usePeriod.usePeriod;
 exports.usePeriodWithReset = usePeriod.usePeriodWithReset;
-exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;

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

@@ -62,7 +62,7 @@ import { MonthYearHeader } from './components/month-year-header/Component.js';
 var styles = {"component":"calendar__component_gn7nu","container":"calendar__container_gn7nu","sixWeeks":"calendar__sixWeeks_gn7nu","period":"calendar__period_gn7nu","monthYear":"calendar__monthYear_gn7nu"};
 require('./index.css');
 
-const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, onChange, onMonthChange, onMonthClick, onYearClick, dataTestId, hasHeader = true, }, ref) => {
+const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = 'full', isMonthAndYearSelectable, showCurrentYearSelector, value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, onChange, onMonthChange, onMonthClick, onYearClick, dataTestId, }, ref) => {
     const [view, setView] = useState(defaultView);
     const [scrolled, setScrolled] = useState(false);
     const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
@@ -129,7 +129,7 @@ const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = '
     return (React.createElement("div", Object.assign({}, getRootProps({ ref }), { className: cn(styles.component, className, {
             [styles.sixWeeks]: weeks.length === 6,
         }), "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/modern/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/modern/components/days-table/Component.js

@@ -28,13 +28,13 @@ import 'date-fns/subMonths';
 import 'date-fns/format';
 import 'date-fns/parse';
 import { Button } from '../../../../button/modern';
-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');
 
 /* eslint-disable complexity */
-const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, }) => {
+const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, }) => {
     const activeMonthRef = useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     const prevActiveMonth = usePrevious(activeMonth);
@@ -49,65 +49,44 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
             (selectedTo && isSameDay(day.date, selectedTo));
         const dayHighlighted = highlighted && isEqual(day.date, highlighted);
         const inRange = selection && isWithinInterval(day.date, selection);
-        const firstDayOfMonth = day.date.getDate() === 1;
-        const lastDayOfMonth = isLastDayOfMonth(day.date);
-        const firstDayOfWeek = russianWeekDay(day.date) === 0;
-        const lastDayOfWeek = russianWeekDay(day.date) === 6;
-        const transitLeft = firstDayOfMonth && inRange && selection && day.date > selection.start;
-        const transitRight = lastDayOfMonth && inRange && selection && day.date < selection.end;
+        const firstDay = day.date.getDate() === 1;
+        const lastDay = isLastDayOfMonth(day.date);
+        const transitLeft = firstDay && inRange && selection && day.date > selection.start;
+        const transitRight = lastDay && inRange && selection && day.date < selection.end;
         const rangeStart = selection && isSameDay(day.date, selection.start);
         const rangeEnd = selection && isSameDay(day.date, selection.end);
-        const sharpTransitLeft = firstDayOfWeek &&
-            firstDayOfMonth &&
-            inRange &&
-            selection &&
-            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
-        const sharpTransitRight = lastDayOfWeek &&
-            lastDayOfMonth &&
-            inRange &&
-            selection &&
-            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
         const dayProps = getDayProps(day);
-        const { onClick } = dayProps;
-        const handleDayClick = (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", Object.assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, {
+        return (React.createElement("td", { key: day.date.getTime(), className: cn(styles.dayWrapper, {
                 [styles.range]: inRange,
                 [styles.rangeComplete]: inRange && rangeComplete,
                 [styles.transitLeft]: transitLeft,
                 [styles.transitRight]: transitRight,
-                [styles.sharpTransitLeft]: sharpTransitLeft,
-                [styles.sharpTransitRight]: sharpTransitRight,
                 [styles.rangeStart]: rangeStart,
                 [styles.rangeEnd]: rangeEnd,
-            }), align: 'center', ref: 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, {
+            }) },
+            React.createElement(Button, Object.assign({}, dayProps, { ref: 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, {
                     [styles.selected]: daySelected,
                     [styles.today]: isToday(day.date),
                     [styles.disabled]: day.disabled,
                     [styles.highlighted]: dayHighlighted,
-                }) },
+                }) }),
                 day.event && React.createElement("span", { className: styles.dot }),
                 day.date.getDate())));
     };
     const renderWeek = (week, weekIdx) => (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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/index.js

@@ -47,7 +47,6 @@ import 'date-fns/subYears';
 import 'react-merge-refs';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import 'date-fns/differenceInDays';
-import 'react-virtuoso';
 import './components/header/Component.js';
 import '../../button/modern';
 export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, dateInLimits, limitDate, monthName, russianWeekDay } from './utils.js';
@@ -62,5 +61,3 @@ export { useCalendar } from './useCalendar.js';
 import './components/month-year-header/Component.js';
 export { Calendar } from './Component.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
-import '../../modal/modern/mobile';
-export { CalendarMobile } from './components/calendar-mobile/Component.js';

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

@@ -179,8 +179,7 @@ function useCalendar({ defaultMonth, month, minDate, view = 'days', maxDate, sel
         if (date && onChange) {
             onChange(+date);
         }
-        handleDayMouseLeave();
-    }, [onChange, handleDayMouseLeave]);
+    }, [onChange]);
     const daysControls = useMemo(() => ({
         ArrowLeft: () => focusDay('prev'),
         ArrowRight: () => focusDay('next'),

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