diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.tsx index dc916af180558..c5636941037c1 100644 --- a/packages/components/src/popover/stories/index.tsx +++ b/packages/components/src/popover/stories/index.tsx @@ -14,8 +14,8 @@ import { __unstableIframe as Iframe } from '@wordpress/block-editor'; * Internal dependencies */ import Button from '../../button'; -import { Provider as SlotFillProvider } from '../../slot-fill'; import { Popover } from '..'; +import { PopoverInsideIframeRenderedInExternalSlot } from '../test/utils'; import type { PopoverProps } from '../types'; const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [ @@ -249,51 +249,7 @@ DynamicHeight.args = { export const WithSlotOutsideIframe: ComponentStory< typeof Popover > = ( args ) => { - const anchorRef = useRef( null ); - const slotName = 'popover-with-slot-outside-iframe'; - - return ( - -
- { /* @ts-expect-error Slot is not currently typed on Popover */ } - - -
- - ); + return ; }; WithSlotOutsideIframe.args = { ...Default.args, diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx index 7fb9e5377bf31..f98c4e27d3700 100644 --- a/packages/components/src/popover/test/index.tsx +++ b/packages/components/src/popover/test/index.tsx @@ -19,6 +19,7 @@ import { } from '../utils'; import Popover from '..'; import type { PopoverProps } from '../types'; +import { PopoverInsideIframeRenderedInExternalSlot } from './utils'; type PositionToPlacementTuple = [ NonNullable< PopoverProps[ 'position' ] >, @@ -175,6 +176,19 @@ describe( 'Popover', () => { } ); } ); + describe( 'Slot outside iframe', () => { + it( 'should support cross-document rendering', async () => { + render( + + content + + ); + await waitFor( async () => + expect( screen.getByText( 'content' ) ).toBeVisible() + ); + } ); + } ); + describe( 'positionToPlacement', () => { it.each( ALL_POSITIONS_TO_EXPECTED_PLACEMENTS )( 'converts `%s` to `%s`', diff --git a/packages/components/src/popover/test/utils/index.tsx b/packages/components/src/popover/test/utils/index.tsx new file mode 100644 index 0000000000000..53af9af21b838 --- /dev/null +++ b/packages/components/src/popover/test/utils/index.tsx @@ -0,0 +1,87 @@ +/** + * WordPress dependencies + */ +import { createPortal, useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import Popover from '../..'; +import { Provider as SlotFillProvider } from '../../../slot-fill'; +import type { WordPressComponentProps } from '../../../ui/context'; + +const GenericIframe = ( { + children, + ...props +}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => { + const [ containerNode, setContainerNode ] = useState< HTMLElement >(); + + return ( + + ); +}; + +export const PopoverInsideIframeRenderedInExternalSlot = ( + props: React.ComponentProps< typeof Popover > +) => { + const SLOT_NAME = 'my-slot'; + const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >( + null + ); + + return ( + + { /* @ts-expect-error Slot is not currently typed on Popover */ } + + +
+

+ Popover's anchor +

+ +
+ + + ); +};