react-day-picker 9.2.1 → 9.3.0

package/src/style.module.css

@@ -3,26 +3,22 @@
 .root {
   --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
   --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
-  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
 
-  --rdp-day-font: inherit; /* The font used for the day cells. */
   --rdp-day-height: 2.75rem; /* The height of the day cells. */
   --rdp-day-width: 2.75rem; /* The width of the day cells. */
   
   --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
   --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
-  --rdp-day_button-height: var(--rdp-day-width); /* The height of the day cells. */
-  --rdp-day_button-width: var(--rdp-day-height); /* The width of the day cells. */
+  --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
+  --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
   
   --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
-  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
   --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
   --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
   --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
   
   --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
   
-  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
   --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
   
   --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
@@ -31,8 +27,7 @@
   --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
   
   --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
-  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
-  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
+  --rdp-range_middle-foreground-color: white; /* The foregraound color for days in the middle of a range. */
   --rdp-range_middle-color: inherit;/* The color of the range text. */
   
   --rdp-range_start-color: white; /* The color of the range text. */
@@ -45,13 +40,12 @@
   
   --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
   --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
-  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
+  
   --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
   --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
   --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
   --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
 
-  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
   --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
   --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
   --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
@@ -76,7 +70,6 @@
 .day {
   width: var(--rdp-day-width);
   height: var(--rdp-day-height);
-  font: var(--rdp-day-font);
   text-align: center;
 }
 
@@ -192,7 +185,8 @@
   display: flex;
   align-content: center;
   height: var(--rdp-nav-height);
-  font: var(--rdp-month_caption-font);
+  font-weight: bold;
+  font-size: large;
 }
 
 .months {
@@ -221,14 +215,16 @@
 .weekday {
   opacity: var(--rdp-weekday-opacity);
   padding: var(--rdp-weekday-padding);
-  font: var(--rdp-weekday-font);
+  font-weight: 500;
+  font-size: smaller;
   text-align: var(--rdp-weekday-text-align);
   text-transform: var(--rdp-weekday-text-transform);
 }
 
 .week_number {
   opacity: var(--rdp-week_number-opacity);
-  font: var(--rdp-week_number-font);
+  font-weight: 400;
+  font-size: small;
   height: var(--rdp-week_number-height);
   width: var(--rdp-week_number-width);
   border: var(--rdp-week_number-border);
@@ -242,7 +238,8 @@
 }
 
 .selected {
-  font: var(--rdp-selected-font);
+  font-weight: bold;
+  font-size: large;
 }
 
 .selected .day_button {
@@ -273,7 +270,6 @@
 
 .range_middle {
   background-color: var(--rdp-range_middle-background-color);
-  font: var(--rdp-range_middle-font);
 }
 
 .range_middle .day_button {

package/src/types/props.ts

@@ -490,6 +490,7 @@ export interface PropsBase {
  * @param {Date} triggerDate - The date when the event was triggered.
  * @param {Modifiers} modifiers - The modifiers associated with the event.
  * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.
+ * @group DayPicker
  */
 export type OnSelectHandler<T> = (
   selected: T,
@@ -501,6 +502,7 @@ export type OnSelectHandler<T> = (
 /**
  * The props when the single selection is required.
  *
+ * @group DayPicker
  * @see https://daypicker.dev/docs/selection-modes#single-mode
  */
 export interface PropsSingleRequired {
@@ -515,6 +517,7 @@ export interface PropsSingleRequired {
 /**
  * The props when the single selection is optional.
  *
+ * @group DayPicker
  * @see https://daypicker.dev/docs/selection-modes#single-mode
  */
 export interface PropsSingle {
@@ -529,6 +532,7 @@ export interface PropsSingle {
 /**
  * The props when the multiple selection is required.
  *
+ * @group DayPicker
  * @see https://daypicker.dev/docs/selection-modes#multiple-mode
  */
 export interface PropsMultiRequired {
@@ -547,6 +551,7 @@ export interface PropsMultiRequired {
 /**
  * The props when the multiple selection is optional.
  *
+ * @group DayPicker
  * @see https://daypicker.dev/docs/selection-modes#multiple-mode
  */
 export interface PropsMulti {
@@ -564,6 +569,7 @@ export interface PropsMulti {
 /**
  * The props when the range selection is required.
  *
+ * @group DayPicker
  * @see https://daypicker.dev/docs/selection-modes#range-mode
  */
 export interface PropsRangeRequired {
@@ -588,6 +594,7 @@ export interface PropsRangeRequired {
 /**
  * The props when the range selection is optional.
  *
+ * @group DayPicker
  * @see https://daypicker.dev/docs/selection-modes#range-mode
  */
 export interface PropsRange {

package/src/useDayPicker.test.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+
+import { renderHook } from "@testing-library/react";
+
+import { DayFlag, SelectionState, UI } from "./UI";
+import { CalendarDay } from "./classes/CalendarDay";
+import { CalendarMonth } from "./classes/CalendarMonth";
+import { DayPickerProps } from "./types/props";
+import { Modifiers } from "./types/shared";
+import {
+  DayPickerContext,
+  dayPickerContext,
+  useDayPicker
+} from "./useDayPicker";
+
+describe("useDayPicker", () => {
+  const mockContextValue: DayPickerContext<{
+    required: false;
+    mode: "single";
+  }> = {
+    months: [new CalendarMonth(new Date(), [])],
+    nextMonth: new Date(),
+    previousMonth: new Date(),
+    goToMonth: jest.fn(),
+    getModifiers: jest.fn((day: CalendarDay) => ({}) as Modifiers),
+    selected: undefined,
+    select: jest.fn(),
+    isSelected: jest.fn((date: Date) => false),
+    components: {
+      Button: jest.fn(),
+      Chevron: jest.fn(),
+      CaptionLabel: jest.fn(),
+      Day: jest.fn(),
+      DayButton: jest.fn(),
+      Dropdown: jest.fn(),
+      DropdownNav: jest.fn(),
+      Footer: jest.fn(),
+      Month: jest.fn(),
+      MonthCaption: jest.fn(),
+      MonthGrid: jest.fn(),
+      Months: jest.fn(),
+      Nav: jest.fn(),
+      Option: jest.fn(),
+      PreviousMonthButton: jest.fn(),
+      NextMonthButton: jest.fn(),
+      Root: jest.fn(),
+      Select: jest.fn(),
+      Weeks: jest.fn(),
+      Week: jest.fn(),
+      Weekday: jest.fn(),
+      Weekdays: jest.fn(),
+      WeekNumber: jest.fn(),
+      WeekNumberHeader: jest.fn(),
+      MonthsDropdown: jest.fn(),
+      YearsDropdown: jest.fn()
+    },
+    classNames: {
+      [UI.Root]: "",
+      [UI.Chevron]: "",
+      [UI.Day]: "",
+      [UI.DayButton]: "",
+      [UI.CaptionLabel]: "",
+      [UI.Dropdowns]: "",
+      [UI.Dropdown]: "",
+      [UI.DropdownRoot]: "",
+      [UI.Footer]: "",
+      [UI.MonthGrid]: "",
+      [UI.MonthCaption]: "",
+      [UI.MonthsDropdown]: "",
+      [UI.Month]: "",
+      [UI.Months]: "",
+      [UI.Nav]: "",
+      [UI.NextMonthButton]: "",
+      [UI.PreviousMonthButton]: "",
+      [UI.Week]: "",
+      [UI.Weeks]: "",
+      [UI.Weekday]: "",
+      [UI.Weekdays]: "",
+      [UI.WeekNumber]: "",
+      [UI.WeekNumberHeader]: "",
+      [UI.YearsDropdown]: "",
+      [SelectionState.range_end]: "",
+      [SelectionState.range_middle]: "",
+      [SelectionState.range_start]: "",
+      [SelectionState.selected]: "",
+      [DayFlag.disabled]: "",
+      [DayFlag.hidden]: "",
+      [DayFlag.outside]: "",
+      [DayFlag.focused]: "",
+      [DayFlag.today]: ""
+    },
+    styles: {},
+    labels: {
+      labelNav: jest.fn(),
+      labelGrid: jest.fn(),
+      labelGridcell: jest.fn(),
+      labelMonthDropdown: jest.fn(),
+      labelYearDropdown: jest.fn(),
+      labelNext: jest.fn(),
+      labelPrevious: jest.fn(),
+      labelDayButton: jest.fn(),
+      labelDay: jest.fn(),
+      labelWeekday: jest.fn(),
+      labelWeekNumber: jest.fn(),
+      labelWeekNumberHeader: jest.fn()
+    },
+    formatters: {
+      formatCaption: jest.fn(),
+      formatDay: jest.fn(),
+      formatMonthDropdown: jest.fn(),
+      formatMonthCaption: jest.fn(),
+      formatWeekNumber: jest.fn(),
+      formatWeekNumberHeader: jest.fn(),
+      formatWeekdayName: jest.fn(),
+      formatYearDropdown: jest.fn(),
+      formatYearCaption: jest.fn()
+    },
+    dayPickerProps: {
+      mode: "single",
+      required: false
+    } as DayPickerProps
+  };
+
+  it("should return the context value when used within a DayPicker provider", () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <dayPickerContext.Provider value={mockContextValue}>
+        {children}
+      </dayPickerContext.Provider>
+    );
+
+    const { result } = renderHook(() => useDayPicker(), { wrapper });
+    expect(result.current).toEqual(mockContextValue);
+  });
+});

package/src/useDayPicker.ts

@@ -2,6 +2,7 @@ import { createContext, useContext } from "react";
 
 import { CalendarDay } from "./classes/CalendarDay.js";
 import { CalendarMonth } from "./classes/CalendarMonth.js";
+import { DayPickerProps } from "./types/props.js";
 import type { SelectedValue, SelectHandler } from "./types/selection.js";
 import {
   ClassNames,
@@ -13,7 +14,7 @@ import {
   Styles
 } from "./types/shared.js";
 
-/** @private */
+/** @ignore */
 export const dayPickerContext = createContext<
   | DayPickerContext<{
       mode?: Mode | undefined;
@@ -59,6 +60,12 @@ export type DayPickerContext<
   labels: Labels;
   /** The formatters used to format the UI elements. */
   formatters: Formatters;
+  /**
+   * The props as passed to the DayPicker component.
+   *
+   * @since 9.3.0
+   */
+  dayPickerProps: DayPickerProps;
 };
 
 /**

package/src/utils/dateMatchModifiers.ts

@@ -18,14 +18,14 @@ import {
  * ```tsx
  * const date = new Date(2022, 5, 19);
  * const matcher1: DateRange = {
- *  from: new Date(2021, 12, 21),
- *  to: new Date(2021, 12, 30)
- * }
+ *   from: new Date(2021, 12, 21),
+ *   to: new Date(2021, 12, 30)
+ * };
  * const matcher2: DateRange = {
- *  from: new Date(2022, 5, 1),
- *  to: new Date(2022, 5, 23)
- * }
- * const dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+ *   from: new Date(2022, 5, 1),
+ *   to: new Date(2022, 5, 23)
+ * };
+ * dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
  * ```
  *
  * @group Utilities

package/src/utils/index.ts

@@ -1,4 +1,7 @@
 export * from "./addToRange.js";
 export * from "./dateMatchModifiers.js";
+export * from "./rangeContainsDayOfWeek.js";
+export * from "./rangeContainsModifiers.js";
 export * from "./rangeIncludesDate.js";
+export * from "./rangeOverlaps.js";
 export * from "./typeguards.js";

package/src/utils/rangeContainsDayOfWeek.test.ts

@@ -0,0 +1,48 @@
+import { defaultDateLib } from "../classes/DateLib";
+
+import { rangeContainsDayOfWeek } from "./rangeContainsDayOfWeek";
+
+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 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
+
+describe("should return false", () => {
+  const testCases: Array<[{ from: Date; to: Date }, number | number[]]> = [
+    [{ from: monday, to: saturday }, 0],
+    [{ from: monday, to: friday }, [0, 6]],
+    [{ from: sunday, to: friday }, 6]
+  ];
+
+  for (const [range, dayOfWeek] of testCases) {
+    it(`range from ${range.from} to ${range.to} should not contain ${JSON.stringify(dayOfWeek)}`, () => {
+      expect(rangeContainsDayOfWeek(range, dayOfWeek, defaultDateLib)).toBe(
+        false
+      );
+    });
+  }
+});
+
+describe("should return true", () => {
+  const testCases: Array<[{ from: Date; to: Date }, number | number[]]> = [
+    [{ from: sunday, to: saturday }, 0],
+    [{ from: monday, to: friday }, 1],
+    [{ from: monday, to: friday }, 2],
+    [{ from: monday, to: friday }, 3],
+    [{ from: monday, to: friday }, 4],
+    [{ from: monday, to: friday }, 5],
+    [{ from: monday, to: saturday }, 6],
+    [{ from: monday, to: saturday }, [0, 6]],
+    [{ from: monday, to: nextWeekSunday }, 0],
+    [{ from: monday, to: nextWeekSunday }, 6]
+  ];
+
+  for (const [range, dayOfWeek] of testCases) {
+    it(`range from ${range.from} to ${range.to} should contain ${JSON.stringify(dayOfWeek)}`, () => {
+      expect(rangeContainsDayOfWeek(range, dayOfWeek, defaultDateLib)).toBe(
+        true
+      );
+    });
+  }
+});

package/src/utils/rangeContainsDayOfWeek.ts

@@ -0,0 +1,35 @@
+import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
+
+/**
+ * Returns whether a date range contains one or more days of the week.
+ *
+ * ```tsx
+ * const range: DateRange = {
+ *   from: new Date(2024, 8, 1), //  Sunday
+ *   to: new Date(2024, 8, 6) //  Thursday
+ * };
+ * rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday
+ * ```
+ *
+ * @since 9.2.2
+ * @group Utilities
+ */
+export function rangeContainsDayOfWeek(
+  range: { from: Date; to: Date },
+  dayOfWeek: number | number[],
+  dateLib: DateLib = defaultDateLib
+) {
+  const dayOfWeekArr = !Array.isArray(dayOfWeek) ? [dayOfWeek] : dayOfWeek;
+  let date = range.from;
+  const totalDays = dateLib.differenceInCalendarDays(range.to, range.from);
+
+  // iterate at maximum one week or the total days if the range is shorter than one week
+  const totalDaysLimit = Math.min(totalDays, 6);
+  for (let i = 0; i <= totalDaysLimit; i++) {
+    if (dayOfWeekArr.includes(date.getDay())) {
+      return true;
+    }
+    date = dateLib.addDays(date, 1);
+  }
+  return false;
+}

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);
+  });
+});