From 0422f5f56b8d86f5b60efd773589d3f204e8f3bb Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:27:56 -0500
Subject: [PATCH] fix: export `Menubar.Portal` (#955)

---
 .changeset/stupid-candles-do.md               |   5 +
 .../bits-ui/src/lib/bits/menubar/exports.ts   |   1 +
 .../lib/components/demos/menubar-demo.svelte  | 351 ++++++++++--------
 3 files changed, 195 insertions(+), 162 deletions(-)
 create mode 100644 .changeset/stupid-candles-do.md

diff --git a/.changeset/stupid-candles-do.md b/.changeset/stupid-candles-do.md
new file mode 100644
index 000000000..94fa0449d
--- /dev/null
+++ b/.changeset/stupid-candles-do.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: export `Portal` from `Menubar` namespace
diff --git a/packages/bits-ui/src/lib/bits/menubar/exports.ts b/packages/bits-ui/src/lib/bits/menubar/exports.ts
index a2d9d7036..0f79e57a9 100644
--- a/packages/bits-ui/src/lib/bits/menubar/exports.ts
+++ b/packages/bits-ui/src/lib/bits/menubar/exports.ts
@@ -15,6 +15,7 @@ export { default as SubContentStatic } from "$lib/bits/menu/components/menu-sub-
 export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
 export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte";
 export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 
 export type {
 	MenubarRootProps as RootProps,
diff --git a/sites/docs/src/lib/components/demos/menubar-demo.svelte b/sites/docs/src/lib/components/demos/menubar-demo.svelte
index dab1f3afb..385f9fee5 100644
--- a/sites/docs/src/lib/components/demos/menubar-demo.svelte
+++ b/sites/docs/src/lib/components/demos/menubar-demo.svelte
@@ -71,198 +71,225 @@
 		<Menubar.Trigger
 			class="inline-flex h-10 cursor-default items-center justify-center rounded-9px px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 		>
-			View
+			File
 		</Menubar.Trigger>
-		<Menubar.Content
-			class="focus-override z-50 w-fit  rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
-			align="start"
-			sideOffset={3}
-		>
-			{#each grids as grid}
-				<Menubar.CheckboxItem
-					class="flex h-10 select-none items-center gap-2 rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-					bind:checked={grid.checked}
-				>
-					{#snippet children({ checked })}
-						{grid.label} grid
-						<div class="ml-auto">
-							{#if checked}
-								<SwitchOn />
-							{:else}
-								<SwitchOff />
-							{/if}
-						</div>
-					{/snippet}
-				</Menubar.CheckboxItem>
-			{/each}
-			<Menubar.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
-			<Menubar.RadioGroup bind:value={selectedView}>
-				{#each views as view}
-					<Menubar.RadioItem
-						value={view.value}
-						class="flex h-10 select-none items-center gap-2 rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+		<Menubar.Portal>
+			<Menubar.Content
+				class="focus-override z-50 w-fit  rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
+				align="start"
+				sideOffset={3}
+			>
+				{#each grids as grid}
+					<Menubar.CheckboxItem
+						class="flex h-10 select-none items-center gap-3 rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						bind:checked={grid.checked}
 					>
 						{#snippet children({ checked })}
-							{view.label}
-							<div class="ml-auto size-5">
+							{grid.label} grid
+							<div class="ml-auto flex items-center">
 								{#if checked}
-									<Check class="size-5" />
+									<SwitchOn />
+								{:else}
+									<SwitchOff />
 								{/if}
 							</div>
 						{/snippet}
-					</Menubar.RadioItem>
+					</Menubar.CheckboxItem>
 				{/each}
-			</Menubar.RadioGroup>
-		</Menubar.Content>
+				<Menubar.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
+				<Menubar.RadioGroup bind:value={selectedView}>
+					{#each views as view}
+						<Menubar.RadioItem
+							value={view.value}
+							class="flex h-10 select-none items-center gap-2 rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						>
+							{#snippet children({ checked })}
+								{view.label}
+								<div class="ml-auto size-5">
+									{#if checked}
+										<Check class="size-5" />
+									{/if}
+								</div>
+							{/snippet}
+						</Menubar.RadioItem>
+					{/each}
+				</Menubar.RadioGroup>
+			</Menubar.Content>
+		</Menubar.Portal>
 	</Menubar.Menu>
+
 	<Menubar.Menu>
 		<Menubar.Trigger
 			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
-			>Edit</Menubar.Trigger
-		>
-		<Menubar.Content
-			class="focus-override z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
-			align="start"
-			sideOffset={3}
 		>
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Undo</Menubar.Item
-			>
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Redo</Menubar.Item
+			Edit
+		</Menubar.Trigger>
+		<Menubar.Portal>
+			<Menubar.Content
+				class="focus-override z-50 w-full rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
+				align="start"
+				sideOffset={3}
 			>
-			<Menubar.Separator />
-			<Menubar.Sub>
-				<Menubar.SubTrigger
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
-					Find
-					<div class="ml-auto flex items-center gap-px">
-						<CaretRight class="h-4 w-4 text-foreground-alt" />
-					</div>
-				</Menubar.SubTrigger>
-				<Menubar.SubContent
-					class="focus-override w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
+					Undo
+				</Menubar.Item>
+				<Menubar.Item
+					class="flex h-10 min-w-[130px] select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 				>
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-						>Search the web</Menubar.Item
-					>
-					<Menubar.Separator />
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-						>Find...</Menubar.Item
+					Redo
+				</Menubar.Item>
+				<Menubar.Separator />
+				<Menubar.Sub>
+					<Menubar.SubTrigger
+						class="flex h-10 select-none items-center gap-3 rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 					>
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-						>Find Next</Menubar.Item
-					>
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-						>Find Previous</Menubar.Item
+						Find
+						<div class="ml-auto flex items-center">
+							<CaretRight class="h-4 w-4 text-foreground-alt" />
+						</div>
+					</Menubar.SubTrigger>
+					<Menubar.SubContent
+						class="focus-override w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
 					>
-				</Menubar.SubContent>
-			</Menubar.Sub>
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Cut</Menubar.Item
-			>
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Copy</Menubar.Item
-			>
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Paste</Menubar.Item
-			>
-		</Menubar.Content>
+						<Menubar.Item
+							class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						>
+							Search the web
+						</Menubar.Item>
+						<Menubar.Separator />
+						<Menubar.Item
+							class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						>
+							Find...
+						</Menubar.Item>
+						<Menubar.Item
+							class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						>
+							Find Next
+						</Menubar.Item>
+						<Menubar.Item
+							class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						>
+							Find Previous
+						</Menubar.Item>
+					</Menubar.SubContent>
+				</Menubar.Sub>
+				<Menubar.Separator />
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+				>
+					Cut
+				</Menubar.Item>
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+				>
+					Copy
+				</Menubar.Item>
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+				>
+					Paste
+				</Menubar.Item>
+			</Menubar.Content>
+		</Menubar.Portal>
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
 			class="inline-flex h-10 cursor-default items-center justify-center rounded-9px px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
-			>View</Menubar.Trigger
-		>
-		<Menubar.Content
-			class="focus-override z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
-			align="start"
-			sideOffset={3}
 		>
-			{#each showConfigs as config}
-				<Menubar.CheckboxItem
+			View
+		</Menubar.Trigger>
+		<Menubar.Portal>
+			<Menubar.Content
+				class="focus-override z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
+				align="start"
+				sideOffset={3}
+			>
+				{#each showConfigs as config}
+					<Menubar.CheckboxItem
+						class="flex h-10 select-none items-center gap-3 rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+						bind:checked={config.checked}
+					>
+						{#snippet children({ checked })}
+							{config.label}
+							<div class="ml-auto flex items-center">
+								{#if checked}
+									<SwitchOn />
+								{:else}
+									<SwitchOff />
+								{/if}
+							</div>
+						{/snippet}
+					</Menubar.CheckboxItem>
+				{/each}
+				<Menubar.Separator />
+				<Menubar.Item
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-					bind:checked={config.checked}
 				>
-					{#snippet children({ checked })}
-						{config.label}
-						{#if checked}
-							<SwitchOn />
-						{:else}
-							<div class="ml-auto">
-								<SwitchOff />
-							</div>
-						{/if}
-					{/snippet}
-				</Menubar.CheckboxItem>
-			{/each}
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Reload</Menubar.Item
-			>
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Force Reload</Menubar.Item
-			>
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Toggle Fullscreen</Menubar.Item
-			>
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Hide Sidebar</Menubar.Item
-			>
-		</Menubar.Content>
+					Reload
+				</Menubar.Item>
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+				>
+					Force Reload
+				</Menubar.Item>
+				<Menubar.Separator />
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+				>
+					Toggle Fullscreen
+				</Menubar.Item>
+				<Menubar.Separator />
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+				>
+					Hide Sidebar
+				</Menubar.Item>
+			</Menubar.Content>
+		</Menubar.Portal>
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
 			class="mr-[20px] inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
-			>Profiles</Menubar.Trigger
 		>
-		<Menubar.Content
-			class="focus-override z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
-			align="start"
-			sideOffset={3}
-		>
-			<Menubar.RadioGroup bind:value={selectedProfile}>
-				{#each profiles as profile}
-					<Menubar.RadioItem
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-						value={profile.value}
-					>
-						{#snippet children({ checked })}
-							{profile.label}
-							{#if checked}
-								<Check class="size-5" />
-							{/if}
-						{/snippet}
-					</Menubar.RadioItem>
-				{/each}
-			</Menubar.RadioGroup>
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Edit...</Menubar.Item
-			>
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>Add Profile...</Menubar.Item
+			Profiles
+		</Menubar.Trigger>
+		<Menubar.Portal>
+			<Menubar.Content
+				class="focus-override z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover focus-visible:outline-none"
+				align="start"
+				sideOffset={3}
 			>
-		</Menubar.Content>
+				<Menubar.RadioGroup bind:value={selectedProfile}>
+					{#each profiles as profile}
+						<Menubar.RadioItem
+							class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+							value={profile.value}
+						>
+							{#snippet children({ checked })}
+								{profile.label}
+								<div class="ml-auto flex items-center">
+									{#if checked}
+										<Check class="size-5" />
+									{/if}
+								</div>
+							{/snippet}
+						</Menubar.RadioItem>
+					{/each}
+				</Menubar.RadioGroup>
+				<Menubar.Separator />
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+					>Edit...</Menubar.Item
+				>
+				<Menubar.Separator />
+				<Menubar.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
+					>Add Profile...</Menubar.Item
+				>
+			</Menubar.Content>
+		</Menubar.Portal>
 	</Menubar.Menu>
 </Menubar.Root>