next: downgrade svelte

package.json

@@ -26,7 +26,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "5.0.0-next.155",
+		"svelte": "5.0.0-next.143",
 		"svelte-eslint-parser": "^0.34.1",
 		"wrangler": "^3.44.0"
 	},

packages/bits-ui/package.json

@@ -45,7 +45,7 @@
 		"jsdom": "^24.0.0",
 		"publint": "^0.2.7",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.155",
+		"svelte": "5.0.0-next.143",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",

packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content.svelte

@@ -8,13 +8,14 @@
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import { isElement } from "$lib/internal/is.js";
 	import type { InteractOutsideEvent } from "$lib/bits/utilities/dismissable-layer/types.js";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		id = useId(),
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		loop = true,
 		onInteractOutside = noop,
 		// we need to explicitly pass this prop to the PopperLayer to override
@@ -25,18 +26,25 @@
 		...restProps
 	}: ContentProps = $props();
 
+	let isMounted = $state(false);
+
 	const contentState = useMenuContent({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		isMounted: box.with(() => isMounted),
 	});
 
 	function handleInteractOutsideStart(e: InteractOutsideEvent) {
 		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerId.value) {
+		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
 			e.preventDefault();
 			return;
 		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerId.value}`)) {
+		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
 			e.preventDefault();
 		}
 	}
@@ -88,5 +96,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:isMounted />
 	{/snippet}
 </PopperLayer>

packages/bits-ui/src/lib/bits/context-menu/components/context-menu-trigger.svelte

@@ -8,7 +8,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		child,
 		children,
@@ -19,6 +19,10 @@
 	const triggerState = useMenuContextTrigger({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(

packages/bits-ui/src/lib/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -7,23 +7,31 @@
 	import { noop } from "$lib/internal/callbacks.js";
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import { isElementOrSVGElement } from "$lib/internal/is.js";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		id = useId(),
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		loop = true,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: ContentProps = $props();
 
+	let isMounted = $state(false);
+
 	const contentState = useMenuContent({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		isMounted: box.with(() => isMounted),
 	});
 
 	const mergedProps = $derived(
@@ -48,21 +56,21 @@
 	present={contentState.parentMenu.open.value || forceMount}
 	onInteractOutsideStart={(e) => {
 		if (!isElementOrSVGElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerId.value) {
+		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
 			e.preventDefault();
 			return;
 		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerId.value}`)) {
+		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
 			e.preventDefault();
 		}
 	}}
 	onInteractOutside={(e) => {
 		if (!isElementOrSVGElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerId.value) {
+		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
 			e.preventDefault();
 			return;
 		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerId.value}`)) {
+		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
 			e.preventDefault();
 			return;
 		}
@@ -87,5 +95,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:isMounted />
 	{/snippet}
 </PopperLayer>

packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte

@@ -10,7 +10,7 @@
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		checked = $bindable(false),
 		id = useId(),
 		onCheckedChange = noop,
@@ -32,6 +32,10 @@
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
 		onSelect: box.with(() => handleSelect),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	function handleSelect(e: Event) {

packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte

@@ -8,32 +8,40 @@
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import { isElement } from "$lib/internal/is.js";
 	import type { InteractOutsideEvent } from "$lib/bits/utilities/dismissable-layer/types.js";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		id = useId(),
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		loop = true,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: ContentProps = $props();
 
+	let isMounted = $state(false);
+
 	const contentState = useMenuContent({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		isMounted: box.with(() => isMounted),
 	});
 
 	function handleInteractOutsideStart(e: InteractOutsideEvent) {
 		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerId.value) {
+		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
 			e.preventDefault();
 			return;
 		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerId.value}`)) {
+		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
 			e.preventDefault();
 		}
 	}
@@ -71,5 +79,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:isMounted />
 	{/snippet}
 </PopperLayer>

packages/bits-ui/src/lib/bits/menu/components/menu-item.svelte

@@ -10,7 +10,7 @@
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		disabled = false,
 		onSelect = noop,
@@ -21,6 +21,10 @@
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
 		onSelect: box.with(() => onSelect),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte

@@ -4,12 +4,14 @@
 	import { useMenuRadioGroup } from "../menu.svelte.js";
 	import { noop } from "$lib/internal/callbacks.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
 	let {
+		id = useId(),
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,
 		...restProps
@@ -25,6 +27,11 @@
 				}
 			}
 		),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, radioGroupState.props));

packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte

@@ -10,7 +10,7 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		value,
 		onSelect = noop,
 		id = useId(),
@@ -23,6 +23,10 @@
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
 		onSelect: box.with(() => handleSelect),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	function handleSelect(e: Event) {

packages/bits-ui/src/lib/bits/menu/components/menu-sub-content.svelte

@@ -9,10 +9,11 @@
 	import { noop } from "$lib/internal/callbacks.js";
 	import { isHTMLElement } from "$lib/internal/is.js";
 	import { afterTick } from "$lib/internal/afterTick.js";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
@@ -26,9 +27,16 @@
 		...restProps
 	}: SubContentProps = $props();
 
+	let isMounted = $state(false);
+
 	const subContentState = useMenuContent({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		isMounted: box.with(() => isMounted),
 	});
 
 	function onkeydown(e: KeyboardEvent) {
@@ -38,9 +46,7 @@
 		);
 		if (isKeyDownInside && isCloseKey) {
 			subContentState.parentMenu.onClose();
-			const triggerNode = document.getElementById(
-				subContentState.parentMenu.triggerId.value ?? ""
-			);
+			const triggerNode = subContentState.parentMenu.triggerNode;
 			triggerNode?.focus();
 			e.preventDefault();
 		}
@@ -92,7 +98,7 @@
 		// on pointer interaction.
 		if (!isHTMLElement(e.target)) return;
 
-		if (e.target.id !== subContentState.parentMenu.triggerId.value) {
+		if (e.target.id !== subContentState.parentMenu.triggerNode?.id) {
 			subContentState.parentMenu.onClose();
 		}
 	}}
@@ -108,5 +114,6 @@
 				{@render children?.()}
 			</div>
 		{/if}
+		<Mounted bind:isMounted />
 	{/snippet}
 </PopperLayer>

packages/bits-ui/src/lib/bits/menu/components/menu-sub-trigger.svelte

@@ -8,7 +8,7 @@
 	let {
 		id = useId(),
 		disabled = false,
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
@@ -18,6 +18,10 @@
 	const subTriggerState = useMenuSubTrigger({
 		disabled: box.with(() => disabled),
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, subTriggerState.props));

packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte

@@ -8,7 +8,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		child,
 		children,
@@ -19,6 +19,10 @@
 	const triggerState = useMenuDropdownTrigger({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));