Merge branch 'main' of https://github.com/gpbl/react-day-picker

Author: gpbl

src/DayPicker.test.tsx

@@ -9,7 +9,7 @@ import {
   nextButton,
   previousButton,
 } from "@/test/elements";
-import { fireEvent, render, screen } from "@/test/render";
+import { act, fireEvent, render, screen } from "@/test/render";
 import { setTestTime } from "@/test/setTestTime";
 import { user } from "@/test/user";
 import { defaultLocale } from "./classes/DateLib";
@@ -122,6 +122,31 @@ describe("when the grid is focused", () => {
   });
 });
 
+describe("when a disabled day is focused", () => {
+  test("keyboard and mouse interactions do not select it", async () => {
+    const disabledDay = new Date(2024, 8, 5);
+    const handleSelect = jest.fn();
+
+    render(
+      <DayPicker
+        defaultMonth={disabledDay}
+        disabled={[disabledDay]}
+        mode="single"
+        onSelect={handleSelect}
+      />,
+    );
+
+    const disabledElement = dateButton(disabledDay);
+    act(() => disabledElement.focus());
+
+    await user.keyboard("{Enter}");
+    await user.click(disabledElement);
+
+    expect(handleSelect).not.toHaveBeenCalled();
+    expect(disabledElement).toHaveAttribute("aria-disabled", "true");
+  });
+});
+
 describe("when navigation is disabled", () => {
   beforeEach(() => {
     jest.useFakeTimers();

src/DayPicker.tsx

@@ -242,6 +242,9 @@ export function DayPicker(initialProps: DayPickerProps) {
       e.preventDefault();
       e.stopPropagation();
       setFocused(day);
+      if (m.disabled) {
+        return;
+      }
       select?.(day.date, m, e);
       onDayClick?.(day.date, m, e);
     },

src/helpers/getDates.test.ts

@@ -113,16 +113,18 @@ describe("when the first month and the last month are the same", () => {
   describe("when using a max date", () => {
     const month = new Date(2023, 4, 1);
     const maxDate = new Date(2023, 4, 15);
+    const dateLib = new DateLib({ weekStartsOn: 1 });
+    const expectedLastDay = dateLib.addDays(dateLib.startOfWeek(maxDate), 6);
+    const expectedLength =
+      dateLib.differenceInCalendarDays(
+        expectedLastDay,
+        dateLib.startOfWeek(month),
+      ) + 1;
 
-    it("the last day should be the max date", () => {
-      const dates = getDates(
-        [month],
-        maxDate,
-        {},
-        new DateLib({ weekStartsOn: 1 }),
-      );
-      expect(dates).toHaveLength(15);
-      expect(dates[dates.length - 1]).toEqual(maxDate);
+    it("the last day should be the end of that week", () => {
+      const dates = getDates([month], maxDate, {}, dateLib);
+      expect(dates).toHaveLength(expectedLength);
+      expect(dates[dates.length - 1]).toEqual(expectedLastDay);
     });
   });
   describe("when using ISO weeks", () => {
@@ -139,6 +141,50 @@ describe("when the first month and the last month are the same", () => {
       expect(dates[dates.length - 1]).toEqual(new Date(2023, 5, 4));
     });
   });
+
+  describe("when using a custom week start with a max date", () => {
+    const month = new Date(2023, 4, 1); // May 2023
+    const maxDate = new Date(2023, 4, 15);
+    const dateLib = new DateLib({ weekStartsOn: 3 }); // Wednesday start
+
+    const expectedLastDay = dateLib.addDays(dateLib.startOfWeek(maxDate), 6);
+    const expectedLength =
+      dateLib.differenceInCalendarDays(
+        expectedLastDay,
+        dateLib.startOfWeek(month),
+      ) + 1;
+
+    it("clamps to the end of the custom week", () => {
+      const dates = getDates([month], maxDate, {}, dateLib);
+      expect(dates[dates.length - 1]).toEqual(expectedLastDay);
+      expect(dates).toHaveLength(expectedLength);
+    });
+  });
+
+  describe("when using ISO weeks with a max date", () => {
+    const month = new Date(2023, 4, 1); // May 2023
+    const maxDate = new Date(2023, 4, 15);
+    const expectedLastDay = defaultDateLib.addDays(
+      defaultDateLib.startOfISOWeek(maxDate),
+      6,
+    );
+    const expectedLength =
+      defaultDateLib.differenceInCalendarDays(
+        expectedLastDay,
+        defaultDateLib.startOfISOWeek(month),
+      ) + 1;
+
+    it("clamps to the end of the ISO week", () => {
+      const dates = getDates(
+        [month],
+        maxDate,
+        { ISOWeek: true },
+        defaultDateLib,
+      );
+      expect(dates[dates.length - 1]).toEqual(expectedLastDay);
+      expect(dates).toHaveLength(expectedLength);
+    });
+  });
 });
 
 describe("when the first month and the last month are different", () => {
@@ -161,16 +207,18 @@ describe("when the first month and the last month are different", () => {
     const firstMonth = new Date(2023, 4, 1);
     const lastMonth = new Date(2023, 11, 1);
     const maxDate = new Date(2023, 5, 15);
+    const dateLib = new DateLib({ weekStartsOn: 1 });
+    const expectedLastDay = dateLib.addDays(dateLib.startOfWeek(maxDate), 6);
+    const expectedLength =
+      dateLib.differenceInCalendarDays(
+        expectedLastDay,
+        dateLib.startOfWeek(firstMonth),
+      ) + 1;
 
-    it("the last day should be the max date", () => {
-      const dates = getDates(
-        [firstMonth, lastMonth],
-        maxDate,
-        {},
-        new DateLib({ weekStartsOn: 1 }),
-      );
-      expect(dates).toHaveLength(46);
-      expect(dates[dates.length - 1]).toEqual(maxDate);
+    it("the last day should be the end of that week", () => {
+      const dates = getDates([firstMonth, lastMonth], maxDate, {}, dateLib);
+      expect(dates).toHaveLength(expectedLength);
+      expect(dates[dates.length - 1]).toEqual(expectedLastDay);
     });
   });
   describe("when using ISO weeks", () => {

src/helpers/getDates.ts

@@ -43,21 +43,33 @@ export function getDates(
       ? startOfISOWeek(firstMonth)
       : startOfWeek(firstMonth);
 
-  const endWeekLastDate = broadcastCalendar
+  const displayMonthsWeekEnd = broadcastCalendar
     ? endOfBroadcastWeek(lastMonth)
     : ISOWeek
       ? endOfISOWeek(endOfMonth(lastMonth))
       : endOfWeek(endOfMonth(lastMonth));
 
-  const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
+  // If maxDate is set, clamp the grid to the end of that week.
+  const constraintWeekEnd =
+    maxDate &&
+    (broadcastCalendar
+      ? endOfBroadcastWeek(maxDate)
+      : ISOWeek
+        ? endOfISOWeek(maxDate)
+        : endOfWeek(maxDate));
+
+  // Pick the earliest week end between the displayed months and the constraint.
+  const gridEndDate =
+    constraintWeekEnd && isAfter(displayMonthsWeekEnd, constraintWeekEnd)
+      ? constraintWeekEnd
+      : displayMonthsWeekEnd;
+
+  const nOfDays = differenceInCalendarDays(gridEndDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
 
   const dates: Date[] = [];
   for (let i = 0; i <= nOfDays; i++) {
     const date = addDays(startWeekFirstDate, i);
-    if (maxDate && isAfter(date, maxDate)) {
-      break;
-    }
     dates.push(date);
   }