@via-profit/ui-kit 0.2.6 → 0.4.0

package/Calendar/CalendarComponent.js

@@ -54,13 +54,35 @@ const CalendarIconPrev_1 = __importDefault(require("./CalendarIconPrev"));
 const CalendarIconNext_1 = __importDefault(require("./CalendarIconNext"));
 const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
 const use_calendar_1 = require("./use-calendar");
-const Swiper_1 = __importStar(require("../Swiper"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
 __exportStar(require("./use-calendar"), exports);
 __exportStar(require("./CalendarWeekDaysBar"), exports);
-const StyledSwiper = (0, styled_1.default)(Swiper_1.default) `
-  height: 100%;
+const viewAppear = (0, react_2.keyframes) `
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 `;
+/**
+ * Only the active view is rendered: the hidden views are not focusable and not announced
+ */
+const ViewContainer = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  animation: ${viewAppear} 0.2s ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const dateKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 const isRangeValue = (value) => {
     if (value instanceof Array) {
         return value.every(v => v instanceof Date || v === null);
@@ -80,21 +102,12 @@ const computeViews = (inputViews, range) => {
 const computeView = (inputParams) => {
     var _a;
     const { inputView, inputViews, inputInitialView } = inputParams;
-    if (typeof inputView === 'undefined' && inputViews) {
-        return inputViews[0];
-    }
-    if (typeof inputView === 'undefined' && inputViews) {
-        return inputViews[0];
-    }
-    if (inputViews && typeof inputView === 'string') {
-        if (!inputViews.includes(inputView)) {
-            throw new Error('Property views must be contained property initialView');
-        }
-    }
-    if (typeof inputView === 'string') {
-        return inputView;
+    const requested = inputView !== null && inputView !== void 0 ? inputView : inputInitialView;
+    if (requested && inputViews && !inputViews.includes(requested)) {
+        throw new Error(`The view «${requested}» must be one of the \`views\`: ${inputViews.join(', ')}`);
     }
-    return (_a = inputInitialView !== null && inputInitialView !== void 0 ? inputInitialView : inputView) !== null && _a !== void 0 ? _a : 'days';
+    // The requested view wins over the first of the views
+    return (_a = requested !== null && requested !== void 0 ? requested : inputViews === null || inputViews === void 0 ? void 0 : inputViews[0]) !== null && _a !== void 0 ? _a : 'days';
 };
 const computeCalendarDate = (params) => {
     const { inputValue, defaultValue } = params;
@@ -135,7 +148,7 @@ const computeCalendarDate = (params) => {
 };
 const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     var _a;
-    const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
+    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = props;
     /**
      * Validations
      */
@@ -160,12 +173,21 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             throw new Error('The `weeks` view allowed only in range mode');
         }
     }
-    if (!inputValue && typeof onChange === 'undefined') {
+    if (typeof inputValue !== 'undefined' && typeof onChange !== 'function') {
         throw new Error('You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.');
     }
     if (inputView && inputInitialView) {
         throw new Error('You can not use view and initialView at the same time.');
     }
+    // Default limits are created once, otherwise every render gets new Date instances
+    // and invalidates all memoized values depending on them
+    const minDate = react_1.default.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = react_1.default.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const emitChange = react_1.default.useCallback((newValue) => {
+        if (typeof onChange === 'function') {
+            onChange(newValue);
+        }
+    }, [onChange]);
     /**
      * Overrides
      */
@@ -193,7 +215,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         WeekRowButton: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRowButton) || CalendarWeekRowButton_1.default,
         WeekDayWeekNumber: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDayWeekNumber) || CalendarWeekDayWeekNumber_1.default,
     }), [overrides]);
-    const swiperRef = react_1.default.useRef(null);
+    const dateContainerRef = react_1.default.useRef(null);
     /**
      * Inside date value
      */
@@ -205,7 +227,16 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
      * Selected value
      */
     const inputValueRef = react_1.default.useRef(inputValue);
-    const [value, setValue] = react_1.default.useState((_a = inputValue !== null && inputValue !== void 0 ? inputValue : defaultValue) !== null && _a !== void 0 ? _a : null);
+    const [internalValue, setValue] = react_1.default.useState((_a = inputValue !== null && inputValue !== void 0 ? inputValue : defaultValue) !== null && _a !== void 0 ? _a : null);
+    // Controlled: the value is always the `value` property, even if the parent did not accept the change
+    const value = typeof inputValue !== 'undefined'
+        ? inputValue
+        : internalValue;
+    /**
+     * The day with the keyboard focus in the days view (roving tabindex)
+     */
+    const [focusedDate, setFocusedDate] = react_1.default.useState(null);
+    const shouldMoveFocus = react_1.default.useRef(false);
     /**
      * Current view mode
      */
@@ -220,16 +251,22 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     const [views, setComputedViews] = react_1.default.useState(() => computeViews(inputViews, range));
     const setViews = react_1.default.useCallback((variants) => setComputedViews(variants), []);
     const selectView = react_1.default.useCallback((view) => {
-        var _a;
-        if (!views.includes(view)) {
-            setViews([...views, view]);
+        const nextViews = views.includes(view) ? views : [...views, view];
+        if (nextViews !== views) {
+            setViews(nextViews);
         }
         setView(view);
-        const index = views.findIndex(v => v === view);
-        if (index > -1) {
-            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToIndex(index);
-        }
     }, [setViews, views]);
+    /**
+     * Controlled `view` property was changed
+     */
+    const inputViewRef = react_1.default.useRef(inputView);
+    react_1.default.useEffect(() => {
+        if (inputView && inputView !== inputViewRef.current) {
+            inputViewRef.current = inputView;
+            selectView(inputView);
+        }
+    }, [inputView, selectView]);
     const resetVariablesRef = react_1.default.useRef({
         calendarDate,
         value,
@@ -292,10 +329,10 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         if (view === 'months') {
             if (type === 'prev') {
-                newCalendarDate.setFullYear(newCalendarDate.getFullYear() + 1);
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() - 1);
             }
             else {
-                newCalendarDate.setFullYear(newCalendarDate.getFullYear() - 1);
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() + 1);
             }
         }
         if (view === 'days' || view === 'weeks') {
@@ -310,51 +347,36 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     }, [calendarDate, view]);
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
         var _a;
+        setFocusedDate(selectedDate);
         const nextView = getNextAvailableView();
         if (nextView) {
             setView(nextView);
         }
         // Single-date mode
         if (!range) {
-            onChange(selectedDate);
+            emitChange(selectedDate);
             setValue(selectedDate);
             return;
         }
         // Range-date mode
         const [from, to] = (_a = value) !== null && _a !== void 0 ? _a : [];
-        // начало нового периода
-        if (from && to) {
-            setValue([selectedDate, null]);
-            onChange([selectedDate, null]);
-            return;
-        }
-        // если выбрана только первая дата или обе даты равны - завершение периода
-        if ((from && to === null) || (from && to && from.getTime() === to.getTime())) {
+        // выбрана только первая дата - завершение периода
+        if (from && !to) {
             /// check to swap
-            if (selectedDate.getTime() < from.getTime()) {
-                onChange([selectedDate, from]);
-                setValue([selectedDate, from]);
-            }
-            else {
-                onChange([from, selectedDate]);
-                setValue([from, selectedDate]);
-            }
-        }
-        else {
-            // обе даты выбраны или ничего не выбрано ([Date, Date] | [null, null] | null) - начало нового периода
-            if ((from && to) || (from === null && to === null) || value === null) {
-                setValue([selectedDate, null]);
-                return;
-            }
+            const newValue = selectedDate.getTime() < from.getTime() ? [selectedDate, from] : [from, selectedDate];
+            emitChange(newValue);
+            setValue(newValue);
+            return;
         }
-    }, [onChange, getNextAvailableView, range, value]);
+        // обе даты выбраны или ничего не выбрано ([Date, Date] | [null, null] | null) - начало нового периода
+        setValue([selectedDate, null]);
+        emitChange([selectedDate, null]);
+    }, [emitChange, getNextAvailableView, range, value]);
     /**
      * Handle of click on year item
      */
     const handleYearSelected = react_1.default.useCallback((selectedYear) => () => {
-        const newDate = new Date(calendarDate);
-        newDate.setFullYear(selectedYear, 0, 1);
-        newDate.setHours(0, 0, 0);
+        const newDate = new Date(selectedYear, 0, 1, 0, 0, 0, 0);
         setCalendarDate(newDate);
         const nextView = getNextAvailableView();
         if (nextView) {
@@ -362,23 +384,19 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         // if the next `view` does not exist
         if (!nextView && typeof onChange === 'function') {
-            const a = new Date();
-            a.setFullYear(newDate.getFullYear(), 11, 31);
-            a.setHours(23, 59, 59);
+            const a = new Date(newDate.getFullYear(), 11, 31, 23, 59, 59, 999);
             const selectedValue = range ? [newDate, a] : newDate;
             onChange(selectedValue);
             if (!inputValue) {
                 setValue(selectedValue);
             }
         }
-    }, [calendarDate, getNextAvailableView, onChange, selectView, range, inputValue]);
+    }, [getNextAvailableView, onChange, selectView, range, inputValue]);
     /**
      * Handle of click on month item
      */
     const handleMonthSelected = react_1.default.useCallback((monthIndex) => () => {
-        const newDate = new Date();
-        newDate.setFullYear(calendarDate.getFullYear(), monthIndex, 1);
-        newDate.setHours(0, 0, 0);
+        const newDate = new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0);
         setCalendarDate(newDate);
         const nextView = getNextAvailableView();
         if (nextView) {
@@ -386,9 +404,8 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         // if the next `view` does not exist
         if (!nextView && typeof onChange === 'function') {
-            const a = new Date();
-            a.setFullYear(newDate.getFullYear(), newDate.getMonth() + 1, 0);
-            a.setHours(0, 0, 0);
+            // The end of the last day of the month, the same way as for the year range
+            const a = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0, 23, 59, 59, 999);
             const selectedValue = range ? [newDate, a] : newDate;
             onChange(selectedValue);
             if (!inputValue) {
@@ -411,12 +428,16 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
      * Handle click on «Today» button
      */
     const handleToday = react_1.default.useCallback(() => {
-        const today = new Date();
-        today.setHours(0, 0, 0);
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+        const newValue = (range ? [today, today] : today);
         setCalendarDate(today);
-        setValue((range ? [today, today] : today));
-        handleCellDateClick(today)();
-    }, [handleCellDateClick, range]);
+        setValue(newValue);
+        emitChange(newValue);
+        if (view !== 'days' && views.includes('days')) {
+            selectView('days');
+        }
+    }, [emitChange, range, selectView, view, views]);
     const handleClickWeek = react_1.default.useCallback((week) => () => {
         const days = week.days;
         const dates = [days[0].date, days[days.length - 1].date];
@@ -445,8 +466,98 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     }, [views, range, selectView, onChange]);
     const weeks = react_1.default.useMemo(() => getWeeks(calendarDate), [calendarDate, getWeeks]);
     const yearsRange = react_1.default.useMemo(() => getYearsRange(minDate, maxDate), [minDate, maxDate, getYearsRange]);
-    const monthsRange = react_1.default.useMemo(() => getMonthsRange(minDate, maxDate), [minDate, maxDate, getMonthsRange]);
-    const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
+    const monthsRange = react_1.default.useMemo(() => getMonthsRange(minDate, maxDate, calendarDate.getFullYear()), [minDate, maxDate, getMonthsRange, calendarDate]);
+    const minDay = react_1.default.useMemo(() => new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()), [minDate]);
+    const maxDay = react_1.default.useMemo(() => new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()), [maxDate]);
+    const dayLabelFormatter = react_1.default.useMemo(() => typeof Intl !== 'undefined'
+        ? new Intl.DateTimeFormat(locale, {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        })
+        : null, [locale]);
+    /**
+     * The only day in the tab order: the focused, the selected, today or the first available one
+     */
+    const tabbableDateKey = react_1.default.useMemo(() => {
+        const month = calendarDate.getMonth();
+        const days = weeks
+            .flatMap(week => week.days)
+            .filter(day => day.date.getMonth() === month && !day.isDisabled);
+        const selected = isRangeValue(value) ? value === null || value === void 0 ? void 0 : value[0] : isNotRangeValue(value) ? value : null;
+        const candidates = [focusedDate, selected, new Date()];
+        const found = candidates
+            .map(candidate => candidate && days.find(day => isSameDay(day.date, candidate)))
+            .find(Boolean);
+        return found ? dateKey(found.date) : days[0] ? dateKey(days[0].date) : null;
+    }, [calendarDate, weeks, value, focusedDate, isSameDay]);
+    /**
+     * Arrows move by a day and a week, Home/End — to the start/end of the week,
+     * PageUp/PageDown — by a month. Crossing the month border switches the month
+     */
+    const handleDaysKeyDown = react_1.default.useCallback((event) => {
+        var _a;
+        const key = (_a = event.target.closest('[data-date]')) === null || _a === void 0 ? void 0 : _a.dataset.date;
+        if (!key)
+            return;
+        const [y, m, d] = key.split('-').map(Number);
+        const current = new Date(y, m, d);
+        const weekDay = (current.getDay() -
+            ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].indexOf(weekStartDay) +
+            7) %
+            7;
+        let target;
+        switch (event.key) {
+            case 'ArrowLeft':
+                target = new Date(y, m, d - 1);
+                break;
+            case 'ArrowRight':
+                target = new Date(y, m, d + 1);
+                break;
+            case 'ArrowUp':
+                target = new Date(y, m, d - 7);
+                break;
+            case 'ArrowDown':
+                target = new Date(y, m, d + 7);
+                break;
+            case 'Home':
+                target = new Date(y, m, d - weekDay);
+                break;
+            case 'End':
+                target = new Date(y, m, d + 6 - weekDay);
+                break;
+            case 'PageUp':
+                target = new Date(y, m - 1, Math.min(d, new Date(y, m, 0).getDate()));
+                break;
+            case 'PageDown':
+                target = new Date(y, m + 1, Math.min(d, new Date(y, m + 2, 0).getDate()));
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        // Stay inside minDate/maxDate
+        if (target.getTime() < minDay.getTime())
+            target = minDay;
+        if (target.getTime() > maxDay.getTime())
+            target = maxDay;
+        setFocusedDate(target);
+        shouldMoveFocus.current = true;
+        if (target.getMonth() !== calendarDate.getMonth() ||
+            target.getFullYear() !== calendarDate.getFullYear()) {
+            setCalendarDate(new Date(target.getFullYear(), target.getMonth(), 1));
+        }
+    }, [weekStartDay, minDay, maxDay, calendarDate]);
+    // Move the DOM focus after the keyboard navigation has rendered the new day
+    react_1.default.useEffect(() => {
+        var _a, _b;
+        if (shouldMoveFocus.current && focusedDate) {
+            shouldMoveFocus.current = false;
+            (_b = (_a = dateContainerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${dateKey(focusedDate)}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [focusedDate, calendarDate]);
+    const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, { ref: dateContainerRef, onKeyDown: handleDaysKeyDown }, weeks.map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
         if (day.date.getMonth() === calendarDate.getMonth()) {
             const badge = badges.find(b => isSameDay(b.date, day.date));
             let fill = false;
@@ -462,26 +573,30 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             else if (isNotRangeValue(value)) {
                 isSelected = Boolean(value && isSameDay(value, day.date));
             }
-            return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
+            const key = dateKey(day.date);
+            return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), "data-date": key, tabIndex: key === tabbableDateKey ? 0 : -1, "aria-label": dayLabelFormatter === null || dayLabelFormatter === void 0 ? void 0 : dayLabelFormatter.format(day.date), "aria-pressed": isSelected || fill, "aria-current": day.isToday ? 'date' : undefined, isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
                 getDayLabel(day.date),
                 badge && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
         }
-        return (react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() }, getDayLabel(day.date)));
+        return (react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime(), "aria-hidden": true }, getDayLabel(day.date)));
     })))))), [
         accentColor,
         badges,
         calendarDate,
+        dayLabelFormatter,
         getDayLabel,
-        getWeeks,
         handleCellDateClick,
+        handleDaysKeyDown,
         isSameDay,
         markToday,
         overridesMap,
+        tabbableDateKey,
         value,
+        weeks,
     ]);
     const renderViewMonths = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
         const isSelected = calendarDate.getMonth() === monthIndex;
-        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex + monthsRange[monthIndex], accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
+        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, "aria-pressed": isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
     }))), [accentColor, calendarDate, getMonthLabel, handleMonthSelected, monthsRange, overridesMap]);
     const renderViewYears = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.YearsSelector, { accentColor: accentColor, date: calendarDate, onChange: y => handleYearSelected(y)(), years: yearsRange, locale: locale, minDate: minDate, maxDate: maxDate })), [
         accentColor,
@@ -525,7 +640,6 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         overridesMap,
         value,
     ]);
-    const initialIndex = react_1.default.useMemo(() => views.findIndex(v => v === view), [views, view]);
     const getActiveView = react_1.default.useCallback(() => view, [view]);
     const getCalendarDate = react_1.default.useCallback(() => calendarDate, [calendarDate]);
     /**
@@ -545,7 +659,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
             typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
             react_1.default.createElement(overridesMap.Toolbar, null,
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: ['months', 'years'].includes(view) },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: view === 'years', "aria-label": prevButtonLabel, title: prevButtonLabel },
                     react_1.default.createElement(overridesMap.IconPrev, null)),
                 react_1.default.createElement(overridesMap.ControlButton, { disabled: !views.includes('months'), onClick: () => {
                         if (view === 'months' && views.includes('days')) {
@@ -563,31 +677,15 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
                             selectView('years');
                         }
                     } }, getYearLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: ['months', 'years'].includes(view) },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: view === 'years', "aria-label": nextButtonLabel, title: nextButtonLabel },
                     react_1.default.createElement(overridesMap.IconNext, null)))),
         view === 'days' && (react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: weeks[0], format: weekDayLabelFormat || 'short' })),
         react_1.default.createElement(overridesMap.Body, null,
-            react_1.default.createElement(StyledSwiper, { draggable: false, ref: swiperRef, initialIndex: initialIndex }, views.map(viewName => {
-                let renderedView;
-                switch (viewName) {
-                    case 'days':
-                        renderedView = renderViewDays();
-                        break;
-                    case 'weeks':
-                        renderedView = renderViewWeeks();
-                        break;
-                    case 'months':
-                        renderedView = renderViewMonths();
-                        break;
-                    case 'years':
-                        renderedView = renderViewYears();
-                        break;
-                    default:
-                        renderedView = null;
-                        break;
-                }
-                return react_1.default.createElement(Swiper_1.SwiperSlide, { key: viewName }, renderedView);
-            }))),
+            react_1.default.createElement(ViewContainer, { key: view },
+                view === 'days' && renderViewDays(),
+                view === 'weeks' && renderViewWeeks(),
+                view === 'months' && renderViewMonths(),
+                view === 'years' && renderViewYears())),
         (typeof resetButtonLabel !== 'undefined' ||
             typeof todayButtonLabel !== 'undefined' ||
             typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,

package/Calendar/CalendarDayBadge.d.ts

@@ -4,5 +4,5 @@ export interface CalendarDayBadgeProps extends React.HTMLAttributes<HTMLSpanElem
     readonly isToday: boolean;
     readonly badgeContent: React.ReactNode;
 }
-declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Calendar/CalendarMonthCell.js

@@ -24,20 +24,10 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.8em;
   margin: 0;
   min-width: 0;
-  outline: none;
   flex-basis: 50%;
 `;
 const CalendarMonthCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
-    const myRef = react_1.default.useRef(null);
-    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
-            if (typeof ref === 'function') {
-                ref(el);
-            }
-            if (ref && typeof ref === 'object') {
-                ref.current = el;
-            }
-            myRef.current = el;
-        } }), children));
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarMonthCell);

package/Calendar/CalendarWeekDayLabel.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const CalendarWeekDayLabel = styled_1.default.div `
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-weight: 200;
   font-size: 0.8em;
   user-select: none;

package/Calendar/CalendarWeekDaysBar.js

@@ -29,6 +29,11 @@ const CalendarWeekDaysBar = (props, ref) => {
             weekday: format,
         }).format(day.date)
         : '\u{0020}'), [format, locale, week]);
-    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
+    return (
+    // Hidden from screen readers: every day cell has the full date label with the weekday
+    react_1.default.createElement(Container, Object.assign({ "aria-hidden": true }, restProps, { ref: ref }), weekDayLabels.map((label, index) => (
+    // The narrow labels repeat (e.g. «С» for Wednesday and Saturday), so the key is the index
+    // eslint-disable-next-line react/no-array-index-key
+    react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: index }, label)))));
 };
 exports.default = react_1.default.forwardRef(CalendarWeekDaysBar);

package/Calendar/CalendarYearCell.js

@@ -24,25 +24,10 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.9em;
   margin: 0;
   min-width: 0;
-  outline: none;
   flex-basis: 33%;
 `;
 const CalendarYearCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
-    const myRef = react_1.default.useRef(null);
-    // React.useEffect(() => {
-    //   if (isSelected && myRef.current) {
-    //     myRef.current.scrollIntoView({ behavior: 'instant' });
-    //   }
-    // }, [isSelected]);
-    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
-            if (typeof ref === 'function') {
-                ref(el);
-            }
-            if (ref && typeof ref === 'object') {
-                ref.current = el;
-            }
-            myRef.current = el;
-        } }), children));
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarYearCell);

package/Calendar/CalendarYearsSelector.d.ts

@@ -16,7 +16,6 @@ export type CalendarYearsSelectorProps = {
     readonly date: Date;
     /**
      * Minimum date limit
-  
      */
     readonly minDate: Date;
     /**