Add portal props to context menu & dropdown menu

huntabyte · Nov 15, 2024 · 814429e · 814429e
1 parent 2409a32
commit 814429e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 39 deletions.
diff --git a/sites/docs/src/lib/registry/default/ui/context-menu/context-menu-content.svelte b/sites/docs/src/lib/registry/default/ui/context-menu/context-menu-content.svelte
@@ -4,16 +4,21 @@
 
 	let {
 		ref = $bindable(null),
+		portalProps,
 		class: className,
 		...restProps
-	}: ContextMenuPrimitive.ContentProps = $props();
+	}: ContextMenuPrimitive.ContentProps & {
+		portalProps?: ContextMenuPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<ContextMenuPrimitive.Content
-	bind:ref
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<ContextMenuPrimitive.Portal {...portalProps}>
+	<ContextMenuPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</ContextMenuPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/default/ui/dropdown-menu/dropdown-menu-content.svelte b/sites/docs/src/lib/registry/default/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -5,17 +5,22 @@
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
+		portalProps,
 		class: className,
 		...restProps
-	}: DropdownMenuPrimitive.ContentProps = $props();
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Content
-	bind:ref
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/new-york/ui/context-menu/context-menu-content.svelte b/sites/docs/src/lib/registry/new-york/ui/context-menu/context-menu-content.svelte
@@ -5,15 +5,20 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		portalProps,
 		...restProps
-	}: ContextMenuPrimitive.ContentProps = $props();
+	}: ContextMenuPrimitive.ContentProps & {
+		portalProps?: ContextMenuPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<ContextMenuPrimitive.Content
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...restProps}
-	bind:ref
-/>
+<ContextMenuPrimitive.Portal {...portalProps}>
+	<ContextMenuPrimitive.Content
+		class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+			className
+		)}
+		{...restProps}
+		bind:ref
+	/>
+</ContextMenuPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/new-york/ui/dropdown-menu/dropdown-menu-content.svelte b/sites/docs/src/lib/registry/new-york/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -6,17 +6,22 @@
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
+		portalProps,
 		...restProps
-	}: DropdownMenuPrimitive.ContentProps = $props();
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Content
-	bind:ref
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>