feat: add onDayPointerEnter, onDayPointerLeave props

packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx

@@ -83,6 +83,8 @@ const tests: [EventName, DayEventName][] = [
   ['onBlur', 'onDayBlur'],
   ['onMouseEnter', 'onDayMouseEnter'],
   ['onMouseLeave', 'onDayMouseLeave'],
+  ['onPointerEnter', 'onDayPointerEnter'],
+  ['onPointerLeave', 'onDayPointerLeave'],
   ['onTouchEnd', 'onDayTouchEnd'],
   ['onTouchCancel', 'onDayTouchCancel'],
   ['onTouchMove', 'onDayTouchMove'],

packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx

@@ -3,6 +3,7 @@ import {
   HTMLProps,
   KeyboardEventHandler,
   MouseEventHandler,
+  PointerEventHandler,
   TouchEventHandler
 } from 'react';
 
@@ -24,6 +25,8 @@ export type EventName =
   | 'onKeyUp'
   | 'onMouseEnter'
   | 'onMouseLeave'
+  | 'onPointerEnter'
+  | 'onPointerLeave'
   | 'onTouchCancel'
   | 'onTouchEnd'
   | 'onTouchMove'
@@ -37,6 +40,8 @@ export type DayEventName =
   | 'onDayKeyUp'
   | 'onDayMouseEnter'
   | 'onDayMouseLeave'
+  | 'onDayPointerEnter'
+  | 'onDayPointerLeave'
   | 'onDayTouchCancel'
   | 'onDayTouchEnd'
   | 'onDayTouchMove'
@@ -115,6 +120,12 @@ export function useDayEventHandlers(
   const onMouseLeave: MouseEventHandler = (e) => {
     dayPicker.onDayMouseLeave?.(date, activeModifiers, e);
   };
+  const onPointerEnter: PointerEventHandler = (e) => {
+    dayPicker.onDayPointerEnter?.(date, activeModifiers, e);
+  };
+  const onPointerLeave: PointerEventHandler = (e) => {
+    dayPicker.onDayPointerLeave?.(date, activeModifiers, e);
+  };
   const onTouchCancel: TouchEventHandler = (e) => {
     dayPicker.onDayTouchCancel?.(date, activeModifiers, e);
   };
@@ -186,6 +197,8 @@ export function useDayEventHandlers(
     onKeyUp,
     onMouseEnter,
     onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
     onTouchCancel,
     onTouchEnd,
     onTouchMove,

packages/react-day-picker/src/types/DayPickerBase.ts

@@ -13,6 +13,7 @@ import {
   DayFocusEventHandler,
   DayKeyboardEventHandler,
   DayMouseEventHandler,
+  DayPointerEventHandler,
   DayTouchEventHandler,
   MonthChangeEventHandler,
   WeekNumberClickEventHandler
@@ -251,6 +252,8 @@ export interface DayPickerBase {
   onDayKeyDown?: DayKeyboardEventHandler;
   onDayKeyUp?: DayKeyboardEventHandler;
   onDayKeyPress?: DayKeyboardEventHandler;
+  onDayPointerEnter?: DayPointerEventHandler;
+  onDayPointerLeave?: DayPointerEventHandler;
   onDayTouchCancel?: DayTouchEventHandler;
   onDayTouchEnd?: DayTouchEventHandler;
   onDayTouchMove?: DayTouchEventHandler;

packages/react-day-picker/src/types/EventHandlers.ts

@@ -30,6 +30,13 @@ export type DayMouseEventHandler = (
   e: React.MouseEvent
 ) => void;
 
+/** The event handler when a day gets a pointer event. */
+export type DayPointerEventHandler = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  e: React.PointerEvent
+) => void;
+
 /** The event handler when a month is changed in the calendar. */
 export type MonthChangeEventHandler = (month: Date) => void;