Merge branch 'main' into pr/benasher44/2249

# Conflicts:
#	package.json
#	pnpm-lock.yaml

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,8 +7,7 @@ assignees: "gpbl"
 ## Description
 
 Please provide a detailed description of the issue. Include any relevant context or steps to reproduce the problem.
-
-Fork this CodeSandbox: https://codesandbox.io/p/sandbox/react-day-picker-v8-eg8mw and add to it the code to reproduce the issue.
+ssue.
 
 ## Expected Behavior
 
@@ -41,3 +40,7 @@ If applicable, add screenshots or GIFs to help explain your problem.
 - Version [e.g. 22]:
 - Operating System [e.g. iOS, Windows]:
 - Other relevant information:
+
+## Checklist
+
+- [ ] I included a [CodeSandbox](https://codesandbox.io/p/sandbox/react-day-picker-v8-eg8mw) link that helps maintainer to replicate the bug

.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"
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -21,7 +21,6 @@ This release includes important updates related to accessibility, styles and per
 #### At a glance
 
 - Enhanced accessibility to better comply with [WCAG21](https://www.w3.org/TR/WCAG21/) recommendations.
-- New HTML output using `div` grids instead of tables.
 - Simplified styles and selectors with new CSS variables.
 - Added support for UTC dates.
 - Improved selection logic for range mode.

README.md

@@ -33,7 +33,7 @@ import { DayPicker } from "react-day-picker";
 import "react-day-picker/dist/style.css";
 
 function MyDatePicker() {
-  const [selected, setSelected] = useState();
+  const [selected, setSelected] = useState<Date | undefined>();
   return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
 }
 ```

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/AutoFocus.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+/** Test for the next focus day to not cause an infinite recursion. */
+export function AutoFocus() {
+  return (
+    <div>
+      <DayPicker autoFocus mode="single" />
+    </div>
+  );
+}

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,33 +4,38 @@ 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")}
-      <button
-        disabled={!previousMonth}
-        onClick={() => previousMonth && goToMonth(previousMonth)}
-      >
-        Previous
-      </button>
-      <button
-        disabled={!nextMonth}
-        onClick={() => nextMonth && goToMonth(nextMonth)}
-      >
-        Next
-      </button>
-    </h2>
+    <>
+      <h2>{format(props.calendarMonth.date, "MMM yyy")}</h2>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <button
+          style={{ all: "revert", cursor: "pointer" }}
+          disabled={!previousMonth}
+          onClick={() => previousMonth && goToMonth(previousMonth)}
+        >
+          Previous
+        </button>
+        <button
+          style={{ all: "revert", cursor: "pointer" }}
+          disabled={!nextMonth}
+          onClick={() => nextMonth && goToMonth(nextMonth)}
+        >
+          Next
+        </button>
+      </div>
+    </>
   );
 }
 
 export function CustomCaption() {
   return (
     <DayPicker
+      hideNavigation
       components={{
         MonthCaption: CustomMonthCaption
       }}

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(