react-day-picker 9.2.0 → 9.3.0

package/src/utils/rangeContainsModifiers.test.ts

@@ -0,0 +1,230 @@
+import { defaultDateLib } from "../classes/DateLib";
+import { DayOfWeek } from "../types";
+
+import { rangeContainsModifiers } from "./rangeContainsModifiers";
+
+const sunday = new Date(2024, 8, 1); //  day of the week 0
+const monday = new Date(2024, 8, 2); //  day of the week 1
+const tuesday = new Date(2024, 8, 3); //  day of the week 1
+const wednesday = new Date(2024, 8, 4); //  day of the week 1
+const thursday = new Date(2024, 8, 5); //  day of the week 1
+const friday = new Date(2024, 8, 6); //  day of the week 5
+const saturday = new Date(2024, 8, 7); //  day of the week 6
+const nextWeekSunday = new Date(2024, 8, 8); //  day of the week 0
+
+const testRange = { from: monday, to: saturday };
+
+describe("when the matcher is a boolean", () => {
+  const matcher = true;
+  const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+  test("should return the boolean", () => {
+    expect(result).toBe(matcher);
+  });
+});
+
+describe("when matching a single date", () => {
+  test("should return true when matching a date in the range", () => {
+    const matcher = thursday;
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "from" date', () => {
+    const matcher = monday;
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = saturday;
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return false on the edge of the "from" date', () => {
+    const matcher = sunday;
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+  test('should return false on the edge of the "to" date', () => {
+    const matcher = nextWeekSunday;
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching an array of dates", () => {
+  test("should return true", () => {
+    const matcher = [sunday, wednesday, nextWeekSunday];
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test("should return false", () => {
+    const matcher = [sunday, nextWeekSunday];
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching date range", () => {
+  test('should return true when matching the "from" date', () => {
+    const matcher = { from: sunday, to: monday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = { from: saturday, to: nextWeekSunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+
+  test("should return true when date range contains matcher", () => {
+    const matcher = { from: tuesday, to: thursday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test("should return true when matcher contains date range", () => {
+    const matcher = { from: sunday, to: nextWeekSunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+
+  test('should return false on the edge of the "from" date', () => {
+    const matcher = { from: new Date(2000, 1, 1), to: sunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+  test('should return false on the edge of the "to" date', () => {
+    const matcher = { from: nextWeekSunday, to: new Date(2077, 1, 1) };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+  test("should return false if matcher is an incomplete date range", () => {
+    const matcher = { from: monday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching the day of week", () => {
+  test("should return true", () => {
+    const matcher: DayOfWeek = {
+      dayOfWeek: [monday.getDay()]
+    };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test("should return false", () => {
+    const matcher: DayOfWeek = {
+      dayOfWeek: [sunday.getDay()]
+    };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching date interval (closed)", () => {
+  test('should return true when matching the "from" date', () => {
+    const matcher = { after: sunday, before: tuesday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = { after: friday, before: nextWeekSunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+
+  test("should return true when date range contains matcher", () => {
+    const matcher = { after: tuesday, before: thursday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test("should return true when matcher contains date range", () => {
+    const matcher = { after: sunday, before: nextWeekSunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+
+  test('should return false on the edge of the "from" date', () => {
+    const matcher = { after: new Date(2000, 1, 1), before: monday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+  test('should return false on the edge of the "to" date', () => {
+    const matcher = { after: saturday, before: new Date(2077, 1, 1) };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching date interval (open)", () => {
+  test('should return true when matching the "from" date', () => {
+    const matcher = { before: tuesday, after: saturday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = { before: monday, after: friday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test("should return false when date range is not part of the matcher", () => {
+    const matcher = { before: monday, after: saturday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching the date after", () => {
+  test('should return true when matching the "from" date', () => {
+    const matcher = { after: sunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = { after: friday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+
+  test("should return false", () => {
+    const matcher = { after: saturday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when matching the date before", () => {
+  test('should return true when matching the "from" date', () => {
+    const matcher = { before: tuesday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = { before: nextWeekSunday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+
+  test("should return false", () => {
+    const matcher = { before: monday };
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});
+
+describe("when the matcher is a function", () => {
+  test('should return true when matching the "from" date', () => {
+    const matcher = (date: Date) => date.getTime() === monday.getTime();
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test('should return true when matching the "to" date', () => {
+    const matcher = (date: Date) => date.getTime() === saturday.getTime();
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(true);
+  });
+  test("should return false", () => {
+    const matcher = (date: Date) => date.getTime() === nextWeekSunday.getTime();
+    const result = rangeContainsModifiers(testRange, [matcher], defaultDateLib);
+    expect(result).toBe(false);
+  });
+});

package/src/utils/rangeContainsModifiers.ts

@@ -0,0 +1,125 @@
+import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
+import type { Matcher } from "../types/index.js";
+
+import { dateMatchModifiers } from "./dateMatchModifiers.js";
+import { rangeContainsDayOfWeek } from "./rangeContainsDayOfWeek.js";
+import { rangeIncludesDate } from "./rangeIncludesDate.js";
+import { rangeOverlaps } from "./rangeOverlaps.js";
+import {
+  isDateAfterType,
+  isDateBeforeType,
+  isDateInterval,
+  isDateRange,
+  isDatesArray,
+  isDayOfWeekType
+} from "./typeguards.js";
+
+/**
+ * Returns whether a range contains dates that match the given modifiers.
+ *
+ * ```tsx
+ * const range: DateRange = {
+ *   from: new Date(2021, 12, 21),
+ *   to: new Date(2021, 12, 30)
+ * };
+ * const matcher1: Date = new Date(2021, 12, 21);
+ * const matcher2: DateRange = {
+ *   from: new Date(2022, 5, 1),
+ *   to: new Date(2022, 5, 23)
+ * };
+ * rangeContainsModifiers(range, [matcher1, matcher2]); // true, since matcher1 is in the date.
+ * ```
+ *
+ * @since 9.2.2
+ * @group Utilities
+ */
+export function rangeContainsModifiers(
+  range: { from: Date; to: Date },
+  modifiers: Matcher | Matcher[],
+  dateLib: DateLib = defaultDateLib
+): boolean {
+  const matchers = Array.isArray(modifiers) ? modifiers : [modifiers];
+
+  // Defer function matchers evaluation as they are the least performant.
+  const nonFunctionMatchers = matchers.filter(
+    (matcher) => typeof matcher !== "function"
+  );
+
+  const nonFunctionMatchersResult = nonFunctionMatchers.some((matcher) => {
+    if (typeof matcher === "boolean") return matcher;
+
+    if (dateLib.isDate(matcher)) {
+      return rangeIncludesDate(range, matcher, false, dateLib);
+    }
+
+    if (isDatesArray(matcher, dateLib)) {
+      return matcher.some((date) =>
+        rangeIncludesDate(range, date, false, dateLib)
+      );
+    }
+
+    if (isDateRange(matcher)) {
+      if (matcher.from && matcher.to) {
+        return rangeOverlaps(
+          range,
+          { from: matcher.from, to: matcher.to },
+          dateLib
+        );
+      }
+      return false;
+    }
+
+    if (isDayOfWeekType(matcher)) {
+      return rangeContainsDayOfWeek(range, matcher.dayOfWeek, dateLib);
+    }
+
+    if (isDateInterval(matcher)) {
+      const isClosedInterval = dateLib.isAfter(matcher.before, matcher.after);
+      if (isClosedInterval) {
+        return rangeOverlaps(
+          range,
+          {
+            from: dateLib.addDays(matcher.after, 1),
+            to: dateLib.addDays(matcher.before, -1)
+          },
+          dateLib
+        );
+      }
+      return (
+        dateMatchModifiers(range.from, matcher, dateLib) ||
+        dateMatchModifiers(range.to, matcher, dateLib)
+      );
+    }
+
+    if (isDateAfterType(matcher) || isDateBeforeType(matcher)) {
+      return (
+        dateMatchModifiers(range.from, matcher, dateLib) ||
+        dateMatchModifiers(range.to, matcher, dateLib)
+      );
+    }
+
+    return false;
+  });
+
+  if (nonFunctionMatchersResult) {
+    return true;
+  }
+
+  const functionMatchers = matchers.filter(
+    (matcher) => typeof matcher === "function"
+  );
+
+  if (functionMatchers.length) {
+    let date = range.from;
+    const totalDays = dateLib.differenceInCalendarDays(range.to, range.from);
+
+    for (let i = 0; i <= totalDays; i++) {
+      if (functionMatchers.some((matcher) => matcher(date))) {
+        return true;
+      }
+      date = dateLib.addDays(date, 1);
+    }
+  }
+
+  return false;
+}

package/src/utils/rangeOverlaps.test.ts

@@ -0,0 +1,60 @@
+import { defaultDateLib } from "../classes/DateLib";
+
+import { rangeOverlaps } from "./rangeOverlaps";
+
+const sunday = new Date(2024, 8, 1);
+const monday = new Date(2024, 8, 2);
+const tuesday = new Date(2024, 8, 3);
+const thursday = new Date(2024, 8, 5);
+const saturday = new Date(2024, 8, 7);
+const nextWeekSunday = new Date(2024, 8, 8);
+
+const leftRange = { from: monday, to: saturday };
+
+test('should return true when matching the "from" date', () => {
+  const rightRange = { from: sunday, to: monday };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(true);
+});
+
+test('should return true when matching the "to" date', () => {
+  const rightRange = { from: saturday, to: nextWeekSunday };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(true);
+});
+
+test("should return true when left date range contains right date range", () => {
+  const rightRange = { from: tuesday, to: thursday };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(true);
+});
+
+test("should return true when right date range contains left date range", () => {
+  const rightRange = { from: sunday, to: nextWeekSunday };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(true);
+});
+
+test("should return true when a date range is inverted", () => {
+  const rightRange = { to: sunday, from: nextWeekSunday };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(true);
+});
+
+test('should return false on the edge of the "from" date', () => {
+  const rightRange = { from: new Date(2000, 1, 1), to: sunday };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(false);
+});
+
+test('should return false on the edge of the "to" date', () => {
+  const rightRange = { from: nextWeekSunday, to: new Date(2077, 1, 1) };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(false);
+});
+
+test("should return false when a date range is inverted", () => {
+  const rightRange = { to: nextWeekSunday, from: new Date(2077, 1, 1) };
+  const result = rangeOverlaps(leftRange, rightRange, defaultDateLib);
+  expect(result).toBe(false);
+});

package/src/utils/rangeOverlaps.ts

@@ -0,0 +1,22 @@
+import { defaultDateLib } from "../classes/index.js";
+
+import { rangeIncludesDate } from "./rangeIncludesDate.js";
+
+/**
+ * Determines whether a given range overlaps with another range.
+ *
+ * @since 9.2.2
+ * @group Utilities
+ */
+export function rangeOverlaps(
+  rangeLeft: { from: Date; to: Date },
+  rangeRight: { from: Date; to: Date },
+  dateLib = defaultDateLib
+): boolean {
+  return (
+    rangeIncludesDate(rangeLeft, rangeRight.from, false, dateLib) ||
+    rangeIncludesDate(rangeLeft, rangeRight.to, false, dateLib) ||
+    rangeIncludesDate(rangeRight, rangeLeft.from, false, dateLib) ||
+    rangeIncludesDate(rangeRight, rangeLeft.to, false, dateLib)
+  );
+}

package/website/docs/docs/styling.mdx

@@ -52,49 +52,42 @@ Define the CSS variables in your app's CSS file, after importing the DayPicker C
 
 The following table lists the CSS variables used by DayPicker within the `.rdp-root` class:
 
-| CSS Variable                              | Description                                                                   |
-| ----------------------------------------- | ----------------------------------------------------------------------------- |
-| `--rdp-accent-color`                      | The accent color used for selected days and UI elements.                      |
-| `--rdp-accent-background-color`           | The accent background color used for selected days and UI elements.           |
-| `--rdp-font-family`                       | The font family used by the calendar. Note that `inherit` does not work here. |
-| `--rdp-day-font`                          | The font used for the day cells.                                              |
-| `--rdp-day-height`                        | The height of the day cells.                                                  |
-| `--rdp-day-width`                         | The width of the day cells.                                                   |
-| `--rdp-chevron-disabled-opacity`          | The opacity of the chevron when its container is disabled.                    |
-| `--rdp-day_button-border-radius`          | The border radius of the day cells.                                           |
-| `--rdp-day_button-border`                 | The border of the day cells.                                                  |
-| `--rdp-day_button-height`                 | The height of the day cells.                                                  |
-| `--rdp-day_button-width`                  | The width of the day cells.                                                   |
-| `--rdp-selected-border`                   | The border of the selected days.                                              |
-| `--rdp-selected-font`                     | The font of the selected days.                                                |
-| `--rdp-disabled-opacity`                  | The opacity of the disabled days.                                             |
-| `--rdp-outside-opacity`                   | The opacity of the days outside the current month.                            |
-| `--rdp-today-color`                       | The color of today's date.                                                    |
-| `--rdp-dropdown-gap`                      | The gap between the dropdowns used in the month captions.                     |
-| `--rdp-month_caption-font`                | The font of the month caption.                                                |
-| `--rdp-months-gap`                        | The gap between the months in the multi-month view.                           |
-| `--rdp-nav_button-disabled-opacity`       | The opacity of the disabled navigation buttons.                               |
-| `--rdp-nav_button-height`                 | The height of the navigation buttons.                                         |
-| `--rdp-nav_button-width`                  | The width of the navigation buttons.                                          |
-| `--rdp-nav-height`                        | The height of the navigation bar.                                             |
-| `--rdp-range_middle-background-color`     | The color of the background for days in the middle of a range.                |
-| `--rdp-range_middle-font`                 | The font for days in the middle of a range.                                   |
-| `--rdp-range_middle-foreground-color`     | The color of the text for days in the middle of a range.                      |
-| `--rdp-range_start-color`                 | The color of the range text at the start of the range.                        |
-| `--rdp-range_start-background`            | Used for the background of the start of the selected range.                   |
-| `--rdp-range_start-date-background-color` | The background color of the date at the start of the selected range.          |
-| `--rdp-range_end-background`              | Used for the background of the end of the selected range.                     |
-| `--rdp-range_end-color`                   | The color of the range text at the end of the range.                          |
-| `--rdp-range_end-date-background-color`   | The background color of the date at the end of the selected range.            |
-| `--rdp-week_number-border-radius`         | The border radius of the week number.                                         |
-| `--rdp-week_number-border`                | The border of the week number.                                                |
-| `--rdp-week_number-font`                  | The font of the week number cells.                                            |
-| `--rdp-week_number-height`                | The height of the week number cells.                                          |
-| `--rdd-week_number-width`                 | The width of the week number cells.                                           |
-| `--rdp-weekday-font`                      | The font of the weekday.                                                      |
-| `--rdp-weekday-opacity`                   | The opacity of the weekday.                                                   |
-| `--rdp-weekday-padding`                   | The padding of the weekday.                                                   |
-| `--rdp-weekday-text-align`                | The text alignment of the weekday cells.                                      |
+| CSS Variable                              | Description                                                          |
+| ----------------------------------------- | -------------------------------------------------------------------- |
+| `--rdp-accent-color`                      | The accent color used for selected days and UI elements.             |
+| `--rdp-accent-background-color`           | The accent background color used for selected days and UI elements.  |
+| `--rdp-day-height`                        | The height of the day cells.                                         |
+| `--rdp-day-width`                         | The width of the day cells.                                          |
+| `--rdp-chevron-disabled-opacity`          | The opacity of the chevron when its container is disabled.           |
+| `--rdp-day_button-border-radius`          | The border radius of the day cells.                                  |
+| `--rdp-day_button-border`                 | The border of the day cells.                                         |
+| `--rdp-day_button-height`                 | The height of the day cells.                                         |
+| `--rdp-day_button-width`                  | The width of the day cells.                                          |
+| `--rdp-selected-border`                   | The border of the selected days.                                     |
+| `--rdp-disabled-opacity`                  | The opacity of the disabled days.                                    |
+| `--rdp-outside-opacity`                   | The opacity of the days outside the current month.                   |
+| `--rdp-today-color`                       | The color of today's date.                                           |
+| `--rdp-dropdown-gap`                      | The gap between the dropdowns used in the month captions.            |
+| `--rdp-months-gap`                        | The gap between the months in the multi-month view.                  |
+| `--rdp-nav_button-disabled-opacity`       | The opacity of the disabled navigation buttons.                      |
+| `--rdp-nav_button-height`                 | The height of the navigation buttons.                                |
+| `--rdp-nav_button-width`                  | The width of the navigation buttons.                                 |
+| `--rdp-nav-height`                        | The height of the navigation bar.                                    |
+| `--rdp-range_middle-background-color`     | The color of the background for days in the middle of a range.       |
+| `--rdp-range_middle-foreground-color`     | The color of the text for days in the middle of a range.             |
+| `--rdp-range_start-color`                 | The color of the range text at the start of the range.               |
+| `--rdp-range_start-background`            | Used for the background of the start of the selected range.          |
+| `--rdp-range_start-date-background-color` | The background color of the date at the start of the selected range. |
+| `--rdp-range_end-background`              | Used for the background of the end of the selected range.            |
+| `--rdp-range_end-color`                   | The color of the range text at the end of the range.                 |
+| `--rdp-range_end-date-background-color`   | The background color of the date at the end of the selected range.   |
+| `--rdp-week_number-border-radius`         | The border radius of the week number.                                |
+| `--rdp-week_number-border`                | The border of the week number.                                       |
+| `--rdp-week_number-height`                | The height of the week number cells.                                 |
+| `--rdd-week_number-width`                 | The width of the week number cells.                                  |
+| `--rdp-weekday-opacity`                   | The opacity of the weekday.                                          |
+| `--rdp-weekday-padding`                   | The padding of the weekday.                                          |
+| `--rdp-weekday-text-align`                | The text alignment of the weekday cells.                             |
 
 ### Light/Dark Appearance
 

package/website/docs/docs/translation.mdx

@@ -38,7 +38,7 @@ function ItalianLabels() {
       locale={it}
       labels={{
         labelDayButton: (date, { today, selected }) => {
-          let label = format(date, "PPPP");
+          let label = format(date, "PPPP", { locale: it });
           if (today) label = `Oggi, ${label}`;
           if (selected) label = `${label}, selezionato`;
           return label;

package/website/docs/guides/custom-components.mdx

@@ -130,18 +130,19 @@ import { useDayPicker } from "react-day-picker";
 
 The DayPicker context provides the current state of the calendar, including the selected days, modifiers, and navigation state.
 
-| Name            | Type                                                                          | Description                                    |
-| --------------- | ----------------------------------------------------------------------------- | ---------------------------------------------- |
-| `classNames`    | [`ClassNames`](../api/type-aliases/ClassNames.md)                             | The class names for the UI elements.           |
-| `components`    | [`CustomComponents`](../api/type-aliases/CustomComponents.md)                 | The components used internally by DayPicker.   |
-| `formatters`    | [`Formatters`](../api/type-aliases/Formatters.md)                             | The formatters used to format the UI elements. |
-| `getModifiers`  | (`day`) => [`Modifiers`](../api/type-aliases/Modifiers.md)                    | Returns the modifiers for the given day.       |
-| `goToMonth`     | (`month`) => `void`                                                           | Navigate to the specified month.               |
-| `isSelected`    | (`date`) => `boolean` \| `undefined`                                          | Whether the given date is selected.            |
-| `labels`        | [`Labels`](../api/type-aliases/Labels.md)                                     | The labels used in the user interface.         |
-| `months`        | [`CalendarMonth`](../api/classes/CalendarMonth.md)[]                          | The months displayed in the calendar.          |
-| `nextMonth`     | `Date` \| `undefined`                                                         | The next month to display.                     |
-| `previousMonth` | `Date` \| `undefined`                                                         | The previous month to display.                 |
-| `select`        | [`SelectHandler`](../api/type-aliases/SelectHandler.md)\<`T`\> \| `undefined` | Set a selection.                               |
-| `selected`      | [`SelectedValue`](../api/type-aliases/SelectedValue.md)\<`T`\> \| `undefined` | The selected date(s).                          |
-| `styles`        | `Partial`\<[`Styles`](../api/type-aliases/Styles.md)\> \| `undefined`         | The styles for the UI elements.                |
+| Name             | Type                                                                          | Description                                    |
+| ---------------- | ----------------------------------------------------------------------------- | ---------------------------------------------- |
+| `classNames`     | [`ClassNames`](../api/type-aliases/ClassNames.md)                             | The class names for the UI elements.           |
+| `components`     | [`CustomComponents`](../api/type-aliases/CustomComponents.md)                 | The components used internally by DayPicker.   |
+| `formatters`     | [`Formatters`](../api/type-aliases/Formatters.md)                             | The formatters used to format the UI elements. |
+| `getModifiers`   | (`day`) => [`Modifiers`](../api/type-aliases/Modifiers.md)                    | Returns the modifiers for the given day.       |
+| `goToMonth`      | (`month`) => `void`                                                           | Navigate to the specified month.               |
+| `isSelected`     | (`date`) => `boolean` \| `undefined`                                          | Whether the given date is selected.            |
+| `labels`         | [`Labels`](../api/type-aliases/Labels.md)                                     | The labels used in the user interface.         |
+| `months`         | [`CalendarMonth`](../api/classes/CalendarMonth.md)[]                          | The months displayed in the calendar.          |
+| `nextMonth`      | `Date` \| `undefined`                                                         | The next month to display.                     |
+| `previousMonth`  | `Date` \| `undefined`                                                         | The previous month to display.                 |
+| `select`         | [`SelectHandler`](../api/type-aliases/SelectHandler.md)\<`T`\> \| `undefined` | Set a selection.                               |
+| `selected`       | [`SelectedValue`](../api/type-aliases/SelectedValue.md)\<`T`\> \| `undefined` | The selected date(s).                          |
+| `styles`         | `Partial`\<[`Styles`](../api/type-aliases/Styles.md)\> \| `undefined`         | The styles for the UI elements.                |
+| `dayPickerProps` | [`DayPickerProps`](../api/type-aliases/DayPickerProps.md)                     | The props passed to the DayPicker component.   |

package/website/docs/upgrading.mdx

@@ -195,7 +195,7 @@ In case you are using the `components` prop, you may need to update your code, a
   <DayPicker
     components={{
 -     IconLeft: MyLeftIcon,
-+     Chevron: (props) {
++     Chevron: (props) => {
 +        if (props.orientation === "left") {
 +          return <MyLeftIcon {...props} />;
 +        }