Pass ids as slot props to components with managed ids (#147)

Author: huntabyte

.changeset/gorgeous-beans-draw.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Pass ids as slot props to components with managed ids

package.json

@@ -86,7 +86,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.57.0",
+		"@melt-ui/svelte": "0.57.1",
 		"nanoid": "^5.0.2"
 	},
 	"peerDependencies": {

pnpm-lock.yaml

@@ -20,7 +20,8 @@
 
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		closeOnOutsideClick,
 		closeOnEscape,
@@ -60,4 +61,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot />
+<slot {ids} />

src/lib/bits/context-menu/components/ContextMenu.svelte

@@ -7,7 +7,7 @@
 	export let disabled: $$Props["disabled"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
 
-	const { updateOption } = setSubMenuCtx({
+	const { updateOption, ids } = setSubMenuCtx({
 		positioning,
 		disabled,
 		arrowSize
@@ -18,4 +18,4 @@
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot />
+<slot subIds={ids} />

src/lib/bits/context-menu/components/ContextMenuSub.svelte

@@ -20,7 +20,8 @@
 
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		closeOnOutsideClick,
 		closeOnEscape,
@@ -59,4 +60,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot />
+<slot {ids} />

src/lib/bits/dropdown-menu/components/DropdownMenu.svelte

@@ -7,7 +7,7 @@
 	export let disabled: $$Props["disabled"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
 
-	const { updateOption } = setSubMenuCtx({
+	const { updateOption, ids } = setSubMenuCtx({
 		positioning,
 		disabled,
 		arrowSize
@@ -18,4 +18,4 @@
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot />
+<slot subIds={ids} />

src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte

@@ -11,7 +11,8 @@
 
 	const {
 		elements: { menubar },
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({ loop, closeOnEscape });
 
 	$: updateOption("loop", loop);
@@ -21,9 +22,9 @@
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} {ids} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} {ids} />
 	</div>
 {/if}

src/lib/bits/menubar/components/Menubar.svelte

@@ -19,7 +19,8 @@
 
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setMenuCtx({
 		closeOnOutsideClick,
 		closeOnEscape,
@@ -55,4 +56,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot />
+<slot menuIds={ids} />

src/lib/bits/menubar/components/MenubarMenu.svelte

@@ -7,7 +7,7 @@
 	export let disabled: $$Props["disabled"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
 
-	const { updateOption } = setSubMenuCtx({
+	const { updateOption, ids } = setSubMenuCtx({
 		positioning,
 		disabled,
 		arrowSize
@@ -18,4 +18,4 @@
 	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot />
+<slot subIds={ids} />