react-day-picker 9.1.4 → 9.2.1

package/src/helpers/getNextMonth.test.ts

@@ -1,5 +1,6 @@
 import { addMonths, isSameMonth } from "date-fns";
-import { dateLib } from "react-day-picker";
+
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getNextMonth } from "./getNextMonth";
 
@@ -14,7 +15,7 @@ describe("when number of months is 1", () => {
         {
           disableNavigation: true
         },
-        dateLib
+        defaultDateLib
       );
       expect(result).toBe(undefined);
     });
@@ -22,7 +23,7 @@ describe("when number of months is 1", () => {
   describe("when in the navigable range", () => {
     const endMonth = addMonths(startingMonth, 3);
     it("the next month is not undefined", () => {
-      const result = getNextMonth(startingMonth, endMonth, {}, dateLib);
+      const result = getNextMonth(startingMonth, endMonth, {}, defaultDateLib);
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
     });
@@ -30,7 +31,7 @@ describe("when number of months is 1", () => {
   describe("when not in the navigable range", () => {
     const endMonth = startingMonth;
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, endMonth, {}, dateLib);
+      const result = getNextMonth(startingMonth, endMonth, {}, defaultDateLib);
       expect(result).toBe(undefined);
     });
   });
@@ -47,7 +48,7 @@ describe("when displaying 3 months", () => {
           numberOfMonths,
           pagedNavigation
         },
-        dateLib
+        defaultDateLib
       );
       const expectedNextMonth = addMonths(startingMonth, 3);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
@@ -61,7 +62,7 @@ describe("when displaying 3 months", () => {
             numberOfMonths,
             pagedNavigation
           },
-          dateLib
+          defaultDateLib
         );
         expect(result).toBe(undefined);
       });
@@ -77,7 +78,7 @@ describe("when displaying 3 months", () => {
           numberOfMonths,
           pagedNavigation
         },
-        dateLib
+        defaultDateLib
       );
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
@@ -91,7 +92,7 @@ describe("when displaying 3 months", () => {
             numberOfMonths,
             pagedNavigation
           },
-          dateLib
+          defaultDateLib
         );
         expect(result).toBe(undefined);
       });

package/src/helpers/getNextMonth.ts

@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /**

package/src/helpers/getPossibleFocusDate.test.ts

@@ -11,17 +11,18 @@ import {
   endOfWeek
 } from "date-fns";
 
+import { DateLib } from "../classes/DateLib";
 import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types";
 
-import { dateLib } from "..";
 import { getFocusableDate } from "./getFocusableDate";
 
 const focusedDate = new Date(2023, 0, 1); // Jan 1, 2023
-const options: Pick<DayPickerProps, "locale" | "ISOWeek" | "weekStartsOn"> = {
-  locale: undefined,
-  ISOWeek: false,
-  weekStartsOn: 0 // Sunday
+const options: Pick<DayPickerProps, "ISOWeek"> = {
+  ISOWeek: false
 };
+const dateLib = new DateLib({
+  weekStartsOn: 0 // Sunday
+});
 
 const calendarStartMonth = new Date(2022, 0, 1); // Jan 1, 2022
 const calendarEndMonth = new Date(2024, 0, 1); // Jan 1, 2024

package/src/helpers/getPreviousMonth.test.ts

@@ -1,4 +1,5 @@
-import { dateLib } from "..";
+import { defaultDateLib } from "../classes/DateLib";
+
 import { getPreviousMonth } from "./getPreviousMonth";
 
 it("should return undefined if navigation is disabled", () => {
@@ -14,7 +15,7 @@ it("should return undefined if navigation is disabled", () => {
     firstDisplayedMonth,
     calendarStartMonth,
     props,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toBeUndefined();
@@ -32,7 +33,7 @@ it("should return the previous month if startMonth is not provided", () => {
     firstDisplayedMonth,
     undefined,
     props,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
@@ -50,7 +51,7 @@ it("should return undefined if the previous month is before the startMonth", ()
     firstDisplayedMonth,
     calendarStartMonth,
     props,
-    dateLib
+    defaultDateLib
   );
   expect(result).toBeUndefined();
 });
@@ -62,15 +63,14 @@ it("should return the correct previous month when pagedNavigation is true", () =
     disableNavigation: false,
     pagedNavigation: true,
     numberOfMonths: 2,
-    startMonth: new Date(2022, 0, 1),
-    dateLib
+    startMonth: new Date(2022, 0, 1)
   };
 
   const result = getPreviousMonth(
     firstDisplayedMonth,
     calendarStartMonth,
     props,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual(new Date(2022, 0, 1)); // January 2022

package/src/helpers/getPreviousMonth.ts

@@ -1,4 +1,4 @@
-import type { DateLib } from "../lib/index.js";
+import type { DateLib } from "../classes/DateLib.js";
 import type { DayPickerProps } from "../types/index.js";
 
 /**

package/src/helpers/getWeekdays.test.ts

@@ -1,6 +1,6 @@
 import { es } from "date-fns/locale/es";
 
-import { dateLib } from "../lib";
+import { DateLib, defaultDateLib } from "../classes/DateLib";
 
 import { getWeekdays } from "./getWeekdays";
 
@@ -8,7 +8,7 @@ let result: Date[];
 
 describe("when rendered without a locale", () => {
   beforeEach(() => {
-    result = getWeekdays();
+    result = getWeekdays(defaultDateLib);
   });
   test("should return 7 days", () => {
     expect(result).toHaveLength(7);
@@ -22,7 +22,7 @@ describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
   "when week start on %s",
   (weekStartsOn) => {
     beforeEach(() => {
-      result = getWeekdays(es, weekStartsOn);
+      result = getWeekdays(new DateLib({ locale: es, weekStartsOn }));
     });
     test("the first date should be weekStartsOn", () => {
       expect(result[0].getDay()).toBe(weekStartsOn);
@@ -32,7 +32,11 @@ describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
 
 describe("when using ISO week", () => {
   beforeEach(() => {
-    result = getWeekdays(es, 3, true, undefined, dateLib);
+    result = getWeekdays(
+      new DateLib({ locale: es, weekStartsOn: 3 }),
+      true,
+      undefined
+    );
   });
   test("should return Monday as first day", () => {
     expect(result[0]).toBeMonday();

package/src/helpers/getWeekdays.ts

@@ -1,21 +1,17 @@
 import { TZDate } from "@date-fns/tz";
 
-import type { Locale, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib } from "../classes/DateLib.js";
 
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting
  * the weekday names (Monday, Tuesday, etc.).
  */
 export function getWeekdays(
-  locale?: Locale | undefined,
-  /** The index of the first day of the week (0 - Sunday). */
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined,
+  /** The date library. */
+  dateLib: DateLib,
   /** Use ISOWeek instead of locale/ */
   ISOWeek?: boolean | undefined,
-  timeZone?: string | undefined,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  timeZone?: string | undefined
 ): Date[] {
   const date = timeZone
     ? TZDate.tz(timeZone)
@@ -24,9 +20,9 @@ export function getWeekdays(
       : new Date();
   const start = ISOWeek
     ? dateLib.startOfISOWeek(date)
-    : dateLib.startOfWeek(date, { locale, weekStartsOn });
+    : dateLib.startOfWeek(date);
 
-  const days = [];
+  const days: Date[] = [];
   for (let i = 0; i < 7; i++) {
     const day = dateLib.addDays(start, i);
     days.push(day);

package/src/helpers/getYearOptions.test.ts

@@ -1,4 +1,4 @@
-import { dateLib } from "react-day-picker";
+import { defaultDateLib } from "../classes/DateLib";
 
 import { getFormatters } from "./getFormatters";
 import { getYearOptions } from "./getYearOptions";
@@ -13,14 +13,14 @@ test("return undefined if startMonth or endMonth is not provided", () => {
     undefined,
     new Date(2022, 11, 31),
     formatters,
-    dateLib
+    defaultDateLib
   );
   const result2 = getYearOptions(
     displayMonth,
     new Date(2022, 0, 1),
     undefined,
     formatters,
-    dateLib
+    defaultDateLib
   );
 
   expect(result1).toBeUndefined();
@@ -40,7 +40,7 @@ test("return correct dropdown options", () => {
     startMonth,
     endMonth,
     formatters,
-    dateLib
+    defaultDateLib
   );
 
   expect(result).toEqual([

package/src/helpers/getYearOptions.ts

@@ -1,5 +1,5 @@
+import type { DateLib } from "../classes/DateLib.js";
 import { DropdownOption } from "../components/Dropdown.js";
-import type { DateLib } from "../lib/dateLib.js";
 import type { Formatters } from "../types/index.js";
 
 /** Return the years to show in the dropdown. */

package/src/index.ts

@@ -4,8 +4,6 @@ export * from "./types/index.js";
 export * from "./classes/index.js";
 export * from "./components/custom-components.js";
 
-export * from "./lib/index.js";
-
 export * from "./formatters/index.js";
 export * from "./helpers/index.js";
 export * from "./labels/index.js";
@@ -14,4 +12,4 @@ export * from "./UI.js";
 
 export * from "./useDayPicker.js";
 
-export { enUS as defaultLocale } from "./lib/locales.js";
+export { TZDate } from "@date-fns/tz";

package/src/labels/labelDayButton.ts

@@ -1,5 +1,4 @@
-import type { DateLib, LabelOptions } from "../index.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 import type { Modifiers } from "../types/index.js";
 
 /**
@@ -16,11 +15,10 @@ export function labelDayButton(
   date: Date,
   /** The modifiers for the day. */
   modifiers: Modifiers,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  let label = dateLib.format(date, "PPPP", options);
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
   if (modifiers.today) label = `Today, ${label}`;
   if (modifiers.selected) label = `${label}, selected`;
   return label;

package/src/labels/labelGrid.ts

@@ -1,5 +1,4 @@
-import type { LabelOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * Return an ARIA label for the month grid, that will be announced when entering
@@ -11,11 +10,10 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  */
 export function labelGrid(
   date: Date,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  return dateLib.format(date, "LLLL y", options);
+  return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
 }
 
 /**

package/src/labels/labelGridcell.ts

@@ -1,6 +1,4 @@
-import type { DateLib } from "../index.js";
-import type { LabelOptions } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 import type { Modifiers } from "../types/index.js";
 
 /**
@@ -13,11 +11,10 @@ export function labelGridcell(
   date: Date,
   /** The modifiers for the day. */
   modifiers?: Modifiers,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ) {
-  let label = dateLib.format(date, "PPPP", options);
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
   if (modifiers?.today) {
     label = `Today, ${label}`;
   }

package/src/labels/labelMonthDropdown.ts

@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the months dropdown.
@@ -7,6 +7,6 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-export function labelMonthDropdown(options?: LabelOptions) {
+export function labelMonthDropdown(options?: DateLibOptions) {
   return "Choose the Month";
 }

package/src/labels/labelWeekNumber.ts

@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the week number cell (the first cell in the row).
@@ -9,7 +9,7 @@ import type { LabelOptions } from "../lib/dateLib.js";
  */
 export function labelWeekNumber(
   weekNumber: number,
-  options?: LabelOptions
+  options?: DateLibOptions
 ): string {
   return `Week ${weekNumber}`;
 }

package/src/labels/labelWeekNumberHeader.ts

@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the week number header element.
@@ -7,6 +7,6 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-export function labelWeekNumberHeader(options?: LabelOptions): string {
+export function labelWeekNumberHeader(options?: DateLibOptions): string {
   return "Week Number";
 }

package/src/labels/labelWeekday.ts

@@ -1,5 +1,4 @@
-import type { LabelOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the Weekday column header.
@@ -10,9 +9,8 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  */
 export function labelWeekday(
   date: Date,
-  options?: LabelOptions,
-  /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  options?: DateLibOptions,
+  dateLib?: DateLib
 ): string {
-  return dateLib.format(date, "cccc", options);
+  return (dateLib ?? new DateLib(options)).format(date, "cccc");
 }

package/src/labels/labelYearDropdown.ts

@@ -1,4 +1,4 @@
-import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLibOptions } from "../classes/DateLib.js";
 
 /**
  * The ARIA label for the years dropdown.
@@ -7,6 +7,6 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-export function labelYearDropdown(options?: LabelOptions) {
+export function labelYearDropdown(options?: DateLibOptions) {
   return "Choose the Year";
 }

package/src/selection/useMulti.test.tsx

@@ -1,6 +1,6 @@
 import { act, renderHook } from "@/test/render";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 import { DayPickerProps } from "../types";
 
 import { useMulti } from "./useMulti";
@@ -15,7 +15,7 @@ describe("useMulti", () => {
       onSelect: mockOnSelect
     };
 
-    const { result } = renderHook(() => useMulti(props, dateLib));
+    const { result } = renderHook(() => useMulti(props, defaultDateLib));
 
     expect(result.current.selected).toBe(selectedDates);
   });
@@ -27,7 +27,7 @@ describe("useMulti", () => {
       selected: initialSelectedDates
     };
 
-    const { result } = renderHook(() => useMulti(props, dateLib));
+    const { result } = renderHook(() => useMulti(props, defaultDateLib));
 
     act(() => {
       result.current.select?.(new Date(2023, 9, 3), {}, {} as React.MouseEvent);

package/src/selection/useMulti.tsx

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

package/src/selection/useRange.test.tsx

@@ -3,7 +3,7 @@ import { DayPickerProps } from "react-day-picker/types";
 
 import { act, renderHook } from "@/test/render";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 
 import { useRange } from "./useRange";
 
@@ -16,7 +16,7 @@ describe("useRange", () => {
     const { result } = renderHook(() =>
       useRange(
         { mode: "range", selected: initiallySelected, required: false },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -31,7 +31,7 @@ describe("useRange", () => {
     const { result } = renderHook(() =>
       useRange(
         { mode: "range", selected: initiallySelected, required: false },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -54,7 +54,7 @@ describe("useRange", () => {
           required: false,
           max: 5
         },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -73,7 +73,7 @@ describe("useRange", () => {
     const { result } = renderHook(() =>
       useRange(
         { mode: "range", selected: undefined, required: false, min: 5 },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -99,7 +99,7 @@ describe("useRange", () => {
           excludeDisabled: true,
           disabled
         },
-        dateLib
+        defaultDateLib
       )
     );
 
@@ -126,7 +126,7 @@ describe("useRange", () => {
       onSelect: mockOnSelect
     };
 
-    const { result } = renderHook(() => useRange(props, dateLib));
+    const { result } = renderHook(() => useRange(props, defaultDateLib));
 
     expect(result.current.selected).toBe(selectedRange);
   });
@@ -141,7 +141,7 @@ describe("useRange", () => {
       selected: initialSelectedRange
     };
 
-    const { result } = renderHook(() => useRange(props, dateLib));
+    const { result } = renderHook(() => useRange(props, defaultDateLib));
 
     act(() => {
       result.current.select?.(new Date(2023, 9, 6), {}, {} as React.MouseEvent);

package/src/selection/useRange.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
+import type { DateLib } from "../classes/DateLib.js";
 import { useControlledValue } from "../helpers/useControlledValue.js";
-import type { DateLib } from "../lib/index.js";
 import type {
   DayPickerProps,
   Modifiers,
@@ -45,8 +45,11 @@ export function useRange<T extends DayPickerProps>(
 
     if (newRange?.from && newRange.to) {
       let newDate = newRange.from;
-      while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
+      const totalDays = dateLib.differenceInCalendarDays(newRange.to, newDate);
+
+      for (let i = 0; i < totalDays; i++) {
         newDate = dateLib.addDays(newDate, 1);
+
         if (
           excludeDisabled &&
           disabled &&

package/src/selection/useSingle.test.tsx

@@ -1,6 +1,6 @@
 import { act, renderHook } from "@/test/render";
 
-import { dateLib } from "../lib";
+import { defaultDateLib } from "../classes/DateLib";
 import { DayPickerProps } from "../types";
 
 import { useSingle } from "./useSingle";
@@ -15,7 +15,7 @@ describe("useSingle", () => {
       onSelect: mockOnSelect
     };
 
-    const { result } = renderHook(() => useSingle(props, dateLib));
+    const { result } = renderHook(() => useSingle(props, defaultDateLib));
 
     expect(result.current.selected).toBe(selectedDate);
   });
@@ -27,7 +27,7 @@ describe("useSingle", () => {
       selected: initialSelectedDate
     };
 
-    const { result } = renderHook(() => useSingle(props, dateLib));
+    const { result } = renderHook(() => useSingle(props, defaultDateLib));
 
     act(() => {
       result.current.select?.(new Date(2023, 9, 2), {}, {} as React.MouseEvent);

package/src/selection/useSingle.tsx

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

package/{style.css → src/style.css}

@@ -11,8 +11,8 @@
   
   --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
   --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
-  --rdp-day_button-height: var(--rdp-day-width); /* The height of the day cells. */
-  --rdp-day_button-width: var(--rdp-day-height); /* The width of the day cells. */
+  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
+  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
   
   --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
   --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */

package/src/style.module.css.d.ts

@@ -0,0 +1,29 @@
+declare const styles: {
+  root: string;
+  day: string;
+  day_button: string;
+  caption_label: string;
+  button_next: string;
+  button_previous: string;
+  chevron: string;
+  dropdowns: string;
+  dropdown: string;
+  dropdown_root: string;
+  month_caption: string;
+  months: string;
+  month_grid: string;
+  nav: string;
+  weekday: string;
+  week_number: string;
+  today: string;
+  selected: string;
+  outside: string;
+  disabled: string;
+  hidden: string;
+  range_start: string;
+  range_middle: string;
+  range_end: string;
+  focusable: string;
+};
+
+export default styles;