react-day-picker 9.13.2 → 10.0.0-next.0

package/README.md

@@ -18,7 +18,7 @@ See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API refe
 - 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
 - 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
 - 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/time-zone).
-- 🌐 Support for [ISO 8601](http://daypicker.dev/localization/iso-and-broadcast#iso-8601-calendar), [Persian](http://daypicker.dev/localization/persian), [Buddhist (Thai)](http://daypicker.dev/localization/buddhist), [Ethiopic](http://daypicker.dev/localization/ethiopic), [Hebrew](http://daypicker.dev/localization/hebrew) and [broadcast](http://daypicker.dev/localization/iso-and-broadcast#broadcast-calendar) calendar.
+- 🌐 Support for [ISO 8601](http://daypicker.dev/localization/iso-and-broadcast#iso-8601-calendar), [Persian](http://daypicker.dev/localization/persian), [Hijri](http://daypicker.dev/localization/hijri), [Buddhist (Thai)](http://daypicker.dev/localization/buddhist), [Ethiopic](http://daypicker.dev/localization/ethiopic), [Hebrew](http://daypicker.dev/localization/hebrew) and [broadcast](http://daypicker.dev/localization/iso-and-broadcast#broadcast-calendar) calendar.
 - 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
 - ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
 - 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).

package/dist/cjs/DayPicker.js

@@ -164,8 +164,12 @@ function DayPicker(initialProps) {
         props.labels,
         props.classNames,
     ]);
-    if (!props.today) {
-        props = { ...props, today: dateLib.today() };
+    if (!props.today || props.navLayout === undefined) {
+        props = {
+            ...props,
+            today: props.today ?? dateLib.today(),
+            navLayout: props.navLayout ?? "after",
+        };
     }
     const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, } = props;
     const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown, } = formatters;
@@ -279,86 +283,84 @@ function DayPicker(initialProps) {
         formatters,
     };
     return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: contextValue },
-        react_1.default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
-            react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
-                !props.hideNavigation && !navLayout && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
-                months.map((calendarMonth, displayIndex) => {
-                    return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], 
-                        // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
-                        key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
-                        navLayout === "around" &&
-                            !props.hideNavigation &&
-                            displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
-                            react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
-                        react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
-                            (() => {
-                                const monthControl = captionLayout === "dropdown" ||
-                                    captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
-                                const yearControl = captionLayout === "dropdown" ||
-                                    captionLayout === "dropdown-years" ? (react_1.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI_js_1.UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
-                                const controls = dateLib.getMonthYearOrder() === "year-first"
-                                    ? [yearControl, monthControl]
-                                    : [monthControl, yearControl];
-                                return controls;
-                            })(),
-                            react_1.default.createElement("span", { role: "status", "aria-live": "polite", style: {
-                                    border: 0,
-                                    clip: "rect(0 0 0 0)",
-                                    height: "1px",
-                                    margin: "-1px",
-                                    overflow: "hidden",
-                                    padding: 0,
-                                    position: "absolute",
-                                    width: "1px",
-                                    whiteSpace: "nowrap",
-                                    wordWrap: "normal",
-                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
-                        navLayout === "around" &&
-                            !props.hideNavigation &&
-                            displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
-                            react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
-                        displayIndex === numberOfMonths - 1 &&
-                            navLayout === "after" &&
-                            !props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
-                        react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
-                                undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
-                            !props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weekdays], style: styles?.[UI_js_1.UI.Weekdays] },
-                                showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI_js_1.UI.WeekNumberHeader], style: styles?.[UI_js_1.UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
-                                weekdays.map((weekday) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI_js_1.UI.Weekday], key: String(weekday), style: styles?.[UI_js_1.UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
-                            react_1.default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weeks], style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week) => {
-                                return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, style: styles?.[UI_js_1.UI.Week], week: week },
-                                    showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
-                                            locale,
-                                        }), className: classNames[UI_js_1.UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
-                                    week.days.map((day) => {
-                                        const { date } = day;
-                                        const modifiers = getModifiers(day);
-                                        modifiers[UI_js_1.DayFlag.focused] =
-                                            !modifiers.hidden &&
-                                                Boolean(focused?.isEqualTo(day));
-                                        modifiers[UI_js_1.SelectionState.selected] =
-                                            isSelected?.(date) || modifiers.selected;
-                                        if ((0, typeguards_js_1.isDateRange)(selectedValue)) {
-                                            // add range modifiers
-                                            const { from, to } = selectedValue;
-                                            modifiers[UI_js_1.SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
-                                            modifiers[UI_js_1.SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
-                                            modifiers[UI_js_1.SelectionState.range_middle] =
-                                                (0, rangeIncludesDate_js_1.rangeIncludesDate)(selectedValue, date, true, dateLib);
-                                        }
-                                        const style = (0, getStyleForModifiers_js_1.getStyleForModifiers)(modifiers, styles, props.modifiersStyles);
-                                        const className = (0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(modifiers, classNames, props.modifiersClassNames);
-                                        const ariaLabel = !isInteractive && !modifiers.hidden
-                                            ? labelGridcell(date, modifiers, dateLib.options, dateLib)
-                                            : undefined;
-                                        return (react_1.default.createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
-                                                modifiers.disabled) ||
-                                                undefined, "aria-disabled": (modifiers.focused &&
-                                                modifiers.disabled) ||
-                                                undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
-                                            formatDay(day.date, dateLib.options, dateLib))));
-                                    })));
-                            })))));
-                })),
+        react_1.default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang ?? locale.code, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
+            react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] }, months.map((calendarMonth, displayIndex) => {
+                return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], 
+                    // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
+                    key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
+                    navLayout === "around" &&
+                        !props.hideNavigation &&
+                        displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
+                        react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
+                    react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
+                        (() => {
+                            const monthControl = captionLayout === "dropdown" ||
+                                captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                            const yearControl = captionLayout === "dropdown" ||
+                                captionLayout === "dropdown-years" ? (react_1.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI_js_1.UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                            const controls = dateLib.getMonthYearOrder() === "year-first"
+                                ? [yearControl, monthControl]
+                                : [monthControl, yearControl];
+                            return controls;
+                        })(),
+                        react_1.default.createElement("span", { role: "status", "aria-live": "polite", style: {
+                                border: 0,
+                                clip: "rect(0 0 0 0)",
+                                height: "1px",
+                                margin: "-1px",
+                                overflow: "hidden",
+                                padding: 0,
+                                position: "absolute",
+                                width: "1px",
+                                whiteSpace: "nowrap",
+                                wordWrap: "normal",
+                            } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
+                    navLayout === "around" &&
+                        !props.hideNavigation &&
+                        displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
+                        react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
+                    displayIndex === numberOfMonths - 1 &&
+                        navLayout === "after" &&
+                        !props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
+                    react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
+                            undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
+                        !props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weekdays], style: styles?.[UI_js_1.UI.Weekdays] },
+                            showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI_js_1.UI.WeekNumberHeader], style: styles?.[UI_js_1.UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
+                            weekdays.map((weekday) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI_js_1.UI.Weekday], key: String(weekday), style: styles?.[UI_js_1.UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
+                        react_1.default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weeks], style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week) => {
+                            return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, style: styles?.[UI_js_1.UI.Week], week: week },
+                                showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                        locale,
+                                    }), className: classNames[UI_js_1.UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
+                                week.days.map((day) => {
+                                    const { date } = day;
+                                    const modifiers = getModifiers(day);
+                                    modifiers[UI_js_1.DayFlag.focused] =
+                                        !modifiers.hidden &&
+                                            Boolean(focused?.isEqualTo(day));
+                                    modifiers[UI_js_1.SelectionState.selected] =
+                                        isSelected?.(date) || modifiers.selected;
+                                    if ((0, typeguards_js_1.isDateRange)(selectedValue)) {
+                                        // add range modifiers
+                                        const { from, to } = selectedValue;
+                                        modifiers[UI_js_1.SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
+                                        modifiers[UI_js_1.SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
+                                        modifiers[UI_js_1.SelectionState.range_middle] =
+                                            (0, rangeIncludesDate_js_1.rangeIncludesDate)(selectedValue, date, true, dateLib);
+                                    }
+                                    const style = (0, getStyleForModifiers_js_1.getStyleForModifiers)(modifiers, styles, props.modifiersStyles);
+                                    const className = (0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(modifiers, classNames, props.modifiersClassNames);
+                                    const ariaLabel = !isInteractive && !modifiers.hidden
+                                        ? labelGridcell(date, modifiers, dateLib.options, dateLib)
+                                        : undefined;
+                                    return (react_1.default.createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
+                                            modifiers.disabled) ||
+                                            undefined, "aria-disabled": (modifiers.focused &&
+                                            modifiers.disabled) ||
+                                            undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
+                                        formatDay(day.date, dateLib.options, dateLib))));
+                                })));
+                        })))));
+            })),
             props.footer && (react_1.default.createElement(components.Footer, { className: classNames[UI_js_1.UI.Footer], style: styles?.[UI_js_1.UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }

package/dist/cjs/UI.d.ts

@@ -1,4 +1,3 @@
-import type { CSSProperties } from "react";
 /**
  * Enum representing the UI elements composing DayPicker. These elements are
  * mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
@@ -115,232 +114,3 @@ export declare enum Animation {
     /** The exiting caption when it disappears before the entering month. */
     caption_before_exit = "caption_before_exit"
 }
-/**
- * Deprecated UI elements and flags from previous versions of DayPicker.
- *
- * These elements are kept for backward compatibility and to assist in
- * transitioning to the new {@link UI} elements.
- *
- * @deprecated
- * @since 9.0.1
- * @template T - The type of the deprecated UI element (e.g., CSS class or
- *   style).
- * @see https://daypicker.dev/upgrading
- * @see https://daypicker.dev/docs/styling
- */
-export type DeprecatedUI<T extends CSSProperties | string> = {
-    /**
-     * This element was applied to the style of any button in DayPicker and it is
-     * replaced by {@link UI | UI.PreviousMonthButton} and {@link UI | UI.NextMonthButton}.
-     *
-     * @deprecated
-     */
-    button: T;
-    /**
-     * This element was resetting the style of any button in DayPicker and it is
-     * replaced by {@link UI | UI.PreviousMonthButton} and {@link UI | UI.NextMonthButton}.
-     *
-     * @deprecated
-     */
-    button_reset: T;
-    /**
-     * This element has been renamed to {@link UI | UI.MonthCaption}.
-     *
-     * @deprecated
-     */
-    caption: T;
-    /**
-     * This element has been removed. Captions are styled via
-     * {@link UI | UI.MonthCaption}.
-     *
-     * @deprecated
-     */
-    caption_between: T;
-    /**
-     * This element has been renamed to {@link UI | UI.Dropdowns}.
-     *
-     * @deprecated
-     */
-    caption_dropdowns: T;
-    /**
-     * This element has been removed. Captions are styled via
-     * {@link UI | UI.MonthCaption}.
-     *
-     * @deprecated
-     */
-    caption_end: T;
-    /**
-     * This element has been removed.
-     *
-     * @deprecated
-     */
-    caption_start: T;
-    /**
-     * This element has been renamed to {@link UI | UI.Day}.
-     *
-     * @deprecated
-     */
-    cell: T;
-    /**
-     * This element has been renamed to {@link DayFlag | DayFlag.disabled}.
-     *
-     * @deprecated
-     */
-    day_disabled: T;
-    /**
-     * This element has been renamed to {@link DayFlag | DayFlag.hidden}.
-     *
-     * @deprecated
-     */
-    day_hidden: T;
-    /**
-     * This element has been renamed to {@link DayFlag | DayFlag.outside}.
-     *
-     * @deprecated
-     */
-    day_outside: T;
-    /**
-     * This element has been renamed to {@link SelectionState | SelectionState.range_end}.
-     *
-     * @deprecated
-     */
-    day_range_end: T;
-    /**
-     * This element has been renamed to {@link SelectionState | SelectionState.range_middle}.
-     *
-     * @deprecated
-     */
-    day_range_middle: T;
-    /**
-     * This element has been renamed to {@link SelectionState | SelectionState.range_start}.
-     *
-     * @deprecated
-     */
-    day_range_start: T;
-    /**
-     * This element has been renamed to {@link SelectionState | SelectionState.selected}.
-     *
-     * @deprecated
-     */
-    day_selected: T;
-    /**
-     * This element has been renamed to {@link DayFlag | DayFlag.today}.
-     *
-     * @deprecated
-     */
-    day_today: T;
-    /**
-     * This element has been removed. The dropdown icon is now {@link UI | UI.Chevron}
-     * inside a {@link UI | UI.CaptionLabel}.
-     *
-     * @deprecated
-     */
-    dropdown_icon: T;
-    /**
-     * This element has been renamed to {@link UI | UI.MonthsDropdown}.
-     *
-     * @deprecated
-     */
-    dropdown_month: T;
-    /**
-     * This element has been renamed to {@link UI | UI.YearsDropdown}.
-     *
-     * @deprecated
-     */
-    dropdown_year: T;
-    /**
-     * This element has been removed.
-     *
-     * @deprecated
-     */
-    head: T;
-    /**
-     * This element has been renamed to {@link UI | UI.Weekday}.
-     *
-     * @deprecated
-     */
-    head_cell: T;
-    /**
-     * This element has been renamed to {@link UI | UI.Weekdays}.
-     *
-     * @deprecated
-     */
-    head_row: T;
-    /**
-     * This flag has been removed. Use `data-multiple-months` in your CSS
-     * selectors.
-     *
-     * @deprecated
-     */
-    multiple_months: T;
-    /**
-     * This element has been removed. To style the navigation buttons, use
-     * {@link UI | UI.PreviousMonthButton} and {@link UI | UI.NextMonthButton}.
-     *
-     * @deprecated
-     */
-    nav_button: T;
-    /**
-     * This element has been renamed to {@link UI | UI.NextMonthButton}.
-     *
-     * @deprecated
-     */
-    nav_button_next: T;
-    /**
-     * This element has been renamed to {@link UI | UI.PreviousMonthButton}.
-     *
-     * @deprecated
-     */
-    nav_button_previous: T;
-    /**
-     * This element has been removed. The dropdown icon is now {@link UI | UI.Chevron}
-     * inside a {@link UI | UI.NextMonthButton} or a {@link UI | UI.PreviousMonthButton}.
-     *
-     * @deprecated
-     */
-    nav_icon: T;
-    /**
-     * This element has been renamed to {@link UI | UI.Week}.
-     *
-     * @deprecated
-     */
-    row: T;
-    /**
-     * This element has been renamed to {@link UI | UI.MonthGrid}.
-     *
-     * @deprecated
-     */
-    table: T;
-    /**
-     * This element has been renamed to {@link UI | UI.Weeks}.
-     *
-     * @deprecated
-     */
-    tbody: T;
-    /**
-     * This element has been removed. The {@link UI | UI.Footer} is now a single element
-     * below the months.
-     *
-     * @deprecated
-     */
-    tfoot: T;
-    /**
-     * This flag has been removed. There are no "visually hidden" elements in
-     * DayPicker 9.
-     *
-     * @deprecated
-     */
-    vhidden: T;
-    /**
-     * This element has been renamed. Use {@link UI | UI.WeekNumber} instead.
-     *
-     * @deprecated
-     */
-    weeknumber: T;
-    /**
-     * This flag has been removed. Use `data-week-numbers` in your CSS.
-     *
-     * @deprecated
-     */
-    with_weeknumber: T;
-};

package/dist/cjs/classes/DateLib.d.ts

@@ -20,16 +20,6 @@ export interface DayPickerLocale extends DateFnsLocale {
     labels?: DayPickerLocaleLabels;
 }
 export type Locale = DayPickerLocale;
-/**
- * @ignore
- * @deprecated Use {@link DateLibOptions} instead.
- */
-export type FormatOptions = DateLibOptions;
-/**
- * @ignore
- * @deprecated Use {@link DateLibOptions} instead.
- */
-export type LabelOptions = DateLibOptions;
 /** Indicates the preferred ordering of month and year for localized labels. */
 export type MonthYearOrder = "month-first" | "year-first";
 /**
@@ -116,12 +106,6 @@ export declare class DateLib {
      */
     formatMonthYear(date: Date): string;
     private static readonly yearFirstLocales;
-    /**
-     * Reference to the built-in Date constructor.
-     *
-     * @deprecated Use `newDate()` or `today()`.
-     */
-    Date: typeof Date;
     /**
      * Creates a new `Date` object representing today's date.
      *
@@ -400,8 +384,3 @@ export { enUS as defaultLocale } from "../locale/en-US.js";
  * @since 9.2.0
  */
 export declare const defaultDateLib: DateLib;
-/**
- * @ignore
- * @deprecated Use `defaultDateLib`.
- */
-export declare const dateLib: DateLib;

package/dist/cjs/classes/DateLib.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dateLib = exports.defaultDateLib = exports.defaultLocale = exports.DateLib = void 0;
+exports.defaultDateLib = exports.defaultLocale = exports.DateLib = void 0;
 const tz_1 = require("@date-fns/tz");
 const date_fns_1 = require("date-fns");
 const endOfBroadcastWeek_js_1 = require("../helpers/endOfBroadcastWeek.js");
@@ -23,12 +23,6 @@ class DateLib {
      * @param overrides Custom overrides for the date library functions.
      */
     constructor(options, overrides) {
-        /**
-         * Reference to the built-in Date constructor.
-         *
-         * @deprecated Use `newDate()` or `today()`.
-         */
-        this.Date = Date;
         /**
          * Creates a new `Date` object representing today's date.
          *
@@ -42,7 +36,8 @@ class DateLib {
             if (this.options.timeZone) {
                 return tz_1.TZDate.tz(this.options.timeZone);
             }
-            return new this.Date();
+            const DateCtor = this.options.Date ?? Date;
+            return new DateCtor();
         };
         /**
          * Creates a new `Date` object with the specified year, month, and day.
@@ -574,8 +569,3 @@ Object.defineProperty(exports, "defaultLocale", { enumerable: true, get: functio
  * @since 9.2.0
  */
 exports.defaultDateLib = new DateLib();
-/**
- * @ignore
- * @deprecated Use `defaultDateLib`.
- */
-exports.dateLib = exports.defaultDateLib;

package/dist/cjs/components/Dropdown.d.ts

@@ -1,5 +1,4 @@
 import React, { type SelectHTMLAttributes } from "react";
-import type { ClassNames, CustomComponents } from "../types/index.js";
 /** An option to use in the dropdown. Maps to the `<option>` HTML element. */
 export type DropdownOption = {
     /** The value of the option. */
@@ -16,16 +15,6 @@ export type DropdownOption = {
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Dropdown(props: {
-    /**
-     * @deprecated Use {@link useDayPicker} hook to get the list of internal
-     *   components.
-     */
-    components: CustomComponents;
-    /**
-     * @deprecated Use {@link useDayPicker} hook to get the list of internal
-     *   class names.
-     */
-    classNames: ClassNames;
     /** The options to display in the dropdown. */
     options?: DropdownOption[] | undefined;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;

package/dist/cjs/components/Dropdown.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = Dropdown;
 const react_1 = __importDefault(require("react"));
 const UI_js_1 = require("../UI.js");
+const useDayPicker_js_1 = require("../useDayPicker.js");
 /**
  * Render a dropdown component for navigation in the calendar.
  *
@@ -13,7 +14,8 @@ const UI_js_1 = require("../UI.js");
  * @see https://daypicker.dev/guides/custom-components
  */
 function Dropdown(props) {
-    const { options, className, components, classNames, ...selectProps } = props;
+    const { options, className, ...selectProps } = props;
+    const { classNames, components } = (0, useDayPicker_js_1.useDayPicker)();
     const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" ");
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
     return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot] },

package/dist/cjs/components/NextMonthButton.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextMonthButton = NextMonthButton;
 const react_1 = __importDefault(require("react"));
-const useDayPicker_js_1 = require("../useDayPicker.js");
 /**
  * Render the button to navigate to the next month in the calendar.
  *
@@ -13,6 +12,5 @@ const useDayPicker_js_1 = require("../useDayPicker.js");
  * @see https://daypicker.dev/guides/custom-components
  */
 function NextMonthButton(props) {
-    const { components } = (0, useDayPicker_js_1.useDayPicker)();
-    return react_1.default.createElement(components.Button, { ...props });
+    return react_1.default.createElement("button", { ...props });
 }

package/dist/cjs/components/PreviousMonthButton.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviousMonthButton = PreviousMonthButton;
 const react_1 = __importDefault(require("react"));
-const useDayPicker_js_1 = require("../useDayPicker.js");
 /**
  * Render the button to navigate to the previous month in the calendar.
  *
@@ -13,6 +12,5 @@ const useDayPicker_js_1 = require("../useDayPicker.js");
  * @see https://daypicker.dev/guides/custom-components
  */
 function PreviousMonthButton(props) {
-    const { components } = (0, useDayPicker_js_1.useDayPicker)();
-    return react_1.default.createElement(components.Button, { ...props });
+    return react_1.default.createElement("button", { ...props });
 }

package/dist/cjs/components/custom-components.d.ts

@@ -1,4 +1,3 @@
-export * from "./Button.js";
 export * from "./CaptionLabel.js";
 export * from "./Chevron.js";
 export * from "./Day.js";

package/dist/cjs/components/custom-components.js

@@ -14,7 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Button.js"), exports);
 __exportStar(require("./CaptionLabel.js"), exports);
 __exportStar(require("./Chevron.js"), exports);
 __exportStar(require("./Day.js"), exports);

package/dist/cjs/formatters/formatCaption.d.ts

@@ -12,9 +12,3 @@ import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
  * @see https://daypicker.dev/docs/translation#custom-formatters
  */
 export declare function formatCaption(month: Date, options?: DateLibOptions, dateLib?: DateLib): string;
-/**
- * @private
- * @deprecated Use {@link formatCaption} instead.
- * @group Formatters
- */
-export declare const formatMonthCaption: typeof formatCaption;