feat: add support for pointerenter and pointerleave events as a worka…

…round for bug #1613
gpbl · Dec 6, 2022 · be9c8ed · be9c8ed
1 parent 57091a2
commit be9c8ed
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -24,6 +24,8 @@ export type EventName =
   | 'onKeyUp'
   | 'onMouseEnter'
   | 'onMouseLeave'
+  | 'onPointerEnter'
+  | 'onPointerLeave'
   | 'onTouchCancel'
   | 'onTouchEnd'
   | 'onTouchMove'
@@ -37,6 +39,8 @@ export type DayEventName =
   | 'onDayKeyUp'
   | 'onDayMouseEnter'
   | 'onDayMouseLeave'
+  | 'onDayPointerEnter'
+  | 'onDayPointerLeave'
   | 'onDayTouchCancel'
   | 'onDayTouchEnd'
   | 'onDayTouchMove'
@@ -115,6 +119,12 @@ export function useDayEventHandlers(
   const onMouseLeave: MouseEventHandler = (e) => {
     dayPicker.onDayMouseLeave?.(date, activeModifiers, e);
   };
+  const onPointerEnter: MouseEventHandler = (e) => {
+    dayPicker.onDayPointerEnter?.(date, activeModifiers, e);
+  };
+  const onPointerLeave: MouseEventHandler = (e) => {
+    dayPicker.onDayPointerLeave?.(date, activeModifiers, e);
+  };
   const onTouchCancel: TouchEventHandler = (e) => {
     dayPicker.onDayTouchCancel?.(date, activeModifiers, e);
   };
@@ -186,6 +196,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
@@ -251,6 +251,8 @@ export interface DayPickerBase {
   onDayKeyDown?: DayKeyboardEventHandler;
   onDayKeyUp?: DayKeyboardEventHandler;
   onDayKeyPress?: DayKeyboardEventHandler;
+  onDayPointerEnter?: DayMouseEventHandler;
+  onDayPointerLeave?: DayMouseEventHandler;
   onDayTouchCancel?: DayTouchEventHandler;
   onDayTouchEnd?: DayTouchEventHandler;
   onDayTouchMove?: DayTouchEventHandler;