react-day-picker 9.6.2 → 9.6.4

package/src/useAnimation.ts

@@ -0,0 +1,236 @@
+import React, { useLayoutEffect, useRef } from "react";
+
+import { Animation } from "./UI.js";
+import type { CalendarDay } from "./classes/CalendarDay.js";
+import { CalendarMonth } from "./classes/CalendarMonth.js";
+import type { DateLib } from "./classes/DateLib.js";
+import { ClassNames } from "./types/shared.js";
+
+const asHtmlElement = (element: Element | null): HTMLElement | null => {
+  if (element instanceof HTMLElement) return element;
+  return null;
+};
+
+const queryMonthEls = (element: HTMLElement) => [
+  ...(element.querySelectorAll("[data-animated-month]") ?? [])
+];
+const queryMonthEl = (element: HTMLElement) =>
+  asHtmlElement(element.querySelector("[data-animated-month]"));
+const queryCaptionEl = (element: HTMLElement) =>
+  asHtmlElement(element.querySelector("[data-animated-caption]"));
+const queryWeeksEl = (element: HTMLElement) =>
+  asHtmlElement(element.querySelector("[data-animated-weeks]"));
+const queryNavEl = (element: HTMLElement) =>
+  asHtmlElement(element.querySelector("[data-animated-nav]"));
+const queryWeekdaysEl = (element: HTMLElement) =>
+  asHtmlElement(element.querySelector("[data-animated-weekdays]"));
+
+/** @private */
+export function useAnimation(
+  rootElRef: React.RefObject<HTMLDivElement | null>,
+  enabled: boolean,
+  {
+    classNames,
+    months,
+    focused,
+    dateLib
+  }: {
+    classNames: ClassNames;
+    months: CalendarMonth[];
+    focused: CalendarDay | undefined;
+    dateLib: DateLib;
+  }
+): void {
+  const previousRootElSnapshotRef = useRef<HTMLElement>(null);
+  const previousMonthsRef = useRef(months);
+  const animatingRef = useRef(false);
+
+  useLayoutEffect(() => {
+    // get previous months before updating the previous months ref
+    const previousMonths = previousMonthsRef.current;
+    // update previous months ref for next effect trigger
+    previousMonthsRef.current = months;
+
+    if (
+      !enabled ||
+      !rootElRef.current ||
+      // safety check because the ref can be set to anything by consumers
+      !(rootElRef.current instanceof HTMLElement) ||
+      // validation required for the animation to work as expected
+      months.length === 0 ||
+      previousMonths.length === 0 ||
+      months.length !== previousMonths.length
+    ) {
+      return;
+    }
+
+    const isSameMonth = dateLib.isSameMonth(
+      months[0].date,
+      previousMonths[0].date
+    );
+
+    const isAfterPreviousMonth = dateLib.isAfter(
+      months[0].date,
+      previousMonths[0].date
+    );
+
+    const captionAnimationClass = isAfterPreviousMonth
+      ? classNames[Animation.caption_after_enter]
+      : classNames[Animation.caption_before_enter];
+
+    const weeksAnimationClass = isAfterPreviousMonth
+      ? classNames[Animation.weeks_after_enter]
+      : classNames[Animation.weeks_before_enter];
+
+    // get previous root element snapshot before updating the snapshot ref
+    const previousRootElSnapshot = previousRootElSnapshotRef.current;
+
+    // update snapshot for next effect trigger
+    const rootElSnapshot = rootElRef.current.cloneNode(true);
+    if (rootElSnapshot instanceof HTMLElement) {
+      // if this effect is triggered while animating, we need to clean up the new root snapshot
+      // to put it in the same state as when not animating, to correctly animate the next month change
+      const currentMonthElsSnapshot = queryMonthEls(rootElSnapshot);
+      currentMonthElsSnapshot.forEach((currentMonthElSnapshot) => {
+        if (!(currentMonthElSnapshot instanceof HTMLElement)) return;
+
+        // remove the old month snapshots from the new root snapshot
+        const previousMonthElSnapshot = queryMonthEl(currentMonthElSnapshot);
+        if (
+          previousMonthElSnapshot &&
+          currentMonthElSnapshot.contains(previousMonthElSnapshot)
+        ) {
+          currentMonthElSnapshot.removeChild(previousMonthElSnapshot);
+        }
+
+        // remove animation classes from the new month snapshots
+        const captionEl = queryCaptionEl(currentMonthElSnapshot);
+        if (captionEl) {
+          captionEl.classList.remove(captionAnimationClass);
+        }
+
+        const weeksEl = queryWeeksEl(currentMonthElSnapshot);
+        if (weeksEl) {
+          weeksEl.classList.remove(weeksAnimationClass);
+        }
+      });
+
+      previousRootElSnapshotRef.current = rootElSnapshot;
+    } else {
+      previousRootElSnapshotRef.current = null;
+    }
+
+    if (
+      animatingRef.current ||
+      isSameMonth ||
+      // skip animation if a day is focused because it can cause issues to the animation and is better for a11y
+      focused
+    ) {
+      return;
+    }
+
+    const previousMonthEls =
+      previousRootElSnapshot instanceof HTMLElement
+        ? queryMonthEls(previousRootElSnapshot)
+        : [];
+
+    const currentMonthEls = queryMonthEls(rootElRef.current);
+
+    if (
+      currentMonthEls &&
+      currentMonthEls.every((el) => el instanceof HTMLElement) &&
+      previousMonthEls &&
+      previousMonthEls.every((el) => el instanceof HTMLElement)
+    ) {
+      animatingRef.current = true;
+      const cleanUpFunctions: (() => void)[] = [];
+
+      // set isolation to isolate to isolate the stacking context during animation
+      rootElRef.current.style.isolation = "isolate";
+      // set z-index to 1 to ensure the nav is clickable over the other elements being animated
+      const navEl = queryNavEl(rootElRef.current);
+      if (navEl) {
+        navEl.style.zIndex = "1";
+      }
+
+      currentMonthEls.forEach((currentMonthEl, index) => {
+        const previousMonthEl = previousMonthEls[index];
+
+        if (!previousMonthEl) {
+          return;
+        }
+
+        // animate new displayed month
+        currentMonthEl.style.position = "relative";
+        currentMonthEl.style.overflow = "hidden";
+        const captionEl = queryCaptionEl(currentMonthEl);
+        if (captionEl) {
+          captionEl.classList.add(captionAnimationClass);
+        }
+
+        const weeksEl = queryWeeksEl(currentMonthEl);
+        if (weeksEl) {
+          weeksEl.classList.add(weeksAnimationClass);
+        }
+        // animate new displayed month end
+
+        const cleanUp = () => {
+          animatingRef.current = false;
+
+          if (rootElRef.current) {
+            rootElRef.current.style.isolation = "";
+          }
+          if (navEl) {
+            navEl.style.zIndex = "";
+          }
+
+          if (captionEl) {
+            captionEl.classList.remove(captionAnimationClass);
+          }
+          if (weeksEl) {
+            weeksEl.classList.remove(weeksAnimationClass);
+          }
+          currentMonthEl.style.position = "";
+          currentMonthEl.style.overflow = "";
+          if (currentMonthEl.contains(previousMonthEl)) {
+            currentMonthEl.removeChild(previousMonthEl);
+          }
+        };
+        cleanUpFunctions.push(cleanUp);
+
+        // animate old displayed month
+        previousMonthEl.style.pointerEvents = "none";
+        previousMonthEl.style.position = "absolute";
+        previousMonthEl.style.overflow = "hidden";
+        previousMonthEl.setAttribute("aria-hidden", "true");
+
+        // hide the weekdays container of the old month and only the new one
+        const previousWeekdaysEl = queryWeekdaysEl(previousMonthEl);
+        if (previousWeekdaysEl) {
+          previousWeekdaysEl.style.opacity = "0";
+        }
+
+        const previousCaptionEl = queryCaptionEl(previousMonthEl);
+        if (previousCaptionEl) {
+          previousCaptionEl.classList.add(
+            isAfterPreviousMonth
+              ? classNames[Animation.caption_before_exit]
+              : classNames[Animation.caption_after_exit]
+          );
+          previousCaptionEl.addEventListener("animationend", cleanUp);
+        }
+
+        const previousWeeksEl = queryWeeksEl(previousMonthEl);
+        if (previousWeeksEl) {
+          previousWeeksEl.classList.add(
+            isAfterPreviousMonth
+              ? classNames[Animation.weeks_before_exit]
+              : classNames[Animation.weeks_after_exit]
+          );
+        }
+
+        currentMonthEl.insertBefore(previousMonthEl, currentMonthEl.firstChild);
+      });
+    }
+  });
+}

package/src/useCalendar.ts

@@ -0,0 +1,178 @@
+import { useEffect } from "react";
+
+import type {
+  CalendarWeek,
+  CalendarDay,
+  CalendarMonth,
+  DateLib
+} from "./classes/index.js";
+import { getDates } from "./helpers/getDates.js";
+import { getDays } from "./helpers/getDays.js";
+import { getDisplayMonths } from "./helpers/getDisplayMonths.js";
+import { getInitialMonth } from "./helpers/getInitialMonth.js";
+import { getMonths } from "./helpers/getMonths.js";
+import { getNavMonths } from "./helpers/getNavMonth.js";
+import { getNextMonth } from "./helpers/getNextMonth.js";
+import { getPreviousMonth } from "./helpers/getPreviousMonth.js";
+import { getWeeks } from "./helpers/getWeeks.js";
+import { useControlledValue } from "./helpers/useControlledValue.js";
+import type { DayPickerProps } from "./types/props.js";
+
+/**
+ * Return the calendar object to work with the calendar in custom components.
+ *
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export interface Calendar {
+  /**
+   * All the days displayed in the calendar. As opposite from
+   * {@link CalendarContext.dates}, it may return duplicated dates when shown
+   * outside the month.
+   */
+  days: CalendarDay[];
+  /** The months displayed in the calendar. */
+  weeks: CalendarWeek[];
+  /** The months displayed in the calendar. */
+  months: CalendarMonth[];
+
+  /** The next month to display. */
+  nextMonth: Date | undefined;
+  /** The previous month to display. */
+  previousMonth: Date | undefined;
+
+  /**
+   * The month where the navigation starts. `undefined` if the calendar can be
+   * navigated indefinitely to the past.
+   */
+  navStart: Date | undefined;
+  /**
+   * The month where the navigation ends. `undefined` if the calendar can be
+   * navigated indefinitely to the past.
+   */
+  navEnd: Date | undefined;
+
+  /** Navigate to the specified month. Will fire the `onMonthChange` callback. */
+  goToMonth: (month: Date) => void;
+  /**
+   * Navigate to the specified date. If the second parameter (refDate) is
+   * provided and the date is before the refDate, then the month is set to one
+   * month before the date.
+   *
+   * @param day - The date to navigate to.
+   * @param dateToCompare - Optional. If `date` is before `dateToCompare`, the
+   *   month is set to one month before the date.
+   */
+  goToDay: (day: CalendarDay) => void;
+}
+
+/** @private */
+export function useCalendar(
+  props: Pick<
+    DayPickerProps,
+    | "captionLayout"
+    | "endMonth"
+    | "startMonth"
+    | "today"
+    | "fixedWeeks"
+    | "ISOWeek"
+    | "numberOfMonths"
+    | "disableNavigation"
+    | "onMonthChange"
+    | "month"
+    | "defaultMonth"
+    | "timeZone"
+    | "broadcastCalendar"
+    // Deprecated:
+    | "fromMonth"
+    | "fromYear"
+    | "toMonth"
+    | "toYear"
+  >,
+  dateLib: DateLib
+): Calendar {
+  const [navStart, navEnd] = getNavMonths(props, dateLib);
+
+  const { startOfMonth, endOfMonth } = dateLib;
+  const initialMonth = getInitialMonth(props, dateLib);
+  const [firstMonth, setFirstMonth] = useControlledValue(
+    initialMonth,
+    // initialMonth is always computed from props.month if provided
+    props.month ? initialMonth : undefined
+  );
+
+  useEffect(() => {
+    const newInitialMonth = getInitialMonth(props, dateLib);
+    setFirstMonth(newInitialMonth);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.timeZone]);
+
+  /** The months displayed in the calendar. */
+  const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);
+
+  /** The dates displayed in the calendar. */
+  const dates = getDates(
+    displayMonths,
+    props.endMonth ? endOfMonth(props.endMonth) : undefined,
+    props,
+    dateLib
+  );
+
+  /** The Months displayed in the calendar. */
+  const months = getMonths(displayMonths, dates, props, dateLib);
+
+  /** The Weeks displayed in the calendar. */
+  const weeks = getWeeks(months);
+
+  /** The Days displayed in the calendar. */
+  const days = getDays(months);
+
+  const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
+  const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+
+  const { disableNavigation, onMonthChange } = props;
+
+  const isDayInCalendar = (day: CalendarDay) =>
+    weeks.some((week: CalendarWeek) => week.days.some((d) => d.isEqualTo(day)));
+
+  const goToMonth = (date: Date) => {
+    if (disableNavigation) {
+      return;
+    }
+    let newMonth = startOfMonth(date);
+    // if month is before start, use the first month instead
+    if (navStart && newMonth < startOfMonth(navStart)) {
+      newMonth = startOfMonth(navStart);
+    }
+    // if month is after endMonth, use the last month instead
+    if (navEnd && newMonth > startOfMonth(navEnd)) {
+      newMonth = startOfMonth(navEnd);
+    }
+    setFirstMonth(newMonth);
+    onMonthChange?.(newMonth);
+  };
+
+  const goToDay = (day: CalendarDay) => {
+    // is this check necessary?
+    if (isDayInCalendar(day)) {
+      return;
+    }
+    goToMonth(day.date);
+  };
+
+  const calendar = {
+    months,
+    weeks,
+    days,
+
+    navStart,
+    navEnd,
+
+    previousMonth,
+    nextMonth,
+
+    goToMonth,
+    goToDay
+  };
+
+  return calendar;
+}

package/src/useDayPicker.test.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+
+import { renderHook } from "@testing-library/react";
+
+import { Animation, 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]: "",
+      [Animation.weeks_after_enter]: "",
+      [Animation.weeks_before_exit]: "",
+      [Animation.weeks_before_enter]: "",
+      [Animation.weeks_after_exit]: "",
+      [Animation.caption_after_enter]: "",
+      [Animation.caption_before_exit]: "",
+      [Animation.caption_before_enter]: "",
+      [Animation.caption_after_exit]: ""
+    },
+    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

@@ -0,0 +1,93 @@
+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,
+  CustomComponents,
+  Formatters,
+  Labels,
+  Mode,
+  Modifiers,
+  Styles
+} from "./types/shared.js";
+
+/** @ignore */
+export const dayPickerContext = createContext<
+  | DayPickerContext<{
+      mode?: Mode | undefined;
+      required?: boolean | undefined;
+    }>
+  | undefined
+>(undefined);
+
+/**
+ * Represents the context for the DayPicker component, providing various
+ * properties and methods to interact with the calendar.
+ *
+ * @template T - The type of the DayPicker props, which must optionally include
+ *   `mode` and `required` properties. This type can be used to refine the type
+ *   returned by the hook.
+ */
+export type DayPickerContext<
+  T extends { mode?: Mode | undefined; required?: boolean | undefined }
+> = {
+  /** The months displayed in the calendar. */
+  months: CalendarMonth[];
+  /** The next month to display. */
+  nextMonth: Date | undefined;
+  /** The previous month to display. */
+  previousMonth: Date | undefined;
+  /** Navigate to the specified month. Will fire the `onMonthChange` callback. */
+  goToMonth: (month: Date) => void;
+  /** Returns the modifiers for the given day. */
+  getModifiers: (day: CalendarDay) => Modifiers;
+  /** The selected date(s). */
+  selected: SelectedValue<T> | undefined;
+  /** Set a selection. */
+  select: SelectHandler<T> | undefined;
+  /** Whether the given date is selected. */
+  isSelected: ((date: Date) => boolean) | undefined;
+  /** The components used internally by DayPicker. */
+  components: CustomComponents;
+  /** The class names for the UI elements. */
+  classNames: ClassNames;
+  /** The styles for the UI elements. */
+  styles: Partial<Styles> | undefined;
+  /** The labels used in the user interface. */
+  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;
+};
+
+/**
+ * Returns the context to work with `<DayPicker />` inside custom components.
+ *
+ * This hook provides access to the DayPicker context, which includes various
+ * properties and methods to interact with the DayPicker component. It must be
+ * used within a custom component.
+ *
+ * @template T - Use this type to refine the returned context type with a
+ *   specific selection mode.
+ * @returns {DayPickerContext<T>} The context to work with DayPicker.
+ * @throws {Error} If the hook is used outside of a DayPicker provider.
+ * @group Hooks
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export function useDayPicker<
+  T extends { mode?: Mode | undefined; required?: boolean | undefined }
+>(): DayPickerContext<T> {
+  const context = useContext(dayPickerContext);
+  if (context === undefined) {
+    throw new Error("useDayPicker() must be used within a custom component.");
+  }
+  return context;
+}