From 238da4637df676680859ae438b5ba3c0273b28b8 Mon Sep 17 00:00:00 2001
From: Ivan Kalinin <ivank.developer@gmail.com>
Date: Sun, 14 Dec 2025 21:02:53 -0800
Subject: [PATCH] feat(datepicker): implemented onVisibleRangeChange

---
 .../date-picker/src/date-picker.machine.ts     | 18 ++++++++++++------
 .../date-picker/src/date-picker.props.ts       |  1 +
 .../date-picker/src/date-picker.types.ts       |  9 +++++++++
 packages/machines/date-picker/src/index.ts     |  1 +
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/machines/date-picker/src/date-picker.machine.ts b/packages/machines/date-picker/src/date-picker.machine.ts
index b17bab2b24..92eea21004 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<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 })
diff --git a/packages/machines/date-picker/src/date-picker.props.ts b/packages/machines/date-picker/src/date-picker.props.ts
index bb7d566f11..15472796fc 100644
--- a/packages/machines/date-picker/src/date-picker.props.ts
+++ b/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",
diff --git a/packages/machines/date-picker/src/date-picker.types.ts b/packages/machines/date-picker/src/date-picker.types.ts
index b638c527ee..566f8cfa21 100644
--- a/packages/machines/date-picker/src/date-picker.types.ts
+++ b/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.
diff --git a/packages/machines/date-picker/src/index.ts b/packages/machines/date-picker/src/index.ts
index 341a4af53f..3c65c0ed41 100644
--- a/packages/machines/date-picker/src/index.ts
+++ b/packages/machines/date-picker/src/index.ts
@@ -37,6 +37,7 @@ export type {
   ValueChangeDetails,
   ViewChangeDetails,
   ViewProps,
+  VisibleRangeChangeDetails,
   VisibleRangeText,
   WeekDay,
   YearGridProps,