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

package/README.md

@@ -2,9 +2,11 @@
 
 DayPicker is a [React](https://react.dev) component for creating date pickers, calendars, and date inputs for web applications.
 
+You are reading the README for `react-day-picker`, the legacy DayPicker package name. It remains available for compatibility and exposes the same DayPicker API in v10, but new projects should use `@daypicker/react`.
+
 ## Documentation
 
-See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference, or read [the docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/docs/start.mdx).
+See **[daypicker.dev](https://daypicker.dev)** for guides, examples, and API reference, or read [the v10 docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/versioned_docs/version-next/start.mdx).
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/gpbl/react-day-picker/main/apps/website/static/img/screenshot-dark.png" />
@@ -27,15 +29,16 @@ DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies o
 
 ## Installation
 
+Install the legacy DayPicker package name:
+
 ```bash
-npm install react-day-picker
+npm install react-day-picker@next
 ```
 
-If you are trying the v10 prereleases with one of the alternative calendar
-integrations, install both packages together. For example:
+For new projects, prefer the `@daypicker/react` package name:
 
 ```bash
-npm install react-day-picker@next @daypicker/persian@next
+npm install @daypicker/react@next
 ```
 
 <a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
@@ -43,6 +46,8 @@ npm install react-day-picker@next @daypicker/persian@next
 ## Example
 
 ```tsx
+import { useState } from "react";
+
 import { DayPicker } from "react-day-picker";
 import "react-day-picker/style.css";
 

package/dist/cjs/DayPicker.js

@@ -164,12 +164,8 @@ 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;
@@ -242,15 +238,15 @@ function DayPicker(initialProps) {
     const handleDayMouseLeave = (0, react_1.useCallback)((day, modifiers) => (e) => {
         onDayMouseLeave?.(day.date, modifiers, e);
     }, [onDayMouseLeave]);
-    const handleMonthChange = (0, react_1.useCallback)((date) => (e) => {
+    const handleMonthChange = (0, react_1.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 = (0, react_1.useCallback)((date) => (e) => {
+    const handleYearChange = (0, react_1.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 } = (0, react_1.useMemo)(() => ({
         className: [classNames[UI_js_1.UI.Root], props.className]
@@ -284,83 +280,88 @@ function DayPicker(initialProps) {
     };
     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 ?? 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))));
-                                })));
-                        })))));
-            })),
+            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) => {
+                    const monthOffset = props.reverseMonths
+                        ? months.length - 1 - displayIndex
+                        : 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, monthOffset), 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, monthOffset), 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/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/locale.js

@@ -14,8 +14,8 @@ 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 });
-exports.id = exports.hy = exports.hu = exports.ht = exports.hr = exports.hi = exports.he = exports.gu = exports.gl = exports.gd = exports.fy = exports.frCH = exports.frCA = exports.fr = exports.fi = exports.faIR = exports.eu = exports.et = exports.es = exports.eo = exports.enZA = exports.enUS = exports.enNZ = exports.enIN = exports.enIE = exports.enGB = exports.enCA = exports.enAU = exports.el = exports.deAT = exports.de = exports.da = exports.cy = exports.cs = exports.ckb = exports.ca = exports.bs = exports.bn = exports.bg = exports.beTarask = exports.be = exports.az = exports.arTN = exports.arSA = exports.arMA = exports.arEG = exports.arDZ = exports.ar = exports.amET = exports.af = void 0;
-exports.zhTW = exports.zhHK = exports.zhCN = exports.vi = exports.uzCyrl = exports.uz = exports.uk = exports.ug = exports.tr = exports.th = exports.te = exports.ta = exports.sv = exports.srLatn = exports.sr = exports.sq = exports.sl = exports.sk = exports.se = exports.ru = exports.ro = exports.ptBR = exports.pt = exports.pl = exports.oc = exports.nn = exports.nlBE = exports.nl = exports.nb = exports.mt = exports.ms = exports.mn = exports.mk = exports.lv = exports.lt = exports.lb = exports.ko = exports.kn = exports.km = exports.kk = exports.ka = exports.jaHira = exports.ja = exports.itCH = exports.it = exports.is = void 0;
+exports.is = exports.id = exports.hy = exports.hu = exports.ht = exports.hr = exports.hi = exports.he = exports.gu = exports.gl = exports.gd = exports.fy = exports.frCH = exports.frCA = exports.fr = exports.fi = exports.faIR = exports.eu = exports.et = exports.es = exports.eo = exports.enZA = exports.enUS = exports.enNZ = exports.enIN = exports.enIE = exports.enGB = exports.enCA = exports.enAU = exports.el = exports.deAT = exports.de = exports.da = exports.cy = exports.cs = exports.ckb = exports.ca = exports.bs = exports.bn = exports.bg = exports.beTarask = exports.be = exports.az = exports.arTN = exports.arSA = exports.arMA = exports.arEG = exports.arDZ = exports.ar = exports.af = void 0;
+exports.zhTW = exports.zhHK = exports.zhCN = exports.vi = exports.uzCyrl = exports.uz = exports.uk = exports.ug = exports.tr = exports.th = exports.te = exports.ta = exports.sv = exports.srLatn = exports.sr = exports.sq = exports.sl = exports.sk = exports.se = exports.ru = exports.ro = exports.ptBR = exports.pt = exports.pl = exports.oc = exports.nn = exports.nlBE = exports.nl = exports.nb = exports.mt = exports.ms = exports.mn = exports.mk = exports.lv = exports.lt = exports.lb = exports.ko = exports.kn = exports.km = exports.kk = exports.ka = exports.jaHira = exports.ja = exports.itCH = exports.it = void 0;
 __exportStar(require("date-fns/locale"), exports);
 /**
  * DayPicker locales extended with translated labels.
@@ -24,8 +24,6 @@ __exportStar(require("date-fns/locale"), exports);
  */
 var af_js_1 = require("./locale/af.js");
 Object.defineProperty(exports, "af", { enumerable: true, get: function () { return af_js_1.af; } });
-var am_ET_js_1 = require("./locale/am-ET.js");
-Object.defineProperty(exports, "amET", { enumerable: true, get: function () { return am_ET_js_1.amET; } });
 var ar_js_1 = require("./locale/ar.js");
 Object.defineProperty(exports, "ar", { enumerable: true, get: function () { return ar_js_1.ar; } });
 var ar_DZ_js_1 = require("./locale/ar-DZ.js");

package/dist/cjs/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/cjs/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;