From 2c02d45168c70fe8ae6d93262988309061ee5334 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Fri, 1 Nov 2024 19:25:23 -0400
Subject: [PATCH] fix: `RangeCalendar` external value updates (#851)

---
 .changeset/selfish-boxes-cheat.md               |  5 +++++
 .../components/range-calendar.svelte            |  2 --
 .../range-calendar/range-calendar.svelte.ts     | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/selfish-boxes-cheat.md

diff --git a/.changeset/selfish-boxes-cheat.md b/.changeset/selfish-boxes-cheat.md
new file mode 100644
index 000000000..8c7a2fa26
--- /dev/null
+++ b/.changeset/selfish-boxes-cheat.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: Range Calendar external value updates
diff --git a/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte b/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte
index dda5ded58..2ae0d57b9 100644
--- a/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte
+++ b/packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte
@@ -63,8 +63,6 @@
 		}
 	}
 
-	value === undefined && (value = { start: undefined, end: undefined });
-
 	const rootState = useRangeCalendarRoot({
 		id: box.with(() => id),
 		ref: box.with(
diff --git a/packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts b/packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts
index c7a567040..119133ab3 100644
--- a/packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts
@@ -188,6 +188,23 @@ export class RangeCalendarRootState {
 			node.textContent = this.fullCalendarLabel;
 		});
 
+		/**
+		 * Synchronize the start and end values with the `value` in case
+		 * it is updated externally.
+		 */
+		$effect(() => {
+			const value = this.value.current;
+			untrack(() => {
+				if (value.start && value.end) {
+					this.startValue.current = value.start;
+					this.endValue.current = value.end;
+				} else if (value.start) {
+					this.startValue.current = value.start;
+					this.endValue.current = undefined;
+				}
+			});
+		});
+
 		/**
 		 * Synchronize the placeholder value with the current start value
 		 */