From f845fced49f87bece1b4a710b13ced03eb2e045c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20F=C3=B6rg?= <michael.foerg@pentlandfirth.com>
Date: Mon, 27 Nov 2023 11:46:58 +0100
Subject: [PATCH] feat: added dateInView external control & onChange event

---
 src/components/datePicker.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/datePicker.tsx b/src/components/datePicker.tsx
index efe396c..84c6cac 100644
--- a/src/components/datePicker.tsx
+++ b/src/components/datePicker.tsx
@@ -33,6 +33,10 @@ export type DatePickerProps = {
   value: Date | DateRange | null;
   /** Callback for when the day (range) changes. */
   onChange: (value: Date | DateRange | null) => void;
+  /** Currently visible date. */
+  dateInView?: Date;
+  /** Callback for when the currently visible date changes. */
+  onDateInViewChange?: (value: Date) => void;
   /** If enabled, ranges can be selected. */
   rangeSelect?: boolean;
   /** Which locale to use to render the calendar. */
@@ -293,9 +297,15 @@ export function DatePicker(props: DatePickerProps) {
   }
 
   const mountTime = useMemo(() => new Date(), []);
-  const [dateInView, setDateInView] = useState<Date>(defaultDateInView ?? mountTime);
   const [dirty, setDirty] = useState<Partial<DateRange>>();
   const [hovered, setHovered] = useState<Date>();
+  const [dateInViewLocal, setDateInViewLocal] = useState<Date>(defaultDateInView ?? mountTime);
+  const dateInView = props.dateInView ?? dateInViewLocal;
+
+  function setDateInView(date: Date) {
+    setDateInViewLocal(date);
+    props.onDateInViewChange?.(date);
+  }
 
   const min = dirty ? dirty.min : value instanceof Date ? value : value?.min;
   const max = dirty ? dirty.max : value instanceof Date ? value : value?.max;