refactor: simplify props, contexts (#2211)

Author: gpbl

examples/CustomCaption.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 
 import { format } from "date-fns";
-import { MonthCaptionProps, DayPicker, useCalendar } from "react-day-picker";
+import {
+  MonthCaptionProps,
+  DayPicker,
+  useCalendarContext
+} from "react-day-picker";
 
 function CustomMonthCaption(props: MonthCaptionProps) {
-  const { goToMonth, nextMonth, previousMonth } = useCalendar();
+  const { goToMonth, nextMonth, previousMonth } = useCalendarContext();
   return (
     <h2>
       {format(props.month.date, "MMM yyy")}

examples/CustomMultiple.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 
 import { isSameDay } from "date-fns";
-import { DayMouseEventHandler, DayPicker } from "react-day-picker";
+import { DayEventHandler, DayPicker } from "react-day-picker";
 
 export function CustomMultiple() {
   const [value, setValue] = useState<Date[]>([]);
 
-  const handleDayClick: DayMouseEventHandler = (day, modifiers) => {
+  const handleDayClick: DayEventHandler<React.MouseEvent> = (
+    day,
+    modifiers
+  ) => {
     const newValue = [...value];
     if (modifiers.selected) {
       const index = value.findIndex((d) => isSameDay(day, d));

examples/CustomSingle.tsx

@@ -4,7 +4,7 @@ import { DayPicker, DayPickerProps, type Mode } from "react-day-picker";
 
 export function CustomSingle() {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>();
-  const modifiers: DayPickerProps<Mode>["modifiers"] = {};
+  const modifiers: DayPickerProps["modifiers"] = {};
   if (selectedDate) {
     modifiers.selected = selectedDate;
   }

examples/CustomWeek.test.tsx

@@ -15,7 +15,7 @@ beforeEach(() => {
 
 describe("when a day is clicked", () => {
   beforeEach(async () => {
-    await act(() => user.click(gridcell(today)));
+    await user.click(gridcell(today));
   });
   test("the whole week should appear selected", () => {
     const week = [
@@ -33,7 +33,7 @@ describe("when a day is clicked", () => {
   });
   describe("when clicking the day again", () => {
     beforeEach(async () => {
-      await act(() => user.click(gridcell(today)));
+      await user.click(gridcell(today));
     });
     test("the whole week should not be selected", () => {
       const week = [

examples/Dialog.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useId, useRef, useState } from "react";
 
 import { format, isValid, parse } from "date-fns";
-import { DayPicker, type SelectHandler } from "react-day-picker";
+import { DayPicker } from "react-day-picker";
 
 export function Dialog() {
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -45,7 +45,7 @@ export function Dialog() {
    * Function to handle the DayPicker select event: update the input value and
    * the selected date, and set the month.
    */
-  const handleDayPickerSelect: SelectHandler<"single"> = (date) => {
+  const handleDayPickerSelect = (date: Date | undefined) => {
     if (!date) {
       setInputValue("");
       setSelectedDate(undefined);

examples/Input.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { format } from "date-fns";
 
-import { act, render, screen } from "@/test/render";
+import { render, screen } from "@/test/render";
 import { user } from "@/test/user";
 
 import { Input } from "./Input";

examples/Keyboard.tsx

@@ -1,8 +1,12 @@
 import React, { useState } from "react";
 
-import { DayPicker, type DayPickerProps } from "react-day-picker";
+import {
+  DayPicker,
+  type DayPickerProps,
+  type PropsSingle
+} from "react-day-picker";
 
-export function Keyboard(props: DayPickerProps<"single">) {
+export function Keyboard(props: DayPickerProps & PropsSingle) {
   const [selected, setSelected] = useState<Date | undefined>(undefined);
   return (
     <DayPicker

examples/MultipleMinMax.tsx

@@ -4,13 +4,6 @@ import { addDays } from "date-fns";
 import { DayPicker } from "react-day-picker";
 
 export function MultipleMinMax() {
-  const defaultSelected = [new Date(), addDays(new Date(), 1)];
-  return (
-    <DayPicker
-      defaultSelected={defaultSelected}
-      mode="multiple"
-      min={2}
-      max={5}
-    />
-  );
+  const selected = [new Date(), addDays(new Date(), 1)];
+  return <DayPicker selected={selected} mode="multiple" min={2} max={5} />;
 }

examples/None.tsx

@@ -3,5 +3,5 @@ import React from "react";
 import { DayPicker } from "react-day-picker";
 
 export function None() {
-  return <DayPicker mode="default" />;
+  return <DayPicker />;
 }

examples/Range.test.tsx

@@ -49,7 +49,7 @@ describe("when a day in the range is clicked", () => {
     describe("when a day in the range is clicked again", () => {
       const day = days[2];
       beforeEach(async () => act(() => user.click(gridcell(day))));
-      test("no day should be selected (??)", () => {
+      test("no day should be selected", () => {
         expect(getAllSelectedDays()).toHaveLength(0);
       });
       test("should match the snapshot", () => {