react-day-picker - npm Package Compare versions

Comparing version 9.0.0-rc.5 to 9.0.0-rc.6

dist/cjs/components/Dropdown.js

@@ -19,6 +19,5 @@ "use strict";
     const { options, className, components, classNames, ...selectProps } = props;
-    const cssClassRoot = [classNames[UI_js_1.UI.DropdownRoot]].join(" ");
     const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" ");
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
-    return (react_1.default.createElement("span", { className: cssClassRoot },
+    return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot] },
         react_1.default.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))),
@@ -25,0 +24,0 @@ react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], "aria-hidden": true },

dist/cjs/DayPicker.js

@@ -52,3 +52,11 @@ "use strict";
 function DayPicker(props) {
-    const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = props;
+    const { captionLayout, locale, mode, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles } = props;
+    const formatOptions = {
+        locale,
+        weekStartsOn: props.weekStartsOn,
+        firstWeekContainsDate: props.firstWeekContainsDate,
+        useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+        useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
+    };
+    const labelOptions = formatOptions;
     const { components, formatters, labels, dateLib, classNames } = (0, react_1.useMemo)(() => ({
@@ -74,5 +82,5 @@ dateLib: (0, getDateLib_js_1.getDateLib)(props.dateLib),
     const focus = (0, useFocus_js_1.useFocus)(props, calendar, modifiers, selection, dateLib);
-    const { isFocusTarget, focused: focusedDay, setFocused, blur, focusDayBefore, focusDayAfter, focusWeekBefore, focusWeekAfter, focusMonthBefore, focusMonthAfter, focusYearBefore, focusYearAfter, focusStartOfWeek, focusEndOfWeek } = focus;
+    const { isFocusTarget, focused: focusedDay, setFocused, moveFocus, blur } = focus;
     const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
-    const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(locale, weekStartsOn, ISOWeek, dateLib), [ISOWeek, dateLib, locale, weekStartsOn]);
+    const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(locale, props.weekStartsOn, props.ISOWeek, dateLib), [dateLib, locale, props.ISOWeek, props.weekStartsOn]);
     const isInteractive = mode !== undefined || onDayClick !== undefined;
@@ -91,98 +99,36 @@ const handlePreviousClick = (0, react_1.useCallback)(() => {
     }, [goToNextMonth, nextMonth, onNextClick]);
-    const handleDayClick = (0, react_1.useCallback)((day, m) => {
-        return (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleSelect(day.date, m, e);
-            setFocused(day);
-            onDayClick?.(day.date, m, e);
-        };
+    const handleDayClick = (0, react_1.useCallback)((day, m) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSelect(day.date, m, e);
+        setFocused(day);
+        onDayClick?.(day.date, m, e);
     }, [handleSelect, onDayClick, setFocused]);
-    const handleDayFocus = (0, react_1.useCallback)((day, m) => {
-        return (e) => {
-            setFocused(day);
-            onDayFocus?.(day.date, m, e);
-        };
+    const handleDayFocus = (0, react_1.useCallback)((day, m) => (e) => {
+        setFocused(day);
+        onDayFocus?.(day.date, m, e);
     }, [onDayFocus, setFocused]);
-    const handleDayBlur = (0, react_1.useCallback)((day, m) => {
-        return (e) => {
-            blur();
-            onDayBlur?.(day.date, m, e);
-        };
+    const handleDayBlur = (0, react_1.useCallback)((day, m) => (e) => {
+        blur();
+        onDayBlur?.(day.date, m, e);
     }, [blur, onDayBlur]);
-    const handleDayKeyDown = (0, react_1.useCallback)((day, modifiers) => {
-        return (e) => {
-            switch (e.key) {
-                case "ArrowLeft":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    dir === "rtl" ? focusDayAfter() : focusDayBefore();
-                    break;
-                case "ArrowRight":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    dir === "rtl" ? focusDayBefore() : focusDayAfter();
-                    break;
-                case "ArrowDown":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusWeekAfter();
-                    break;
-                case "ArrowUp":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusWeekBefore();
-                    break;
-                case " ":
-                case "Enter":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    selection?.handleSelect(day.date, modifiers, e);
-                    break;
-                case "PageUp":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.shiftKey ? focusYearBefore() : focusMonthBefore();
-                    break;
-                case "PageDown":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.shiftKey ? focusYearAfter() : focusMonthAfter();
-                    break;
-                case "Home":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusStartOfWeek();
-                    break;
-                case "End":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusEndOfWeek();
-                    break;
-            }
-            onDayKeyDown?.(day.date, modifiers, e);
+    const handleDayKeyDown = (0, react_1.useCallback)((day, modifiers) => (e) => {
+        const keyMap = {
+            ArrowLeft: ["day", props.dir === "rtl" ? "after" : "before"],
+            ArrowRight: ["day", props.dir === "rtl" ? "before" : "after"],
+            ArrowDown: ["week", "after"],
+            ArrowUp: ["week", "before"],
+            PageUp: [e.shiftKey ? "year" : "month", "before"],
+            PageDown: [e.shiftKey ? "year" : "month", "after"],
+            Home: ["startOfWeek", "before"],
+            End: ["endOfWeek", "after"]
         };
-    }, [
-        dir,
-        focusDayAfter,
-        focusDayBefore,
-        focusEndOfWeek,
-        focusMonthAfter,
-        focusMonthBefore,
-        focusStartOfWeek,
-        focusWeekAfter,
-        focusWeekBefore,
-        focusYearAfter,
-        focusYearBefore,
-        onDayKeyDown,
-        selection
-    ]);
-    const formatOptions = {
-        locale,
-        weekStartsOn,
-        firstWeekContainsDate,
-        useAdditionalWeekYearTokens,
-        useAdditionalDayOfYearTokens
-    };
-    const labelOptions = formatOptions;
+        if (keyMap[e.key]) {
+            e.preventDefault();
+            e.stopPropagation();
+            const [moveBy, moveDir] = keyMap[e.key];
+            moveFocus(moveBy, moveDir);
+        }
+        onDayKeyDown?.(day.date, modifiers, e);
+    }, [moveFocus, onDayKeyDown, props.dir]);
     const { className, style } = (0, react_1.useMemo)(() => ({
@@ -217,3 +163,3 @@ className: [classNames[UI_js_1.UI.Root], props.className]
                     return (react_1.default.createElement(components.Month, { className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
-                        react_1.default.createElement(components.MonthCaption, { 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.DropdownNav], style: styles?.[UI_js_1.UI.DropdownNav] },
+                        react_1.default.createElement(components.MonthCaption, { 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] },
                             captionLayout === "dropdown" ||
@@ -225,5 +171,5 @@ captionLayout === "dropdown-months" ? (react_1.default.createElement(components.Dropdown, { "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange, options: dropdownMonths, style: styles?.[UI_js_1.UI.Dropdown], value: calendarMonth.date.getMonth() })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date.getMonth()))),
                                 undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
-                            react_1.default.createElement(components.Weekdays, { className: classNames[UI_js_1.UI.Weekdays], hidden: props.hideWeekdayRow, role: "row", style: styles?.[UI_js_1.UI.Weekdays] },
-                                showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI_js_1.UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI_js_1.UI.WeekNumberHeader] }, !props.hideWeekdayRow && formatWeekNumberHeader())),
-                                weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, role: "columnheader", style: styles?.[UI_js_1.UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib))))),
+                            !props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { className: classNames[UI_js_1.UI.Weekdays], role: "row", style: styles?.[UI_js_1.UI.Weekdays] },
+                                showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI_js_1.UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI_js_1.UI.WeekNumberHeader] }, formatWeekNumberHeader())),
+                                weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, role: "columnheader", style: styles?.[UI_js_1.UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib)))))),
                             react_1.default.createElement(components.Weeks, { className: classNames[UI_js_1.UI.Weeks], role: "rowgroup", style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
@@ -253,3 +199,3 @@ return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI_js_1.UI.Week], week: week },
                                         const style = {
-                                            ...(0, getStyleForModifiers_js_1.getStyleForModifiers)(dayModifiers, modifiersStyles),
+                                            ...(0, getStyleForModifiers_js_1.getStyleForModifiers)(dayModifiers, props.modifiersStyles),
                                             ...styles?.[UI_js_1.UI.Day]
@@ -259,3 +205,3 @@ };
                                             classNames[UI_js_1.UI.Day],
-                                            ...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(dayModifiers, classNames, modifiersClassNames)
+                                            ...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(dayModifiers, classNames, props.modifiersClassNames)
                                         ];
@@ -262,0 +208,0 @@ const ariaLabel = !isInteractive

dist/cjs/formatters/formatCaption.d.ts

 import { FormatOptions } from "../lib/index.js";
 import type { DateLib } from "../types/index.js";
 /**
- * The default formatter for the caption element. As default, it returns the
- * month and year.
+ * Format the caption of the month.
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Formatters
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatCaption.js

@@ -7,5 +7,5 @@ "use strict";
 /**
- * The default formatter for the caption element. As default, it returns the
- * month and year.
+ * Format the caption of the month.
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Formatters
@@ -12,0 +12,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatDay.d.ts

 import type { FormatOptions } from "../lib/dateLib.js";
 import type { DateLib } from "../types/index.js";
 /**
- * The default formatter for the day grid cell element. As default, it returns
- * the date of the day.
+ * Format the day date shown in the day cell.
  *
+ * @defaultValue `d` (e.g. "1")
  * @group Formatters
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatDay.js

@@ -6,5 +6,5 @@ "use strict";
 /**
- * The default formatter for the day grid cell element. As default, it returns
- * the date of the day.
+ * Format the day date shown in the day cell.
  *
+ * @defaultValue `d` (e.g. "1")
  * @group Formatters
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatMonthDropdown.d.ts

 /**
- * The default formatter for the month dropdown option. As default, it returns
- * the month name.
+ * Format the month number for the dropdown option label.
  *
+ * @defaultValue `monthNumber.toString()`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatMonthDropdown.js

@@ -6,5 +6,5 @@ "use strict";
 /**
- * The default formatter for the month dropdown option. As default, it returns
- * the month name.
+ * Format the month number for the dropdown option label.
  *
+ * @defaultValue `monthNumber.toString()`
  * @group Formatters
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatWeekdayName.d.ts

 import type { FormatOptions } from "../lib/dateLib.js";
 import type { DateLib } from "../types/index.js";
 /**
- * The default formatter for the name of the weekday. As default, it returns the
- * short name of the weekday (e.g. "Mo").
+ * Format the weekday name to be displayed in the weekdays header.
  *
+ * @defaultValue `cccccc` (e.g. "Mo" for Monday)
  * @group Formatters
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatWeekdayName.js

@@ -6,5 +6,5 @@ "use strict";
 /**
- * The default formatter for the name of the weekday. As default, it returns the
- * short name of the weekday (e.g. "Mo").
+ * Format the weekday name to be displayed in the weekdays header.
  *
+ * @defaultValue `cccccc` (e.g. "Mo" for Monday)
  * @group Formatters
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatWeekNumber.d.ts

 /**
- * The default formatter for the week numbers. As default, it returns the week
- * number with a leading zero if the week number is less than 10.
+ * Format the week number.
  *
- * @param weekNumber - The week number to format.
+ * @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
  * @group Formatters
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatWeekNumber.js

@@ -5,6 +5,5 @@ "use strict";
 /**
- * The default formatter for the week numbers. As default, it returns the week
- * number with a leading zero if the week number is less than 10.
+ * Format the week number.
  *
- * @param weekNumber - The week number to format.
+ * @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
  * @group Formatters
@@ -11,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatWeekNumberHeader.d.ts

 /**
- * The default formatter for the week numbers header. As default, it returns an
- * empty string.
+ * Format the week number header.
  *
+ * @defaultValue `""`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatWeekNumberHeader.js

@@ -5,5 +5,5 @@ "use strict";
 /**
- * The default formatter for the week numbers header. As default, it returns an
- * empty string.
+ * Format the week number header.
  *
+ * @defaultValue `""`
  * @group Formatters
@@ -10,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatYearDropdown.d.ts

 /**
- * The default formatter for the Year dropdown option. As default, it returns
- * the year.
+ * Format the years for the dropdown option label.
  *
+ * @defaultValue `year.toString()`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/formatters/formatYearDropdown.js

@@ -6,5 +6,5 @@ "use strict";
 /**
- * The default formatter for the Year dropdown option. As default, it returns
- * the year.
+ * Format the years for the dropdown option label.
  *
+ * @defaultValue `year.toString()`
  * @group Formatters
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/cjs/helpers/getNextFocus.d.ts

@@ -5,2 +5,2 @@ import { CalendarDay } from "../classes/index.js";
 /** The date that is currently focused. */
-refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;
+refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;

dist/cjs/helpers/getNextFocus.js

@@ -9,3 +9,3 @@ "use strict";
 /** The date that is currently focused. */
-refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) {
+refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
     if (attempt > 365) {
@@ -16,6 +16,5 @@ // Limit the recursion to 365 attempts
     const focusableDate = (0, getFocusableDate_js_1.getFocusableDate)(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date?
-    calendarStartMonth, calendarEndMonth, options, dateLib);
-    const isDisabled = Boolean(options.disabled &&
-        (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.disabled, dateLib));
-    const isHidden = Boolean(options.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.hidden, dateLib));
+    calendarStartMonth, calendarEndMonth, props, dateLib);
+    const isDisabled = Boolean(props.disabled && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, props.disabled, dateLib));
+    const isHidden = Boolean(props.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, props.hidden, dateLib));
     const targetMonth = focusableDate;
@@ -27,4 +26,4 @@ const focusDay = new index_js_1.CalendarDay(focusableDate, targetMonth, dateLib);
     // Recursively attempt to find the next focusable date
-    return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1);
+    return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt + 1);
 }
 //# sourceMappingURL=getNextFocus.js.map

dist/cjs/helpers/getNextMonth.js

@@ -25,3 +25,3 @@ "use strict";
     const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth);
-    if (monthsDiff < numberOfMonths ?? 1) {
+    if (monthsDiff < numberOfMonths) {
         return undefined;
@@ -28,0 +28,0 @@ }

dist/cjs/helpers/getPreviousMonth.js

@@ -20,3 +20,3 @@ "use strict";
     const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
-    const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
+    const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1;
     const month = startOfMonth(firstDisplayedMonth);
@@ -23,0 +23,0 @@ if (!calendarStartMonth) {

dist/cjs/labels/labelDayButton.d.ts

 import type { DateLib, LabelOptions } from "../index.js";
 import type { Modifiers } from "../types/index.js";
 /**
- * Return an ARIA label for the day button.
+ * The ARIA label for the day button.
  *
@@ -9,2 +9,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g.
  *
+ * @defaultValue The formatted date.
  * @group Labels
@@ -11,0 +12,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelDayButton.js

@@ -7,3 +7,3 @@ "use strict";
 /**
- * Return an ARIA label for the day button.
+ * The ARIA label for the day button.
  *
@@ -13,2 +13,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g.
  *
+ * @defaultValue The formatted date.
  * @group Labels
@@ -15,0 +16,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelGrid.d.ts

@@ -7,2 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js";
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelGrid.js

@@ -10,2 +10,3 @@ "use strict";
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Labels
@@ -12,0 +13,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelMonthDropdown.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the months dropdown element.
+ * The ARIA label for the months dropdown.
  *
+ * @defaultValue `"Choose the Month"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelMonthDropdown.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Return the default ARIA label for the months dropdown element.
+ * The ARIA label for the months dropdown.
  *
+ * @defaultValue `"Choose the Month"`
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelNav.d.ts

 /**
- * Return an ARIA label for the navigation toolbar, that will be announced when
- * entering it (optional).
+ * The ARIA label for the navigation toolbar.
  *
+ * @defaultValue `""`
  * @group Labels
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelNav.js

@@ -5,5 +5,5 @@ "use strict";
 /**
- * Return an ARIA label for the navigation toolbar, that will be announced when
- * entering it (optional).
+ * The ARIA label for the navigation toolbar.
  *
+ * @defaultValue `""`
  * @group Labels
@@ -10,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelNext.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for next month button.
  *
+ * @defaultValue `"Go to the Next Month"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelNext.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for next month button.
  *
+ * @defaultValue `"Go to the Next Month"`
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelPrevious.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for previous month button.
  *
+ * @defaultValue `"Go to the Previous Month"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelPrevious.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for previous month button.
  *
+ * @defaultValue `"Go to the Previous Month"`
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelWeekday.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 import type { DateLib } from "../types/index.js";
 /**
- * Return he default ARIA label for the Weekday colum header.
+ * The ARIA label for the Weekday column header.
  *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelWeekday.js

@@ -6,4 +6,5 @@ "use strict";
 /**
- * Return he default ARIA label for the Weekday colum header.
+ * The ARIA label for the Weekday column header.
  *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
  * @group Labels
@@ -10,0 +11,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelWeekNumber.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the week number element.
+ * The ARIA label for the week number cell (the first cell in the row).
  *
+ * @defaultValue `Week ${weekNumber}`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelWeekNumber.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Return the default ARIA label for the week number element.
+ * The ARIA label for the week number cell (the first cell in the row).
  *
+ * @defaultValue `Week ${weekNumber}`
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelWeekNumberHeader.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the week number header element.
+ * The ARIA label for the week number header element.
  *
+ * @defaultValue `"Week Number"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelWeekNumberHeader.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Return the default ARIA label for the week number header element.
+ * The ARIA label for the week number header element.
  *
+ * @defaultValue `"Week Number"`
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelYearDropdown.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the years dropdown.
+ * The ARIA label for the years dropdown.
  *
+ * @defaultValue `"Choose the Year"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/labels/labelYearDropdown.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Return the default ARIA label for the years dropdown.
+ * The ARIA label for the years dropdown.
  *
+ * @defaultValue `"Choose the Year"`
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/cjs/types/props.d.ts

@@ -61,3 +61,3 @@ import React from "react";
     modifiersStyles?: ModifiersStyles;
-    /** A unique id to replace the React generated id. Used for ARIA labels. */
+    /** A unique id to add to the root element. */
     id?: string;
@@ -199,3 +199,3 @@ /**
      */
-    hideWeekdayRow?: boolean;
+    hideWeekdays?: boolean;
     /**
@@ -234,3 +234,3 @@ * Show the outside days (days falling in the next or the previous month).
      */
-    components?: CustomComponents;
+    components?: Partial<CustomComponents>;
     /**
@@ -237,0 +237,0 @@ * Add a footer to the calendar, acting as live region.

dist/cjs/types/shared.d.ts

@@ -20,6 +20,49 @@ import type { CSSProperties } from "react";
  *
- * @see https://github.com/gpbl/react-day-picker/blob/main/src/components/custom-components.ts
+ * @see https://daypicker.dev/next/guides/custom-components
  */
 export type CustomComponents = {
-    [key in keyof typeof components]?: (typeof components)[key];
+    /** Render any button element in DayPicker. */
+    Button: typeof components.Button;
+    /** Render the chevron icon used in the navigation buttons and dropdowns. */
+    Chevron: typeof components.Chevron;
+    /** Render the caption label of the month grid. */
+    CaptionLabel: typeof components.CaptionLabel;
+    /** Render the day cell in the month grid. */
+    Day: typeof components.Day;
+    /** Render the button containing the day in the day cell. */
+    DayButton: typeof components.DayButton;
+    /** Render the dropdown element to select years and months. */
+    Dropdown: typeof components.Dropdown;
+    /** Render the container of the dropdowns. */
+    DropdownNav: typeof components.DropdownNav;
+    /** Render the footer element announced by screen readers. */
+    Footer: typeof components.Footer;
+    /** Render the container of the MonthGrid. */
+    Month: typeof components.Month;
+    /** Render the caption of the month grid. */
+    MonthCaption: typeof components.MonthCaption;
+    /** Render the grid of days in a month. */
+    MonthGrid: typeof components.MonthGrid;
+    /** Wrapper of the month grids. */
+    Months: typeof components.Months;
+    /** Render the navigation element with the next and previous buttons. */
+    Nav: typeof components.Nav;
+    /** Render the `<option>` HTML element in the dropdown. */
+    Option: typeof components.Option;
+    /** Render the root element of the calendar. */
+    Root: typeof components.Root;
+    /** Render the select element in the dropdowns. */
+    Select: typeof components.Select;
+    /** Render the weeks section in the month grid. */
+    Weeks: typeof components.Weeks;
+    /** Render the week rows. */
+    Week: typeof components.Week;
+    /** Render the weekday name in the header. */
+    Weekday: typeof components.Weekday;
+    /** Render the row containing the week days. */
+    Weekdays: typeof components.Weekdays;
+    /** Render the cell with the number of the week. */
+    WeekNumber: typeof components.WeekNumber;
+    /** Render the header of the week number column. */
+    WeekNumberHeader: typeof components.WeekNumberHeader;
 };
@@ -26,0 +69,0 @@ export type DateLib = typeof dateLib;

dist/cjs/UI.d.ts

@@ -27,3 +27,3 @@ /**
     /** The container of the dropdown navigation (when enabled). */
-    DropdownNav = "dropdown_nav",
+    Dropdowns = "dropdowns",
     /** The dropdown element to select for years and months. */
@@ -30,0 +30,0 @@ Dropdown = "dropdown",

dist/cjs/UI.js

@@ -31,3 +31,3 @@ "use strict";
     /** The container of the dropdown navigation (when enabled). */
-    UI["DropdownNav"] = "dropdown_nav";
+    UI["Dropdowns"] = "dropdowns";
     /** The dropdown element to select for years and months. */
@@ -34,0 +34,0 @@ UI["Dropdown"] = "dropdown";

dist/cjs/useFocus.d.ts

 import type { CalendarDay } from "./classes/index.js";
-import type { DateLib, DayPickerProps, Mode } from "./types/index.js";
+import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Mode } from "./types/index.js";
 import { UseCalendar } from "./useCalendar.js";
@@ -9,3 +9,3 @@ import { UseModifiers } from "./useModifiers.js";
     focused: CalendarDay | undefined;
-    /** The date that is target of the focus when tabbing into the month grid. */
+    /** Check if the given day is the focus target when entering the calendar. */
     isFocusTarget: (day: CalendarDay) => boolean;
@@ -18,16 +18,3 @@ /** Focus the given day. */
     blur: () => void;
-    /** Focus the day after the focused day. */
-    focusDayAfter: () => void;
-    /** Focus the day before the focused day. */
-    focusDayBefore: () => void;
-    /** Focus the day in the week before the focused day. */
-    focusWeekBefore: () => void;
-    /** Focus the day in the week after the focused day. */
-    focusWeekAfter: () => void;
-    focusMonthBefore: () => void;
-    focusMonthAfter: () => void;
-    focusYearBefore: () => void;
-    focusYearAfter: () => void;
-    focusStartOfWeek: () => void;
-    focusEndOfWeek: () => void;
+    moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void;
 };
@@ -34,0 +21,0 @@ /** @private */

dist/cjs/useFocus.js

@@ -36,12 +36,3 @@ "use strict";
         blur,
-        focusDayAfter: () => moveFocus("day", "after"),
-        focusDayBefore: () => moveFocus("day", "before"),
-        focusWeekAfter: () => moveFocus("week", "after"),
-        focusWeekBefore: () => moveFocus("week", "before"),
-        focusMonthBefore: () => moveFocus("month", "before"),
-        focusMonthAfter: () => moveFocus("month", "after"),
-        focusYearBefore: () => moveFocus("year", "before"),
-        focusYearAfter: () => moveFocus("year", "after"),
-        focusStartOfWeek: () => moveFocus("startOfWeek", "before"),
-        focusEndOfWeek: () => moveFocus("endOfWeek", "after")
+        moveFocus
     };
@@ -48,0 +39,0 @@ return useFocus;

dist/cjs/utils/dateMatchModifiers.d.ts

@@ -6,3 +6,3 @@ import type { DateLib, Matcher } from "../types/index.js";
  * Returns whether a day matches against at least one of the given
- * {@link Matcher}`.
+ * {@link Matcher}.
  *
@@ -9,0 +9,0 @@ * ```tsx

dist/cjs/utils/dateMatchModifiers.js

@@ -13,3 +13,3 @@ "use strict";
  * Returns whether a day matches against at least one of the given
- * {@link Matcher}`.
+ * {@link Matcher}.
  *
@@ -16,0 +16,0 @@ * ```tsx

dist/esm/components/Dropdown.js

@@ -13,6 +13,5 @@ import React from "react";
     const { options, className, components, classNames, ...selectProps } = props;
-    const cssClassRoot = [classNames[UI.DropdownRoot]].join(" ");
     const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
-    return (React.createElement("span", { className: cssClassRoot },
+    return (React.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot] },
         React.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (React.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))),
@@ -19,0 +18,0 @@ React.createElement("span", { className: classNames[UI.CaptionLabel], "aria-hidden": true },

dist/esm/DayPicker.js

@@ -26,3 +26,11 @@ import React, { useCallback, useMemo } from "react";
 export function DayPicker(props) {
-    const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = props;
+    const { captionLayout, locale, mode, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles } = props;
+    const formatOptions = {
+        locale,
+        weekStartsOn: props.weekStartsOn,
+        firstWeekContainsDate: props.firstWeekContainsDate,
+        useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+        useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
+    };
+    const labelOptions = formatOptions;
     const { components, formatters, labels, dateLib, classNames } = useMemo(() => ({
@@ -48,5 +56,5 @@ dateLib: getDateLib(props.dateLib),
     const focus = useFocus(props, calendar, modifiers, selection, dateLib);
-    const { isFocusTarget, focused: focusedDay, setFocused, blur, focusDayBefore, focusDayAfter, focusWeekBefore, focusWeekAfter, focusMonthBefore, focusMonthAfter, focusYearBefore, focusYearAfter, focusStartOfWeek, focusEndOfWeek } = focus;
+    const { isFocusTarget, focused: focusedDay, setFocused, moveFocus, blur } = focus;
     const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
-    const weekdays = useMemo(() => getWeekdays(locale, weekStartsOn, ISOWeek, dateLib), [ISOWeek, dateLib, locale, weekStartsOn]);
+    const weekdays = useMemo(() => getWeekdays(locale, props.weekStartsOn, props.ISOWeek, dateLib), [dateLib, locale, props.ISOWeek, props.weekStartsOn]);
     const isInteractive = mode !== undefined || onDayClick !== undefined;
@@ -65,98 +73,36 @@ const handlePreviousClick = useCallback(() => {
     }, [goToNextMonth, nextMonth, onNextClick]);
-    const handleDayClick = useCallback((day, m) => {
-        return (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleSelect(day.date, m, e);
-            setFocused(day);
-            onDayClick?.(day.date, m, e);
-        };
+    const handleDayClick = useCallback((day, m) => (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSelect(day.date, m, e);
+        setFocused(day);
+        onDayClick?.(day.date, m, e);
     }, [handleSelect, onDayClick, setFocused]);
-    const handleDayFocus = useCallback((day, m) => {
-        return (e) => {
-            setFocused(day);
-            onDayFocus?.(day.date, m, e);
-        };
+    const handleDayFocus = useCallback((day, m) => (e) => {
+        setFocused(day);
+        onDayFocus?.(day.date, m, e);
     }, [onDayFocus, setFocused]);
-    const handleDayBlur = useCallback((day, m) => {
-        return (e) => {
-            blur();
-            onDayBlur?.(day.date, m, e);
-        };
+    const handleDayBlur = useCallback((day, m) => (e) => {
+        blur();
+        onDayBlur?.(day.date, m, e);
     }, [blur, onDayBlur]);
-    const handleDayKeyDown = useCallback((day, modifiers) => {
-        return (e) => {
-            switch (e.key) {
-                case "ArrowLeft":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    dir === "rtl" ? focusDayAfter() : focusDayBefore();
-                    break;
-                case "ArrowRight":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    dir === "rtl" ? focusDayBefore() : focusDayAfter();
-                    break;
-                case "ArrowDown":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusWeekAfter();
-                    break;
-                case "ArrowUp":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusWeekBefore();
-                    break;
-                case " ":
-                case "Enter":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    selection?.handleSelect(day.date, modifiers, e);
-                    break;
-                case "PageUp":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.shiftKey ? focusYearBefore() : focusMonthBefore();
-                    break;
-                case "PageDown":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    e.shiftKey ? focusYearAfter() : focusMonthAfter();
-                    break;
-                case "Home":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusStartOfWeek();
-                    break;
-                case "End":
-                    e.preventDefault();
-                    e.stopPropagation();
-                    focusEndOfWeek();
-                    break;
-            }
-            onDayKeyDown?.(day.date, modifiers, e);
+    const handleDayKeyDown = useCallback((day, modifiers) => (e) => {
+        const keyMap = {
+            ArrowLeft: ["day", props.dir === "rtl" ? "after" : "before"],
+            ArrowRight: ["day", props.dir === "rtl" ? "before" : "after"],
+            ArrowDown: ["week", "after"],
+            ArrowUp: ["week", "before"],
+            PageUp: [e.shiftKey ? "year" : "month", "before"],
+            PageDown: [e.shiftKey ? "year" : "month", "after"],
+            Home: ["startOfWeek", "before"],
+            End: ["endOfWeek", "after"]
         };
-    }, [
-        dir,
-        focusDayAfter,
-        focusDayBefore,
-        focusEndOfWeek,
-        focusMonthAfter,
-        focusMonthBefore,
-        focusStartOfWeek,
-        focusWeekAfter,
-        focusWeekBefore,
-        focusYearAfter,
-        focusYearBefore,
-        onDayKeyDown,
-        selection
-    ]);
-    const formatOptions = {
-        locale,
-        weekStartsOn,
-        firstWeekContainsDate,
-        useAdditionalWeekYearTokens,
-        useAdditionalDayOfYearTokens
-    };
-    const labelOptions = formatOptions;
+        if (keyMap[e.key]) {
+            e.preventDefault();
+            e.stopPropagation();
+            const [moveBy, moveDir] = keyMap[e.key];
+            moveFocus(moveBy, moveDir);
+        }
+        onDayKeyDown?.(day.date, modifiers, e);
+    }, [moveFocus, onDayKeyDown, props.dir]);
     const { className, style } = useMemo(() => ({
@@ -191,3 +137,3 @@ className: [classNames[UI.Root], props.className]
                     return (React.createElement(components.Month, { className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
-                        React.createElement(components.MonthCaption, { className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.DropdownNav], style: styles?.[UI.DropdownNav] },
+                        React.createElement(components.MonthCaption, { 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] },
                             captionLayout === "dropdown" ||
@@ -199,5 +145,5 @@ captionLayout === "dropdown-months" ? (React.createElement(components.Dropdown, { "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange, options: dropdownMonths, style: styles?.[UI.Dropdown], value: calendarMonth.date.getMonth() })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date.getMonth()))),
                                 undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
-                            React.createElement(components.Weekdays, { className: classNames[UI.Weekdays], hidden: props.hideWeekdayRow, role: "row", style: styles?.[UI.Weekdays] },
-                                showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI.WeekNumberHeader] }, !props.hideWeekdayRow && formatWeekNumberHeader())),
-                                weekdays.map((weekday, i) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI.Weekday], key: i, role: "columnheader", style: styles?.[UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib))))),
+                            !props.hideWeekdays && (React.createElement(components.Weekdays, { className: classNames[UI.Weekdays], role: "row", style: styles?.[UI.Weekdays] },
+                                showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI.WeekNumberHeader] }, formatWeekNumberHeader())),
+                                weekdays.map((weekday, i) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI.Weekday], key: i, role: "columnheader", style: styles?.[UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib)))))),
                             React.createElement(components.Weeks, { className: classNames[UI.Weeks], role: "rowgroup", style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
@@ -227,3 +173,3 @@ return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI.Week], week: week },
                                         const style = {
-                                            ...getStyleForModifiers(dayModifiers, modifiersStyles),
+                                            ...getStyleForModifiers(dayModifiers, props.modifiersStyles),
                                             ...styles?.[UI.Day]
@@ -233,3 +179,3 @@ };
                                             classNames[UI.Day],
-                                            ...getClassNamesForModifiers(dayModifiers, classNames, modifiersClassNames)
+                                            ...getClassNamesForModifiers(dayModifiers, classNames, props.modifiersClassNames)
                                         ];
@@ -236,0 +182,0 @@ const ariaLabel = !isInteractive

dist/esm/formatters/formatCaption.d.ts

 import { FormatOptions } from "../lib/index.js";
 import type { DateLib } from "../types/index.js";
 /**
- * The default formatter for the caption element. As default, it returns the
- * month and year.
+ * Format the caption of the month.
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Formatters
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatCaption.js

 import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * The default formatter for the caption element. As default, it returns the
- * month and year.
+ * Format the caption of the month.
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Formatters
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatDay.d.ts

 import type { FormatOptions } from "../lib/dateLib.js";
 import type { DateLib } from "../types/index.js";
 /**
- * The default formatter for the day grid cell element. As default, it returns
- * the date of the day.
+ * Format the day date shown in the day cell.
  *
+ * @defaultValue `d` (e.g. "1")
  * @group Formatters
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatDay.js

 import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * The default formatter for the day grid cell element. As default, it returns
- * the date of the day.
+ * Format the day date shown in the day cell.
  *
+ * @defaultValue `d` (e.g. "1")
  * @group Formatters
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatMonthDropdown.d.ts

 /**
- * The default formatter for the month dropdown option. As default, it returns
- * the month name.
+ * Format the month number for the dropdown option label.
  *
+ * @defaultValue `monthNumber.toString()`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatMonthDropdown.js

 import { enUS } from "../lib/locales.js";
 /**
- * The default formatter for the month dropdown option. As default, it returns
- * the month name.
+ * Format the month number for the dropdown option label.
  *
+ * @defaultValue `monthNumber.toString()`
  * @group Formatters
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatWeekdayName.d.ts

 import type { FormatOptions } from "../lib/dateLib.js";
 import type { DateLib } from "../types/index.js";
 /**
- * The default formatter for the name of the weekday. As default, it returns the
- * short name of the weekday (e.g. "Mo").
+ * Format the weekday name to be displayed in the weekdays header.
  *
+ * @defaultValue `cccccc` (e.g. "Mo" for Monday)
  * @group Formatters
@@ -8,0 +8,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatWeekdayName.js

 import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * The default formatter for the name of the weekday. As default, it returns the
- * short name of the weekday (e.g. "Mo").
+ * Format the weekday name to be displayed in the weekdays header.
  *
+ * @defaultValue `cccccc` (e.g. "Mo" for Monday)
  * @group Formatters
@@ -7,0 +7,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatWeekNumber.d.ts

 /**
- * The default formatter for the week numbers. As default, it returns the week
- * number with a leading zero if the week number is less than 10.
+ * Format the week number.
  *
- * @param weekNumber - The week number to format.
+ * @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
  * @group Formatters
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatWeekNumber.js

 /**
- * The default formatter for the week numbers. As default, it returns the week
- * number with a leading zero if the week number is less than 10.
+ * Format the week number.
  *
- * @param weekNumber - The week number to format.
+ * @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
  * @group Formatters
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatWeekNumberHeader.d.ts

 /**
- * The default formatter for the week numbers header. As default, it returns an
- * empty string.
+ * Format the week number header.
  *
+ * @defaultValue `""`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatWeekNumberHeader.js

 /**
- * The default formatter for the week numbers header. As default, it returns an
- * empty string.
+ * Format the week number header.
  *
+ * @defaultValue `""`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatYearDropdown.d.ts

 /**
- * The default formatter for the Year dropdown option. As default, it returns
- * the year.
+ * Format the years for the dropdown option label.
  *
+ * @defaultValue `year.toString()`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/formatters/formatYearDropdown.js

 /**
- * The default formatter for the Year dropdown option. As default, it returns
- * the year.
+ * Format the years for the dropdown option label.
  *
+ * @defaultValue `year.toString()`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

dist/esm/helpers/getNextFocus.d.ts

@@ -5,2 +5,2 @@ import { CalendarDay } from "../classes/index.js";
 /** The date that is currently focused. */
-refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;
+refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;

dist/esm/helpers/getNextFocus.js

@@ -6,3 +6,3 @@ import { CalendarDay } from "../classes/index.js";
 /** The date that is currently focused. */
-refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) {
+refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
     if (attempt > 365) {
@@ -13,6 +13,5 @@ // Limit the recursion to 365 attempts
     const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date?
-    calendarStartMonth, calendarEndMonth, options, dateLib);
-    const isDisabled = Boolean(options.disabled &&
-        dateMatchModifiers(focusableDate, options.disabled, dateLib));
-    const isHidden = Boolean(options.hidden && dateMatchModifiers(focusableDate, options.hidden, dateLib));
+    calendarStartMonth, calendarEndMonth, props, dateLib);
+    const isDisabled = Boolean(props.disabled && dateMatchModifiers(focusableDate, props.disabled, dateLib));
+    const isHidden = Boolean(props.hidden && dateMatchModifiers(focusableDate, props.hidden, dateLib));
     const targetMonth = focusableDate;
@@ -24,4 +23,4 @@ const focusDay = new CalendarDay(focusableDate, targetMonth, dateLib);
     // Recursively attempt to find the next focusable date
-    return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1);
+    return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt + 1);
 }
 //# sourceMappingURL=getNextFocus.js.map

dist/esm/helpers/getNextMonth.js

@@ -22,3 +22,3 @@ /**
     const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth);
-    if (monthsDiff < numberOfMonths ?? 1) {
+    if (monthsDiff < numberOfMonths) {
         return undefined;
@@ -25,0 +25,0 @@ }

dist/esm/helpers/getPreviousMonth.js

@@ -17,3 +17,3 @@ /**
     const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
-    const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
+    const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1;
     const month = startOfMonth(firstDisplayedMonth);
@@ -20,0 +20,0 @@ if (!calendarStartMonth) {

dist/esm/labels/labelDayButton.d.ts

 import type { DateLib, LabelOptions } from "../index.js";
 import type { Modifiers } from "../types/index.js";
 /**
- * Return an ARIA label for the day button.
+ * The ARIA label for the day button.
  *
@@ -9,2 +9,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g.
  *
+ * @defaultValue The formatted date.
  * @group Labels
@@ -11,0 +12,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelDayButton.js

 import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * Return an ARIA label for the day button.
+ * The ARIA label for the day button.
  *
@@ -8,2 +8,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g.
  *
+ * @defaultValue The formatted date.
  * @group Labels
@@ -10,0 +11,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelGrid.d.ts

@@ -7,2 +7,3 @@ import type { LabelOptions } from "../lib/dateLib.js";
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Labels
@@ -9,0 +10,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelGrid.js

@@ -6,2 +6,3 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Labels
@@ -8,0 +9,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelMonthDropdown.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the months dropdown element.
+ * The ARIA label for the months dropdown.
  *
+ * @defaultValue `"Choose the Month"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelMonthDropdown.js

 /**
- * Return the default ARIA label for the months dropdown element.
+ * The ARIA label for the months dropdown.
  *
+ * @defaultValue `"Choose the Month"`
  * @group Labels
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelNav.d.ts

 /**
- * Return an ARIA label for the navigation toolbar, that will be announced when
- * entering it (optional).
+ * The ARIA label for the navigation toolbar.
  *
+ * @defaultValue `""`
  * @group Labels
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelNav.js

 /**
- * Return an ARIA label for the navigation toolbar, that will be announced when
- * entering it (optional).
+ * The ARIA label for the navigation toolbar.
  *
+ * @defaultValue `""`
  * @group Labels
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelNext.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for next month button.
  *
+ * @defaultValue `"Go to the Next Month"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelNext.js

 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for next month button.
  *
+ * @defaultValue `"Go to the Next Month"`
  * @group Labels
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelPrevious.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for previous month button.
  *
+ * @defaultValue `"Go to the Previous Month"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelPrevious.js

 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for previous month button.
  *
+ * @defaultValue `"Go to the Previous Month"`
  * @group Labels
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelWeekday.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 import type { DateLib } from "../types/index.js";
 /**
- * Return he default ARIA label for the Weekday colum header.
+ * The ARIA label for the Weekday column header.
  *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelWeekday.js

 import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * Return he default ARIA label for the Weekday colum header.
+ * The ARIA label for the Weekday column header.
  *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelWeekNumber.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the week number element.
+ * The ARIA label for the week number cell (the first cell in the row).
  *
+ * @defaultValue `Week ${weekNumber}`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelWeekNumber.js

 /**
- * Return the default ARIA label for the week number element.
+ * The ARIA label for the week number cell (the first cell in the row).
  *
+ * @defaultValue `Week ${weekNumber}`
  * @group Labels
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelWeekNumberHeader.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the week number header element.
+ * The ARIA label for the week number header element.
  *
+ * @defaultValue `"Week Number"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelWeekNumberHeader.js

 /**
- * Return the default ARIA label for the week number header element.
+ * The ARIA label for the week number header element.
  *
+ * @defaultValue `"Week Number"`
  * @group Labels
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelYearDropdown.d.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the years dropdown.
+ * The ARIA label for the years dropdown.
  *
+ * @defaultValue `"Choose the Year"`
  * @group Labels
@@ -6,0 +7,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/labels/labelYearDropdown.js

 /**
- * Return the default ARIA label for the years dropdown.
+ * The ARIA label for the years dropdown.
  *
+ * @defaultValue `"Choose the Year"`
  * @group Labels
@@ -5,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

dist/esm/types/props.d.ts

@@ -61,3 +61,3 @@ import React from "react";
     modifiersStyles?: ModifiersStyles;
-    /** A unique id to replace the React generated id. Used for ARIA labels. */
+    /** A unique id to add to the root element. */
     id?: string;
@@ -199,3 +199,3 @@ /**
      */
-    hideWeekdayRow?: boolean;
+    hideWeekdays?: boolean;
     /**
@@ -234,3 +234,3 @@ * Show the outside days (days falling in the next or the previous month).
      */
-    components?: CustomComponents;
+    components?: Partial<CustomComponents>;
     /**
@@ -237,0 +237,0 @@ * Add a footer to the calendar, acting as live region.

dist/esm/types/shared.d.ts

@@ -20,6 +20,49 @@ import type { CSSProperties } from "react";
  *
- * @see https://github.com/gpbl/react-day-picker/blob/main/src/components/custom-components.ts
+ * @see https://daypicker.dev/next/guides/custom-components
  */
 export type CustomComponents = {
-    [key in keyof typeof components]?: (typeof components)[key];
+    /** Render any button element in DayPicker. */
+    Button: typeof components.Button;
+    /** Render the chevron icon used in the navigation buttons and dropdowns. */
+    Chevron: typeof components.Chevron;
+    /** Render the caption label of the month grid. */
+    CaptionLabel: typeof components.CaptionLabel;
+    /** Render the day cell in the month grid. */
+    Day: typeof components.Day;
+    /** Render the button containing the day in the day cell. */
+    DayButton: typeof components.DayButton;
+    /** Render the dropdown element to select years and months. */
+    Dropdown: typeof components.Dropdown;
+    /** Render the container of the dropdowns. */
+    DropdownNav: typeof components.DropdownNav;
+    /** Render the footer element announced by screen readers. */
+    Footer: typeof components.Footer;
+    /** Render the container of the MonthGrid. */
+    Month: typeof components.Month;
+    /** Render the caption of the month grid. */
+    MonthCaption: typeof components.MonthCaption;
+    /** Render the grid of days in a month. */
+    MonthGrid: typeof components.MonthGrid;
+    /** Wrapper of the month grids. */
+    Months: typeof components.Months;
+    /** Render the navigation element with the next and previous buttons. */
+    Nav: typeof components.Nav;
+    /** Render the `<option>` HTML element in the dropdown. */
+    Option: typeof components.Option;
+    /** Render the root element of the calendar. */
+    Root: typeof components.Root;
+    /** Render the select element in the dropdowns. */
+    Select: typeof components.Select;
+    /** Render the weeks section in the month grid. */
+    Weeks: typeof components.Weeks;
+    /** Render the week rows. */
+    Week: typeof components.Week;
+    /** Render the weekday name in the header. */
+    Weekday: typeof components.Weekday;
+    /** Render the row containing the week days. */
+    Weekdays: typeof components.Weekdays;
+    /** Render the cell with the number of the week. */
+    WeekNumber: typeof components.WeekNumber;
+    /** Render the header of the week number column. */
+    WeekNumberHeader: typeof components.WeekNumberHeader;
 };
@@ -26,0 +69,0 @@ export type DateLib = typeof dateLib;

dist/esm/UI.d.ts

@@ -27,3 +27,3 @@ /**
     /** The container of the dropdown navigation (when enabled). */
-    DropdownNav = "dropdown_nav",
+    Dropdowns = "dropdowns",
     /** The dropdown element to select for years and months. */
@@ -30,0 +30,0 @@ Dropdown = "dropdown",

dist/esm/UI.js

@@ -28,3 +28,3 @@ /**
     /** The container of the dropdown navigation (when enabled). */
-    UI["DropdownNav"] = "dropdown_nav";
+    UI["Dropdowns"] = "dropdowns";
     /** The dropdown element to select for years and months. */
@@ -31,0 +31,0 @@ UI["Dropdown"] = "dropdown";

dist/esm/useFocus.d.ts

 import type { CalendarDay } from "./classes/index.js";
-import type { DateLib, DayPickerProps, Mode } from "./types/index.js";
+import type { MoveFocusBy, MoveFocusDir, DateLib, DayPickerProps, Mode } from "./types/index.js";
 import { UseCalendar } from "./useCalendar.js";
@@ -9,3 +9,3 @@ import { UseModifiers } from "./useModifiers.js";
     focused: CalendarDay | undefined;
-    /** The date that is target of the focus when tabbing into the month grid. */
+    /** Check if the given day is the focus target when entering the calendar. */
     isFocusTarget: (day: CalendarDay) => boolean;
@@ -18,16 +18,3 @@ /** Focus the given day. */
     blur: () => void;
-    /** Focus the day after the focused day. */
-    focusDayAfter: () => void;
-    /** Focus the day before the focused day. */
-    focusDayBefore: () => void;
-    /** Focus the day in the week before the focused day. */
-    focusWeekBefore: () => void;
-    /** Focus the day in the week after the focused day. */
-    focusWeekAfter: () => void;
-    focusMonthBefore: () => void;
-    focusMonthAfter: () => void;
-    focusYearBefore: () => void;
-    focusYearAfter: () => void;
-    focusStartOfWeek: () => void;
-    focusEndOfWeek: () => void;
+    moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void;
 };
@@ -34,0 +21,0 @@ /** @private */

dist/esm/useFocus.js

@@ -33,12 +33,3 @@ import { useState } from "react";
         blur,
-        focusDayAfter: () => moveFocus("day", "after"),
-        focusDayBefore: () => moveFocus("day", "before"),
-        focusWeekAfter: () => moveFocus("week", "after"),
-        focusWeekBefore: () => moveFocus("week", "before"),
-        focusMonthBefore: () => moveFocus("month", "before"),
-        focusMonthAfter: () => moveFocus("month", "after"),
-        focusYearBefore: () => moveFocus("year", "before"),
-        focusYearAfter: () => moveFocus("year", "after"),
-        focusStartOfWeek: () => moveFocus("startOfWeek", "before"),
-        focusEndOfWeek: () => moveFocus("endOfWeek", "after")
+        moveFocus
     };
@@ -45,0 +36,0 @@ return useFocus;

dist/esm/utils/dateMatchModifiers.d.ts

@@ -6,3 +6,3 @@ import type { DateLib, Matcher } from "../types/index.js";
  * Returns whether a day matches against at least one of the given
- * {@link Matcher}`.
+ * {@link Matcher}.
  *
@@ -9,0 +9,0 @@ * ```tsx

dist/esm/utils/dateMatchModifiers.js

@@ -9,3 +9,3 @@ import { isDateInRange } from "./isDateInRange.js";
  * Returns whether a day matches against at least one of the given
- * {@link Matcher}`.
+ * {@link Matcher}.
  *
@@ -12,0 +12,0 @@ * ```tsx

package.json

 {
   "name": "react-day-picker",
-  "version": "9.0.0-rc.5",
+  "version": "9.0.0-rc.6",
   "description": "Customizable Date Picker for React",
@@ -147,3 +147,3 @@ "author": "Giampaolo Bellavite <[e-mail]>",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.0",
@@ -158,3 +158,3 @@ "date-fns": "^3.6.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -166,3 +166,3 @@ "eslint-plugin-require-extensions": "^0.1.3",
     "mockdate": "^3.0.5",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "prettier-plugin-jsdoc": "^1.3.0",
@@ -172,5 +172,5 @@ "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.2.2",
     "ts-node": "^10.9.2",
-    "tslib": "^2.6.2",
+    "tslib": "^2.6.3",
     "typescript": "~5.5.3",
@@ -177,0 +177,0 @@ "typescript-css-modules": "^1.0.4"

src/formatters/formatCaption.ts

@@ -5,5 +5,5 @@ import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * The default formatter for the caption element. As default, it returns the
- * month and year.
+ * Format the caption of the month.
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Formatters
@@ -10,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/formatters/formatDay.ts

@@ -6,5 +6,5 @@ import type { FormatOptions } from "../lib/dateLib.js";
 /**
- * The default formatter for the day grid cell element. As default, it returns
- * the date of the day.
+ * Format the day date shown in the day cell.
  *
+ * @defaultValue `d` (e.g. "1")
  * @group Formatters
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/formatters/formatMonthDropdown.ts

@@ -5,5 +5,5 @@ import type { DateFnsMonth } from "../lib/dateLib.js";
 /**
- * The default formatter for the month dropdown option. As default, it returns
- * the month name.
+ * Format the month number for the dropdown option label.
  *
+ * @defaultValue `monthNumber.toString()`
  * @group Formatters
@@ -10,0 +10,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/formatters/formatWeekdayName.ts

@@ -6,5 +6,5 @@ import type { FormatOptions } from "../lib/dateLib.js";
 /**
- * The default formatter for the name of the weekday. As default, it returns the
- * short name of the weekday (e.g. "Mo").
+ * Format the weekday name to be displayed in the weekdays header.
  *
+ * @defaultValue `cccccc` (e.g. "Mo" for Monday)
  * @group Formatters
@@ -11,0 +11,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/formatters/formatWeekNumber.ts

 /**
- * The default formatter for the week numbers. As default, it returns the week
- * number with a leading zero if the week number is less than 10.
+ * Format the week number.
  *
- * @param weekNumber - The week number to format.
+ * @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
  * @group Formatters
@@ -7,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/formatters/formatWeekNumberHeader.ts

 /**
- * The default formatter for the week numbers header. As default, it returns an
- * empty string.
+ * Format the week number header.
  *
+ * @defaultValue `""`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/formatters/formatYearDropdown.ts

 /**
- * The default formatter for the Year dropdown option. As default, it returns
- * the year.
+ * Format the years for the dropdown option label.
  *
+ * @defaultValue `year.toString()`
  * @group Formatters
@@ -6,0 +6,0 @@ * @see https://daypicker.dev/next/docs/translation#custom-formatters

src/helpers/getDefaultClassNames.test.ts

@@ -13,3 +13,3 @@ import { getDefaultClassNames } from "./getDefaultClassNames";
     disabled: "rdp-disabled",
-    dropdown_nav: "rdp-dropdown_nav",
+    dropdowns: "rdp-dropdowns",
     dropdown_root: "rdp-dropdown_root",
@@ -16,0 +16,0 @@ dropdown: "rdp-dropdown",

src/helpers/getNextMonth.ts

@@ -38,3 +38,3 @@ import type { DateLib, DayPickerProps } from "../types/index.js";
 
-  if (monthsDiff < numberOfMonths ?? 1) {
+  if (monthsDiff < numberOfMonths) {
     return undefined;
@@ -41,0 +41,0 @@ }

src/helpers/getPreviousMonth.ts

@@ -27,3 +27,3 @@ import type { DateLib, DayPickerProps } from "../types/index.js";
   const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
-  const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
+  const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1;
   const month = startOfMonth(firstDisplayedMonth);
@@ -30,0 +30,0 @@ if (!calendarStartMonth) {

src/labels/labelDayButton.ts

@@ -6,3 +6,3 @@ import type { DateLib, LabelOptions } from "../index.js";
 /**
- * Return an ARIA label for the day button.
+ * The ARIA label for the day button.
  *
@@ -12,2 +12,3 @@ * Use the `modifiers` argument to add additional context to the label, e.g.
  *
+ * @defaultValue The formatted date.
  * @group Labels
@@ -14,0 +15,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelGrid.ts

@@ -9,2 +9,3 @@ import type { LabelOptions } from "../lib/dateLib.js";
  *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Labels
@@ -11,0 +12,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelMonthDropdown.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for the months dropdown element.
+ * The ARIA label for the months dropdown.
  *
+ * @defaultValue `"Choose the Month"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelNav.ts

 /**
- * Return an ARIA label for the navigation toolbar, that will be announced when
- * entering it (optional).
+ * The ARIA label for the navigation toolbar.
  *
+ * @defaultValue `""`
  * @group Labels
@@ -6,0 +6,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelNext.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for next month button.
  *
+ * @defaultValue `"Go to the Next Month"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelPrevious.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for next month button.
+ * The ARIA label for previous month button.
  *
+ * @defaultValue `"Go to the Previous Month"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelWeekday.ts

@@ -6,4 +6,5 @@ import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return he default ARIA label for the Weekday colum header.
+ * The ARIA label for the Weekday column header.
  *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
  * @group Labels
@@ -10,0 +11,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelWeekNumber.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for the week number element.
+ * The ARIA label for the week number cell (the first cell in the row).
  *
+ * @defaultValue `Week ${weekNumber}`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelWeekNumberHeader.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for the week number header element.
+ * The ARIA label for the week number header element.
  *
+ * @defaultValue `"Week Number"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/labels/labelYearDropdown.ts

 import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for the years dropdown.
+ * The ARIA label for the years dropdown.
  *
+ * @defaultValue `"Choose the Year"`
  * @group Labels
@@ -7,0 +8,0 @@ * @see http://daypicker.dev/next/docs/translation#aria-labels

src/style.css.d.ts

@@ -11,3 +11,3 @@ declare const styles: {
   readonly "rdp-dropdown": string;
-  readonly "rdp-dropdown_nav": string;
+  readonly "rdp-dropdowns": string;
   readonly "rdp-dropdown_root": string;
@@ -14,0 +14,0 @@ readonly "rdp-focusable": string;

src/types/props.ts

@@ -88,3 +88,3 @@ import React from "react";
   modifiersStyles?: ModifiersStyles;
-  /** A unique id to replace the React generated id. Used for ARIA labels. */
+  /** A unique id to add to the root element. */
   id?: string;
@@ -228,3 +228,3 @@ /**
    */
-  hideWeekdayRow?: boolean;
+  hideWeekdays?: boolean;
   /**
@@ -263,3 +263,3 @@ * Show the outside days (days falling in the next or the previous month).
    */
-  components?: CustomComponents;
+  components?: Partial<CustomComponents>;
   /**
@@ -266,0 +266,0 @@ * Add a footer to the calendar, acting as live region.

src/types/shared.ts

@@ -45,6 +45,49 @@ /* eslint-disable @typescript-eslint/ban-types */
  *
- * @see https://github.com/gpbl/react-day-picker/blob/main/src/components/custom-components.ts
+ * @see https://daypicker.dev/next/guides/custom-components
  */
 export type CustomComponents = {
-  [key in keyof typeof components]?: (typeof components)[key];
+  /** Render any button element in DayPicker. */
+  Button: typeof components.Button;
+  /** Render the chevron icon used in the navigation buttons and dropdowns. */
+  Chevron: typeof components.Chevron;
+  /** Render the caption label of the month grid. */
+  CaptionLabel: typeof components.CaptionLabel;
+  /** Render the day cell in the month grid. */
+  Day: typeof components.Day;
+  /** Render the button containing the day in the day cell. */
+  DayButton: typeof components.DayButton;
+  /** Render the dropdown element to select years and months. */
+  Dropdown: typeof components.Dropdown;
+  /** Render the container of the dropdowns. */
+  DropdownNav: typeof components.DropdownNav;
+  /** Render the footer element announced by screen readers. */
+  Footer: typeof components.Footer;
+  /** Render the container of the MonthGrid. */
+  Month: typeof components.Month;
+  /** Render the caption of the month grid. */
+  MonthCaption: typeof components.MonthCaption;
+  /** Render the grid of days in a month. */
+  MonthGrid: typeof components.MonthGrid;
+  /** Wrapper of the month grids. */
+  Months: typeof components.Months;
+  /** Render the navigation element with the next and previous buttons. */
+  Nav: typeof components.Nav;
+  /** Render the `<option>` HTML element in the dropdown. */
+  Option: typeof components.Option;
+  /** Render the root element of the calendar. */
+  Root: typeof components.Root;
+  /** Render the select element in the dropdowns. */
+  Select: typeof components.Select;
+  /** Render the weeks section in the month grid. */
+  Weeks: typeof components.Weeks;
+  /** Render the week rows. */
+  Week: typeof components.Week;
+  /** Render the weekday name in the header. */
+  Weekday: typeof components.Weekday;
+  /** Render the row containing the week days. */
+  Weekdays: typeof components.Weekdays;
+  /** Render the cell with the number of the week. */
+  WeekNumber: typeof components.WeekNumber;
+  /** Render the header of the week number column. */
+  WeekNumberHeader: typeof components.WeekNumberHeader;
 };
@@ -51,0 +94,0 @@

src/UI.ts

@@ -29,3 +29,3 @@ import type { CustomComponents, ClassNames, Styles } from "./types/index.js";
   /** The container of the dropdown navigation (when enabled). */
-  DropdownNav = "dropdown_nav",
+  Dropdowns = "dropdowns",
   /** The dropdown element to select for years and months. */
@@ -32,0 +32,0 @@ Dropdown = "dropdown",

src/useFocus.ts

@@ -20,5 +20,4 @@ import { useState } from "react";
   focused: CalendarDay | undefined;
-  /** The date that is target of the focus when tabbing into the month grid. */
-  // focusTarget: CalendarDay | undefined;
 
+  /** Check if the given day is the focus target when entering the calendar. */
   isFocusTarget: (day: CalendarDay) => boolean;
@@ -34,22 +33,4 @@
   blur: () => void;
-  /** Focus the day after the focused day. */
-  focusDayAfter: () => void;
-  /** Focus the day before the focused day. */
-  focusDayBefore: () => void;
-  /** Focus the day in the week before the focused day. */
-  focusWeekBefore: () => void;
-  /** Focus the day in the week after the focused day. */
-  focusWeekAfter: () => void;
-  /* Focus the day in the month before the focused day. */
-  focusMonthBefore: () => void;
-  /* Focus the day in the month after the focused day. */
-  focusMonthAfter: () => void;
-  /* Focus the day in the year before the focused day. */
-  focusYearBefore: () => void;
-  /* Focus the day in the year after the focused day. */
-  focusYearAfter: () => void;
-  /* Focus the day at the start of the week of the focused day. */
-  focusStartOfWeek: () => void;
-  /* Focus the day at the end of the week of focused day. */
-  focusEndOfWeek: () => void;
+
+  moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void;
 };
@@ -121,12 +102,3 @@
     blur,
-    focusDayAfter: () => moveFocus("day", "after"),
-    focusDayBefore: () => moveFocus("day", "before"),
-    focusWeekAfter: () => moveFocus("week", "after"),
-    focusWeekBefore: () => moveFocus("week", "before"),
-    focusMonthBefore: () => moveFocus("month", "before"),
-    focusMonthAfter: () => moveFocus("month", "after"),
-    focusYearBefore: () => moveFocus("year", "before"),
-    focusYearAfter: () => moveFocus("year", "after"),
-    focusStartOfWeek: () => moveFocus("startOfWeek", "before"),
-    focusEndOfWeek: () => moveFocus("endOfWeek", "after")
+    moveFocus
   };
@@ -133,0 +105,0 @@

src/utils/dateMatchModifiers.ts

@@ -22,3 +22,3 @@ import type { DateLib, Matcher } from "../types/index.js";
  * Returns whether a day matches against at least one of the given
- * {@link Matcher}`.
+ * {@link Matcher}.
  *
@@ -25,0 +25,0 @@ * ```tsx

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

991719

decreased by-0.38%

Lines of code

19209

decreased by-0.35%

No dependency changes