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;