feat (next): Add ability disable portal for portalled components (#1482)

Co-authored-by: Hunter Johnston <[email protected]>
huntabyte · Nov 20, 2024 · 9d35389 · 9d35389
1 parent f8e2343
commit 9d35389
Show file tree

Hide file tree

Showing 24 changed files with 201 additions and 123 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/docs/package.json b/sites/docs/package.json
@@ -43,7 +43,7 @@
 		"acorn": "^8.13.0",
 		"acorn-typescript": "^1.4.13",
 		"autoprefixer": "^10.4.19",
-		"bits-ui": "^1.0.0-next.49",
+		"bits-ui": "1.0.0-next.63",
 		"clsx": "^2.1.1",
 		"concurrently": "^9.0.1",
 		"d3-scale": "^4.0.2",

diff --git a/sites/docs/src/lib/registry/default/ui/alert-dialog/alert-dialog-content.svelte b/sites/docs/src/lib/registry/default/ui/alert-dialog/alert-dialog-content.svelte
@@ -6,11 +6,14 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		portalProps,
 		...restProps
-	}: WithoutChild<AlertDialogPrimitive.ContentProps> = $props();
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: AlertDialogPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<AlertDialogPrimitive.Portal>
+<AlertDialogPrimitive.Portal {...portalProps}>
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref

diff --git a/sites/docs/src/lib/registry/default/ui/command/command-dialog.svelte b/sites/docs/src/lib/registry/default/ui/command/command-dialog.svelte
@@ -12,16 +12,18 @@
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(""),
+		portalProps,
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
 			children: Snippet;
 		} = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
 		<Command
 			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
 			{...restProps}

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/dialog/dialog-content.svelte b/sites/docs/src/lib/registry/default/ui/dialog/dialog-content.svelte
@@ -8,14 +8,16 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		portalProps,
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
 		children: Snippet;
 	} = $props();
 </script>
 
-<Dialog.Portal>
+<Dialog.Portal {...portalProps}>
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref

diff --git a/sites/docs/src/lib/registry/default/ui/drawer/drawer-content.svelte b/sites/docs/src/lib/registry/default/ui/drawer/drawer-content.svelte
@@ -6,12 +6,15 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		portalProps,
 		children,
 		...restProps
-	}: DrawerPrimitive.ContentProps = $props();
+	}: DrawerPrimitive.ContentProps & {
+		portalProps?: DrawerPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<DrawerPrimitive.Portal>
+<DrawerPrimitive.Portal {...portalProps}>
 	<DrawerOverlay />
 	<DrawerPrimitive.Content
 		bind:ref

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/default/ui/hover-card/hover-card-content.svelte b/sites/docs/src/lib/registry/default/ui/hover-card/hover-card-content.svelte
@@ -7,17 +7,22 @@
 		class: className,
 		align = "center",
 		sideOffset = 4,
+		portalProps,
 		...restProps
-	}: HoverCardPrimitive.ContentProps = $props();
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: HoverCardPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<HoverCardPrimitive.Content
-	bind:ref
-	{align}
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<HoverCardPrimitive.Portal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/default/ui/menubar/menubar-content.svelte b/sites/docs/src/lib/registry/default/ui/menubar/menubar-content.svelte
@@ -9,19 +9,24 @@
 		alignOffset = -4,
 		align = "start",
 		side = "bottom",
+		portalProps,
 		...restProps
-	}: MenubarPrimitive.ContentProps = $props();
+	}: MenubarPrimitive.ContentProps & {
+		portalProps?: MenubarPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<MenubarPrimitive.Content
-	bind:ref
-	{sideOffset}
-	{align}
-	{alignOffset}
-	{side}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<MenubarPrimitive.Portal {...portalProps}>
+	<MenubarPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{align}
+		{alignOffset}
+		{side}
+		class={cn(
+			"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</MenubarPrimitive.Portal>
diff --git a/sites/docs/src/lib/registry/default/ui/popover/popover-content.svelte b/sites/docs/src/lib/registry/default/ui/popover/popover-content.svelte
@@ -7,11 +7,14 @@
 		class: className,
 		sideOffset = 4,
 		align = "center",
+		portalProps,
 		...restProps
-	}: PopoverPrimitive.ContentProps = $props();
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<PopoverPrimitive.Portal>
+<PopoverPrimitive.Portal {...portalProps}>
 	<PopoverPrimitive.Content
 		bind:ref
 		{sideOffset}

diff --git a/sites/docs/src/lib/registry/default/ui/select/select-content.svelte b/sites/docs/src/lib/registry/default/ui/select/select-content.svelte
@@ -8,12 +8,15 @@
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
+		portalProps,
 		children,
 		...restProps
-	}: WithoutChild<SelectPrimitive.ContentProps> = $props();
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<SelectPrimitive.Portal>
+<SelectPrimitive.Portal {...portalProps}>
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}

diff --git a/sites/docs/src/lib/registry/default/ui/sheet/sheet-content.svelte b/sites/docs/src/lib/registry/default/ui/sheet/sheet-content.svelte
@@ -29,15 +29,17 @@
 		ref = $bindable(null),
 		class: className,
 		side = "right",
+		portalProps,
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
 		side?: Side;
 		children: Snippet;
 	} = $props();
 </script>
 
-<SheetPrimitive.Portal>
+<SheetPrimitive.Portal {...portalProps}>
 	<SheetOverlay />
 	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
 		{@render children?.()}

diff --git a/sites/docs/src/lib/registry/new-york/ui/alert-dialog/alert-dialog-content.svelte b/sites/docs/src/lib/registry/new-york/ui/alert-dialog/alert-dialog-content.svelte
@@ -6,11 +6,14 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		portalProps,
 		...restProps
-	}: WithoutChild<AlertDialogPrimitive.ContentProps> = $props();
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: AlertDialogPrimitive.PortalProps;
+	} = $props();
 </script>
 
-<AlertDialogPrimitive.Portal>
+<AlertDialogPrimitive.Portal {...portalProps}>
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref