Fix: Add transparent menu overlay (#66)

.changeset/bright-fans-juggle.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Fix: Add transparent menu overlay

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Overlay from "$lib/internal/overlay.svelte";
+
 	import { melt } from "@melt-ui/svelte";
 	import { ctx } from "../ctx.js";
 	import type { Transition } from "$internal/types.js";
@@ -19,14 +21,17 @@
 </script>
 
 {#if $open}
+	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />
 	{:else if transition}
+		<Overlay />
 		<div use:melt={builder} {...$$restProps} on:m-keydown transition:transition={transitionConfig}>
 			<slot {builder} />
 		</div>
 	{:else}
+		<Overlay />
 		<div use:melt={builder} {...$$restProps} on:m-keydown>
 			<slot {builder} />
 		</div>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Overlay from "$lib/internal/overlay.svelte";
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/types.js";
 	import { ctx } from "../ctx.js";
@@ -20,6 +21,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if $open}
+	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />

src/lib/bits/select/components/SelectContent.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Overlay from "$lib/internal/overlay.svelte";
+
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/types.js";
 	import { ctx } from "../ctx.js";
@@ -18,6 +20,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if $open}
+	<Overlay />
 	{@const builder = $menu}
 	{#if asChild}
 		<slot {builder} />

src/lib/internal/helpers.ts

@@ -92,3 +92,10 @@ export function bitWrap<T extends object>(storeValues: T, bit: string): T {
 export function sleep(ms: number) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
+
+export function styleToString(style: Record<string, number | string | undefined>): string {
+	return Object.keys(style).reduce((str, key) => {
+		if (style[key] === undefined) return str;
+		return str + `${key}:${style[key]};`;
+	}, "");
+}

src/lib/internal/overlay.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { styleToString } from ".";
+</script>
+
+<div
+	style={styleToString({
+		position: "fixed",
+		inset: 0,
+		"z-index": 50
+	})}
+/>