Popover: remove custom frame scroll/resize listeners

packages/components/CHANGELOG.md

@@ -25,6 +25,7 @@
 -   `Popover`: Remove unused `overlay` type from `positionToPlacement` utility function ([#54101](https://github.com/WordPress/gutenberg/pull/54101)).
 -   `Higher Order` -- `with-focus-outside`: Convert to TypeScript ([#53980](https://github.com/WordPress/gutenberg/pull/53980)).
 -   `IsolatedEventContainer`: Convert unit test to TypeScript ([#54316](https://github.com/WordPress/gutenberg/pull/54316)).
+-   `Popover`: Remove `scroll` and `resize` listeners for iframe overflow parents and rely on recently added native Floating UI support ([#54286](https://github.com/WordPress/gutenberg/pull/54286)).
 
 ### Experimental
 

packages/components/src/popover/index.tsx

@@ -40,7 +40,6 @@ import {
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
-import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -52,7 +51,6 @@ import {
 	computePopoverPosition,
 	positionToPlacement,
 	placementToMotionAnimationProps,
-	getReferenceOwnerDocument,
 	getReferenceElement,
 } from './utils';
 import type { WordPressComponentProps } from '../ui/context';
@@ -199,9 +197,6 @@ const UnforwardedPopover = (
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
-	const [ referenceOwnerDocument, setReferenceOwnerDocument ] = useState<
-		Document | undefined
-	>();
 
 	const anchorRefFallback: RefCallback< HTMLSpanElement > = useCallback(
 		( node ) => {
@@ -315,15 +310,6 @@ const UnforwardedPopover = (
 		?.current;
 
 	useLayoutEffect( () => {
-		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
-			anchor,
-			anchorRef,
-			anchorRect,
-			getAnchorRect,
-			fallbackReferenceElement,
-			fallbackDocument: document,
-		} );
-
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
@@ -333,8 +319,6 @@ const UnforwardedPopover = (
 		} );
 
 		refs.setReference( resultingReferenceElement );
-
-		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
 		anchor,
 		anchorRef,
@@ -348,33 +332,6 @@ const UnforwardedPopover = (
 		refs,
 	] );
 
-	// If the reference element is in a different ownerDocument (e.g. iFrame),
-	// we need to manually update the floating's position as the reference's owner
-	// document scrolls.
-	useLayoutEffect( () => {
-		if (
-			! referenceOwnerDocument ||
-			! referenceOwnerDocument.defaultView
-		) {
-			return;
-		}
-
-		const { defaultView } = referenceOwnerDocument;
-		const { frameElement } = defaultView;
-
-		const scrollContainer = frameElement
-			? getScrollContainer( frameElement )
-			: null;
-
-		defaultView.addEventListener( 'resize', update );
-		scrollContainer?.addEventListener( 'scroll', update );
-
-		return () => {
-			defaultView.removeEventListener( 'resize', update );
-			scrollContainer?.removeEventListener( 'scroll', update );
-		};
-	}, [ referenceOwnerDocument, update ] );
-
 	const mergedFloatingRef = useMergeRefs( [
 		refs.setFloating,
 		dialogRef,

packages/components/src/popover/utils.ts

@@ -3,11 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
-import type {
-	Placement,
-	ReferenceType,
-	VirtualElement,
-} from '@floating-ui/react-dom';
+import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 
 /**
  * Internal dependencies
@@ -142,58 +138,17 @@ export const placementToMotionAnimationProps = (
 	};
 };
 
-export const getReferenceOwnerDocument = ( {
-	anchor,
-	anchorRef,
-	anchorRect,
-	getAnchorRect,
-	fallbackReferenceElement,
-	fallbackDocument,
-}: Pick<
-	PopoverProps,
-	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
-> & {
-	fallbackReferenceElement: Element | null;
-	fallbackDocument: Document;
-} ): Document => {
-	// In floating-ui's terms:
-	// - "reference" refers to the popover's anchor element.
-	// - "floating" refers the floating popover's element.
-	// A floating element can also be positioned relative to a virtual element,
-	// instead of a real one. A virtual element is represented by an object
-	// with the `getBoundingClientRect()` function (like real elements).
-	// See https://floating-ui.com/docs/virtual-elements for more info.
-	let resultingReferenceOwnerDoc;
-	if ( ( anchor as VirtualElement )?.contextElement ) {
-		resultingReferenceOwnerDoc = ( anchor as VirtualElement ).contextElement
-			?.ownerDocument;
-	} else if ( anchor ) {
-		resultingReferenceOwnerDoc = anchor.ownerDocument;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
-		resultingReferenceOwnerDoc = ( anchorRef as PopoverAnchorRefTopBottom )
-			?.top.ownerDocument;
-	} else if ( ( anchorRef as Range | undefined )?.startContainer ) {
-		resultingReferenceOwnerDoc = ( anchorRef as Range ).startContainer
-			.ownerDocument;
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
-		resultingReferenceOwnerDoc = (
-			( anchorRef as PopoverAnchorRefReference ).current as Element
-		 ).ownerDocument;
-	} else if ( anchorRef as Element | undefined ) {
-		// This one should be deprecated.
-		resultingReferenceOwnerDoc = ( anchorRef as Element ).ownerDocument;
-	} else if ( anchorRect && anchorRect?.ownerDocument ) {
-		resultingReferenceOwnerDoc = anchorRect.ownerDocument;
-	} else if ( getAnchorRect ) {
-		resultingReferenceOwnerDoc = getAnchorRect(
-			fallbackReferenceElement
-		)?.ownerDocument;
-	}
+function isTopBottom(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefTopBottom {
+	return !! ( anchorRef as PopoverAnchorRefTopBottom )?.top;
+}
 
-	return resultingReferenceOwnerDoc ?? fallbackDocument;
-};
+function isRef(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefReference {
+	return !! ( anchorRef as PopoverAnchorRefReference )?.current;
+}
 
 export const getReferenceElement = ( {
 	anchor,
@@ -211,19 +166,15 @@ export const getReferenceElement = ( {
 
 	if ( anchor ) {
 		referenceElement = anchor;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
+	} else if ( isTopBottom( anchorRef ) ) {
 		// Create a virtual element for the ref. The expectation is that
 		// if anchorRef.top is defined, then anchorRef.bottom is defined too.
 		// Seems to be used by the block toolbar, when multiple blocks are selected
 		// (top and bottom blocks are used to calculate the resulting rect).
 		referenceElement = {
 			getBoundingClientRect() {
-				const topRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).top.getBoundingClientRect();
-				const bottomRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).bottom.getBoundingClientRect();
+				const topRect = anchorRef.top.getBoundingClientRect();
+				const bottomRect = anchorRef.bottom.getBoundingClientRect();
 				return new window.DOMRect(
 					topRect.x,
 					topRect.y,
@@ -232,12 +183,10 @@ export const getReferenceElement = ( {
 				);
 			},
 		};
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
+	} else if ( isRef( anchorRef ) ) {
 		// Standard React ref.
-		referenceElement = ( anchorRef as PopoverAnchorRefReference ).current;
-	} else if ( anchorRef as Element | undefined ) {
+		referenceElement = anchorRef.current;
+	} else if ( anchorRef ) {
 		// If `anchorRef` holds directly the element's value (no `current` key)
 		// This is a weird scenario and should be deprecated.
 		referenceElement = anchorRef as Element;