Use context to use same slot for submenu portal

WordPress · May 29, 2023 · e492792 · e492792
1 parent 49416a6
commit e492792
Showing 1 changed file with 15 additions and 3 deletions.
diff --git 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 }
+					<DropdownMenuPrivateContext.Provider
+						value={ { portalContainer: slot.ref?.current } }
+					>
+						{ children }
+					</DropdownMenuPrivateContext.Provider>
 				</DropdownMenuStyled.Content>
 			</DropdownMenuPrimitive.Portal>
 		</DropdownMenuPrimitive.Root>
@@ -123,6 +133,8 @@ export const DropdownSubMenu = ( {
 	children,
 	trigger,
 }: DropdownSubMenuProps ) => {
+	const { portalContainer } = useContext( DropdownMenuPrivateContext );
+
 	return (
 		<DropdownMenuPrimitive.Sub
 			defaultOpen={ defaultOpen }
@@ -135,7 +147,7 @@ export const DropdownSubMenu = ( {
 			>
 				{ trigger }
 			</DropdownMenuStyled.SubTrigger>
-			<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Portal container={ portalContainer }>
 				<DropdownMenuStyled.SubContent
 					loop
 					sideOffset={ SUB_MENU_OFFSET_SIDE }