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.