feat: expose isSelected slot prop to Select.Item (#285)

huntabyte · Jan 19, 2024 · 2efac48 · 2efac48
1 parent ef74ed8
commit 2efac48
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/pink-pots-nail.md b/.changeset/pink-pots-nail.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: expose `isSelected` slot prop from `Select.Item`
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
@@ -173,7 +173,13 @@ export const item: APISchema<Select.ItemProps> = {
 		},
 		...domElProps("HTMLDivElement")
 	},
-	slotProps: { ...builderAndAttrsSlotProps },
+	slotProps: {
+		isSelected: {
+			type: C.BOOLEAN,
+			description: "Whether or not the item is selected."
+		},
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "state",

diff --git a/src/lib/bits/select/components/select-item.svelte b/src/lib/bits/select/components/select-item.svelte
@@ -15,6 +15,7 @@
 
 	const {
 		elements: { option: item },
+		helpers: { isSelected: isSelectedStore },
 		getAttrs
 	} = setItemCtx(value);
 
@@ -23,12 +24,13 @@
 
 	$: builder = $item({ value, disabled, label });
 	$: Object.assign(builder, attrs);
+	$: isSelected = $isSelectedStore(value);
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if asChild}
-	<slot {builder} />
+	<slot {builder} {isSelected} />
 {:else}
 	<div
 		bind:this={el}
@@ -41,7 +43,7 @@
 		on:focusout
 		on:pointerleave
 	>
-		<slot {builder}>
+		<slot {builder} {isSelected}>
 			{label ? label : value}
 		</slot>
 	</div>