feat: rc3 updates

.vscode/tasks.json

@@ -0,0 +1,38 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "typescript",
+      "tsconfig": "tsconfig-esm.json",
+      "option": "watch",
+      "problemMatcher": ["$tsc-watch"],
+      "group": "build",
+      "label": "tsc: watch - tsconfig-esm.json",
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    },
+    {
+      "type": "typescript",
+      "tsconfig": "tsconfig-cjs.json",
+      "option": "watch",
+      "problemMatcher": ["$tsc-watch"],
+      "group": "build",
+      "label": "tsc: watch - tsconfig-cjs.json",
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    },
+    {
+      "type": "npm",
+      "script": "typecheck-watch",
+      "group": "build",
+      "problemMatcher": [],
+      "label": "npm: typecheck-watch",
+      "detail": "tsc --project ./tsconfig.json --noEmit --watch",
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    }
+  ]
+}

examples/AccessibleDatePicker.tsx

@@ -6,28 +6,22 @@ import { DayPicker } from "react-day-picker";
 export function AccessibleDatePicker() {
   const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
   return (
-    <div role="group" aria-labelledby="meeting-date">
-      <h2 id="meeting-date">Meeting Date</h2>
-      <DayPicker
-        mode="single"
-        onSelect={setMeetingDate}
-        selected={meetingDate}
-        labels={{
-          labelCaption: () => "Select a date for the meeting",
-          labelDay: (date, modifiers) => {
-            return modifiers.selected
-              ? `Selected Meeting Date: ${format(date, "PPP")}`
-              : "";
-          }
-        }}
-        footer={
-          <p aria-live="polite">
-            {meetingDate
-              ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
-              : "Please pick a date for the meeting."}
-          </p>
+    <DayPicker
+      mode="single"
+      onSelect={setMeetingDate}
+      selected={meetingDate}
+      labels={{
+        labelDayButton: (date, modifiers) => {
+          return modifiers.selected
+            ? `Selected Meeting Date: ${format(date, "PPP")}`
+            : "";
         }
-      />
-    </div>
+      }}
+      footer={
+        meetingDate
+          ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
+          : "Please pick a date for the meeting."
+      }
+    />
   );
 }

examples/ContainerAttributes.tsx

@@ -11,7 +11,6 @@ export function ContainerAttributes() {
       nonce="foo_nonce"
       title="foo_title"
       lang="it"
-      mode="multiple"
     />
   );
 }

examples/Controlled.tsx

@@ -8,16 +8,16 @@ export function Controlled() {
   const nextMonth = addMonths(new Date(), 1);
   const [month, setMonth] = React.useState<Date>(nextMonth);
 
-  const footer = (
+  return (
     <div>
+      <DayPicker month={month} onMonthChange={setMonth} />
       <button
+        style={{ all: "unset", cursor: "pointer", color: "blue" }}
         disabled={isSameMonth(today, month)}
         onClick={() => setMonth(today)}
       >
         Go to Today
       </button>
     </div>
   );
-
-  return <DayPicker month={month} onMonthChange={setMonth} footer={footer} />;
 }

examples/CustomCaption.tsx

@@ -4,14 +4,14 @@ import { format } from "date-fns";
 import {
   type MonthCaptionProps,
   DayPicker,
-  useCalendar
+  useDayPicker
 } from "react-day-picker";
 
 function CustomMonthCaption(props: MonthCaptionProps) {
-  const { goToMonth, nextMonth, previousMonth } = useCalendar();
+  const { goToMonth, nextMonth, previousMonth } = useDayPicker();
   return (
     <h2>
-      {format(props.month.date, "MMM yyy")}
+      {format(props.calendarMonth.date, "MMM yyy")}
       <button
         disabled={!previousMonth}
         onClick={() => previousMonth && goToMonth(previousMonth)}

examples/CustomDayButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { DayPicker, type DayButtonProps } from "react-day-picker";
+
+function HighlightDay(props: DayButtonProps) {
+  const { day, modifiers, ...buttonProps } = props;
+  return (
+    <button {...buttonProps} style={{ whiteSpace: "nowrap" }}>
+      {props.day.date.getDate() === 19 ? `🎉` : props.children}
+    </button>
+  );
+}
+
+export function CustomDayButton() {
+  return <DayPicker mode="single" components={{ DayButton: HighlightDay }} />;
+}

examples/CustomDayDate.test.tsx

@@ -2,13 +2,13 @@ import React from "react";
 
 import { render, screen } from "@/test/render";
 
-import { CustomDayDate } from "./CustomDayDate";
+import { CustomDayButton } from "./CustomDayButton";
 
 beforeAll(() => jest.setSystemTime(new Date(2021, 10, 25)));
 afterAll(() => jest.useRealTimers());
 
 beforeEach(() => {
-  render(<CustomDayDate />);
+  render(<CustomDayButton />);
 });
 
 test("should render the emoji", () => {

examples/CustomMultiple.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { gridcell } from "@/test/elements";
+import { dateButton, gridcell } from "@/test/elements";
 import { render, screen } from "@/test/render";
 import { user } from "@/test/user";
 
@@ -18,24 +18,24 @@ beforeEach(() => {
 describe("when a day is clicked", () => {
   const day1 = new Date(2021, 10, 1);
   beforeEach(async () => {
-    await user.click(gridcell(day1));
+    await user.click(dateButton(day1));
   });
   test("should appear as selected", () => {
-    expect(gridcell(day1)).toHaveAttribute("aria-selected", "true");
+    expect(gridcell(day1, true)).toHaveAttribute("aria-selected", "true");
   });
   test("should update the footer", () => {
     expect(screen.getByText("You selected 1 days.")).toBeInTheDocument();
   });
   describe("when a second day is clicked", () => {
     const day2 = new Date(2021, 10, 2);
     beforeEach(async () => {
-      await user.click(gridcell(day2));
+      await user.click(dateButton(day2));
     });
     test("the first day should appear as selected", () => {
-      expect(gridcell(day1)).toHaveAttribute("aria-selected", "true");
+      expect(gridcell(day1, true)).toHaveAttribute("aria-selected", "true");
     });
     test("the second day should appear as selected", () => {
-      expect(gridcell(day2)).toHaveAttribute("aria-selected", "true");
+      expect(gridcell(day2, true)).toHaveAttribute("aria-selected", "true");
     });
     test("should update the footer", () => {
       expect(screen.getByText("You selected 2 days.")).toBeInTheDocument();

examples/CustomSingle.test.tsx

@@ -1,38 +1,38 @@
 import React from "react";
 
-import { gridcell } from "@/test/elements";
+import { dateButton, gridcell } from "@/test/elements";
 import { render, screen } from "@/test/render";
 import { user } from "@/test/user";
 
 import { CustomSingle } from "./CustomSingle";
 
-const today = new Date(2021, 10, 25);
-
-beforeAll(() => jest.setSystemTime(today));
-afterAll(() => jest.useRealTimers());
+const today = new Date();
 
 beforeEach(() => {
   render(<CustomSingle />);
 });
 
 describe("when a day is clicked", () => {
   beforeEach(async () => {
-    await user.click(gridcell(today));
+    await user.click(dateButton(today));
   });
-  test("should appear as selected", () => {
-    expect(gridcell(today)).toHaveAttribute("aria-selected", "true");
+  test("the gridcell should appear as selected", () => {
+    expect(gridcell(today, true)).toHaveAttribute("aria-selected", "true");
   });
   test("should update the footer", () => {
     expect(
-      screen.getByText("You selected Thu Nov 25 2021")
+      screen.getByText("You selected " + today.toDateString())
     ).toBeInTheDocument();
   });
   describe("when clicking the day again", () => {
     beforeEach(async () => {
-      await user.click(gridcell(today));
+      await user.click(dateButton(today));
     });
     test("should not appear as selected", () => {
-      expect(gridcell(today)).not.toHaveAttribute("aria-selected", "true");
+      expect(gridcell(today, true)).not.toHaveAttribute(
+        "aria-selected",
+        "true"
+      );
     });
     test("should update the footer", () => {
       expect(

examples/CustomWeek.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { gridcell } from "@/test/elements";
+import { dateButton, gridcell } from "@/test/elements";
 import { render } from "@/test/render";
 import { user } from "@/test/user";
 
@@ -17,35 +17,35 @@ beforeEach(() => {
 
 describe("when a day is clicked", () => {
   beforeEach(async () => {
-    await user.click(gridcell(today));
+    await user.click(dateButton(today));
   });
   test("the whole week should appear selected", () => {
     const week = [
-      gridcell(new Date(2021, 10, 21)),
-      gridcell(new Date(2021, 10, 22)),
-      gridcell(new Date(2021, 10, 23)),
-      gridcell(new Date(2021, 10, 24)),
-      gridcell(new Date(2021, 10, 25)),
-      gridcell(new Date(2021, 10, 26)),
-      gridcell(new Date(2021, 10, 27))
+      gridcell(new Date(2021, 10, 21), true),
+      gridcell(new Date(2021, 10, 22), true),
+      gridcell(new Date(2021, 10, 23), true),
+      gridcell(new Date(2021, 10, 24), true),
+      gridcell(new Date(2021, 10, 25), true),
+      gridcell(new Date(2021, 10, 26), true),
+      gridcell(new Date(2021, 10, 27), true)
     ];
     week.forEach((day) => {
       expect(day).toHaveAttribute("aria-selected", "true");
     });
   });
   describe("when clicking the day again", () => {
     beforeEach(async () => {
-      await user.click(gridcell(today));
+      await user.click(dateButton(today));
     });
     test("the whole week should not be selected", () => {
       const week = [
-        gridcell(new Date(2021, 10, 21)),
-        gridcell(new Date(2021, 10, 22)),
-        gridcell(new Date(2021, 10, 23)),
-        gridcell(new Date(2021, 10, 24)),
-        gridcell(new Date(2021, 10, 25)),
-        gridcell(new Date(2021, 10, 26)),
-        gridcell(new Date(2021, 10, 27))
+        dateButton(new Date(2021, 10, 21)),
+        dateButton(new Date(2021, 10, 22)),
+        dateButton(new Date(2021, 10, 23)),
+        dateButton(new Date(2021, 10, 24)),
+        dateButton(new Date(2021, 10, 25)),
+        dateButton(new Date(2021, 10, 26)),
+        dateButton(new Date(2021, 10, 27))
       ];
       week.forEach((day) => {
         expect(day).not.toHaveAttribute("aria-selected", "true");

examples/CustomWeek.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { endOfWeek, isSameWeek, startOfWeek } from "date-fns";
+import { endOfWeek, startOfWeek } from "date-fns";
 import { DateRange, DayPicker } from "react-day-picker";
 
 /** Select the whole week when the day is clicked. */
@@ -23,23 +23,10 @@ export function CustomWeek() {
           to: endOfWeek(day)
         });
       }}
-      onWeekNumberClick={(weekNumber, dates) => {
-        if (selectedWeek?.from && isSameWeek(dates[0], selectedWeek.from)) {
-          setSelectedWeek(undefined); // clear the selection if the week is already selected
-          return;
-        }
-        setSelectedWeek({
-          from: startOfWeek(dates[0]),
-          to: endOfWeek(dates[dates.length - 1])
-        });
-      }}
       footer={
-        selectedWeek && (
-          <p>
-            Week from {selectedWeek?.from?.toLocaleDateString()} to
-            {selectedWeek?.to?.toLocaleDateString()}
-          </p>
-        )
+        selectedWeek &&
+        `Week from ${selectedWeek?.from?.toLocaleDateString()} to
+            {selectedWeek?.to?.toLocaleDateString()}`
       }
     />
   );

examples/Dialog.tsx

@@ -115,11 +115,9 @@ export function Dialog() {
           selected={selectedDate}
           onSelect={handleDayPickerSelect}
           footer={
-            <p aria-live="assertive" aria-atomic="true">
-              {selectedDate !== undefined && (
-                <>Selected: {selectedDate.toDateString()}</>
-              )}
-            </p>
+            selectedDate !== undefined && (
+              <>Selected: {selectedDate.toDateString()}</>
+            )
           }
         />
       </dialog>