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

package/src/panel/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -16,9 +16,11 @@ import InputControl from '../../input-control';
  */
 import { wordpress } from '@wordpress/icons';
 
-const meta: ComponentMeta< typeof Panel > = {
+const meta: Meta< typeof Panel > = {
 	title: 'Components/Panel',
 	component: Panel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { PanelRow, PanelBody },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -29,11 +31,9 @@ const meta: ComponentMeta< typeof Panel > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Panel > = ( props ) => (
-	<Panel { ...props } />
-);
+const Template: StoryFn< typeof Panel > = ( props ) => <Panel { ...props } />;
 
-export const Default: ComponentStory< typeof Panel > = Template.bind( {} );
+export const Default: StoryFn< typeof Panel > = Template.bind( {} );
 Default.args = {
 	header: 'My panel',
 	children: (
@@ -68,7 +68,7 @@ Default.args = {
  * `PanelRow` is a generic container for rows within a `PanelBody`.
  * It is a flex container with a top margin for spacing.
  */
-export const _PanelRow: ComponentStory< typeof Panel > = Template.bind( {} );
+export const _PanelRow: StoryFn< typeof Panel > = Template.bind( {} );
 _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
@@ -85,9 +85,7 @@ _PanelRow.args = {
 	),
 };
 
-export const DisabledSection: ComponentStory< typeof Panel > = Template.bind(
-	{}
-);
+export const DisabledSection: StoryFn< typeof Panel > = Template.bind( {} );
 DisabledSection.args = {
 	...Default.args,
 	children: (
@@ -99,7 +97,7 @@ DisabledSection.args = {
 	),
 };
 
-export const WithIcon: ComponentStory< typeof Panel > = Template.bind( {} );
+export const WithIcon: StoryFn< typeof Panel > = Template.bind( {} );
 WithIcon.args = {
 	...Default.args,
 	children: (

package/src/placeholder/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import TextControl from '../../text-control';
 
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
-const meta: ComponentMeta< typeof Placeholder > = {
+const meta: Meta< typeof Placeholder > = {
 	component: Placeholder,
 	title: 'Components/Placeholder',
 	argTypes: {
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof Placeholder > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Placeholder > = ( args ) => {
+const Template: StoryFn< typeof Placeholder > = ( args ) => {
 	const [ value, setValue ] = useState( '' );
 
 	return (
@@ -55,9 +55,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Placeholder > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof Placeholder > = Template.bind( {} );
 Default.args = {
 	icon: 'wordpress',
 	label: 'My Placeholder Label',

package/src/popover/README.md

@@ -6,7 +6,7 @@ The behavior of the popover when it exceeds the viewport's edges can be controll
 
 ## Usage
 
-Render a Popover within the parent to which it should anchor.
+Render a Popover adjacent to its container.
 
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
@@ -60,7 +60,7 @@ const MyPopover = () => {
 };
 ```
 
-If you want Popover elements to render to a specific location on the page to allow style cascade to take effect, you must render a `Popover.Slot` further up the element tree:
+By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
 
 ```jsx
 import { render } from '@wordpress/element';

package/src/popover/index.tsx

@@ -3,11 +3,11 @@
  */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
 import classnames from 'classnames';
-import type { Middleware, MiddlewareArguments } from '@floating-ui/react-dom';
 import {
 	useFloating,
 	flip as flipMiddleware,
 	shift as shiftMiddleware,
+	limitShift,
 	autoUpdate,
 	arrow,
 	offset as offsetMiddleware,
@@ -30,6 +30,7 @@ import {
 	useMemo,
 	useState,
 	useCallback,
+	createPortal,
 } from '@wordpress/element';
 import {
 	useViewportMatch,
@@ -49,8 +50,6 @@ import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
 import {
 	computePopoverPosition,
-	getFrameOffset,
-	getFrameScale,
 	positionToPlacement,
 	placementToMotionAnimationProps,
 	getReferenceOwnerDocument,
@@ -63,7 +62,6 @@ import type {
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
-import { limitShift as customLimitShift } from './limit-shift';
 import { overlayMiddlewares } from './overlay-middlewares';
 
 /**
@@ -139,6 +137,20 @@ const AnimatedWrapper = forwardRef(
 
 const slotNameContext = createContext< string | undefined >( undefined );
 
+const fallbackContainerClassname = 'components-popover__fallback-container';
+const getPopoverFallbackContainer = () => {
+	let container = document.body.querySelector(
+		'.' + fallbackContainerClassname
+	);
+	if ( ! container ) {
+		container = document.createElement( 'div' );
+		container.className = fallbackContainerClassname;
+		document.body.append( container );
+	}
+
+	return container;
+};
+
 const UnforwardedPopover = (
 	props: Omit<
 		WordPressComponentProps< PopoverProps, 'div', false >,
@@ -167,6 +179,7 @@ const UnforwardedPopover = (
 		flip = true,
 		resize = true,
 		shift = false,
+		inline = false,
 		variant,
 
 		// Deprecated props
@@ -246,69 +259,34 @@ const UnforwardedPopover = (
 		? positionToPlacement( position )
 		: placementProp;
 
-	/**
-	 * Offsets the position of the popover when the anchor is inside an iframe.
-	 *
-	 * Store the offset in a ref, due to constraints with floating-ui:
-	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
-	 */
-	const frameOffsetRef = useRef( getFrameOffset( referenceOwnerDocument ) );
-
 	const middleware = [
 		...( placementProp === 'overlay' ? overlayMiddlewares() : [] ),
-		// Custom middleware which adjusts the popover's position by taking into
-		// account the offset of the anchor's iframe (if any) compared to the page.
-		{
-			name: 'frameOffset',
-			fn( { x, y }: MiddlewareArguments ) {
-				if ( ! frameOffsetRef.current ) {
-					return {
-						x,
-						y,
-					};
-				}
-
-				return {
-					x: x + frameOffsetRef.current.x,
-					y: y + frameOffsetRef.current.y,
-					data: {
-						// This will be used in the customLimitShift() function.
-						amount: frameOffsetRef.current,
-					},
-				};
-			},
-		},
 		offsetMiddleware( offsetProp ),
-		computedFlipProp ? flipMiddleware() : undefined,
-		computedResizeProp
-			? size( {
-					apply( sizeProps ) {
-						const { firstElementChild } =
-							refs.floating.current ?? {};
-
-						// Only HTMLElement instances have the `style` property.
-						if ( ! ( firstElementChild instanceof HTMLElement ) )
-							return;
-
-						// Reduce the height of the popover to the available space.
-						Object.assign( firstElementChild.style, {
-							maxHeight: `${ sizeProps.availableHeight }px`,
-							overflow: 'auto',
-						} );
-					},
-			  } )
-			: undefined,
-		shift
-			? shiftMiddleware( {
-					crossAxis: true,
-					limiter: customLimitShift(),
-					padding: 1, // Necessary to avoid flickering at the edge of the viewport.
-			  } )
-			: undefined,
+		computedFlipProp && flipMiddleware(),
+		computedResizeProp &&
+			size( {
+				apply( sizeProps ) {
+					const { firstElementChild } = refs.floating.current ?? {};
+
+					// Only HTMLElement instances have the `style` property.
+					if ( ! ( firstElementChild instanceof HTMLElement ) )
+						return;
+
+					// Reduce the height of the popover to the available space.
+					Object.assign( firstElementChild.style, {
+						maxHeight: `${ sizeProps.availableHeight }px`,
+						overflow: 'auto',
+					} );
+				},
+			} ),
+		shift &&
+			shiftMiddleware( {
+				crossAxis: true,
+				limiter: limitShift(),
+				padding: 1, // Necessary to avoid flickering at the edge of the viewport.
+			} ),
 		arrow( { element: arrowRef } ),
-	].filter(
-		( m: Middleware | undefined ): m is Middleware => m !== undefined
-	);
+	];
 	const slotName = useContext( slotNameContext ) || __unstableSlotName;
 	const slot = useSlot( slotName );
 
@@ -337,10 +315,6 @@ const UnforwardedPopover = (
 		// Positioning coordinates
 		x,
 		y,
-		// Callback refs (not regular refs). This allows the position to be updated.
-		// when either elements change.
-		reference: referenceCallbackRef,
-		floating,
 		// Object with "regular" refs to both "reference" and "floating"
 		refs,
 		// Type of CSS position property to use (absolute or fixed)
@@ -356,6 +330,7 @@ const UnforwardedPopover = (
 		middleware,
 		whileElementsMounted: ( referenceParam, floatingParam, updateParam ) =>
 			autoUpdate( referenceParam, floatingParam, updateParam, {
+				layoutShift: false,
 				animationFrame: true,
 			} ),
 	} );
@@ -390,17 +365,16 @@ const UnforwardedPopover = (
 			fallbackReferenceElement,
 			fallbackDocument: document,
 		} );
-		const scale = getFrameScale( resultingReferenceOwnerDoc );
+
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
 			anchorRect,
 			getAnchorRect,
 			fallbackReferenceElement,
-			scale,
 		} );
 
-		referenceCallbackRef( resultingReferenceElement );
+		refs.setReference( resultingReferenceElement );
 
 		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
@@ -413,23 +387,17 @@ const UnforwardedPopover = (
 		anchorRect,
 		getAnchorRect,
 		fallbackReferenceElement,
-		referenceCallbackRef,
+		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. Also update the frame offset if the view resizes.
+	// document scrolls.
 	useLayoutEffect( () => {
 		if (
-			// Reference and root documents are the same.
-			referenceOwnerDocument === document ||
-			// Reference and floating are in the same document.
-			referenceOwnerDocument === refs.floating.current?.ownerDocument ||
-			// The reference's document has no view (i.e. window)
-			// or frame element (ie. it's not an iframe).
-			! referenceOwnerDocument?.defaultView?.frameElement
+			! referenceOwnerDocument ||
+			! referenceOwnerDocument.defaultView
 		) {
-			frameOffsetRef.current = undefined;
 			return;
 		}
 
@@ -440,23 +408,17 @@ const UnforwardedPopover = (
 			? getScrollContainer( frameElement )
 			: null;
 
-		const updateFrameOffset = () => {
-			frameOffsetRef.current = getFrameOffset( referenceOwnerDocument );
-			update();
-		};
-		defaultView.addEventListener( 'resize', updateFrameOffset );
-		scrollContainer?.addEventListener( 'scroll', updateFrameOffset );
-
-		updateFrameOffset();
+		defaultView.addEventListener( 'resize', update );
+		scrollContainer?.addEventListener( 'scroll', update );
 
 		return () => {
-			defaultView.removeEventListener( 'resize', updateFrameOffset );
-			scrollContainer?.removeEventListener( 'scroll', updateFrameOffset );
+			defaultView.removeEventListener( 'resize', update );
+			scrollContainer?.removeEventListener( 'scroll', update );
 		};
-	}, [ referenceOwnerDocument, update, refs.floating ] );
+	}, [ referenceOwnerDocument, update ] );
 
 	const mergedFloatingRef = useMergeRefs( [
-		floating,
+		refs.setFloating,
 		dialogRef,
 		forwardedRef,
 	] );
@@ -527,18 +489,12 @@ const UnforwardedPopover = (
 						left:
 							typeof arrowData?.x !== 'undefined' &&
 							Number.isFinite( arrowData.x )
-								? `${
-										arrowData.x +
-										( frameOffsetRef.current?.x ?? 0 )
-								  }px`
+								? `${ arrowData.x }px`
 								: '',
 						top:
 							typeof arrowData?.y !== 'undefined' &&
 							Number.isFinite( arrowData.y )
-								? `${
-										arrowData.y +
-										( frameOffsetRef.current?.y ?? 0 )
-								  }px`
+								? `${ arrowData.y }px`
 								: '',
 					} }
 				>
@@ -548,15 +504,25 @@ const UnforwardedPopover = (
 		</AnimatedWrapper>
 	);
 
-	if ( slot.ref ) {
+	const shouldRenderWithinSlot = slot.ref && ! inline;
+	const hasAnchor = anchorRef || anchorRect || anchor;
+
+	if ( shouldRenderWithinSlot ) {
 		content = <Fill name={ slotName }>{ content }</Fill>;
+	} else if ( ! inline ) {
+		content = createPortal( content, getPopoverFallbackContainer() );
 	}
 
-	if ( anchorRef || anchorRect || anchor ) {
+	if ( hasAnchor ) {
 		return content;
 	}
 
-	return <span ref={ anchorRefFallback }>{ content }</span>;
+	return (
+		<>
+			<span ref={ anchorRefFallback } />
+			{ content }
+		</>
+	);
 };
 
 /**

package/src/popover/overlay-middlewares.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { MiddlewareArguments } from '@floating-ui/react-dom';
+import type { MiddlewareState } from '@floating-ui/react-dom';
 import { size } from '@floating-ui/react-dom';
 
 export function overlayMiddlewares() {
 	return [
 		{
 			name: 'overlay',
-			fn( { rects }: MiddlewareArguments ) {
+			fn( { rects }: MiddlewareState ) {
 				return rects.reference;
 			},
 		},

package/src/popover/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
 	'overlay',
 ];
 
-const meta: ComponentMeta< typeof Popover > = {
+const meta: Meta< typeof Popover > = {
 	title: 'Components/Popover',
 	component: Popover,
 	argTypes: {
@@ -81,7 +81,7 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
 	);
 };
 
-const Template: ComponentStory< typeof Popover > = ( args ) => {
+const Template: StoryFn< typeof Popover > = ( args ) => {
 	const [ isVisible, setIsVisible ] = useState( false );
 	const toggleVisible = () => {
 		setIsVisible( ( state ) => ! state );
@@ -116,7 +116,7 @@ const Template: ComponentStory< typeof Popover > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Popover > = Template.bind( {} );
+export const Default: StoryFn< typeof Popover > = Template.bind( {} );
 Default.args = {
 	children: (
 		<div style={ { width: '280px', whiteSpace: 'normal' } }>
@@ -128,7 +128,7 @@ Default.args = {
 	),
 };
 
-export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} );
+export const Unstyled: StoryFn< typeof Popover > = Template.bind( {} );
 Unstyled.args = {
 	children: (
 		<div style={ { width: '280px', whiteSpace: 'normal' } }>
@@ -141,7 +141,7 @@ Unstyled.args = {
 	variant: 'unstyled',
 };
 
-export const AllPlacements: ComponentStory< typeof Popover > = ( {
+export const AllPlacements: StoryFn< typeof Popover > = ( {
 	children,
 	...args
 } ) => (
@@ -194,7 +194,7 @@ AllPlacements.args = {
 	flip: false,
 };
 
-export const DynamicHeight: ComponentStory< typeof Popover > = ( {
+export const DynamicHeight: StoryFn< typeof Popover > = ( {
 	children,
 	...args
 } ) => {
@@ -246,9 +246,7 @@ DynamicHeight.args = {
 	children: 'Content with dynamic height',
 };
 
-export const WithSlotOutsideIframe: ComponentStory< typeof Popover > = (
-	args
-) => {
+export const WithSlotOutsideIframe: StoryFn< typeof Popover > = ( args ) => {
 	return <PopoverInsideIframeRenderedInExternalSlot { ...args } />;
 };
 WithSlotOutsideIframe.args = {

package/src/popover/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, getByText } from '@testing-library/react';
 import type { CSSProperties } from 'react';
 
 /**
@@ -112,6 +112,20 @@ describe( 'Popover', () => {
 					expect( screen.getByRole( 'tooltip' ) ).toBeVisible()
 				);
 			} );
+
+			it( 'should render inline regardless of slot name', async () => {
+				const { container } = render(
+					<Popover inline __unstableSlotName="Popover">
+						Hello
+					</Popover>
+				);
+
+				await waitFor( () =>
+					// We want to explicitly check if it's within the container.
+					// eslint-disable-next-line testing-library/prefer-screen-queries
+					expect( getByText( container, 'Hello' ) ).toBeVisible()
+				);
+			} );
 		} );
 
 		describe( 'anchor', () => {

package/src/popover/types.ts

@@ -150,6 +150,12 @@ export type PopoverProps = {
 	 * @default undefined
 	 */
 	variant?: 'unstyled' | 'toolbar';
+	/**
+	 * Whether to render the popover inline or within the slot.
+	 *
+	 * @default false
+	 */
+	inline?: boolean;
 	// Deprecated props
 	/**
 	 * Prevent the popover from flipping and resizing when meeting the viewport

package/src/popover/utils.ts

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
-import type { ReferenceType } from '@floating-ui/react-dom';
+import type { ReferenceType, VirtualElement } from '@floating-ui/react-dom';
 
 /**
  * Internal dependencies
@@ -139,42 +139,6 @@ export const placementToMotionAnimationProps = (
 	};
 };
 
-/**
- * Returns the offset of a document's frame element.
- *
- * @param document The iframe's owner document.
- *
- * @return The offset of the document's frame element, or undefined if the
- * document has no frame element.
- */
-export const getFrameOffset = (
-	document?: Document
-): { x: number; y: number } | undefined => {
-	const frameElement = document?.defaultView?.frameElement;
-	if ( ! frameElement ) {
-		return;
-	}
-	const iframeRect = frameElement.getBoundingClientRect();
-	return { x: iframeRect.left, y: iframeRect.top };
-};
-
-export const getFrameScale = (
-	document?: Document
-): {
-	x: number;
-	y: number;
-} => {
-	const frameElement = document?.defaultView?.frameElement as HTMLElement;
-	if ( ! frameElement ) {
-		return { x: 1, y: 1 };
-	}
-	const rect = frameElement.getBoundingClientRect();
-	return {
-		x: rect.width / frameElement.offsetWidth,
-		y: rect.height / frameElement.offsetHeight,
-	};
-};
-
 export const getReferenceOwnerDocument = ( {
 	anchor,
 	anchorRef,
@@ -197,7 +161,10 @@ export const getReferenceOwnerDocument = ( {
 	// with the `getBoundingClientRect()` function (like real elements).
 	// See https://floating-ui.com/docs/virtual-elements for more info.
 	let resultingReferenceOwnerDoc;
-	if ( anchor ) {
+	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 )
@@ -231,13 +198,11 @@ export const getReferenceElement = ( {
 	anchorRect,
 	getAnchorRect,
 	fallbackReferenceElement,
-	scale,
 }: Pick<
 	PopoverProps,
 	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
 > & {
 	fallbackReferenceElement: Element | null;
-	scale: { x: number; y: number };
 } ): ReferenceType | null => {
 	let referenceElement = null;
 
@@ -299,22 +264,6 @@ export const getReferenceElement = ( {
 		referenceElement = fallbackReferenceElement.parentElement;
 	}
 
-	if ( referenceElement && ( scale.x !== 1 || scale.y !== 1 ) ) {
-		// If the popover is inside an iframe, the coordinates of the
-		// reference element need to be scaled to match the iframe's scale.
-		const rect = referenceElement.getBoundingClientRect();
-		referenceElement = {
-			getBoundingClientRect() {
-				return new window.DOMRect(
-					rect.x * scale.x,
-					rect.y * scale.y,
-					rect.width * scale.x,
-					rect.height * scale.y
-				);
-			},
-		};
-	}
-
 	// Convert any `undefined` value to `null`.
 	return referenceElement ?? null;
 };

package/src/progress-bar/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { ProgressBar } from '..';
 
-const meta: ComponentMeta< typeof ProgressBar > = {
+const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
 	title: 'Components (Experimental)/ProgressBar',
 	argTypes: {
@@ -23,11 +23,9 @@ const meta: ComponentMeta< typeof ProgressBar > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ProgressBar > = ( { ...args } ) => {
+const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 	return <ProgressBar { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ProgressBar > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};