Fix comments, tests

src/DayPicker.tsx

@@ -12,90 +12,10 @@ export type DayPickerProps =
   | DayPickerRangeProps;
 
 /**
- * DayPicker render a date picker component to let users pick dates from a
- * calendar. See http://react-day-picker.js.org for updated documentation and
- * examples.
+ * DayPicker is a React component to create date pickers, calendars, and date
+ * inputs for web applications.
  *
- * ### Customization
- *
- * DayPicker offers different customization props. For example,
- *
- * - Show multiple months using `numberOfMonths`
- * - Display a dropdown to navigate the months via `captionLayout`
- * - Display the week numbers with `showWeekNumbers`
- * - Disable or hide days with `disabled` or `hidden`
- *
- * ### Controlling the months
- *
- * Change the initially displayed month using the `defaultMonth` prop. The
- * displayed months are controlled by DayPicker and stored in its internal
- * state. To control the months yourself, use `month` instead of `defaultMonth`
- * and use the `onMonthChange` event to set it.
- *
- * To limit the months the user can navigate to, use
- * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
- *
- * ### Selection modes
- *
- * DayPicker supports different selection mode that can be toggled using the
- * `mode` prop:
- *
- * - `mode="single"`: only one day can be selected. Use `required` to make the
- *   selection required. Use the `onSelect` event handler to get the selected
- *   days.
- * - `mode="multiple"`: users can select one or more days. Limit the amount of
- *   days that can be selected with the `min` or the `max` props.
- * - `mode="range"`: users can select a range of days. Limit the amount of days in
- *   the range with the `min` or the `max` props.
- * - `mode="default"` (default): the built-in selections are disabled. Implement
- *   your own selection mode with `onDayClick`.
- *
- * The selection modes should cover the most common use cases. In case you need
- * a more refined way of selecting days, use `mode="default"`. Use the
- * `selected` props and add the day event handlers to add/remove days from the
- * selection.
- *
- * ### Modifiers
- *
- * A _modifier_ represents different styles or states for the days displayed in
- * the calendar (like "selected" or "disabled"). Define custom modifiers using
- * the `modifiers` prop.
- *
- * ### Formatters and custom component
- *
- * You can customize how the content is displayed in the date picker by using
- * either the formatters or replacing the internal components.
- *
- * For the most common cases you want to use the `formatters` prop to change how
- * the content is formatted in the calendar. Use the `components` prop to
- * replace the internal components, like the navigation icons.
- *
- * ### Styling
- *
- * DayPicker comes with a default, basic style in `react-day-picker/style` – use
- * it as template for your own style.
- *
- * If you are using CSS modules, pass the imported styles object the
- * `classNames` props.
- *
- * You can also style the elements via inline styles using the `styles` prop.
- *
- * ### Form fields
- *
- * If you need to bind the date picker to a form field, you can use the
- * `useInput` hooks for a basic behavior. See the `useInput` source as an
- * example to bind the date picker with form fields.
- *
- * ### Localization
- *
- * To localize DayPicker, import the locale from `date-fns` package and use the
- * `locale` prop.
- *
- * For example, to use Spanish locale:
- *
- *     import { es } from "date-fns/locale";
- *
- *     <DayPicker locale={es} />;
+ * @see http://daypicker.dev
  */
 export function DayPicker(
   props:

src/components/CaptionDropdowns.test.tsx

@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { act, screen } from "@testing-library/react";
 import { setMonth, setYear } from "date-fns";
 
 import { customRender } from "@/test/render";
@@ -84,9 +84,8 @@ describe("when a month is selected", () => {
   describe("from the months drop-down", () => {
     const newMonth = setMonth(today, 0);
     beforeEach(async () => {
-      await user.selectOptions(
-        getMonthDropdown(),
-        newMonth.getMonth().toString()
+      await act(() =>
+        user.selectOptions(getMonthDropdown(), newMonth.getMonth().toString())
       );
     });
     test("should call the `onMonthChange` callback", () => {
@@ -96,9 +95,8 @@ describe("when a month is selected", () => {
   describe("from the years drop-down", () => {
     const newYear = setYear(today, 2022);
     beforeEach(async () => {
-      await user.selectOptions(
-        getYearDropdown(),
-        newYear.getFullYear().toString()
+      await act(() =>
+        user.selectOptions(getYearDropdown(), newYear.getFullYear().toString())
       );
     });
     test("should call the `onMonthChange` callback", () => {

src/components/CaptionNavigation.test.tsx

@@ -1,3 +1,5 @@
+import { act } from "react";
+
 import { addMonths } from "date-fns";
 
 import { customRender } from "@/test/render";
@@ -90,7 +92,7 @@
       const previousMonth = addMonths(today, -1);
       beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        await user.click(getPrevButton());
+        await act(() => user.click(getPrevButton()));
       });
       test("should call the `onMonthChange` callback", () => {
         expect(testContext.onMonthChange).toHaveBeenCalledWith(previousMonth);
@@ -104,7 +106,7 @@
       };
       beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        await user.click(getPrevButton());
+        await act(() => user.click(getPrevButton()));
       });
       test("should call the `onMonthChange` callback", () => {
         expect(testContext.onMonthChange).not.toHaveBeenCalled();
@@ -121,7 +123,7 @@
       const nextMonth = addMonths(today, 1);
       beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        await user.click(getNextButton());
+        await act(() => user.click(getNextButton()));
       });
       test("should call the `onMonthChange` callback", () => {
         expect(testContext.onMonthChange).toHaveBeenCalledWith(nextMonth);
@@ -135,7 +137,7 @@
       };
       beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        await user.click(getNextButton());
+        await act(() => user.click(getNextButton()));
       });
       test("should call the `onMonthChange` callback", () => {
         expect(testContext.onMonthChange).not.toHaveBeenCalled();

src/components/MonthsDropdown.test.tsx

@@ -3,16 +3,13 @@ import { addMonths, differenceInMonths } from "date-fns";
 
 import { customRender } from "@/test/render";
 import { user } from "@/test/user";
-import { freezeBeforeAll } from "@/test/utils";
 
 import { DayPickerProps } from "../DayPicker";
 
 import { MonthsDropdown, MonthsDropdownProps } from "./MonthsDropdown";
 
 const today = new Date(2020, 12, 22);
 
-freezeBeforeAll(today);
-
 let root: HTMLDivElement;
 let options: HTMLCollectionOf<HTMLOptionElement> | undefined;
 let select: HTMLSelectElement | null;

src/components/Row.test.tsx

@@ -8,7 +8,14 @@ import { CustomComponents } from "../types/DayPickerBase";
 import { Row, RowProps } from "./Row";
 
 function setup(props: RowProps, dayPickerProps?: DayPickerProps) {
-  customRender(<Row {...props} />, dayPickerProps);
+  customRender(
+    <table>
+      <tbody>
+        <Row {...props} />
+      </tbody>
+    </table>,
+    dayPickerProps
+  );
 }
 
 const props: RowProps = {

src/components/__snapshots__/MonthsDropdown.test.tsx.snap

@@ -15,14 +15,14 @@ exports[`when fromDate and toDate are passed in should render the dropdown eleme
     name="months"
   >
     <option
-      value="0"
+      value="4"
     >
-      January
+      May
     </option>
     <option
-      value="1"
+      value="5"
     >
-      February
+      June
     </option>
   </select>
   <div

src/contexts/Modifiers/utils/isMatch.ts

@@ -24,6 +24,7 @@ function isArrayOfDates(value: unknown): value is Date[] {
 /**
  * Returns whether a day matches against at least one of the given Matchers.
  *
+ * ```tsx
  *     const day = new Date(2022, 5, 19);
  *     const matcher1: DateRange = {
  *        from: new Date(2021, 12, 21),
@@ -35,6 +36,7 @@ function isArrayOfDates(value: unknown): value is Date[] {
  *     }
  *
  *     const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+ * ```
  */
 export function isMatch(day: Date, matchers: Matcher[]): boolean {
   return matchers.some((matcher: Matcher) => {

src/style.css.d.ts

@@ -1,39 +1,41 @@
-declare const styles: {
-  rdp: string;
-  "rdp-vhidden": string;
-  "rdp-button_reset": string;
-  "rdp-button": string;
-  "rdp-day_selected": string;
-  "rdp-months": string;
-  "rdp-month": string;
-  "rdp-table": string;
-  "rdp-with_weeknumber": string;
-  "rdp-caption": string;
-  "rdp-multiple_months": string;
-  "rdp-caption_dropdowns": string;
-  "rdp-caption_label": string;
-  "rdp-nav": string;
-  "rdp-caption_start": string;
-  "rdp-caption_end": string;
-  "rdp-nav_button": string;
-  "rdp-dropdown_year": string;
-  "rdp-dropdown_month": string;
-  "rdp-dropdown": string;
-  "rdp-dropdown_icon": string;
-  "rdp-head": string;
-  "rdp-head_row": string;
-  "rdp-row": string;
-  "rdp-head_cell": string;
-  "rdp-tbody": string;
-  "rdp-tfoot": string;
-  "rdp-cell": string;
-  "rdp-weeknumber": string;
-  "rdp-day": string;
-  "rdp-day_today": string;
-  "rdp-day_outside": string;
-  "rdp-day_range_start": string;
-  "rdp-day_range_end": string;
-  "rdp-day_range_middle": string;
-};
+import type { ClassNames } from "./types/Styles";
+
+declare const styles = {
+  rdp: string,
+  "rdp-vhidden": string,
+  "rdp-button_reset": string,
+  "rdp-button": string,
+  "rdp-day_selected": string,
+  "rdp-months": string,
+  "rdp-month": string,
+  "rdp-table": string,
+  "rdp-with_weeknumber": string,
+  "rdp-caption": string,
+  "rdp-multiple_months": string,
+  "rdp-caption_dropdowns": string,
+  "rdp-caption_label": string,
+  "rdp-nav": string,
+  "rdp-caption_start": string,
+  "rdp-caption_end": string,
+  "rdp-nav_button": string,
+  "rdp-dropdown_year": string,
+  "rdp-dropdown_month": string,
+  "rdp-dropdown": string,
+  "rdp-dropdown_icon": string,
+  "rdp-head": string,
+  "rdp-head_row": string,
+  "rdp-row": string,
+  "rdp-head_cell": string,
+  "rdp-tbody": string,
+  "rdp-tfoot": string,
+  "rdp-cell": string,
+  "rdp-weeknumber": string,
+  "rdp-day": string,
+  "rdp-day_today": string,
+  "rdp-day_outside": string,
+  "rdp-day_range_start": string,
+  "rdp-day_range_end": string,
+  "rdp-day_range_middle": string,
+} as ClassNames;
 
 export default styles;

src/types/Matchers.ts

@@ -5,47 +5,6 @@
  * {@link DayPickerBase.hidden]] or [[DayPickerProps.selected} and are used to
  * determine if a day should get a {@link Modifier}.
  *
- * Matchers can be of different types:
- *
- *     // will always match the day
- *     const booleanMatcher: Matcher = true;
- *
- *     // will match the today's date
- *     const dateMatcher: Matcher = new Date();
- *
- *     // will match the days in the array
- *     const arrayMatcher: Matcher = [
- *       new Date(2019, 1, 2),
- *       new Date(2019, 1, 4)
- *     ];
- *
- *     // will match days after the 2nd of February 2019
- *     const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };
- *     // will match days before the 2nd of February 2019 }
- *     const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };
- *
- *     // will match Sundays
- *     const dayOfWeekMatcher: DayOfWeek = {
- *       dayOfWeek: 0
- *     };
- *
- *     // will match the included days, except the two dates
- *     const intervalMatcher: DateInterval = {
- *       after: new Date(2019, 1, 2),
- *       before: new Date(2019, 1, 5)
- *     };
- *
- *     // will match the included days, including the two dates
- *     const rangeMatcher: DateRange = {
- *       from: new Date(2019, 1, 2),
- *       to: new Date(2019, 1, 5)
- *     };
- *
- *     // will match when the function return true
- *     const functionMatcher: Matcher = (day: Date) => {
- *       return day.getMonth() === 2; // match when month is March
- *     };
- *
  * @see {@link isMatch}
  */
 export type Matcher =

src/types/Modifiers.ts

@@ -51,11 +51,6 @@ export type InternalModifiers = Record<InternalModifier, Matcher[]>;
 /**
  * The modifiers that are matching a day in the calendar. Use the
  * {@link useActiveModifiers} hook to get the modifiers for a day.
- *
- *     const activeModifiers: ActiveModifiers = {
- *       selected: true,
- *       customModifier: true
- *     };
  */
 export type ActiveModifiers = Record<Modifier, true> &
   Partial<Record<InternalModifier, true>>;

test/render/customRender.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 
-import { render } from "@testing-library/react";
+import { RenderResult, render } from "@testing-library/react";
 
 import { DayPickerProps } from "../../src/DayPicker";
 import { RootProvider } from "../../src/contexts/RootProvider";
@@ -11,6 +11,6 @@ export function customRender(
   element: ReactElement,
   /** The initial DayPicker props to pass to the Root Provider. */
   dayPickerProps: DayPickerProps = {}
-) {
+): RenderResult {
   return render(<RootProvider {...dayPickerProps}>{element}</RootProvider>);
 }