@ringcentral/spring-ui 1.11.2 → 1.13.0

package/DatePicker.js

@@ -1,68 +1,93 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useFocusVisible, useForkRef, combineProps, useOnlyOneFocusable, useKeyboardMoveFocus, usePrevious, useId, useEventCallback, useWindowContext, runKeyHandler, useControlled } from '@ringcentral/spring-base';
-import { createContext, useContext, forwardRef, useRef, useMemo, useLayoutEffect, createElement, useState, useCallback, useEffect } from 'react';
-import { B as Button } from './chunks/Button.js';
-import { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
-import { useDateUtilsContext, DateUtilsProvider } from './DateUtilsContext.js';
-import { CaretLeftMd, CaretRightMd, CalendarMd } from '@ringcentral/spring-icon';
-import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
-import 'framer-motion';
-import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import { I as IconButton } from './chunks/IconButtonLabel.js';
-import clsx from 'clsx';
-import dayjs from 'dayjs';
-import { P as PickerTextField } from './chunks/PickerTextField.js';
-import '@mui/base';
-import './chunks/Tooltip.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-import './chunks/withTooltip.js';
-import '@date-io/dayjs';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/Squircle.js';
-import './chunks/Popover.js';
-import './chunks/getGrow.js';
-import './chunks/useHelperTextId.js';
-import './chunks/TextField.js';
-import './chunks/ShowHideEye.js';
-import './chunks/VisuallyHidden.js';
-
-const DatePickerClassesContext = createContext(() => '');
-const useDatePickerClasses = () => useContext(DatePickerClassesContext);
-
-const HeaderAction = (props) => {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { combineProps, runKeyHandler, useControlled, useEventCallback, useFocusVisible, useForkRef, useId, useKeyboardMoveFocus, useOnlyOneFocusable, usePrevious } from "@ringcentral/spring-base";
+import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CalendarMd, CaretLeftMd, CaretRightMd } from "@ringcentral/spring-icon";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import "./chunks/4476.js";
+import { DateUtilsProvider, useDateUtilsContext } from "./DateUtilsContext.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { Button as Button_Button } from "./Button.js";
+import { CircularProgressIndicator as CircularProgressIndicator_CircularProgressIndicator } from "./CircularProgressIndicator.js";
+import { PickerTextField as PickerTextField_PickerTextField } from "./PickerTextField.js";
+import { ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+
+
+
+
+
+
+const DatePickerClassesContext = createContext(()=>'');
+const useDatePickerClasses = ()=>useContext(DatePickerClassesContext);
+
+
+const DATE_PICKER_HEADER_DATA_ATTRIBUTES = {
+    previousMonth: 'data-sui-picker-previous-month',
+    nextMonth: 'data-sui-picker-next-month',
+    switchYearAction: 'data-sui-picker-switch-year-action'
+};
+const DATE_PICKER_HEADER_SELECTORS = {
+    previousMonth: `[${DATE_PICKER_HEADER_DATA_ATTRIBUTES.previousMonth}]`,
+    nextMonth: `[${DATE_PICKER_HEADER_DATA_ATTRIBUTES.nextMonth}]`,
+    switchYearAction: `[${DATE_PICKER_HEADER_DATA_ATTRIBUTES.switchYearAction}]`
+};
+
+
+
+
+
+
+
+
+
+
+
+const HeaderAction = (props)=>{
     const { className, disabled, ...rest } = props;
     const cls = useDatePickerClasses();
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible();
-    return (jsx("button", { className: clsx(className, cls('header-action', { focusVisible, disabled })), ref: focusVisibleRef, ...rest, ...focusVisibleHandlers }));
+    return /*#__PURE__*/ jsx("button", {
+        className: clsx(className, cls('header-action', {
+            focusVisible,
+            disabled
+        })),
+        ref: focusVisibleRef,
+        ...rest,
+        ...focusVisibleHandlers,
+        type: "button"
+    });
 };
 
+
+
+
+
+
 const defaultScreenReaderProps = {
-    getMonthYearAriaLabel: (monthLabel, expanded) => `${monthLabel}${expanded ? ', year selection expanded' : ''}`,
-    getSwitchMonthAriaLabel: (isNext, currentMonth) => `${isNext ? 'Next' : 'Previous'} month, currently viewing ${currentMonth}`,
-    getBackToTodayAriaLabel: () => 'Go back to today',
-    getLoadingAriaLabel: () => 'Loading dates',
-    getDayAriaLabel: (day, selected) => `${day}${selected ? ', selected' : ''}`,
-    getYearAriaLabel: (year, selected) => `${year}${selected ? ', selected' : ''}`,
+    getMonthYearAriaLabel: (monthLabel, expanded)=>`${monthLabel}${expanded ? ', year selection expanded' : ''}`,
+    getSwitchMonthAriaLabel: (isNext, currentMonth)=>`${isNext ? 'Next' : 'Previous'} month, currently viewing ${currentMonth}`,
+    getBackToTodayAriaLabel: ()=>'Go back to today',
+    getLoadingAriaLabel: ()=>'Loading dates',
+    getDayAriaLabel: (day, selected)=>`${day}${selected ? ', selected' : ''}`,
+    getYearAriaLabel: (year, selected)=>`${year}${selected ? ', selected' : ''}`
 };
-const ScreenReaderContext = createContext(defaultScreenReaderProps);
-const useScreenReaderContext = () => useContext(ScreenReaderContext);
-const ScreenReaderProvider = ({ screenReaderProps, children, }) => {
-    return (jsx(ScreenReaderContext.Provider, { value: screenReaderProps || defaultScreenReaderProps, children: children }));
+const ScreenReaderContext = /*#__PURE__*/ createContext(defaultScreenReaderProps);
+const useScreenReaderContext = ()=>useContext(ScreenReaderContext);
+const ScreenReaderProvider = ({ screenReaderProps, children })=>{
+    return /*#__PURE__*/ jsx(ScreenReaderContext.Provider, {
+        value: screenReaderProps || defaultScreenReaderProps,
+        children: children
+    });
 };
 
-const focusDayElement = () => {
-    const elm = document.querySelector('[data-sui-picker-focused]');
-    elm?.focus();
+
+const focusDayElement = (root = document)=>{
+    const focusedDayElement = root?.querySelector('[data-sui-picker-focused]');
+    focusedDayElement?.focus();
+    return focusedDayElement;
 };
-const isSameYearAndMonth = ({ source, comparing }, utils) => {
+const isSameYearAndMonth = ({ source, comparing }, utils)=>{
     if (!source || !comparing) {
         return false;
     }
@@ -72,7 +97,7 @@ const isSameYearAndMonth = ({ source, comparing }, utils) => {
     const comparingYear = utils.getYear(comparing);
     return thisMonth === comparingMonth && thisYear === comparingYear;
 };
-const invalidateDateInRange = (day, { dateRange: { min, max }, disableFuture, disablePast, now, }, utils) => {
+const invalidateDateInRange = (day, { dateRange: { min, max }, disableFuture, disablePast, now }, utils)=>{
     if (disableFuture && utils.isAfterDay(day, now)) {
         return now;
     }
@@ -88,7 +113,7 @@ const invalidateDateInRange = (day, { dateRange: { min, max }, disableFuture, di
     return false;
 };
 
-const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture, disablePast, shouldDisableDate, }) => {
+const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture, disablePast, shouldDisableDate })=>{
     const today = utils.startOfDay(utils.date());
     if (disablePast && utils.isBefore(minDate, today)) {
         minDate = today;
@@ -108,7 +133,7 @@ const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture,
         }
         forward = null;
     }
-    while (forward || backward) {
+    while(forward || backward){
         if (forward && utils.isAfter(forward, maxDate)) {
             forward = null;
         }
@@ -128,20 +153,34 @@ const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture,
             backward = utils.addDays(backward, -1);
         }
     }
+    // fallback to today if no enabled days
     return utils.date();
 };
 
-const DatePickerHeader = (props) => {
-    const { focusedDate, onMonthChange, disablePrevMonth = false, disableNextMonth = false, onViewChange, view, gridLabelId, } = props;
+
+
+
+
+
+
+
+
+
+
+
+
+
+const DatePickerHeader = (props)=>{
+    const { focusedDate, onMonthChange, disablePrevMonth = false, disableNextMonth = false, onViewChange, view, gridLabelId } = props;
     const utils = useDateUtilsContext();
     const cls = useDatePickerClasses();
     const preMonth = utils.getPreviousMonth(focusedDate);
     const nextMonth = utils.getNextMonth(focusedDate);
     const monthLabel = utils.getCalendarHeaderText(focusedDate);
-    const selectNextMonth = () => {
+    const selectNextMonth = ()=>{
         onMonthChange(nextMonth, 'left');
     };
-    const selectPreviousMonth = () => {
+    const selectPreviousMonth = ()=>{
         onMonthChange(preMonth, 'right');
     };
     const isYearView = view === 'year';
@@ -150,11 +189,78 @@ const DatePickerHeader = (props) => {
     const monthYearAriaLabel = getMonthYearAriaLabel?.(`${monthLabel}`, isExpanded);
     const nextMonthAriaLabel = getSwitchMonthAriaLabel?.(true, utils.getMonthText(focusedDate));
     const previousMonthAriaLabel = getSwitchMonthAriaLabel?.(false, utils.getMonthText(focusedDate));
-    return (jsx(Fragment, { children: jsxs("div", { className: cls('header'), children: [jsxs(HeaderAction, { onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": isExpanded, "data-sui-picker-switch-year-action": "", className: cls('switch-year-action'), children: [jsx("span", { id: gridLabelId, "aria-live": "polite", "aria-atomic": "true", children: monthLabel }), jsx(ExpandCollapseCaret, { className: cls('switch-year-action-caret'), size: "small", expanded: isExpanded })] }), !isYearView && (jsxs("div", { className: cls('switch-month-actions-group'), children: [jsx(IconButton, { shape: "squircle", variant: "contained", color: "secondary", size: "small", background: false, symbol: CaretLeftMd, className: cls('switch-month-action'), disabled: disablePrevMonth, onClick: selectPreviousMonth, "aria-label": previousMonthAriaLabel, "data-sui-picker-previous-month": "" }), jsx(IconButton, { shape: "squircle", variant: "contained", color: "secondary", size: "small", background: false, symbol: CaretRightMd, className: cls('switch-month-action'), disabled: disableNextMonth, onClick: selectNextMonth, "aria-label": nextMonthAriaLabel, "data-sui-picker-next-month": "" })] }))] }) }));
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cls('header'),
+            children: [
+                /*#__PURE__*/ jsxs(HeaderAction, {
+                    onClick: onViewChange,
+                    "aria-label": monthYearAriaLabel,
+                    "aria-expanded": isExpanded,
+                    [DATE_PICKER_HEADER_DATA_ATTRIBUTES.switchYearAction]: '',
+                    className: cls('switch-year-action'),
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            id: gridLabelId,
+                            "aria-live": "polite",
+                            "aria-atomic": "true",
+                            children: monthLabel
+                        }),
+                        /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                            className: cls('switch-year-action-caret'),
+                            size: "small",
+                            expanded: isExpanded
+                        })
+                    ]
+                }),
+                !isYearView && /*#__PURE__*/ jsxs("div", {
+                    className: cls('switch-month-actions-group'),
+                    children: [
+                        /*#__PURE__*/ jsx(IconButton_IconButton, {
+                            shape: "squircle",
+                            variant: "contained",
+                            color: "secondary",
+                            size: "small",
+                            background: false,
+                            symbol: CaretLeftMd,
+                            className: cls('switch-month-action'),
+                            disabled: disablePrevMonth,
+                            onClick: selectPreviousMonth,
+                            "aria-label": previousMonthAriaLabel,
+                            [DATE_PICKER_HEADER_DATA_ATTRIBUTES.previousMonth]: ''
+                        }),
+                        /*#__PURE__*/ jsx(IconButton_IconButton, {
+                            shape: "squircle",
+                            variant: "contained",
+                            color: "secondary",
+                            size: "small",
+                            background: false,
+                            symbol: CaretRightMd,
+                            className: cls('switch-month-action'),
+                            disabled: disableNextMonth,
+                            onClick: selectNextMonth,
+                            "aria-label": nextMonthAriaLabel,
+                            [DATE_PICKER_HEADER_DATA_ATTRIBUTES.nextMonth]: ''
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 };
 DatePickerHeader.displayName = 'RcDatePickerHeader';
 
-const Day = forwardRef((props, ref) => {
+
+
+
+
+
+
+
+
+
+
+const Day = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { onSelect, value, selected, disabled, focused, children, current, date, onFocus, onBlur, ...rest } = props;
     const { getDayAriaLabel } = useScreenReaderContext() ?? {};
     const cls = useDatePickerClasses();
@@ -162,95 +268,204 @@ const Day = forwardRef((props, ref) => {
     const utils = useDateUtilsContext();
     const handleRef = useForkRef(ref, focusVisibleRef);
     const dayLabel = `${utils.getDatePickerHeaderText(date)} ${utils.getYearText(date)}`;
-    return (jsx("button", { onClick: () => onSelect(value), ref: handleRef, className: cls('date-button', 'day', {
+    return /*#__PURE__*/ jsx("button", {
+        onClick: ()=>onSelect(value),
+        ref: handleRef,
+        className: cls('date-button', 'day', {
             'current-date': current,
             selected,
             disabled,
-            focusVisible,
-        }), "data-sui-picker-focused": focused ? '' : undefined, "data-sui-picker-day": value, "aria-label": getDayAriaLabel?.(dayLabel, selected, {
+            focusVisible
+        }),
+        "data-sui-picker-focused": focused ? '' : undefined,
+        "data-sui-picker-day": value,
+        "aria-label": getDayAriaLabel?.(dayLabel, selected, {
             date,
             disabled,
             today: current,
-            focused,
-        }), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+            focused
+        }),
+        ...rest,
+        ...combineProps({
+            onBlur,
+            onFocus
+        }, focusVisibleHandlers),
+        type: "button",
+        children: children
+    });
 });
 Day.displayName = 'SuiDay';
 
-const Year = forwardRef((props, ref) => {
+
+
+
+
+
+
+
+
+
+
+
+
+const Year = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { onSelect, value, selected, disabled, children, current, onFocus, onBlur, date, ...rest } = props;
     const { getYearAriaLabel } = useScreenReaderContext() ?? {};
     const cls = useDatePickerClasses();
     const { focusVisible, focusVisibleHandlers, focusVisibleRef } = useFocusVisible();
     const handleRef = useForkRef(ref, focusVisibleRef);
-    return (jsx("button", { onClick: () => onSelect(value), ref: handleRef, className: cls('date-button', 'year', {
+    return /*#__PURE__*/ jsx("button", {
+        onClick: ()=>onSelect(value),
+        ref: handleRef,
+        className: cls('date-button', 'year', {
             'current-date': current,
             selected,
             disabled,
-            focusVisible,
-        }), "data-sui-picker-year": value, "aria-label": getYearAriaLabel?.(value, selected), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+            focusVisible
+        }),
+        "data-sui-picker-year": value,
+        "aria-label": getYearAriaLabel?.(value, selected),
+        ...rest,
+        ...combineProps({
+            onBlur,
+            onFocus
+        }, focusVisibleHandlers),
+        type: "button",
+        children: children
+    });
 });
 Year.displayName = 'SuiYear';
 
-const Years = forwardRef((props, ref) => {
-    const { date, onYearChange, minDate, maxDate, disablePast, disableFuture, now, } = props;
+
+
+
+
+
+
+
+
+const Years = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { date, onYearChange, minDate, maxDate, disablePast, disableFuture, now } = props;
     const utils = useDateUtilsContext();
     const containerRef = useRef(null);
     const combineRef = useForkRef(containerRef, ref);
     const selectedYearRef = useRef(null);
     const currentYear = utils.getYearText(date || now);
-    const years = useMemo(() => utils.getYearRange(minDate, maxDate), [maxDate, minDate, utils]);
+    const years = useMemo(()=>utils.getYearRange(minDate, maxDate), [
+        maxDate,
+        minDate,
+        utils
+    ]);
     const focusedIndexRef = useRef(0);
     const focusedYear = utils.getYearText(years[focusedIndexRef.current]);
     const { focusIndex, getItemProps } = useOnlyOneFocusable({
         focusedIndexRef,
-        containerRef,
+        containerRef
     });
-    const getOptionDisabled = (year) => Boolean((disablePast && utils.isBeforeYear(year, now)) ||
-        (disableFuture && utils.isAfterYear(year, now)));
+    const getOptionDisabled = (year)=>Boolean(disablePast && utils.isBeforeYear(year, now) || disableFuture && utils.isAfterYear(year, now));
     const { onKeyFocusedIndexHandle: handleKeyDown } = useKeyboardMoveFocus({
         options: years,
         focusedIndexRef,
         columns: 4,
         infinite: 'order',
-        onFocusedIndexChange: (event, toIndex) => {
+        onFocusedIndexChange: (event, toIndex)=>{
             focusIndex(toIndex);
             event?.preventDefault();
         },
-        getOptionDisabled,
+        getOptionDisabled
     });
-    useLayoutEffect(() => {
-        const index = years.findIndex((x) => utils.getYearText(x) === currentYear);
+    useLayoutEffect(()=>{
+        const index = years.findIndex((x)=>utils.getYearText(x) === currentYear);
         focusIndex(index);
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const cls = useDatePickerClasses();
-    return (jsx("div", { role: "presentation", className: cls('years-panel'), ref: combineRef, onKeyDown: handleKeyDown, children: years.map((year, index) => {
+    return /*#__PURE__*/ jsx("div", {
+        role: "presentation",
+        className: cls('years-panel'),
+        ref: combineRef,
+        onKeyDown: handleKeyDown,
+        children: years.map((year, index)=>{
             const yearText = utils.getYearText(year);
             const selected = yearText === currentYear;
             const focused = yearText === focusedYear;
             const disabled = getOptionDisabled(year);
-            return (createElement(Year, { ...getItemProps(index), current: utils.isSameYear(year, now), ref: focused ? selectedYearRef : undefined, key: utils.getYearText(year), selected: selected, date: year, value: yearText, onSelect: (year) => {
+            return /*#__PURE__*/ createElement(Year, {
+                ...getItemProps(index),
+                current: utils.isSameYear(year, now),
+                ref: focused ? selectedYearRef : undefined,
+                key: utils.getYearText(year),
+                selected: selected,
+                date: year,
+                value: yearText,
+                onSelect: (year)=>{
                     const newDate = utils.setYear(date, Number(year));
                     onYearChange(newDate);
-                }, disabled: disabled }, utils.getYearText(year)));
-        }) }));
+                },
+                disabled: disabled
+            }, utils.getYearText(year));
+        })
+    });
 });
 Years.displayName = 'SuiYears';
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 const DATE_PICKER_CALENDAR_GRID_LABEL_ID_PREFIX = 'DatePickerCalendarGridLabel';
-const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange, todayButtonText, loadingIndicator, disablePast, disableFuture, renderDay, onSelectDay, getInvalidateDateInRange, }, ref) => {
+const getFallbackHeaderFocusTarget = (target)=>{
+    switch(target){
+        case 'previousMonth':
+            return 'nextMonth';
+        case 'nextMonth':
+            return 'previousMonth';
+        default:
+            return 'switchYearAction';
+    }
+};
+const getHeaderButton = (root, target)=>root?.querySelector(DATE_PICKER_HEADER_SELECTORS[target]) ?? null;
+const getRestorableHeaderFocusElement = (root, target)=>{
+    const headerElement = getHeaderButton(root, target);
+    if (headerElement && !headerElement.disabled) {
+        return headerElement;
+    }
+    const fallbackElement = getHeaderButton(root, getFallbackHeaderFocusTarget(target));
+    if (fallbackElement && !fallbackElement.disabled) {
+        return fallbackElement;
+    }
+    return getHeaderButton(root, 'switchYearAction');
+};
+const Calendar = /*#__PURE__*/ forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange, todayButtonText, loadingIndicator, disablePast, disableFuture, renderDay, onSelectDay, getInvalidateDateInRange }, ref)=>{
     const cls = useDatePickerClasses();
     const utils = useDateUtilsContext();
-    const previousFocusDate = usePrevious(() => focusedDate);
-    const previousView = usePrevious(() => view);
+    const previousFocusDate = usePrevious(()=>focusedDate);
     const weeks = useRef([]);
-    const weekdayLabels = useMemo(() => utils.getWeekdayLabels(), [utils]);
-    const { now, isTodayDisabled } = useMemo(() => {
+    const calendarRef = useRef(null);
+    const handleCalendarRef = useForkRef(calendarRef, ref);
+    const focusIntentRef = useRef('day');
+    const weekdayLabels = useMemo(()=>utils.getWeekdayLabels(), [
+        utils
+    ]);
+    const { now, isTodayDisabled } = useMemo(()=>{
         const nowDate = utils.date();
         return {
             now: nowDate,
-            isTodayDisabled: shouldDisableDate(nowDate),
+            isTodayDisabled: shouldDisableDate(nowDate)
         };
-    }, [shouldDisableDate, utils]);
+    }, [
+        shouldDisableDate,
+        utils
+    ]);
     const [focusedDate, setFocusedDate] = useState(date);
     const [view, setView] = useState('day');
     const [slideDirection, setSlideDirection] = useState('left');
@@ -258,170 +473,312 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
     const gridLabelId = useId(DATE_PICKER_CALENDAR_GRID_LABEL_ID_PREFIX, true);
     const { min, max } = dateRange;
     const currentMonthNumber = utils.getMonth(focusedDate);
-    const sameMonthDate = previousFocusDate
-        ? isSameYearAndMonth({ source: focusedDate, comparing: previousFocusDate }, utils)
-        : false;
+    const sameMonthDate = previousFocusDate ? isSameYearAndMonth({
+        source: focusedDate,
+        comparing: previousFocusDate
+    }, utils) : false;
     if (!sameMonthDate) {
         weeks.current = utils.getWeekArray(focusedDate);
     }
-    const viewChange = view !== previousView;
-    const pushToLoadingQueue = () => {
-        setLoadingQueue(loadingQueue + 1);
+    const pushToLoadingQueue = ()=>{
+        setLoadingQueue((queue)=>queue + 1);
     };
-    const popFromLoadingQueue = () => {
-        setLoadingQueue(loadingQueue <= 0 ? 0 : loadingQueue - 1);
+    const popFromLoadingQueue = ()=>{
+        setLoadingQueue((queue)=>queue <= 0 ? 0 : queue - 1);
     };
-    const handleMonthChange = useEventCallback((newMonth, direction) => {
+    const handleMonthChange = useEventCallback((newMonth, direction, shouldFocusDay = false)=>{
+        if (shouldFocusDay) {
+            focusIntentRef.current = 'day';
+        } else {
+            focusIntentRef.current = direction === 'left' ? 'nextMonth' : 'previousMonth';
+        }
         setSlideDirection(direction);
         setFocusedDate(getInvalidateDateInRange(newMonth) || newMonth);
         if (onMonthChange) {
             const returnVal = onMonthChange(newMonth);
             if (returnVal) {
                 pushToLoadingQueue();
-                returnVal.then(() => {
+                returnVal.then(()=>{
                     popFromLoadingQueue();
                 });
             }
         }
     });
-    const handleChangeView = useEventCallback(() => {
+    const handleChangeView = useEventCallback(()=>{
+        focusIntentRef.current = null;
         setView(view === 'day' ? 'year' : 'day');
     });
-    const disableNextMonth = useMemo(() => {
+    const disableNextMonth = useMemo(()=>{
         const nextStartDay = utils.startOfMonth(utils.getNextMonth(focusedDate));
         return !!getInvalidateDateInRange(nextStartDay);
-    }, [focusedDate, getInvalidateDateInRange, utils]);
-    const disablePrevMonth = useMemo(() => {
+    }, [
+        focusedDate,
+        getInvalidateDateInRange,
+        utils
+    ]);
+    const disablePrevMonth = useMemo(()=>{
         const prevLatestDay = utils.endOfMonth(utils.getPreviousMonth(focusedDate));
         return !!getInvalidateDateInRange(prevLatestDay);
-    }, [focusedDate, getInvalidateDateInRange, utils]);
-    const handleKeyDown = (event) => {
-        const moveDay = (value) => {
+    }, [
+        focusedDate,
+        getInvalidateDateInRange,
+        utils
+    ]);
+    const handleKeyDown = (event)=>{
+        const moveDay = (value)=>{
             const day = utils.addDays(focusedDate, value);
             if (day && !shouldDisableDate(day)) {
                 const newMonthNumber = utils.getMonth(day);
                 if (newMonthNumber !== currentMonthNumber) {
-                    return handleMonthChange(day, newMonthNumber > currentMonthNumber ? 'left' : 'right');
+                    return handleMonthChange(day, newMonthNumber > currentMonthNumber ? 'left' : 'right', true);
                 }
+                focusIntentRef.current = 'day';
                 setFocusedDate(day);
             }
         };
-        const goToDate = (day) => {
+        const goToDate = (day)=>{
+            focusIntentRef.current = 'day';
             setFocusedDate(getInvalidateDateInRange(day) || day);
         };
-        const confirmDate = () => {
+        const confirmDate = ()=>{
             event.stopPropagation();
             onSelectDay(focusedDate);
         };
         runKeyHandler(event, {
-            ArrowUp: () => moveDay(-7),
-            ArrowDown: () => moveDay(7),
-            ArrowLeft: () => moveDay(-1),
-            ArrowRight: () => moveDay(1),
-            Home: () => goToDate(utils.startOfMonth(focusedDate)),
-            End: () => goToDate(utils.endOfMonth(focusedDate)),
+            ArrowUp: ()=>moveDay(-7),
+            ArrowDown: ()=>moveDay(7),
+            ArrowLeft: ()=>moveDay(-1),
+            ArrowRight: ()=>moveDay(1),
+            Home: ()=>goToDate(utils.startOfMonth(focusedDate)),
+            End: ()=>goToDate(utils.endOfMonth(focusedDate)),
             Enter: confirmDate,
-            ' ': confirmDate,
+            ' ': confirmDate
         });
     };
     const { getBackToTodayAriaLabel, getLoadingAriaLabel } = useScreenReaderContext() ?? {};
     const backToTodayAriaLabel = getBackToTodayAriaLabel?.();
     const loadingAriaLabel = getLoadingAriaLabel?.();
-    const renderDays = (week) => {
+    const renderDays = (week)=>{
         const selectedDate = date;
-        return week.map((day) => {
+        return week.map((day)=>{
             const disabled = shouldDisableDate(day);
             const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
             const dayText = utils.getDayText(day);
             const key = utils.formatByString(day, 'YYYY-MM-DD');
             const selected = utils.isSameDay(day, selectedDate);
             const focused = utils.isSameDay(focusedDate, day);
-            const dayComponent = isDayInCurrentMonth ? (jsx(Day, { disabled: disabled, current: utils.isSameDay(day, now), selected: selected, tabIndex: focused ? 0 : -1, focused: focused, date: day, value: dayText, onSelect: () => {
+            const dayComponent = isDayInCurrentMonth ? /*#__PURE__*/ jsx(Day, {
+                disabled: disabled,
+                current: utils.isSameDay(day, now),
+                selected: selected,
+                tabIndex: focused ? 0 : -1,
+                focused: focused,
+                date: day,
+                value: dayText,
+                onSelect: ()=>{
                     isDayInCurrentMonth && onSelectDay(day);
-                }, children: dayText }, key)) : (jsx("div", { "aria-hidden": true }, key));
-            const renderedDay = renderDay
-                ? renderDay(day, focusedDate, isDayInCurrentMonth, dayComponent)
-                : dayComponent;
-            return (jsx("td", { className: cls('day-cell'), "aria-selected": selected && isDayInCurrentMonth ? true : undefined, children: renderedDay }, key));
+                },
+                children: dayText
+            }, key) : /*#__PURE__*/ jsx("div", {
+                "aria-hidden": true
+            }, key);
+            const renderedDay = renderDay ? renderDay(day, focusedDate, isDayInCurrentMonth, dayComponent) : dayComponent;
+            return /*#__PURE__*/ jsx("td", {
+                className: cls('day-cell'),
+                "aria-selected": selected && isDayInCurrentMonth ? true : undefined,
+                children: renderedDay
+            }, key);
         });
     };
-    const renderBody = () => {
-        const loadingElement = loadingIndicator ? (loadingIndicator) : (jsx("div", { className: cls('loading-container'), children: jsx(CircularProgressIndicator, { progressBarProps: {
-                    'aria-label': loadingAriaLabel,
-                } }) }));
-        switch (view) {
+    const renderBody = ()=>{
+        const loadingElement = loadingIndicator ? loadingIndicator : /*#__PURE__*/ jsx("div", {
+            className: cls('loading-container'),
+            children: /*#__PURE__*/ jsx(CircularProgressIndicator_CircularProgressIndicator, {
+                progressBarProps: {
+                    'aria-label': loadingAriaLabel
+                }
+            })
+        });
+        switch(view){
             case 'day':
-                return (jsxs(Fragment, { children: [jsx("div", { className: cls('days-panel'), children: jsxs("table", { className: cls('days-grid'), role: "grid", "aria-labelledby": gridLabelId, "aria-busy": loadingQueue > 0 ? true : undefined, onKeyDown: handleKeyDown, children: [jsx("thead", { children: jsx("tr", { className: cls('weekdays'), children: weekdayLabels.map(({ full, min }) => (jsx("th", { className: cls('weekday'), scope: "col", abbr: full, "aria-label": full, children: min }, full))) }) }), loadingQueue > 0 ? (jsx("tbody", { "data-sui-picker-loading": "", children: jsx("tr", { children: jsx("td", { colSpan: 7, children: loadingElement }) }) })) : (jsx("tbody", { children: weeks.current.map((week) => (jsx("tr", { className: cls('week'), children: renderDays(week) }, utils.formatByString(week[0], 'YYYY-MM-DD')))) }))] }) }), jsx("div", { children: jsx(Button, { className: cls('today-button'), variant: "outlined", size: "small", color: "secondary", onClick: () => {
+                return /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: cls('days-panel'),
+                            children: /*#__PURE__*/ jsxs("table", {
+                                className: cls('days-grid'),
+                                role: "grid",
+                                "aria-labelledby": gridLabelId,
+                                "aria-busy": loadingQueue > 0 ? true : undefined,
+                                onKeyDown: handleKeyDown,
+                                children: [
+                                    /*#__PURE__*/ jsx("thead", {
+                                        children: /*#__PURE__*/ jsx("tr", {
+                                            className: cls('weekdays'),
+                                            children: weekdayLabels.map(({ full, min })=>/*#__PURE__*/ jsx("th", {
+                                                    className: cls('weekday'),
+                                                    scope: "col",
+                                                    abbr: full,
+                                                    "aria-label": full,
+                                                    children: min
+                                                }, full))
+                                        })
+                                    }),
+                                    loadingQueue > 0 ? /*#__PURE__*/ jsx("tbody", {
+                                        "data-sui-picker-loading": "",
+                                        children: /*#__PURE__*/ jsx("tr", {
+                                            children: /*#__PURE__*/ jsx("td", {
+                                                colSpan: 7,
+                                                children: loadingElement
+                                            })
+                                        })
+                                    }) : /*#__PURE__*/ jsx("tbody", {
+                                        children: weeks.current.map((week)=>/*#__PURE__*/ jsx("tr", {
+                                                className: cls('week'),
+                                                children: renderDays(week)
+                                            }, utils.formatByString(week[0], 'YYYY-MM-DD')))
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            children: /*#__PURE__*/ jsx(Button_Button, {
+                                className: cls('today-button'),
+                                variant: "outlined",
+                                size: "small",
+                                color: "secondary",
+                                onClick: ()=>{
                                     onSelectDay(now);
-                                }, disabled: isTodayDisabled, "aria-label": backToTodayAriaLabel, "data-sui-picker-today": "", children: todayButtonText }) })] }));
+                                },
+                                disabled: isTodayDisabled,
+                                "aria-label": backToTodayAriaLabel,
+                                "data-sui-picker-today": "",
+                                children: todayButtonText
+                            })
+                        })
+                    ]
+                });
             case 'year':
-                return (jsx(Years, { date: focusedDate, minDate: min, maxDate: max, onYearChange: (day) => {
+                return /*#__PURE__*/ jsx(Years, {
+                    date: focusedDate,
+                    minDate: min,
+                    maxDate: max,
+                    onYearChange: (day)=>{
+                        focusIntentRef.current = 'switchYearAction';
                         setView('day');
                         const validateDate = getInvalidateDateInRange(day) || day;
                         setFocusedDate(validateDate);
-                    }, disablePast: disablePast, disableFuture: disableFuture, now: now }));
+                    },
+                    disablePast: disablePast,
+                    disableFuture: disableFuture,
+                    now: now
+                });
             default:
                 return null;
         }
     };
-    const { document } = useWindowContext();
-    useLayoutEffect(() => {
-        if (viewChange)
+    useLayoutEffect(()=>{
+        const focusIntent = focusIntentRef.current;
+        if (!focusIntent) {
+            return;
+        }
+        if (focusIntent !== 'day') {
+            const focusTarget = getRestorableHeaderFocusElement(calendarRef.current, focusIntent);
+            if (focusTarget) {
+                focusTarget.focus();
+                focusIntentRef.current = null;
+            }
             return;
-        if (sameMonthDate) {
-            focusDayElement();
+        }
+        if (loadingQueue > 0) {
             return;
         }
-        const activeEl = document?.activeElement;
-        if (activeEl &&
-            !activeEl.hasAttribute('data-sui-picker-next-month') &&
-            !activeEl.hasAttribute('data-sui-picker-previous-month')) {
-            const timer = setTimeout(() => {
-                focusDayElement();
-            });
-            return () => {
-                clearTimeout(timer);
-            };
+        if (focusDayElement(calendarRef.current)) {
+            focusIntentRef.current = null;
         }
-        return undefined;
     });
-    useLayoutEffect(() => {
-        if (previousView && view === 'day' && viewChange) {
-            focusDayElement();
-        }
-    }, [previousView, view, viewChange]);
-    useLayoutEffect(() => {
-        focusDayElement();
-    }, []);
-    return (jsxs("div", { className: cls('calendar'), ref: ref, children: [jsx(DatePickerHeader, { focusedDate: focusedDate, slideDirection: slideDirection, view: view, onMonthChange: handleMonthChange, onViewChange: handleChangeView, disablePrevMonth: disablePrevMonth, disableNextMonth: disableNextMonth, gridLabelId: gridLabelId }), renderBody()] }));
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('calendar'),
+        ref: handleCalendarRef,
+        children: [
+            /*#__PURE__*/ jsx(DatePickerHeader, {
+                focusedDate: focusedDate,
+                slideDirection: slideDirection,
+                view: view,
+                onMonthChange: handleMonthChange,
+                onViewChange: handleChangeView,
+                disablePrevMonth: disablePrevMonth,
+                disableNextMonth: disableNextMonth,
+                gridLabelId: gridLabelId
+            }),
+            renderBody()
+        ]
+    });
 });
 Calendar.displayName = 'RcCalendar';
 
-var DatePicker$1 = {"sui-date-picker-calendar":"sui-date-picker-calendar","sui-date-picker-header":"sui-date-picker-header","sui-date-picker-header-action":"sui-date-picker-header-action","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-date-picker-switch-year-action":"sui-date-picker-switch-year-action","sui-date-picker-switch-year-action-caret":"sui-date-picker-switch-year-action-caret","sui-date-picker-switch-month-actions-group":"sui-date-picker-switch-month-actions-group","sui-date-picker-switch-month-action":"sui-date-picker-switch-month-action","sui-date-picker-date-button":"sui-date-picker-date-button","sui-selected":"sui-selected","sui-date-picker-current-date":"sui-date-picker-current-date","sui-date-picker-day":"sui-date-picker-day","sui-date-picker-year":"sui-date-picker-year","sui-date-picker-years-panel":"sui-date-picker-years-panel","sui-date-picker-days-panel":"sui-date-picker-days-panel","sui-date-picker-days-grid":"sui-date-picker-days-grid","sui-date-picker-week":"sui-date-picker-week","sui-date-picker-weekdays":"sui-date-picker-weekdays","sui-date-picker-day-cell":"sui-date-picker-day-cell","sui-date-picker-weekday":"sui-date-picker-weekday","sui-date-picker-loading-container":"sui-date-picker-loading-container","sui-date-picker-today-button":"sui-date-picker-today-button","sui-compact":"sui-compact"};
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var DatePicker = ({"sui-date-picker-calendar":"sui-date-picker-calendar","sui-date-picker-header":"sui-date-picker-header","sui-date-picker-header-action":"sui-date-picker-header-action","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-date-picker-switch-year-action":"sui-date-picker-switch-year-action","sui-date-picker-switch-year-action-caret":"sui-date-picker-switch-year-action-caret","sui-date-picker-switch-month-actions-group":"sui-date-picker-switch-month-actions-group","sui-date-picker-switch-month-action":"sui-date-picker-switch-month-action","sui-date-picker-date-button":"sui-date-picker-date-button","sui-selected":"sui-selected","sui-date-picker-current-date":"sui-date-picker-current-date","sui-date-picker-day":"sui-date-picker-day","sui-date-picker-year":"sui-date-picker-year","sui-date-picker-years-panel":"sui-date-picker-years-panel","sui-date-picker-days-panel":"sui-date-picker-days-panel","sui-date-picker-days-grid":"sui-date-picker-days-grid","sui-date-picker-week":"sui-date-picker-week","sui-date-picker-weekdays":"sui-date-picker-weekdays","sui-date-picker-day-cell":"sui-date-picker-day-cell","sui-date-picker-weekday":"sui-date-picker-weekday","sui-date-picker-loading-container":"sui-date-picker-loading-container","sui-date-picker-today-button":"sui-date-picker-today-button","sui-compact":"sui-compact"});
+
+
+
+
+
+
+
+
+
+
+
+
 
 const defaultMinDate = new Date('1900-01-01');
 const defaultMaxDate = new Date('2100-01-01');
 const DEFAULT_FORMAT = 'MM/DD/YYYY';
-const InnerDatePicker = (props) => {
+const InnerDatePicker = (props)=>{
     const { innerRef, value, onChange, formatString = DEFAULT_FORMAT, todayButtonText = 'Today', min: minDate = null, max: maxDate = null, disableFuture, disablePast, loadingIndicator, onMonthChange, renderDay, disabled, shouldDisableDate: shouldDisableDateProp, onClose, onClear, classes, PopoverProps, screenReaderProps, clearBtn = true, label = 'Date', className, ...rest } = props;
-    const cls = useClassesWithMode('date-picker', classes, className, ['calendar']);
+    const cls = useClassesWithMode('date-picker', classes, className, [
+        'calendar'
+    ]);
     const utils = useDateUtilsContext();
     const [controlledValue, setControlledValue] = useControlled({
         controlled: value,
         default: null,
-        name: 'DatePicker',
+        name: 'DatePicker'
     });
     const actionRef = useRef(null);
     const minDateValue = minDate?.valueOf() ?? defaultMinDate.valueOf();
     const maxDateValue = maxDate?.valueOf() ?? defaultMaxDate.valueOf();
-    const dateRange = useMemo(() => ({
-        min: dayjs(minDateValue),
-        max: dayjs(maxDateValue),
-    }), [minDateValue, maxDateValue]);
-    const getInvalidateDateInRange = useCallback((day) => invalidateDateInRange(day, { dateRange, now: utils.date(), disableFuture, disablePast }, utils), [dateRange, disableFuture, disablePast, utils]);
-    const shouldDisableDate = useCallback((day) => Boolean(getInvalidateDateInRange(day)) ||
-        Boolean(shouldDisableDateProp?.(day)), [getInvalidateDateInRange, shouldDisableDateProp]);
-    const getClosestEnabledDate = useCallback((currDate) => {
+    const dateRange = useMemo(()=>({
+            min: dayjs(minDateValue),
+            max: dayjs(maxDateValue)
+        }), [
+        minDateValue,
+        maxDateValue
+    ]);
+    const getInvalidateDateInRange = useCallback((day)=>invalidateDateInRange(day, {
+            dateRange,
+            now: utils.date(),
+            disableFuture,
+            disablePast
+        }, utils), [
+        dateRange,
+        disableFuture,
+        disablePast,
+        utils
+    ]);
+    const shouldDisableDate = useCallback((day)=>Boolean(getInvalidateDateInRange(day)) || Boolean(shouldDisableDateProp?.(day)), [
+        getInvalidateDateInRange,
+        shouldDisableDateProp
+    ]);
+    const getClosestEnabledDate = useCallback((currDate)=>{
         return findClosestEnabledDate({
             date: currDate,
             utils,
@@ -429,7 +786,7 @@ const InnerDatePicker = (props) => {
             maxDate: utils.date(dateRange.max),
             disablePast: Boolean(disablePast),
             disableFuture: Boolean(disableFuture),
-            shouldDisableDate,
+            shouldDisableDate
         });
     }, [
         dateRange.max,
@@ -437,22 +794,32 @@ const InnerDatePicker = (props) => {
         disableFuture,
         disablePast,
         shouldDisableDate,
+        utils
+    ]);
+    const initialDate = useMemo(()=>getClosestEnabledDate(utils.date()), [
         utils,
+        getClosestEnabledDate
+    ]);
+    const dayjsValue = useMemo(()=>controlledValue ? dayjs(controlledValue) : null, [
+        controlledValue
     ]);
-    const initialDate = useMemo(() => getClosestEnabledDate(utils.date()), [utils, getClosestEnabledDate]);
-    const dayjsValue = useMemo(() => (controlledValue ? dayjs(controlledValue) : null), [controlledValue]);
     const nowDate = dayjsValue || initialDate;
-    const textFiledValue = useMemo(() => (dayjsValue ? utils.formatByString(dayjsValue, formatString) : ''), [dayjsValue, utils, formatString]);
-    const handleChange = (toDate, fromUserSelect) => {
+    const textFiledValue = useMemo(()=>dayjsValue ? utils.formatByString(dayjsValue, formatString) : '', [
+        dayjsValue,
+        utils,
+        formatString
+    ]);
+    const handleChange = (toDate, fromUserSelect)=>{
         actionRef.current?.close();
         setControlledValue(toDate);
         onChange?.(toDate, fromUserSelect);
     };
-    const handleDaySelect = useEventCallback((day, fromUserSelect = true) => {
+    const handleDaySelect = useEventCallback((day, fromUserSelect = true)=>{
         const newDay = day ? utils.startOfDay(day).toDate() : null;
         handleChange(newDay, fromUserSelect);
     });
-    useEffect(() => {
+    // Revalidate controlled values when disabled-date rules change.
+    useEffect(()=>{
         if (!dayjsValue || !shouldDisableDate(dayjsValue)) {
             return;
         }
@@ -465,20 +832,74 @@ const InnerDatePicker = (props) => {
         getClosestEnabledDate,
         handleDaySelect,
         shouldDisableDate,
-        utils,
+        utils
     ]);
-    return (jsx(DatePickerClassesContext.Provider, { value: cls, children: jsx(PickerTextField, { className: cls('root'), variant: "standard", label: label, ref: innerRef, action: actionRef, onClear: (e) => {
+    return /*#__PURE__*/ jsx(DatePickerClassesContext.Provider, {
+        value: cls,
+        children: /*#__PURE__*/ jsx(PickerTextField_PickerTextField, {
+            className: cls('root'),
+            variant: "standard",
+            label: label,
+            ref: innerRef,
+            action: actionRef,
+            onClear: (e)=>{
                 onClear?.(e);
                 handleChange(null);
-            }, PopoverProps: PopoverProps, value: textFiledValue, disabled: disabled, endIconSymbol: CalendarMd, onClose: onClose, clearBtn: clearBtn, ...rest, children: jsx(ScreenReaderProvider, { screenReaderProps: screenReaderProps, children: jsx(Calendar, { date: nowDate, dateRange: dateRange, onSelectDay: handleDaySelect, disableFuture: disableFuture, disablePast: disablePast, loadingIndicator: loadingIndicator, onMonthChange: onMonthChange, renderDay: renderDay, shouldDisableDate: shouldDisableDate, getInvalidateDateInRange: getInvalidateDateInRange, todayButtonText: todayButtonText, formatString: formatString }) }) }) }));
+            },
+            PopoverProps: PopoverProps,
+            value: textFiledValue,
+            disabled: disabled,
+            endIconSymbol: CalendarMd,
+            onClose: onClose,
+            clearBtn: clearBtn,
+            ...rest,
+            children: /*#__PURE__*/ jsx(ScreenReaderProvider, {
+                screenReaderProps: screenReaderProps,
+                children: /*#__PURE__*/ jsx(Calendar, {
+                    date: nowDate,
+                    dateRange: dateRange,
+                    onSelectDay: handleDaySelect,
+                    disableFuture: disableFuture,
+                    disablePast: disablePast,
+                    loadingIndicator: loadingIndicator,
+                    onMonthChange: onMonthChange,
+                    renderDay: renderDay,
+                    shouldDisableDate: shouldDisableDate,
+                    getInvalidateDateInRange: getInvalidateDateInRange,
+                    todayButtonText: todayButtonText,
+                    formatString: formatString
+                })
+            })
+        })
+    });
 };
-const DatePicker = forwardRef((inProps, ref) => {
+const DatePicker_DatePicker = /*#__PURE__*/ forwardRef((inProps, ref)=>{
     const { locale = 'en', ...rest } = useThemeProps({
         props: inProps,
-        name: 'DatePicker',
+        name: 'DatePicker'
+    });
+    return /*#__PURE__*/ jsx(DateUtilsProvider, {
+        locale: locale,
+        children: /*#__PURE__*/ jsx(InnerDatePicker, {
+            innerRef: ref,
+            ...rest
+        })
     });
-    return (jsx(DateUtilsProvider, { locale: locale, children: jsx(InnerDatePicker, { innerRef: ref, ...rest }) }));
 });
-DatePicker.displayName = 'SuiDatePicker';
+DatePicker_DatePicker.displayName = 'SuiDatePicker';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-export { Calendar, DEFAULT_FORMAT, DatePicker, DatePickerClassesContext, DatePickerHeader, Day, HeaderAction, ScreenReaderContext, ScreenReaderProvider, Year, Years, DatePicker$1 as datePickerStyle, findClosestEnabledDate, focusDayElement, invalidateDateInRange, isSameYearAndMonth, useDatePickerClasses, useScreenReaderContext };
+export { Calendar, DEFAULT_FORMAT, DatePicker as datePickerStyle, DatePickerClassesContext, DatePickerHeader, DatePicker_DatePicker as DatePicker, Day, HeaderAction, ScreenReaderContext, ScreenReaderProvider, Year, Years, findClosestEnabledDate, focusDayElement, invalidateDateInRange, isSameYearAndMonth, useDatePickerClasses, useScreenReaderContext };