react-day-picker 9.3.0 → 9.3.2

package/examples/TestCase2585.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+/**
+ * Test case for issue #2585
+ *
+ * @see https://github.com/gpbl/react-day-picker/issues/2585
+ */
+export function TestCase2585() {
+  return (
+    <DayPicker
+      defaultMonth={new Date(2026, 1)}
+      showOutsideDays
+      showWeekNumber
+      fixedWeeks
+      numberOfMonths={12}
+    />
+  );
+}

package/examples/__snapshots__/Range.test.tsx.snap

@@ -338,7 +338,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_start rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_start"
                   data-day="2020-06-15"
                   data-selected="true"
                 >
@@ -353,7 +353,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_middle rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_middle"
                   data-day="2020-06-16"
                   data-selected="true"
                 >
@@ -368,7 +368,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_middle rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_middle"
                   data-day="2020-06-17"
                   data-selected="true"
                 >
@@ -383,7 +383,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_middle rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_middle"
                   data-day="2020-06-18"
                   data-selected="true"
                 >
@@ -398,7 +398,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_end rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_end"
                   data-day="2020-06-19"
                   data-selected="true"
                 >

package/examples/index.ts

@@ -61,6 +61,7 @@ export * from "./Spanish";
 export * from "./SpanishWeekStartsOn";
 export * from "./Start";
 export * from "./StartEndMonths";
+export * from "./StartEndMonthsShowOutsideDays";
 export * from "./StylingCss";
 export * from "./StylingInline";
 export * from "./StylingModifiers";
@@ -69,6 +70,7 @@ export * from "./Testcase1567";
 export * from "./TestCase2047";
 export * from "./TestCase2389";
 export * from "./TestCase2511";
+export * from "./TestCase2585";
 export * from "./TimeZone";
 export * from "./Utc";
 export * from "./WeekIso";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.3.0",
+  "version": "9.3.2",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -173,34 +173,34 @@
     "locale.d.ts"
   ],
   "dependencies": {
-    "@date-fns/tz": "^1.1.2",
+    "@date-fns/tz": "^1.2.0",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
     "@jest/types": "^29.6.3",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.7",
-    "@types/react": "^18.3.11",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
     "date-fns-jalali": "^3.6.0-1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-testing-library": "^6.4.0",
-    "html-validate": "^8.24.2",
+    "html-validate": "^8.25.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mockdate": "^3.0.5",
@@ -210,8 +210,8 @@
     "react-dom": "^18.3.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "tslib": "^2.8.0",
-    "typescript": "~5.5.4",
+    "tslib": "^2.8.1",
+    "typescript": "~5.6.3",
     "typescript-css-modules": "^1.0.4"
   },
   "peerDependencies": {

package/src/formatters/formatMonthDropdown.test.ts

@@ -1,11 +1,15 @@
 import { es } from "date-fns/locale/es";
 
+import { defaultLocale } from "../classes/DateLib";
+
 import { formatMonthDropdown } from "./formatMonthDropdown";
 
 const date = new Date(2022, 10, 21);
 
 test("should return the formatted month dropdown label", () => {
-  expect(formatMonthDropdown(date.getMonth())).toEqual("November");
+  expect(formatMonthDropdown(date.getMonth(), defaultLocale)).toEqual(
+    "November"
+  );
 });
 
 describe("when a locale is passed in", () => {

package/src/formatters/formatMonthDropdown.ts

@@ -1,5 +1,4 @@
-import type { DateFnsMonth } from "../classes/DateLib.js";
-import { defaultLocale } from "../classes/DateLib.js";
+import type { DateFnsMonth, Locale } from "../classes/DateLib.js";
 
 /**
  * Format the month number for the dropdown option label.
@@ -12,7 +11,7 @@ export function formatMonthDropdown(
   /** The month number to format. */
   monthNumber: number,
   /** The locale to use for formatting. */
-  locale = defaultLocale
+  locale: Locale
 ): string {
   return locale.localize?.month(monthNumber as DateFnsMonth);
 }

package/src/helpers/getDates.test.ts

@@ -58,9 +58,7 @@ describe("when the first month and the last month are the same", () => {
         const dates = getDates(
           [month],
           undefined,
-          {
-            fixedWeeks: true
-          },
+          { fixedWeeks: true },
           defaultDateLib
         );
         expect(dates).toHaveLength(42);
@@ -69,6 +67,35 @@ describe("when the first month and the last month are the same", () => {
       });
     });
   });
+
+  describe("when the month has 4 weeks", () => {
+    const month = new Date(2026, 1); // February 2026
+    describe("when not using fixed weeks", () => {
+      it("should return 28 dates", () => {
+        const dates = getDates(
+          [month],
+          undefined,
+          {
+            fixedWeeks: false
+          },
+          defaultDateLib
+        );
+        expect(dates).toHaveLength(28);
+      });
+    });
+    describe("when using fixed weeks", () => {
+      it("should return 42 dates", () => {
+        const dates = getDates(
+          [month],
+          undefined,
+          { fixedWeeks: true },
+          defaultDateLib
+        );
+        expect(dates).toHaveLength(42);
+      });
+    });
+  });
+
   describe("when using Monday as first day of the week", () => {
     const month = new Date(2023, 4, 1);
     it("the first day should be Monday", () => {

package/src/helpers/getDates.ts

@@ -2,7 +2,7 @@ import { type DateLib } from "../classes/DateLib.js";
 import { type DayPickerProps } from "../types/props.js";
 
 /** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
+export const NrOfDaysWithFixedWeeks = 42;
 
 /** Return all the dates to display in the calendar. */
 export function getDates(
@@ -50,7 +50,8 @@ export function getDates(
   // If fixed weeks is enabled, add the extra dates to the array
   const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }

package/src/helpers/getMonthOptions.ts

@@ -1,4 +1,4 @@
-import type { DateLib } from "../classes/DateLib.js";
+import { defaultLocale, type DateLib } from "../classes/DateLib.js";
 import { DropdownOption } from "../components/Dropdown.js";
 import type { Formatters } from "../types/index.js";
 
@@ -26,7 +26,10 @@ export function getMonthOptions(
     return a - b;
   });
   const options = sortedMonths.map((value) => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
+    const label = formatters.formatMonthDropdown(
+      value,
+      dateLib.options.locale ?? defaultLocale
+    );
     const month = dateLib.Date
       ? new dateLib.Date(year, value)
       : new Date(year, value);

package/src/helpers/getMonths.ts

@@ -2,6 +2,8 @@ import type { DateLib } from "../classes/DateLib.js";
 import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
 import type { DayPickerProps } from "../types/index.js";
 
+import { NrOfDaysWithFixedWeeks } from "./getDates.js";
+
 /** Return the months to display in the calendar. */
 export function getMonths(
   /** The months (as dates) to display in the calendar. */
@@ -37,10 +39,12 @@ export function getMonths(
         return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
       });
 
-      if (props.fixedWeeks && monthDates.length < 42) {
+      if (props.fixedWeeks && monthDates.length < NrOfDaysWithFixedWeeks) {
         const extraDates = dates.filter((date) => {
+          const daysToAdd = NrOfDaysWithFixedWeeks - monthDates.length;
           return (
-            date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7)
+            date > lastDateOfLastWeek &&
+            date <= addDays(lastDateOfLastWeek, daysToAdd)
           );
         });
         monthDates.push(...extraDates);

package/src/types/deprecated.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { DayFlag, SelectionState } from "../UI.js";
 import {
   MonthCaption,
   type MonthCaptionProps
@@ -99,6 +100,20 @@ export type DaySelectionMode = Mode;
  */
 export type Modifier = string;
 
+/**
+ * @deprecated This type will be removed. Use {@link DayFlag} or
+ *   {@link SelectionState} instead.
+ * @protected
+ */
+export type InternalModifier =
+  | DayFlag.disabled
+  | DayFlag.hidden
+  | DayFlag.focused
+  | SelectionState.range_end
+  | SelectionState.range_middle
+  | SelectionState.range_start
+  | SelectionState.selected;
+
 /**
  * @deprecated This type will be removed. Use `SelectHandler<"single">` instead.
  * @protected

package/src/types/props.ts

@@ -291,6 +291,11 @@ export interface PropsBase {
    * @see https://daypicker.dev/guides/accessibility#autofocus
    */
   autoFocus?: boolean;
+  /**
+   * @private
+   * @deprecated This prop will be removed. Use {@link autoFocus} instead.
+   */
+  initialFocus?: boolean;
   /**
    * Apply the `disabled` modifier to the matching days.
    *

package/src/useGetModifiers.test.tsx

@@ -0,0 +1,154 @@
+import { DayFlag } from "./UI";
+import { CalendarDay, defaultDateLib } from "./classes/index";
+import { useGetModifiers } from "./useGetModifiers";
+
+const dateLib = defaultDateLib;
+
+const displayedMonth = new Date(2022, 10, 1);
+
+const date1 = new Date(2022, 9, 30);
+const date2 = new Date(2022, 10, 10);
+const date3 = new Date(2022, 10, 11);
+const date4 = new Date(2022, 10, 12);
+const date5 = new Date(2022, 10, 13);
+const date6 = new Date(2022, 10, 14);
+const date7 = new Date(2022, 11, 1);
+
+const day1 = new CalendarDay(date1, displayedMonth);
+const day2 = new CalendarDay(date2, displayedMonth);
+const day3 = new CalendarDay(date3, displayedMonth);
+const day4 = new CalendarDay(date4, displayedMonth);
+const day5 = new CalendarDay(date5, displayedMonth);
+const day6 = new CalendarDay(date6, displayedMonth);
+const day7 = new CalendarDay(date7, displayedMonth);
+
+const days: CalendarDay[] = [day1, day2, day3, day4, day5, day6, day7];
+
+const props = {
+  disabled: [date2],
+  hidden: [date3],
+  modifiers: {
+    custom: [date4],
+    selected: [date6]
+  },
+  selected: date7,
+  showOutsideDays: true,
+  today: date5,
+  timeZone: "UTC"
+};
+
+describe("useGetModifiers", () => {
+  describe("default props", () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const getModifiers = useGetModifiers(days, props, dateLib);
+
+    test("return the modifiers for a given day", () => {
+      const modifiers = getModifiers(day2);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(true);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.custom).toBe(false);
+    });
+
+    test("return the custom modifiers for a given day", () => {
+      const modifiers = getModifiers(day4);
+      expect(modifiers.custom).toBe(true);
+    });
+
+    test("return the custom `selected` modifier for a given day", () => {
+      const modifiers = getModifiers(day6);
+      expect(modifiers.selected).toBe(true);
+    });
+
+    test("return the today modifier for a given day", () => {
+      const modifiers = getModifiers(day5);
+
+      expect(modifiers[DayFlag.today]).toBe(true);
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+    });
+
+    test("return the hidden modifier for a given day", () => {
+      const modifiers = getModifiers(day3);
+
+      expect(modifiers[DayFlag.hidden]).toBe(true);
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.today]).toBe(false);
+    });
+
+    test("return the modifiers for a given day before the displayed month", () => {
+      const modifiers = getModifiers(day1);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+
+    test("return the modifiers for a given day after the displayed month", () => {
+      const modifiers = getModifiers(day7);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+  });
+
+  describe("with startMonth and endMonth props", () => {
+    const startMonth = new Date(displayedMonth);
+    startMonth.setDate(30);
+    const endMonth = new Date(displayedMonth);
+    endMonth.setDate(1);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const getModifiers = useGetModifiers(
+      days,
+      { ...props, startMonth, endMonth },
+      dateLib
+    );
+    test("return the modifiers for a given day", () => {
+      const modifiers = getModifiers(day2);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(true);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.custom).toBe(false);
+    });
+
+    test("return the modifiers for a given day before the displayed month", () => {
+      const modifiers = getModifiers(day1);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(true);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+
+    test("return the modifiers for a given day after the displayed month", () => {
+      const modifiers = getModifiers(day7);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(true);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+  });
+});

package/src/useGetModifiers.tsx

@@ -1,6 +1,6 @@
 import { TZDate } from "@date-fns/tz";
 
-import { DayFlag, SelectionState } from "./UI.js";
+import { DayFlag } from "./UI.js";
 import type { CalendarDay, DateLib } from "./classes/index.js";
 import type { DayPickerProps, Modifiers } from "./types/index.js";
 import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
@@ -8,6 +8,8 @@ import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 export function useGetModifiers(
@@ -17,7 +19,17 @@ export function useGetModifiers(
 ) {
   const { disabled, hidden, modifiers, showOutsideDays, today } = props;
 
-  const { isSameDay, isSameMonth } = dateLib;
+  const {
+    isSameDay,
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
+  } = dateLib;
+
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
 
   const internalModifiersMap: Record<DayFlag, CalendarDay[]> = {
     [DayFlag.focused]: [],
@@ -29,24 +41,25 @@ export function useGetModifiers(
 
   const customModifiersMap: Record<string, CalendarDay[]> = {};
 
-  const selectionModifiersMap: Record<SelectionState, CalendarDay[]> = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
-
   for (const day of days) {
     const { date, displayMonth } = day;
 
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
 
+    const isBeforeStartMonth = Boolean(
+      startMonth && isBefore(date, startMonth)
+    );
+
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
+
     const isDisabled = Boolean(
       disabled && dateMatchModifiers(date, disabled, dateLib)
     );
 
     const isHidden =
       Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
+      isBeforeStartMonth ||
+      isAfterEndMonth ||
       (!showOutsideDays && isOutside);
 
     const isToday = isSameDay(
@@ -81,7 +94,7 @@ export function useGetModifiers(
     }
   }
 
-  return (day: CalendarDay) => {
+  return (day: CalendarDay): Modifiers => {
     // Initialize all the modifiers to false
     const dayFlags: Record<DayFlag, boolean> = {
       [DayFlag.focused]: false,
@@ -90,12 +103,6 @@ export function useGetModifiers(
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates: Record<SelectionState, boolean> = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers: Modifiers = {};
 
     // Find the modifiers for the given day
@@ -103,19 +110,14 @@ export function useGetModifiers(
       const days = internalModifiersMap[name as DayFlag];
       dayFlags[name as DayFlag] = days.some((d) => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name as SelectionState];
-      selectionStates[name as SelectionState] = days.some((d) => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some((d) => d === day);
     }
 
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
-    } as Modifiers;
+    };
   };
 }