react-day-picker 9.1.1 → 9.1.2

package/src/DayPicker.tsx

@@ -279,7 +279,6 @@ export function DayPicker(props: DayPickerProps) {
         >
           {!props.hideNavigation && (
             <components.Nav
-              role="navigation"
               className={classNames[UI.Nav]}
               style={styles?.[UI.Nav]}
               aria-label={labelNav()}
@@ -413,15 +412,14 @@ export function DayPicker(props: DayPickerProps) {
                   {!props.hideWeekdays && (
                     <components.Weekdays
                       className={classNames[UI.Weekdays]}
-                      role="row"
                       style={styles?.[UI.Weekdays]}
                     >
                       {showWeekNumber && (
                         <components.WeekNumberHeader
                           aria-label={labelWeekNumberHeader(labelOptions)}
                           className={classNames[UI.WeekNumberHeader]}
-                          role="columnheader"
                           style={styles?.[UI.WeekNumberHeader]}
+                          scope="col"
                         >
                           {formatWeekNumberHeader()}
                         </components.WeekNumberHeader>
@@ -435,8 +433,8 @@ export function DayPicker(props: DayPickerProps) {
                           )}
                           className={classNames[UI.Weekday]}
                           key={i}
-                          role="columnheader"
                           style={styles?.[UI.Weekday]}
+                          scope="col"
                         >
                           {formatWeekdayName(weekday, formatOptions, dateLib)}
                         </components.Weekday>
@@ -445,7 +443,6 @@ export function DayPicker(props: DayPickerProps) {
                   )}
                   <components.Weeks
                     className={classNames[UI.Weeks]}
-                    role="rowgroup"
                     style={styles?.[UI.Weeks]}
                   >
                     {calendarMonth.weeks.map((week, weekIndex) => {
@@ -453,19 +450,18 @@ export function DayPicker(props: DayPickerProps) {
                         <components.Week
                           className={classNames[UI.Week]}
                           key={week.weekNumber}
-                          role="row"
                           style={styles?.[UI.Week]}
                           week={week}
                         >
                           {showWeekNumber && (
                             <components.WeekNumber
                               week={week}
-                              role="rowheader"
                               style={styles?.[UI.WeekNumber]}
                               aria-label={labelWeekNumber(week.weekNumber, {
                                 locale
                               })}
                               className={classNames[UI.WeekNumber]}
+                              scope="row"
                             >
                               {formatWeekNumber(week.weekNumber)}
                             </components.WeekNumber>
@@ -526,7 +522,6 @@ export function DayPicker(props: DayPickerProps) {
                                 key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
                                 day={day}
                                 modifiers={modifiers}
-                                role="gridcell"
                                 className={className.join(" ")}
                                 style={style}
                                 aria-hidden={modifiers.hidden || undefined}
@@ -549,6 +544,7 @@ export function DayPicker(props: DayPickerProps) {
                                   <components.DayButton
                                     className={classNames[UI.DayButton]}
                                     style={styles?.[UI.DayButton]}
+                                    type="button"
                                     day={day}
                                     modifiers={modifiers}
                                     disabled={modifiers.disabled || undefined}

package/src/classes/CalendarDay.ts

@@ -1,5 +1,5 @@
+import type { DateLib } from "../lib/index.js";
 import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateLib } from "../types/index.js";
 
 /**
  * Represent the day displayed in the calendar.

package/src/components/WeekNumber.tsx

@@ -12,10 +12,10 @@ export function WeekNumber(
   props: {
     /** The week to render. */
     week: CalendarWeek;
-  } & JSX.IntrinsicElements["td"]
+  } & JSX.IntrinsicElements["th"]
 ) {
-  const { week, ...tdProps } = props;
-  return <td {...tdProps} />;
+  const { week, ...thProps } = props;
+  return <th {...thProps} />;
 }
 
 export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

package/src/formatters/formatCaption.ts

@@ -1,5 +1,8 @@
-import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateLib } from "../types/index.js";
+import {
+  FormatOptions,
+  dateLib as defaultDateLib,
+  type DateLib
+} from "../lib/index.js";
 
 /**
  * Format the caption of the month.

package/src/formatters/formatDay.ts

@@ -1,6 +1,5 @@
-import type { FormatOptions } from "../lib/dateLib.js";
+import type { FormatOptions, DateLib } from "../lib/dateLib.js";
 import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateLib } from "../types/index.js";
 
 /**
  * Format the day date shown in the day cell.

package/src/formatters/formatWeekdayName.ts

@@ -1,6 +1,5 @@
-import type { FormatOptions } from "../lib/dateLib.js";
+import type { FormatOptions, DateLib } from "../lib/dateLib.js";
 import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateLib } from "../types/index.js";
 
 /**
  * Format the weekday name to be displayed in the weekdays header.

package/src/helpers/getDateLib.ts

@@ -1,5 +1,5 @@
-import { dateLib } from "../lib/dateLib.js";
-import type { DateLib, DayPickerProps } from "../types/index.js";
+import { dateLib, type DateLib } from "../lib/dateLib.js";
+import type { DayPickerProps } from "../types/index.js";
 
 export function getDateLib(customLib: DayPickerProps["dateLib"]): DateLib {
   return {

package/src/helpers/getDates.ts

@@ -26,8 +26,7 @@ export function getDates(
     differenceInCalendarDays,
     differenceInCalendarMonths,
     isAfter,
-    endOfMonth,
-    Date
+    endOfMonth
   } = dateLib;
 
   const startWeekFirstDate = ISOWeek
@@ -61,7 +60,7 @@ export function getDates(
   if (fixedWeeks && dates.length < extraDates) {
     for (let i = 0; i < 7; i++) {
       const date = addDays(dates[dates.length - 1], 1);
-      dates.push(new Date(date));
+      dates.push(date);
     }
   }
   return dates;

package/src/helpers/getDisplayMonths.ts

@@ -1,4 +1,5 @@
-import type { DateLib, DayPickerProps } from "../types/index.js";
+import type { DateLib } from "../lib/index.js";
+import type { DayPickerProps } from "../types/index.js";
 
 export function getDisplayMonths(
   firstDisplayedMonth: Date,

package/src/helpers/getFocusableDate.ts

@@ -1,5 +1,5 @@
+import type { DateLib } from "../lib/index.js";
 import type {
-  DateLib,
   DayPickerProps,
   MoveFocusBy,
   MoveFocusDir

package/src/helpers/getInitialMonth.ts

@@ -21,7 +21,11 @@ export function getInitialMonth(
   const {
     month,
     defaultMonth,
-    today = props.timeZone ? TZDate.tz(props.timeZone) : new dateLib.Date(),
+    today = props.timeZone
+      ? TZDate.tz(props.timeZone)
+      : dateLib.Date
+        ? new dateLib.Date()
+        : new Date(),
     numberOfMonths = 1,
     endMonth,
     startMonth

package/src/helpers/getMonthOptions.ts

@@ -1,6 +1,6 @@
 import { DropdownOption } from "../components/Dropdown.js";
-import type { Locale } from "../lib/dateLib.js";
-import type { DateLib, Formatters } from "../types/index.js";
+import type { Locale, DateLib } from "../lib/dateLib.js";
+import type { Formatters } from "../types/index.js";
 
 /** Return the months to show in the dropdown. */
 export function getMonthOptions(
@@ -14,7 +14,7 @@ export function getMonthOptions(
   if (!navStart) return undefined;
   if (!navEnd) return undefined;
 
-  const { addMonths, startOfMonth, isBefore, Date } = dateLib;
+  const { addMonths, startOfMonth, isBefore } = dateLib;
   const year = displayMonth.getFullYear();
 
   const months: number[] = [];
@@ -28,9 +28,12 @@ export function getMonthOptions(
   });
   const options = sortedMonths.map((value) => {
     const label = formatters.formatMonthDropdown(value, locale);
+    const month = dateLib.Date
+      ? new dateLib.Date(year, value)
+      : new Date(year, value);
     const disabled =
-      (navStart && new Date(year, value) < startOfMonth(navStart)) ||
-      (navEnd && new Date(year, value) > startOfMonth(navEnd)) ||
+      (navStart && month < startOfMonth(navStart)) ||
+      (navEnd && month > startOfMonth(navEnd)) ||
       false;
     return { value, label, disabled };
   });

package/src/helpers/getMonths.ts

@@ -1,5 +1,6 @@
 import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
-import type { DateLib, DayPickerProps } from "../types/index.js";
+import type { DateLib } from "../lib/index.js";
+import type { DayPickerProps } from "../types/index.js";
 
 /** Return the months to display in the calendar. */
 export function getMonths(

package/src/helpers/getNavMonth.ts

@@ -1,6 +1,7 @@
 import { TZDate } from "@date-fns/tz";
 
-import type { DateLib, DayPickerProps } from "../types/index.js";
+import type { DateLib } from "../lib/index.js";
+import type { DayPickerProps } from "../types/index.js";
 
 /** Return the start and end months for the calendar navigation. */
 export function getNavMonths(
@@ -11,6 +12,7 @@ export function getNavMonths(
     | "startMonth"
     | "today"
     | "timeZone"
+    | "dateLib"
     // Deprecated:
     | "fromMonth"
     | "fromYear"
@@ -27,8 +29,7 @@ export function getNavMonths(
     startOfMonth,
     endOfMonth,
     addYears,
-    endOfYear,
-    Date
+    endOfYear
   } = dateLib;
 
   // Handle deprecated code
@@ -54,7 +55,11 @@ export function getNavMonths(
   } else if (!startMonth && hasDropdowns) {
     const today =
       props.today ??
-      (props.timeZone ? TZDate.tz(props.timeZone) : new dateLib.Date());
+      (props.timeZone
+        ? TZDate.tz(props.timeZone)
+        : dateLib.Date
+          ? new dateLib.Date()
+          : new Date());
     startMonth = startOfYear(addYears(today, -100));
   }
   if (endMonth) {
@@ -64,7 +69,11 @@ export function getNavMonths(
   } else if (!endMonth && hasDropdowns) {
     const today =
       props.today ??
-      (props.timeZone ? TZDate.tz(props.timeZone) : new dateLib.Date());
+      (props.timeZone
+        ? TZDate.tz(props.timeZone)
+        : dateLib.Date
+          ? new dateLib.Date()
+          : new Date());
     endMonth = endOfYear(today);
   }
   return [

package/src/helpers/getNextFocus.tsx

@@ -1,6 +1,6 @@
 import { CalendarDay } from "../classes/index.js";
+import type { DateLib } from "../lib/index.js";
 import type {
-  DateLib,
   DayPickerProps,
   MoveFocusBy,
   MoveFocusDir

package/src/helpers/getNextMonth.ts

@@ -1,4 +1,5 @@
-import type { DateLib, DayPickerProps } from "../types/index.js";
+import type { DateLib } from "../lib/index.js";
+import type { DayPickerProps } from "../types/index.js";
 
 /**
  * Return the next month the user can navigate to according to the given

package/src/helpers/getPreviousMonth.ts

@@ -1,4 +1,5 @@
-import type { DateLib, DayPickerProps } from "../types/index.js";
+import type { DateLib } from "../lib/index.js";
+import type { DayPickerProps } from "../types/index.js";
 
 /**
  * Return the next previous the user can navigate to, according to the given

package/src/helpers/getWeekdays.ts

@@ -1,8 +1,7 @@
 import { TZDate } from "@date-fns/tz";
 
-import type { Locale } from "../lib/dateLib.js";
+import type { Locale, DateLib } from "../lib/dateLib.js";
 import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateLib } from "../types/index.js";
 
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting
@@ -18,7 +17,11 @@ export function getWeekdays(
   /** @ignore */
   dateLib: DateLib = defaultDateLib
 ): Date[] {
-  const date = timeZone ? TZDate.tz(timeZone) : new dateLib.Date();
+  const date = timeZone
+    ? TZDate.tz(timeZone)
+    : dateLib.Date
+      ? new dateLib.Date()
+      : new Date();
   const start = ISOWeek
     ? dateLib.startOfISOWeek(date)
     : dateLib.startOfWeek(date, { locale, weekStartsOn });

package/src/helpers/getYearOptions.ts

@@ -1,5 +1,6 @@
 import { DropdownOption } from "../components/Dropdown.js";
-import type { DateLib, Formatters } from "../types/index.js";
+import type { DateLib } from "../lib/dateLib.js";
+import type { Formatters } from "../types/index.js";
 
 /** Return the years to show in the dropdown. */
 export function getYearOptions(
@@ -17,8 +18,7 @@ export function getYearOptions(
     endOfYear,
     addYears,
     isBefore,
-    isSameYear,
-    Date
+    isSameYear
   } = dateLib;
   const month = displayMonth.getMonth();
   const firstNavYear = startOfYear(calendarStart);
@@ -32,11 +32,12 @@ export function getYearOptions(
   }
 
   return years.map((value) => {
+    const year = dateLib.Date
+      ? new dateLib.Date(value, month)
+      : new Date(value, month);
     const disabled =
-      (calendarStart && new Date(value, month) < startOfMonth(calendarStart)) ||
-      (month &&
-        calendarEnd &&
-        new Date(value, month) > startOfMonth(calendarEnd)) ||
+      (calendarStart && year < startOfMonth(calendarStart)) ||
+      (month && calendarEnd && year > startOfMonth(calendarEnd)) ||
       false;
     const label = formatters.formatYearDropdown(value);
     return {

package/src/labels/labelGrid.ts

@@ -1,6 +1,5 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { LabelOptions, DateLib } from "../lib/dateLib.js";
 import { dateLib as defaultDateLib } from "../lib/index.js";
-import { DateLib } from "../types/index.js";
 
 /**
  * Return an ARIA label for the month grid, that will be announced when entering

package/src/labels/labelWeekday.ts

@@ -1,6 +1,5 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { LabelOptions, DateLib } from "../lib/dateLib.js";
 import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateLib } from "../types/index.js";
 
 /**
  * The ARIA label for the Weekday column header.

package/src/lib/dateLib.ts

@@ -1,4 +1,3 @@
-import { GenericDateConstructor } from "date-fns";
 import type {
   FormatOptions as DateFnsFormatOptions,
   Locale as DateFnsLocale
@@ -43,6 +42,101 @@ export type Locale = DateFnsLocale;
 
 export type { Month as DateFnsMonth } from "date-fns";
 
+/**
+ * The date library used by DayPicker. It's a subset of the date-fns functions
+ * plus an optional Date constructor.
+ *
+ * Override the default date library with the `dateLib` prop.
+ */
+export type DateLib = {
+  /** The constructor of the date object. */
+  Date?: DateConstructor | undefined;
+
+  /** Adds the specified number of days to the given date. */
+  addDays: typeof addDays;
+
+  /** Adds the specified number of months to the given date. */
+  addMonths: typeof addMonths;
+
+  /** Adds the specified number of weeks to the given date. */
+  addWeeks: typeof addWeeks;
+
+  /** Adds the specified number of years to the given date. */
+  addYears: typeof addYears;
+
+  /** Returns the number of calendar days between the given dates. */
+  differenceInCalendarDays: typeof differenceInCalendarDays;
+
+  /** Returns the number of calendar months between the given dates. */
+  differenceInCalendarMonths: typeof differenceInCalendarMonths;
+
+  /** Returns the end of an ISO week for the given date. */
+  endOfISOWeek: typeof endOfISOWeek;
+
+  /** Returns the end of the month for the given date. */
+  endOfMonth: typeof endOfMonth;
+
+  /** Returns the end of the week for the given date. */
+  endOfWeek: typeof endOfWeek;
+
+  /** Returns the end of the year for the given date. */
+  endOfYear: typeof endOfYear;
+
+  /** Formats the given date using the specified format string. */
+  format: typeof format;
+
+  /** Returns the ISO week number for the given date. */
+  getISOWeek: typeof getISOWeek;
+
+  /** Returns the week number for the given date. */
+  getWeek: typeof getWeek;
+
+  /** Checks if the first date is after the second date. */
+  isAfter: typeof isAfter;
+
+  /** Checks if the first date is before the second date. */
+  isBefore: typeof isBefore;
+
+  /** Checks if the given value is a date. */
+  isDate: typeof isDate;
+
+  /** Checks if the given dates are the same day. */
+  isSameDay: typeof isSameDay;
+
+  /** Checks if the given dates are in the same month. */
+  isSameMonth: typeof isSameMonth;
+
+  /** Checks if the given dates are in the same year. */
+  isSameYear: typeof isSameYear;
+
+  /** Returns the maximum of the given dates. */
+  max: typeof max;
+
+  /** Returns the minimum of the given dates. */
+  min: typeof min;
+
+  /** Sets the month for the given date. */
+  setMonth: typeof setMonth;
+
+  /** Sets the year for the given date. */
+  setYear: typeof setYear;
+
+  /** Returns the start of the day for the given date. */
+  startOfDay: typeof startOfDay;
+
+  /** Returns the start of an ISO week for the given date. */
+  startOfISOWeek: typeof startOfISOWeek;
+
+  /** Returns the start of the month for the given date. */
+  startOfMonth: typeof startOfMonth;
+
+  /** Returns the start of the week for the given date. */
+  startOfWeek: typeof startOfWeek;
+
+  /** Returns the start of the year for the given date. */
+  startOfYear: typeof startOfYear;
+};
+
 /**
  * The default date library to use with the date picker.
  *
@@ -50,8 +144,6 @@ export type { Month as DateFnsMonth } from "date-fns";
  * @internal
  */
 export const dateLib = {
-  /** The constructor of the date object. */
-  Date: Date as GenericDateConstructor<Date>,
   addDays,
   addMonths,
   addWeeks,

package/src/selection/useMulti.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { useControlledValue } from "../helpers/useControlledValue.js";
+import type { DateLib } from "../lib/dateLib.js";
 import type {
-  DateLib,
   DayPickerProps,
   Modifiers,
   PropsMulti,

package/src/selection/useRange.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { useControlledValue } from "../helpers/useControlledValue.js";
+import type { DateLib } from "../lib/index.js";
 import type {
-  DateLib,
   DayPickerProps,
   Modifiers,
   PropsRange,

package/src/selection/useSingle.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { useControlledValue } from "../helpers/useControlledValue.js";
+import type { DateLib } from "../lib/index.js";
 import type {
-  DateLib,
   DayPickerProps,
   Modifiers,
   PropsSingle,

package/src/types/props.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { DeprecatedUI } from "../UI.js";
-import type { Locale } from "../lib/dateLib.js";
+import type { Locale, DateLib } from "../lib/dateLib.js";
 
 import type {
   ClassNames,
@@ -16,8 +16,7 @@ import type {
   DayEventHandler,
   Modifiers,
   DateRange,
-  Mode,
-  DateLib
+  Mode
 } from "./shared.js";
 
 /**
@@ -353,8 +352,8 @@ export interface PropsBase {
   /** Add the language tag to the container element. */
   lang?: HTMLDivElement["lang"];
   /**
-   * The locale object used to localize dates. Pass a locale from `date-fns` to
-   * localize the calendar.
+   * The locale object used to localize dates. Pass a locale from
+   * `react-day-picker/locale` to localize the calendar.
    *
    * @example
    *   import { es } from "react-day-picker/locale";
@@ -362,6 +361,7 @@ export interface PropsBase {
    *
    * @defaultValue enUS - The English locale default of `date-fns`.
    * @see https://daypicker.dev/docs/localization
+   * @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
    */
   locale?: Partial<Locale> | undefined;
   /**
@@ -485,7 +485,16 @@ export interface PropsBase {
   onDayTouchStart?: DayEventHandler<React.TouchEvent>;
 }
 
-/** Shared handler type for onSelect events */
+/**
+ * Shared handler type for `onSelect` callback when a selection mode is set.
+ *
+ * @template T - The type of the selected item.
+ * @callback OnSelectHandler
+ * @param {T} selected - The selected item after the event.
+ * @param {Date} triggerDate - The date when the event was triggered.
+ * @param {Modifiers} modifiers - The modifiers associated with the event.
+ * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.
+ */
 export type OnSelectHandler<T> = (
   selected: T,
   triggerDate: Date,

package/src/types/selection.ts

@@ -1,5 +1,5 @@
 import type { DayPickerProps } from "./props.js";
-import type { DateRange, Modifiers } from "./shared.js";
+import type { DateRange, Mode, Modifiers } from "./shared.js";
 
 export type Selection<T extends DayPickerProps> = {
   /** The selected date(s). */
@@ -25,25 +25,28 @@ export type SelectedValue<T> = T extends { mode: "single"; required?: boolean }
       ? SelectedRange<T>
       : undefined;
 
-export type SelectHandlerSingle<T extends DayPickerProps> = (
-  triggerDate: Date,
-  modifiers: Modifiers,
-  e: React.MouseEvent | React.KeyboardEvent
-) => T["required"] extends true ? Date : Date | undefined;
+export type SelectHandlerSingle<T extends { required?: boolean | undefined }> =
+  (
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => T["required"] extends true ? Date : Date | undefined;
 
-export type SelectHandlerMulti<T extends DayPickerProps> = (
+export type SelectHandlerMulti<T extends { required?: boolean | undefined }> = (
   triggerDate: Date,
   modifiers: Modifiers,
   e: React.MouseEvent | React.KeyboardEvent
 ) => T["required"] extends true ? Date[] : Date[] | undefined;
 
-export type SelectHandlerRange<T extends DayPickerProps> = (
+export type SelectHandlerRange<T extends { required?: boolean | undefined }> = (
   triggerDate: Date,
   modifiers: Modifiers,
   e: React.MouseEvent | React.KeyboardEvent
 ) => T["required"] extends true ? DateRange : DateRange | undefined;
 
-export type SelectHandler<T extends DayPickerProps> = T extends {
+export type SelectHandler<
+  T extends { mode?: Mode | undefined; required?: boolean | undefined }
+> = T extends {
   mode: "single";
 }
   ? SelectHandlerSingle<T>