diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4d6ea42e8bc0e..b0880c5f6384a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
### Experimental
- `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967)).
+- `DropdownMenu` v2: Render in the default `Popover.Slot` ([#51046](https://github.com/WordPress/gutenberg/pull/51046)).
## 25.0.0 (2023-05-24)
diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
index 7a0197f69fc3d..b0617edd77f9f 100644
--- a/packages/components/src/dropdown-menu-v2/index.tsx
+++ b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -6,7 +6,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
/**
* WordPress dependencies
*/
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, createContext, useContext } from '@wordpress/element';
import { isRTL } from '@wordpress/i18n';
import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
import { SVG, Circle } from '@wordpress/primitives';
@@ -14,7 +14,9 @@ import { SVG, Circle } from '@wordpress/primitives';
/**
* Internal dependencies
*/
+import { useSlot } from '../slot-fill';
import Icon from '../icon';
+import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';
import * as DropdownMenuStyled from './styles';
import type {
DropdownMenuProps,
@@ -34,6 +36,12 @@ const SUB_MENU_OFFSET_SIDE = 12;
// Opposite amount of the top padding of the menu item
const SUB_MENU_OFFSET_ALIGN = -8;
+const DropdownMenuPrivateContext = createContext< {
+ portalContainer: HTMLElement | null;
+} >( {
+ portalContainer: null,
+} );
+
/**
* `DropdownMenu` displays a menu to the user (such as a set of actions
* or functions) triggered by a button.
@@ -53,6 +61,10 @@ export const DropdownMenu = ( {
children,
trigger,
}: DropdownMenuProps ) => {
+ // Render the portal in the default slot used by the legacy Popover component.
+ const slot = useSlot( POPOVER_DEFAULT_SLOT_NAME );
+ const portalContainer = slot.ref?.current;
+
return (
{ trigger }
-
+
- { children }
+
+ { children }
+
@@ -118,6 +134,8 @@ export const DropdownSubMenu = ( {
children,
trigger,
}: DropdownSubMenuProps ) => {
+ const { portalContainer } = useContext( DropdownMenuPrivateContext );
+
return (
{ trigger }
-
+
{
};
const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
-
+
+
+ { /* @ts-expect-error Slot is not currently typed on Popover */ }
+
+
);
export const Default = Template.bind( {} );
Default.args = {
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index e1afb10035c30..0e7fb35c5f833 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -74,7 +74,7 @@ import { overlayMiddlewares } from './overlay-middlewares';
*
* @type {string}
*/
-const SLOT_NAME = 'Popover';
+export const SLOT_NAME = 'Popover';
// An SVG displaying a triangle facing down, filled with a solid
// color and bordered in such a way to create an arrow-like effect.