@via-profit/ui-kit 0.1.8 → 0.2.1-alpha.3

package/Calendar/CalendarComponent.js

@@ -0,0 +1,572 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarComponent = void 0;
+const react_1 = __importStar(require("react"));
+const CalendarBody_1 = __importDefault(require("./CalendarBody"));
+const CalendarCell_1 = __importDefault(require("./CalendarCell"));
+const CalendarWeekDayCell_1 = __importDefault(require("./CalendarWeekDayCell"));
+const CalendarEmptyCell_1 = __importDefault(require("./CalendarEmptyCell"));
+const CalendarWeekRowButton_1 = __importDefault(require("./CalendarWeekRowButton"));
+const CalendarWeekDayWeekNumber_1 = __importDefault(require("./CalendarWeekDayWeekNumber"));
+const CalendarPaper_1 = __importDefault(require("./CalendarPaper"));
+const CalendarHeader_1 = __importDefault(require("./CalendarHeader"));
+const CalendarWeekRow_1 = __importDefault(require("./CalendarWeekRow"));
+const CalendarDateContainer_1 = __importDefault(require("./CalendarDateContainer"));
+const CalendarToolbar_1 = __importDefault(require("./CalendarToolbar"));
+const CalendarYearsSelector_1 = __importDefault(require("./CalendarYearsSelector"));
+const CalendarMonthsSelector_1 = __importDefault(require("./CalendarMonthsSelector"));
+const CalendarMonthCell_1 = __importDefault(require("./CalendarMonthCell"));
+const CalendarDayBadge_1 = __importDefault(require("./CalendarDayBadge"));
+const CalendarFooter_1 = __importDefault(require("./CalendarFooter"));
+const CalendarControlButton_1 = __importDefault(require("./CalendarControlButton"));
+const CalendarHeading_1 = __importDefault(require("./CalendarHeading"));
+const CalendarSubheading_1 = __importDefault(require("./CalendarSubheading"));
+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"));
+__exportStar(require("./use-calendar"), exports);
+__exportStar(require("./CalendarWeekDaysBar"), exports);
+const StyledSwiper = (0, styled_1.default)(Swiper_1.default) `
+  height: 100%;
+`;
+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;
+    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;
+    }
+    return (_a = inputInitialView !== null && inputInitialView !== void 0 ? inputInitialView : inputView) !== null && _a !== void 0 ? _a : 'days';
+};
+const computeCalendarDate = (params) => {
+    const { inputValue, defaultValue } = params;
+    const today = new Date();
+    if (inputValue) {
+        if (isRangeValue(inputValue) && inputValue[1]) {
+            return inputValue[1];
+        }
+        if (isRangeValue(inputValue) && inputValue[0]) {
+            return inputValue[0];
+        }
+    }
+    if (isRangeValue(defaultValue) && defaultValue && defaultValue[1]) {
+        return defaultValue[1];
+    }
+    if (isRangeValue(defaultValue) && defaultValue && defaultValue[0]) {
+        return defaultValue[0];
+    }
+    return today;
+};
+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;
+    /**
+     * 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 (!inputValue && typeof onChange === 'undefined') {
+        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.');
+    }
+    /**
+     * Overrides
+     */
+    const overridesMap = react_1.default.useMemo(() => ({
+        Body: (overrides === null || overrides === void 0 ? void 0 : overrides.Body) || CalendarBody_1.default,
+        Cell: (overrides === null || overrides === void 0 ? void 0 : overrides.Cell) || CalendarCell_1.default,
+        EmptyCell: (overrides === null || overrides === void 0 ? void 0 : overrides.EmptyCell) || CalendarEmptyCell_1.default,
+        Paper: (overrides === null || overrides === void 0 ? void 0 : overrides.Paper) || CalendarPaper_1.default,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || CalendarHeader_1.default,
+        WeekRow: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRow) || CalendarWeekRow_1.default,
+        DateContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.DateContainer) || CalendarDateContainer_1.default,
+        Toolbar: (overrides === null || overrides === void 0 ? void 0 : overrides.Toolbar) || CalendarToolbar_1.default,
+        YearsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.YearsSelector) || CalendarYearsSelector_1.default,
+        MonthsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthsSelector) || CalendarMonthsSelector_1.default,
+        MonthCell: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthCell) || CalendarMonthCell_1.default,
+        DayBadge: (overrides === null || overrides === void 0 ? void 0 : overrides.DayBadge) || CalendarDayBadge_1.default,
+        Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || CalendarFooter_1.default,
+        ControlButton: (overrides === null || overrides === void 0 ? void 0 : overrides.ControlButton) || CalendarControlButton_1.default,
+        Heading: (overrides === null || overrides === void 0 ? void 0 : overrides.Heading) || CalendarHeading_1.default,
+        Subheading: (overrides === null || overrides === void 0 ? void 0 : overrides.Subheading) || CalendarSubheading_1.default,
+        IconPrev: (overrides === null || overrides === void 0 ? void 0 : overrides.IconPrev) || CalendarIconPrev_1.default,
+        IconNext: (overrides === null || overrides === void 0 ? void 0 : overrides.IconNext) || CalendarIconNext_1.default,
+        WeekDaysBar: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDaysBar) || CalendarWeekDaysBar_1.default,
+        WeekDayCell: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDayCell) || CalendarWeekDayCell_1.default,
+        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);
+    /**
+     * Inside date value
+     */
+    const [calendarDate, setCalendarDate] = react_1.default.useState(() => computeCalendarDate({
+        defaultValue,
+        inputValue,
+    }));
+    /**
+     * 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);
+    /**
+     * Current view mode
+     */
+    const [view, setView] = react_1.default.useState(() => computeView({
+        inputViews,
+        inputInitialView,
+        inputView,
+    }));
+    /**
+     * List of possibility views
+     */
+    const [views] = react_1.default.useState(() => computeViews(inputViews, range));
+    const selectView = react_1.default.useCallback((view) => {
+        var _a;
+        setView(view);
+        const index = views.findIndex(v => v === view);
+        if (index > -1) {
+            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToIndex(index);
+        }
+    }, [views]);
+    const resetVariablesRef = react_1.default.useRef({
+        calendarDate,
+        value,
+        view,
+    });
+    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange, } = (0, use_calendar_1.useCalendar)({
+        minDate,
+        maxDate,
+        weekStartDay,
+        locale,
+        displayLeadingZero,
+    });
+    const availableViewsMap = react_1.default.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_1.default.useCallback(() => {
+        const availableViews = availableViewsMap[view];
+        if (availableViews.length === 0) {
+            return null;
+        }
+        return availableViews[0];
+    }, [view, availableViewsMap]);
+    /**
+     * value was changed
+     */
+    react_1.default.useEffect(() => {
+        if (JSON.stringify(inputValue) !== JSON.stringify(inputValueRef.current)) {
+            inputValueRef.current = inputValue;
+            setValue(inputValue);
+            if (isRangeValue(inputValue) && inputValue && inputValue[0] instanceof Date) {
+                setCalendarDate(inputValue[0]);
+            }
+            else {
+                setCalendarDate(inputValue);
+            }
+        }
+    }, [inputValue]);
+    const handlePrevNextClick = react_1.default.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_1.default.useCallback((selectedDate) => () => {
+        var _a;
+        const nextView = getNextAvailableView();
+        if (nextView) {
+            setView(nextView);
+        }
+        // Single-date mode
+        if (!range) {
+            onChange(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())) {
+            /// 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;
+            }
+        }
+    }, [onChange, 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);
+        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();
+            a.setFullYear(newDate.getFullYear(), 11, 31);
+            a.setHours(23, 59, 59);
+            const selectedValue = range ? [newDate, a] : newDate;
+            onChange(selectedValue);
+            if (!inputValue) {
+                setValue(selectedValue);
+            }
+        }
+    }, [calendarDate, 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);
+        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();
+            a.setFullYear(newDate.getFullYear(), newDate.getMonth() + 1, 0);
+            a.setHours(0, 0, 0);
+            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_1.default.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_1.default.useCallback(() => {
+        const today = new Date();
+        today.setHours(0, 0, 0);
+        setCalendarDate(today);
+        setValue((range ? [today, today] : today));
+        handleCellDateClick(today)();
+    }, [handleCellDateClick, range]);
+    const handleClickWeek = react_1.default.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_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 => {
+        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));
+            }
+            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) },
+                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)));
+    })))))), [
+        accentColor,
+        badges,
+        calendarDate,
+        getDayLabel,
+        getWeeks,
+        handleCellDateClick,
+        isSameDay,
+        markToday,
+        overridesMap,
+        value,
+    ]);
+    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))));
+    }))), [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,
+        calendarDate,
+        handleYearSelected,
+        locale,
+        maxDate,
+        minDate,
+        overridesMap,
+        yearsRange,
+    ]);
+    const renderViewWeeks = react_1.default.useCallback(() => (react_1.default.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_1.default.createElement(overridesMap.WeekRowButton, { key: week.weekNumber, isSelected: isSelected, onClick: handleClickWeek(week), accentColor: accentColor, week: week },
+            react_1.default.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_1.default.createElement(overridesMap.WeekDayCell, { key: day.date.getTime(), isToday: markToday && day.isToday, inCurrentMonth: inCurrentMonth },
+                    getDayLabel(day.date),
+                    badge && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
+            })));
+    }))), [
+        accentColor,
+        badges,
+        calendarDate,
+        getDayLabel,
+        getWeeks,
+        handleClickWeek,
+        isSameDay,
+        markToday,
+        overridesMap,
+        value,
+    ]);
+    const initialIndex = react_1.default.useMemo(() => views.findIndex(v => v === view), [views, view]);
+    const getActiveView = react_1.default.useCallback(() => view, [view]);
+    /**
+     * API
+     */
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setView: selectView,
+        reset: handleReset,
+        setValue,
+        setCalendarDate,
+        getActiveView,
+    }), [selectView, handleReset, getActiveView]);
+    return (react_1.default.createElement(overridesMap.Paper, null,
+        react_1.default.createElement(overridesMap.Header, null,
+            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.IconPrev, null)),
+                react_1.default.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_1.default.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_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: ['months', 'years'].includes(view) },
+                    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);
+            }))),
+        (typeof resetButtonLabel !== 'undefined' ||
+            typeof todayButtonLabel !== 'undefined' ||
+            typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,
+            typeof footer !== 'undefined' && react_1.default.createElement(react_1.default.Fragment, null, footer),
+            typeof todayButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, todayButtonLabel)),
+            typeof resetButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
+});
+exports.CalendarComponent = CalendarComponent;
+CalendarComponent.displayName = 'CalendarComponent';

package/Calendar/CalendarControlButton.js

@@ -17,18 +17,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../Button"));
+const react_2 = require("@emotion/react");
 const StyledCalendarControlButton = (0, styled_1.default)(Button_1.default) `
-  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+  color: ${({ theme, disabled }) => disabled
+    ? theme.color.accentSecondaryContrast.alpha(0.2).toString()
+    : theme.color.accentSecondaryContrast.toString()};
   background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0).toString()};
   cursor: pointer;
-  &:hover {
-    color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
-    background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.2).toString()};
-  }
-  &:active {
-    color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
-    background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.5).toString()};
-  }
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      &:hover {
+        color: ${theme.color.accentSecondaryContrast.toString()};
+        background-color: ${theme.color.accentSecondaryContrast.alpha(0.2).toString()};
+      }
+      &:active {
+        color: ${theme.color.accentSecondaryContrast.toString()};
+        background-color: ${theme.color.accentSecondaryContrast.alpha(0.5).toString()};
+      }
+    `}
 `;
 const CalendarControlButton = (props, ref) => {
     const { children, isActive } = props, restProps = __rest(props, ["children", "isActive"]);

package/Calendar/CalendarDayBadge.js

@@ -59,7 +59,7 @@ const CalendarDayBadge = (props, ref) => {
                 $backgroundColor: theme.color.accentSecondary.toString(),
             };
         }
-        const clr = new Color_1.default(accentColor);
+        const clr = Color_1.default.fromString(accentColor);
         return {
             $backgroundColor: accentColor,
             $color: clr.getContrast(accentColor) > 5

package/Calendar/CalendarEmptyCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export type CalendarEmptyCellProps = React.HTMLAttributes<HTMLButtonElement>;
-declare const _default: React.ForwardRefExoticComponent<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>;
+export type CalendarEmptyCellProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarEmptyCellProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Calendar/CalendarEmptyCell.js

@@ -17,13 +17,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Elem = styled_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.8em;
   width: 3em;
   height: 3em;
+  margin: 0;
   min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  outline: none;
+  position: relative;
+  font-weight: 400;
+  color: ${({ theme }) => theme.color.textSecondary.alpha(0.5).toString()};
 `;
 const CalendarEmptyCell = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/Calendar/CalendarHeading.js

@@ -18,11 +18,12 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledCalendarHeading = styled_1.default.div `
   font-weight: 600;
-  font-size: 1.6em;
+  font-size: 1.2em;
   margin: 0 0 0.2em 0;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 100%;
+  text-align: center;
   overflow: hidden;
 `;
 const CalendarHeading = (props, ref) => {