DropdownMenu v2: Render in the default Popover.Slot (#51046)

* Add new slotName prop

* Add storybook example

* Use context to use same slot for submenu portal

* Use default popover slot instead of exposing a slotName prop, update Storybook

* CHANGELOG

Author: ciampo

packages/components/CHANGELOG.md

@@ -17,6 +17,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)
 

packages/components/src/dropdown-menu-v2/index.tsx

@@ -6,15 +6,17 @@ 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';
 
 /**
  * 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 (
 		<DropdownMenuPrimitive.Root
 			defaultOpen={ defaultOpen }
@@ -64,15 +76,19 @@ export const DropdownMenu = ( {
 			<DropdownMenuPrimitive.Trigger asChild>
 				{ trigger }
 			</DropdownMenuPrimitive.Trigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.Content
 					side={ side }
 					align={ align }
 					sideOffset={ sideOffset }
 					alignOffset={ alignOffset }
 					loop={ true }
 				>
-					{ children }
+					<DropdownMenuPrivateContext.Provider
+						value={ { portalContainer } }
+					>
+						{ children }
+					</DropdownMenuPrivateContext.Provider>
 				</DropdownMenuStyled.Content>
 			</DropdownMenuPrimitive.Portal>
 		</DropdownMenuPrimitive.Root>
@@ -118,6 +134,8 @@ export const DropdownSubMenu = ( {
 	children,
 	trigger,
 }: DropdownSubMenuProps ) => {
+	const { portalContainer } = useContext( DropdownMenuPrivateContext );
+
 	return (
 		<DropdownMenuPrimitive.Sub
 			defaultOpen={ defaultOpen }
@@ -130,7 +148,7 @@ export const DropdownSubMenu = ( {
 			>
 				{ trigger }
 			</DropdownMenuStyled.SubTrigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.SubContent
 					loop
 					sideOffset={ SUB_MENU_OFFSET_SIDE }

packages/components/src/dropdown-menu-v2/stories/index.tsx

@@ -20,6 +20,8 @@ import {
 	DropdownSubMenuTrigger,
 } from '..';
 import Button from '../../button';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -127,7 +129,11 @@ const RadioItemsGroup = () => {
 };
 
 const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
-	<DropdownMenu { ...props } />
+	<SlotFillProvider>
+		<DropdownMenu { ...props } />
+		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+		<Popover.Slot />
+	</SlotFillProvider>
 );
 export const Default = Template.bind( {} );
 Default.args = {

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.