diff --git a/packages/machines/date-picker/src/date-picker.machine.ts b/packages/machines/date-picker/src/date-picker.machine.ts index b17bab2b24..522794f843 100644 --- a/packages/machines/date-picker/src/date-picker.machine.ts +++ b/packages/machines/date-picker/src/date-picker.machine.ts @@ -289,27 +289,27 @@ export const machine = createMachine({ "GOTO.NEXT": [ { guard: "isYearView", - actions: ["focusNextDecade", "announceVisibleRange"], + actions: ["focusNextDecade", "announceVisibleRange", "invokeOnPageChange"], }, { guard: "isMonthView", - actions: ["focusNextYear", "announceVisibleRange"], + actions: ["focusNextYear", "announceVisibleRange", "invokeOnPageChange"], }, { - actions: ["focusNextPage"], + actions: ["focusNextPage", "invokeOnPageChange"], }, ], "GOTO.PREV": [ { guard: "isYearView", - actions: ["focusPreviousDecade", "announceVisibleRange"], + actions: ["focusPreviousDecade", "announceVisibleRange", "invokeOnPageChange"], }, { guard: "isMonthView", - actions: ["focusPreviousYear", "announceVisibleRange"], + actions: ["focusPreviousYear", "announceVisibleRange", "invokeOnPageChange"], }, { - actions: ["focusPreviousPage"], + actions: ["focusPreviousPage", "invokeOnPageChange"], }, ], }, @@ -1147,6 +1147,14 @@ export const machine = createMachine({ if (prop("inline")) return prop("onOpenChange")?.({ open: false, value: context.get("value") }) }, + invokeOnPageChange({ event, prop, context, computed }) { + const direction = event.type === "GOTO.NEXT" ? "next" : "prev" + prop("onPageChange")?.({ + direction, + view: context.get("view"), + visibleRange: computed("visibleRange"), + }) + }, toggleVisibility({ event, send, prop }) { send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: event }) diff --git a/packages/machines/date-picker/src/date-picker.props.ts b/packages/machines/date-picker/src/date-picker.props.ts index bb7d566f11..875f1baf9b 100644 --- a/packages/machines/date-picker/src/date-picker.props.ts +++ b/packages/machines/date-picker/src/date-picker.props.ts @@ -31,6 +31,7 @@ export const props = createProps()([ "numOfMonths", "onFocusChange", "onOpenChange", + "onPageChange", "onValueChange", "onViewChange", "open", diff --git a/packages/machines/date-picker/src/date-picker.types.ts b/packages/machines/date-picker/src/date-picker.types.ts index b638c527ee..9b3dbc9a77 100644 --- a/packages/machines/date-picker/src/date-picker.types.ts +++ b/packages/machines/date-picker/src/date-picker.types.ts @@ -34,6 +34,12 @@ export interface ViewChangeDetails { view: DateView } +export interface PageChangeDetails { + direction: "next" | "prev" + view: DateView + visibleRange: { start: DateValue; end: DateValue } +} + export interface OpenChangeDetails { open: boolean value: DateValue[] @@ -189,6 +195,10 @@ export interface DatePickerProps extends DirectionProperty, CommonProperties { * Function called when the focused date changes. */ onFocusChange?: ((details: FocusChangeDetails) => void) | undefined + /** + * Function called when the page changes (next/prev navigation). + */ + onPageChange?: ((details: PageChangeDetails) => void) | undefined /** * Function called when the view changes. */ diff --git a/packages/machines/date-picker/src/index.ts b/packages/machines/date-picker/src/index.ts index 341a4af53f..f6ee0d0a3b 100644 --- a/packages/machines/date-picker/src/index.ts +++ b/packages/machines/date-picker/src/index.ts @@ -28,6 +28,7 @@ export type { LocaleDetails, MonthGridProps, OpenChangeDetails, + PageChangeDetails, PositioningOptions, PresetTriggerProps, SelectionMode,