react-day-picker 9.6.2 → 9.6.4

package/src/helpers/getMonthOptions.ts

@@ -0,0 +1,37 @@
+import { type DateLib } from "../classes/DateLib.js";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { Formatters } from "../types/index.js";
+
+/** Return the months to show in the dropdown. */
+export function getMonthOptions(
+  displayMonth: Date,
+  navStart: Date | undefined,
+  navEnd: Date | undefined,
+  formatters: Pick<Formatters, "formatMonthDropdown">,
+  dateLib: DateLib
+): DropdownOption[] | undefined {
+  const {
+    startOfMonth,
+    startOfYear,
+    endOfYear,
+    eachMonthOfInterval,
+    getMonth
+  } = dateLib;
+
+  const months = eachMonthOfInterval({
+    start: startOfYear(displayMonth),
+    end: endOfYear(displayMonth)
+  });
+
+  const options = months.map((month) => {
+    const label = formatters.formatMonthDropdown(month, dateLib);
+    const value = getMonth(month);
+    const disabled =
+      (navStart && month < startOfMonth(navStart)) ||
+      (navEnd && month > startOfMonth(navEnd)) ||
+      false;
+    return { value, label, disabled };
+  });
+
+  return options;
+}

package/src/helpers/getMonths.test.ts

@@ -0,0 +1,88 @@
+import { CalendarMonth } from "../classes";
+import { DateLib } from "../classes/DateLib";
+import type { DayPickerProps } from "../types";
+
+import { getMonths } from "./getMonths";
+
+const mockDates = [
+  new Date(2023, 4, 27), // May 1, 2023
+  new Date(2023, 5, 1), // June 1, 2023
+  new Date(2023, 5, 8), // June 2, 2023
+  new Date(2023, 5, 15), // June 15, 2023
+  new Date(2023, 5, 22), // June 22, 2023
+  new Date(2023, 5, 30), // June 30, 2023
+  new Date(2023, 6, 6) // June 30, 2023
+];
+
+const mockProps: Pick<
+  DayPickerProps,
+  "fixedWeeks" | "ISOWeek" | "reverseMonths"
+> = {
+  fixedWeeks: false,
+  ISOWeek: false,
+  reverseMonths: false
+};
+
+const dateLib = new DateLib({
+  weekStartsOn: 0, // Sunday
+  firstWeekContainsDate: 1
+});
+
+it("should return the correct months without ISO weeks and reverse months", () => {
+  const displayMonths = [new Date(2023, 5, 1)]; // June 2023
+
+  const result = getMonths(displayMonths, mockDates, mockProps, dateLib);
+
+  expect(result).toHaveLength(1);
+  expect(result[0]).toBeInstanceOf(CalendarMonth);
+  expect(result[0].weeks).toHaveLength(5); // June 2023 has 5 weeks
+});
+
+it("should handle ISO weeks", () => {
+  const displayMonths = [new Date(2023, 5, 1)]; // June 2023
+
+  const isoProps = { ...mockProps, ISOWeek: true };
+
+  const result = getMonths(displayMonths, mockDates, isoProps, dateLib);
+
+  expect(result).toHaveLength(1);
+  expect(result[0]).toBeInstanceOf(CalendarMonth);
+  expect(result[0].weeks).toHaveLength(5); // June 2023 has 5 ISO weeks
+});
+
+it("should handle reverse months", () => {
+  const displayMonths = [
+    new Date(2023, 4, 1), // May 2023
+    new Date(2023, 5, 1) // June 2023
+  ];
+
+  const reverseProps = { ...mockProps, reverseMonths: true };
+
+  const result = getMonths(displayMonths, mockDates, reverseProps, dateLib);
+
+  expect(result).toHaveLength(2);
+  expect(result[0].date).toEqual(new Date(2023, 5, 1)); // June 2023
+  expect(result[1].date).toEqual(new Date(2023, 4, 1)); // May 2023
+});
+
+it("should handle fixed weeks", () => {
+  const displayMonths = [new Date(2023, 5, 1)]; // June 2023
+
+  const fixedWeeksProps = { ...mockProps, fixedWeeks: true };
+
+  const result = getMonths(displayMonths, mockDates, fixedWeeksProps, dateLib);
+
+  expect(result).toHaveLength(1);
+  expect(result[0]).toBeInstanceOf(CalendarMonth);
+  expect(result[0].weeks).toHaveLength(6); // Fixed weeks should ensure 6 weeks in the month view
+});
+
+it("should handle months with no dates", () => {
+  const displayMonths = [new Date(2023, 5, 1)]; // June 2023
+
+  const result = getMonths(displayMonths, [], mockProps, dateLib);
+
+  expect(result).toHaveLength(1);
+  expect(result[0]).toBeInstanceOf(CalendarMonth);
+  expect(result[0].weeks).toHaveLength(0); // No dates should result in no weeks
+});

package/src/helpers/getMonths.ts

@@ -0,0 +1,90 @@
+import type { DateLib } from "../classes/DateLib.js";
+import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
+import type { DayPickerProps } from "../types/index.js";
+
+/** Return the months to display in the calendar. */
+export function getMonths(
+  /** The months (as dates) to display in the calendar. */
+  displayMonths: Date[],
+  /** The dates to display in the calendar. */
+  dates: Date[],
+  /** Options from the props context. */
+  props: Pick<
+    DayPickerProps,
+    "broadcastCalendar" | "fixedWeeks" | "ISOWeek" | "reverseMonths"
+  >,
+  dateLib: DateLib
+): CalendarMonth[] {
+  const {
+    addDays,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
+    getISOWeek,
+    getWeek,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
+  } = dateLib;
+  const dayPickerMonths = displayMonths.reduce<CalendarMonth[]>(
+    (months, month) => {
+      const firstDateOfFirstWeek = props.broadcastCalendar
+        ? startOfBroadcastWeek(month, dateLib)
+        : props.ISOWeek
+          ? startOfISOWeek(month)
+          : startOfWeek(month);
+
+      const lastDateOfLastWeek = props.broadcastCalendar
+        ? endOfBroadcastWeek(month, dateLib)
+        : props.ISOWeek
+          ? endOfISOWeek(endOfMonth(month))
+          : endOfWeek(endOfMonth(month));
+
+      /** The dates to display in the month. */
+      const monthDates = dates.filter((date) => {
+        return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
+      });
+
+      const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+
+      if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+        const extraDates = dates.filter((date) => {
+          const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+          return (
+            date > lastDateOfLastWeek &&
+            date <= addDays(lastDateOfLastWeek, daysToAdd)
+          );
+        });
+        monthDates.push(...extraDates);
+      }
+
+      const weeks: CalendarWeek[] = monthDates.reduce<CalendarWeek[]>(
+        (weeks, date) => {
+          const weekNumber = props.ISOWeek ? getISOWeek(date) : getWeek(date);
+          const week = weeks.find((week) => week.weekNumber === weekNumber);
+
+          const day = new CalendarDay(date, month, dateLib);
+          if (!week) {
+            weeks.push(new CalendarWeek(weekNumber, [day]));
+          } else {
+            week.days.push(day);
+          }
+          return weeks;
+        },
+        []
+      );
+
+      const dayPickerMonth = new CalendarMonth(month, weeks);
+      months.push(dayPickerMonth);
+      return months;
+    },
+    []
+  );
+
+  if (!props.reverseMonths) {
+    return dayPickerMonths;
+  } else {
+    return dayPickerMonths.reverse();
+  }
+}

package/src/helpers/getNavMonth.test.ts

@@ -0,0 +1,253 @@
+import {
+  addYears,
+  endOfMonth,
+  endOfYear,
+  startOfDay,
+  startOfMonth,
+  startOfYear
+} from "date-fns";
+import { DayPickerProps } from "react-day-picker/types";
+
+import { defaultDateLib } from "../classes/DateLib";
+
+import { getNavMonths } from "./getNavMonth";
+
+describe('when "startMonth" is not set', () => {
+  test('"startMonth" should be undefined', () => {
+    const [navStartMonth] = getNavMonths({}, defaultDateLib);
+    expect(navStartMonth).toBeUndefined();
+  });
+});
+describe('when "startMonth" is set', () => {
+  const startMonth = new Date(2021, 4, 3);
+  const props: DayPickerProps = { startMonth };
+  test('"startMonth" should be the start of that month', () => {
+    const [navStartMonth] = getNavMonths(props, defaultDateLib);
+    const startOfThatMonth = startOfMonth(startMonth);
+    expect(navStartMonth).toEqual(startOfThatMonth);
+  });
+  describe('when "fromYear" is set', () => {
+    const fromYear = 2021;
+    test('"startMonth" should be the start of that month', () => {
+      const [navStartMonth] = getNavMonths(
+        { ...props, fromYear },
+        defaultDateLib
+      );
+      const startOfThatMonth = startOfMonth(startMonth);
+      expect(navStartMonth).toEqual(startOfThatMonth);
+    });
+  });
+});
+describe('when "fromYear" is set', () => {
+  const fromYear = 2021;
+  const props: DayPickerProps = { fromYear };
+  test('"startMonth" should be the start of that year', () => {
+    const [navStartMonth] = getNavMonths(props, defaultDateLib);
+    const startOfThatYear = new Date(fromYear, 0, 1);
+    expect(navStartMonth).toEqual(startOfThatYear);
+  });
+});
+describe('when "endMonth" is set', () => {
+  const endMonth = new Date(2021, 4, 3);
+  const props: DayPickerProps = { endMonth };
+  test('"endMonth" should be the end of that month', () => {
+    const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+    const endOfThatMonth = startOfDay(endOfMonth(endMonth));
+    expect(navEndMonth).toEqual(endOfThatMonth);
+  });
+  describe('when "fromYear" is set', () => {
+    const fromYear = 2021;
+    test('"endMonth" should be the end of that month', () => {
+      const [, navEndMonth] = getNavMonths(
+        { ...props, fromYear },
+        defaultDateLib
+      );
+      const endOfThatMonth = startOfDay(endOfMonth(endMonth));
+      expect(navEndMonth).toEqual(endOfThatMonth);
+    });
+  });
+});
+
+describe('when "toYear" is set', () => {
+  const toYear = 2021;
+  const props: DayPickerProps = { toYear };
+  test('"endMonth" should be the end of that year', () => {
+    const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+    expect(navEndMonth).toEqual(new Date(toYear, 11, 31));
+  });
+});
+
+describe.each([["dropdown" as const], ["dropdown-years" as const]])(
+  'when "captionLayout" is "%s"',
+  (captionLayout) => {
+    const today = new Date(2024, 4, 3);
+    const props: DayPickerProps = { captionLayout, today };
+
+    test('"startMonth" should be 100 years ago', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      const startOf100YearsAgo = startOfYear(addYears(today, -100));
+      expect(navStartMonth).toEqual(startOf100YearsAgo);
+    });
+    test('"endMonth" should be the end of this year', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      const endOfThisYear = startOfDay(endOfYear(today));
+      expect(navEndMonth).toEqual(endOfThisYear);
+    });
+
+    describe('when "startMonth" is set', () => {
+      const today = new Date(2024, 4, 3);
+      const startMonth = new Date(2021, 4, 3);
+      const props: DayPickerProps = { captionLayout, startMonth, today };
+      test('"startMonth" should be the start of that month', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        const startOfThatMonth = startOfMonth(startMonth);
+        expect(navStartMonth).toEqual(startOfThatMonth);
+      });
+      test('"endMonth" should be the end of this year', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        const endOfThisYear = startOfDay(endOfYear(today));
+        expect(navEndMonth).toEqual(endOfThisYear);
+      });
+    });
+
+    describe('when "endMonth" is set', () => {
+      const today = new Date(2021, 4, 3);
+      const endMonth = new Date(2022, 4, 3);
+      const props: DayPickerProps = { captionLayout, endMonth, today };
+
+      test('"startMonth" should be 100 years ago', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        const startOf100YearsAgo = startOfYear(addYears(today, -100));
+        expect(navStartMonth).toEqual(startOf100YearsAgo);
+      });
+      test('"endMonth" should be the end of that month', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        expect(navEndMonth).toEqual(startOfDay(endOfMonth(endMonth)));
+      });
+    });
+
+    describe('when "fromYear" is set', () => {
+      const today = new Date(2024, 4, 3);
+      const fromYear = 2022;
+      const props: DayPickerProps = { captionLayout, fromYear, today };
+
+      test('"startMonth" should be equal to the "fromYear"', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        const startOfThatYear = new Date(fromYear, 0, 1);
+        expect(navStartMonth).toEqual(startOfThatYear);
+      });
+      test('"endMonth" should be the end of this year', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        const endOfThisYear = startOfDay(endOfYear(today));
+        expect(navEndMonth).toEqual(endOfThisYear);
+      });
+    });
+
+    describe('when "toYear" is set', () => {
+      const today = new Date(2021, 4, 3);
+      const toYear = 2022;
+      const props: DayPickerProps = { captionLayout, toYear, today };
+
+      test('"startMonth" should be 100 years ago', () => {
+        const [navStartMonth] = getNavMonths(props, defaultDateLib);
+        expect(navStartMonth).toEqual(startOfYear(addYears(today, -100)));
+      });
+      test('"endMonth" should be equal the last day of the year', () => {
+        const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+        expect(navEndMonth).toEqual(new Date(toYear, 11, 31));
+      });
+    });
+  }
+);
+
+describe('when "captionLayout" is "dropdown-months"', () => {
+  const today = new Date(2024, 4, 3);
+  const props: DayPickerProps = {
+    captionLayout: "dropdown-months",
+    today
+  };
+  test('"startMonth" should be undefined', () => {
+    const [navStartMonth] = getNavMonths(props, defaultDateLib);
+    expect(navStartMonth).toBeUndefined();
+  });
+  test('"endMonth" should be undefined', () => {
+    const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+    expect(navEndMonth).toBeUndefined();
+  });
+
+  describe('when "startMonth" is set', () => {
+    const today = new Date(2024, 4, 3);
+    const startMonth = new Date(2021, 4, 3);
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      startMonth,
+      today
+    };
+    test('"startMonth" should be the start of that month', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      const startOfThatMonth = startOfMonth(startMonth);
+      expect(navStartMonth).toEqual(startOfThatMonth);
+    });
+    test('"endMonth" should be undefined', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      expect(navEndMonth).toBeUndefined();
+    });
+  });
+
+  describe('when "endMonth" is set', () => {
+    const today = new Date(2021, 4, 3);
+    const endMonth = new Date(2022, 4, 3);
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      endMonth,
+      today
+    };
+    test('"startMonth" should be undefined', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      expect(navStartMonth).toBeUndefined();
+    });
+    test('"endMonth" should be the end of that month', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      const endOfThatMonth = startOfDay(endOfMonth(endMonth));
+      expect(navEndMonth).toEqual(endOfThatMonth);
+    });
+  });
+
+  describe('when "fromYear" is set', () => {
+    const today = new Date(2024, 4, 3);
+    const fromYear = 2022;
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      fromYear,
+      today
+    };
+    test('"startMonth" should be equal to the start of that year', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      const startOfThatYear = new Date(fromYear, 0, 1);
+      expect(navStartMonth).toEqual(startOfThatYear);
+    });
+    test('"endMonth" should be undefined', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      expect(navEndMonth).toBeUndefined();
+    });
+  });
+
+  describe('when "toYear" is set', () => {
+    const today = new Date(2021, 4, 3);
+    const toYear = 2022;
+    const props: DayPickerProps = {
+      captionLayout: "dropdown-months",
+      toYear,
+      today
+    };
+    test('"startMonth" should be undefined', () => {
+      const [navStartMonth] = getNavMonths(props, defaultDateLib);
+      expect(navStartMonth).toBeUndefined();
+    });
+    test('"endMonth" should be equal to the end of that year', () => {
+      const [, navEndMonth] = getNavMonths(props, defaultDateLib);
+      const endOfThatYear = new Date(2022, 11, 31);
+      expect(navEndMonth).toEqual(endOfThatYear);
+    });
+  });
+});

package/src/helpers/getNavMonth.ts

@@ -0,0 +1,70 @@
+import { type DateLib } from "../classes/DateLib.js";
+import type { DayPickerProps } from "../types/index.js";
+
+/** Return the start and end months for the calendar navigation. */
+export function getNavMonths(
+  props: Pick<
+    DayPickerProps,
+    | "captionLayout"
+    | "endMonth"
+    | "startMonth"
+    | "today"
+    | "timeZone"
+    // Deprecated:
+    | "fromMonth"
+    | "fromYear"
+    | "toMonth"
+    | "toYear"
+  >,
+  dateLib: DateLib
+): [start: Date | undefined, end: Date | undefined] {
+  let { startMonth, endMonth } = props;
+
+  const {
+    startOfYear,
+    startOfDay,
+    startOfMonth,
+    endOfMonth,
+    addYears,
+    endOfYear,
+    newDate,
+    today
+  } = dateLib;
+
+  // Handle deprecated code
+  const { fromYear, toYear, fromMonth, toMonth } = props;
+  if (!startMonth && fromMonth) {
+    startMonth = fromMonth;
+  }
+  if (!startMonth && fromYear) {
+    startMonth = dateLib.newDate(fromYear, 0, 1);
+  }
+  if (!endMonth && toMonth) {
+    endMonth = toMonth;
+  }
+  if (!endMonth && toYear) {
+    endMonth = newDate(toYear, 11, 31);
+  }
+
+  const hasYearDropdown =
+    props.captionLayout === "dropdown" ||
+    props.captionLayout === "dropdown-years";
+  if (startMonth) {
+    startMonth = startOfMonth(startMonth);
+  } else if (fromYear) {
+    startMonth = newDate(fromYear, 0, 1);
+  } else if (!startMonth && hasYearDropdown) {
+    startMonth = startOfYear(addYears(props.today ?? today(), -100));
+  }
+  if (endMonth) {
+    endMonth = endOfMonth(endMonth);
+  } else if (toYear) {
+    endMonth = newDate(toYear, 11, 31);
+  } else if (!endMonth && hasYearDropdown) {
+    endMonth = endOfYear(props.today ?? today());
+  }
+  return [
+    startMonth ? startOfDay(startMonth) : startMonth,
+    endMonth ? startOfDay(endMonth) : endMonth
+  ];
+}

package/src/helpers/getNextFocus.test.tsx

@@ -0,0 +1,99 @@
+import { CalendarDay } from "../classes";
+import { defaultDateLib } from "../classes/DateLib";
+import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types";
+
+import { getNextFocus } from "./getNextFocus";
+
+const props: Pick<
+  DayPickerProps,
+  "disabled" | "hidden" | "startMonth" | "endMonth"
+> = {
+  disabled: [],
+  hidden: []
+};
+
+it("should return `undefined` if `attempt` exceeds 365", () => {
+  const focusedDay = new CalendarDay(
+    new Date(2020, 0, 1),
+    new Date(2020, 0, 1),
+    defaultDateLib
+  );
+  const moveBy: MoveFocusBy = "day";
+  const moveDir: MoveFocusDir = "after";
+  const result = getNextFocus(
+    moveBy,
+    moveDir,
+    focusedDay,
+    undefined,
+    undefined,
+    props,
+    defaultDateLib,
+    366
+  );
+  expect(result).toBeUndefined();
+});
+
+it("should return the focus date if it is not disabled or hidden", () => {
+  const focusedDay = new CalendarDay(
+    new Date(2020, 0, 1),
+    new Date(2020, 0, 1),
+    defaultDateLib
+  );
+  const expectedDate = new Date(2020, 0, 2);
+  const result = getNextFocus(
+    "day",
+    "after",
+    focusedDay,
+    undefined,
+    undefined,
+    props,
+    defaultDateLib
+  );
+  expect(result?.date).toEqual(expectedDate);
+});
+
+it("should return the next focus date if it is disabled", () => {
+  const focusedDay = new CalendarDay(
+    new Date(2020, 0, 1),
+    new Date(2020, 0, 1),
+    defaultDateLib
+  );
+  const disabledDate = new Date(2020, 0, 2);
+  const expectedDate = new Date(2020, 0, 3);
+  const result = getNextFocus(
+    "day",
+    "after",
+    focusedDay,
+    undefined,
+    undefined,
+    {
+      ...props,
+      disabled: [disabledDate]
+    },
+    defaultDateLib
+  );
+  expect(result?.date).toEqual(expectedDate);
+});
+
+it("should return the next focus date if it is hidden", () => {
+  const focusedDay = new CalendarDay(
+    new Date(2020, 0, 1),
+    new Date(2020, 0, 1),
+    defaultDateLib
+  );
+  const hiddenDate = new Date(2020, 0, 2);
+  const expectedDate = new Date(2020, 0, 3);
+  const result = getNextFocus(
+    "day",
+    "after",
+    focusedDay,
+    undefined,
+    undefined,
+    {
+      ...props,
+      hidden: [hiddenDate]
+    },
+    defaultDateLib
+  );
+  expect(result?.date).toEqual(expectedDate);
+});

package/src/helpers/getNextFocus.tsx

@@ -0,0 +1,67 @@
+import type { DateLib } from "../classes/DateLib.js";
+import { CalendarDay } from "../classes/index.js";
+import type {
+  DayPickerProps,
+  MoveFocusBy,
+  MoveFocusDir
+} from "../types/index.js";
+import { dateMatchModifiers } from "../utils/dateMatchModifiers.js";
+
+import { getFocusableDate } from "./getFocusableDate.js";
+
+export function getNextFocus(
+  moveBy: MoveFocusBy,
+  moveDir: MoveFocusDir,
+  /** The date that is currently focused. */
+  refDay: CalendarDay,
+  calendarStartMonth: Date | undefined,
+  calendarEndMonth: Date | undefined,
+  props: Pick<
+    DayPickerProps,
+    "disabled" | "hidden" | "modifiers" | "ISOWeek" | "timeZone"
+  >,
+  dateLib: DateLib,
+  attempt: number = 0
+): CalendarDay | undefined {
+  if (attempt > 365) {
+    // Limit the recursion to 365 attempts
+    return undefined;
+  }
+
+  const focusableDate = getFocusableDate(
+    moveBy,
+    moveDir,
+    refDay.date, // should be refDay? or refDay.date?
+    calendarStartMonth,
+    calendarEndMonth,
+    props,
+    dateLib
+  );
+
+  const isDisabled = Boolean(
+    props.disabled && dateMatchModifiers(focusableDate, props.disabled, dateLib)
+  );
+
+  const isHidden = Boolean(
+    props.hidden && dateMatchModifiers(focusableDate, props.hidden, dateLib)
+  );
+
+  const targetMonth = focusableDate;
+  const focusDay = new CalendarDay(focusableDate, targetMonth, dateLib);
+
+  if (!isDisabled && !isHidden) {
+    return focusDay;
+  }
+
+  // Recursively attempt to find the next focusable date
+  return getNextFocus(
+    moveBy,
+    moveDir,
+    focusDay,
+    calendarStartMonth,
+    calendarEndMonth,
+    props,
+    dateLib,
+    attempt + 1
+  );
+}