@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Calendar/CalendarComponent.js

@@ -0,0 +1,666 @@
+import React, { useImperativeHandle } from 'react';
+import Body from './CalendarBody';
+import Cell from './CalendarCell';
+import WeekDayCell from './CalendarWeekDayCell';
+import EmptyCell from './CalendarEmptyCell';
+import WeekRowButton from './CalendarWeekRowButton';
+import WeekDayWeekNumber from './CalendarWeekDayWeekNumber';
+import Paper from './CalendarPaper';
+import Header from './CalendarHeader';
+import WeekRow from './CalendarWeekRow';
+import DateContainer from './CalendarDateContainer';
+import Toolbar from './CalendarToolbar';
+import YearsSelector from './CalendarYearsSelector';
+import MonthsSelector from './CalendarMonthsSelector';
+import MonthCell from './CalendarMonthCell';
+import DayBadge from './CalendarDayBadge';
+import Footer from './CalendarFooter';
+import ControlButton from './CalendarControlButton';
+import Heading from './CalendarHeading';
+import Subheading from './CalendarSubheading';
+import IconPrev from './CalendarIconPrev';
+import IconNext from './CalendarIconNext';
+import WeekDaysBar from './CalendarWeekDaysBar';
+import { useCalendar } from './use-calendar';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+export * from './use-calendar';
+export * from './CalendarWeekDaysBar';
+const viewAppear = 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.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);
+    }
+    return false;
+};
+const isNotRangeValue = (value) => !isRangeValue(value);
+const computeViews = (inputViews, range) => {
+    if (inputViews) {
+        return inputViews;
+    }
+    if (range) {
+        return ['days', 'months', 'years', 'weeks'];
+    }
+    return ['days', 'months', 'years'];
+};
+const computeView = (inputParams) => {
+    var _a;
+    const { inputView, inputViews, inputInitialView } = inputParams;
+    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(', ')}`);
+    }
+    // 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;
+    const today = new Date();
+    // Проверяем inputValue
+    if (inputValue !== null && inputValue !== undefined) {
+        if (Array.isArray(inputValue) && inputValue.length > 0) {
+            // Для range режима - берем первый элемент, если он есть
+            if (inputValue[0] instanceof Date) {
+                return inputValue[0];
+            }
+            // Если первый элемент null, пробуем второй
+            if (inputValue[1] instanceof Date) {
+                return inputValue[1];
+            }
+        }
+        else if (inputValue instanceof Date) {
+            // Для non-range режима
+            return inputValue;
+        }
+    }
+    // Проверяем defaultValue
+    if (defaultValue !== null && defaultValue !== undefined) {
+        if (Array.isArray(defaultValue) && defaultValue.length > 0) {
+            if (defaultValue[0] instanceof Date) {
+                return defaultValue[0];
+            }
+            if (defaultValue[1] instanceof Date) {
+                return defaultValue[1];
+            }
+        }
+        else if (defaultValue instanceof Date) {
+            return defaultValue;
+        }
+    }
+    // Возвращаем сегодняшнюю дату, если ничего не подошло
+    return today;
+};
+const CalendarComponent = React.forwardRef((props, ref) => {
+    var _a;
+    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', } = useThemeProps('Calendar', props);
+    /**
+     * Validations
+     */
+    if (range) {
+        if (defaultValue && isNotRangeValue(defaultValue)) {
+            throw new Error('The default value must be an array of dates([Date, Date])');
+        }
+        if (inputValue && isNotRangeValue(inputValue)) {
+            throw new Error('The value must be an array of dates([Date, Date])');
+        }
+    }
+    else {
+        if (defaultValue && isRangeValue(defaultValue)) {
+            throw new Error('The default value must be a Date instance');
+        }
+        if (inputValue && isRangeValue(inputValue)) {
+            throw new Error('The value must be a Date instance');
+        }
+    }
+    if (!range) {
+        if ((inputViews === null || inputViews === void 0 ? void 0 : inputViews.includes('weeks')) || inputView === 'weeks') {
+            throw new Error('The `weeks` view allowed only in range mode');
+        }
+    }
+    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.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = React.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const emitChange = React.useCallback((newValue) => {
+        if (typeof onChange === 'function') {
+            onChange(newValue);
+        }
+    }, [onChange]);
+    /**
+     * Overrides
+     */
+    const overridesMap = React.useMemo(() => ({
+        Body: (overrides === null || overrides === void 0 ? void 0 : overrides.Body) || Body,
+        Cell: (overrides === null || overrides === void 0 ? void 0 : overrides.Cell) || Cell,
+        EmptyCell: (overrides === null || overrides === void 0 ? void 0 : overrides.EmptyCell) || EmptyCell,
+        Paper: (overrides === null || overrides === void 0 ? void 0 : overrides.Paper) || Paper,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        WeekRow: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRow) || WeekRow,
+        DateContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.DateContainer) || DateContainer,
+        Toolbar: (overrides === null || overrides === void 0 ? void 0 : overrides.Toolbar) || Toolbar,
+        YearsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.YearsSelector) || YearsSelector,
+        MonthsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthsSelector) || MonthsSelector,
+        MonthCell: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthCell) || MonthCell,
+        DayBadge: (overrides === null || overrides === void 0 ? void 0 : overrides.DayBadge) || DayBadge,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || Footer,
+        ControlButton: (overrides === null || overrides === void 0 ? void 0 : overrides.ControlButton) || ControlButton,
+        Heading: (overrides === null || overrides === void 0 ? void 0 : overrides.Heading) || Heading,
+        Subheading: (overrides === null || overrides === void 0 ? void 0 : overrides.Subheading) || Subheading,
+        IconPrev: (overrides === null || overrides === void 0 ? void 0 : overrides.IconPrev) || IconPrev,
+        IconNext: (overrides === null || overrides === void 0 ? void 0 : overrides.IconNext) || IconNext,
+        WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || WeekDaysBar,
+        WeekDayCell: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDayCell) || WeekDayCell,
+        WeekRowButton: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRowButton) || WeekRowButton,
+        WeekDayWeekNumber: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDayWeekNumber) || WeekDayWeekNumber,
+    }), [overrides]);
+    const dateContainerRef = React.useRef(null);
+    /**
+     * Inside date value
+     */
+    const [calendarDate, setCalendarDate] = React.useState(() => computeCalendarDate({
+        defaultValue,
+        inputValue,
+    }));
+    /**
+     * Selected value
+     */
+    const inputValueRef = React.useRef(inputValue);
+    const [internalValue, setValue] = React.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.useState(null);
+    const shouldMoveFocus = React.useRef(false);
+    /**
+     * Current view mode
+     */
+    const [view, setView] = React.useState(() => computeView({
+        inputViews,
+        inputInitialView,
+        inputView,
+    }));
+    /**
+     * List of possibility views
+     */
+    const [views, setComputedViews] = React.useState(() => computeViews(inputViews, range));
+    const setViews = React.useCallback((variants) => setComputedViews(variants), []);
+    const selectView = React.useCallback((view) => {
+        const nextViews = views.includes(view) ? views : [...views, view];
+        if (nextViews !== views) {
+            setViews(nextViews);
+        }
+        setView(view);
+    }, [setViews, views]);
+    /**
+     * Controlled `view` property was changed
+     */
+    const inputViewRef = React.useRef(inputView);
+    React.useEffect(() => {
+        if (inputView && inputView !== inputViewRef.current) {
+            inputViewRef.current = inputView;
+            selectView(inputView);
+        }
+    }, [inputView, selectView]);
+    const resetVariablesRef = React.useRef({
+        calendarDate,
+        value,
+        view,
+    });
+    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange, } = useCalendar({
+        minDate,
+        maxDate,
+        weekStartDay,
+        locale,
+        displayLeadingZero,
+    });
+    const availableViewsMap = React.useMemo(() => {
+        const viewsMap = {
+            years: ['months', 'days'],
+            months: ['days', 'weeks'],
+            weeks: ['days'],
+            days: [],
+        };
+        const availableMap = new Map();
+        for (const [key, value] of Object.entries(viewsMap)) {
+            availableMap.set(key, [...value].filter(v => views.includes(v)));
+        }
+        const obj = Object.fromEntries(availableMap);
+        return Object.assign({}, obj);
+    }, [views]);
+    const getNextAvailableView = React.useCallback(() => {
+        const availableViews = availableViewsMap[view];
+        if (availableViews.length === 0) {
+            return null;
+        }
+        return availableViews[0];
+    }, [view, availableViewsMap]);
+    /**
+     * value was changed
+     */
+    React.useEffect(() => {
+        if (JSON.stringify(inputValue) !== JSON.stringify(inputValueRef.current)) {
+            inputValueRef.current = inputValue;
+            setValue(inputValue);
+            if (inputValue !== null && inputValue !== undefined) {
+                if (Array.isArray(inputValue) && inputValue[0] instanceof Date) {
+                    setCalendarDate(inputValue[0]);
+                }
+                else if (inputValue instanceof Date) {
+                    setCalendarDate(inputValue);
+                }
+            }
+        }
+    }, [inputValue]);
+    const handlePrevNextClick = React.useCallback((type) => () => {
+        const newCalendarDate = new Date(calendarDate);
+        if (view === 'years') {
+            if (type === 'prev') {
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() - 1);
+            }
+            else {
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() + 1);
+            }
+        }
+        if (view === 'months') {
+            if (type === 'prev') {
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() - 1);
+            }
+            else {
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() + 1);
+            }
+        }
+        if (view === 'days' || view === 'weeks') {
+            if (type === 'prev') {
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear(), newCalendarDate.getMonth() - 1, 1);
+            }
+            else {
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear(), newCalendarDate.getMonth() + 1, 1);
+            }
+        }
+        setCalendarDate(newCalendarDate);
+    }, [calendarDate, view]);
+    const handleCellDateClick = React.useCallback((selectedDate) => () => {
+        var _a;
+        setFocusedDate(selectedDate);
+        const nextView = getNextAvailableView();
+        if (nextView) {
+            setView(nextView);
+        }
+        // Single-date mode
+        if (!range) {
+            emitChange(selectedDate);
+            setValue(selectedDate);
+            return;
+        }
+        // Range-date mode
+        const [from, to] = (_a = value) !== null && _a !== void 0 ? _a : [];
+        // выбрана только первая дата - завершение периода
+        if (from && !to) {
+            /// check to swap
+            const newValue = selectedDate.getTime() < from.getTime() ? [selectedDate, from] : [from, selectedDate];
+            emitChange(newValue);
+            setValue(newValue);
+            return;
+        }
+        // обе даты выбраны или ничего не выбрано ([Date, Date] | [null, null] | null) - начало нового периода
+        setValue([selectedDate, null]);
+        emitChange([selectedDate, null]);
+    }, [emitChange, getNextAvailableView, range, value]);
+    /**
+     * Handle of click on year item
+     */
+    const handleYearSelected = React.useCallback((selectedYear) => () => {
+        const newDate = new Date(selectedYear, 0, 1, 0, 0, 0, 0);
+        setCalendarDate(newDate);
+        const nextView = getNextAvailableView();
+        if (nextView) {
+            selectView(nextView);
+        }
+        // if the next `view` does not exist
+        if (!nextView && typeof onChange === 'function') {
+            const a = new Date(newDate.getFullYear(), 11, 31, 23, 59, 59, 999);
+            const selectedValue = range ? [newDate, a] : newDate;
+            onChange(selectedValue);
+            if (!inputValue) {
+                setValue(selectedValue);
+            }
+        }
+    }, [getNextAvailableView, onChange, selectView, range, inputValue]);
+    /**
+     * Handle of click on month item
+     */
+    const handleMonthSelected = React.useCallback((monthIndex) => () => {
+        const newDate = new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0);
+        setCalendarDate(newDate);
+        const nextView = getNextAvailableView();
+        if (nextView) {
+            selectView(nextView);
+        }
+        // if the next `view` does not exist
+        if (!nextView && typeof onChange === 'function') {
+            // 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) {
+                setValue(selectedValue);
+            }
+        }
+    }, [calendarDate, getNextAvailableView, onChange, selectView, inputValue, range]);
+    /**
+     * Handle click on «Reset» button
+     */
+    const handleReset = React.useCallback(() => {
+        setCalendarDate(resetVariablesRef.current.calendarDate);
+        setValue(resetVariablesRef.current.value);
+        selectView(resetVariablesRef.current.view);
+        if (typeof onChange === 'function') {
+            onChange(resetVariablesRef.current.value);
+        }
+    }, [onChange, selectView]);
+    /**
+     * Handle click on «Today» button
+     */
+    const handleToday = React.useCallback(() => {
+        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(newValue);
+        emitChange(newValue);
+        if (view !== 'days' && views.includes('days')) {
+            selectView('days');
+        }
+    }, [emitChange, range, selectView, view, views]);
+    const handleClickWeek = React.useCallback((week) => () => {
+        const days = week.days;
+        const dates = [days[0].date, days[days.length - 1].date];
+        setCalendarDate(dates[0]);
+        /// set view
+        let nextView = undefined;
+        if (views.includes('days')) {
+            nextView = 'days';
+        }
+        if (nextView) {
+            selectView(nextView);
+        }
+        /// set value
+        if (range) {
+            setValue(dates);
+            if (typeof onChange === 'function') {
+                onChange(dates);
+            }
+        }
+        else {
+            setValue(dates[0]);
+            if (typeof onChange === 'function') {
+                onChange(dates[0]);
+            }
+        }
+    }, [views, range, selectView, onChange]);
+    const weeks = React.useMemo(() => getWeeks(calendarDate), [calendarDate, getWeeks]);
+    const yearsRange = React.useMemo(() => getYearsRange(minDate, maxDate), [minDate, maxDate, getYearsRange]);
+    const monthsRange = React.useMemo(() => getMonthsRange(minDate, maxDate, calendarDate.getFullYear()), [minDate, maxDate, getMonthsRange, calendarDate]);
+    const minDay = React.useMemo(() => new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()), [minDate]);
+    const maxDay = React.useMemo(() => new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()), [maxDate]);
+    const dayLabelFormatter = React.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.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.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.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.useCallback(() => (React.createElement(overridesMap.DateContainer, { ref: dateContainerRef, onKeyDown: handleDaysKeyDown }, weeks.map(week => (React.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;
+            let isSelected = false;
+            if (isRangeValue(value)) {
+                const [from, to] = value || [];
+                if (from && to) {
+                    fill =
+                        day.date.getTime() >= from.getTime() && day.date.getTime() <= to.getTime();
+                }
+                isSelected = Boolean((from && isSameDay(from, day.date)) || (to && isSameDay(to, day.date)));
+            }
+            else if (isNotRangeValue(value)) {
+                isSelected = Boolean(value && isSameDay(value, day.date));
+            }
+            const key = dateKey(day.date);
+            return (React.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.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
+        }
+        return (React.createElement(overridesMap.EmptyCell, { key: day.date.getTime(), "aria-hidden": true }, getDayLabel(day.date)));
+    })))))), [
+        accentColor,
+        badges,
+        calendarDate,
+        dayLabelFormatter,
+        getDayLabel,
+        handleCellDateClick,
+        handleDaysKeyDown,
+        isSameDay,
+        markToday,
+        overridesMap,
+        tabbableDateKey,
+        value,
+        weeks,
+    ]);
+    const renderViewMonths = React.useCallback(() => (React.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
+        const isSelected = calendarDate.getMonth() === monthIndex;
+        return (React.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.useCallback(() => (React.createElement(overridesMap.YearsSelector, { accentColor: accentColor, date: calendarDate, onChange: y => handleYearSelected(y)(), years: yearsRange, locale: locale, minDate: minDate, maxDate: maxDate })), [
+        accentColor,
+        calendarDate,
+        handleYearSelected,
+        locale,
+        maxDate,
+        minDate,
+        overridesMap,
+        yearsRange,
+    ]);
+    const renderViewWeeks = React.useCallback(() => (React.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => {
+        let isSelected = false;
+        if (isRangeValue(value)) {
+            const [from, to] = value || [];
+            if (from && to) {
+                if (isSameDay(from, week.days[0].date) &&
+                    isSameDay(to, week.days[week.days.length - 1].date)) {
+                    isSelected = true;
+                }
+            }
+        }
+        return (React.createElement(overridesMap.WeekRowButton, { key: week.weekNumber, isSelected: isSelected, onClick: handleClickWeek(week), accentColor: accentColor, week: week },
+            React.createElement(overridesMap.WeekDayWeekNumber, { week: week }, week.weekNumber),
+            week.days.map(day => {
+                const badge = badges.find(b => isSameDay(b.date, day.date));
+                const inCurrentMonth = day.date.getMonth() === calendarDate.getMonth();
+                return (React.createElement(overridesMap.WeekDayCell, { key: day.date.getTime(), isToday: markToday && day.isToday, inCurrentMonth: inCurrentMonth },
+                    getDayLabel(day.date),
+                    badge && (React.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
+            })));
+    }))), [
+        accentColor,
+        badges,
+        calendarDate,
+        getDayLabel,
+        getWeeks,
+        handleClickWeek,
+        isSameDay,
+        markToday,
+        overridesMap,
+        value,
+    ]);
+    const getActiveView = React.useCallback(() => view, [view]);
+    const getCalendarDate = React.useCallback(() => calendarDate, [calendarDate]);
+    /**
+     * API
+     */
+    useImperativeHandle(ref, () => ({
+        setView: selectView,
+        reset: handleReset,
+        setValue,
+        getCalendarDate,
+        setCalendarDate,
+        getActiveView,
+        setViews,
+    }), [selectView, handleReset, getActiveView, setViews, getCalendarDate]);
+    return (React.createElement(overridesMap.Paper, null,
+        React.createElement(overridesMap.Header, null,
+            typeof heading !== 'undefined' && React.createElement(overridesMap.Heading, null, heading),
+            typeof subheading !== 'undefined' && (React.createElement(overridesMap.Subheading, null, subheading)),
+            React.createElement(overridesMap.Toolbar, null,
+                React.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: view === 'years', "aria-label": prevButtonLabel, title: prevButtonLabel },
+                    React.createElement(overridesMap.IconPrev, null)),
+                React.createElement(overridesMap.ControlButton, { disabled: !views.includes('months'), onClick: () => {
+                        if (view === 'months' && views.includes('days')) {
+                            selectView('days');
+                        }
+                        if (view !== 'months' && views.includes('months')) {
+                            selectView('months');
+                        }
+                    } }, getMonthLabel(calendarDate)),
+                React.createElement(overridesMap.ControlButton, { disabled: !views.includes('years'), onClick: () => {
+                        if (view === 'years' && views.includes('days')) {
+                            selectView('days');
+                        }
+                        if (view !== 'years' && views.includes('years')) {
+                            selectView('years');
+                        }
+                    } }, getYearLabel(calendarDate)),
+                React.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: view === 'years', "aria-label": nextButtonLabel, title: nextButtonLabel },
+                    React.createElement(overridesMap.IconNext, null)))),
+        view === 'days' && (React.createElement(overridesMap.WeekDaysBar, { locale: locale, week: weeks[0], format: weekDayLabelFormat || 'short' })),
+        React.createElement(overridesMap.Body, null,
+            React.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.createElement(overridesMap.Footer, null,
+            typeof footer !== 'undefined' && React.createElement(React.Fragment, null, footer),
+            typeof todayButtonLabel !== 'undefined' && (React.createElement(overridesMap.ControlButton, { onClick: handleToday }, todayButtonLabel)),
+            typeof resetButtonLabel !== 'undefined' && (React.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
+});
+CalendarComponent.displayName = 'CalendarComponent';
+export { CalendarComponent };