react-day-picker 9.0.3 → 9.0.5

package/dist/esm/utils/addToRange.js

@@ -7,41 +7,85 @@ import { dateLib as defaultDateLib } from "../lib/index.js";
  *
  * @group Utilities
  */
-export function addToRange(date, range, 
+export function addToRange(
+/** The date to add to the range. */
+date, 
+/** The range where to add `date`. */
+initialRange, min = 0, max = 0, required = false, 
 /** @ignore */
 dateLib = defaultDateLib) {
-    const { from, to } = range || {};
+    const { from, to } = initialRange || {};
     const { isSameDay, isAfter, isBefore } = dateLib;
-    if (from && to) {
-        if (isSameDay(to, date) && isSameDay(from, date)) {
-            return { from: undefined, to: undefined };
-        }
-        if (isSameDay(to, date)) {
-            return { from: to, to: undefined };
-        }
+    let range;
+    if (!from && !to) {
+        // the range is empty, add the date
+        range = { from: date, to: min > 0 ? undefined : date };
+    }
+    else if (from && !to) {
+        // adding date to an incomplete range
         if (isSameDay(from, date)) {
-            return { from: undefined, to: undefined };
+            // adding a date equal to the start of the range
+            if (required) {
+                range = { from, to: undefined };
+            }
+            else {
+                range = undefined;
+            }
         }
-        if (isAfter(from, date)) {
-            return { from: date, to };
+        else if (isBefore(date, from)) {
+            // adding a date before the start of the range
+            range = { from: date, to: from };
+        }
+        else {
+            // adding a date after the start of the range
+            range = { from, to: date };
         }
-        return { from, to: date };
     }
-    if (to) {
-        if (isAfter(date, to)) {
-            return { from: to, to: date };
+    else if (from && to) {
+        // adding date to a complete range
+        if (isSameDay(from, date) && isSameDay(to, date)) {
+            // adding a date that is equal to both start and end of the range
+            if (required) {
+                range = { from, to };
+            }
+            else {
+                range = undefined;
+            }
+        }
+        else if (isSameDay(from, date)) {
+            // adding a date equal to the the start of the range
+            range = { from, to: min > 0 ? undefined : date };
+        }
+        else if (isSameDay(to, date)) {
+            // adding a dare equal to the end of the range
+            range = { from: date, to: min > 0 ? undefined : date };
+        }
+        else if (isBefore(date, from)) {
+            // adding a date before the start of the range
+            range = { from: date, to: to };
+        }
+        else if (isAfter(date, from)) {
+            // adding a date after the start of the range
+            range = { from, to: date };
+        }
+        else if (isAfter(date, to)) {
+            // adding a date after the end of the range
+            range = { from, to: date };
+        }
+        else {
+            throw new Error("Invalid range");
         }
-        return { from: date, to };
     }
-    if (from) {
-        if (isBefore(date, from)) {
-            return { from: date, to: from };
+    // check for min / max
+    if (range?.from && range?.to) {
+        const diff = dateLib.differenceInCalendarDays(range.to, range.from);
+        if (max > 0 && diff > max) {
+            range = { from: date, to: undefined };
         }
-        if (isSameDay(date, from)) {
-            return { from: undefined, to: undefined };
+        else if (min > 1 && diff < min) {
+            range = { from: date, to: undefined };
         }
-        return { from, to: date };
     }
-    return { from: date, to: undefined };
+    return range;
 }
 //# sourceMappingURL=addToRange.js.map

package/dist/esm/utils/addToRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"addToRange.js","sourceRoot":"","sources":["../../../src/utils/addToRange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG5D;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACxB,IAAU,EACV,KAA4B;AAC5B,cAAc;AACd,UAAmB,cAAc;IAEjC,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IACjD,IAAI,IAAI,IAAI,EAAE,EAAE,CAAC;QACf,IAAI,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACjD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;QAC5C,CAAC;QACD,IAAI,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC;YACxB,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;QACrC,CAAC;QACD,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YAC1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;QAC5C,CAAC;QACD,IAAI,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACxB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;QAC5B,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IACD,IAAI,EAAE,EAAE,CAAC;QACP,IAAI,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC;YACtB,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAC5B,CAAC;IACD,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;QAClC,CAAC;QACD,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YAC1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;QAC5C,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IACD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;AACvC,CAAC"}
+{"version":3,"file":"addToRange.js","sourceRoot":"","sources":["../../../src/utils/addToRange.ts"],"names":[],"mappings":"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"}

package/examples/CustomDayButton.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { startOfMonth } from "date-fns";
+
+import { dateButton } from "@/test/elements";
+import { render, screen, fireEvent } from "@/test/render";
+
+import { CustomDayButton } from "./CustomDayButton";
+
+const today = new Date(2021, 10, 25);
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
+beforeEach(() => {
+  render(<CustomDayButton />);
+});
+
+test("update the footer when a day is double clicked", () => {
+  fireEvent.doubleClick(dateButton(today));
+  expect(screen.getByText(today.toDateString())).toBeInTheDocument();
+});
+
+test("update the footer when a day is single clicked", () => {
+  fireEvent.click(dateButton(startOfMonth(today)));
+  expect(screen.getByText("Double click to select a date")).toBeInTheDocument();
+});

package/examples/CustomDayButton.tsx

@@ -1,16 +1,27 @@
 import React from "react";
 
-import { DayPicker, type DayButtonProps } from "react-day-picker";
+import { DayPicker } from "react-day-picker";
 
-function HighlightDay(props: DayButtonProps) {
-  const { day, modifiers, ...buttonProps } = props;
+export function CustomDayButton() {
+  const [selected, setSelected] = React.useState<Date>();
   return (
-    <button {...buttonProps} style={{ whiteSpace: "nowrap" }}>
-      {props.day.date.getDate() === 19 ? `🎉` : props.children}
-    </button>
+    <DayPicker
+      mode="single"
+      onSelect={setSelected}
+      selected={selected}
+      components={{
+        DayButton: (props) => {
+          const { day, modifiers, ...buttonProps } = props;
+          return (
+            <button
+              {...buttonProps}
+              onDoubleClick={() => setSelected(day.date)}
+              onClick={() => setSelected(undefined)}
+            />
+          );
+        }
+      }}
+      footer={selected?.toDateString() || "Double click to select a date"}
+    />
   );
 }
-
-export function CustomDayButton() {
-  return <DayPicker mode="single" components={{ DayButton: HighlightDay }} />;
-}

package/examples/MultipleRequired.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function MultipleRequired() {
+  return <DayPicker mode="multiple" required selected={[new Date()]} />;
+}

package/examples/RangeMinMax.test.tsx

@@ -8,6 +8,11 @@ import { user } from "@/test/user";
 
 import { RangeMinMax } from "./RangeMinMax";
 
+const today = new Date(2022, 8, 12);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
 beforeEach(() => render(<RangeMinMax />));
 
 describe("when a day is clicked", () => {
@@ -18,22 +23,6 @@ describe("when a day is clicked", () => {
   test("should be selected", () => {
     expect(gridcell(firstDay, true)).toHaveAttribute("aria-selected", "true");
   });
-  describe("when the day before min is clicked", () => {
-    const dayAfter = addDays(firstDay, 1);
-    beforeEach(async () => {
-      await user.click(dateButton(dayAfter));
-    });
-    test("the first day should not be selected", () => {
-      expect(gridcell(firstDay, true)).not.toHaveAttribute(
-        "aria-selected",
-        "true"
-      );
-    });
-    test("the day after should be selected", () => {
-      expect(gridcell(dayAfter, true)).toHaveAttribute("aria-selected", "true");
-    });
-  });
-
   describe("when the day after min is clicked", () => {
     const dayAfter = addDays(firstDay, 4);
     beforeEach(async () => {

package/examples/RangeMinMax.tsx

@@ -9,20 +9,19 @@ export function RangeMinMax() {
   let footer = `Please pick the first day.`;
   if (range?.from) {
     if (!range.to) {
-      footer = format(range.from, "PPP");
+      footer = `${format(range.from, "PPP")}—`;
     } else if (range.to) {
-      footer = `${format(range.from, "PPP")}–${format(range.to, "PPP")}`;
+      footer = `${format(range.from, "PPP")}—${format(range.to, "PPP")}`;
     }
   }
 
   return (
     <div>
-      <p>Select a range between 3 and 9 days.</p>
+      <p>Select up to 6 nights.</p>
       <DayPicker
-        defaultMonth={new Date(2022, 8)}
         mode="range"
-        min={3}
-        max={9}
+        min={1}
+        max={6}
         selected={range}
         onSelect={setRange}
         footer={footer}

package/examples/RangeRequired.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+import { addDays, format, startOfMonth } from "date-fns";
+import { DateRange, DayPicker } from "react-day-picker";
+
+export function RangeRequired() {
+  const [range, setRange] = useState<DateRange>({
+    from: startOfMonth(new Date()),
+    to: addDays(startOfMonth(new Date()), 4)
+  });
+
+  let footer = `Please pick the first day.`;
+  if (range?.from) {
+    if (!range.to) {
+      footer = `${format(range.from, "PPP")}—`;
+    } else if (range.to) {
+      footer = `${format(range.from, "PPP")}—${format(range.to, "PPP")}`;
+    }
+  }
+
+  return (
+    <DayPicker
+      mode="range"
+      required
+      selected={range}
+      onSelect={setRange}
+      footer={footer}
+    />
+  );
+}

package/examples/RangeShiftKey.tsx

@@ -12,12 +12,10 @@ function DayWithShiftKey(props: DayButtonProps) {
   const { selected } = useDayPicker({ mode: "range" });
 
   const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-    if (
-      selected?.from &&
-      !selected.to &&
-      !isSameDay(props.day.date, selected.from) &&
-      !e.shiftKey
-    ) {
+    const requireShiftKey =
+      selected?.from && !isSameDay(props.day.date, selected.from);
+
+    if (!e.shiftKey && requireShiftKey) {
       return;
     }
     props.onClick?.(e);

package/examples/StartEndMonths.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { grid, gridcell, nextButton } from "@/test/elements";
+import { render } from "@/test/render";
+import { user } from "@/test/user";
+
+import { StartEndMonths } from "./StartEndMonths";
+
+beforeEach(() => {
+  render(<StartEndMonths />);
+});
+
+test("the first month should be January 2024", () => {
+  expect(grid("January 2024")).toBeInTheDocument();
+  expect(gridcell(new Date(2024, 0, 31))).toBeInTheDocument();
+});
+
+describe("when navigating to the last month", () => {
+  beforeEach(async () => {
+    // click next button 24 times
+    for (let i = 0; i < 24; i++) {
+      await user.click(nextButton());
+    }
+  });
+
+  test("the last month should be December 2025", () => {
+    expect(grid("December 2025")).toBeInTheDocument();
+    expect(gridcell(new Date(2025, 11, 31))).toBeInTheDocument();
+  });
+});

package/examples/index.ts

@@ -38,6 +38,7 @@ export * from "./ModifiersStyle";
 export * from "./ModifiersToday";
 export * from "./Multiple";
 export * from "./MultipleMinMax";
+export * from "./MultipleRequired";
 export * from "./MultipleMonths";
 export * from "./MultipleMonthsPaged";
 export * from "./NumberingSystem";
@@ -45,6 +46,7 @@ export * from "./OutsideDays";
 export * from "./Range";
 export * from "./RangeExcludeDisabled";
 export * from "./RangeMinMax";
+export * from "./RangeRequired";
 export * from "./RangeShiftKey";
 export * from "./Rtl";
 export * from "./Single";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.0.3",
+  "version": "9.0.5",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -144,7 +144,7 @@
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.16.0",
     "date-fns": "^3.6.0",
     "date-fns-jalali": "3.6.0-1",
@@ -169,7 +169,7 @@
     "ts-jest": "^29.2.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.3",
-    "typescript": "~5.5.3",
+    "typescript": "~5.5.4",
     "typescript-css-modules": "^1.0.4"
   },
   "peerDependencies": {

package/src/DayPicker.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { render, screen } from "@testing-library/react";
-import { startOfMonth } from "date-fns";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { startOfDay, startOfMonth } from "date-fns";
 
 import {
   activeElement,
@@ -108,3 +108,26 @@ describe("when the grid is focused", () => {
     });
   });
 });
+
+describe("when a day is mouse entered", () => {
+  const handleDayMouseEnter = jest.fn();
+  const handleDayMouseLeave = jest.fn();
+  const today = startOfDay(new Date());
+  beforeEach(async () => {
+    render(
+      <DayPicker
+        today={today}
+        defaultMonth={today}
+        mode="single"
+        onDayMouseEnter={handleDayMouseEnter}
+        onDayMouseLeave={handleDayMouseLeave}
+      />
+    );
+    fireEvent.mouseEnter(dateButton(today));
+    fireEvent.mouseLeave(dateButton(today));
+  });
+  test("should call the event handler", async () => {
+    expect(handleDayMouseEnter).toHaveBeenCalled();
+    expect(handleDayMouseLeave).toHaveBeenCalled();
+  });
+});

package/src/DayPicker.tsx

@@ -69,6 +69,8 @@ export function DayPicker(props: DayPickerProps) {
     onDayClick,
     onDayFocus,
     onDayKeyDown,
+    onDayMouseEnter,
+    onDayMouseLeave,
     onNextClick,
     onPrevClick,
     showWeekNumber,
@@ -209,6 +211,20 @@ export function DayPicker(props: DayPickerProps) {
     [moveFocus, onDayKeyDown, props.dir]
   );
 
+  const handleDayMouseEnter = useCallback(
+    (day: CalendarDay, modifiers: Modifiers) => (e: MouseEvent) => {
+      onDayMouseEnter?.(day.date, modifiers, e);
+    },
+    [onDayMouseEnter]
+  );
+
+  const handleDayMouseLeave = useCallback(
+    (day: CalendarDay, modifiers: Modifiers) => (e: MouseEvent) => {
+      onDayMouseLeave?.(day.date, modifiers, e);
+    },
+    [onDayMouseLeave]
+  );
+
   const { className, style } = useMemo(
     () => ({
       className: [classNames[UI.Root], props.className]
@@ -552,6 +568,14 @@ export function DayPicker(props: DayPickerProps) {
                                     onBlur={handleDayBlur(day, modifiers)}
                                     onFocus={handleDayFocus(day, modifiers)}
                                     onKeyDown={handleDayKeyDown(day, modifiers)}
+                                    onMouseEnter={handleDayMouseEnter(
+                                      day,
+                                      modifiers
+                                    )}
+                                    onMouseLeave={handleDayMouseLeave(
+                                      day,
+                                      modifiers
+                                    )}
                                   >
                                     {formatDay(date, formatOptions, dateLib)}
                                   </components.DayButton>

package/src/selection/useRange.test.tsx

@@ -90,7 +90,7 @@ describe("useRange", () => {
 
     expect(result.current.selected).toEqual({
       from: new Date(2023, 6, 10),
-      to: undefined
+      to: new Date(2023, 6, 10)
     });
   });
 
@@ -135,7 +135,7 @@ describe("useRange", () => {
 
     expect(result.current.selected).toEqual({
       from: new Date(2023, 6, 10),
-      to: undefined
+      to: new Date(2023, 6, 10)
     });
   });
 });

package/src/selection/useRange.tsx

@@ -24,7 +24,6 @@ export function useRange<T extends DayPickerProps>(
     onSelect
   } = props as PropsRange;
 
-  const { differenceInCalendarDays } = dateLib;
   const [selected, setSelected] = React.useState<DateRange | undefined>(
     initiallySelected
   );
@@ -49,32 +48,10 @@ export function useRange<T extends DayPickerProps>(
     modifiers: Modifiers,
     e: React.MouseEvent | React.KeyboardEvent
   ) => {
+    const { min, max } = props as PropsRange;
     const newRange = triggerDate
-      ? addToRange(triggerDate, selected, dateLib)
+      ? addToRange(triggerDate, selected, min, max, required, dateLib)
       : undefined;
-    const { min, max } = props as PropsRange;
-
-    if (min) {
-      if (
-        newRange?.from &&
-        newRange.to &&
-        differenceInCalendarDays(newRange.to, newRange.from) < min - 1
-      ) {
-        newRange.from = triggerDate;
-        newRange.to = undefined;
-      }
-    }
-
-    if (max) {
-      if (
-        newRange?.from &&
-        newRange.to &&
-        differenceInCalendarDays(newRange.to, newRange.from) >= max
-      ) {
-        newRange.from = triggerDate;
-        newRange.to = undefined;
-      }
-    }
 
     if (newRange?.from && newRange.to) {
       let newDate = newRange.from;
@@ -85,6 +62,7 @@ export function useRange<T extends DayPickerProps>(
           disabled &&
           dateMatchModifiers(newDate, disabled, dateLib)
         ) {
+          // if a disabled days is found, the range is reset
           newRange.from = triggerDate;
           newRange.to = undefined;
           break;

package/src/style.css

@@ -49,7 +49,8 @@
   --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
   --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
   --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
-  
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
   --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
   --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
   --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
@@ -87,6 +88,7 @@
   width: var(--rdp-day-width);
   height: var(--rdp-day-height);
   font: var(--rdp-day-font);
+  text-align: center;
 }
 
 .rdp-day_button {
@@ -164,9 +166,10 @@
   gap: var(--rdp-dropdown-gap);
 }
 .rdp-dropdown {
-  z-index: 2; /* Remove ? */
+  z-index: 2;
 
   /* Reset */
+  opacity: 0;
   appearance: none;
   position: absolute;
   inset-block-start: 0;
@@ -176,9 +179,7 @@
   margin: 0;
   padding: 0;
   cursor: inherit;
-  color: transparent;
   border: none;
-  background-color: transparent;
   line-height: inherit;
 }
 
@@ -207,6 +208,10 @@
   max-width: fit-content;
 }
 
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
 .rdp-nav {
   position: absolute;
   inset-block-start: 0;
@@ -233,10 +238,7 @@
   width: var(--rdp-week_number-width);
   border: var(--rdp-week_number-border);
   border-radius: var(--rdp-week_number-border-radius);
-}
-
-.rdp-week_number_interactive {
-  cursor: pointer;
+  text-align: var(--rdp-weeknumber-text-align);
 }
 
 /* DAY MODIFIERS */
@@ -262,7 +264,7 @@
 
 .rdp-hidden {
   visibility: hidden;
-  color: var(end-range_start-color);
+  color: var(--rdp-range_start-color);
 }
 
 .rdp-range_start {
@@ -296,6 +298,10 @@
   background-color: var(--rdp-range_end-date-background-color);
 }
 
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
 .rdp-focusable {
   cursor: pointer;
 }