react-day-picker 9.6.2 → 9.6.4

package/src/selection/useMulti.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import type { DateLib } from "../classes/DateLib.js";
+import { useControlledValue } from "../helpers/useControlledValue.js";
+import type {
+  DayPickerProps,
+  Modifiers,
+  PropsMulti,
+  Selection
+} from "../types/index.js";
+
+export function useMulti<T extends DayPickerProps>(
+  props: T,
+  dateLib: DateLib
+): Selection<T> {
+  const {
+    selected: initiallySelected,
+    required,
+    onSelect
+  } = props as PropsMulti;
+
+  const [internallySelected, setSelected] = useControlledValue(
+    initiallySelected,
+    onSelect ? initiallySelected : undefined
+  );
+
+  const selected = !onSelect ? internallySelected : initiallySelected;
+
+  const { isSameDay } = dateLib;
+
+  const isSelected = (date: Date) => {
+    return selected?.some((d) => isSameDay(d, date)) ?? false;
+  };
+
+  const { min, max } = props as PropsMulti;
+
+  const select = (
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => {
+    let newDates: Date[] | undefined = [...(selected ?? [])];
+    if (isSelected(triggerDate)) {
+      if (selected?.length === min) {
+        // Min value reached, do nothing
+        return;
+      }
+      if (required && selected?.length === 1) {
+        // Required value already selected do nothing
+        return;
+      }
+      newDates = selected?.filter((d) => !isSameDay(d, triggerDate));
+    } else {
+      if (selected?.length === max) {
+        // Max value reached, reset the selection to date
+        newDates = [triggerDate];
+      } else {
+        // Add the date to the selection
+        newDates = [...newDates, triggerDate];
+      }
+    }
+    if (!onSelect) {
+      setSelected(newDates);
+    }
+    onSelect?.(newDates, triggerDate, modifiers, e);
+    return newDates;
+  };
+
+  return {
+    selected,
+    select,
+    isSelected
+  } as Selection<T>;
+}

package/src/selection/useRange.test.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { act, renderHook } from "@/test/render";
+
+import { defaultDateLib } from "../classes/DateLib";
+import type { DayPickerProps } from "../types";
+
+import { useRange } from "./useRange";
+
+describe("useRange", () => {
+  test("initialize with initiallySelected date range", () => {
+    const initiallySelected = {
+      from: new Date(2023, 6, 1),
+      to: new Date(2023, 6, 5)
+    };
+    const { result } = renderHook(() =>
+      useRange(
+        { mode: "range", selected: initiallySelected, required: false },
+        defaultDateLib
+      )
+    );
+
+    expect(result.current.selected).toEqual(initiallySelected);
+  });
+
+  test("update the selected range on select", () => {
+    const initiallySelected = {
+      from: new Date(2023, 6, 1),
+      to: new Date(2023, 6, 5)
+    };
+    const { result } = renderHook(() =>
+      useRange(
+        { mode: "range", selected: initiallySelected, required: false },
+        defaultDateLib
+      )
+    );
+
+    act(() => {
+      result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
+    });
+
+    expect(result.current.selected).toEqual({
+      from: new Date(2023, 6, 1),
+      to: new Date(2023, 6, 10)
+    });
+  });
+
+  test("reset range if new range exceeds max days", () => {
+    const { result } = renderHook(() =>
+      useRange(
+        {
+          mode: "range",
+          selected: undefined,
+          required: false,
+          max: 5
+        },
+        defaultDateLib
+      )
+    );
+
+    act(() => {
+      result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
+      result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
+    });
+
+    expect(result.current.selected).toEqual({
+      from: new Date(2023, 6, 10),
+      to: new Date(2023, 6, 10)
+    });
+  });
+
+  test("reset range if new range is less than min days", () => {
+    const { result } = renderHook(() =>
+      useRange(
+        { mode: "range", selected: undefined, required: false, min: 5 },
+        defaultDateLib
+      )
+    );
+
+    act(() => {
+      result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
+      result.current.select?.(new Date(2023, 6, 3), {}, {} as any);
+    });
+
+    expect(result.current.selected).toEqual({
+      from: new Date(2023, 6, 3),
+      to: undefined
+    });
+  });
+
+  test("exclude disabled dates when selecting range", () => {
+    const disabled = [{ from: new Date(2023, 6, 5), to: new Date(2023, 6, 7) }];
+    const { result } = renderHook(() =>
+      useRange(
+        {
+          mode: "range",
+          selected: undefined,
+          required: false,
+          excludeDisabled: true,
+          disabled
+        },
+        defaultDateLib
+      )
+    );
+
+    act(() => {
+      result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
+      result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
+    });
+
+    expect(result.current.selected).toEqual({
+      from: new Date(2023, 6, 10),
+      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, defaultDateLib));
+
+    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, defaultDateLib));
+
+    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

@@ -0,0 +1,73 @@
+import React from "react";
+
+import type { DateLib } from "../classes/DateLib.js";
+import { useControlledValue } from "../helpers/useControlledValue.js";
+import type {
+  DayPickerProps,
+  Modifiers,
+  PropsRange,
+  Selection
+} from "../types/index.js";
+import { addToRange, rangeContainsModifiers } from "../utils/index.js";
+import { rangeIncludesDate } from "../utils/rangeIncludesDate.js";
+
+export function useRange<T extends DayPickerProps>(
+  props: T,
+  dateLib: DateLib
+): Selection<T> {
+  const {
+    disabled,
+    excludeDisabled,
+    selected: initiallySelected,
+    required,
+    onSelect
+  } = props as PropsRange;
+
+  const [internallySelected, setSelected] = useControlledValue(
+    initiallySelected,
+    onSelect ? initiallySelected : undefined
+  );
+
+  const selected = !onSelect ? internallySelected : initiallySelected;
+
+  const isSelected = (date: Date) =>
+    selected && rangeIncludesDate(selected, date, false, dateLib);
+
+  const select = (
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => {
+    const { min, max } = props as PropsRange;
+    const newRange = triggerDate
+      ? addToRange(triggerDate, selected, min, max, required, dateLib)
+      : undefined;
+
+    if (excludeDisabled && disabled && newRange?.from && newRange.to) {
+      if (
+        rangeContainsModifiers(
+          { from: newRange.from, to: newRange.to },
+          disabled,
+          dateLib
+        )
+      ) {
+        // if a disabled days is found, the range is reset
+        newRange.from = triggerDate;
+        newRange.to = undefined;
+      }
+    }
+
+    if (!onSelect) {
+      setSelected(newRange);
+    }
+    onSelect?.(newRange, triggerDate, modifiers, e);
+
+    return newRange;
+  };
+
+  return {
+    selected,
+    select,
+    isSelected
+  } as Selection<T>;
+}

package/src/selection/useSingle.test.tsx

@@ -0,0 +1,38 @@
+import { act, renderHook } from "@/test/render";
+
+import { defaultDateLib } from "../classes/DateLib";
+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, defaultDateLib));
+
+    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, defaultDateLib));
+
+    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

@@ -0,0 +1,69 @@
+import React from "react";
+
+import type { DateLib } from "../classes/DateLib.js";
+import { useControlledValue } from "../helpers/useControlledValue.js";
+import type {
+  DayPickerProps,
+  Modifiers,
+  PropsSingle,
+  SelectHandler,
+  SelectedValue,
+  Selection
+} from "../types/index.js";
+
+export type UseSingle<T extends DayPickerProps> = {
+  select: SelectHandler<T>;
+  isSelected: (date: Date) => boolean;
+  selected: SelectedValue<T>;
+};
+
+export function useSingle<T extends DayPickerProps>(
+  props: DayPickerProps,
+  dateLib: DateLib
+): Selection<T> {
+  const {
+    selected: initiallySelected,
+    required,
+    onSelect
+  } = props as PropsSingle;
+
+  const [internallySelected, setSelected] = useControlledValue(
+    initiallySelected,
+    onSelect ? initiallySelected : undefined
+  );
+
+  const selected = !onSelect ? internallySelected : initiallySelected;
+
+  const { isSameDay } = dateLib;
+
+  const isSelected = (compareDate: Date) => {
+    return selected ? isSameDay(selected, compareDate) : false;
+  };
+
+  const select = (
+    triggerDate: Date,
+    modifiers: Modifiers,
+    e: React.MouseEvent | React.KeyboardEvent
+  ) => {
+    let newDate: Date | undefined = triggerDate;
+    if (!required && selected && selected && isSameDay(triggerDate, selected)) {
+      // If the date is the same, clear the selection.
+      newDate = undefined;
+    }
+    if (!onSelect) {
+      setSelected(newDate);
+    }
+    if (required) {
+      onSelect?.(newDate as Date, triggerDate, modifiers, e);
+    } else {
+      onSelect?.(newDate, triggerDate, modifiers, e);
+    }
+    return newDate;
+  };
+
+  return {
+    selected,
+    select,
+    isSelected
+  } as Selection<T>;
+}

package/src/types/deprecated.ts

@@ -0,0 +1,230 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DayFlag, SelectionState } from "../UI.js";
+import {
+  MonthCaption,
+  type MonthCaptionProps
+} from "../components/MonthCaption.js";
+import { Week, type WeekProps } from "../components/Week.js";
+import {
+  labelDayButton,
+  labelNext,
+  labelWeekday,
+  labelWeekNumber
+} from "../labels/index.js";
+import { useDayPicker } from "../useDayPicker.js";
+
+import type { PropsMulti, PropsRange, PropsSingle } from "./props.js";
+import type { Mode, DayEventHandler } from "./shared.js";
+
+/**
+ * @ignore
+ * @deprecated This type will be removed.
+ */
+export type RootProvider = any;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed.
+ */
+export type RootProviderProps = any;
+
+/**
+ * @ignore
+ * @deprecated This component has been renamed. Use `MonthCaption` instead.
+ * @group Components
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export const Caption = MonthCaption;
+
+/**
+ * @ignore
+ * @deprecated This type has been renamed. Use `MonthCaptionProps` instead.
+ */
+export type CaptionProps = MonthCaptionProps;
+
+/**
+ * @ignore
+ * @deprecated This component has been removed.
+ * @group Components
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export type HeadRow = any;
+
+/**
+ * @ignore
+ * @deprecated This component has been renamed. Use `Week` instead.
+ * @group Components
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export const Row = Week;
+
+/**
+ * @ignore
+ * @deprecated This type has been removed. Use `WeekProps` instead.
+ */
+export type RowProps = WeekProps;
+
+/**
+ * @ignore
+ * @deprecated This type has been renamed. Use `PropsSingle` instead.
+ */
+export type DayPickerSingleProps = PropsSingle;
+
+/**
+ * @ignore
+ * @deprecated This type has been renamed. Use `PropsMulti` instead.
+ */
+export type DayPickerMultipleProps = PropsMulti;
+
+/**
+ * @ignore
+ * @deprecated This type has been renamed. Use `PropsRange` instead.
+ */
+export type DayPickerRangeProps = PropsRange;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use `NonNullable<unknown>` instead
+ */
+export type DayPickerDefaultProps = NonNullable<unknown>;
+
+/**
+ * @ignore
+ * @deprecated This type has been renamed. Use `Mode` instead.
+ */
+export type DaySelectionMode = Mode;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use `string` instead;
+ */
+export type Modifier = string;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use {@link DayFlag} or
+ *   {@link SelectionState} instead.
+ */
+export type InternalModifier =
+  | DayFlag.disabled
+  | DayFlag.hidden
+  | DayFlag.focused
+  | SelectionState.range_end
+  | SelectionState.range_middle
+  | SelectionState.range_start
+  | SelectionState.selected;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use `SelectHandler<{mode: "single"}>`
+ *   instead.
+ */
+export type SelectSingleEventHandler = PropsSingle["onSelect"];
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use `SelectHandler<{mode:
+ *   "multiple"}>` instead.
+ */
+export type SelectMultipleEventHandler = PropsMulti["onSelect"];
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use `SelectHandler<{mode: "range"}>`
+ *   instead.
+ */
+export type SelectRangeEventHandler = PropsRange["onSelect"];
+
+/**
+ * @ignore
+ * @deprecated This type is not used anymore.
+ */
+export type DayPickerProviderProps = any;
+
+/**
+ * @ignore
+ * @deprecated This type has been removed to `useDayPicker`.
+ * @group Hooks
+ */
+export const useNavigation = useDayPicker;
+
+/**
+ * @ignore
+ * @deprecated This hook has been removed. Use a custom `Day` component instead.
+ * @group Hooks
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export type useDayRender = any;
+
+/**
+ * @ignore
+ * @deprecated This type is not used anymore.
+ */
+export type ContextProvidersProps = any;
+
+/**
+ * @ignore
+ * @deprecated Use `typeof labelDayButton` instead.
+ */
+export type DayLabel = typeof labelDayButton;
+
+/**
+ * @ignore
+ * @deprecated Use `typeof labelNext` or `typeof labelPrevious` instead.
+ */
+export type NavButtonLabel = typeof labelNext;
+
+/**
+ * @ignore
+ * @deprecated Use `typeof labelWeekday` instead.
+ */
+export type WeekdayLabel = typeof labelWeekday;
+
+/**
+ * @ignore
+ * @deprecated Use `typeof labelWeekNumber` instead.
+ */
+export type WeekNumberLabel = typeof labelWeekNumber;
+
+/**
+ * @ignore
+ * @deprecated Use {@link DayMouseEventHandler} instead.
+ */
+export type DayClickEventHandler = DayEventHandler<React.MouseEvent>;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use `DayEventHandler<React.FocusEvent
+ *   | React.KeyboardEvent>` instead.
+ */
+export type DayFocusEventHandler = DayEventHandler<
+  React.FocusEvent | React.KeyboardEvent
+>;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use
+ *   `DayEventHandler<React.KeyboardEvent>` instead.
+ */
+export type DayKeyboardEventHandler = DayEventHandler<React.KeyboardEvent>;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use
+ *   `DayEventHandler<React.MouseEvent>` instead.
+ */
+export type DayMouseEventHandler = DayEventHandler<React.MouseEvent>;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use
+ *   `DayEventHandler<React.PointerEvent>` instead.
+ */
+export type DayPointerEventHandler = DayEventHandler<React.PointerEvent>;
+
+/**
+ * @ignore
+ * @deprecated This type will be removed. Use
+ *   `DayEventHandler<React.TouchEvent>` instead.
+ */
+export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>;

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from "./deprecated.js";
+export * from "./shared.js";
+export * from "./props.js";
+export * from "./selection.js";