react-day-picker 9.6.2 → 9.6.4

package/src/useFocus.ts

@@ -0,0 +1,87 @@
+import { useState } from "react";
+
+import type { CalendarDay, DateLib } from "./classes/index.js";
+import { calculateFocusTarget } from "./helpers/calculateFocusTarget.js";
+import { getNextFocus } from "./helpers/getNextFocus.js";
+import type {
+  MoveFocusBy,
+  MoveFocusDir,
+  DayPickerProps,
+  Modifiers
+} from "./types/index.js";
+import { Calendar } from "./useCalendar.js";
+
+export type UseFocus = {
+  /** The date that is currently focused. */
+  focused: CalendarDay | undefined;
+
+  /** Check if the given day is the focus target when entering the calendar. */
+  isFocusTarget: (day: CalendarDay) => boolean;
+
+  /** Focus the given day. */
+  setFocused: (day: CalendarDay | undefined) => void;
+
+  /** Blur the focused day. */
+  blur: () => void;
+
+  /** Move the current focus to the next day according to the given direction. */
+  moveFocus: (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => void;
+};
+
+/** @private */
+export function useFocus<T extends DayPickerProps>(
+  props: T,
+  calendar: Calendar,
+  getModifiers: (day: CalendarDay) => Modifiers,
+  isSelected: (date: Date) => boolean,
+  dateLib: DateLib
+): UseFocus {
+  const { autoFocus } = props;
+  const [lastFocused, setLastFocused] = useState<CalendarDay | undefined>();
+
+  const focusTarget = calculateFocusTarget(
+    calendar.days,
+    getModifiers,
+    isSelected || (() => false),
+    lastFocused
+  );
+  const [focusedDay, setFocused] = useState<CalendarDay | undefined>(
+    autoFocus ? focusTarget : undefined
+  );
+
+  const blur = () => {
+    setLastFocused(focusedDay);
+    setFocused(undefined);
+  };
+
+  const moveFocus = (moveBy: MoveFocusBy, moveDir: MoveFocusDir) => {
+    if (!focusedDay) return;
+    const nextFocus = getNextFocus(
+      moveBy,
+      moveDir,
+      focusedDay,
+      calendar.navStart,
+      calendar.navEnd,
+      props,
+      dateLib
+    );
+    if (!nextFocus) return;
+
+    calendar.goToDay(nextFocus);
+    setFocused(nextFocus);
+  };
+
+  const isFocusTarget = (day: CalendarDay) => {
+    return Boolean(focusTarget?.isEqualTo(day));
+  };
+
+  const useFocus: UseFocus = {
+    isFocusTarget,
+    setFocused,
+    focused: focusedDay,
+    blur,
+    moveFocus
+  };
+
+  return useFocus;
+}

package/src/useGetModifiers.test.tsx

@@ -0,0 +1,154 @@
+import { DayFlag } from "./UI";
+import { CalendarDay, defaultDateLib } from "./classes/index";
+import { useGetModifiers } from "./useGetModifiers";
+
+const dateLib = defaultDateLib;
+
+const displayedMonth = new Date(2022, 10, 1);
+
+const date1 = new Date(2022, 9, 30);
+const date2 = new Date(2022, 10, 10);
+const date3 = new Date(2022, 10, 11);
+const date4 = new Date(2022, 10, 12);
+const date5 = new Date(2022, 10, 13);
+const date6 = new Date(2022, 10, 14);
+const date7 = new Date(2022, 11, 1);
+
+const day1 = new CalendarDay(date1, displayedMonth);
+const day2 = new CalendarDay(date2, displayedMonth);
+const day3 = new CalendarDay(date3, displayedMonth);
+const day4 = new CalendarDay(date4, displayedMonth);
+const day5 = new CalendarDay(date5, displayedMonth);
+const day6 = new CalendarDay(date6, displayedMonth);
+const day7 = new CalendarDay(date7, displayedMonth);
+
+const days: CalendarDay[] = [day1, day2, day3, day4, day5, day6, day7];
+
+const props = {
+  disabled: [date2],
+  hidden: [date3],
+  modifiers: {
+    custom: [date4],
+    selected: [date6]
+  },
+  selected: date7,
+  showOutsideDays: true,
+  today: date5,
+  timeZone: "UTC"
+};
+
+describe("useGetModifiers", () => {
+  describe("default props", () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const getModifiers = useGetModifiers(days, props, dateLib);
+
+    test("return the modifiers for a given day", () => {
+      const modifiers = getModifiers(day2);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(true);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.custom).toBe(false);
+    });
+
+    test("return the custom modifiers for a given day", () => {
+      const modifiers = getModifiers(day4);
+      expect(modifiers.custom).toBe(true);
+    });
+
+    test("return the custom `selected` modifier for a given day", () => {
+      const modifiers = getModifiers(day6);
+      expect(modifiers.selected).toBe(true);
+    });
+
+    test("return the today modifier for a given day", () => {
+      const modifiers = getModifiers(day5);
+
+      expect(modifiers[DayFlag.today]).toBe(true);
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+    });
+
+    test("return the hidden modifier for a given day", () => {
+      const modifiers = getModifiers(day3);
+
+      expect(modifiers[DayFlag.hidden]).toBe(true);
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.today]).toBe(false);
+    });
+
+    test("return the modifiers for a given day before the displayed month", () => {
+      const modifiers = getModifiers(day1);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+
+    test("return the modifiers for a given day after the displayed month", () => {
+      const modifiers = getModifiers(day7);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+  });
+
+  describe("with startMonth and endMonth props", () => {
+    const startMonth = new Date(displayedMonth);
+    startMonth.setDate(30);
+    const endMonth = new Date(displayedMonth);
+    endMonth.setDate(1);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const getModifiers = useGetModifiers(
+      days,
+      { ...props, startMonth, endMonth },
+      dateLib
+    );
+    test("return the modifiers for a given day", () => {
+      const modifiers = getModifiers(day2);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(true);
+      expect(modifiers[DayFlag.hidden]).toBe(false);
+      expect(modifiers[DayFlag.outside]).toBe(false);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.custom).toBe(false);
+    });
+
+    test("return the modifiers for a given day before the displayed month", () => {
+      const modifiers = getModifiers(day1);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(true);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+
+    test("return the modifiers for a given day after the displayed month", () => {
+      const modifiers = getModifiers(day7);
+
+      expect(modifiers[DayFlag.focused]).toBe(false);
+      expect(modifiers[DayFlag.disabled]).toBe(false);
+      expect(modifiers[DayFlag.hidden]).toBe(true);
+      expect(modifiers[DayFlag.outside]).toBe(true);
+      expect(modifiers[DayFlag.today]).toBe(false);
+      expect(modifiers.selected).toBe(false);
+    });
+  });
+});

package/src/useGetModifiers.tsx

@@ -0,0 +1,122 @@
+import { DayFlag } from "./UI.js";
+import type { CalendarDay, DateLib } from "./classes/index.js";
+import type { DayPickerProps, Modifiers } from "./types/index.js";
+import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
+
+/**
+ * Return a function to get the modifiers for a given day.
+ *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
+ * @private
+ */
+export function useGetModifiers(
+  days: CalendarDay[],
+  props: DayPickerProps,
+  dateLib: DateLib
+) {
+  const {
+    disabled,
+    hidden,
+    modifiers,
+    showOutsideDays,
+    broadcastCalendar,
+    today
+  } = props;
+
+  const {
+    isSameDay,
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
+  } = dateLib;
+
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
+
+  const internalModifiersMap: Record<DayFlag, CalendarDay[]> = {
+    [DayFlag.focused]: [],
+    [DayFlag.outside]: [],
+    [DayFlag.disabled]: [],
+    [DayFlag.hidden]: [],
+    [DayFlag.today]: []
+  };
+
+  const customModifiersMap: Record<string, CalendarDay[]> = {};
+
+  for (const day of days) {
+    const { date, displayMonth } = day;
+
+    const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+
+    const isBeforeStartMonth = Boolean(
+      startMonth && isBefore(date, startMonth)
+    );
+
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
+
+    const isDisabled = Boolean(
+      disabled && dateMatchModifiers(date, disabled, dateLib)
+    );
+
+    const isHidden =
+      Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
+      isBeforeStartMonth ||
+      isAfterEndMonth ||
+      // Broadcast calendar will show outside days as default
+      (!broadcastCalendar && !showOutsideDays && isOutside) ||
+      (broadcastCalendar && showOutsideDays === false && isOutside);
+
+    const isToday = isSameDay(date, today ?? dateLib.today());
+
+    if (isOutside) internalModifiersMap.outside.push(day);
+    if (isDisabled) internalModifiersMap.disabled.push(day);
+    if (isHidden) internalModifiersMap.hidden.push(day);
+    if (isToday) internalModifiersMap.today.push(day);
+
+    // Add custom modifiers
+    if (modifiers) {
+      Object.keys(modifiers).forEach((name) => {
+        const modifierValue = modifiers?.[name];
+        const isMatch = modifierValue
+          ? dateMatchModifiers(date, modifierValue, dateLib)
+          : false;
+        if (!isMatch) return;
+        if (customModifiersMap[name]) {
+          customModifiersMap[name].push(day);
+        } else {
+          customModifiersMap[name] = [day];
+        }
+      });
+    }
+  }
+
+  return (day: CalendarDay): Modifiers => {
+    // Initialize all the modifiers to false
+    const dayFlags: Record<DayFlag, boolean> = {
+      [DayFlag.focused]: false,
+      [DayFlag.disabled]: false,
+      [DayFlag.hidden]: false,
+      [DayFlag.outside]: false,
+      [DayFlag.today]: false
+    };
+    const customModifiers: Modifiers = {};
+
+    // Find the modifiers for the given day
+    for (const name in internalModifiersMap) {
+      const days = internalModifiersMap[name as DayFlag];
+      dayFlags[name as DayFlag] = days.some((d) => d === day);
+    }
+    for (const name in customModifiersMap) {
+      customModifiers[name] = customModifiersMap[name].some((d) => d === day);
+    }
+
+    return {
+      ...dayFlags,
+      // custom modifiers should override all the previous ones
+      ...customModifiers
+    };
+  };
+}

package/src/useSelection.ts

@@ -0,0 +1,26 @@
+import { type DateLib } from "./classes/DateLib.js";
+import { useMulti } from "./selection/useMulti.js";
+import { useRange } from "./selection/useRange.js";
+import { useSingle } from "./selection/useSingle.js";
+import type { DayPickerProps } from "./types/index.js";
+import { Selection } from "./types/selection.js";
+
+export function useSelection<T extends DayPickerProps>(
+  props: T,
+  dateLib: DateLib
+): Selection<T> | undefined {
+  const single = useSingle(props, dateLib);
+  const multi = useMulti(props, dateLib);
+  const range = useRange(props, dateLib);
+
+  switch (props.mode) {
+    case "single":
+      return single;
+    case "multiple":
+      return multi;
+    case "range":
+      return range;
+    default:
+      return undefined;
+  }
+}

package/src/utc.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+import {
+  DayPicker as DayPickerComponent,
+  type DayPickerProps
+} from "./index.js";
+
+export function DayPicker(props: DayPickerProps) {
+  return <DayPickerComponent timeZone="utc" {...props} />;
+}

package/src/utils/addToRange.test.ts

@@ -0,0 +1,117 @@
+import { addToRange } from "./addToRange";
+
+describe("addToRange", () => {
+  test("add a date to an undefined range", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined);
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date to an empty range", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: undefined, to: undefined });
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date to an incomplete range with same start date", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: date, to: undefined });
+    expect(range).toEqual(undefined);
+  });
+
+  test("add a date to an incomplete range with earlier date", () => {
+    const from = new Date(2022, 0, 1);
+    const earlierDate = new Date(2021, 11, 31);
+    const range = addToRange(earlierDate, { from: from, to: undefined });
+    expect(range).toEqual({ from: earlierDate, to: from });
+  });
+
+  test("add a date to an incomplete range with later date", () => {
+    const from = new Date(2022, 0, 1);
+    const date = new Date(2022, 0, 2);
+    const range = addToRange(date, { from: from, to: undefined });
+    expect(range).toEqual({ from: from, to: date });
+  });
+
+  test("add a date to a complete range with same start and end date", () => {
+    const date = new Date(2022, 0, 1);
+    const from = date;
+    const to = date;
+    const range = addToRange(date, { from, to }, 0, 0, false);
+    expect(range).toEqual(undefined);
+  });
+
+  test("add a date to a complete range with same start date", () => {
+    const date = new Date(2022, 0, 1);
+    const to = new Date(2022, 0, 2);
+    const range = addToRange(date, { from: date, to: to });
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date to a complete range with same end date", () => {
+    const date = new Date(2022, 0, 2);
+    const from = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: from, to: date });
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date when inside the range", () => {
+    const date = new Date(2022, 0, 1);
+    const from = new Date(2021, 11, 31);
+    const to = new Date(2022, 0, 2);
+    const range = addToRange(date, { from, to });
+    expect(range).toEqual({ from, to: date });
+  });
+
+  test("add an earlier date to a complete range", () => {
+    const from = new Date(2022, 0, 1);
+    const to = new Date(2022, 0, 2);
+    const date = new Date(2021, 11, 31);
+    const range = addToRange(date, { from, to });
+    expect(range).toEqual({ from: date, to: to });
+  });
+
+  test("add a later date to a complete range", () => {
+    const date = new Date(2022, 0, 2);
+    const from = new Date(2021, 11, 31);
+    const to = new Date(2022, 0, 1);
+    const range = addToRange(date, { from, to });
+    expect(range).toEqual({ from: from, to: date });
+  });
+
+  test("add a date with min > 0", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined, 1, 0, false);
+    expect(range).toEqual({ from: date, to: undefined });
+  });
+
+  test("add a date with max > 0", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined, 0, 1, false);
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date with required set to true", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, undefined, 0, 0, true);
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("when exceeding max, set the start of the range", () => {
+    const from = new Date(2022, 0, 1);
+    const to = new Date(2022, 0, 2);
+    const date = new Date(2022, 0, 4);
+    const max = 2;
+    const range = addToRange(date, { from, to }, 0, max, false);
+    expect(range).toEqual({ from: date, to: undefined });
+  });
+
+  test("when below min, set the start of the range", () => {
+    const from = new Date(2021, 11, 20);
+    const to = new Date(2022, 0, 2);
+    const date = new Date(2021, 11, 21);
+    const min = 5;
+    const range = addToRange(date, { from, to }, min, 0, false);
+    expect(range).toEqual({ from: date, to: undefined });
+  });
+});

package/src/utils/addToRange.ts

@@ -0,0 +1,87 @@
+import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
+import type { DateRange } from "../types/index.js";
+
+/**
+ * Add a day to an existing range.
+ *
+ * The returned range takes in account the `undefined` values and if the added
+ * day is already present in the range.
+ *
+ * @group Utilities
+ */
+export function addToRange(
+  /** The date to add to the range. */
+  date: Date,
+  /** The range where to add `date`. */
+  initialRange: DateRange | undefined,
+  min = 0,
+  max = 0,
+  required = false,
+  /** @ignore */
+  dateLib: DateLib = defaultDateLib
+): DateRange | undefined {
+  const { from, to } = initialRange || {};
+  const { isSameDay, isAfter, isBefore } = dateLib;
+
+  let range: DateRange | undefined;
+
+  if (!from && !to) {
+    // the range is empty, add the date
+    range = { from: date, to: min > 0 ? undefined : date };
+  } else if (from && !to) {
+    // adding date to an incomplete range
+    if (isSameDay(from, date)) {
+      // adding a date equal to the start of the range
+      if (required) {
+        range = { from, to: undefined };
+      } else {
+        range = undefined;
+      }
+    } else if (isBefore(date, from)) {
+      // adding a date before the start of the range
+      range = { from: date, to: from };
+    } else {
+      // adding a date after the start of the range
+      range = { from, to: date };
+    }
+  } else if (from && to) {
+    // adding date to a complete range
+    if (isSameDay(from, date) && isSameDay(to, date)) {
+      // adding a date that is equal to both start and end of the range
+      if (required) {
+        range = { from, to };
+      } else {
+        range = undefined;
+      }
+    } else if (isSameDay(from, date)) {
+      // adding a date equal to the the start of the range
+      range = { from, to: min > 0 ? undefined : date };
+    } else if (isSameDay(to, date)) {
+      // adding a dare equal to the end of the range
+      range = { from: date, to: min > 0 ? undefined : date };
+    } else if (isBefore(date, from)) {
+      // adding a date before the start of the range
+      range = { from: date, to: to };
+    } else if (isAfter(date, from)) {
+      // adding a date after the start of the range
+      range = { from, to: date };
+    } else if (isAfter(date, to)) {
+      // adding a date after the end of the range
+      range = { from, to: date };
+    } else {
+      throw new Error("Invalid range");
+    }
+  }
+
+  // check for min / max
+  if (range?.from && range?.to) {
+    const diff = dateLib.differenceInCalendarDays(range.to, range.from);
+    if (max > 0 && diff > max) {
+      range = { from: date, to: undefined };
+    } else if (min > 1 && diff < min) {
+      range = { from: date, to: undefined };
+    }
+  }
+
+  return range;
+}