diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index d988a5bd4811eb..1328ea14e985a7 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'; @@ -35,6 +35,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. @@ -77,7 +83,11 @@ export const DropdownMenu = ( { alignOffset={ alignOffset } loop={ true } > - { children } + + { children } + @@ -123,6 +133,8 @@ export const DropdownSubMenu = ( { children, trigger, }: DropdownSubMenuProps ) => { + const { portalContainer } = useContext( DropdownMenuPrivateContext ); + return ( { trigger } - +