Merge branch 'main' of github.com:gpbl/react-day-picker

CHANGELOG.md

@@ -36,6 +36,7 @@ While we tried to keep the API as stable as possible, some breaking changes were
 - Some typings have been renamed or deprecated.
 - The `useInput` hook has been removed. See [Input fields](https://daypicker.dev/guides/input-fields) guide for more details.
 - `onWeekNumberClick` has been removed. Use a custom component to handle week number clicks.
+- Some of the `onDay*` events, like `onDayTouchStart` or `onDayDoubleClick` have been removed. To reimplement them, use a custom `DayButton` component ([example](https://daypicker.dev/guides/custom-components#intercepting-click-events)).
 - The updated build system to ESM and CommonJS could break some custom bundler.
 
 ### Upgrading Guide

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();
+  });
+});

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>

src/types/props.ts

@@ -406,6 +406,10 @@ export interface PropsBase {
   onDayBlur?: DayEventHandler<React.FocusEvent>;
   /** Event handler when a key is pressed on a day. */
   onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
+  /** Event handler when the mouse enters a day. */
+  onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
+  /** Event handler when the mouse leaves a day. */
+  onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
 
   /**
    * Replace the default date library with a custom one.