feat(datepicker): added onVisibleRangeChange 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", "invokeOnVisibleRangeChange"],
       },
       {
         guard: "isMonthView",
-        actions: ["focusNextYear", "announceVisibleRange"],
+        actions: ["focusNextYear", "announceVisibleRange", "invokeOnVisibleRangeChange"],
       },
       {
-        actions: ["focusNextPage"],
+        actions: ["focusNextPage", "invokeOnVisibleRangeChange"],
       },
     ],
     "GOTO.PREV": [
       {
         guard: "isYearView",
-        actions: ["focusPreviousDecade", "announceVisibleRange"],
+        actions: ["focusPreviousDecade", "announceVisibleRange", "invokeOnVisibleRangeChange"],
       },
       {
         guard: "isMonthView",
-        actions: ["focusPreviousYear", "announceVisibleRange"],
+        actions: ["focusPreviousYear", "announceVisibleRange", "invokeOnVisibleRangeChange"],
       },
       {
-        actions: ["focusPreviousPage"],
+        actions: ["focusPreviousPage", "invokeOnVisibleRangeChange"],
       },
     ],
   },
@@ -1147,6 +1147,12 @@ export const machine = createMachine<DatePickerSchema>({
         if (prop("inline")) return
         prop("onOpenChange")?.({ open: false, value: context.get("value") })
       },
+      invokeOnVisibleRangeChange({ prop, context, computed }) {
+        prop("onVisibleRangeChange")?.({
+          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

@@ -33,6 +33,7 @@ export const props = createProps<DatePickerProps>()([
   "onOpenChange",
   "onValueChange",
   "onViewChange",
+  "onVisibleRangeChange",
   "open",
   "defaultOpen",
   "positioning",

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

@@ -34,6 +34,11 @@ export interface ViewChangeDetails {
   view: DateView
 }
 
+export interface VisibleRangeChangeDetails {
+  view: DateView
+  visibleRange: { start: DateValue; end: DateValue }
+}
+
 export interface OpenChangeDetails {
   open: boolean
   value: DateValue[]
@@ -196,6 +201,10 @@ export interface DatePickerProps extends DirectionProperty, CommonProperties {
   /**
    * Function called when the calendar opens or closes.
    */
+  /**
+   * Function called when the visible range changes.
+   */
+  onVisibleRangeChange?: ((details: VisibleRangeChangeDetails) => void) | undefined
   onOpenChange?: ((details: OpenChangeDetails) => void) | undefined
   /**
    * Returns whether a date of the calendar is available.

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

@@ -37,6 +37,7 @@ export type {
   ValueChangeDetails,
   ViewChangeDetails,
   ViewProps,
+  VisibleRangeChangeDetails,
   VisibleRangeText,
   WeekDay,
   YearGridProps,