remove dependency on bind:this for presence

packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts

@@ -249,18 +249,21 @@ type AccordionContentStateProps = BoxedValues<{
 }> &
 	ReadonlyBoxedValues<{
 		forceMount: boolean;
+		id: string;
 	}>;
 
 class AccordionContentState {
 	item = undefined as unknown as AccordionItemState;
+	id = undefined as unknown as ReadonlyBox<string>;
+	node = boxedState<HTMLElement | null>(null);
 	originalStyles: { transitionDuration: string; animationName: string } | undefined = undefined;
 	isMountAnimationPrevented = false;
 	width = boxedState(0);
 	height = boxedState(0);
-	presentEl = boxedState<HTMLElement | undefined>(undefined);
 	forceMount = undefined as unknown as ReadonlyBox<boolean>;
-	present = $derived(this.item.isSelected);
+
 	#attrs = $derived({
+		id: this.id.value,
 		"data-state": getDataOpenClosed(this.item.isSelected),
 		"data-disabled": getDataDisabled(this.item.isDisabled),
 		"data-value": this.item.value,
@@ -276,7 +279,13 @@ class AccordionContentState {
 		this.item = item;
 		this.forceMount = props.forceMount;
 		this.isMountAnimationPrevented = this.item.isSelected;
-		this.presentEl = props.presentEl;
+		this.id = props.id;
+
+		$effect.root(() => {
+			tick().then(() => {
+				this.node.value = document.getElementById(this.id.value);
+			});
+		});
 
 		$effect.pre(() => {
 			const rAF = requestAnimationFrame(() => {
@@ -291,10 +300,11 @@ class AccordionContentState {
 		$effect(() => {
 			// eslint-disable-next-line no-unused-expressions
 			this.item.isSelected;
-			const node = untrack(() => this.presentEl.value);
+			const node = this.node.value;
 			if (!node) return;
 
 			tick().then(() => {
+				if (!this.node) return;
 				// get the dimensions of the element
 				this.originalStyles = this.originalStyles || {
 					transitionDuration: node.style.transitionDuration,

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

@@ -4,28 +4,30 @@
 	import Presence from "$lib/bits/utilities/presence.svelte";
 	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { styleToString } from "$lib/internal/style.js";
+	import { generateId } from "$lib/internal/id.js";
 
 	let {
 		child,
 		asChild,
 		el: elProp = $bindable(),
+		id: idProp = generateId(),
 		forceMount: forceMountProp = false,
 		children,
 		style: styleProp = {},
 		...restProps
-	}: AccordionContentProps & { forceMount?: boolean } = $props();
+	}: AccordionContentProps = $props();
 
 	const el = box(
 		() => elProp,
 		(v) => (elProp = v)
 	);
-
+	const id = readonlyBox(() => idProp);
 	const forceMount = readonlyBox(() => forceMountProp);
-	const content = getAccordionContentState({ presentEl: el, forceMount });
+	const content = getAccordionContentState({ presentEl: el, forceMount, id });
 </script>
 
-<Presence forceMount={true} present={content.present} bind:el={el.value}>
-	{#snippet presence({ node, present })}
+<Presence forceMount={true} present={content.item.isSelected} node={content.node}>
+	{#snippet presence({ present })}
 		{@const mergedProps = {
 			...restProps,
 			...content.props,
@@ -37,7 +39,7 @@
 		{#if asChild}
 			{@render child?.({ props: mergedProps })}
 		{:else}
-			<div {...mergedProps} bind:this={node.value} hidden={present.value ? undefined : true}>
+			<div {...mergedProps} bind:this={el.value} hidden={present.value ? undefined : true}>
 				{@render children?.()}
 			</div>
 		{/if}

packages/bits-ui/src/lib/bits/accordion/types.ts

@@ -63,13 +63,15 @@ export type AccordionContentPropsWithoutHTML<
 	inTransitionConfig?: TransitionParams<In>;
 	outTransition?: Out;
 	outTransitionConfig?: TransitionParams<Out>;
+	forceMount?: boolean;
+	id?: string;
 }>;
 
 export type AccordionContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition,
-> = AccordionContentPropsWithoutHTML<T, In, Out> & PrimitiveDivAttributes;
+> = AccordionContentPropsWithoutHTML<T, In, Out> & Omit<PrimitiveDivAttributes, "id">;
 
 export type AccordionHeaderPropsWithoutHTML = WithAsChild<{
 	asChild?: boolean;

packages/bits-ui/src/lib/bits/utilities/presence.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { Box, box, readonlyBox } from "$lib/internal/box.svelte.js";
+	import { Box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { usePresence } from "$lib/internal/use-presence.svelte.js";
 
 	type Props = {
@@ -14,29 +14,24 @@
 		 */
 		forceMount?: boolean;
 
-		presence?: Snippet<[{ present: { value: boolean }; node: Box<HTMLElement | undefined> }]>;
+		presence?: Snippet<[{ present: { value: boolean } }]>;
 
-		el?: HTMLElement;
+		node: Box<HTMLElement | null>;
 	};
 
 	let {
 		present: presentProp,
 		forceMount: forceMountProp = false,
 		presence,
-		el = $bindable(),
+		node,
 	}: Props = $props();
 
 	const forceMount = readonlyBox(() => forceMountProp);
 
-	const node = box(
-		() => el,
-		(v) => (el = v)
-	);
-
 	const present = readonlyBox(() => presentProp);
 	const isPresent = usePresence(present, node);
 </script>
 
 {#if forceMount.value || present.value || isPresent.value}
-	{@render presence?.({ present: isPresent, node })}
+	{@render presence?.({ present: isPresent })}
 {/if}

packages/bits-ui/src/lib/internal/use-presence.svelte.ts

@@ -2,11 +2,18 @@ import { onDestroy, tick } from "svelte";
 import { type Box, type ReadonlyBox, box, boxedState, watch } from "./box.svelte.js";
 import { useStateMachine } from "$lib/internal/index.js";
 
-export function usePresence(present: ReadonlyBox<boolean>, node: Box<HTMLElement | undefined>) {
+export function usePresence(present: ReadonlyBox<boolean>, node: Box<HTMLElement | null>) {
 	const styles = boxedState({}) as unknown as Box<CSSStyleDeclaration>;
 	const prevAnimationNameState = boxedState("none");
 	const initialState = present.value ? "mounted" : "unmounted";
 
+	$effect.pre(() => {
+		// tick().then(() => {
+		// 	const el = document.getElementById(id.value);
+		// 	console.log(el);
+		// });
+	});
+
 	const { state, dispatch } = useStateMachine(initialState, {
 		mounted: {
 			UNMOUNT: "unmounted",
@@ -24,6 +31,7 @@ export function usePresence(present: ReadonlyBox<boolean>, node: Box<HTMLElement
 	watch(
 		present,
 		async (currPresent, prevPresent) => {
+			if (!node.value) return;
 			const hasPresentChanged = currPresent !== prevPresent;
 			if (!hasPresentChanged) return;
 
@@ -61,6 +69,7 @@ export function usePresence(present: ReadonlyBox<boolean>, node: Box<HTMLElement
 	 */
 
 	function handleAnimationEnd(event: AnimationEvent) {
+		if (!node.value) return;
 		const currAnimationName = getAnimationName(node.value);
 		const isCurrentAnimation =
 			currAnimationName.includes(event.animationName) || currAnimationName === "none";
@@ -71,11 +80,13 @@ export function usePresence(present: ReadonlyBox<boolean>, node: Box<HTMLElement
 	}
 
 	function handleAnimationStart(event: AnimationEvent) {
+		if (!node.value) return;
 		if (event.target === node.value) {
 			prevAnimationNameState.value = getAnimationName(node.value);
 		}
 	}
 	const stateWatcher = watch(state, () => {
+		if (!node.value) return;
 		const currAnimationName = getAnimationName(node.value);
 		prevAnimationNameState.value = state.value === "mounted" ? currAnimationName : "none";
 	});