From 5afef3ac9b4239326443b4462c6727a9ad4e79c6 Mon Sep 17 00:00:00 2001
From: norbertkeresztes <2070126+norbertkeresztes@users.noreply.github.com>
Date: Tue, 6 Dec 2022 09:58:07 +0000
Subject: [PATCH] feat: add support for pointerenter and pointerleave events as
 a workaround for bug #1613

---
 .../useDayEventHandlers.test.tsx                    |  2 ++
 .../useDayEventHandlers/useDayEventHandlers.tsx     | 13 +++++++++++++
 .../react-day-picker/src/types/DayPickerBase.ts     |  3 +++
 .../react-day-picker/src/types/EventHandlers.ts     |  7 +++++++
 4 files changed, 25 insertions(+)

diff --git a/packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx b/packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx
index b6184276fe..118dc86d9e 100644
--- a/packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx
+++ b/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'],
diff --git a/packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx b/packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx
index ff6915240c..935dcc1844 100644
--- a/packages/react-day-picker/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx
+++ b/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,
diff --git a/packages/react-day-picker/src/types/DayPickerBase.ts b/packages/react-day-picker/src/types/DayPickerBase.ts
index 6c994423ec..46ee64dd6f 100644
--- a/packages/react-day-picker/src/types/DayPickerBase.ts
+++ b/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;
diff --git a/packages/react-day-picker/src/types/EventHandlers.ts b/packages/react-day-picker/src/types/EventHandlers.ts
index 7a4df18805..cbeeb17922 100644
--- a/packages/react-day-picker/src/types/EventHandlers.ts
+++ b/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;