react-day-picker 9.1.0 → 9.1.2

package/src/selection/useMulti.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { useControlledValue } from "../helpers/useControlledValue.js";
+import type { DateLib } from "../lib/dateLib.js";
 import type {
-  DateLib,
   DayPickerProps,
   Modifiers,
   PropsMulti,
@@ -19,11 +19,13 @@ export function useMulti<T extends DayPickerProps>(
     onSelect
   } = props as PropsMulti;
 
-  const [selected, setSelected] = useControlledValue(
+  const [internallySelected, setSelected] = useControlledValue(
     initiallySelected,
     onSelect ? initiallySelected : undefined
   );
 
+  const selected = !onSelect ? internallySelected : initiallySelected;
+
   const { isSameDay } = dateLib;
 
   const isSelected = (date: Date) => {
@@ -57,7 +59,9 @@ export function useMulti<T extends DayPickerProps>(
         newDates = [...newDates, triggerDate];
       }
     }
-    setSelected(newDates);
+    if (!onSelect) {
+      setSelected(newDates);
+    }
     onSelect?.(newDates, triggerDate, modifiers, e);
     return newDates;
   };

package/src/selection/useRange.test.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { DayPickerProps } from "react-day-picker/types";
+
 import { act, renderHook } from "@/test/render";
 
 import { dateLib } from "../lib";
@@ -111,4 +113,43 @@ describe("useRange", () => {
       to: new Date(2023, 6, 10)
     });
   });
+  it("uses the selected value from props when onSelect is provided", () => {
+    const mockOnSelect = jest.fn();
+    const selectedRange = {
+      from: new Date(2023, 9, 1),
+      to: new Date(2023, 9, 5)
+    };
+    const props: DayPickerProps = {
+      mode: "range",
+
+      selected: selectedRange,
+      onSelect: mockOnSelect
+    };
+
+    const { result } = renderHook(() => useRange(props, dateLib));
+
+    expect(result.current.selected).toBe(selectedRange);
+  });
+
+  it("uses the internally selected value when onSelect is not provided", () => {
+    const initialSelectedRange = {
+      from: new Date(2023, 9, 1),
+      to: new Date(2023, 9, 5)
+    };
+    const props: DayPickerProps = {
+      mode: "range",
+      selected: initialSelectedRange
+    };
+
+    const { result } = renderHook(() => useRange(props, dateLib));
+
+    act(() => {
+      result.current.select?.(new Date(2023, 9, 6), {}, {} as React.MouseEvent);
+    });
+
+    expect(result.current.selected).toEqual({
+      from: new Date(2023, 9, 1),
+      to: new Date(2023, 9, 6)
+    });
+  });
 });

package/src/selection/useRange.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { useControlledValue } from "../helpers/useControlledValue.js";
+import type { DateLib } from "../lib/index.js";
 import type {
-  DateLib,
   DayPickerProps,
   Modifiers,
   PropsRange,
@@ -23,11 +23,13 @@ export function useRange<T extends DayPickerProps>(
     onSelect
   } = props as PropsRange;
 
-  const [selected, setSelected] = useControlledValue(
+  const [internallySelected, setSelected] = useControlledValue(
     initiallySelected,
     onSelect ? initiallySelected : undefined
   );
 
+  const selected = !onSelect ? internallySelected : initiallySelected;
+
   const isSelected = (date: Date) =>
     selected && rangeIncludesDate(selected, date, false, dateLib);
 
@@ -58,7 +60,9 @@ export function useRange<T extends DayPickerProps>(
       }
     }
 
-    setSelected(newRange);
+    if (!onSelect) {
+      setSelected(newRange);
+    }
     onSelect?.(newRange, triggerDate, modifiers, e);
 
     return newRange;

package/src/selection/useSingle.test.tsx

@@ -0,0 +1,39 @@
+import { dateLib } from "react-day-picker/lib";
+
+import { act, renderHook } from "@/test/render";
+
+import { DayPickerProps } from "../types";
+
+import { useSingle } from "./useSingle";
+
+describe("useSingle", () => {
+  it("uses the selected value from props when onSelect is provided", () => {
+    const mockOnSelect = jest.fn();
+    const selectedDate = new Date(2023, 9, 1);
+    const props: DayPickerProps = {
+      mode: "single",
+      selected: selectedDate,
+      onSelect: mockOnSelect
+    };
+
+    const { result } = renderHook(() => useSingle(props, dateLib));
+
+    expect(result.current.selected).toBe(selectedDate);
+  });
+
+  it("uses the internally selected value when onSelect is not provided", () => {
+    const initialSelectedDate = new Date(2023, 9, 1);
+    const props: DayPickerProps = {
+      mode: "single",
+      selected: initialSelectedDate
+    };
+
+    const { result } = renderHook(() => useSingle(props, dateLib));
+
+    act(() => {
+      result.current.select?.(new Date(2023, 9, 2), {}, {} as React.MouseEvent);
+    });
+
+    expect(result.current.selected).toEqual(new Date(2023, 9, 2));
+  });
+});

package/src/selection/useSingle.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { useControlledValue } from "../helpers/useControlledValue.js";
+import type { DateLib } from "../lib/index.js";
 import type {
-  DateLib,
   DayPickerProps,
   Modifiers,
   PropsSingle,
@@ -27,11 +27,13 @@ export function useSingle<T extends DayPickerProps>(
     onSelect
   } = props as PropsSingle;
 
-  const [selected, setSelected] = useControlledValue(
+  const [internallySelected, setSelected] = useControlledValue(
     initiallySelected,
     onSelect ? initiallySelected : undefined
   );
 
+  const selected = !onSelect ? internallySelected : initiallySelected;
+
   const { isSameDay } = dateLib;
 
   const isSelected = (compareDate: Date) => {
@@ -48,7 +50,9 @@ export function useSingle<T extends DayPickerProps>(
       // If the date is the same, clear the selection.
       newDate = undefined;
     }
-    setSelected(newDate);
+    if (!onSelect) {
+      setSelected(newDate);
+    }
     if (required) {
       onSelect?.(newDate as Date, triggerDate, modifiers, e);
     } else {

package/src/types/props.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { DeprecatedUI } from "../UI.js";
-import type { Locale } from "../lib/dateLib.js";
+import type { Locale, DateLib } from "../lib/dateLib.js";
 
 import type {
   ClassNames,
@@ -16,8 +16,7 @@ import type {
   DayEventHandler,
   Modifiers,
   DateRange,
-  Mode,
-  DateLib
+  Mode
 } from "./shared.js";
 
 /**
@@ -256,6 +255,21 @@ export interface PropsBase {
    * @see https://en.wikipedia.org/wiki/ISO_week_date
    */
   ISOWeek?: boolean;
+  /**
+   * The time zone (IANA or UTC offset) to use in the calendar (experimental).
+   * See
+   * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
+   * for the possible values.
+   *
+   * Time zones are supported by the `TZDate` object by the
+   * [@date-fns/tz](https://github.com/date-fns/tz) package. Please refer to the
+   * package documentation for more information.
+   *
+   * @since 9.1.1
+   * @experimental
+   * @see https://daypicker.dev/docs/localization#time-zone
+   */
+  timeZone?: string | undefined;
   /**
    * Change the components used for rendering the calendar elements.
    *
@@ -338,15 +352,16 @@ export interface PropsBase {
   /** Add the language tag to the container element. */
   lang?: HTMLDivElement["lang"];
   /**
-   * The locale object used to localize dates. Pass a locale from `date-fns` to
-   * localize the calendar.
+   * The locale object used to localize dates. Pass a locale from
+   * `react-day-picker/locale` to localize the calendar.
    *
    * @example
-   *   import { es } from "date-fns/locale";
+   *   import { es } from "react-day-picker/locale";
    *   <DayPicker locale={es} />
    *
    * @defaultValue enUS - The English locale default of `date-fns`.
    * @see https://daypicker.dev/docs/localization
+   * @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
    */
   locale?: Partial<Locale> | undefined;
   /**
@@ -470,7 +485,16 @@ export interface PropsBase {
   onDayTouchStart?: DayEventHandler<React.TouchEvent>;
 }
 
-/** Shared handler type for onSelect events */
+/**
+ * Shared handler type for `onSelect` callback when a selection mode is set.
+ *
+ * @template T - The type of the selected item.
+ * @callback OnSelectHandler
+ * @param {T} selected - The selected item after the event.
+ * @param {Date} triggerDate - The date when the event was triggered.
+ * @param {Modifiers} modifiers - The modifiers associated with the event.
+ * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.
+ */
 export type OnSelectHandler<T> = (
   selected: T,
   triggerDate: Date,

package/src/types/selection.ts

@@ -1,5 +1,5 @@
 import type { DayPickerProps } from "./props.js";
-import type { DateRange, Modifiers } from "./shared.js";
+import type { DateRange, Mode, Modifiers } from "./shared.js";
 
 export type Selection<T extends DayPickerProps> = {
   /** The selected date(s). */
@@ -25,25 +25,28 @@ export type SelectedValue<T> = T extends { mode: "single"; required?: boolean }
       ? SelectedRange<T>
       : undefined;
 
-export type SelectHandlerSingle<T extends DayPickerProps> = (
-  triggerDate: Date,
-  modifiers: Modifiers,
-  e: React.MouseEvent | React.KeyboardEvent
-) => T["required"] extends true ? Date : Date | undefined;
+export type SelectHandlerSingle<T extends { required?: boolean | undefined }> =
+  (
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => T["required"] extends true ? Date : Date | undefined;
 
-export type SelectHandlerMulti<T extends DayPickerProps> = (
+export type SelectHandlerMulti<T extends { required?: boolean | undefined }> = (
   triggerDate: Date,
   modifiers: Modifiers,
   e: React.MouseEvent | React.KeyboardEvent
 ) => T["required"] extends true ? Date[] : Date[] | undefined;
 
-export type SelectHandlerRange<T extends DayPickerProps> = (
+export type SelectHandlerRange<T extends { required?: boolean | undefined }> = (
   triggerDate: Date,
   modifiers: Modifiers,
   e: React.MouseEvent | React.KeyboardEvent
 ) => T["required"] extends true ? DateRange : DateRange | undefined;
 
-export type SelectHandler<T extends DayPickerProps> = T extends {
+export type SelectHandler<
+  T extends { mode?: Mode | undefined; required?: boolean | undefined }
+> = T extends {
   mode: "single";
 }
   ? SelectHandlerSingle<T>

package/src/types/shared.ts

@@ -26,7 +26,6 @@ import {
   labelWeekNumberHeader,
   labelYearDropdown
 } from "../labels/index.js";
-import { dateLib } from "../lib/index.js";
 
 /**
  * Selection modes supported by DayPicker.
@@ -104,9 +103,6 @@ export type CustomComponents = {
   YearsDropdown: typeof components.YearsDropdown;
 };
 
-/** @private */
-export type DateLib = typeof dateLib;
-
 /** Represent a map of formatters used to render localized content. */
 export type Formatters = {
   /** Format the caption of a month grid. */
@@ -323,15 +319,27 @@ export type Styles = {
 };
 
 /**
- * The modifiers that are matching a day in the calendar.
+ * Represents the modifiers that match a specific day in the calendar.
+ *
+ * - Retrieve modifiers using the {@link OnSelectHandler} via the `onSelect` prop,
+ *   or within custom components using the {@link useDayPicker} hook.
+ * - Includes built-in modifiers from {@link DayFlag} and {@link SelectionState}.
+ * - Add custom modifiers using the `modifiers` prop.
  *
  * @example
  *   const modifiers: Modifiers = {
- *     today: false, // the day is not today
- *     selected: true, // the day is selected
- *     weekend: false // the day is not in the weekend
- *     // etc
+ *   today: false, // the day is not today
+ *   selected: true, // the day is selected
+ *   disabled: false, // the day is not disabled
+ *   outside: false, // the day is not outside the month
+ *   focused: false, // the day is not focused
+ *
+ *   weekend: false // custom modifier example for matching a weekend
+ *   booked: true // custom modifier example for matching a booked day
+ *   available: false // custom modifier example for matching an available day
  *   };
+ *
+ * @see https://daypicker.dev/guides/custom-modifiers
  */
 export type Modifiers = Record<string, boolean>;
 

package/src/useCalendar.ts

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 import type {
   CalendarWeek,
   CalendarDay,
@@ -13,8 +15,8 @@ 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 { DateLib } from "./lib/index.js";
 import type { DayPickerProps } from "./types/props.js";
-import type { DateLib } from "./types/shared.js";
 
 /**
  * Return the calendar object to work with the calendar in custom components.
@@ -79,6 +81,7 @@ export function useCalendar(
     | "onMonthChange"
     | "month"
     | "defaultMonth"
+    | "timeZone"
     // Deprecated:
     | "fromMonth"
     | "fromYear"
@@ -90,14 +93,18 @@ export function useCalendar(
   const [navStart, navEnd] = getNavMonths(props, dateLib);
 
   const { startOfMonth, endOfMonth } = dateLib;
-
   const initialMonth = getInitialMonth(props, dateLib);
-
   const [firstMonth, setFirstMonth] = useControlledValue(
     initialMonth,
     props.month ? startOfMonth(props.month) : 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);
 

package/src/useDayPicker.ts

@@ -2,23 +2,37 @@ import { createContext, useContext } from "react";
 
 import { CalendarDay } from "./classes/CalendarDay.js";
 import { CalendarMonth } from "./classes/CalendarMonth.js";
-import type { 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";
 
 /** @private */
 export const dayPickerContext = createContext<
-  DayPickerContext<DayPickerProps> | undefined
+  | DayPickerContext<{
+      mode?: Mode | undefined;
+      required?: boolean | undefined;
+    }>
+  | undefined
 >(undefined);
 
-export type DayPickerContext<T extends DayPickerProps> = {
+/**
+ * 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. */
@@ -48,15 +62,25 @@ export type DayPickerContext<T extends DayPickerProps> = {
 };
 
 /**
- * Return the context to work with `<DayPicker />` inside custom components.
+ * 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 DayPickerProps>(props?: T) {
+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 as DayPickerContext<T>;
+  return context;
 }

package/src/useFocus.ts

@@ -3,10 +3,10 @@ import { useState } from "react";
 import type { CalendarDay } from "./classes/index.js";
 import { calculateFocusTarget } from "./helpers/calculateFocusTarget.js";
 import { getNextFocus } from "./helpers/getNextFocus.js";
+import type { DateLib } from "./lib/index.js";
 import type {
   MoveFocusBy,
   MoveFocusDir,
-  DateLib,
   DayPickerProps,
   Modifiers
 } from "./types/index.js";

package/src/useGetModifiers.tsx

@@ -1,6 +1,9 @@
+import { TZDate } from "@date-fns/tz";
+
 import { DayFlag, SelectionState } from "./UI.js";
 import { CalendarDay } from "./classes/index.js";
-import type { DateLib, DayPickerProps, Modifiers } from "./types/index.js";
+import type { DateLib } from "./lib/index.js";
+import type { DayPickerProps, Modifiers } from "./types/index.js";
 import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
 
 /**
@@ -15,7 +18,7 @@ export function useGetModifiers(
 ) {
   const { disabled, hidden, modifiers, showOutsideDays, today } = props;
 
-  const { isSameDay, isSameMonth, Date } = dateLib;
+  const { isSameDay, isSameMonth } = dateLib;
 
   const internalModifiersMap: Record<DayFlag, CalendarDay[]> = {
     [DayFlag.focused]: [],
@@ -47,7 +50,15 @@ export function useGetModifiers(
       Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
       (!showOutsideDays && isOutside);
 
-    const isToday = isSameDay(date, today ?? new Date());
+    const isToday = isSameDay(
+      date,
+      today ??
+        (props.timeZone
+          ? TZDate.tz(props.timeZone)
+          : dateLib.Date
+            ? new dateLib.Date()
+            : new Date())
+    );
 
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);

package/src/useSelection.ts

@@ -1,7 +1,8 @@
+import { type DateLib } from "./lib/index.js";
 import { useMulti } from "./selection/useMulti.js";
 import { useRange } from "./selection/useRange.js";
 import { useSingle } from "./selection/useSingle.js";
-import type { DateLib, DayPickerProps } from "./types/index.js";
+import type { DayPickerProps } from "./types/index.js";
 import { Selection } from "./types/selection.js";
 
 export function useSelection<T extends DayPickerProps>(

package/src/utc.tsx

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

package/src/utils/addToRange.ts

@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateRange, DateLib } from "../types/index.js";
+import { dateLib as defaultDateLib, type DateLib } from "../lib/index.js";
+import type { DateRange } from "../types/index.js";
 
 /**
  * Add a day to an existing range.

package/src/utils/dateMatchModifiers.ts

@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib/dateLib.js";
-import type { DateLib, Matcher } from "../types/index.js";
+import { dateLib as defaultDateLib, type DateLib } from "../lib/dateLib.js";
+import type { Matcher } from "../types/index.js";
 
 import { rangeIncludesDate } from "./rangeIncludesDate.js";
 import {

package/src/utils/rangeIncludesDate.ts

@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib/index.js";
-import type { DateRange, DateLib } from "../types/index.js";
+import { dateLib as defaultDateLib, type DateLib } from "../lib/index.js";
+import type { DateRange } from "../types/index.js";
 
 /**
  * Determines whether a given date is inside a specified date range.

package/src/utils/typeguards.ts

@@ -1,8 +1,8 @@
+import type { DateLib } from "../lib/index.js";
 import type {
   DateAfter,
   DateBefore,
   DateInterval,
-  DateLib,
   DateRange,
   DayOfWeek
 } from "../types/index.js";

package/website/docs/development/code-of-conduct.md

@@ -1,11 +1,9 @@
 ---
-draft: true
+hide_title: true
+title: Code Of Conduct
+sidebar_position: 2
 ---
 
-# Code Of Conduct
+import CodeOfConduct from "../../../.github/CODE_OF_CONDUCT.md";
 
-:::info Draft
-
-This documentation is still a work in progress. If you have any questions, ask to the [discussions](https://github.com/gpbl/react-day-picker/discussions) page on Github.
-
-:::
+<CodeOfConduct />

package/website/docs/development/contributing.md

@@ -0,0 +1,9 @@
+---
+hide_title: true
+title: Contributing
+sidebar_position: 1
+---
+
+import Contributing from "../../../CONTRIBUTING.md";
+
+<Contributing />