@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/baseui/datepicker/calendar.js

@@ -0,0 +1,534 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+/*
+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 locale_1 = require("../locale");
+var select_1 = require("../select");
+var calendar_header_1 = (0, tslib_1.__importDefault)(require("./calendar-header"));
+var month_1 = (0, tslib_1.__importDefault)(require("./month"));
+var timepicker_1 = (0, tslib_1.__importDefault)(require("../timepicker/timepicker"));
+var styled_components_1 = require("./styled-components");
+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 overrides_1 = require("../helpers/overrides");
+var constants_1 = require("./constants");
+var spacewebProvider_1 = require("../../spacewebProvider");
+var Calendar = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Calendar, _super);
+    function Calendar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getDateInView = function () {
+            var _a = _this.props, highlightedDate = _a.highlightedDate, value = _a.value;
+            // @ts-ignore
+            var minDate = _this.dateHelpers.getEffectiveMinDate(_this.props);
+            // @ts-ignore
+            var maxDate = _this.dateHelpers.getEffectiveMaxDate(_this.props);
+            var current = _this.dateHelpers.date();
+            var initialDate = _this.getSingleDate(value) || highlightedDate;
+            if (initialDate) {
+                return initialDate;
+            }
+            else {
+                if (minDate && _this.dateHelpers.isBefore(current, minDate)) {
+                    return minDate;
+                }
+                else if (maxDate && _this.dateHelpers.isAfter(current, maxDate)) {
+                    return maxDate;
+                }
+            }
+            return current;
+        };
+        _this.handleMonthChange = function (date) {
+            _this.setHighlightedDate(_this.dateHelpers.getStartOfMonth(date));
+            if (_this.props.onMonthChange) {
+                _this.props.onMonthChange({ date: date });
+            }
+        };
+        _this.handleYearChange = function (date) {
+            _this.setHighlightedDate(date);
+            if (_this.props.onYearChange) {
+                _this.props.onYearChange({ date: date });
+            }
+        };
+        _this.changeMonth = function (_a) {
+            var date = _a.date;
+            _this.setState({ date: date }, function () { return _this.handleMonthChange(_this.state.date); });
+        };
+        _this.changeYear = function (_a) {
+            var date = _a.date;
+            _this.setState({ date: date }, function () { return _this.handleYearChange(_this.state.date); });
+        };
+        _this.renderCalendarHeader = function (date, order) {
+            if (date === void 0) { date = _this.state.date; }
+            return ((0, react_1.createElement)(calendar_header_1.default, (0, tslib_1.__assign)({}, _this.props, { key: "month-header-".concat(order), date: date, order: order, onMonthChange: _this.changeMonth, onYearChange: _this.changeYear })));
+        };
+        _this.onKeyDown = function (event) {
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                case 'Home':
+                case 'End':
+                case 'PageUp':
+                case 'PageDown':
+                    _this.handleArrowKey(event.key);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        };
+        _this.handleArrowKey = function (key) {
+            var oldDate = _this.state.highlightedDate;
+            var highlightedDate = oldDate;
+            var currentDate = _this.dateHelpers.date();
+            switch (key) {
+                case 'ArrowLeft':
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate = _this.dateHelpers.subDays(highlightedDate ? highlightedDate : currentDate, 1);
+                    break;
+                case 'ArrowRight':
+                    highlightedDate = _this.dateHelpers.addDays(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate, 1);
+                    break;
+                case 'ArrowUp':
+                    highlightedDate = _this.dateHelpers.subWeeks(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate, 1);
+                    break;
+                case 'ArrowDown':
+                    highlightedDate = _this.dateHelpers.addWeeks(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate, 1);
+                    break;
+                case 'Home':
+                    highlightedDate = _this.dateHelpers.getStartOfWeek(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate);
+                    break;
+                case 'End':
+                    highlightedDate = _this.dateHelpers.getEndOfWeek(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate);
+                    break;
+                case 'PageUp':
+                    highlightedDate = _this.dateHelpers.subMonths(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate, 1);
+                    break;
+                case 'PageDown':
+                    highlightedDate = _this.dateHelpers.addMonths(
+                    // adding `new Date()` as the last option to satisfy Flow
+                    highlightedDate ? highlightedDate : currentDate, 1);
+                    break;
+            }
+            _this.setState({ highlightedDate: highlightedDate, date: highlightedDate });
+        };
+        _this.focusCalendar = function () {
+            if (!_this.state.focused) {
+                _this.setState({ focused: true });
+            }
+        };
+        _this.blurCalendar = function () {
+            if (!spacewebProvider_1.isServer) {
+                var activeElm = document.activeElement;
+                if (_this.calendar && !_this.calendar.contains(activeElm)) {
+                    _this.setState({ focused: false });
+                }
+            }
+        };
+        _this.handleTabbing = function (event) {
+            if (!spacewebProvider_1.isServer) {
+                if (event.keyCode === 9) {
+                    var activeElm = document.activeElement;
+                    // need to look for any tabindex >= 0 and ideally for not disabled
+                    // focusable by default elements like input, button, etc.
+                    var focusable = _this.state.rootElement
+                        ? _this.state.rootElement.querySelectorAll('[tabindex="0"]')
+                        : null;
+                    var length_1 = focusable ? focusable.length : 0;
+                    if (event.shiftKey) {
+                        if (focusable && activeElm === focusable[0]) {
+                            event.preventDefault();
+                            focusable[length_1 - 1].focus();
+                        }
+                    }
+                    else {
+                        if (focusable && activeElm === focusable[length_1 - 1]) {
+                            event.preventDefault();
+                            focusable[0].focus();
+                        }
+                    }
+                }
+            }
+        };
+        _this.onDayFocus = function (data) {
+            var date = data.date;
+            _this.setState({ highlightedDate: date });
+            _this.focusCalendar();
+            _this.props.onDayFocus && _this.props.onDayFocus(data);
+        };
+        _this.onDayMouseOver = function (data) {
+            var date = data.date;
+            _this.setState({ highlightedDate: date });
+            _this.props.onDayMouseOver && _this.props.onDayMouseOver(data);
+        };
+        _this.onDayMouseLeave = function (data) {
+            var date = data.date;
+            var value = _this.props.value;
+            var selected = _this.getSingleDate(value);
+            _this.setState({ highlightedDate: selected || date });
+            _this.props.onDayMouseLeave && _this.props.onDayMouseLeave(data);
+        };
+        /** Responsible for merging time values into date values. Note: the 'Day' component
+         * determines how the days themselves change when a new day is selected. */
+        _this.handleDateChange = function (data) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _a = _this.props.onChange, onChange = _a === void 0 ? function (params) { } : _a;
+            var updatedDate = data.date;
+            // Apply the currently selected time values (saved in state) to the updated date
+            if (Array.isArray(data.date)) {
+                // We'll need to update the date in time values of internal state
+                var newTimeState = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(_this.state.time), false);
+                var start = data.date[0] ? _this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
+                var end = data.date[1] ? _this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
+                newTimeState[0] = start;
+                if (end) {
+                    updatedDate = [start, end];
+                    newTimeState[1] = end;
+                }
+                else {
+                    updatedDate = [start];
+                }
+                // Update the date in time values of internal state
+                _this.setState({ time: newTimeState });
+            }
+            else if (!Array.isArray(_this.props.value) && data.date) {
+                var newTimeState = _this.dateHelpers.applyDateToTime(_this.state.time[0], data.date);
+                updatedDate = newTimeState;
+                // Update the date in time values of internal state
+                _this.setState({ time: [newTimeState] });
+            }
+            onChange({ date: updatedDate });
+        };
+        _this.handleTimeChange = function (time, index) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _a = _this.props.onChange, onChange = _a === void 0 ? function (params) { } : _a;
+            // Save/update the time value in internal state
+            var newTimeState = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(_this.state.time), false);
+            newTimeState[index] = _this.dateHelpers.applyTimeToDate(newTimeState[index], time);
+            _this.setState({ time: newTimeState });
+            // Time change calls calendar's onChange handler
+            // with the date value set to the date with updated time
+            if (Array.isArray(_this.props.value)) {
+                var dates = _this.props.value.map(function (date, i) {
+                    if (date && index === i) {
+                        return _this.dateHelpers.applyTimeToDate(date, time);
+                    }
+                    return date;
+                });
+                onChange({ date: [dates[0], dates[1]] });
+            }
+            else {
+                var date = _this.dateHelpers.applyTimeToDate(_this.props.value, time);
+                onChange({ date: date });
+            }
+        };
+        _this.renderMonths = function (translations) {
+            var _a = _this.props, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, orientation = _a.orientation;
+            var monthList = [];
+            var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.CalendarContainer, styled_components_1.StyledCalendarContainer), 2), CalendarContainer = _c[0], calendarContainerProps = _c[1];
+            var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.MonthContainer, styled_components_1.StyledMonthContainer), 2), MonthContainer = _d[0], monthContainerProps = _d[1];
+            for (var i = 0; i < (_this.props.monthsShown || 1); ++i) {
+                var monthSubComponents = [];
+                var monthDate = _this.dateHelpers.addMonths(_this.state.date, i);
+                var monthKey = "month-".concat(i);
+                // @ts-ignore
+                monthSubComponents.push(_this.renderCalendarHeader(monthDate, i));
+                monthSubComponents.push(
+                // @ts-ignore
+                (0, jsx_runtime_1.jsx)(CalendarContainer, (0, tslib_1.__assign)({ 
+                    // @ts-ignore
+                    ref: function (calendar) {
+                        _this.calendar = calendar;
+                    }, role: "grid", "aria-roledescription": translations.ariaRoleDescCalMonth, "aria-multiselectable": _this.props.range || null, onKeyDown: _this.onKeyDown }, calendarContainerProps, { "$density": _this.props.density }, { children: (0, jsx_runtime_1.jsx)(month_1.default, { adapter: _this.props.adapter, date: monthDate, dateLabel: _this.props.dateLabel, density: _this.props.density, excludeDates: _this.props.excludeDates, filterDate: _this.props.filterDate, highlightedDate: _this.state.highlightedDate, includeDates: _this.props.includeDates, focusedCalendar: _this.state.focused, range: _this.props.range, locale: _this.props.locale, maxDate: _this.props.maxDate, minDate: _this.props.minDate, month: _this.dateHelpers.getMonth(_this.state.date), onDayBlur: _this.blurCalendar, onDayFocus: _this.onDayFocus, onDayClick: _this.props.onDayClick, onDayMouseOver: _this.onDayMouseOver, onDayMouseLeave: _this.onDayMouseLeave, onChange: _this.handleDateChange, overrides: overrides, value: _this.props.value, peekNextMonth: _this.props.peekNextMonth, fixedHeight: _this.props.fixedHeight, hasLockedBehavior: !!_this.props.hasLockedBehavior, selectedInput: _this.props.selectedInput }, void 0) }), monthKey));
+                // @ts-ignore
+                monthList.push((0, jsx_runtime_1.jsx)("div", { children: monthSubComponents }, "month-component-".concat(i)));
+            }
+            return ((0, jsx_runtime_1.jsx)(MonthContainer, (0, tslib_1.__assign)({ "$orientation": orientation }, monthContainerProps, { children: monthList }), void 0));
+        };
+        _this.renderTimeSelect = function (value, onChange, label) {
+            var _a = _this.props.overrides, overrides = _a === void 0 ? {} : _a;
+            var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.TimeSelectContainer, styled_components_1.StyledSelectorContainer), 2), TimeSelectContainer = _b[0], timeSelectContainerProps = _b[1];
+            var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.TimeSelectFormControl, function () { return null; }), 2), TimeSelectFormControl = _c[0], timeSelectFormControlProps = _c[1];
+            var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.TimeSelect, timepicker_1.default), 2), TimeSelect = _d[0], timeSelectProps = _d[1];
+            return ((0, jsx_runtime_1.jsx)(TimeSelectContainer, (0, tslib_1.__assign)({}, timeSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(TimeSelectFormControl, (0, tslib_1.__assign)({ label: label }, timeSelectFormControlProps, { children: (0, jsx_runtime_1.jsx)(TimeSelect, (0, tslib_1.__assign)({ value: value ? _this.dateHelpers.date(value) : value, onChange: onChange, nullable: true }, timeSelectProps), void 0) }), void 0) }), void 0));
+        };
+        _this.renderQuickSelect = function () {
+            var _a = _this.props.overrides, overrides = _a === void 0 ? {} : _a;
+            var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.QuickSelectContainer, styled_components_1.StyledSelectorContainer), 2), QuickSelectContainer = _b[0], quickSelectContainerProps = _b[1];
+            var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.QuickSelectFormControl, function () { return null; }), 2), QuickSelectFormControl = _c[0], quickSelectFormControlProps = _c[1];
+            var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(
+            //
+            overrides.QuickSelect, select_1.Select), 2), QuickSelect = _d[0], _e = _d[1], quickSelectOverrides = _e.overrides, restQuickSelectProps = (0, tslib_1.__rest)(_e, ["overrides"]);
+            if (!_this.props.quickSelect) {
+                return null;
+            }
+            var NOW = _this.dateHelpers.set(_this.dateHelpers.date(), {
+                hours: 12,
+                minutes: 0,
+                seconds: 0,
+            });
+            return ((0, jsx_runtime_1.jsx)(locale_1.LocaleContext.Consumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(QuickSelectContainer, (0, tslib_1.__assign)({}, quickSelectContainerProps, { children: (0, jsx_runtime_1.jsx)(QuickSelectFormControl, (0, tslib_1.__assign)({ label: locale.datepicker.quickSelectLabel }, quickSelectFormControlProps, { children: (0, jsx_runtime_1.jsx)(QuickSelect, (0, tslib_1.__assign)({ "aria-label": locale.datepicker.quickSelectAriaLabel, labelKey: "id", 
+                            // @ts-ignore
+                            onChange: function (params) {
+                                if (!params.option) {
+                                    _this.setState({ quickSelectId: null });
+                                    _this.props.onChange && _this.props.onChange({ date: [] });
+                                }
+                                else {
+                                    _this.setState({
+                                        quickSelectId: params.option.id,
+                                    });
+                                    if (_this.props.onChange) {
+                                        if (_this.props.range) {
+                                            _this.props.onChange({
+                                                date: [params.option.beginDate, params.option.endDate || NOW],
+                                            });
+                                        }
+                                        else {
+                                            _this.props.onChange({
+                                                date: params.option.beginDate,
+                                            });
+                                        }
+                                    }
+                                }
+                                if (_this.props.onQuickSelectChange) {
+                                    _this.props.onQuickSelectChange(params.option);
+                                }
+                            }, options: _this.props.quickSelectOptions || [
+                                {
+                                    id: locale.datepicker.pastWeek,
+                                    beginDate: _this.dateHelpers.subWeeks(NOW, 1),
+                                },
+                                {
+                                    id: locale.datepicker.pastMonth,
+                                    beginDate: _this.dateHelpers.subMonths(NOW, 1),
+                                },
+                                {
+                                    id: locale.datepicker.pastThreeMonths,
+                                    beginDate: _this.dateHelpers.subMonths(NOW, 3),
+                                },
+                                {
+                                    id: locale.datepicker.pastSixMonths,
+                                    beginDate: _this.dateHelpers.subMonths(NOW, 6),
+                                },
+                                {
+                                    id: locale.datepicker.pastYear,
+                                    beginDate: _this.dateHelpers.subYears(NOW, 1),
+                                },
+                                {
+                                    id: locale.datepicker.pastTwoYears,
+                                    beginDate: _this.dateHelpers.subYears(NOW, 2),
+                                },
+                            ], placeholder: locale.datepicker.quickSelectPlaceholder, value: _this.state.quickSelectId && [{ id: _this.state.quickSelectId }], overrides: (0, overrides_1.mergeOverrides)({
+                                Dropdown: {
+                                    style: {
+                                        textAlign: 'start',
+                                    },
+                                },
+                            }, quickSelectOverrides) }, restQuickSelectProps), void 0) }), void 0) }), void 0)); } }, void 0));
+        };
+        var _a = _this.props, highlightedDate = _a.highlightedDate, value = _a.value, adapter = _a.adapter;
+        // @ts-ignore
+        _this.dateHelpers = new date_helpers_1.default(adapter);
+        var dateInView = _this.getDateInView();
+        // @ts-ignore
+        var time = [];
+        if (Array.isArray(value)) {
+            // @ts-ignore
+            time = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(value), false);
+        }
+        else if (value) {
+            // @ts-ignore
+            time = [value];
+        }
+        _this.state = {
+            highlightedDate: _this.getSingleDate(value) ||
+                (highlightedDate && _this.dateHelpers.isSameMonth(dateInView, highlightedDate)
+                    ? highlightedDate
+                    : _this.dateHelpers.date()),
+            focused: false,
+            date: dateInView,
+            quickSelectId: null,
+            rootElement: null,
+            // @ts-ignore
+            time: time,
+        };
+        return _this;
+    }
+    Calendar.prototype.componentDidMount = function () {
+        if (this.props.autoFocusCalendar) {
+            this.focusCalendar();
+        }
+    };
+    Calendar.prototype.componentDidUpdate = function (prevProps) {
+        if (this.props.highlightedDate &&
+            !this.dateHelpers.isSameDay(this.props.highlightedDate, prevProps.highlightedDate)) {
+            this.setState({
+                date: this.props.highlightedDate,
+            });
+        }
+        if (this.props.autoFocusCalendar && this.props.autoFocusCalendar !== prevProps.autoFocusCalendar) {
+            this.focusCalendar();
+        }
+        if (prevProps.value !== this.props.value) {
+            var nextDate = this.getDateInView();
+            if (!this.isInView(nextDate)) {
+                this.setState({
+                    date: nextDate,
+                });
+            }
+        }
+    };
+    Calendar.prototype.isInView = function (date) {
+        // we calculate the month delta between the date arg and the date in the state.
+        var currentDate = this.state.date;
+        // First we get the year delta
+        var yearDelta = this.dateHelpers.getYear(date) - this.dateHelpers.getYear(currentDate);
+        // then we convert it to months. Then we simply add the date-without-year month delta back in.
+        var monthDelta = yearDelta * 12 + this.dateHelpers.getMonth(date) - this.dateHelpers.getMonth(currentDate);
+        // we just check that the delta is between the range given by "this month" (i.e. 0) and "the last month" (i.e. monthsShown)
+        return monthDelta >= 0 && monthDelta < (this.props.monthsShown || 1);
+    };
+    Calendar.prototype.getSingleDate = function (value) {
+        // need to check this.props.range but flow would complain
+        // at the return value in the else clause
+        if (Array.isArray(value)) {
+            return value[0] || null;
+        }
+        return value;
+    };
+    Calendar.prototype.setHighlightedDate = function (date) {
+        var value = this.props.value;
+        var selected = this.getSingleDate(value);
+        var nextState;
+        if (selected && this.dateHelpers.isSameMonth(selected, date) && this.dateHelpers.isSameYear(selected, date)) {
+            nextState = { highlightedDate: selected };
+        }
+        else {
+            nextState = {
+                highlightedDate: date,
+            };
+        }
+        this.setState(nextState);
+    };
+    // renderActionBar = () => {
+    //   const { overrides = {}, primaryButton, secondaryButton } = this.props;
+    //   const [ButtonDockComponent, buttonDockProps] = getOverrides(overrides.ButtonDock, ButtonDock);
+    //   const [PrimaryButtonComponent, primaryButtonProps] = getOverrides(overrides.PrimaryButton, Button);
+    //   const [SecondaryButtonComponent, secondaryButtonProps] = getOverrides(overrides.SecondaryButton, Button);
+    //
+    //   const primaryButtonComponent =
+    //     primaryButton != null ? (
+    //       <PrimaryButtonComponent onClick={() => primaryButton.onClick()} {...primaryButtonProps}>
+    //         {primaryButton.label}
+    //       </PrimaryButtonComponent>
+    //     ) : null;
+    //   const secondaryButtonComponent =
+    //     secondaryButton != null ? (
+    //       <SecondaryButtonComponent
+    //         onClick={() => secondaryButton.onClick()}
+    //         kind={KIND.tertiary}
+    //         {...secondaryButtonProps}
+    //       >
+    //         {secondaryButton.label}
+    //       </SecondaryButtonComponent>
+    //     ) : null;
+    //
+    //   if (primaryButtonComponent || secondaryButtonComponent) {
+    //     return (
+    //       <ButtonDockComponent
+    //         primaryAction={primaryButtonComponent}
+    //         dismissiveAction={secondaryButtonComponent}
+    //         overrides={mergeOverrides(
+    //           {
+    //             ActionSubContainer: {
+    //               style: {
+    //                 flexDirection: 'row-reverse',
+    //               },
+    //             },
+    //           },
+    //           buttonDockProps.overrides
+    //         )}
+    //         {...buttonDockProps}
+    //       />
+    //     );
+    //   }
+    //
+    //   return null;
+    // };
+    Calendar.prototype.render = function () {
+        var _this = this;
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _b[0], rootProps = _b[1];
+        // @ts-ignore
+        var _c = (0, tslib_1.__read)([].concat(this.props.value), 2), startDate = _c[0], endDate = _c[1];
+        return ((0, jsx_runtime_1.jsx)(locale_1.LocaleContext.Consumer, { children: function (locale) { return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "$density": _this.props.density, "data-baseweb": "calendar", role: "application", "aria-roledescription": "date picker", 
+                // @ts-ignore
+                ref: function (root) {
+                    if (root && root instanceof HTMLElement && !_this.state.rootElement) {
+                        _this.setState({
+                            rootElement: root,
+                        });
+                    }
+                }, "aria-label": locale.datepicker.ariaLabelCalendar, onKeyDown: _this.props.trapTabbing ? _this.handleTabbing : null }, rootProps, { children: [_this.renderMonths({
+                        ariaRoleDescCalMonth: locale.datepicker.ariaRoleDescriptionCalendarMonth,
+                    }), _this.props.timeSelectStart &&
+                        _this.renderTimeSelect(startDate, 
+                        // @ts-ignore
+                        function (time) { return _this.handleTimeChange(time, 0); }, locale.datepicker.timeSelectStartLabel), _this.props.timeSelectEnd &&
+                        _this.props.range &&
+                        _this.renderTimeSelect(endDate, 
+                        // @ts-ignore
+                        function (time) { return _this.handleTimeChange(time, 1); }, locale.datepicker.timeSelectEndLabel), _this.renderQuickSelect()] }), void 0)); } }, void 0));
+    };
+    Calendar.defaultProps = {
+        autoFocusCalendar: false,
+        dateLabel: null,
+        density: constants_1.DENSITY.default,
+        excludeDates: null,
+        filterDate: null,
+        highlightedDate: null,
+        includeDates: null,
+        range: false,
+        locale: null,
+        maxDate: null,
+        minDate: null,
+        onDayClick: function () { },
+        onDayFocus: function () { },
+        onDayMouseOver: function () { },
+        onDayMouseLeave: function () { },
+        onMonthChange: function () { },
+        onYearChange: function () { },
+        onChange: function () { },
+        orientation: constants_1.ORIENTATION.horizontal,
+        overrides: {},
+        peekNextMonth: false,
+        // @ts-ignore
+        adapter: date_fns_adapter_1.default,
+        value: null,
+        trapTabbing: false,
+    };
+    return Calendar;
+}(React.Component));
+exports.default = Calendar;

package/baseui/datepicker/constants.d.ts

@@ -0,0 +1,30 @@
+export declare const DISPLAY_FORMAT = "L";
+export declare const ISO_FORMAT = "YYYY-MM-DD";
+export declare const ISO_MONTH_FORMAT = "YYYY-MM";
+export declare const ORIENTATION: Readonly<{
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+}>;
+export declare const STATE_CHANGE_TYPE: Readonly<{
+    readonly change: "change";
+    readonly moveUp: "moveUp";
+    readonly moveDown: "moveDown";
+    readonly moveLeft: "moveLeft";
+    readonly moveRight: "moveRight";
+    readonly mouseOver: "mouseOver";
+    readonly mouseLeave: "mouseLeave";
+}>;
+export declare const WEEKDAYS: number[];
+export declare const DEFAULT_MONTHS: number[];
+export declare const DENSITY: {
+    readonly high: "high";
+    readonly default: "default";
+};
+export declare const INPUT_ROLE: {
+    readonly startDate: "startDate";
+    readonly endDate: "endDate";
+};
+export declare const RANGED_CALENDAR_BEHAVIOR: {
+    readonly default: "default";
+    readonly locked: "locked";
+};

package/baseui/datepicker/constants.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RANGED_CALENDAR_BEHAVIOR = exports.INPUT_ROLE = exports.DENSITY = exports.DEFAULT_MONTHS = exports.WEEKDAYS = exports.STATE_CHANGE_TYPE = exports.ORIENTATION = exports.ISO_MONTH_FORMAT = exports.ISO_FORMAT = exports.DISPLAY_FORMAT = void 0;
+/*
+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.
+*/
+exports.DISPLAY_FORMAT = 'L';
+exports.ISO_FORMAT = 'YYYY-MM-DD';
+exports.ISO_MONTH_FORMAT = 'YYYY-MM';
+exports.ORIENTATION = Object.freeze({
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+});
+exports.STATE_CHANGE_TYPE = Object.freeze({
+    change: 'change',
+    moveUp: 'moveUp',
+    moveDown: 'moveDown',
+    moveLeft: 'moveLeft',
+    moveRight: 'moveRight',
+    mouseOver: 'mouseOver',
+    mouseLeave: 'mouseLeave',
+});
+exports.WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+exports.DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+exports.DENSITY = {
+    high: 'high',
+    default: 'default',
+};
+exports.INPUT_ROLE = {
+    startDate: 'startDate',
+    endDate: 'endDate',
+};
+exports.RANGED_CALENDAR_BEHAVIOR = {
+    default: 'default',
+    locked: 'locked',
+};