aplance-ui 1.4.0 → 1.5.0

package/registry/components/ui/input-fields/date-picker/date-picker.tsx

@@ -1,6 +1,5 @@
 import {
   useCallback,
-  useEffect,
   useId,
   useMemo,
   useState,
@@ -151,12 +150,40 @@ export const DatePicker = (props: DatePickerProps) => {
       ? (currentValue as DateRange)
       : undefined;
 
+  const selectedSingleText = selectedSingle
+    ? toDateInputString(selectedSingle)
+    : "";
+  const selectedRangeFromText = selectedRange?.from
+    ? toDateInputString(selectedRange.from)
+    : "";
+  const selectedRangeToText = selectedRange?.to
+    ? toDateInputString(selectedRange.to)
+    : "";
+
   const [isOpen, setIsOpen] = useState(false);
-  const [singleManualText, setSingleManualText] = useState("");
+  const [singleManualText, setSingleManualText] = useState(selectedSingleText);
   const [rangeManualText, setRangeManualText] = useState<{
     from: string;
     to: string;
-  }>({ from: "", to: "" });
+  }>({ from: selectedRangeFromText, to: selectedRangeToText });
+
+  // The typed text follows the value whenever it changes, from outside or by
+  // a pick, in the render that sees the change.
+  const valueTextKey = isRange
+    ? `range:${selectedRangeFromText}|${selectedRangeToText}`
+    : `single:${selectedSingleText}`;
+  const [seenValueTextKey, setSeenValueTextKey] = useState(valueTextKey);
+  if (valueTextKey !== seenValueTextKey) {
+    setSeenValueTextKey(valueTextKey);
+    if (isRange) {
+      setRangeManualText({
+        from: selectedRangeFromText,
+        to: selectedRangeToText,
+      });
+    } else {
+      setSingleManualText(selectedSingleText);
+    }
+  }
 
   const resolvedRangeMonthCount = isRange
     ? Math.max(1, numberOfMonths ?? calendar?.numberOfMonths ?? 2)
@@ -223,53 +250,26 @@ export const DatePicker = (props: DatePickerProps) => {
   const resolvedPlaceholder =
     placeholder ?? (isRange ? "Select date range..." : "Select date...");
 
-  const selectedSingleText = selectedSingle
-    ? toDateInputString(selectedSingle)
-    : "";
-  const selectedRangeFromText = selectedRange?.from
-    ? toDateInputString(selectedRange.from)
-    : "";
-  const selectedRangeToText = selectedRange?.to
-    ? toDateInputString(selectedRange.to)
-    : "";
-
-  useEffect(() => {
-    if (!isRange || resolvedRangeMonthCount <= 1) return;
-
-    setRangeCalendarMonths((prev) => {
-      if (prev.length === resolvedRangeMonthCount) return prev;
-
-      const seed = prev[0] ??
-        toMonthStart(selectedRange?.from ?? selectedRange?.to ?? new Date());
-
-      return Array.from({ length: resolvedRangeMonthCount }, (_, index) =>
-        prev[index] ?? addMonthOffset(seed, index),
-      );
-    });
-  }, [
-    isRange,
-    resolvedRangeMonthCount,
-    selectedRange?.from,
-    selectedRange?.to,
-  ]);
-
-  useEffect(() => {
-    if (isRange) {
-      setRangeManualText({
-        from: selectedRangeFromText,
-        to: selectedRangeToText,
-      });
-      return;
-    }
-
-    setSingleManualText(selectedSingleText);
-  }, [isRange, selectedRangeFromText, selectedRangeToText, selectedSingleText]);
-
-  // Sync visible calendar months when popover opens or value changes externally
-  useEffect(() => {
-    if (!isOpen) return;
+  // One month per calendar shown: when the count changes, the months follow.
+  if (
+    isRange &&
+    resolvedRangeMonthCount > 1 &&
+    rangeCalendarMonths.length !== resolvedRangeMonthCount
+  ) {
+    const seed = rangeCalendarMonths[0] ??
+      toMonthStart(selectedRange?.from ?? selectedRange?.to ?? new Date());
+    setRangeCalendarMonths(
+      Array.from({ length: resolvedRangeMonthCount }, (_, index) =>
+        rangeCalendarMonths[index] ?? addMonthOffset(seed, index),
+      ),
+    );
+  }
 
-    if (isRange) {
+  // Opening shows the months of the value, in the render that opens it.
+  const [wasOpen, setWasOpen] = useState(isOpen);
+  if (isOpen !== wasOpen) {
+    setWasOpen(isOpen);
+    if (isOpen && isRange) {
       const fromMonth = selectedRange?.from
         ? toMonthStart(selectedRange.from)
         : undefined;
@@ -298,14 +298,10 @@ export const DatePicker = (props: DatePickerProps) => {
 
       const target = selectedRange?.from ?? selectedRange?.to;
       if (target) setCalendarMonth(toMonthStart(target));
-      return;
-    }
-
-    if (selectedSingle) {
+    } else if (isOpen && selectedSingle) {
       setCalendarMonth(toMonthStart(selectedSingle));
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+  }
 
   const displayText = useMemo(() => {
     if (formatDisplay) {