feat(datepicker): added onPageChange callback

packages/machines/date-picker/src/date-picker.machine.ts

@@ -289,27 +289,27 @@ export const machine = createMachine<DatePickerSchema>({
     "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<DatePickerSchema>({
         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 })

packages/machines/date-picker/src/date-picker.props.ts

@@ -31,6 +31,7 @@ export const props = createProps<DatePickerProps>()([
   "numOfMonths",
   "onFocusChange",
   "onOpenChange",
+  "onPageChange",
   "onValueChange",
   "onViewChange",
   "open",

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.
    */

packages/machines/date-picker/src/index.ts

@@ -28,6 +28,7 @@ export type {
   LocaleDetails,
   MonthGridProps,
   OpenChangeDetails,
+  PageChangeDetails,
   PositioningOptions,
   PresetTriggerProps,
   SelectionMode,