diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index 1328ea14e985a7..b0617edd77f9f0 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -16,6 +16,7 @@ import { SVG, Circle } from '@wordpress/primitives'; */ 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, @@ -59,10 +60,10 @@ export const DropdownMenu = ( { // Render props children, trigger, - // Other props - slotName, }: DropdownMenuProps ) => { - const slot = useSlot( slotName ); + // 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 } diff --git a/packages/components/src/dropdown-menu-v2/stories/index.tsx b/packages/components/src/dropdown-menu-v2/stories/index.tsx index ff2f425958d72e..4bee7c902063f4 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.tsx @@ -34,8 +34,6 @@ import { menu, wordpress } from '@wordpress/icons'; */ import Icon from '../../icon'; -const SLOT_NAME = 'dropdown-storybook-popover-slot'; - const meta: ComponentMeta< typeof DropdownMenu > = { title: 'Components (Experimental)/DropdownMenu v2', component: DropdownMenu, @@ -132,9 +130,9 @@ const RadioItemsGroup = () => { const Template: ComponentStory< typeof DropdownMenu > = ( props ) => ( - { /* @ts-expect-error Slot is not currently typed on Popover */ } - + { /* @ts-expect-error Slot is not currently typed on Popover */ } + ); export const Default = Template.bind( {} ); @@ -199,9 +197,3 @@ Default.args = { ), }; - -export const WithCustomSlot = Template.bind( {} ); -WithCustomSlot.args = { - ...Default.args, - slotName: SLOT_NAME, -}; diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts index b2b251850ff19c..1fb246fafd6537 100644 --- a/packages/components/src/dropdown-menu-v2/types.ts +++ b/packages/components/src/dropdown-menu-v2/types.ts @@ -61,12 +61,6 @@ export type DropdownMenuProps = { * The contents of the dropdown */ children: React.ReactNode; - /** - * The name of the slot where the dropdown content should render. - * - * @default TODO - */ - slotName?: string; }; export type DropdownSubMenuTriggerProps = { diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx index e1afb10035c306..0e7fb35c5f833f 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.