react-day-picker 10.0.0-next.5 → 10.0.0

package/dist/esm/DayPicker.js

@@ -128,12 +128,8 @@ export function DayPicker(initialProps) {
         props.labels,
         props.classNames,
     ]);
-    if (!props.today || props.navLayout === undefined) {
-        props = {
-            ...props,
-            today: props.today ?? dateLib.today(),
-            navLayout: props.navLayout ?? "after",
-        };
+    if (!props.today) {
+        props = { ...props, today: dateLib.today() };
     }
     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;
@@ -206,15 +202,15 @@ export function DayPicker(initialProps) {
     const handleDayMouseLeave = useCallback((day, modifiers) => (e) => {
         onDayMouseLeave?.(day.date, modifiers, e);
     }, [onDayMouseLeave]);
-    const handleMonthChange = useCallback((date) => (e) => {
+    const handleMonthChange = useCallback((date, monthOffset) => (e) => {
         const selectedMonth = Number(e.target.value);
         const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
-        goToMonth(month);
+        goToMonth(dateLib.addMonths(month, -monthOffset));
     }, [dateLib, goToMonth]);
-    const handleYearChange = useCallback((date) => (e) => {
+    const handleYearChange = useCallback((date, monthOffset) => (e) => {
         const selectedYear = Number(e.target.value);
         const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
-        goToMonth(month);
+        goToMonth(dateLib.addMonths(month, -monthOffset));
     }, [dateLib, goToMonth]);
     const { className, style } = useMemo(() => ({
         className: [classNames[UI.Root], props.className]
@@ -248,83 +244,88 @@ export function DayPicker(initialProps) {
     };
     return (React.createElement(dayPickerContext.Provider, { value: contextValue },
         React.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.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] }, months.map((calendarMonth, displayIndex) => {
-                return (React.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month], 
-                    // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
-                    key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
-                    navLayout === "around" &&
-                        !props.hideNavigation &&
-                        displayIndex === 0 && (React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[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.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
-                    React.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
-                        (() => {
-                            const monthControl = captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-months" ? (React.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
-                            const yearControl = captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-years" ? (React.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
-                            const controls = dateLib.getMonthYearOrder() === "year-first"
-                                ? [yearControl, monthControl]
-                                : [monthControl, yearControl];
-                            return controls;
-                        })(),
-                        React.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.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
-                    navLayout === "around" &&
-                        !props.hideNavigation &&
-                        displayIndex === numberOfMonths - 1 && (React.createElement(components.NextMonthButton, { type: "button", className: classNames[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.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
-                    displayIndex === numberOfMonths - 1 &&
-                        navLayout === "after" &&
-                        !props.hideNavigation && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
-                    React.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
-                            undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
-                        !props.hideWeekdays && (React.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI.Weekdays], style: styles?.[UI.Weekdays] },
-                            showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI.WeekNumberHeader], style: styles?.[UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
-                            weekdays.map((weekday) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: String(weekday), style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
-                        React.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week) => {
-                            return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
-                                showWeekNumber && (React.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
-                                        locale,
-                                    }), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
-                                week.days.map((day) => {
-                                    const { date } = day;
-                                    const modifiers = getModifiers(day);
-                                    modifiers[DayFlag.focused] =
-                                        !modifiers.hidden &&
-                                            Boolean(focused?.isEqualTo(day));
-                                    modifiers[SelectionState.selected] =
-                                        isSelected?.(date) || modifiers.selected;
-                                    if (isDateRange(selectedValue)) {
-                                        // add range modifiers
-                                        const { from, to } = selectedValue;
-                                        modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
-                                        modifiers[SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
-                                        modifiers[SelectionState.range_middle] =
-                                            rangeIncludesDate(selectedValue, date, true, dateLib);
-                                    }
-                                    const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
-                                    const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
-                                    const ariaLabel = !isInteractive && !modifiers.hidden
-                                        ? labelGridcell(date, modifiers, dateLib.options, dateLib)
-                                        : undefined;
-                                    return (React.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.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[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.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
+                !props.hideNavigation && !navLayout && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
+                months.map((calendarMonth, displayIndex) => {
+                    const monthOffset = props.reverseMonths
+                        ? months.length - 1 - displayIndex
+                        : displayIndex;
+                    return (React.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month], 
+                        // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
+                        key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
+                        navLayout === "around" &&
+                            !props.hideNavigation &&
+                            displayIndex === 0 && (React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[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.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
+                        React.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
+                            (() => {
+                                const monthControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-months" ? (React.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                const yearControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-years" ? (React.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                const controls = dateLib.getMonthYearOrder() === "year-first"
+                                    ? [yearControl, monthControl]
+                                    : [monthControl, yearControl];
+                                return controls;
+                            })(),
+                            React.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.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
+                        navLayout === "around" &&
+                            !props.hideNavigation &&
+                            displayIndex === numberOfMonths - 1 && (React.createElement(components.NextMonthButton, { type: "button", className: classNames[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.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
+                        displayIndex === numberOfMonths - 1 &&
+                            navLayout === "after" &&
+                            !props.hideNavigation && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
+                        React.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
+                                undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
+                            !props.hideWeekdays && (React.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI.Weekdays], style: styles?.[UI.Weekdays] },
+                                showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI.WeekNumberHeader], style: styles?.[UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
+                                weekdays.map((weekday) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: String(weekday), style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
+                            React.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week) => {
+                                return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
+                                    showWeekNumber && (React.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                            locale,
+                                        }), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
+                                    week.days.map((day) => {
+                                        const { date } = day;
+                                        const modifiers = getModifiers(day);
+                                        modifiers[DayFlag.focused] =
+                                            !modifiers.hidden &&
+                                                Boolean(focused?.isEqualTo(day));
+                                        modifiers[SelectionState.selected] =
+                                            isSelected?.(date) || modifiers.selected;
+                                        if (isDateRange(selectedValue)) {
+                                            // add range modifiers
+                                            const { from, to } = selectedValue;
+                                            modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
+                                            modifiers[SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
+                                            modifiers[SelectionState.range_middle] =
+                                                rangeIncludesDate(selectedValue, date, true, dateLib);
+                                        }
+                                        const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
+                                        const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
+                                        const ariaLabel = !isInteractive && !modifiers.hidden
+                                            ? labelGridcell(date, modifiers, dateLib.options, dateLib)
+                                            : undefined;
+                                        return (React.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.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[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.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }

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

@@ -19,6 +19,7 @@ export interface DayPickerLocale extends DateFnsLocale {
     /** Localized DayPicker-specific labels. */
     labels?: DayPickerLocaleLabels;
 }
+/** Alias for the locale shape accepted by DayPicker APIs. */
 export type Locale = DayPickerLocale;
 /** Indicates the preferred ordering of month and year for localized labels. */
 export type MonthYearOrder = "month-first" | "year-first";

package/dist/esm/components/CaptionLabel.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+/** Props accepted by the {@link CaptionLabel} component. */
 export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0];

package/dist/esm/components/Chevron.d.ts

@@ -18,4 +18,5 @@ export declare function Chevron(props: {
     /** The orientation of the chevron. */
     orientation?: "up" | "down" | "left" | "right";
 }): React.JSX.Element;
+/** Props accepted by the {@link Chevron} component. */
 export type ChevronProps = Parameters<typeof Chevron>[0];

package/dist/esm/components/Day.d.ts

@@ -17,4 +17,5 @@ export declare function Day(props: {
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Day} component. */
 export type DayProps = Parameters<typeof Day>[0];

package/dist/esm/components/DayButton.d.ts

@@ -13,4 +13,5 @@ export declare function DayButton(props: {
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
 } & ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link DayButton} component. */
 export type DayButtonProps = Parameters<typeof DayButton>[0];

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

@@ -18,4 +18,5 @@ export declare function Dropdown(props: {
     /** The options to display in the dropdown. */
     options?: DropdownOption[] | undefined;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
+/** Props accepted by the {@link Dropdown} component. */
 export type DropdownProps = Parameters<typeof Dropdown>[0];

package/dist/esm/components/DropdownNav.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function DropdownNav(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link DropdownNav} component. */
 export type DropdownNavProps = Parameters<typeof DropdownNav>[0];

package/dist/esm/components/Footer.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Footer(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Footer} component. */
 export type FooterProps = Parameters<typeof Footer>[0];

package/dist/esm/components/Month.d.ts

@@ -13,4 +13,5 @@ export declare function Month(props: {
     /** The index of the month being displayed. */
     displayIndex: number;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Month} component. */
 export type MonthProps = Parameters<typeof Month>[0];

package/dist/esm/components/MonthCaption.d.ts

@@ -12,4 +12,5 @@ export declare function MonthCaption(props: {
     /** The index of the month being displayed. */
     displayIndex: number;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link MonthCaption} component. */
 export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

package/dist/esm/components/MonthGrid.d.ts

@@ -6,4 +6,5 @@ import React, { type TableHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>): React.JSX.Element;
+/** Props accepted by the {@link MonthGrid} component. */
 export type MonthGridProps = Parameters<typeof MonthGrid>[0];

package/dist/esm/components/Months.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Months(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Months} component. */
 export type MonthsProps = Parameters<typeof Months>[0];

package/dist/esm/components/Nav.d.ts

@@ -15,4 +15,5 @@ export declare function Nav(props: {
     /** The date of the next month, if available. */
     nextMonth?: Date | undefined;
 } & HTMLAttributes<HTMLElement>): React.JSX.Element;
+/** Props accepted by the {@link Nav} component. */
 export type NavProps = Parameters<typeof Nav>[0];

package/dist/esm/components/NextMonthButton.d.ts

@@ -6,4 +6,5 @@ import React, { type ButtonHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function NextMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link NextMonthButton} component. */
 export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];

package/dist/esm/components/Option.d.ts

@@ -6,4 +6,5 @@ import React, { type OptionHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element;
+/** Props accepted by the {@link Option} component. */
 export type OptionProps = Parameters<typeof Option>[0];

package/dist/esm/components/PreviousMonthButton.d.ts

@@ -6,4 +6,5 @@ import React, { type ButtonHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function PreviousMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link PreviousMonthButton} component. */
 export type PreviousMonthButtonProps = Parameters<typeof PreviousMonthButton>[0];

package/dist/esm/components/Root.d.ts

@@ -9,4 +9,5 @@ export declare function Root(props: {
     /** Ref for the root element, used when `animate` is `true`. */
     rootRef?: Ref<HTMLDivElement>;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Root} component. */
 export type RootProps = Parameters<typeof Root>[0];

package/dist/esm/components/Select.d.ts

@@ -6,4 +6,5 @@ import React, { type SelectHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element;
+/** Props accepted by the {@link Select} component. */
 export type SelectProps = Parameters<typeof Select>[0];

package/dist/esm/components/Week.d.ts

@@ -10,4 +10,5 @@ export declare function Week(props: {
     /** The week to render. */
     week: CalendarWeek;
 } & HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
+/** Props accepted by the {@link Week} component. */
 export type WeekProps = Parameters<typeof Week>[0];

package/dist/esm/components/WeekNumber.d.ts

@@ -10,4 +10,5 @@ export declare function WeekNumber(props: {
     /** The week to display. */
     week: CalendarWeek;
 } & ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link WeekNumber} component. */
 export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

package/dist/esm/components/WeekNumberHeader.d.ts

@@ -6,4 +6,5 @@ import React, { type ThHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function WeekNumberHeader(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link WeekNumberHeader} component. */
 export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0];

package/dist/esm/components/Weekday.d.ts

@@ -6,4 +6,5 @@ import React, { type ThHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link Weekday} component. */
 export type WeekdayProps = Parameters<typeof Weekday>[0];

package/dist/esm/components/Weekdays.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weekdays(props: HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
+/** Props accepted by the {@link Weekdays} component. */
 export type WeekdaysProps = Parameters<typeof Weekdays>[0];

package/dist/esm/components/Weeks.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weeks(props: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
+/** Props accepted by the {@link Weeks} component. */
 export type WeeksProps = Parameters<typeof Weeks>[0];

package/dist/esm/locale.d.ts

@@ -11,7 +11,6 @@ export type { DayPickerLocale, DayPickerLocaleLabels, } from "./classes/DateLib.
  * @since V9.12.0
  */
 export { af } from "./locale/af.js";
-export { amET } from "./locale/am-ET.js";
 export { ar } from "./locale/ar.js";
 export { arDZ } from "./locale/ar-DZ.js";
 export { arEG } from "./locale/ar-EG.js";

package/dist/esm/locale.js

@@ -5,7 +5,6 @@ export * from "date-fns/locale";
  * @since V9.12.0
  */
 export { af } from "./locale/af.js";
-export { amET } from "./locale/am-ET.js";
 export { ar } from "./locale/ar.js";
 export { arDZ } from "./locale/ar-DZ.js";
 export { arEG } from "./locale/ar-EG.js";

package/dist/esm/types/props.d.ts

@@ -163,7 +163,8 @@ export interface PropsBase {
      * - `after`: Displays the buttons after the caption. This ensures the tab order
      *   matches the visual order.
      *
-     * Default value is `after`.
+     * If not set, DayPicker preserves its legacy layout, but the tab order may
+     * not align with the visual order when using `captionLayout="dropdown"`.
      *
      * @since 9.7.0
      * @see https://daypicker.dev/docs/customization#navigation-layouts

package/dist/esm/types/selection.d.ts

@@ -1,5 +1,6 @@
 import type { DayPickerProps } from "./props.js";
 import type { DateRange, Mode, Modifiers } from "./shared.js";
+/** Selection state and helpers for the active selection mode. */
 export type Selection<T extends DayPickerProps> = {
     /** The selected date(s). */
     selected: SelectedValue<T> | undefined;
@@ -8,12 +9,15 @@ export type Selection<T extends DayPickerProps> = {
     /** Whether the given date is selected. */
     isSelected: (date: Date) => boolean;
 };
+/** Selected value for single selection mode, respecting required selections. */
 export type SelectedSingle<T extends {
     required?: boolean;
 }> = T["required"] extends true ? Date : Date | undefined;
+/** Selected value for multiple selection mode, respecting required selections. */
 export type SelectedMulti<T extends {
     required?: boolean;
 }> = T["required"] extends true ? Date[] : Date[] | undefined;
+/** Selected value for range selection mode, respecting required selections. */
 export type SelectedRange<T extends {
     required?: boolean;
 }> = T["required"] extends true ? DateRange : DateRange | undefined;
@@ -46,12 +50,15 @@ export type SelectedValue<T> = T extends {
     mode: "range";
     required?: boolean;
 } ? SelectedRange<T> : undefined;
+/** Selection handler for single selection mode. */
 export type SelectHandlerSingle<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? Date : Date | undefined;
+/** Selection handler for multiple selection mode. */
 export type SelectHandlerMulti<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? Date[] : Date[] | undefined;
+/** Selection handler for range selection mode. */
 export type SelectHandlerRange<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? DateRange : DateRange | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "10.0.0-next.5",
+  "version": "10.0.0",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",

package/dist/cjs/locale/am-ET.d.ts

@@ -1,7 +0,0 @@
-import type { DayPickerLocale } from "../classes/DateLib.js";
-/**
- * Amharic (Ethiopia) locale backed by Intl for core names plus DayPicker
- * labels.
- */
-export declare const amET: DayPickerLocale;
-export default amET;