@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/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,17 +51,21 @@ import {
 	computePopoverPosition,
 	positionToPlacement,
 	placementToMotionAnimationProps,
-	getReferenceOwnerDocument,
 	getReferenceElement,
 } from './utils';
-import type { WordPressComponentProps } from '../ui/context';
+import {
+	contextConnect,
+	useContextSystem,
+	ContextSystemProvider,
+} from '../context';
+import type { WordPressComponentProps } from '../context';
 import type {
 	PopoverProps,
-	AnimatedWrapperProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
 import { overlayMiddlewares } from './overlay-middlewares';
+import { StyleProvider } from '../style-provider';
 
 /**
  * Name of slot in which popover should fill.
@@ -94,47 +97,6 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-const AnimatedWrapper = forwardRef(
-	(
-		{
-			style: receivedInlineStyles,
-			placement,
-			shouldAnimate = false,
-			...props
-		}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
-		forwardedRef: ForwardedRef< any >
-	) => {
-		const shouldReduceMotion = useReducedMotion();
-
-		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
-			() => placementToMotionAnimationProps( placement ),
-			[ placement ]
-		);
-
-		const computedAnimationProps: HTMLMotionProps< 'div' > =
-			shouldAnimate && ! shouldReduceMotion
-				? {
-						style: {
-							...motionInlineStyles,
-							...receivedInlineStyles,
-						},
-						...otherMotionProps,
-				  }
-				: {
-						animate: false,
-						style: receivedInlineStyles,
-				  };
-
-		return (
-			<motion.div
-				{ ...computedAnimationProps }
-				{ ...props }
-				ref={ forwardedRef }
-			/>
-		);
-	}
-);
-
 const slotNameContext = createContext< string | undefined >( undefined );
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
@@ -151,7 +113,7 @@ const getPopoverFallbackContainer = () => {
 	return container;
 };
 
-const UnforwardedPopover = (
+const UnconnectedPopover = (
 	props: Omit<
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
@@ -164,6 +126,7 @@ const UnforwardedPopover = (
 	const {
 		animate = true,
 		headerTitle,
+		constrainTabbing,
 		onClose,
 		children,
 		className,
@@ -191,7 +154,7 @@ const UnforwardedPopover = (
 
 		// Rest
 		...contentProps
-	} = props;
+	} = useContextSystem( props, 'Popover' );
 
 	let computedFlipProp = flip;
 	let computedResizeProp = resize;
@@ -241,9 +204,6 @@ const UnforwardedPopover = (
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
-	const [ referenceOwnerDocument, setReferenceOwnerDocument ] = useState<
-		Document | undefined
-	>();
 
 	const anchorRefFallback: RefCallback< HTMLSpanElement > = useCallback(
 		( node ) => {
@@ -305,6 +265,7 @@ const UnforwardedPopover = (
 	}
 
 	const [ dialogRef, dialogProps ] = useDialog( {
+		constrainTabbing,
 		focusOnMount,
 		__unstableOnClose: onDialogClose,
 		// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
@@ -357,15 +318,6 @@ const UnforwardedPopover = (
 		?.current;
 
 	useLayoutEffect( () => {
-		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
-			anchor,
-			anchorRef,
-			anchorRect,
-			getAnchorRect,
-			fallbackReferenceElement,
-			fallbackDocument: document,
-		} );
-
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
@@ -375,8 +327,6 @@ const UnforwardedPopover = (
 		} );
 
 		refs.setReference( resultingReferenceElement );
-
-		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
 		anchor,
 		anchorRef,
@@ -390,118 +340,150 @@ 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,
 		forwardedRef,
 	] );
 
-	// Disable reason: We care to capture the _bubbled_ events from inputs
-	// within popover as inferring close intent.
+	const style = isExpanded
+		? undefined
+		: {
+				position: strategy,
+				top: 0,
+				left: 0,
+				// `x` and `y` are framer-motion specific props and are shorthands
+				// for `translateX` and `translateY`. Currently it is not possible
+				// to use `translateX` and `translateY` because those values would
+				// be overridden by the return value of the
+				// `placementToMotionAnimationProps` function.
+				x: computePopoverPosition( x ),
+				y: computePopoverPosition( y ),
+		  };
+
+	const shouldReduceMotion = useReducedMotion();
+	const shouldAnimate = animate && ! isExpanded && ! shouldReduceMotion;
+
+	const [ animationFinished, setAnimationFinished ] = useState( false );
+
+	const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
+		() => placementToMotionAnimationProps( computedPlacement ),
+		[ computedPlacement ]
+	);
+
+	const animationProps: HTMLMotionProps< 'div' > = shouldAnimate
+		? {
+				style: {
+					...motionInlineStyles,
+					...style,
+				},
+				onAnimationComplete: () => setAnimationFinished( true ),
+				...otherMotionProps,
+		  }
+		: {
+				animate: false,
+				style,
+		  };
+
+	// When Floating UI has finished positioning and Framer Motion has finished animating
+	// the popover, add the `is-positioned` class to signal that all transitions have finished.
+	const isPositioned =
+		( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
+
+	// In case a `ColorPicker` component is rendered as a child of `Popover`,
+	// the `Popover` component can be notified of when the user is dragging
+	// parts of the `ColorPicker` UI (this is possible because the `ColorPicker`
+	// component exposes the `onPickerDragStart` and `onPickerDragEnd` props
+	// via internal context).
+	// While the user is performing a pointer drag, the `Popover` will render
+	// a transparent backdrop element that will serve as a "pointer events trap",
+	// making sure that no pointer events reach any potential `iframe` element
+	// underneath (like, for example, the editor canvas in the WordPress editor).
+	const [ showBackdrop, setShowBackdrop ] = useState( false );
+	const contextValue = useMemo(
+		() => ( {
+			ColorPicker: {
+				onPickerDragStart() {
+					setShowBackdrop( true );
+				},
+				onPickerDragEnd() {
+					setShowBackdrop( false );
+				},
+			},
+		} ),
+		[]
+	);
 
 	let content = (
-		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<AnimatedWrapper
-			shouldAnimate={ animate && ! isExpanded }
-			placement={ computedPlacement }
-			className={ classnames( 'components-popover', className, {
-				'is-expanded': isExpanded,
-				'is-positioned': x !== null && y !== null,
-				// Use the 'alternate' classname for 'toolbar' variant for back compat.
-				[ `is-${
-					computedVariant === 'toolbar'
-						? 'alternate'
-						: computedVariant
-				}` ]: computedVariant,
-			} ) }
-			{ ...contentProps }
-			ref={ mergedFloatingRef }
-			{ ...dialogProps }
-			tabIndex={ -1 }
-			style={
-				isExpanded
-					? undefined
-					: {
-							position: strategy,
-							top: 0,
-							left: 0,
-							// `x` and `y` are framer-motion specific props and are shorthands
-							// for `translateX` and `translateY`. Currently it is not possible
-							// to use `translateX` and `translateY` because those values would
-							// be overridden by the return value of the
-							// `placementToMotionAnimationProps` function in `AnimatedWrapper`
-							x: computePopoverPosition( x ),
-							y: computePopoverPosition( y ),
-					  }
-			}
-		>
-			{ /* Prevents scroll on the document */ }
-			{ isExpanded && <ScrollLock /> }
-			{ isExpanded && (
-				<div className="components-popover__header">
-					<span className="components-popover__header-title">
-						{ headerTitle }
-					</span>
-					<Button
-						className="components-popover__close"
-						icon={ close }
-						onClick={ onClose }
-					/>
-				</div>
-			) }
-			<div className="components-popover__content">{ children }</div>
-			{ hasArrow && (
+		<>
+			{ showBackdrop && (
 				<div
-					ref={ arrowCallbackRef }
-					className={ [
-						'components-popover__arrow',
-						`is-${ computedPlacement.split( '-' )[ 0 ] }`,
-					].join( ' ' ) }
-					style={ {
-						left:
-							typeof arrowData?.x !== 'undefined' &&
-							Number.isFinite( arrowData.x )
-								? `${ arrowData.x }px`
-								: '',
-						top:
-							typeof arrowData?.y !== 'undefined' &&
-							Number.isFinite( arrowData.y )
-								? `${ arrowData.y }px`
-								: '',
-					} }
-				>
-					<ArrowTriangle />
-				</div>
+					className="components-popover-pointer-events-trap"
+					aria-hidden="true"
+					onClick={ () => setShowBackdrop( false ) }
+				/>
 			) }
-		</AnimatedWrapper>
+			<motion.div
+				className={ classnames( 'components-popover', className, {
+					'is-expanded': isExpanded,
+					'is-positioned': isPositioned,
+					// Use the 'alternate' classname for 'toolbar' variant for back compat.
+					[ `is-${
+						computedVariant === 'toolbar'
+							? 'alternate'
+							: computedVariant
+					}` ]: computedVariant,
+				} ) }
+				{ ...animationProps }
+				{ ...contentProps }
+				ref={ mergedFloatingRef }
+				{ ...dialogProps }
+				tabIndex={ -1 }
+			>
+				{ /* Prevents scroll on the document */ }
+				{ isExpanded && <ScrollLock /> }
+				{ isExpanded && (
+					<div className="components-popover__header">
+						<span className="components-popover__header-title">
+							{ headerTitle }
+						</span>
+						<Button
+							className="components-popover__close"
+							icon={ close }
+							onClick={ onClose }
+						/>
+					</div>
+				) }
+				<div className="components-popover__content">
+					<ContextSystemProvider value={ contextValue }>
+						{ children }
+					</ContextSystemProvider>
+				</div>
+				{ hasArrow && (
+					<div
+						ref={ arrowCallbackRef }
+						className={ [
+							'components-popover__arrow',
+							`is-${ computedPlacement.split( '-' )[ 0 ] }`,
+						].join( ' ' ) }
+						style={ {
+							left:
+								typeof arrowData?.x !== 'undefined' &&
+								Number.isFinite( arrowData.x )
+									? `${ arrowData.x }px`
+									: '',
+							top:
+								typeof arrowData?.y !== 'undefined' &&
+								Number.isFinite( arrowData.y )
+									? `${ arrowData.y }px`
+									: '',
+						} }
+					>
+						<ArrowTriangle />
+					</div>
+				) }
+			</motion.div>
+		</>
 	);
 
 	const shouldRenderWithinSlot = slot.ref && ! inline;
@@ -510,7 +492,10 @@ const UnforwardedPopover = (
 	if ( shouldRenderWithinSlot ) {
 		content = <Fill name={ slotName }>{ content }</Fill>;
 	} else if ( ! inline ) {
-		content = createPortal( content, getPopoverFallbackContainer() );
+		content = createPortal(
+			<StyleProvider document={ document }>{ content }</StyleProvider>,
+			getPopoverFallbackContainer()
+		);
 	}
 
 	if ( hasAnchor ) {
@@ -548,7 +533,7 @@ const UnforwardedPopover = (
  * ```
  *
  */
-export const Popover = forwardRef( UnforwardedPopover );
+export const Popover = contextConnect( UnconnectedPopover, 'Popover' );
 
 function PopoverSlot(
 	{ name = SLOT_NAME }: { name?: string },
@@ -556,7 +541,6 @@ function PopoverSlot(
 ) {
 	return (
 		<Slot
-			// @ts-expect-error Need to type `SlotFill`
 			bubblesVirtually
 			name={ name }
 			className="popover-slot"

package/src/popover/style.scss

@@ -6,6 +6,7 @@ $shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
 $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover {
+	@include reset;
 	z-index: z-index(".components-popover");
 	will-change: transform;
 
@@ -133,3 +134,12 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 		stroke: $gray-900;
 	}
 }
+
+.components-popover-pointer-events-trap {
+	// Same z-index as popover, but rendered before the popover element
+	// in DOM order = it will display just under the popover
+	z-index: z-index(".components-popover");
+	position: fixed;
+	inset: 0;
+	background-color: transparent;
+}