react-day-picker 9.4.3 → 9.5.0

package/src/helpers/getNavMonth.test.ts

@@ -1,110 +1,253 @@
+import {
+  addYears,
+  endOfMonth,
+  endOfYear,
+  startOfDay,
+  startOfMonth,
+  startOfYear
+} from "date-fns";
+import { DayPickerProps } from "react-day-picker/types";
+
 import { defaultDateLib } from "../classes/DateLib";
 
 import { getNavMonths } from "./getNavMonth";
 
-describe('when "startMonth" is not passed in', () => {
+describe('when "startMonth" is not set', () => {
   test('"startMonth" should be undefined', () => {
     const [navStartMonth] = getNavMonths({}, defaultDateLib);
     expect(navStartMonth).toBeUndefined();
   });
 });
-describe('when "startMonth" is passed in', () => {
-  const [navStartMonth] = getNavMonths(
-    {
-      startMonth: new Date(2021, 4, 3)
-    },
-    defaultDateLib
-  );
+describe('when "startMonth" is set', () => {
+  const startMonth = new Date(2021, 4, 3);
+  const props: DayPickerProps = { startMonth };
   test('"startMonth" should be the start of that month', () => {
-    expect(navStartMonth).toEqual(new Date(2021, 4, 1));
+    const [navStartMonth] = getNavMonths(props, defaultDateLib);
+    const startOfThatMonth = startOfMonth(startMonth);
+    expect(navStartMonth).toEqual(startOfThatMonth);
   });
-  describe('when "fromYear" is passed in', () => {
+  describe('when "fromYear" is set', () => {
+    const fromYear = 2021;
     test('"startMonth" should be the start of that month', () => {
-      expect(navStartMonth).toEqual(new Date(2021, 4, 1));
+      const [navStartMonth] = getNavMonths(
+        { ...props, fromYear },
+        defaultDateLib
+      );
+      const startOfThatMonth = startOfMonth(startMonth);
+      expect(navStartMonth).toEqual(startOfThatMonth);
     });
   });
 });
-describe('when "fromYear" is passed in', () => {
-  const [navStartMonth] = getNavMonths({ fromYear: 2021 }, defaultDateLib);
+describe('when "fromYear" is set', () => {
+  const fromYear = 2021;
+  const props: DayPickerProps = { fromYear };
   test('"startMonth" should be the start of that year', () => {
-    expect(navStartMonth).toEqual(new Date(2021, 0, 1));
+    const [navStartMonth] = getNavMonths(props, defaultDateLib);
+    const startOfThatYear = new Date(fromYear, 0, 1);
+    expect(navStartMonth).toEqual(startOfThatYear);
   });
 });
-describe('when "endMonth" is passed in', () => {
-  const [, navEndMonth] = getNavMonths(
-    {
-      endMonth: new Date(2021, 4, 3)
-    },
-    defaultDateLib
-  );
+describe('when "endMonth" is set', () => {
+  const endMonth = new Date(2021, 4, 3);
+  const props: DayPickerProps = { endMonth };
   test('"endMonth" should be the end of that month', () => {
-    expect(navEndMonth).toEqual(new Date(2021, 4, 31));
+    const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+    const endOfThatMonth = startOfDay(endOfMonth(endMonth));
+    expect(navEndMonth).toEqual(endOfThatMonth);
   });
-  describe('when "fromYear" is passed in', () => {
+  describe('when "fromYear" is set', () => {
+    const fromYear = 2021;
     test('"endMonth" should be the end of that month', () => {
-      expect(navEndMonth).toEqual(new Date(2021, 4, 31));
+      const [, navEndMonth] = getNavMonths(
+        { ...props, fromYear },
+        defaultDateLib
+      );
+      const endOfThatMonth = startOfDay(endOfMonth(endMonth));
+      expect(navEndMonth).toEqual(endOfThatMonth);
     });
   });
 });
 
-describe('when "toYear" is passed in', () => {
+describe('when "toYear" is set', () => {
   const toYear = 2021;
-  const expectedendMonth = new Date(2021, 11, 31);
-  const [, navEndMonth] = getNavMonths({ toYear }, defaultDateLib);
+  const props: DayPickerProps = { toYear };
   test('"endMonth" should be the end of that year', () => {
-    expect(navEndMonth).toEqual(expectedendMonth);
+    const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+    expect(navEndMonth).toEqual(new Date(toYear, 11, 31));
   });
 });
 
-describe('when "captionLayout" is dropdown', () => {
+describe.each([["dropdown" as const], ["dropdown-years" as const]])(
+  'when "captionLayout" is "%s"',
+  (captionLayout) => {
+    const today = new Date(2024, 4, 3);
+    const props: DayPickerProps = { captionLayout, today };
+
+    test('"startMonth" should be 100 years ago', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      const startOf100YearsAgo = startOfYear(addYears(today, -100));
+      expect(navStartMonth).toEqual(startOf100YearsAgo);
+    });
+    test('"endMonth" should be the end of this year', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      const endOfThisYear = startOfDay(endOfYear(new Date()));
+      expect(navEndMonth).toEqual(endOfThisYear);
+    });
+
+    describe('when "startMonth" is set', () => {
+      const today = new Date(2024, 4, 3);
+      const startMonth = new Date(2021, 4, 3);
+      const props: DayPickerProps = { captionLayout, startMonth, today };
+      test('"startMonth" should be the start of that month', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        const startOfThatMonth = startOfMonth(startMonth);
+        expect(navStartMonth).toEqual(startOfThatMonth);
+      });
+      test('"endMonth" should be the end of this year', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        const endOfThisYear = startOfDay(endOfYear(new Date()));
+        expect(navEndMonth).toEqual(endOfThisYear);
+      });
+    });
+
+    describe('when "endMonth" is set', () => {
+      const today = new Date(2021, 4, 3);
+      const endMonth = new Date(2022, 4, 3);
+      const props: DayPickerProps = { captionLayout, endMonth, today };
+
+      test('"startMonth" should be 100 years ago', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        const startOf100YearsAgo = startOfYear(addYears(today, -100));
+        expect(navStartMonth).toEqual(startOf100YearsAgo);
+      });
+      test('"endMonth" should be the end of that month', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        expect(navEndMonth).toEqual(startOfDay(endOfMonth(endMonth)));
+      });
+    });
+
+    describe('when "fromYear" is set', () => {
+      const today = new Date(2024, 4, 3);
+      const fromYear = 2022;
+      const props: DayPickerProps = { captionLayout, fromYear, today };
+
+      test('"startMonth" should be equal to the "fromYear"', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        const startOfThatYear = new Date(fromYear, 0, 1);
+        expect(navStartMonth).toEqual(startOfThatYear);
+      });
+      test('"endMonth" should be the end of this year', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        const endOfThisYear = startOfDay(endOfYear(today));
+        expect(navEndMonth).toEqual(endOfThisYear);
+      });
+    });
+
+    describe('when "toYear" is set', () => {
+      const today = new Date(2021, 4, 3);
+      const toYear = 2022;
+      const props: DayPickerProps = { captionLayout, toYear, today };
+
+      test('"startMonth" should be 100 years ago', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        expect(navStartMonth).toEqual(startOfYear(addYears(today, -100)));
+      });
+      test('"endMonth" should be equal the last day of the year', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        expect(navEndMonth).toEqual(new Date(toYear, 11, 31));
+      });
+    });
+  }
+);
+
+describe('when "captionLayout" is "dropdown-months"', () => {
   const today = new Date(2024, 4, 3);
-  const [navStartMonth, navEndMonth] = getNavMonths(
-    {
-      captionLayout: "dropdown",
+  const props: DayPickerProps = {
+    captionLayout: "dropdown-months",
+    today
+  };
+  test('"startMonth" should be undefined', () => {
+    const [navStartMonth] = getNavMonths(props, defaultDateLib);
+    expect(navStartMonth).toBeUndefined();
+  });
+  test('"endMonth" should be undefined', () => {
+    const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+    expect(navEndMonth).toBeUndefined();
+  });
+
+  describe('when "startMonth" is set', () => {
+    const today = new Date(2024, 4, 3);
+    const startMonth = new Date(2021, 4, 3);
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      startMonth,
       today
-    },
-    defaultDateLib
-  );
-  test('"startMonth" should be 100 years ago', () => {
-    expect(navStartMonth).toEqual(new Date(1924, 0, 1));
+    };
+    test('"startMonth" should be the start of that month', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      const startOfThatMonth = startOfMonth(startMonth);
+      expect(navStartMonth).toEqual(startOfThatMonth);
+    });
+    test('"endMonth" should be undefined', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      expect(navEndMonth).toBeUndefined();
+    });
   });
-  test('"endMonth" should be the end of this year', () => {
-    expect(navEndMonth).toEqual(new Date(2024, 11, 31));
+
+  describe('when "endMonth" is set', () => {
+    const today = new Date(2021, 4, 3);
+    const endMonth = new Date(2022, 4, 3);
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      endMonth,
+      today
+    };
+    test('"startMonth" should be undefined', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      expect(navStartMonth).toBeUndefined();
+    });
+    test('"endMonth" should be the end of that month', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      const endOfThatMonth = startOfDay(endOfMonth(endMonth));
+      expect(navEndMonth).toEqual(endOfThatMonth);
+    });
   });
+
   describe('when "fromYear" is set', () => {
     const today = new Date(2024, 4, 3);
     const fromYear = 2022;
-    const [navStartMonth, navEndMonth] = getNavMonths(
-      {
-        captionLayout: "dropdown",
-        fromYear,
-        today
-      },
-      defaultDateLib
-    );
-    test('"startMonth" should be equal to the "fromYear"', () => {
-      expect(navStartMonth).toEqual(new Date(2022, 0, 1));
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      fromYear,
+      today
+    };
+    test('"startMonth" should be equal to the start of that year', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      const startOfThatYear = new Date(fromYear, 0, 1);
+      expect(navStartMonth).toEqual(startOfThatYear);
     });
-    test('"endMonth" should be the end of this year', () => {
-      expect(navEndMonth).toEqual(new Date(2024, 11, 31));
+    test('"endMonth" should be undefined', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      expect(navEndMonth).toBeUndefined();
     });
   });
+
   describe('when "toYear" is set', () => {
     const today = new Date(2021, 4, 3);
     const toYear = 2022;
-    const [navStartMonth, navEndMonth] = getNavMonths(
-      {
-        captionLayout: "dropdown",
-        toYear,
-        today
-      },
-      defaultDateLib
-    );
-    test('"startMonth" should be 100 years ago', () => {
-      expect(navStartMonth).toEqual(new Date(1921, 0, 1));
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      toYear,
+      today
+    };
+    test('"startMonth" should be undefined', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      expect(navStartMonth).toBeUndefined();
     });
-    test('"endMonth" should be equal to "toYear"', () => {
-      expect(navEndMonth).toEqual(new Date(2022, 11, 31));
+    test('"endMonth" should be equal to the end of that year', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      const endOfThatYear = new Date(2022, 11, 31);
+      expect(navEndMonth).toEqual(endOfThatYear);
     });
   });
 });

package/src/helpers/getNavMonth.ts

@@ -1,6 +1,4 @@
-import { TZDate } from "@date-fns/tz";
-
-import type { DateLib } from "../classes/DateLib.js";
+import { type DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /** Return the start and end months for the calendar navigation. */
@@ -28,7 +26,9 @@ export function getNavMonths(
     startOfMonth,
     endOfMonth,
     addYears,
-    endOfYear
+    endOfYear,
+    newDate,
+    today
   } = dateLib;
 
   // Handle deprecated code
@@ -37,43 +37,31 @@ export function getNavMonths(
     startMonth = fromMonth;
   }
   if (!startMonth && fromYear) {
-    startMonth = new Date(fromYear, 0, 1);
+    startMonth = dateLib.newDate(fromYear, 0, 1);
   }
   if (!endMonth && toMonth) {
     endMonth = toMonth;
   }
   if (!endMonth && toYear) {
-    endMonth = new Date(toYear, 11, 31);
+    endMonth = newDate(toYear, 11, 31);
   }
 
-  const hasDropdowns = props.captionLayout?.startsWith("dropdown");
+  const hasYearDropdown =
+    props.captionLayout === "dropdown" ||
+    props.captionLayout === "dropdown-years";
   if (startMonth) {
     startMonth = startOfMonth(startMonth);
   } else if (fromYear) {
-    startMonth = new Date(fromYear, 0, 1);
-  } else if (!startMonth && hasDropdowns) {
-    const today =
-      props.today ??
-      (props.timeZone
-        ? TZDate.tz(props.timeZone)
-        : dateLib.Date
-          ? new dateLib.Date()
-          : new Date());
-    startMonth = startOfYear(addYears(today, -100));
+    startMonth = newDate(fromYear, 0, 1);
+  } else if (!startMonth && hasYearDropdown) {
+    startMonth = startOfYear(addYears(props.today ?? today(), -100));
   }
   if (endMonth) {
     endMonth = endOfMonth(endMonth);
   } else if (toYear) {
-    endMonth = new Date(toYear, 11, 31);
-  } else if (!endMonth && hasDropdowns) {
-    const today =
-      props.today ??
-      (props.timeZone
-        ? TZDate.tz(props.timeZone)
-        : dateLib.Date
-          ? new dateLib.Date()
-          : new Date());
-    endMonth = endOfYear(today);
+    endMonth = newDate(toYear, 11, 31);
+  } else if (!endMonth && hasYearDropdown) {
+    endMonth = endOfYear(props.today ?? today());
   }
   return [
     startMonth ? startOfDay(startMonth) : startMonth,

package/src/helpers/getWeekdays.ts

@@ -1,5 +1,3 @@
-import { TZDate } from "@date-fns/tz";
-
 import { DateLib } from "../classes/DateLib.js";
 
 /**
@@ -11,21 +9,16 @@ export function getWeekdays(
   dateLib: DateLib,
   /** Use ISOWeek instead of locale/ */
   ISOWeek?: boolean | undefined,
-  timeZone?: string | undefined,
   /** @since 9.4.0 */
   broadcastCalendar?: boolean | undefined
 ): Date[] {
-  const date = timeZone
-    ? TZDate.tz(timeZone)
-    : dateLib.Date
-      ? new dateLib.Date()
-      : new Date();
+  const today = dateLib.today();
 
   const start = broadcastCalendar
-    ? dateLib.startOfBroadcastWeek(date, dateLib)
+    ? dateLib.startOfBroadcastWeek(today, dateLib)
     : ISOWeek
-      ? dateLib.startOfISOWeek(date)
-      : dateLib.startOfWeek(date);
+      ? dateLib.startOfISOWeek(today)
+      : dateLib.startOfWeek(today);
 
   const days: Date[] = [];
   for (let i = 0; i < 7; i++) {

package/src/helpers/getYearOptions.test.ts

@@ -3,9 +3,9 @@ import { defaultDateLib } from "../classes/DateLib";
 import { getFormatters } from "./getFormatters";
 import { getYearOptions } from "./getYearOptions";
 
-test("return undefined if startMonth or endMonth is not provided", () => {
+test("return undefined if navStart or navEnd are not set", () => {
   const formatters = getFormatters({
-    formatYearDropdown: (year: number) => `${year}`
+    formatYearDropdown: (date: Date) => `${date.getFullYear()}`
   });
   const result1 = getYearOptions(
     undefined,
@@ -28,7 +28,7 @@ test("return correct dropdown options", () => {
   const startMonth = new Date(2022, 0, 1); // January 2022
   const endMonth = new Date(2024, 11, 31); // December 2024
   const formatters = getFormatters({
-    formatYearDropdown: (year: number) => `${year}`
+    formatYearDropdown: (date: Date) => `${date.getFullYear()}`
   });
 
   const result = getYearOptions(

package/src/helpers/getYearOptions.ts

@@ -11,21 +11,22 @@ export function getYearOptions(
 ): DropdownOption[] | undefined {
   if (!navStart) return undefined;
   if (!navEnd) return undefined;
-  const { startOfYear, endOfYear, addYears, isBefore, isSameYear } = dateLib;
+  const { startOfYear, endOfYear, addYears, getYear, isBefore, isSameYear } =
+    dateLib;
   const firstNavYear = startOfYear(navStart);
   const lastNavYear = endOfYear(navEnd);
-  const years: number[] = [];
+  const years: Date[] = [];
 
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
-    years.push(year.getFullYear());
+    years.push(year);
     year = addYears(year, 1);
   }
 
-  return years.map((value) => {
-    const label = formatters.formatYearDropdown(value);
+  return years.map((year) => {
+    const label = formatters.formatYearDropdown(year, dateLib);
     return {
-      value,
+      value: getYear(year),
       label,
       disabled: false
     };

package/src/jalali.tsx

@@ -1,21 +1,2 @@
-import React from "react";
-
-import * as jalaliDateLib from "date-fns-jalali";
-
-import {
-  DayPicker as DayPickerComponent,
-  type DayPickerProps
-} from "./index.js";
-
-export function DayPicker(props: DayPickerProps) {
-  return (
-    <DayPickerComponent
-      // @ts-expect-error The type definitions for the date-fns-jalali library
-      //     are not compatible with the date-fns 4.0 types. The `addDays`
-      //     function's return type is causing a type mismatch. (This casting should
-      //     be not needed when date-fns-jalali upgrades to date-fns@4)
-      dateLib={jalaliDateLib}
-      {...props}
-    />
-  );
-}
+/** @deprecated Import from `react-day-picker/persian` instead. */
+export * from "./persian.js";

package/src/labels/labelDayButton.ts

@@ -24,5 +24,8 @@ export function labelDayButton(
   return label;
 }
 
-/** @deprecated Use `labelDayButton` instead. */
+/**
+ * @ignore
+ * @deprecated Use `labelDayButton` instead.
+ */
 export const labelDay = labelDayButton;

package/src/labels/labelGrid.ts

@@ -1,8 +1,8 @@
 import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
- * Return an ARIA label for the month grid, that will be announced when entering
- * the grid.
+ * The ARIA label for the month grid, that will be announced when entering the
+ * grid.
  *
  * @defaultValue `LLLL y` (e.g. "November 2022")
  * @group Labels
@@ -17,7 +17,7 @@ export function labelGrid(
 }
 
 /**
+ * @ignore
  * @deprecated Use {@link labelGrid} instead.
- * @protected
  */
 export const labelCaption = labelGrid;

package/src/persian.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+import * as dateFnsJalali from "date-fns-jalali";
+import { Locale } from "date-fns-jalali";
+import * as locales from "date-fns-jalali/locale";
+
+import {
+  DateLib,
+  DateLibOptions,
+  DayPicker as DayPickerComponent
+} from "./index.js";
+import type { DayPickerProps } from "./types/props.js";
+
+export const faIR = locales.faIR;
+export const enUS = locales.enUS;
+
+/**
+ * Render the Persian Calendar.
+ *
+ * @see https://daypicker.dev/docs/localization#persian-calendar
+ */
+export function DayPicker(
+  props: DayPickerProps & {
+    /**
+     * The locale to use in the calendar.
+     *
+     * @default `faIR`
+     */
+    locale?: Locale;
+    /**
+     * The direction of the text in the calendar.
+     *
+     * @default `rtl`
+     */
+    dir?: DayPickerProps["dir"];
+    /**
+     * The date library to use in the calendar.
+     *
+     * @default `jalaliDateLib` from `date-fns-jalali`
+     */
+    dateLib?: DayPickerProps["dateLib"];
+    /**
+     * The numeral system to use when formatting dates.
+     *
+     * - `latn`: Latin (Western Arabic)
+     * - `arab`: Arabic-Indic
+     * - `arabext`: Eastern Arabic-Indic (Persian)
+     * - `deva`: Devanagari
+     * - `beng`: Bengali
+     * - `guru`: Gurmukhi
+     * - `gujr`: Gujarati
+     * - `orya`: Oriya
+     * - `tamldec`: Tamil
+     * - `telu`: Telugu
+     * - `knda`: Kannada
+     * - `mlym`: Malayalam
+     *
+     * @defaultValue `arabext` Eastern Arabic-Indic (Persian)
+     * @see https://daypicker.dev/docs/translation#numeral-systems
+     */
+    numerals?: DayPickerProps["numerals"];
+  }
+) {
+  const dateLib = getDateLib({
+    locale: props.locale,
+    weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+    firstWeekContainsDate: props.firstWeekContainsDate,
+    useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+    useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
+    timeZone: props.timeZone
+  });
+  return (
+    <DayPickerComponent
+      {...props}
+      locale={props.locale ?? faIR}
+      numerals={props.numerals ?? "arabext"}
+      dir={props.dir ?? "rtl"}
+      dateLib={dateLib}
+    />
+  );
+}
+
+/** Returns the date library used in the calendar. */
+export const getDateLib = (options?: DateLibOptions) => {
+  return new DateLib(options, dateFnsJalali);
+};

package/src/selection/useRange.test.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { DayPickerProps } from "react-day-picker/types";
-
 import { act, renderHook } from "@/test/render";
 
 import { defaultDateLib } from "../classes/DateLib";
+import type { DayPickerProps } from "../types";
 
 import { useRange } from "./useRange";