next: update svelte and cleanup (#577)

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.143",
+		"svelte": "^5.0.0-next.157",
 		"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.143",
+		"svelte": "5.0.0-next.157",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",

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

@@ -1,7 +1,6 @@
-import { box } from "svelte-toolbelt";
 import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
-import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
 import { createContext } from "$lib/internal/createContext.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 

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

@@ -1,5 +1,5 @@
 import type { WithRefProps } from "$lib/internal/types.js";
-import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
 
 const ROOT_ATTR = "data-label-root";
 

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

@@ -36,7 +36,7 @@ import { mergeProps } from "$lib/internal/mergeProps.js";
 import { createContext } from "$lib/internal/createContext.js";
 import type { Direction } from "$lib/shared/index.js";
 import { afterTick } from "$lib/internal/afterTick.js";
-import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
 import { isPointerInGraceArea, makeHullFromElements } from "$lib/internal/polygon.js";
 
 const TRIGGER_ATTR = "data-menu-trigger";

packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts

@@ -20,7 +20,7 @@ import { useId } from "$lib/internal/useId.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { useArrowNavigation } from "$lib/internal/useArrowNavigation.js";
 import { boxAutoReset } from "$lib/internal/boxAutoReset.svelte.js";
-import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
 import type { ElementRef } from "$lib/internal/types.js";
 import { afterTick } from "$lib/internal/afterTick.js";
 import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";

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

@@ -1,6 +1,6 @@
 import { box } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
-import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
 import { createContext } from "$lib/internal/createContext.js";

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

@@ -1,6 +1,6 @@
 import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { WithRefProps } from "$lib/internal/types.js";
-import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useRefById.svelte.js";
 
 const ROOT_ATTR = "data-progress-root";
 

packages/bits-ui/src/lib/bits/select/components/select-arrow.svelte

@@ -3,12 +3,20 @@
 	import { useSelectArrow } from "../select.svelte.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
-	let { ref = $bindable(), ...restProps }: ArrowProps = $props();
+	let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
 
-	const arrowState = useSelectArrow();
+	const arrowState = useSelectArrow({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
 	const mergedProps = $derived(mergeProps(restProps, arrowState.props as any));
 </script>
 
-<FloatingLayer.Arrow bind:ref {...mergedProps} />
+<FloatingLayer.Arrow {...mergedProps} />

packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte

@@ -13,7 +13,6 @@
 		child,
 		align = "start",
 		collisionPadding = CONTENT_MARGIN,
-		ref = $bindable(),
 		enabled = false,
 		...restProps
 	}: WithoutChildren<PopperLayerImplProps> &
@@ -32,7 +31,7 @@
 		{#if asChild}
 			{@render child?.({ props: finalProps })}
 		{:else}
-			<div {...finalProps} bind:this={ref}>
+			<div {...finalProps}>
 				{@render children?.()}
 			</div>
 		{/if}

packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte

@@ -74,14 +74,12 @@
 							<SelectContentFloating
 								{...restProps}
 								{...mergedProps}
-								bind:ref
 								onPlaced={() => (contentState.isPositioned.value = true)}
 							/>
 						{:else}
 							<SelectContentItemAligned
 								{...restProps}
 								{...mergedProps}
-								bind:ref
 								onPlaced={() => (contentState.isPositioned.value = true)}
 							/>
 						{/if}

packages/bits-ui/src/lib/bits/select/components/select-content-item-aligned.svelte

@@ -9,7 +9,6 @@
 		child,
 		children,
 		asChild,
-		ref = $bindable(),
 		preventScroll = true,
 		onPlaced,
 		...restProps
@@ -32,7 +31,7 @@
 	{#if asChild}
 		{@render child?.({ props: mergedProps })}
 	{:else}
-		<div bind:this={ref} {...mergedProps}>
+		<div {...mergedProps}>
 			{@render children?.()}
 		</div>
 	{/if}

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

@@ -10,17 +10,21 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		forceMount = false,
 		position = "floating",
 		...restProps
 	}: ContentProps = $props();
 
-	const contentState = useSelectContentFrag({ id: box.with(() => id) });
+	const contentState = useSelectContentFrag();
 
 	const contentContext = useSelectContent({
 		id: box.with(() => id),
 		position: box.with(() => position),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const isPresent = $derived(contentState.root.open.value || forceMount);

packages/bits-ui/src/lib/bits/select/components/select-group-label.svelte

@@ -9,13 +9,17 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		...restProps
 	}: GroupLabelProps = $props();
 
 	const groupLabelState = useSelectGroupLabel({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, groupLabelState.props));
@@ -24,7 +28,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/select/components/select-group.svelte

@@ -2,17 +2,32 @@
 	import type { GroupProps } from "../index.js";
 	import { useSelectGroup } from "../select.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
-	let { asChild, children, child, ref = $bindable(), ...restProps }: GroupProps = $props();
+	let {
+		asChild,
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: GroupProps = $props();
 
-	const groupState = useSelectGroup();
+	const groupState = useSelectGroup({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/select/components/select-icon.svelte

@@ -2,10 +2,25 @@
 	import type { IconProps } from "../index.js";
 	import { useSelectIcon } from "../select.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
-	let { asChild, children, child, ref = $bindable(), ...restProps }: IconProps = $props();
+	let {
+		asChild,
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: IconProps = $props();
 
-	const iconState = useSelectIcon();
+	const iconState = useSelectIcon({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
 	const mergedProps = $derived(mergeProps(restProps, iconState.props));
 </script>

packages/bits-ui/src/lib/bits/select/components/select-item-text.svelte

@@ -8,7 +8,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
@@ -17,6 +17,10 @@
 
 	const itemTextState = useSelectItemText({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemTextState.props));
@@ -31,7 +35,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<span {...mergedProps} bind:this={ref}>
+	<span {...mergedProps}>
 		{@render children?.()}
 	</span>
 {/if}

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

@@ -9,7 +9,7 @@
 		id = useId(),
 		value,
 		textValue = "",
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
@@ -22,6 +22,10 @@
 		disabled: box.with(() => disabled),
 		value: box.with(() => value),
 		textValue: box.with(() => textValue),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));
@@ -30,7 +34,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps, selected: itemState.isSelected })}
 {:else}
-	<div bind:this={ref} {...mergedProps}>
+	<div {...mergedProps}>
 		{@render children?.({ selected: itemState.isSelected })}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button-mounted.svelte

@@ -7,7 +7,6 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
 		mounted,
 		...restProps
 	}: ScrollDownButtonProps & {
@@ -29,7 +28,7 @@
 {#if asChild}
 	{@render child?.({ props: restProps })}
 {:else}
-	<div {...restProps} bind:this={ref}>
+	<div {...restProps}>
 		{@render children?.()}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte

@@ -6,13 +6,17 @@
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { id = useId(), ref = $bindable(), ...restProps }: ScrollUpButtonProps = $props();
+	let { id = useId(), ref = $bindable(null), ...restProps }: ScrollUpButtonProps = $props();
 
 	const mounted = box(false);
 
 	const scrollDownButtonState = useSelectScrollDownButton({
 		id: box.with(() => id),
 		mounted: box.from(mounted),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	// eslint-disable-next-line unused-imports/no-unused-vars, ts/no-unused-vars
@@ -23,5 +27,5 @@
 </script>
 
 {#if scrollDownButtonState.canScrollDown}
-	<SelectScrollDownButtonMounted bind:ref {mounted} {...restWithoutStyle} {...mergedProps} />
+	<SelectScrollDownButtonMounted {mounted} {...restWithoutStyle} {...mergedProps} />
 {/if}

packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button-mounted.svelte

@@ -7,7 +7,6 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
 		mounted,
 		...restProps
 	}: ScrollUpButtonProps & {
@@ -29,7 +28,7 @@
 {#if asChild}
 	{@render child?.({ props: restProps })}
 {:else}
-	<div {...restProps} bind:this={ref}>
+	<div {...restProps}>
 		{@render children?.()}
 	</div>
 {/if}