react-day-picker 9.6.2 → 9.6.3

package/src/helpers/getYearOptions.ts

@@ -0,0 +1,34 @@
+import type { DateLib } from "../classes/DateLib.js";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { Formatters } from "../types/index.js";
+
+/** Return the years to show in the dropdown. */
+export function getYearOptions(
+  navStart: Date | undefined,
+  navEnd: Date | undefined,
+  formatters: Pick<Formatters, "formatYearDropdown">,
+  dateLib: DateLib
+): DropdownOption[] | undefined {
+  if (!navStart) return undefined;
+  if (!navEnd) return undefined;
+  const { startOfYear, endOfYear, addYears, getYear, isBefore, isSameYear } =
+    dateLib;
+  const firstNavYear = startOfYear(navStart);
+  const lastNavYear = endOfYear(navEnd);
+  const years: Date[] = [];
+
+  let year = firstNavYear;
+  while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
+    years.push(year);
+    year = addYears(year, 1);
+  }
+
+  return years.map((year) => {
+    const label = formatters.formatYearDropdown(year, dateLib);
+    return {
+      value: getYear(year),
+      label,
+      disabled: false
+    };
+  });
+}

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+// Only export helpers that can be useful to other developers.
+export * from "./getDefaultClassNames.js";

package/src/helpers/startOfBroadcastWeek.test.ts

@@ -0,0 +1,24 @@
+import { defaultDateLib } from "../classes";
+
+import { startOfBroadcastWeek } from "./startOfBroadcastWeek";
+
+describe("startOfBroadcastWeek", () => {
+  test.each([
+    [new Date(2023, 0, 1), new Date(2022, 11, 26)], // January, Sunday
+    [new Date(2023, 1, 1), new Date(2023, 0, 30)], // February, Wednesday
+    [new Date(2023, 2, 1), new Date(2023, 1, 27)], // March, Wednesday
+    [new Date(2023, 3, 1), new Date(2023, 2, 27)], // April, Saturday
+    [new Date(2023, 4, 1), new Date(2023, 4, 1)], // May, Monday
+    [new Date(2023, 5, 1), new Date(2023, 4, 29)], // June, Thursday
+    [new Date(2023, 6, 1), new Date(2023, 5, 26)], // July, Saturday
+    [new Date(2023, 7, 1), new Date(2023, 6, 31)], // August, Tuesday
+    [new Date(2023, 8, 1), new Date(2023, 7, 28)], // September, Friday
+    [new Date(2023, 9, 1), new Date(2023, 8, 25)], // October, Sunday
+    [new Date(2023, 10, 1), new Date(2023, 9, 30)], // November, Wednesday
+    [new Date(2023, 11, 1), new Date(2023, 10, 27)] // December, Friday
+  ])("startOfBroadcastWeek(%s) should return %s", (inputDate, expectedDate) => {
+    expect(startOfBroadcastWeek(inputDate, defaultDateLib)).toEqual(
+      expectedDate
+    );
+  });
+});

package/src/helpers/startOfBroadcastWeek.ts

@@ -0,0 +1,19 @@
+import type { DateLib } from "../classes/index.js";
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+export function startOfBroadcastWeek(date: Date, dateLib: DateLib): Date {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}

package/src/helpers/useControlledValue.test.ts

@@ -0,0 +1,45 @@
+import { act, renderHook } from "@testing-library/react";
+
+import { useControlledValue } from "./useControlledValue";
+
+describe("when the value is controlled", () => {
+  const defaultValue: string | undefined = "foo"; // not controlled
+  const controlledValue: string | undefined = "bar"; // now controlled
+  test("should return the controlled value", () => {
+    const { result } = renderHook(() =>
+      useControlledValue<string>(defaultValue, controlledValue)
+    );
+    expect(result.current[0]).toBe(controlledValue);
+  });
+  describe("when setting a new value", () => {
+    const newValue = "taz";
+    test("should return the controlled value instead", async () => {
+      const { result } = renderHook(() =>
+        useControlledValue<string>(defaultValue, controlledValue)
+      );
+      act(() => result.current[1](newValue));
+      expect(result.current[0]).toBe(controlledValue);
+    });
+  });
+});
+
+describe("when the value is not controlled", () => {
+  const defaultValue = "foo";
+  const controlledValue = undefined;
+  test("should return the value", () => {
+    const { result } = renderHook(() =>
+      useControlledValue<string>(defaultValue, controlledValue)
+    );
+    expect(result.current[0]).toBe(defaultValue);
+  });
+  describe("when setting a new value", () => {
+    const newValue = "bar";
+    test("should return the new value", async () => {
+      const { result } = renderHook(() =>
+        useControlledValue<string>(defaultValue, controlledValue)
+      );
+      act(() => result.current[1](newValue));
+      expect(result.current[0]).toBe(newValue);
+    });
+  });
+});

package/src/helpers/useControlledValue.ts

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
+
+/**
+ * A custom hook for managing both controlled and uncontrolled component states.
+ *
+ * @example
+ *   // Uncontrolled usage
+ *   const [value, setValue] = useControlledValue(0, undefined);
+ *
+ *   // Controlled usage
+ *   const [value, setValue] = useControlledValue(0, props.value);
+ *
+ * @template T - The type of the value.
+ * @param {T} defaultValue - The initial value for the uncontrolled state.
+ * @param {T | undefined} controlledValue - The value for the controlled state.
+ *   If undefined, the component will use the uncontrolled state.
+ * @returns {[T, DispatchStateAction<T>]} - Returns a tuple where the first
+ *   element is the current value (either controlled or uncontrolled) and the
+ *   second element is a setter function to update the value.
+ */
+export function useControlledValue<T>(
+  defaultValue: T,
+  controlledValue: T | undefined
+): [T, DispatchStateAction<T>] {
+  const [uncontrolledValue, setValue] = useState(defaultValue);
+
+  const value =
+    controlledValue === undefined ? uncontrolledValue : controlledValue;
+
+  return [value, setValue] as [T, DispatchStateAction<T>];
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export * from "./DayPicker.js";
+export * from "./types/index.js";
+
+export * from "./classes/index.js";
+export * from "./components/custom-components.js";
+
+export * from "./formatters/index.js";
+export * from "./helpers/index.js";
+export * from "./labels/index.js";
+export * from "./utils/index.js";
+export * from "./UI.js";
+
+export * from "./useDayPicker.js";
+
+export { TZDate } from "@date-fns/tz";

package/src/jalali.tsx

@@ -0,0 +1,2 @@
+/** @deprecated Import from `react-day-picker/persian` instead. */
+export * from "./persian.js";

package/src/labels/index.ts

@@ -0,0 +1,12 @@
+export * from "./labelGrid.js";
+export * from "./labelGridcell.js";
+export * from "./labelDayButton.js";
+export * from "./labelNav.js";
+export * from "./labelGrid.js";
+export * from "./labelMonthDropdown.js";
+export * from "./labelNext.js";
+export * from "./labelPrevious.js";
+export * from "./labelWeekday.js";
+export * from "./labelWeekNumber.js";
+export * from "./labelWeekNumberHeader.js";
+export * from "./labelYearDropdown.js";

package/src/labels/labelDayButton.test.ts

@@ -0,0 +1,41 @@
+import { es } from "date-fns/locale/es";
+
+import type { Modifiers } from "../types";
+
+import { labelDayButton } from "./labelDayButton";
+
+const day = new Date(2022, 10, 21);
+const dayModifiers: Modifiers = {
+  disabled: false,
+  focusable: false,
+  focused: false,
+  hidden: false,
+  outside: false,
+  range_end: false,
+  range_middle: false,
+  range_start: false,
+  selected: false,
+  today: false
+};
+
+describe("when the day is selected", () => {
+  test("return the label", () => {
+    expect(labelDayButton(day, { ...dayModifiers, selected: true })).toEqual(
+      "Monday, November 21st, 2022, selected"
+    );
+  });
+});
+
+describe("when the day is today", () => {
+  test("return the label", () => {
+    expect(labelDayButton(day, { ...dayModifiers, today: true })).toEqual(
+      "Today, Monday, November 21st, 2022"
+    );
+  });
+});
+
+test("should return the localized label", () => {
+  expect(labelDayButton(day, dayModifiers, { locale: es })).toEqual(
+    "lunes, 21 de noviembre de 2022"
+  );
+});

package/src/labels/labelDayButton.ts

@@ -0,0 +1,31 @@
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
+import type { Modifiers } from "../types/index.js";
+
+/**
+ * The ARIA label for the day button.
+ *
+ * Use the `modifiers` argument to add additional context to the label, e.g.
+ * when a day is selected or is today.
+ *
+ * @defaultValue The formatted date.
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelDayButton(
+  date: Date,
+  /** The modifiers for the day. */
+  modifiers: Modifiers,
+  options?: DateLibOptions,
+  dateLib?: DateLib
+) {
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
+  if (modifiers.today) label = `Today, ${label}`;
+  if (modifiers.selected) label = `${label}, selected`;
+  return label;
+}
+
+/**
+ * @ignore
+ * @deprecated Use `labelDayButton` instead.
+ */
+export const labelDay = labelDayButton;

package/src/labels/labelGrid.test.ts

@@ -0,0 +1,7 @@
+import { labelGrid } from "./labelGrid";
+
+const day = new Date(2022, 10, 21);
+
+test("return the label", () => {
+  expect(labelGrid(day)).toEqual("November 2022");
+});

package/src/labels/labelGrid.ts

@@ -0,0 +1,23 @@
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
+
+/**
+ * The ARIA label for the month grid, that will be announced when entering the
+ * grid.
+ *
+ * @defaultValue `LLLL y` (e.g. "November 2022")
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelGrid(
+  date: Date,
+  options?: DateLibOptions,
+  dateLib?: DateLib
+) {
+  return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+}
+
+/**
+ * @ignore
+ * @deprecated Use {@link labelGrid} instead.
+ */
+export const labelCaption = labelGrid;

package/src/labels/labelGridcell.test.ts

@@ -0,0 +1,7 @@
+import { labelGridcell } from "./labelGridcell";
+
+const day = new Date(2022, 10, 21);
+
+test("return the label", () => {
+  expect(labelGridcell(day)).toEqual("Monday, November 21st, 2022");
+});

package/src/labels/labelGridcell.ts

@@ -0,0 +1,22 @@
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
+import type { Modifiers } from "../types/index.js";
+
+/**
+ * The label for the day gridcell when the calendar is not interactive.
+ *
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelGridcell(
+  date: Date,
+  /** The modifiers for the day. */
+  modifiers?: Modifiers,
+  options?: DateLibOptions,
+  dateLib?: DateLib
+) {
+  let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
+  if (modifiers?.today) {
+    label = `Today, ${label}`;
+  }
+  return label;
+}

package/src/labels/labelMonthDropdown.test.ts

@@ -0,0 +1,5 @@
+import { labelMonthDropdown } from "./labelMonthDropdown";
+
+test("should return the label", () => {
+  expect(labelMonthDropdown({})).toEqual("Choose the Month");
+});

package/src/labels/labelMonthDropdown.ts

@@ -0,0 +1,12 @@
+import type { DateLibOptions } from "../classes/DateLib.js";
+
+/**
+ * The ARIA label for the months dropdown.
+ *
+ * @defaultValue `"Choose the Month"`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelMonthDropdown(options?: DateLibOptions) {
+  return "Choose the Month";
+}

package/src/labels/labelNav.test.ts

@@ -0,0 +1,5 @@
+import { labelNav } from "./labelNav";
+
+test("should return the label", () => {
+  expect(labelNav()).toEqual("");
+});

package/src/labels/labelNav.ts

@@ -0,0 +1,10 @@
+/**
+ * The ARIA label for the navigation toolbar.
+ *
+ * @defaultValue `""`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelNav(): string {
+  return "";
+}

package/src/labels/labelNext.test.ts

@@ -0,0 +1,5 @@
+import { labelNext } from "./labelNext";
+
+test("should return the label", () => {
+  expect(labelNext(new Date())).toEqual("Go to the Next Month");
+});

package/src/labels/labelNext.ts

@@ -0,0 +1,13 @@
+/**
+ * The ARIA label for next month button.
+ *
+ * @defaultValue `"Go to the Next Month"`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelNext(
+  /** `undefined` where there's no next month to navigate to. */
+  month: Date | undefined
+) {
+  return "Go to the Next Month";
+}

package/src/labels/labelPrevious.test.ts

@@ -0,0 +1,5 @@
+import { labelPrevious } from "./labelPrevious";
+
+test("should return the label", () => {
+  expect(labelPrevious(new Date())).toEqual("Go to the Previous Month");
+});

package/src/labels/labelPrevious.ts

@@ -0,0 +1,13 @@
+/**
+ * The ARIA label for previous month button.
+ *
+ * @defaultValue `"Go to the Previous Month"`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelPrevious(
+  /** Undefined where there's no previous month to navigate to. */
+  month: Date | undefined
+) {
+  return "Go to the Previous Month";
+}

package/src/labels/labelWeekNumber.test.ts

@@ -0,0 +1,5 @@
+import { labelWeekNumber } from "./labelWeekNumber";
+
+test("should return the label", () => {
+  expect(labelWeekNumber(2)).toEqual("Week 2");
+});

package/src/labels/labelWeekNumber.ts

@@ -0,0 +1,15 @@
+import type { DateLibOptions } from "../classes/DateLib.js";
+
+/**
+ * The ARIA label for the week number cell (the first cell in the row).
+ *
+ * @defaultValue `Week ${weekNumber}`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelWeekNumber(
+  weekNumber: number,
+  options?: DateLibOptions
+): string {
+  return `Week ${weekNumber}`;
+}

package/src/labels/labelWeekNumberHeader.test.ts

@@ -0,0 +1,5 @@
+import { labelWeekNumberHeader } from "./labelWeekNumberHeader";
+
+test("should return the label", () => {
+  expect(labelWeekNumberHeader()).toEqual("Week Number");
+});

package/src/labels/labelWeekNumberHeader.ts

@@ -0,0 +1,12 @@
+import type { DateLibOptions } from "../classes/DateLib.js";
+
+/**
+ * The ARIA label for the week number header element.
+ *
+ * @defaultValue `"Week Number"`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelWeekNumberHeader(options?: DateLibOptions): string {
+  return "Week Number";
+}

package/src/labels/labelWeekday.test.ts

@@ -0,0 +1,15 @@
+import { es } from "date-fns/locale/es";
+
+import { labelWeekday } from "./labelWeekday";
+
+const weekDay = new Date(2022, 10, 21);
+
+test("should return the formatted weekday name", () => {
+  expect(labelWeekday(weekDay)).toEqual("Monday");
+});
+
+describe("when a locale is passed in", () => {
+  test("should format using the locale", () => {
+    expect(labelWeekday(weekDay, { locale: es })).toEqual("lunes");
+  });
+});

package/src/labels/labelWeekday.ts

@@ -0,0 +1,16 @@
+import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
+
+/**
+ * The ARIA label for the Weekday column header.
+ *
+ * @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelWeekday(
+  date: Date,
+  options?: DateLibOptions,
+  dateLib?: DateLib
+): string {
+  return (dateLib ?? new DateLib(options)).format(date, "cccc");
+}

package/src/labels/labelYearDropdown.test.ts

@@ -0,0 +1,5 @@
+import { labelYearDropdown } from "./labelYearDropdown";
+
+test("should return the label", () => {
+  expect(labelYearDropdown()).toEqual("Choose the Year");
+});

package/src/labels/labelYearDropdown.ts

@@ -0,0 +1,12 @@
+import type { DateLibOptions } from "../classes/DateLib.js";
+
+/**
+ * The ARIA label for the years dropdown.
+ *
+ * @defaultValue `"Choose the Year"`
+ * @group Labels
+ * @see https://daypicker.dev/docs/translation#aria-labels
+ */
+export function labelYearDropdown(options?: DateLibOptions) {
+  return "Choose the Year";
+}

package/src/locale.ts

@@ -0,0 +1 @@
+export * from "date-fns/locale";

package/src/persian.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+import * as dateFnsJalali from "date-fns-jalali";
+import { Locale } from "date-fns-jalali";
+import * as locales from "date-fns-jalali/locale";
+
+import {
+  DateLib,
+  DateLibOptions,
+  DayPicker as DayPickerComponent
+} from "./index.js";
+import type { DayPickerProps } from "./types/props.js";
+
+export const faIR = locales.faIR;
+export const enUS = locales.enUS;
+
+/**
+ * Render the Persian Calendar.
+ *
+ * @see https://daypicker.dev/docs/localization#persian-calendar
+ */
+export function DayPicker(
+  props: DayPickerProps & {
+    /**
+     * The locale to use in the calendar.
+     *
+     * @default `faIR`
+     */
+    locale?: Locale;
+    /**
+     * The direction of the text in the calendar.
+     *
+     * @default `rtl`
+     */
+    dir?: DayPickerProps["dir"];
+    /**
+     * The date library to use in the calendar.
+     *
+     * @default `jalaliDateLib` from `date-fns-jalali`
+     */
+    dateLib?: DayPickerProps["dateLib"];
+    /**
+     * The numeral system to use when formatting dates.
+     *
+     * - `latn`: Latin (Western Arabic)
+     * - `arab`: Arabic-Indic
+     * - `arabext`: Eastern Arabic-Indic (Persian)
+     * - `deva`: Devanagari
+     * - `beng`: Bengali
+     * - `guru`: Gurmukhi
+     * - `gujr`: Gujarati
+     * - `orya`: Oriya
+     * - `tamldec`: Tamil
+     * - `telu`: Telugu
+     * - `knda`: Kannada
+     * - `mlym`: Malayalam
+     *
+     * @defaultValue `arabext` Eastern Arabic-Indic (Persian)
+     * @see https://daypicker.dev/docs/translation#numeral-systems
+     */
+    numerals?: DayPickerProps["numerals"];
+  }
+) {
+  const dateLib = getDateLib({
+    locale: props.locale,
+    weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+    firstWeekContainsDate: props.firstWeekContainsDate,
+    useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+    useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
+    timeZone: props.timeZone
+  });
+  return (
+    <DayPickerComponent
+      {...props}
+      locale={props.locale ?? faIR}
+      numerals={props.numerals ?? "arabext"}
+      dir={props.dir ?? "rtl"}
+      dateLib={dateLib}
+    />
+  );
+}
+
+/** Returns the date library used in the calendar. */
+export const getDateLib = (options?: DateLibOptions) => {
+  return new DateLib(options, dateFnsJalali);
+};

package/src/selection/useMulti.test.tsx

@@ -0,0 +1,41 @@
+import { act, renderHook } from "@/test/render";
+
+import { defaultDateLib } from "../classes/DateLib";
+import { DayPickerProps } from "../types";
+
+import { useMulti } from "./useMulti";
+
+describe("useMulti", () => {
+  it("uses the selected value from props when onSelect is provided", () => {
+    const mockOnSelect = jest.fn();
+    const selectedDates = [new Date(2023, 9, 1), new Date(2023, 9, 2)];
+    const props: DayPickerProps = {
+      mode: "multiple",
+      selected: selectedDates,
+      onSelect: mockOnSelect
+    };
+
+    const { result } = renderHook(() => useMulti(props, defaultDateLib));
+
+    expect(result.current.selected).toBe(selectedDates);
+  });
+
+  it("uses the internally selected value when onSelect is not provided", () => {
+    const initialSelectedDates = [new Date(2023, 9, 1), new Date(2023, 9, 2)];
+    const props: DayPickerProps = {
+      mode: "multiple",
+      selected: initialSelectedDates
+    };
+
+    const { result } = renderHook(() => useMulti(props, defaultDateLib));
+
+    act(() => {
+      result.current.select?.(new Date(2023, 9, 3), {}, {} as React.MouseEvent);
+    });
+
+    expect(result.current.selected).toEqual([
+      ...initialSelectedDates,
+      new Date(2023, 9, 3)
+    ]);
+  });
+});