@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/baseui/datepicker/calendar.js

@@ -1,4 +1,4 @@
-import { __assign, __extends, __read, __rest, __spreadArray } from "tslib";
+import { __assign, __extends, __read, __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 /*
@@ -8,20 +8,18 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { LocaleContext } from '../locale';
-import { Select } from '../select';
+import _noop from 'lodash/noop';
 import CalendarHeader from './calendar-header';
 import Month from './month';
-import TimePicker from '../timepicker/timepicker';
 import { StyledCalendarContainer, StyledMonthContainer, StyledRoot, StyledSelectorContainer, } from './styled-components';
 import dateFnsAdapter from './utils/date-fns-adapter';
 import DateHelpers from './utils/date-helpers';
-import { getOverrides, mergeOverrides } from '../helpers/overrides';
+import { getOverrides } from '../../overrides';
 import { DENSITY, ORIENTATION } from './constants';
-import { isServer } from '../../spacewebProvider';
-var Calendar = /** @class */ (function (_super) {
-    __extends(Calendar, _super);
-    function Calendar(props) {
+import { isServer, useDocument } from '../../spacewebProvider';
+var BaseCalendar = /** @class */ (function (_super) {
+    __extends(BaseCalendar, _super);
+    function BaseCalendar(props) {
         var _this = _super.call(this, props) || this;
         _this.getDateInView = function () {
             var _a = _this.props, highlightedDate = _a.highlightedDate, value = _a.value;
@@ -34,13 +32,11 @@ var Calendar = /** @class */ (function (_super) {
             if (initialDate) {
                 return initialDate;
             }
-            else {
-                if (minDate && _this.dateHelpers.isBefore(current, minDate)) {
-                    return minDate;
-                }
-                else if (maxDate && _this.dateHelpers.isAfter(current, maxDate)) {
-                    return maxDate;
-                }
+            if (minDate && _this.dateHelpers.isBefore(current, minDate)) {
+                return minDate;
+            }
+            if (maxDate && _this.dateHelpers.isAfter(current, maxDate)) {
+                return maxDate;
             }
             return current;
         };
@@ -82,6 +78,8 @@ var Calendar = /** @class */ (function (_super) {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                default:
+                    break;
             }
         };
         _this.handleArrowKey = function (key) {
@@ -91,42 +89,44 @@ var Calendar = /** @class */ (function (_super) {
             switch (key) {
                 case 'ArrowLeft':
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate = _this.dateHelpers.subDays(highlightedDate ? highlightedDate : currentDate, 1);
+                    highlightedDate = _this.dateHelpers.subDays(highlightedDate || currentDate, 1);
                     break;
                 case 'ArrowRight':
                     highlightedDate = _this.dateHelpers.addDays(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate, 1);
+                    highlightedDate || currentDate, 1);
                     break;
                 case 'ArrowUp':
                     highlightedDate = _this.dateHelpers.subWeeks(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate, 1);
+                    highlightedDate || currentDate, 1);
                     break;
                 case 'ArrowDown':
                     highlightedDate = _this.dateHelpers.addWeeks(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate, 1);
+                    highlightedDate || currentDate, 1);
                     break;
                 case 'Home':
                     highlightedDate = _this.dateHelpers.getStartOfWeek(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate);
+                    highlightedDate || currentDate);
                     break;
                 case 'End':
                     highlightedDate = _this.dateHelpers.getEndOfWeek(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate);
+                    highlightedDate || currentDate);
                     break;
                 case 'PageUp':
                     highlightedDate = _this.dateHelpers.subMonths(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate, 1);
+                    highlightedDate || currentDate, 1);
                     break;
                 case 'PageDown':
                     highlightedDate = _this.dateHelpers.addMonths(
                     // adding `new Date()` as the last option to satisfy Flow
-                    highlightedDate ? highlightedDate : currentDate, 1);
+                    highlightedDate || currentDate, 1);
+                    break;
+                default:
                     break;
             }
             _this.setState({ highlightedDate: highlightedDate, date: highlightedDate });
@@ -137,17 +137,19 @@ var Calendar = /** @class */ (function (_super) {
             }
         };
         _this.blurCalendar = function () {
+            var _a, _b;
             if (!isServer) {
-                var activeElm = document.activeElement;
+                var activeElm = (_b = (_a = _this.props.document) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : null;
                 if (_this.calendar && !_this.calendar.contains(activeElm)) {
                     _this.setState({ focused: false });
                 }
             }
         };
         _this.handleTabbing = function (event) {
+            var _a, _b;
             if (!isServer) {
                 if (event.keyCode === 9) {
-                    var activeElm = document.activeElement;
+                    var activeElm = (_b = (_a = _this.props.document) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : null;
                     // 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
@@ -160,11 +162,9 @@ var Calendar = /** @class */ (function (_super) {
                             focusable[length_1 - 1].focus();
                         }
                     }
-                    else {
-                        if (focusable && activeElm === focusable[length_1 - 1]) {
-                            event.preventDefault();
-                            focusable[0].focus();
-                        }
+                    else if (focusable && activeElm === focusable[length_1 - 1]) {
+                        event.preventDefault();
+                        focusable[0].focus();
                     }
                 }
             }
@@ -190,12 +190,12 @@ var Calendar = /** @class */ (function (_super) {
         /** 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 _a = _this.props.onChange, onChange = _a === void 0 ? _noop : _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
+                // eslint-disable-next-line react/no-access-state-in-setstate -- baseui migration
                 var newTimeState = __spreadArray([], __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;
@@ -219,9 +219,9 @@ var Calendar = /** @class */ (function (_super) {
             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;
+            var _a = _this.props.onChange, onChange = _a === void 0 ? _noop : _a;
             // Save/update the time value in internal state
+            // eslint-disable-next-line react/no-access-state-in-setstate -- baseui migration
             var newTimeState = __spreadArray([], __read(_this.state.time), false);
             newTimeState[index] = _this.dateHelpers.applyTimeToDate(newTimeState[index], time);
             _this.setState({ time: newTimeState });
@@ -241,12 +241,12 @@ var Calendar = /** @class */ (function (_super) {
                 onChange({ date: date });
             }
         };
-        _this.renderMonths = function (translations) {
+        _this.renderMonths = function () {
             var _a = _this.props, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, orientation = _a.orientation;
             var monthList = [];
             var _c = __read(getOverrides(overrides.CalendarContainer, StyledCalendarContainer), 2), CalendarContainer = _c[0], calendarContainerProps = _c[1];
             var _d = __read(getOverrides(overrides.MonthContainer, StyledMonthContainer), 2), MonthContainer = _d[0], monthContainerProps = _d[1];
-            for (var i = 0; i < (_this.props.monthsShown || 1); ++i) {
+            for (var i = 0; i < (_this.props.monthsShown || 1); i += 1) {
                 var monthSubComponents = [];
                 var monthDate = _this.dateHelpers.addMonths(_this.state.date, i);
                 var monthKey = "month-".concat(i);
@@ -258,93 +258,17 @@ var Calendar = /** @class */ (function (_super) {
                     // @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: _jsx(Month, { 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));
+                    }, role: "grid", "aria-multiselectable": _this.props.range || null, onKeyDown: _this.onKeyDown }, calendarContainerProps, { "$density": _this.props.density }, { children: _jsx(Month, { adapter: _this.props.adapter, date: monthDate, dateLabel: _this.props.dateLabel, density: _this.props.density, excludeDates: _this.props.excludeDates, filterDate: _this.props.filterDate, getTimeRangesForDate: _this.props.getTimeRangesForDate, 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 }) }), monthKey));
+                monthList.push(
                 // @ts-ignore
-                monthList.push(_jsx("div", { children: monthSubComponents }, "month-component-".concat(i)));
+                _jsx("div", __assign({ className: "grow" }, { children: monthSubComponents }), "month-component-".concat(i)));
             }
-            return (_jsx(MonthContainer, __assign({ "$orientation": orientation }, monthContainerProps, { children: monthList }), void 0));
+            return (_jsx(MonthContainer, __assign({ "$orientation": orientation }, monthContainerProps, { children: monthList })));
         };
-        _this.renderTimeSelect = function (value, onChange, label) {
+        _this.renderTimeSelect = function () {
             var _a = _this.props.overrides, overrides = _a === void 0 ? {} : _a;
             var _b = __read(getOverrides(overrides.TimeSelectContainer, StyledSelectorContainer), 2), TimeSelectContainer = _b[0], timeSelectContainerProps = _b[1];
-            var _c = __read(getOverrides(overrides.TimeSelectFormControl, function () { return null; }), 2), TimeSelectFormControl = _c[0], timeSelectFormControlProps = _c[1];
-            var _d = __read(getOverrides(overrides.TimeSelect, TimePicker), 2), TimeSelect = _d[0], timeSelectProps = _d[1];
-            return (_jsx(TimeSelectContainer, __assign({}, timeSelectContainerProps, { children: _jsx(TimeSelectFormControl, __assign({ label: label }, timeSelectFormControlProps, { children: _jsx(TimeSelect, __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 = __read(getOverrides(overrides.QuickSelectContainer, StyledSelectorContainer), 2), QuickSelectContainer = _b[0], quickSelectContainerProps = _b[1];
-            var _c = __read(getOverrides(overrides.QuickSelectFormControl, function () { return null; }), 2), QuickSelectFormControl = _c[0], quickSelectFormControlProps = _c[1];
-            var _d = __read(getOverrides(
-            //
-            overrides.QuickSelect, Select), 2), QuickSelect = _d[0], _e = _d[1], quickSelectOverrides = _e.overrides, restQuickSelectProps = __rest(_e, ["overrides"]);
-            if (!_this.props.quickSelect) {
-                return null;
-            }
-            var NOW = _this.dateHelpers.set(_this.dateHelpers.date(), {
-                hours: 12,
-                minutes: 0,
-                seconds: 0,
-            });
-            return (_jsx(LocaleContext.Consumer, { children: function (locale) { return (_jsx(QuickSelectContainer, __assign({}, quickSelectContainerProps, { children: _jsx(QuickSelectFormControl, __assign({ label: locale.datepicker.quickSelectLabel }, quickSelectFormControlProps, { children: _jsx(QuickSelect, __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: mergeOverrides({
-                                Dropdown: {
-                                    style: {
-                                        textAlign: 'start',
-                                    },
-                                },
-                            }, quickSelectOverrides) }, restQuickSelectProps), void 0) }), void 0) }), void 0)); } }, void 0));
+            return _jsx(TimeSelectContainer, __assign({}, timeSelectContainerProps));
         };
         var _a = _this.props, highlightedDate = _a.highlightedDate, value = _a.value, adapter = _a.adapter;
         // @ts-ignore
@@ -367,21 +291,21 @@ var Calendar = /** @class */ (function (_super) {
                     : _this.dateHelpers.date()),
             focused: false,
             date: dateInView,
-            quickSelectId: null,
             rootElement: null,
             // @ts-ignore
             time: time,
         };
         return _this;
     }
-    Calendar.prototype.componentDidMount = function () {
+    BaseCalendar.prototype.componentDidMount = function () {
         if (this.props.autoFocusCalendar) {
             this.focusCalendar();
         }
     };
-    Calendar.prototype.componentDidUpdate = function (prevProps) {
+    BaseCalendar.prototype.componentDidUpdate = function (prevProps) {
         if (this.props.highlightedDate &&
             !this.dateHelpers.isSameDay(this.props.highlightedDate, prevProps.highlightedDate)) {
+            // eslint-disable-next-line react/no-did-update-set-state -- baseui migration
             this.setState({
                 date: this.props.highlightedDate,
             });
@@ -392,13 +316,14 @@ var Calendar = /** @class */ (function (_super) {
         if (prevProps.value !== this.props.value) {
             var nextDate = this.getDateInView();
             if (!this.isInView(nextDate)) {
+                // eslint-disable-next-line react/no-did-update-set-state -- baseui migration
                 this.setState({
                     date: nextDate,
                 });
             }
         }
     };
-    Calendar.prototype.isInView = function (date) {
+    BaseCalendar.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
@@ -408,7 +333,8 @@ var Calendar = /** @class */ (function (_super) {
         // 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) {
+    // eslint-disable-next-line class-methods-use-this -- baseui migration
+    BaseCalendar.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)) {
@@ -416,7 +342,7 @@ var Calendar = /** @class */ (function (_super) {
         }
         return value;
     };
-    Calendar.prototype.setHighlightedDate = function (date) {
+    BaseCalendar.prototype.setHighlightedDate = function (date) {
         var value = this.props.value;
         var selected = this.getSingleDate(value);
         var nextState;
@@ -430,77 +356,17 @@ var Calendar = /** @class */ (function (_super) {
         }
         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 () {
+    BaseCalendar.prototype.render = function () {
         var _this = this;
         var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
         var _b = __read(getOverrides(overrides.Root, StyledRoot), 2), Root = _b[0], rootProps = _b[1];
-        // @ts-ignore
-        var _c = __read([].concat(this.props.value), 2), startDate = _c[0], endDate = _c[1];
-        return (_jsx(LocaleContext.Consumer, { children: function (locale) { return (_jsxs(Root, __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));
+        return (_jsxs(Root, __assign({ "$density": this.props.density, "data-baseweb": "calendar", role: "application", "aria-roledescription": "date picker", ref: function (root) {
+                if (root && root instanceof HTMLElement && !_this.state.rootElement) {
+                    _this.setState({ rootElement: root });
+                }
+            }, onKeyDown: this.props.trapTabbing ? this.handleTabbing : null }, rootProps, { children: [this.renderMonths(), this.props.timeSelectStart && this.renderTimeSelect(), this.props.timeSelectEnd && this.props.range && this.renderTimeSelect()] })));
     };
-    Calendar.defaultProps = {
+    BaseCalendar.defaultProps = {
         autoFocusCalendar: false,
         dateLabel: null,
         density: DENSITY.default,
@@ -512,13 +378,13 @@ var Calendar = /** @class */ (function (_super) {
         locale: null,
         maxDate: null,
         minDate: null,
-        onDayClick: function () { },
-        onDayFocus: function () { },
-        onDayMouseOver: function () { },
-        onDayMouseLeave: function () { },
-        onMonthChange: function () { },
-        onYearChange: function () { },
-        onChange: function () { },
+        onDayClick: _noop,
+        onDayFocus: _noop,
+        onDayMouseOver: _noop,
+        onDayMouseLeave: _noop,
+        onMonthChange: _noop,
+        onYearChange: _noop,
+        onChange: _noop,
         orientation: ORIENTATION.horizontal,
         overrides: {},
         peekNextMonth: false,
@@ -527,6 +393,9 @@ var Calendar = /** @class */ (function (_super) {
         value: null,
         trapTabbing: false,
     };
-    return Calendar;
+    return BaseCalendar;
 }(React.Component));
-export default Calendar;
+export default function Calendar(props) {
+    var doc = useDocument();
+    return _jsx(BaseCalendar, __assign({}, props, { document: doc !== null && doc !== void 0 ? doc : null }));
+}

package/esm/baseui/datepicker/day.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import DateHelpers from './utils/date-helpers';
 import type { DayProps, DayState } from './types';
-import type { Locale } from '../locale';
 export default class Day<T = Date> extends React.Component<DayProps<T>, DayState> {
     static defaultProps: {
         disabled: boolean;
         highlighted: boolean;
+        monthFallbackTabbableDate: null;
         range: boolean;
         adapter: import("./utils/types").DateIOAdapter<Date>;
-        onClick: () => void;
-        onSelect: () => void;
-        onFocus: () => void;
-        onBlur: () => void;
-        onMouseOver: () => void;
-        onMouseLeave: () => void;
+        onClick: (...args: any[]) => void;
+        onSelect: (...args: any[]) => void;
+        onFocus: (...args: any[]) => void;
+        onBlur: (...args: any[]) => void;
+        onMouseOver: (...args: any[]) => void;
+        onMouseLeave: (...args: any[]) => void;
         overrides: {};
         peekNextMonth: boolean;
         value: null;
@@ -46,8 +46,8 @@ export default class Day<T = Date> extends React.Component<DayProps<T>, DayState
     isOutsideOfMonthButWithinRange: () => boolean;
     isSelected(): boolean;
     clampToDayStart: (a: T) => T;
-    isPseudoSelected(): boolean | undefined;
-    isPseudoHighlighted(): boolean | undefined;
+    isPseudoSelected(): boolean;
+    isPseudoHighlighted(): boolean;
     getSharedProps(): {
         $date: T;
         $density: "default" | "high";
@@ -67,8 +67,8 @@ export default class Day<T = Date> extends React.Component<DayProps<T>, DayState
         $outsideMonth: boolean;
         $outsideMonthWithinRange: boolean;
         $peekNextMonth: boolean;
-        $pseudoHighlighted: boolean | undefined;
-        $pseudoSelected: boolean | undefined;
+        $pseudoHighlighted: boolean;
+        $pseudoSelected: boolean;
         $range: boolean;
         $selected: boolean;
         $startDate: boolean;
@@ -76,12 +76,19 @@ export default class Day<T = Date> extends React.Component<DayProps<T>, DayState
         $selectedInput: import("./types").InputRole;
         $value: T | (T | null | undefined)[] | null | undefined;
     };
+    getBaseAriaLabel(sharedProps: {
+        $disabled: boolean;
+        $range: boolean;
+        $selected: boolean;
+        $startDate: boolean;
+        $endDate: boolean;
+    }): string;
     getAriaLabel(sharedProps: {
         $disabled: boolean;
         $range: boolean;
         $selected: boolean;
         $startDate: boolean;
         $endDate: boolean;
-    }, localeContext: Locale): string;
+    }): string;
     render(): import("react/jsx-runtime").JSX.Element;
 }