react-day-picker 9.0.7 → 9.0.9

package/src/types/shared.ts

@@ -10,6 +10,7 @@ import {
   formatMonthDropdown,
   formatWeekdayName,
   formatWeekNumber,
+  formatWeekNumberHeader,
   formatYearCaption,
   formatYearDropdown
 } from "../formatters/index.js";
@@ -98,20 +99,22 @@ export type DateLib = typeof dateLib;
 export type Formatters = {
   /** Format the caption of a month grid. */
   formatCaption: typeof formatCaption;
-  /** @deprecated Use {@link Formatters.formatCaption} instead. */
-  formatMonthCaption: typeof formatMonthCaption;
-  /** Format the label in the month dropdown. */
-  formatMonthDropdown: typeof formatMonthDropdown;
-  /** @deprecated Use {@link Formatters.formatYearDropdown} instead. */
-  formatYearCaption: typeof formatYearCaption;
-  /** Format the label in the year dropdown. */
-  formatYearDropdown: typeof formatYearDropdown;
   /** Format the day in the day cell. */
   formatDay: typeof formatDay;
+  /** Format the label in the month dropdown. */
+  formatMonthDropdown: typeof formatMonthDropdown;
+  /** @deprecated Use {@link Formatters.formatCaption} instead. */
+  formatMonthCaption: typeof formatMonthCaption;
   /** Format the week number. */
   formatWeekNumber: typeof formatWeekNumber;
+  /** Format the header of the week number column. */
+  formatWeekNumberHeader: typeof formatWeekNumberHeader;
   /** Format the week day name in the header. */
   formatWeekdayName: typeof formatWeekdayName;
+  /** Format the label in the year dropdown. */
+  formatYearDropdown: typeof formatYearDropdown;
+  /** @deprecated Use {@link Formatters.formatYearDropdown} instead. */
+  formatYearCaption: typeof formatYearCaption;
 };
 
 /** Map of functions to translate ARIA labels for the relative elements. */

package/src/useCalendar.ts

@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-
 import type {
   CalendarWeek,
   CalendarDay,
@@ -14,6 +12,7 @@ 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";
 import type { DateLib } from "./types/shared.js";
 
@@ -88,51 +87,16 @@ export function useCalendar(
   >,
   dateLib: DateLib
 ): Calendar {
-  const {
-    fromYear,
-    toYear,
-    startMonth,
-    endMonth,
-    today,
-    numberOfMonths,
-    month,
-    defaultMonth
-  } = props;
   const [navStart, navEnd] = getNavMonths(props, dateLib);
 
   const { startOfMonth, endOfMonth } = dateLib;
 
-  const initialDisplayMonth = getInitialMonth(props, dateLib);
-
-  // The first month displayed in the calendar
-  const [firstMonth, setFirstMonth] = useState(initialDisplayMonth);
-
-  useEffect(() => {
-    const initialDisplayMonth = getInitialMonth(
-      {
-        fromYear,
-        toYear,
-        startMonth,
-        endMonth,
-        month,
-        defaultMonth,
-        today,
-        numberOfMonths
-      },
-      dateLib
-    );
-    setFirstMonth(initialDisplayMonth);
-  }, [
-    dateLib,
-    defaultMonth,
-    endMonth,
-    fromYear,
-    month,
-    numberOfMonths,
-    startMonth,
-    toYear,
-    today
-  ]);
+  const initialMonth = getInitialMonth(props, dateLib);
+
+  const [firstMonth, setFirstMonth] = useControlledValue(
+    initialMonth,
+    props.month ? startOfMonth(props.month) : undefined
+  );
 
   /** The months displayed in the calendar. */
   const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);

package/src/useDayPicker.ts

@@ -4,7 +4,14 @@ 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 { Modifiers } from "./types/shared.js";
+import {
+  ClassNames,
+  CustomComponents,
+  Formatters,
+  Labels,
+  Modifiers,
+  Styles
+} from "./types/shared.js";
 
 /** @private */
 export const dayPickerContext = createContext<
@@ -28,6 +35,16 @@ export type DayPickerContext<T extends DayPickerProps> = {
   select: SelectHandler<T> | undefined;
   /** Whether the given date is selected. */
   isSelected: ((date: Date) => boolean) | undefined;
+  /** The components used internally by DayP. */
+  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 UI. */
+  labels: Labels;
+  /** The formatters used to format the UI elements. */
+  formatters: Formatters;
 };
 
 /**

package/src/useGetModifiers.tsx

@@ -17,7 +17,7 @@ export function useGetModifiers(
 
   const { isSameDay, isSameMonth, Date } = dateLib;
 
-  const internal: Record<DayFlag, CalendarDay[]> = {
+  const internalModifiersMap: Record<DayFlag, CalendarDay[]> = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
     [DayFlag.disabled]: [],
@@ -25,9 +25,9 @@ export function useGetModifiers(
     [DayFlag.today]: []
   };
 
-  const custom: Record<string, CalendarDay[]> = {};
+  const customModifiersMap: Record<string, CalendarDay[]> = {};
 
-  const selection: Record<SelectionState, CalendarDay[]> = {
+  const selectionModifiersMap: Record<SelectionState, CalendarDay[]> = {
     [SelectionState.range_end]: [],
     [SelectionState.range_middle]: [],
     [SelectionState.range_start]: [],
@@ -49,10 +49,10 @@ export function useGetModifiers(
 
     const isToday = isSameDay(date, today ?? new Date());
 
-    if (isOutside) internal.outside.push(day);
-    if (isDisabled) internal.disabled.push(day);
-    if (isHidden) internal.hidden.push(day);
-    if (isToday) internal.today.push(day);
+    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) {
@@ -62,10 +62,10 @@ export function useGetModifiers(
           ? dateMatchModifiers(date, modifierValue, dateLib)
           : false;
         if (!isMatch) return;
-        if (custom[name]) {
-          custom[name].push(day);
+        if (customModifiersMap[name]) {
+          customModifiersMap[name].push(day);
         } else {
-          custom[name] = [day];
+          customModifiersMap[name] = [day];
         }
       });
     }
@@ -89,16 +89,16 @@ export function useGetModifiers(
     const customModifiers: Modifiers = {};
 
     // Find the modifiers for the given day
-    for (const name in internal) {
-      const days = internal[name as DayFlag];
+    for (const name in internalModifiersMap) {
+      const days = internalModifiersMap[name as DayFlag];
       dayFlags[name as DayFlag] = days.some((d) => d === day);
     }
-    for (const name in selection) {
-      const days = selection[name as SelectionState];
+    for (const name in selectionModifiersMap) {
+      const days = selectionModifiersMap[name as SelectionState];
       selectionStates[name as SelectionState] = days.some((d) => d === day);
     }
-    for (const name in custom) {
-      customModifiers[name] = custom[name].some((d) => d === day);
+    for (const name in customModifiersMap) {
+      customModifiers[name] = customModifiersMap[name].some((d) => d === day);
     }
 
     return {

package/src/utils/dateMatchModifiers.ts

@@ -1,3 +1,4 @@
+import { dateLib as defaultDateLib } from "../lib/dateLib.js";
 import type { DateLib, Matcher } from "../types/index.js";
 
 import { rangeIncludesDate } from "./rangeIncludesDate.js";
@@ -15,7 +16,7 @@ import {
  * {@link Matcher}.
  *
  * ```tsx
- * const day = new Date(2022, 5, 19);
+ * const date = new Date(2022, 5, 19);
  * const matcher1: DateRange = {
  *  from: new Date(2021, 12, 21),
  *  to: new Date(2021, 12, 30)
@@ -24,7 +25,7 @@ import {
  *  from: new Date(2022, 5, 1),
  *  to: new Date(2022, 5, 23)
  * }
- * const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+ * const dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
  * ```
  *
  * @group Utilities
@@ -32,7 +33,7 @@ import {
 export function dateMatchModifiers(
   date: Date,
   matchers: Matcher | Matcher[],
-  dateLib: DateLib
+  dateLib: DateLib = defaultDateLib
 ): boolean {
   const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers;
   const { isSameDay, differenceInCalendarDays, isAfter } = dateLib;
@@ -79,3 +80,9 @@ export function dateMatchModifiers(
     return false;
   });
 }
+
+/**
+ * @private
+ * @deprecated Use {@link dateMatchModifiers} instead.
+ */
+export const isMatch = dateMatchModifiers;

package/src/utils/typeguards.ts

@@ -57,7 +57,11 @@ export function isDayOfWeekType(value: unknown): value is DayOfWeek {
   return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
 }
 
-/** Returns true if `value` is an array of valid dates. */
+/**
+ * Returns true if `value` is an array of valid dates.
+ *
+ * @private
+ */
 export function isDatesArray(
   value: unknown,
   dateLib: DateLib

package/website/docs/docs/styling.mdx

@@ -79,7 +79,7 @@ The following table lists the CSS variables used by DayPicker inside the `.rdp-r
 | `--rdp-nav-height`                        | The height of the navigation bar.                                             |
 | `--rdp-range_middle-background-color`     | The color of the background for days in the middle of a range.                |
 | `--rdp-range_middle-font`                 | The font for days in the middle of a range.                                   |
-| `-- `                                     | The color of the text for days in the middle of a range.                      |
+| `--rdp-range_middle-foreground-color`     | The color of the text for days in the middle of a range.                      |
 | `--rdp-range_start-color`                 | The color of the range text at the start of the range.                        |
 | `--rdp-range_start-background`            | Used for the background of the start of the selected range.                   |
 | `--rdp-range_start-date-background-color` | The background color of the date at the start of the selected range.          |

package/website/docs/guides/input-fields.mdx

@@ -16,7 +16,7 @@ Browsers offer [native date pickers](https://developer.mozilla.org/en-US/docs/We
 
 ### Input with Inline Calendar
 
-See also the [full source code](https://github.com/gpbl/react-day-picker/blob/main/website/examples/Input.tsx) and [the unit tests](https://github.com/gpbl/react-day-picker/blob/main/website/examples/Input.test.tsx) for this example.
+See also the [full source code](https://github.com/gpbl/react-day-picker/blob/main/examples/Input.tsx) and [the unit tests](https://github.com/gpbl/react-day-picker/blob/main/examples/Input.test.tsx) for this example.
 
 <BrowserWindow>
   <Examples.Input />

package/website/docs/upgrading.mdx

@@ -259,7 +259,7 @@ If you are using TypeScript, some typings have been deprecated in favor of clari
 + import type { PropsBase } from 'react-day-picker';
 ```
 
-See also the source of [types-deprecated.ts](https://github.com/gpbl/react-day-picker/blob/next/src/types-deprecated.ts).
+See also the source of [types/deprecated.ts](https://github.com/gpbl/react-day-picker/blob/next/src/types/deprecated.ts).
 
 <details>
   <summary>**List of Deprecated Types**</summary>