react-day-picker 9.6.7 → 9.7.0

package/src/DayPicker.tsx

@@ -1,9 +1,12 @@
 import React, { useCallback, useMemo, useRef } from "react";
 import type { MouseEvent, FocusEvent, KeyboardEvent, ChangeEvent } from "react";
 
+import { TZDate } from "@date-fns/tz";
+
 import { UI, DayFlag, SelectionState } from "./UI.js";
 import type { CalendarDay } from "./classes/CalendarDay.js";
 import { DateLib, defaultLocale } from "./classes/DateLib.js";
+import { createGetModifiers } from "./helpers/createGetModifiers.js";
 import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";
 import { getComponents } from "./helpers/getComponents.js";
 import { getDataAttributes } from "./helpers/getDataAttributes.js";
@@ -26,18 +29,57 @@ import { useAnimation } from "./useAnimation.js";
 import { useCalendar } from "./useCalendar.js";
 import { type DayPickerContext, dayPickerContext } from "./useDayPicker.js";
 import { useFocus } from "./useFocus.js";
-import { useGetModifiers } from "./useGetModifiers.js";
 import { useSelection } from "./useSelection.js";
 import { rangeIncludesDate } from "./utils/rangeIncludesDate.js";
 import { isDateRange } from "./utils/typeguards.js";
 
 /**
- * Render the date picker calendar.
+ * Renders the DayPicker calendar component.
  *
+ * @param initialProps - The props for the DayPicker component.
+ * @returns The rendered DayPicker component.
  * @group DayPicker
  * @see https://daypicker.dev
  */
-export function DayPicker(props: DayPickerProps) {
+export function DayPicker(initialProps: DayPickerProps) {
+  let props = initialProps;
+
+  if (props.timeZone) {
+    props = {
+      ...initialProps
+    };
+    if (props.today) {
+      props.today = new TZDate(props.today, props.timeZone);
+    }
+    if (props.month) {
+      props.month = new TZDate(props.month, props.timeZone);
+    }
+    if (props.defaultMonth) {
+      props.defaultMonth = new TZDate(props.defaultMonth, props.timeZone);
+    }
+    if (props.startMonth) {
+      props.startMonth = new TZDate(props.startMonth, props.timeZone);
+    }
+    if (props.endMonth) {
+      props.endMonth = new TZDate(props.endMonth, props.timeZone);
+    }
+    if (props.mode === "single" && props.selected) {
+      props.selected = new TZDate(props.selected, props.timeZone);
+    } else if (props.mode === "multiple" && props.selected) {
+      props.selected = props.selected?.map(
+        (date) => new TZDate(date, props.timeZone)
+      );
+    } else if (props.mode === "range" && props.selected) {
+      props.selected = {
+        from: props.selected.from
+          ? new TZDate(props.selected.from, props.timeZone)
+          : undefined,
+        to: props.selected.to
+          ? new TZDate(props.selected.to, props.timeZone)
+          : undefined
+      };
+    }
+  }
   const { components, formatters, labels, dateLib, locale, classNames } =
     useMemo(() => {
       const locale = { ...defaultLocale, ...props.locale };
@@ -82,6 +124,8 @@ export function DayPicker(props: DayPickerProps) {
   const {
     captionLayout,
     mode,
+    navLayout,
+    numberOfMonths = 1,
     onDayBlur,
     onDayClick,
     onDayFocus,
@@ -116,7 +160,7 @@ export function DayPicker(props: DayPickerProps) {
     goToMonth
   } = calendar;
 
-  const getModifiers = useGetModifiers(days, props, dateLib);
+  const getModifiers = createGetModifiers(days, props, dateLib);
 
   const {
     isSelected,
@@ -138,6 +182,8 @@ export function DayPicker(props: DayPickerProps) {
     labelGrid,
     labelMonthDropdown,
     labelNav,
+    labelPrevious,
+    labelNext,
     labelWeekday,
     labelWeekNumber,
     labelWeekNumberHeader,
@@ -301,7 +347,7 @@ export function DayPicker(props: DayPickerProps) {
           className={classNames[UI.Months]}
           style={styles?.[UI.Months]}
         >
-          {!props.hideNavigation && (
+          {!props.hideNavigation && !navLayout && (
             <components.Nav
               data-animated-nav={props.animate ? "true" : undefined}
               className={classNames[UI.Nav]}
@@ -337,6 +383,25 @@ export function DayPicker(props: DayPickerProps) {
                 displayIndex={displayIndex}
                 calendarMonth={calendarMonth}
               >
+                {navLayout === "around" &&
+                  !props.hideNavigation &&
+                  displayIndex === 0 && (
+                    <components.PreviousMonthButton
+                      type="button"
+                      className={classNames[UI.PreviousMonthButton]}
+                      tabIndex={previousMonth ? undefined : -1}
+                      aria-disabled={previousMonth ? undefined : true}
+                      aria-label={labelPrevious(previousMonth)}
+                      onClick={handlePreviousClick}
+                      data-animated-button={props.animate ? "true" : undefined}
+                    >
+                      <components.Chevron
+                        disabled={previousMonth ? undefined : true}
+                        className={classNames[UI.Chevron]}
+                        orientation={props.dir === "rtl" ? "right" : "left"}
+                      />
+                    </components.PreviousMonthButton>
+                  )}
                 <components.MonthCaption
                   data-animated-caption={props.animate ? "true" : undefined}
                   className={classNames[UI.MonthCaption]}
@@ -422,6 +487,40 @@ export function DayPicker(props: DayPickerProps) {
                     </components.CaptionLabel>
                   )}
                 </components.MonthCaption>
+                {navLayout === "around" &&
+                  !props.hideNavigation &&
+                  displayIndex === numberOfMonths - 1 && (
+                    <components.NextMonthButton
+                      type="button"
+                      className={classNames[UI.NextMonthButton]}
+                      tabIndex={nextMonth ? undefined : -1}
+                      aria-disabled={nextMonth ? undefined : true}
+                      aria-label={labelNext(nextMonth)}
+                      onClick={handleNextClick}
+                      data-animated-button={props.animate ? "true" : undefined}
+                    >
+                      <components.Chevron
+                        disabled={nextMonth ? undefined : true}
+                        className={classNames[UI.Chevron]}
+                        orientation={props.dir === "rtl" ? "left" : "right"}
+                      />
+                    </components.NextMonthButton>
+                  )}
+                {displayIndex === numberOfMonths - 1 &&
+                  navLayout === "after" &&
+                  !props.hideNavigation && (
+                    <components.Nav
+                      data-animated-nav={props.animate ? "true" : undefined}
+                      className={classNames[UI.Nav]}
+                      style={styles?.[UI.Nav]}
+                      aria-label={labelNav()}
+                      onPreviousClick={handlePreviousClick}
+                      onNextClick={handleNextClick}
+                      previousMonth={previousMonth}
+                      nextMonth={nextMonth}
+                    />
+                  )}
+
                 <components.MonthGrid
                   role="grid"
                   aria-multiselectable={mode === "multiple" || mode === "range"}
@@ -491,7 +590,7 @@ export function DayPicker(props: DayPickerProps) {
                               scope="row"
                               role="rowheader"
                             >
-                              {formatWeekNumber(week.weekNumber)}
+                              {formatWeekNumber(week.weekNumber, dateLib)}
                             </components.WeekNumber>
                           )}
                           {week.days.map((day: CalendarDay) => {

package/src/UI.ts

@@ -3,11 +3,10 @@ import { CSSProperties } from "react";
 import type { CustomComponents, ClassNames, Styles } from "./types/index.js";
 
 /**
- * The UI elements composing DayPicker. These elements are mapped to
- * {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
- * DayPicker.
+ * Enum representing the UI elements composing DayPicker. These elements are
+ * mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
  *
- * Some of these elements are extended by flags and modifiers.
+ * Some elements are extended by flags and modifiers.
  */
 export enum UI {
   /** The root component displaying the months and the navigation bar. */
@@ -71,7 +70,7 @@ export enum UI {
   YearsDropdown = "years_dropdown"
 }
 
-/** The flags for the {@link UI.Day}. */
+/** Enum representing flags for the {@link UI.Day} element. */
 export enum DayFlag {
   /** The day is disabled. */
   disabled = "disabled",
@@ -86,8 +85,8 @@ export enum DayFlag {
 }
 
 /**
- * The state that can be applied to the {@link UI.Day} element when in selection
- * mode.
+ * Enum representing selection states that can be applied to the {@link UI.Day}
+ * element in selection mode.
  */
 export enum SelectionState {
   /** The day is at the end of a selected range. */
@@ -100,7 +99,6 @@ export enum SelectionState {
   selected = "selected"
 }
 
-/** CSS classes used for animating months and captions. */
 /**
  * Enum representing different animation states for transitioning between
  * months.
@@ -125,25 +123,15 @@ export enum Animation {
 }
 
 /**
- * Deprecated UI elements and flags.
+ * Deprecated UI elements and flags from previous versions of DayPicker.
  *
- * These elements were used in previous version of DayPicker and are kept here
- * to help the transition to the new {@link UI | UI elements}.
- *
- * ```diff
- *   <DayPicker classNames={{
- * -  cell: "my-cell",
- * +  day: "my-cell",
- * -  day: "my-day",
- * +  day_button: "my-day",
- * -  day_disabled: "my-day_disabled",
- * +  disabled: "my-day_disabled",
- *    // etc.
- *   }}/>
- * ```
+ * These elements are kept for backward compatibility and to assist in
+ * transitioning to the new {@link UI} elements.
  *
  * @deprecated
  * @since 9.0.1
+ * @template T - The type of the deprecated UI element (e.g., CSS class or
+ *   style).
  * @see https://daypicker.dev/upgrading
  * @see https://daypicker.dev/docs/styling
  */

package/src/classes/CalendarDay.ts

@@ -1,11 +1,11 @@
 import { type DateLib, defaultDateLib } from "./DateLib.js";
 
 /**
- * Represent the day displayed in the calendar.
+ * Represents a day displayed in the calendar.
  *
- * In DayPicker, a `Day` is a `Date` that can be displayed in the calendar. It
- * is used as extension of the native `Date` object to provide additional
- * information about the day.
+ * In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
+ * provides additional information about the day, such as whether it belongs to
+ * the displayed month.
  */
 export class CalendarDay {
   constructor(
@@ -22,26 +22,26 @@ export class CalendarDay {
   }
 
   /**
-   * The utility functions to manipulate dates.
+   * Utility functions for manipulating dates.
    *
    * @private
    */
   readonly dateLib: DateLib;
 
   /**
-   * Whether the day is not belonging to the displayed month.
+   * Indicates whether the day does not belong to the displayed month.
    *
-   * When `outside` is `true`, use `displayMonth` to know to which month the day
-   * belongs.
+   * If `outside` is `true`, use `displayMonth` to determine the month to which
+   * the day belongs.
    */
   readonly outside: boolean;
 
   /**
-   * The months where the day is displayed.
+   * The month that is currently displayed in the calendar.
    *
-   * In DayPicker, days can fall out the displayed months (e.g. when
-   * `showOutsideDays` is `true`). This property is useful to know if the day is
-   * in the same month of the displayed month.
+   * This property is useful for determining if the day belongs to the same
+   * month as the displayed month, especially when `showOutsideDays` is
+   * enabled.
    */
   readonly displayMonth: Date;
 
@@ -49,8 +49,11 @@ export class CalendarDay {
   readonly date: Date;
 
   /**
-   * Check if the day is the same as the given day: considering if it is in the
-   * same display month.
+   * Checks if this day is equal to another `CalendarDay`, considering both the
+   * date and the displayed month.
+   *
+   * @param day The `CalendarDay` to compare with.
+   * @returns `true` if the days are equal, otherwise `false`.
    */
   isEqualTo(day: CalendarDay) {
     return (

package/src/classes/CalendarMonth.ts

@@ -1,15 +1,20 @@
 import { CalendarWeek } from "./CalendarWeek.js";
 
-/** Represent a month in a calendar year. Contains the weeks within the month. */
+/**
+ * Represents a month in a calendar year.
+ *
+ * A `CalendarMonth` contains the weeks within the month and the date of the
+ * month.
+ */
 export class CalendarMonth {
   constructor(month: Date, weeks: CalendarWeek[]) {
     this.date = month;
     this.weeks = weeks;
   }
 
-  /** The date of the month. */
+  /** The date representing the first day of the month. */
   date: Date;
 
-  /** The weeks within the month. */
+  /** The weeks that belong to this month. */
   weeks: CalendarWeek[];
 }

package/src/classes/CalendarWeek.ts

@@ -1,13 +1,19 @@
 import { CalendarDay } from "./CalendarDay.js";
 
-/** Represent a week in a calendar month. */
+/**
+ * Represents a week in a calendar month.
+ *
+ * A `CalendarWeek` contains the days within the week and the week number.
+ */
 export class CalendarWeek {
   constructor(weekNumber: number, days: CalendarDay[]) {
     this.days = days;
     this.weekNumber = weekNumber;
   }
+
   /** The number of the week within the year. */
   weekNumber: number;
-  /** The days within the week. */
+
+  /** The days that belong to this week. */
   days: CalendarDay[];
 }