react-day-picker 9.6.2 → 9.6.4

package/src/helpers/getNextMonth.test.ts

@@ -0,0 +1,101 @@
+import { addMonths, isSameMonth } from "date-fns";
+
+import { defaultDateLib } from "../classes/DateLib";
+
+import { getNextMonth } from "./getNextMonth";
+
+const startingMonth = new Date(2020, 4, 31);
+
+describe("when number of months is 1", () => {
+  describe("when the navigation is disabled", () => {
+    it("the next month is undefined", () => {
+      const result = getNextMonth(
+        startingMonth,
+        undefined,
+        {
+          disableNavigation: true
+        },
+        defaultDateLib
+      );
+      expect(result).toBe(undefined);
+    });
+  });
+  describe("when in the navigable range", () => {
+    const endMonth = addMonths(startingMonth, 3);
+    it("the next month is not undefined", () => {
+      const result = getNextMonth(startingMonth, endMonth, {}, defaultDateLib);
+      const expectedNextMonth = addMonths(startingMonth, 1);
+      expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
+    });
+  });
+  describe("when not in the navigable range", () => {
+    const endMonth = startingMonth;
+    it("the next month is undefined", () => {
+      const result = getNextMonth(startingMonth, endMonth, {}, defaultDateLib);
+      expect(result).toBe(undefined);
+    });
+  });
+});
+describe("when displaying 3 months", () => {
+  const numberOfMonths = 3;
+  describe("when the navigation is paged", () => {
+    const pagedNavigation = true;
+    it("the next month is 3 months ahead", () => {
+      const result = getNextMonth(
+        startingMonth,
+        undefined,
+        {
+          numberOfMonths,
+          pagedNavigation
+        },
+        defaultDateLib
+      );
+      const expectedNextMonth = addMonths(startingMonth, 3);
+      expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
+    });
+    describe("when the to-date is ahead less than 3 months", () => {
+      it("the next month is undefined", () => {
+        const result = getNextMonth(
+          startingMonth,
+          addMonths(startingMonth, 1),
+          {
+            numberOfMonths,
+            pagedNavigation
+          },
+          defaultDateLib
+        );
+        expect(result).toBe(undefined);
+      });
+    });
+  });
+  describe("when the navigation is not paged", () => {
+    const pagedNavigation = false;
+    it("the next month is 1 months ahead", () => {
+      const result = getNextMonth(
+        startingMonth,
+        undefined,
+        {
+          numberOfMonths,
+          pagedNavigation
+        },
+        defaultDateLib
+      );
+      const expectedNextMonth = addMonths(startingMonth, 1);
+      expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
+    });
+    describe("when the to-date is ahead less than 3 months", () => {
+      it("the next month is undefined", () => {
+        const result = getNextMonth(
+          startingMonth,
+          addMonths(startingMonth, 2),
+          {
+            numberOfMonths,
+            pagedNavigation
+          },
+          defaultDateLib
+        );
+        expect(result).toBe(undefined);
+      });
+    });
+  });
+});

package/src/helpers/getNextMonth.ts

@@ -0,0 +1,45 @@
+import type { DateLib } from "../classes/DateLib.js";
+import type { DayPickerProps } from "../types/index.js";
+
+/**
+ * Return the next month the user can navigate to according to the given
+ * options.
+ *
+ * Please note that the next month is not always the next calendar month:
+ *
+ * - If after the `calendarEndMonth` range, is `undefined`;
+ * - If the navigation is paged , is the number of months displayed ahead.
+ */
+export function getNextMonth(
+  firstDisplayedMonth: Date,
+  calendarEndMonth: Date | undefined,
+  options: Pick<
+    DayPickerProps,
+    "numberOfMonths" | "pagedNavigation" | "disableNavigation"
+  >,
+  dateLib: DateLib
+): Date | undefined {
+  if (options.disableNavigation) {
+    return undefined;
+  }
+  const { pagedNavigation, numberOfMonths = 1 } = options;
+  const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+  const offset = pagedNavigation ? numberOfMonths : 1;
+  const month = startOfMonth(firstDisplayedMonth);
+
+  if (!calendarEndMonth) {
+    return addMonths(month, offset);
+  }
+
+  const monthsDiff = differenceInCalendarMonths(
+    calendarEndMonth,
+    firstDisplayedMonth
+  );
+
+  if (monthsDiff < numberOfMonths) {
+    return undefined;
+  }
+
+  // Jump forward as the number of months when paged navigation
+  return addMonths(month, offset);
+}

package/src/helpers/getPossibleFocusDate.test.ts

@@ -0,0 +1,144 @@
+import type { Locale } from "date-fns";
+// Adjust the import path
+import {
+  addDays,
+  addWeeks,
+  addMonths,
+  addYears,
+  startOfISOWeek,
+  endOfISOWeek,
+  startOfWeek,
+  endOfWeek
+} from "date-fns";
+
+import { DateLib } from "../classes/DateLib";
+import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types";
+
+import { getFocusableDate } from "./getFocusableDate";
+
+const focusedDate = new Date(2023, 0, 1); // Jan 1, 2023
+const options: Pick<DayPickerProps, "ISOWeek"> = {
+  ISOWeek: false
+};
+const dateLib = new DateLib({
+  weekStartsOn: 0 // Sunday
+});
+
+const calendarStartMonth = new Date(2022, 0, 1); // Jan 1, 2022
+const calendarEndMonth = new Date(2024, 0, 1); // Jan 1, 2024
+
+const testCases: {
+  moveBy: MoveFocusBy;
+  moveDir: MoveFocusDir;
+  expectedFn: (date: Date | number, amount: number) => Date;
+}[] = [
+  { moveBy: "day", moveDir: "after", expectedFn: addDays },
+  { moveBy: "day", moveDir: "before", expectedFn: addDays },
+  { moveBy: "month", moveDir: "after", expectedFn: addMonths },
+  { moveBy: "month", moveDir: "before", expectedFn: addMonths },
+  { moveBy: "week", moveDir: "after", expectedFn: addWeeks },
+  { moveBy: "week", moveDir: "before", expectedFn: addWeeks },
+  { moveBy: "year", moveDir: "after", expectedFn: addYears },
+  { moveBy: "year", moveDir: "before", expectedFn: addYears }
+];
+
+testCases.forEach(({ moveBy, moveDir, expectedFn }) => {
+  test(`should move ${moveDir} by ${moveBy}`, () => {
+    const expectedDate = expectedFn(focusedDate, moveDir === "after" ? 1 : -1);
+    const result = getFocusableDate(
+      moveBy,
+      moveDir,
+      focusedDate,
+      calendarStartMonth,
+      calendarEndMonth,
+      options,
+      dateLib
+    );
+    expect(result).toEqual(expectedDate);
+  });
+});
+
+const weekTestCases: {
+  moveBy: MoveFocusBy;
+  moveDir: MoveFocusDir;
+  expectedFn: (
+    date: number | Date,
+    options?:
+      | {
+          locale?: Locale | undefined;
+          weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+        }
+      | undefined
+  ) => Date;
+}[] = [
+  { moveBy: "endOfWeek", moveDir: "after", expectedFn: endOfWeek },
+  { moveBy: "startOfWeek", moveDir: "after", expectedFn: startOfWeek }
+];
+
+weekTestCases.forEach(({ moveBy, moveDir, expectedFn }) => {
+  test(`should move ${moveDir} by ${moveBy}`, () => {
+    const expectedDate = expectedFn(focusedDate);
+    const result = getFocusableDate(
+      moveBy,
+      moveDir,
+      focusedDate,
+      calendarStartMonth,
+      calendarEndMonth,
+      options,
+      dateLib
+    );
+
+    expect(result).toEqual(expectedDate);
+  });
+});
+
+const ISOWeekTestCases: {
+  moveBy: MoveFocusBy;
+  moveDir: MoveFocusDir;
+  expectedFn: (date: Date | number) => Date;
+}[] = [
+  { moveBy: "endOfWeek", moveDir: "after", expectedFn: endOfISOWeek },
+  { moveBy: "startOfWeek", moveDir: "after", expectedFn: startOfISOWeek }
+];
+
+ISOWeekTestCases.forEach(({ moveBy, moveDir, expectedFn }) => {
+  test(`should move ${moveDir} by ${moveBy} when ISOWeek is true`, () => {
+    const expectedDate = expectedFn(focusedDate);
+    const result = getFocusableDate(
+      moveBy,
+      moveDir,
+      focusedDate,
+      calendarStartMonth,
+      calendarEndMonth,
+      { ...options, ISOWeek: true },
+      dateLib
+    );
+    expect(result).toEqual(expectedDate);
+  });
+});
+
+test("should not move before startMonth", () => {
+  const result = getFocusableDate(
+    "day",
+    "before",
+    new Date(2022, 0, 2),
+    calendarStartMonth,
+    calendarEndMonth,
+    options,
+    dateLib
+  );
+  expect(result).toEqual(calendarStartMonth);
+});
+
+test("should not move after endMonth", () => {
+  const result = getFocusableDate(
+    "day",
+    "after",
+    new Date(2023, 11, 31),
+    calendarStartMonth,
+    calendarEndMonth,
+    options,
+    dateLib
+  );
+  expect(result).toEqual(calendarEndMonth);
+});

package/src/helpers/getPreviousMonth.test.ts

@@ -0,0 +1,77 @@
+import { defaultDateLib } from "../classes/DateLib";
+
+import { getPreviousMonth } from "./getPreviousMonth";
+
+it("should return undefined if navigation is disabled", () => {
+  const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022
+  const calendarStartMonth = new Date(2022, 0, 1); // January 2022
+  const props = {
+    disableNavigation: true,
+    pagedNavigation: false,
+    numberOfMonths: 1
+  };
+
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    calendarStartMonth,
+    props,
+    defaultDateLib
+  );
+
+  expect(result).toBeUndefined();
+});
+
+it("should return the previous month if startMonth is not provided", () => {
+  const firstDisplayedMonth = new Date(2022, 1, 1); // February 2022
+  const props = {
+    disableNavigation: false,
+    pagedNavigation: false,
+    numberOfMonths: 1
+  };
+
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    undefined,
+    props,
+    defaultDateLib
+  );
+
+  expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
+});
+
+it("should return undefined if the previous month is before the startMonth", () => {
+  const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022
+  const calendarStartMonth = new Date(2022, 0, 1); // January 2022
+  const props = {
+    disableNavigation: false,
+    pagedNavigation: false,
+    numberOfMonths: 1
+  };
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    calendarStartMonth,
+    props,
+    defaultDateLib
+  );
+  expect(result).toBeUndefined();
+});
+
+it("should return the correct previous month when pagedNavigation is true", () => {
+  const firstDisplayedMonth = new Date(2022, 2, 1); // March 2022
+  const calendarStartMonth = new Date(2022, 0, 1); // January 2022
+  const props = {
+    disableNavigation: false,
+    pagedNavigation: true,
+    numberOfMonths: 2,
+    startMonth: new Date(2022, 0, 1)
+  };
+
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    calendarStartMonth,
+    props,
+    defaultDateLib
+  );
+
+  expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
+});

package/src/helpers/getPreviousMonth.ts

@@ -0,0 +1,40 @@
+import type { DateLib } from "../classes/DateLib.js";
+import type { DayPickerProps } from "../types/index.js";
+
+/**
+ * Return the next previous the user can navigate to, according to the given
+ * options.
+ *
+ * Please note that the previous month is not always the previous calendar
+ * month:
+ *
+ * - If before the `calendarStartMonth` date, is `undefined`;
+ * - If the navigation is paged, is the number of months displayed before.
+ */
+export function getPreviousMonth(
+  firstDisplayedMonth: Date,
+  calendarStartMonth: Date | undefined,
+  options: Pick<
+    DayPickerProps,
+    "numberOfMonths" | "pagedNavigation" | "disableNavigation"
+  >,
+  dateLib: DateLib
+): Date | undefined {
+  if (options.disableNavigation) {
+    return undefined;
+  }
+  const { pagedNavigation, numberOfMonths } = options;
+  const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+  const offset = pagedNavigation ? (numberOfMonths ?? 1) : 1;
+  const month = startOfMonth(firstDisplayedMonth);
+  if (!calendarStartMonth) {
+    return addMonths(month, -offset);
+  }
+  const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth);
+
+  if (monthsDiff <= 0) {
+    return undefined;
+  }
+
+  return addMonths(month, -offset);
+}

package/src/helpers/getStyleForModifiers.test.ts

@@ -0,0 +1,92 @@
+import type { CSSProperties } from "react";
+
+// Update the path as needed
+import type { Modifiers, ModifiersStyles } from "../types";
+
+import { getStyleForModifiers } from "./getStyleForModifiers";
+
+const defaultModifiers: Modifiers = {
+  disabled: false,
+  hidden: false,
+  outside: false,
+  range_end: false,
+  range_middle: false,
+  range_start: false,
+  selected: false,
+  focusable: false,
+  focused: false,
+  today: false
+};
+
+test("applies modifier styles to the base style", () => {
+  const dayModifiers: Modifiers = {
+    ...defaultModifiers,
+    selected: true,
+    disabled: false
+  };
+  const modifiersStyles: Partial<ModifiersStyles> = {
+    selected: { backgroundColor: "blue", color: "white" }
+  };
+  const expectedStyle: CSSProperties = {
+    ...modifiersStyles.selected
+  };
+
+  const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
+
+  expect(style).toEqual(expectedStyle);
+});
+
+test("ignores modifiers that are not active", () => {
+  const dayModifiers: Modifiers = {
+    ...defaultModifiers,
+    selected: false,
+    disabled: true
+  };
+  const modifiersStyles: Partial<ModifiersStyles> = {
+    disabled: { opacity: 0.5 }
+  };
+
+  const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
+
+  expect(style).toEqual({ opacity: 0.5 }); // should not have applied the disabled style
+});
+
+test("combines multiple active modifier styles", () => {
+  const dayModifiers: Modifiers = {
+    ...defaultModifiers,
+    selected: true,
+    highlighted: true
+  };
+  const modifiersStyles: Partial<ModifiersStyles> = {
+    selected: { backgroundColor: "blue" },
+    highlighted: { borderColor: "yellow" }
+  };
+  const expectedStyle: CSSProperties = {
+    ...modifiersStyles.selected,
+    ...modifiersStyles.highlighted
+  };
+
+  const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
+
+  expect(style).toEqual(expectedStyle);
+});
+
+test("applies the most recent modifier style when there are conflicts", () => {
+  const dayModifiers: Modifiers = {
+    ...defaultModifiers,
+    selected: true,
+    highlighted: true
+  };
+  const modifiersStyles: Partial<ModifiersStyles> = {
+    selected: { backgroundColor: "blue", color: "red" }, // 'color' should be overridden.
+    highlighted: { backgroundColor: "yellow", color: "green" }
+  };
+  const expectedStyle: CSSProperties = {
+    backgroundColor: "yellow", // from 'highlighted'
+    color: "green" // from 'highlighted', overriding 'selected'
+  };
+
+  const style = getStyleForModifiers(dayModifiers, {}, modifiersStyles);
+
+  expect(style).toEqual(expectedStyle);
+});

package/src/helpers/getStyleForModifiers.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties } from "react";
+
+import { UI } from "../UI.js";
+import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js";
+
+export function getStyleForModifiers(
+  dayModifiers: Modifiers,
+  styles: Partial<Styles> = {},
+  modifiersStyles: Partial<ModifiersStyles> = {}
+) {
+  let style: CSSProperties = { ...styles?.[UI.Day] };
+  Object.entries(dayModifiers)
+    .filter(([, active]) => active === true)
+    .forEach(([modifier]) => {
+      style = {
+        ...style,
+        ...modifiersStyles?.[modifier]
+      };
+    });
+  return style;
+}

package/src/helpers/getWeekdays.test.ts

@@ -0,0 +1,44 @@
+import { es } from "date-fns/locale/es";
+
+import { DateLib, defaultDateLib } from "../classes/DateLib";
+
+import { getWeekdays } from "./getWeekdays";
+
+let result: Date[];
+
+describe("when rendered without a locale", () => {
+  beforeEach(() => {
+    result = getWeekdays(defaultDateLib);
+  });
+  test("should return 7 days", () => {
+    expect(result).toHaveLength(7);
+  });
+  test("should return Sunday as first day", () => {
+    expect(result[0]).toBeSunday();
+  });
+});
+
+describe.each<0 | 1 | 2 | 3 | 4 | 5 | 6>([0, 1, 2, 3, 4, 5, 6])(
+  "when week start on %s",
+  (weekStartsOn) => {
+    beforeEach(() => {
+      result = getWeekdays(new DateLib({ locale: es, weekStartsOn }));
+    });
+    test("the first date should be weekStartsOn", () => {
+      expect(result[0].getDay()).toBe(weekStartsOn);
+    });
+  }
+);
+
+describe("when using ISO week", () => {
+  beforeEach(() => {
+    result = getWeekdays(
+      new DateLib({ locale: es, weekStartsOn: 3 }),
+      true,
+      undefined
+    );
+  });
+  test("should return Monday as first day", () => {
+    expect(result[0]).toBeMonday();
+  });
+});

package/src/helpers/getWeekdays.ts

@@ -0,0 +1,29 @@
+import { DateLib } from "../classes/DateLib.js";
+
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export function getWeekdays(
+  /** The date library. */
+  dateLib: DateLib,
+  /** Use ISOWeek instead of locale/ */
+  ISOWeek?: boolean | undefined,
+  /** @since 9.4.0 */
+  broadcastCalendar?: boolean | undefined
+): Date[] {
+  const today = dateLib.today();
+
+  const start = broadcastCalendar
+    ? dateLib.startOfBroadcastWeek(today, dateLib)
+    : ISOWeek
+      ? dateLib.startOfISOWeek(today)
+      : dateLib.startOfWeek(today);
+
+  const days: Date[] = [];
+  for (let i = 0; i < 7; i++) {
+    const day = dateLib.addDays(start, i);
+    days.push(day);
+  }
+  return days;
+}

package/src/helpers/getWeeks.test.ts

@@ -0,0 +1,30 @@
+import { CalendarDay, CalendarMonth, CalendarWeek } from "../classes";
+
+import { getWeeks } from "./getWeeks";
+
+const days1 = [
+  new CalendarDay(new Date(2023, 1, 12), new Date(2023, 1, 1)),
+  new CalendarDay(new Date(2023, 1, 13), new Date(2023, 1, 1))
+];
+const days2 = [
+  new CalendarDay(new Date(2023, 1, 13), new Date(2023, 1, 1)),
+  new CalendarDay(new Date(2023, 1, 14), new Date(2023, 1, 1))
+];
+const days3 = [
+  new CalendarDay(new Date(2023, 2, 12), new Date(2023, 2, 1)),
+  new CalendarDay(new Date(2023, 2, 13), new Date(2023, 2, 1))
+];
+const days4 = [
+  new CalendarDay(new Date(2023, 2, 13), new Date(2023, 2, 1)),
+  new CalendarDay(new Date(2023, 2, 14), new Date(2023, 2, 1))
+];
+const weeks1 = [new CalendarWeek(1, days1), new CalendarWeek(2, days2)];
+const weeks2 = [new CalendarWeek(3, days3), new CalendarWeek(4, days4)];
+const months = [
+  new CalendarMonth(days1[0].date, weeks1),
+  new CalendarMonth(days1[0].date, weeks2)
+];
+
+it("should return all the days belonging to the calendar by merging the days in the weeks for each month", () => {
+  expect(getWeeks(months)).toEqual([...weeks1, ...weeks2]);
+});

package/src/helpers/getWeeks.ts

@@ -0,0 +1,9 @@
+import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
+
+/** Returns an array of calendar weeks from an array of calendar months. */
+export function getWeeks(months: CalendarMonth[]) {
+  const initialWeeks: CalendarWeek[] = [];
+  return months.reduce((weeks, month) => {
+    return [...weeks, ...month.weeks];
+  }, initialWeeks);
+}

package/src/helpers/getYearOptions.test.ts

@@ -0,0 +1,46 @@
+import { defaultDateLib } from "../classes/DateLib";
+
+import { getFormatters } from "./getFormatters";
+import { getYearOptions } from "./getYearOptions";
+
+test("return undefined if navStart or navEnd are not set", () => {
+  const formatters = getFormatters({
+    formatYearDropdown: (date: Date) => `${date.getFullYear()}`
+  });
+  const result1 = getYearOptions(
+    undefined,
+    new Date(2022, 11, 31),
+    formatters,
+    defaultDateLib
+  );
+  const result2 = getYearOptions(
+    new Date(2022, 0, 1),
+    undefined,
+    formatters,
+    defaultDateLib
+  );
+
+  expect(result1).toBeUndefined();
+  expect(result2).toBeUndefined();
+});
+
+test("return correct dropdown options", () => {
+  const startMonth = new Date(2022, 0, 1); // January 2022
+  const endMonth = new Date(2024, 11, 31); // December 2024
+  const formatters = getFormatters({
+    formatYearDropdown: (date: Date) => `${date.getFullYear()}`
+  });
+
+  const result = getYearOptions(
+    startMonth,
+    endMonth,
+    formatters,
+    defaultDateLib
+  );
+
+  expect(result).toEqual([
+    { value: 2022, label: "2022", disabled: false },
+    { value: 2023, label: "2023", disabled: false },
+    { value: 2024, label: "2024", disabled: false }
+  ]);
+});