Repository: melt-ui/melt-ui (ts)

Issue:
🐛Bug: Types of property `'aria-modal'` are incompatible
**Describe the bug**
TypeScript type conflict when declaring `{...$content}` `use:content` of `createModal()`

```ts
Types of property ''aria-modal'' are incompatible.
Type 'string | undefined' is not assignable to type 'Booleanish | null | undefined'.
```

These are the type declarations which enter in conflict:
* https://github.com/melt-ui/melt-ui/blob/3557427f0e175765622257ef2eff1d2482dbfbb5/src/lib/builders/dialog/create.ts#L192
* https://github.com/sveltejs/svelte/blob/b7af2ffabdda5124a95c7e218d8a650c3a6d9cbf/packages/svelte/elements.d.ts#L521

**To Reproduce**
Similar to the example of https://github.com/melt-ui/melt-ui/issues/764 but let me know if an example is necessary and I will be happy to create one.

**Expected behavior**
There is no mismatch between internal types. svelte-check keeps succeeding.

**Additional context**
* `"svelte-check"`: `"3.6.1"`
* `"svelte"`: `"4.2.7"`
* `"@sveltejs/kit"`: `"1.27.6"`
* `"@melt-ui/svelte"`: `">=0.63.1"`

🔙 Regression introduced in https://github.com/melt-ui/melt-ui/pull/769

Pull request description:
fix: aria-modal attr type
# Description
fix: `aria-modal` attr TS type matches the type of a Svelte Element

# Context
Fixes #787 


Patch:
diff --git a/.changeset/silent-doors-impress.md b/.changeset/silent-doors-impress.md
new file mode 100644
index 00000000..ccce8874
--- /dev/null
+++ b/.changeset/silent-doors-impress.md
@@ -0,0 +1,5 @@
+---
+"@melt-ui/svelte": patch
+---
+
+- Dialog: fix `aria-modal` attribute type
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f7111363..b2d5774d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @melt-ui/svelte
 
+## 0.64.1
+
+### Patch Changes
+
+- fix: bug with range calendar `onValueChange` ([#792](https://github.com/melt-ui/melt-ui/pull/792))
+
 ## 0.64.0
 
 ### Minor Changes
diff --git a/package.json b/package.json
index d3a1aea5..71b02bc7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@melt-ui/svelte",
-	"version": "0.64.0",
+	"version": "0.64.1",
 	"license": "MIT",
 	"repository": "github:melt-ui/melt-ui",
 	"author": "Thomas G. Lopes",
diff --git a/src/lib/builders/dialog/create.ts b/src/lib/builders/dialog/create.ts
index 8ce36f3a..ffa9beab 100644
--- a/src/lib/builders/dialog/create.ts
+++ b/src/lib/builders/dialog/create.ts
@@ -189,7 +189,7 @@ export function createDialog(props?: CreateDialogProps) {
 				role: get(role),
 				'aria-describedby': $descriptionId,
 				'aria-labelledby': $titleId,
-				'aria-modal': $isVisible ? 'true' : undefined,
+				'aria-modal': $isVisible ? ('true' as const) : undefined,
 				'data-state': $isVisible ? 'open' : 'closed',
 				tabindex: -1,
 				hidden: $isVisible ? undefined : true,
diff --git a/src/lib/builders/range-calendar/create.ts b/src/lib/builders/range-calendar/create.ts
index 7ef37cac..8d8b2e2a 100644
--- a/src/lib/builders/range-calendar/create.ts
+++ b/src/lib/builders/range-calendar/create.ts
@@ -108,6 +108,8 @@ export function createRangeCalendar<T extends DateValue = DateValue>(
 		defaultPlaceholder: withDefaults.defaultPlaceholder,
 	});
 	const formatter = createFormatter(get(locale));
+	const valueWritable = withDefaults.value ?? writable(withDefaults.defaultValue);
+	const value = overridable(valueWritable, withDefaults.onValueChange);
 
 	const defaultStart = withDefaults.value ? get(withDefaults.value)?.start : undefined;
 	const startValue = writable<DateValue | undefined>(
@@ -117,9 +119,6 @@ export function createRangeCalendar<T extends DateValue = DateValue>(
 	const defaultEnd = withDefaults.value ? get(withDefaults.value)?.end : undefined;
 	const endValue = writable<DateValue | undefined>(defaultEnd ?? withDefaults.defaultValue?.end);
 
-	const valueWritable = withDefaults.value ?? writable(withDefaults.defaultValue);
-	const value = overridable(valueWritable, withDefaults.onValueChange);
-
 	const placeholderWritable =
 		withDefaults.placeholder ?? writable(withDefaults.defaultPlaceholder ?? defaultDate);
 	const placeholder = dateStore(
@@ -994,8 +993,12 @@ export function createRangeCalendar<T extends DateValue = DateValue>(
 	});
 
 	effect([startValue, endValue], ([$startValue, $endValue]) => {
+		const $value = get(value);
+
+		if ($value && $value.start === $startValue && $value.end === $endValue) return;
+
 		if ($startValue && $endValue) {
-			valueWritable.update((prev) => {
+			value.update((prev) => {
 				if (prev.start === $startValue && prev.end === $endValue) {
 					return prev;
 				}
@@ -1012,10 +1015,12 @@ export function createRangeCalendar<T extends DateValue = DateValue>(
 				}
 			});
 		} else {
-			valueWritable.set({
-				start: undefined,
-				end: undefined,
-			});
+			if ($value && $value.start && $value.end) {
+				value.set({
+					start: undefined,
+					end: undefined,
+				});
+			}
 		}
 	});
 


Test patch:
diff --git a/src/tests/range-calendar/RangeCalendar.spec.ts b/src/tests/range-calendar/RangeCalendar.spec.ts
index 725bbfbd..493ef4f0 100644
--- a/src/tests/range-calendar/RangeCalendar.spec.ts
+++ b/src/tests/range-calendar/RangeCalendar.spec.ts
@@ -392,12 +392,9 @@ describe('Range Calendar', () => {
 		const thirdDayInMonth = getByTestId('month-1-date-3');
 		await user.click(thirdDayInMonth);
 		await tick();
-		const fourthDayInMonth = getByTestId('month-1-date-4');
-		await user.click(fourthDayInMonth);
-		await tick();
 
 		const selectedDaysAfterClick = getByTestId('calendar').querySelectorAll('[data-selected]');
-		expect(selectedDaysAfterClick).toHaveLength(2);
+		expect(selectedDaysAfterClick).toHaveLength(3);
 	});
 
 	test('unavailable dates behavior', async () => {
diff --git a/src/tests/range-calendar/RangeCalendarTest.svelte b/src/tests/range-calendar/RangeCalendarTest.svelte
index 05b70b5a..5f8f74f7 100644
--- a/src/tests/range-calendar/RangeCalendarTest.svelte
+++ b/src/tests/range-calendar/RangeCalendarTest.svelte
@@ -70,8 +70,8 @@
 	<div class="flex w-full flex-col items-center gap-3">
 		<div class="flex w-full items-center justify-center">
 			<p class="text-xs" data-testid="inside-value">{$insideValue}</p>
-			<p data-testid="start-value">{$insideValue.start}</p>
-			<p data-testid="end-value">{$insideValue.end}</p>
+			<p data-testid="start-value">{$insideValue?.start}</p>
+			<p data-testid="end-value">{$insideValue?.end}</p>
 		</div>
 
 		<div class="z-10 w-80 rounded-[4px] bg-white p-3 shadow-sm">