@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/baseui/datepicker/calendar-header.js

@@ -0,0 +1,368 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var chevron_right_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-right"));
+var chevron_left_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-left"));
+var chevron_down_1 = (0, tslib_1.__importDefault)(require("../../icon/components/chevron-down"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("./utils/date-fns-adapter"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("./utils/date-helpers"));
+var calendar_header_helpers_1 = require("./utils/calendar-header-helpers");
+var popover_1 = require("../popover");
+var locale_1 = require("../locale");
+var styled_components_1 = require("./styled-components");
+var constants_1 = require("./constants");
+var overrides_1 = require("../helpers/overrides");
+var focusVisible_1 = require("../utils/focusVisible");
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
+var navBtnStyle = function () { return ({
+    cursor: 'pointer',
+}); };
+var MIN_YEAR = 1900;
+var MAX_YEAR = 2030;
+var MIN_MONTH = 0;
+var MAX_MONTH = 11;
+var DIRECTION = {
+    NEXT: 'next',
+    PREVIOUS: 'previous',
+};
+// When multiple calendar months are rendered, the month selection dropdown
+// must account for which of the rendered calendar months it corresponds with
+function adjustForCalendarOrder(monthId, year, order) {
+    var adjustedMonth = Number(monthId) - order;
+    var adjustedYear = year;
+    if (adjustedMonth < 0) {
+        adjustedMonth = 11;
+        adjustedYear -= 1;
+    }
+    return { adjustedMonthId: adjustedMonth.toString(), adjustedYear: adjustedYear };
+}
+// @ts-ignore
+function idToYearMonth(id) {
+    return id.split('-').map(Number);
+}
+var CalendarHeader = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(CalendarHeader, _super);
+    function CalendarHeader(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isMonthDropdownOpen: false,
+            isYearDropdownOpen: false,
+            isFocusVisible: false,
+        };
+        _this.getDateProp = function () { return _this.props.date || _this.dateHelpers.date(); };
+        _this.getYearItems = function () {
+            var date = _this.getDateProp();
+            var maxDate = _this.props.maxDate;
+            var minDate = _this.props.minDate;
+            var maxYear = maxDate ? _this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+            var minYear = minDate ? _this.dateHelpers.getYear(minDate) : MIN_YEAR;
+            var selectedMonth = _this.dateHelpers.getMonth(date);
+            // TODO: this logic can be optimized to only run when minDate / maxDate change
+            _this.yearItems = Array.from({ length: maxYear - minYear + 1 }, function (_, i) { return minYear + i; }).map(function (year) { return ({
+                id: year.toString(),
+                label: year.toString(),
+            }); });
+            var monthOfMaxDate = maxDate ? _this.dateHelpers.getMonth(maxDate) : MAX_MONTH;
+            var monthOfMinDate = minDate ? _this.dateHelpers.getMonth(minDate) : MIN_MONTH;
+            // Generates array like [0,1,.... monthOfMaxDate]
+            var maxYearMonths = Array.from({ length: monthOfMaxDate + 1 }, function (x, i) { return i; });
+            // Generates array like [monthOfMinDate, ...., 10, 11]
+            var minYearMonths = Array.from({ length: 12 - monthOfMinDate }, function (x, i) { return i + monthOfMinDate; });
+            if (selectedMonth > maxYearMonths[maxYearMonths.length - 1]) {
+                var lastIdx = _this.yearItems.length - 1;
+                _this.yearItems[lastIdx] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.yearItems[lastIdx]), { disabled: true });
+            }
+            if (selectedMonth < minYearMonths[0]) {
+                _this.yearItems[0] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.yearItems[0]), { disabled: true });
+            }
+        };
+        _this.getMonthItems = function () {
+            var date = _this.getDateProp();
+            var year = _this.dateHelpers.getYear(date);
+            var maxDate = _this.props.maxDate;
+            var minDate = _this.props.minDate;
+            var maxYear = maxDate ? _this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+            var minYear = minDate ? _this.dateHelpers.getYear(minDate) : MIN_YEAR;
+            var monthOfMaxDate = maxDate ? _this.dateHelpers.getMonth(maxDate) : MAX_MONTH;
+            // Generates array like [0,1,.... monthOfMaxDate]
+            var maxYearMonths = Array.from({ length: monthOfMaxDate + 1 }, function (x, i) { return i; });
+            var monthOfMinDate = minDate ? _this.dateHelpers.getMonth(minDate) : MIN_MONTH;
+            // Generates array like [monthOfMinDate, ...., 10, 11]
+            var minYearMonths = Array.from({ length: 12 - monthOfMinDate }, function (x, i) { return i + monthOfMinDate; });
+            var maxMinYearMonthsIntersection = maxYearMonths.filter(function (month) { return minYearMonths.includes(month); });
+            var filterMonthsList = 
+            // eslint-disable-next-line no-nested-ternary -- Ternary is fine here
+            year === maxYear && year === minYear
+                ? maxMinYearMonthsIntersection
+                : // eslint-disable-next-line no-nested-ternary -- Ternary is fine here
+                    year === maxYear
+                        ? maxYearMonths
+                        : year === minYear
+                            ? minYearMonths
+                            : null;
+            // @ts-ignore
+            var formatMonthLabel = function (month) { return _this.dateHelpers.getMonthInLocale(month, _this.props.locale); };
+            _this.monthItems = (0, calendar_header_helpers_1.getFilteredMonthItems)({
+                filterMonthsList: filterMonthsList,
+                formatMonthLabel: formatMonthLabel,
+            });
+        };
+        _this.increaseMonth = function () {
+            if (_this.props.onMonthChange) {
+                _this.props.onMonthChange({
+                    date: _this.dateHelpers.addMonths(_this.getDateProp(), 
+                    // in a multi-month context, `order` is the number months ahead of
+                    // the root Calendar month that this CalendarHeader displays. We account
+                    // for this by incrementing the month by 1, less the value of `order`.
+                    1 - _this.props.order),
+                });
+            }
+        };
+        _this.decreaseMonth = function () {
+            if (_this.props.onMonthChange) {
+                _this.props.onMonthChange({
+                    date: _this.dateHelpers.subMonths(_this.getDateProp(), 1),
+                });
+            }
+        };
+        _this.isMultiMonthHorizontal = function () {
+            var _a = _this.props, monthsShown = _a.monthsShown, orientation = _a.orientation;
+            if (!monthsShown) {
+                return false;
+            }
+            return orientation === constants_1.ORIENTATION.horizontal && monthsShown > 1;
+        };
+        _this.isHiddenPaginationButton = function (direction) {
+            var _a = _this.props, monthsShown = _a.monthsShown, order = _a.order;
+            if (!!monthsShown && _this.isMultiMonthHorizontal()) {
+                if (direction === DIRECTION.NEXT) {
+                    var isLastMonth = order === monthsShown - 1;
+                    return !isLastMonth;
+                }
+                else {
+                    var isFirstMonth = order === 0;
+                    return !isFirstMonth;
+                }
+            }
+            return false;
+        };
+        _this.handleFocus = function (event) {
+            if ((0, focusVisible_1.isFocusVisible)(event)) {
+                _this.setState({ isFocusVisible: true });
+            }
+        };
+        _this.handleBlur = function () {
+            if (_this.state.isFocusVisible !== false) {
+                _this.setState({ isFocusVisible: false });
+            }
+        };
+        _this.renderPreviousMonthButton = function (_a) {
+            var locale = _a.locale;
+            var date = _this.getDateProp();
+            var _b = _this.props, _c = _b.overrides, overrides = _c === void 0 ? {} : _c, density = _b.density;
+            var allPrevDaysDisabled = _this.dateHelpers.monthDisabledBefore(date, _this.props);
+            var isDisabled = false;
+            if (allPrevDaysDisabled) {
+                isDisabled = true;
+            }
+            var nextMonth = _this.dateHelpers.subMonths(date, 1);
+            var minYear = _this.props.minDate ? _this.dateHelpers.getYear(_this.props.minDate) : MIN_YEAR;
+            if (_this.dateHelpers.getYear(nextMonth) < minYear) {
+                isDisabled = true;
+            }
+            var isHidden = _this.isHiddenPaginationButton(DIRECTION.PREVIOUS);
+            if (isHidden) {
+                isDisabled = true;
+            }
+            var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.PrevButton, function () { return null; }), 2), PrevButton = _d[0], prevButtonProps = _d[1];
+            var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.PrevButtonIcon, chevron_left_1.default), 2), PrevButtonIcon = _e[0], prevButtonIconProps = _e[1];
+            var clickHandler = _this.decreaseMonth;
+            if (allPrevDaysDisabled) {
+                // @ts-ignore
+                clickHandler = null;
+            }
+            return ((0, jsx_runtime_1.jsx)(PrevButton, (0, tslib_1.__assign)({ "aria-label": locale.datepicker.previousMonth, tabIndex: 0, onClick: clickHandler, disabled: isDisabled, "$isFocusVisible": _this.state.isFocusVisible, type: "button", "$disabled": isDisabled, "$order": _this.props.order, "$density": _this.props.density }, prevButtonProps, { children: isHidden ? null : ((0, jsx_runtime_1.jsx)(PrevButtonIcon, (0, tslib_1.__assign)({ size: density === constants_1.DENSITY.high ? 24 : 36, overrides: { Svg: { style: navBtnStyle } } }, prevButtonIconProps), void 0)) }), void 0));
+        };
+        _this.renderNextMonthButton = function (_a) {
+            var locale = _a.locale;
+            var date = _this.getDateProp();
+            var _b = _this.props, _c = _b.overrides, overrides = _c === void 0 ? {} : _c, density = _b.density;
+            var allNextDaysDisabled = _this.dateHelpers.monthDisabledAfter(date, _this.props);
+            var isDisabled = false;
+            if (allNextDaysDisabled) {
+                isDisabled = true;
+            }
+            var nextMonth = _this.dateHelpers.addMonths(date, 1);
+            var maxYear = _this.props.maxDate ? _this.dateHelpers.getYear(_this.props.maxDate) : MAX_YEAR;
+            if (_this.dateHelpers.getYear(nextMonth) > maxYear) {
+                isDisabled = true;
+            }
+            var isHidden = _this.isHiddenPaginationButton(DIRECTION.NEXT);
+            if (isHidden) {
+                isDisabled = true;
+            }
+            var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.NextButton, function () { return null; }), 2), NextButton = _d[0], nextButtonProps = _d[1];
+            var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.NextButtonIcon, chevron_right_1.default), 2), NextButtonIcon = _e[0], nextButtonIconProps = _e[1];
+            var clickHandler = _this.increaseMonth;
+            // The other option is to always provide a click handler and let customers
+            // override its functionality based on the `$allPrevDaysDisabled` prop
+            // in a custom NextButton component override
+            // Their options would be to render `null` or not apply the components handler
+            // on click or do nothing
+            if (allNextDaysDisabled) {
+                // @ts-ignore
+                clickHandler = null;
+            }
+            return ((0, jsx_runtime_1.jsx)(NextButton, (0, tslib_1.__assign)({ "aria-label": locale.datepicker.nextMonth, tabIndex: 0, onClick: clickHandler, disabled: isDisabled, type: "button", "$disabled": isDisabled, "$isFocusVisible": _this.state.isFocusVisible, "$order": _this.props.order, "$density": _this.props.density, "$isTrailing": true }, nextButtonProps, { children: isHidden ? null : ((0, jsx_runtime_1.jsx)(NextButtonIcon, (0, tslib_1.__assign)({ size: density === constants_1.DENSITY.high ? 24 : 36, overrides: { Svg: { style: navBtnStyle } } }, nextButtonIconProps), void 0)) }), void 0));
+        };
+        _this.canArrowsOpenDropdown = function (event) {
+            if (!_this.state.isMonthDropdownOpen && !_this.state.isYearDropdownOpen) {
+                if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                    return true;
+                }
+            }
+            return false;
+        };
+        _this.renderMonthYearDropdown = function () {
+            var date = _this.getDateProp();
+            var month = _this.dateHelpers.getMonth(date);
+            var year = _this.dateHelpers.getYear(date);
+            var order = _this.props.order;
+            var _a = _this.props, locale = _a.locale, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, density = _a.density;
+            var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.MonthYearSelectButton, styled_components_1.StyledMonthYearSelectButton), 2), MonthYearSelectButton = _c[0], monthYearSelectButtonProps = _c[1];
+            var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.MonthYearSelectIconContainer, styled_components_1.StyledMonthYearSelectIconContainer), 2), MonthYearSelectIconContainer = _d[0], monthYearSelectIconContainerProps = _d[1];
+            var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.MonthYearSelectPopover, popover_1.Popover), 2), OverriddenPopover = _e[0], popoverProps = _e[1];
+            var _f = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.MonthYearSelectStatefulMenu, function () { return null; }), 2), OverriddenStatefulMenu = _f[0], menuProps = _f[1];
+            menuProps.overrides = (0, overrides_1.mergeOverrides)({ List: { style: { height: 'auto', maxHeight: '257px' } } }, menuProps && menuProps.overrides);
+            var initialMonthIndex = _this.monthItems.findIndex(function (monthItem) { return monthItem.id === _this.dateHelpers.getMonth(date).toString(); });
+            var initialYearIndex = _this.yearItems.findIndex(function (yearItem) { return yearItem.id === _this.dateHelpers.getYear(date).toString(); });
+            var monthTitle = "".concat(_this.dateHelpers.getMonthInLocale(_this.dateHelpers.getMonth(date), locale));
+            var yearTitle = "".concat(_this.dateHelpers.getYear(date));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OverriddenPopover, (0, tslib_1.__assign)({ placement: "bottom", autoFocus: true, focusLock: true, isOpen: _this.state.isMonthDropdownOpen, onClick: function () {
+                            _this.setState(function (prev) { return ({
+                                isMonthDropdownOpen: !prev.isMonthDropdownOpen,
+                            }); });
+                        }, onClickOutside: function () { return _this.setState({ isMonthDropdownOpen: false }); }, onEsc: function () { return _this.setState({ isMonthDropdownOpen: false }); }, content: function () { return ((0, jsx_runtime_1.jsx)(OverriddenStatefulMenu, (0, tslib_1.__assign)({ initialState: {
+                                highlightedIndex: initialMonthIndex,
+                                isFocused: true,
+                            }, items: _this.monthItems, 
+                            // @ts-ignore
+                            onItemSelect: function (_a) {
+                                var item = _a.item, event = _a.event;
+                                event.preventDefault();
+                                var _b = adjustForCalendarOrder(item.id, year, order), adjustedMonthId = _b.adjustedMonthId, adjustedYear = _b.adjustedYear;
+                                var updatedDate = _this.dateHelpers.set(date, {
+                                    year: adjustedYear,
+                                    month: idToYearMonth(adjustedMonthId),
+                                });
+                                _this.props.onMonthChange && _this.props.onMonthChange({ date: updatedDate });
+                                _this.setState({ isMonthDropdownOpen: false });
+                            } }, menuProps), void 0)); } }, popoverProps, { children: (0, jsx_runtime_1.jsxs)(MonthYearSelectButton, (0, tslib_1.__assign)({ "aria-live": "polite", type: "button", "$isFocusVisible": _this.state.isFocusVisible, "$density": density, 
+                            // @ts-ignore
+                            onKeyUp: function (event) {
+                                if (_this.canArrowsOpenDropdown(event)) {
+                                    _this.setState({ isMonthDropdownOpen: true });
+                                }
+                            }, 
+                            // @ts-ignore
+                            onKeyDown: function (event) {
+                                if (_this.canArrowsOpenDropdown(event)) {
+                                    // disables page scroll
+                                    event.preventDefault();
+                                }
+                                if (event.key === 'Tab') {
+                                    _this.setState({ isMonthDropdownOpen: false });
+                                }
+                            } }, monthYearSelectButtonProps, { "aria-label": "Month, ".concat(monthTitle) }, { children: [monthTitle, (0, jsx_runtime_1.jsx)(MonthYearSelectIconContainer, (0, tslib_1.__assign)({}, monthYearSelectIconContainerProps, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { title: "", overrides: { Svg: { props: { role: 'presentation' } } }, size: density === constants_1.DENSITY.high ? 8 : 16 }, void 0) }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(OverriddenPopover, (0, tslib_1.__assign)({ placement: "bottom", focusLock: true, isOpen: _this.state.isYearDropdownOpen, onClick: function () {
+                            _this.setState(function (prev) { return ({
+                                isYearDropdownOpen: !prev.isYearDropdownOpen,
+                            }); });
+                        }, onClickOutside: function () { return _this.setState({ isYearDropdownOpen: false }); }, onEsc: function () { return _this.setState({ isYearDropdownOpen: false }); }, content: function () { return ((0, jsx_runtime_1.jsx)(OverriddenStatefulMenu, (0, tslib_1.__assign)({ initialState: {
+                                highlightedIndex: initialYearIndex,
+                                isFocused: true,
+                            }, items: _this.yearItems, 
+                            // @ts-ignore
+                            onItemSelect: function (_a) {
+                                var item = _a.item, event = _a.event;
+                                event.preventDefault();
+                                var updatedDate = _this.dateHelpers.set(date, {
+                                    year: idToYearMonth(item.id),
+                                    month: month,
+                                });
+                                _this.props.onYearChange && _this.props.onYearChange({ date: updatedDate });
+                                _this.setState({ isYearDropdownOpen: false });
+                            } }, menuProps), void 0)); } }, popoverProps, { children: (0, jsx_runtime_1.jsxs)(MonthYearSelectButton, (0, tslib_1.__assign)({ "aria-live": "polite", type: "button", "$isFocusVisible": _this.state.isFocusVisible, "$density": density, 
+                            // @ts-ignore
+                            onKeyUp: function (event) {
+                                if (_this.canArrowsOpenDropdown(event)) {
+                                    _this.setState({ isYearDropdownOpen: true });
+                                }
+                            }, 
+                            // @ts-ignore
+                            onKeyDown: function (event) {
+                                if (_this.canArrowsOpenDropdown(event)) {
+                                    // disables page scroll
+                                    event.preventDefault();
+                                }
+                                if (event.key === 'Tab') {
+                                    _this.setState({ isYearDropdownOpen: false });
+                                }
+                            }, "aria-label": "Year, ".concat(yearTitle) }, monthYearSelectButtonProps, { children: [yearTitle, (0, jsx_runtime_1.jsx)(MonthYearSelectIconContainer, (0, tslib_1.__assign)({}, monthYearSelectIconContainerProps, { children: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { title: "", overrides: { Svg: { props: { role: 'presentation' } } }, size: density === constants_1.DENSITY.high ? 8 : 16 }, void 0) }), void 0)] }), void 0) }), void 0)] }, void 0));
+        };
+        // @ts-ignore
+        _this.dateHelpers = new date_helpers_1.default(props.adapter);
+        _this.monthItems = [];
+        _this.yearItems = [];
+        return _this;
+    }
+    CalendarHeader.prototype.componentDidMount = function () {
+        this.getYearItems();
+        this.getMonthItems();
+    };
+    CalendarHeader.prototype.componentDidUpdate = function (prevProps) {
+        var selectedMonthDidChange = this.dateHelpers.getMonth(this.props.date) !== this.dateHelpers.getMonth(prevProps.date);
+        var selectedYearDidChange = this.dateHelpers.getYear(this.props.date) !== this.dateHelpers.getYear(prevProps.date);
+        if (selectedMonthDidChange) {
+            // re-calculate yearItems
+            this.getYearItems();
+        }
+        if (selectedYearDidChange) {
+            // re-calculate monthItems
+            this.getMonthItems();
+        }
+    };
+    CalendarHeader.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, density = _a.density;
+        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.CalendarHeader, styled_components_1.StyledCalendarHeader), 2), CalendarHeaderContainer = _c[0], calendarHeaderProps = _c[1];
+        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.MonthHeader, styled_components_1.StyledMonthHeader), 2), MonthHeader = _d[0], monthHeaderProps = _d[1];
+        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.WeekdayHeader, styled_components_1.StyledWeekdayHeader), 2), WeekdayHeader = _e[0], weekdayHeaderProps = _e[1];
+        var startOfWeek = this.dateHelpers.getStartOfWeek(this.getDateProp(), this.props.locale);
+        return ((0, jsx_runtime_1.jsx)(locale_1.LocaleContext.Consumer, { children: function (locale) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(CalendarHeaderContainer, (0, tslib_1.__assign)({}, calendarHeaderProps, { "$density": _this.props.density, onFocus: (0, focusVisible_1.forkFocus)(calendarHeaderProps, _this.handleFocus), onBlur: (0, focusVisible_1.forkBlur)(calendarHeaderProps, _this.handleBlur) }, { children: [_this.renderPreviousMonthButton({ locale: locale }), _this.renderMonthYearDropdown(), _this.renderNextMonthButton({ locale: locale })] }), void 0), (0, jsx_runtime_1.jsx)(MonthHeader, (0, tslib_1.__assign)({ role: "presentation" }, monthHeaderProps, { children: constants_1.WEEKDAYS.map(function (offset) {
+                            var day = _this.dateHelpers.addDays(startOfWeek, offset);
+                            return ((0, jsx_runtime_1.jsx)(WeekdayHeader, (0, tslib_1.__assign)({}, weekdayHeaderProps, { "$density": density }, { children: (0, jsx_runtime_1.jsx)("abbr", (0, tslib_1.__assign)({ style: { textDecoration: 'none' }, title: _this.dateHelpers.getWeekdayInLocale(day, _this.props.locale) }, { children: _this.dateHelpers.getWeekdayMinInLocale(day, _this.props.locale) }), void 0) }), offset));
+                        }) }), void 0)] }, void 0)); } }, void 0));
+    };
+    CalendarHeader.defaultProps = {
+        adapter: date_fns_adapter_1.default,
+        // @ts-ignore
+        locale: null,
+        // @ts-ignore
+        maxDate: null,
+        // @ts-ignore
+        minDate: null,
+        onYearChange: function () { },
+        overrides: {},
+    };
+    return CalendarHeader;
+}(React.Component));
+exports.default = CalendarHeader;

package/baseui/datepicker/calendar.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { DateIOAdapter } from './utils/types';
+import DateHelpers from './utils/date-helpers';
+import type { CalendarProps, CalendarInternalState } from './types';
+export default class Calendar<T = Date> extends React.Component<CalendarProps<T>, CalendarInternalState<T>> {
+    static defaultProps: CalendarProps<unknown> & {
+        adapter: DateIOAdapter<Date>;
+    };
+    dateHelpers: DateHelpers<T>;
+    calendar: HTMLElement;
+    constructor(props: CalendarProps<T>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CalendarProps<T>): void;
+    isInView(date: T): boolean;
+    getSingleDate(value: T | undefined | null | Array<T | undefined | null>): T | undefined | null;
+    getDateInView: () => T;
+    handleMonthChange: (a: T) => void;
+    handleYearChange: (a: T) => void;
+    changeMonth: (a: {
+        date: T;
+    }) => unknown;
+    changeYear: (a: {
+        date: T;
+    }) => unknown;
+    renderCalendarHeader: (b: T, a: number) => React.ReactNode;
+    onKeyDown: (event: KeyboardEvent) => void;
+    handleArrowKey: (key: string) => void;
+    focusCalendar: () => void;
+    blurCalendar: () => void;
+    handleTabbing: (event: KeyboardEvent) => void;
+    onDayFocus: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    onDayMouseOver: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    onDayMouseLeave: (a: {
+        event: Event;
+        date: T;
+    }) => unknown;
+    /** Responsible for merging time values into date values. Note: the 'Day' component
+     * determines how the days themselves change when a new day is selected. */
+    handleDateChange: (a: {
+        readonly date: T | undefined | null | Array<T | undefined | null>;
+    }) => void;
+    handleTimeChange: (time: T, index: number) => void;
+    setHighlightedDate(date: T): void;
+    renderMonths: (translations: {
+        ariaRoleDescCalMonth: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    renderTimeSelect: (c: T | undefined | null, b: Function, a: string) => React.ReactNode;
+    renderQuickSelect: () => import("react/jsx-runtime").JSX.Element | null;
+    render(): import("react/jsx-runtime").JSX.Element;
+}