@ringcentral/spring-ui 1.7.0

package/DatePicker.js

@@ -0,0 +1,485 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useFocusVisible, useForkRef, combineProps, useOnlyOneFocusable, useKeyboardMoveFocus, usePrevious, useEventCallback, useWindowContext, runKeyHandler, useClasses, useControlled } from '@ringcentral/spring-base';
+import { createContext, useContext, useRef, forwardRef, 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 } from '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import { V as VisuallyHidden } from './chunks/VisuallyHidden.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/TextField.js';
+import './chunks/ShowHideEye.js';
+import './chunks/useHelperTextId.js';
+
+const DatePickerClassesContext = createContext(() => '');
+const useDatePickerClasses = () => useContext(DatePickerClassesContext);
+
+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 }));
+};
+
+const ScreenReaderContext = createContext(null);
+const useScreenReaderContext = () => useContext(ScreenReaderContext);
+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',
+    getDayAriaLabel: (day, selected) => `${day}${selected ? ', selected' : ''}`,
+    getYearAriaLabel: (year, selected) => `${year}${selected ? ', selected' : ''}`,
+};
+const ScreenReaderProvider = ({ screenReaderProps, children, }) => {
+    return (jsx(ScreenReaderContext.Provider, { value: screenReaderProps || defaultScreenReaderProps, children: children }));
+};
+
+const focusDayElement = () => {
+    const elm = document.querySelector('[data-sui-picker-focused]');
+    elm?.focus();
+};
+const isSameYearAndMonth = ({ source, comparing }, utils) => {
+    if (!source || !comparing) {
+        return false;
+    }
+    const thisMonth = utils.getMonth(source);
+    const thisYear = utils.getYear(source);
+    const comparingMonth = utils.getMonth(comparing);
+    const comparingYear = utils.getYear(comparing);
+    return thisMonth === comparingMonth && thisYear === comparingYear;
+};
+const invalidateDateInRange = (day, { dateRange: { min, max }, disableFuture, disablePast, now, }, utils) => {
+    if (disableFuture && utils.isAfterDay(day, now)) {
+        return now;
+    }
+    if (disablePast && utils.isBeforeDay(day, now)) {
+        return now;
+    }
+    if (min && utils.isBeforeDay(day, utils.date(min))) {
+        return min;
+    }
+    if (max && utils.isAfterDay(day, utils.date(max))) {
+        return max;
+    }
+    return false;
+};
+
+const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture, disablePast, shouldDisableDate, }) => {
+    const today = utils.startOfDay(utils.date());
+    if (disablePast && utils.isBefore(minDate, today)) {
+        minDate = today;
+    }
+    if (disableFuture && utils.isAfter(maxDate, today)) {
+        maxDate = today;
+    }
+    let forward = date;
+    let backward = date;
+    if (utils.isBefore(date, minDate)) {
+        forward = utils.date(minDate);
+        backward = null;
+    }
+    if (utils.isAfter(date, maxDate)) {
+        if (backward) {
+            backward = utils.date(maxDate);
+        }
+        forward = null;
+    }
+    while (forward || backward) {
+        if (forward && utils.isAfter(forward, maxDate)) {
+            forward = null;
+        }
+        if (backward && utils.isBefore(backward, minDate)) {
+            backward = null;
+        }
+        if (forward) {
+            if (!shouldDisableDate(forward)) {
+                return forward;
+            }
+            forward = utils.addDays(forward, 1);
+        }
+        if (backward) {
+            if (!shouldDisableDate(backward)) {
+                return backward;
+            }
+            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, } = props;
+    const utils = useDateUtilsContext();
+    const cls = useDatePickerClasses();
+    const preMonth = utils.getPreviousMonth(focusedDate);
+    const nextMonth = utils.getNextMonth(focusedDate);
+    const monthLabel = utils.getCalendarHeaderText(focusedDate);
+    const changeFromRef = useRef();
+    const selectNextMonth = () => {
+        onMonthChange(nextMonth, 'left');
+        changeFromRef.current = 'next';
+    };
+    const selectPreviousMonth = () => {
+        onMonthChange(preMonth, 'right');
+        changeFromRef.current = 'previous';
+    };
+    const isYearView = view === 'year';
+    const isExpanded = isYearView;
+    const { getMonthYearAriaLabel, getSwitchMonthAriaLabel } = useScreenReaderContext() ?? {};
+    const monthYearAriaLabel = getMonthYearAriaLabel?.(`${monthLabel}`, isExpanded);
+    const nextMonthAriaLabel = getSwitchMonthAriaLabel?.(true, utils.getMonthText(focusedDate));
+    const previousMonthAriaLabel = getSwitchMonthAriaLabel?.(false, utils.getMonthText(focusedDate));
+    return (jsxs(Fragment, { children: [changeFromRef.current && (jsx(VisuallyHidden, { role: "region", "aria-live": "assertive", children: changeFromRef.current === 'next'
+                    ? nextMonthAriaLabel
+                    : previousMonthAriaLabel })), 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: [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": "" })] }))] })] }));
+};
+DatePickerHeader.displayName = 'RcDatePickerHeader';
+
+const Day = forwardRef((props, ref) => {
+    const { onSelect, value, selected, disabled, focused, children, current, date, onFocus, onBlur, ...rest } = props;
+    const { getDayAriaLabel } = useScreenReaderContext() ?? {};
+    const cls = useDatePickerClasses();
+    const { focusVisible, focusVisibleHandlers, focusVisibleRef } = useFocusVisible();
+    const utils = useDateUtilsContext();
+    const handleRef = useForkRef(ref, focusVisibleRef);
+    return (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?.(`${utils.getDatePickerHeaderText(date)} ${utils.getYearText(date)}`, selected), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+});
+Day.displayName = 'SuiDay';
+
+const Year = 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', {
+            'current-date': current,
+            selected,
+            disabled,
+            focusVisible,
+        }), "data-sui-picker-year": value, "aria-label": getYearAriaLabel?.(value, selected), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+});
+Year.displayName = 'SuiYear';
+
+const Years = 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 focusedIndexRef = useRef(0);
+    const focusedYear = utils.getYearText(years[focusedIndexRef.current]);
+    const { focusIndex, getItemProps } = useOnlyOneFocusable({
+        focusedIndexRef,
+        containerRef,
+    });
+    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) => {
+            focusIndex(toIndex);
+            event?.preventDefault();
+        },
+        getOptionDisabled,
+    });
+    useLayoutEffect(() => {
+        const index = years.findIndex((x) => utils.getYearText(x) === currentYear);
+        focusIndex(index);
+        // eslint-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) => {
+            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) => {
+                    const newDate = utils.setYear(date, Number(year));
+                    onYearChange(newDate);
+                }, disabled: disabled }, utils.getYearText(year)));
+        }) }));
+});
+Years.displayName = 'SuiYears';
+
+const Calendar = 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 weeks = useRef([]);
+    const weekdays = useMemo(() => utils.getWeekdays(), [utils]);
+    const { now, isTodayDisabled } = useMemo(() => {
+        const nowDate = utils.date();
+        return {
+            now: nowDate,
+            isTodayDisabled: shouldDisableDate(nowDate),
+        };
+    }, [shouldDisableDate, utils]);
+    const [focusedDate, setFocusedDate] = useState(date);
+    const [view, setView] = useState('day');
+    const [slideDirection, setSlideDirection] = useState('left');
+    const [loadingQueue, setLoadingQueue] = useState(0);
+    const { min, max } = dateRange;
+    const currentMonthNumber = utils.getMonth(focusedDate);
+    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 popFromLoadingQueue = () => {
+        setLoadingQueue(loadingQueue <= 0 ? 0 : loadingQueue - 1);
+    };
+    const handleMonthChange = useEventCallback((newMonth, direction) => {
+        setSlideDirection(direction);
+        setFocusedDate(getInvalidateDateInRange(newMonth) || newMonth);
+        if (onMonthChange) {
+            const returnVal = onMonthChange(newMonth);
+            if (returnVal) {
+                pushToLoadingQueue();
+                returnVal.then(() => {
+                    popFromLoadingQueue();
+                });
+            }
+        }
+    });
+    const handleChangeView = useEventCallback(() => {
+        setView(view === 'day' ? 'year' : 'day');
+    });
+    const disableNextMonth = useMemo(() => {
+        const nextStartDay = utils.startOfMonth(utils.getNextMonth(focusedDate));
+        return !!getInvalidateDateInRange(nextStartDay);
+    }, [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) => {
+            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');
+                }
+                setFocusedDate(day);
+            }
+        };
+        const goToDate = (day) => {
+            setFocusedDate(getInvalidateDateInRange(day) || day);
+        };
+        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)),
+            Enter: confirmDate,
+            ' ': confirmDate,
+        });
+    };
+    const { getBackToTodayAriaLabel } = useScreenReaderContext() ?? {};
+    const backToTodayAriaLabel = getBackToTodayAriaLabel?.();
+    const renderDays = (week) => {
+        const selectedDate = date;
+        return week.map((day) => {
+            const disabled = shouldDisableDate(day);
+            const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
+            const dayText = utils.getDayText(day);
+            const key = `${dayText}/${currentMonthNumber}`;
+            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: () => {
+                    isDayInCurrentMonth && onSelectDay(day);
+                }, children: dayText }, key)) : (jsx("div", { "aria-hidden": true }, key));
+            return renderDay
+                ? renderDay(day, focusedDate, isDayInCurrentMonth, dayComponent)
+                : dayComponent;
+        });
+    };
+    const renderBody = () => {
+        const loadingElement = loadingIndicator ? (loadingIndicator) : (jsx("div", { className: cls('loading-container'), children: jsx(CircularProgressIndicator, {}) }));
+        switch (view) {
+            case 'day':
+                return (jsxs(Fragment, { children: [jsxs("div", { className: cls('days-panel'), role: "presentation", children: [jsx("div", { className: cls('weekdays'), children: weekdays.map((day) => (jsx("span", { className: cls('weekday'), children: day }, day))) }), loadingQueue > 0 ? (jsx("div", { children: loadingElement })) : (jsx("div", { className: cls('days-grid'), onKeyDown: handleKeyDown, children: weeks.current.map((week) => renderDays(week)) }))] }), jsx("div", { children: jsx(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 }) })] }));
+            case 'year':
+                return (jsx(Years, { date: focusedDate, minDate: min, maxDate: max, onYearChange: (day) => {
+                        setView('day');
+                        const validateDate = getInvalidateDateInRange(day) || day;
+                        setFocusedDate(validateDate);
+                    }, disablePast: disablePast, disableFuture: disableFuture, now: now }));
+            default:
+                return null;
+        }
+    };
+    const { document } = useWindowContext();
+    useLayoutEffect(() => {
+        if (viewChange)
+            return;
+        // same month anchor switch
+        if (sameMonthDate) {
+            focusDayElement();
+            return;
+        }
+        // different month anchor switch and not switch by header action
+        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);
+            };
+        }
+        return undefined;
+    });
+    // when view change and current is day also focusDay again
+    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 }), 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-weekdays":"sui-date-picker-weekdays","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"};
+
+const defaultMinDate = new Date('1900-01-01');
+const defaultMaxDate = new Date('2100-01-01');
+const DEFAULT_FORMAT = 'MM/DD/YYYY';
+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 = useClasses('date-picker', classes, className);
+    const utils = useDateUtilsContext();
+    const [controlledValue, setControlledValue] = useControlled({
+        controlled: value,
+        default: null,
+        name: 'DatePicker',
+    });
+    const emitValueRef = useRef(null);
+    const actionRef = useRef(null);
+    const dateRange = useMemo(() => ({
+        min: dayjs(minDate || defaultMinDate),
+        max: dayjs(maxDate || defaultMaxDate),
+    }), [minDate, maxDate]);
+    const getInvalidateDateInRange = useEventCallback((day) => invalidateDateInRange(day, { dateRange, now: utils.date(), disableFuture, disablePast }, utils));
+    const shouldDisableDate = useEventCallback((day) => {
+        return (Boolean(getInvalidateDateInRange(day)) ||
+            Boolean(shouldDisableDateProp?.(day)));
+    });
+    const getClosestEnabledDate = useCallback((currDate) => {
+        return findClosestEnabledDate({
+            date: currDate,
+            utils,
+            minDate: utils.date(dateRange.min),
+            maxDate: utils.date(dateRange.max),
+            disablePast: Boolean(disablePast),
+            disableFuture: Boolean(disableFuture),
+            shouldDisableDate,
+        });
+    }, [
+        dateRange.max,
+        dateRange.min,
+        disableFuture,
+        disablePast,
+        shouldDisableDate,
+        utils,
+    ]);
+    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) => {
+        actionRef.current?.close();
+        setControlledValue(toDate);
+        // save inner change value
+        emitValueRef.current = toDate;
+        onChange?.(toDate, fromUserSelect);
+    };
+    const handleDaySelect = useEventCallback((day, fromUserSelect = true) => {
+        const newDay = day ? utils.startOfDay(day).toDate() : null;
+        handleChange(newDay, fromUserSelect);
+    });
+    useEffect(() => {
+        if (
+        // only when inner value change need check again is that value is valid
+        dayjsValue &&
+            value !== emitValueRef.current &&
+            shouldDisableDate(dayjsValue)) {
+            const closestEnabledDate = getClosestEnabledDate(dayjsValue);
+            handleDaySelect(closestEnabledDate, false);
+        }
+    }, [
+        dayjsValue,
+        getClosestEnabledDate,
+        handleDaySelect,
+        shouldDisableDate,
+        value,
+    ]);
+    return (jsx(DatePickerClassesContext.Provider, { value: cls, children: jsx(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 }) }) }) }));
+};
+const DatePicker = forwardRef((inProps, ref) => {
+    const { locale = 'en', ...rest } = useThemeProps({
+        props: inProps,
+        name: 'DatePicker',
+    });
+    return (jsx(DateUtilsProvider, { locale: locale, children: jsx(InnerDatePicker, { innerRef: ref, ...rest }) }));
+});
+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 };

package/DateUtilsContext.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import DateUtils from '@date-io/dayjs';
+import { createContext, useMemo, useContext } from 'react';
+
+const DateUtilsContext = createContext(null);
+const DateUtilsProvider = (props) => {
+    const { children, locale } = props;
+    const utils = useMemo(() => {
+        const dateUtils = new DateUtils({ locale });
+        const customUtils = {
+            // displaying methods
+            getCalendarHeaderText: (date) => {
+                return dateUtils.formatByString(date, 'MMMM YYYY');
+            },
+            getYearText: (date) => {
+                return dateUtils.formatByString(date, 'YYYY');
+            },
+            getMonthText: (date) => {
+                return dateUtils.formatByString(date, 'MMMM');
+            },
+            getDatePickerHeaderText: (date) => {
+                return dateUtils.formatByString(date, 'ddd, MMM D');
+            },
+            getDateTimePickerHeaderText: (date) => {
+                return dateUtils.formatByString(date, 'MMM D');
+            },
+            getDayText: (date) => {
+                return dateUtils.formatByString(date, 'D');
+            },
+            getHourText: (date, ampm) => {
+                return dateUtils.formatByString(date, ampm ? 'hh' : 'HH');
+            },
+            getMinuteText: (date) => {
+                return dateUtils.formatByString(date, 'mm');
+            },
+            getSecondText: (date) => {
+                return dateUtils.formatByString(date, 'ss');
+            },
+        };
+        return {
+            ...dateUtils,
+            ...customUtils,
+            date: dateUtils.dayjs,
+        };
+    }, [locale]);
+    return (jsx(DateUtilsContext.Provider, { value: utils, children: children }));
+};
+const useDateUtilsContext = () => {
+    const utils = useContext(DateUtilsContext);
+    if (!utils) {
+        throw Error('No DateUtils provided, must be used within a DateUtilsProvider');
+    }
+    return utils;
+};
+
+export { DateUtilsProvider, useDateUtilsContext };