@wordpress/components 19.17.0 → 20.0.0

package/src/placeholder/test/index.tsx

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useResizeObserver } from '@wordpress/compose';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import BasePlaceholder from '../';
+import type { WordPressComponentProps } from '../../ui/context';
+import type { PlaceholderProps } from '../types';
+
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( () => [] ),
+	};
+} );
+
+/**
+ * Test icon that can be queried by `getByTestId`
+ */
+const testIcon = (
+	<SVG data-testid="icon">
+		<Path />
+	</SVG>
+);
+
+const Placeholder = (
+	props: Omit<
+		WordPressComponentProps< PlaceholderProps< unknown >, 'div', false >,
+		'ref'
+	>
+) => <BasePlaceholder data-testid="placeholder" { ...props } />;
+
+const getPlaceholder = () => screen.getByTestId( 'placeholder' );
+
+describe( 'Placeholder', () => {
+	beforeEach( () => {
+		// @ts-ignore
+		useResizeObserver.mockReturnValue( [
+			<div key="1" />,
+			{ width: 320 },
+		] );
+	} );
+
+	describe( 'basic rendering', () => {
+		it( 'should by default render label section and fieldset.', () => {
+			render( <Placeholder /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveClass( 'components-placeholder' );
+
+			// Test for empty label. When the label is empty, the only way to
+			// query the div is with `querySelector`.
+			const label = placeholder.querySelector(
+				'.components-placeholder__label'
+			);
+			expect( label ).toBeInTheDocument();
+			expect( label ).toBeEmptyDOMElement();
+
+			// Test for non existent instructions. When the instructions is
+			// empty, the only way to query the div is with `querySelector`.
+			const placeholderInstructions = placeholder.querySelector(
+				'.components-placeholder__instructions'
+			);
+			expect( placeholderInstructions ).not.toBeInTheDocument();
+
+			// Test for empty fieldset.
+			const placeholderFieldset =
+				within( placeholder ).getByRole( 'group' );
+			expect( placeholderFieldset ).toBeInTheDocument();
+			expect( placeholderFieldset ).toBeEmptyDOMElement();
+		} );
+
+		it( 'should render an Icon in the label section', () => {
+			render( <Placeholder icon={ testIcon } /> );
+
+			const placeholder = getPlaceholder();
+			const icon = within( placeholder ).getByTestId( 'icon' );
+			expect( icon.parentNode ).toHaveClass(
+				'components-placeholder__label'
+			);
+			expect( icon ).toBeInTheDocument();
+		} );
+
+		it( 'should render a label section', () => {
+			const label = 'WordPress';
+			render( <Placeholder label={ label } /> );
+			const placeholderLabel = screen.getByText( label );
+
+			expect( placeholderLabel ).toHaveClass(
+				'components-placeholder__label'
+			);
+			expect( placeholderLabel ).toBeInTheDocument();
+		} );
+
+		it( 'should display a fieldset from the children property', () => {
+			const content = 'Fieldset';
+			render( <Placeholder>{ content }</Placeholder> );
+			const placeholderFieldset = screen.getByRole( 'group' );
+
+			expect( placeholderFieldset ).toBeInTheDocument();
+			expect( placeholderFieldset ).toHaveTextContent( content );
+		} );
+
+		it( 'should display a legend if instructions are passed', () => {
+			const instructions = 'Choose an option.';
+			render(
+				<Placeholder instructions={ instructions }>
+					<div>Fieldset</div>
+				</Placeholder>
+			);
+			const captionedFieldset = screen.getByRole( 'group', {
+				name: instructions,
+			} );
+
+			expect( captionedFieldset ).toBeInTheDocument();
+		} );
+
+		it( 'should add an additional className to the top container', () => {
+			render( <Placeholder className="wp-placeholder" /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveClass( 'components-placeholder' );
+			expect( placeholder ).toHaveClass( 'wp-placeholder' );
+		} );
+
+		it( 'should add additional props to the top level container', () => {
+			render( <Placeholder data-test="test" /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveAttribute( 'data-test', 'test' );
+		} );
+	} );
+
+	describe( 'resize aware', () => {
+		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
+			// @ts-ignore
+			useResizeObserver.mockReturnValue( [
+				<div key="1" />,
+				{ width: 480 },
+			] );
+
+			render( <Placeholder /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveClass( 'is-large' );
+			expect( placeholder ).not.toHaveClass( 'is-medium' );
+			expect( placeholder ).not.toHaveClass( 'is-small' );
+		} );
+
+		it( 'should assign modifier class', () => {
+			// @ts-ignore
+			useResizeObserver.mockReturnValue( [
+				<div key="1" />,
+				{ width: null },
+			] );
+
+			render( <Placeholder /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).not.toHaveClass( 'is-large' );
+			expect( placeholder ).not.toHaveClass( 'is-medium' );
+			expect( placeholder ).not.toHaveClass( 'is-small' );
+		} );
+	} );
+} );

package/src/popover/index.js

@@ -13,6 +13,8 @@ import {
 	limitShift,
 	size,
 } from '@floating-ui/react-dom';
+// eslint-disable-next-line no-restricted-imports
+import { motion, useReducedMotion } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -24,6 +26,7 @@ import {
 	createContext,
 	useContext,
 	useMemo,
+	useEffect,
 } from '@wordpress/element';
 import {
 	useViewportMatch,
@@ -40,7 +43,11 @@ import { Path, SVG } from '@wordpress/primitives';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
-import { getAnimateClassName } from '../animate';
+import {
+	getFrameOffset,
+	positionToPlacement,
+	placementToMotionAnimationProps,
+} from './utils';
 
 /**
  * Name of slot in which popover should fill.
@@ -73,50 +80,48 @@ const ArrowTriangle = ( props ) => (
 	</SVG>
 );
 
-const slotNameContext = createContext();
-
-const positionToPlacement = ( position ) => {
-	const [ x, y, z ] = position.split( ' ' );
-
-	if ( [ 'top', 'bottom' ].includes( x ) ) {
-		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'right' ) {
-			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
-			suffix = '-end';
-		}
-		return x + suffix;
-	}
-
-	return y;
-};
+const MaybeAnimatedWrapper = forwardRef(
+	(
+		{
+			style: receivedInlineStyles,
+			placement,
+			shouldAnimate = false,
+			...props
+		},
+		forwardedRef
+	) => {
+		const shouldReduceMotion = useReducedMotion();
+
+		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
+			() => placementToMotionAnimationProps( placement ),
+			[ placement ]
+		);
 
-const placementToAnimationOrigin = ( placement ) => {
-	const [ a, b ] = placement.split( '-' );
-
-	let x, y;
-	if ( a === 'top' || a === 'bottom' ) {
-		x = a === 'top' ? 'bottom' : 'top';
-		y = 'middle';
-		if ( b === 'start' ) {
-			y = 'left';
-		} else if ( b === 'end' ) {
-			y = 'right';
+		if ( shouldAnimate && ! shouldReduceMotion ) {
+			return (
+				<motion.div
+					style={ {
+						...motionInlineStyles,
+						...receivedInlineStyles,
+					} }
+					{ ...otherMotionProps }
+					{ ...props }
+					ref={ forwardedRef }
+				/>
+			);
 		}
-	}
 
-	if ( a === 'left' || a === 'right' ) {
-		x = 'center';
-		y = a === 'left' ? 'right' : 'left';
-		if ( b === 'start' ) {
-			x = 'top';
-		} else if ( b === 'end' ) {
-			x = 'bottom';
-		}
+		return (
+			<div
+				style={ receivedInlineStyles }
+				{ ...props }
+				ref={ forwardedRef }
+			/>
+		);
 	}
+);
 
-	return x + ' ' + y;
-};
+const slotNameContext = createContext();
 
 const Popover = (
 	{
@@ -130,7 +135,7 @@ const Popover = (
 		isAlternate,
 		position,
 		placement: placementProp = 'bottom-start',
-		offset,
+		offset: offsetProp = 0,
 		focusOnMount = 'firstElement',
 		anchorRef,
 		anchorRect,
@@ -162,7 +167,7 @@ const Popover = (
 		? positionToPlacement( position )
 		: placementProp;
 
-	const ownerDocument = useMemo( () => {
+	const referenceOwnerDocument = useMemo( () => {
 		let documentToReturn;
 
 		if ( anchorRef?.top ) {
@@ -187,62 +192,57 @@ const Popover = (
 
 	/**
 	 * 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 frameOffset = useMemo( () => {
-		const { defaultView } = ownerDocument;
-		const { frameElement } = defaultView;
-
-		if ( ! frameElement || ownerDocument === document ) {
-			return undefined;
-		}
-
-		const iframeRect = frameElement.getBoundingClientRect();
-		return { x: iframeRect.left, y: iframeRect.top };
-	}, [ ownerDocument ] );
+	const frameOffsetRef = useRef( getFrameOffset( referenceOwnerDocument ) );
+	/**
+	 * Store the offset prop in a ref, due to constraints with floating-ui:
+	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
+	 */
+	const offsetRef = useRef( offsetProp );
 
 	const middleware = [
-		frameOffset || offset
-			? offsetMiddleware( ( { placement: currentPlacement } ) => {
-					if ( ! frameOffset ) {
-						return offset;
-					}
-
-					const isTopBottomPlacement =
-						currentPlacement.includes( 'top' ) ||
-						currentPlacement.includes( 'bottom' );
-
-					// The main axis should represent the gap between the
-					// floating element and the reference element. The cross
-					// axis is always perpendicular to the main axis.
-					const mainAxis = isTopBottomPlacement ? 'y' : 'x';
-					const crossAxis = mainAxis === 'x' ? 'y' : 'x';
-
-					// When the popover is before the reference, subtract the offset,
-					// of the main axis else add it.
-					const hasBeforePlacement =
-						currentPlacement.includes( 'top' ) ||
-						currentPlacement.includes( 'left' );
-					const mainAxisModifier = hasBeforePlacement ? -1 : 1;
-					const normalizedOffset = offset ? offset : 0;
-
-					return {
-						mainAxis:
-							normalizedOffset +
-							frameOffset[ mainAxis ] * mainAxisModifier,
-						crossAxis: frameOffset[ crossAxis ],
-					};
-			  } )
-			: undefined,
+		offsetMiddleware( ( { placement: currentPlacement } ) => {
+			if ( ! frameOffsetRef.current ) {
+				return offsetRef.current;
+			}
+
+			const isTopBottomPlacement =
+				currentPlacement.includes( 'top' ) ||
+				currentPlacement.includes( 'bottom' );
+
+			// The main axis should represent the gap between the
+			// floating element and the reference element. The cross
+			// axis is always perpendicular to the main axis.
+			const mainAxis = isTopBottomPlacement ? 'y' : 'x';
+			const crossAxis = mainAxis === 'x' ? 'y' : 'x';
+
+			// When the popover is before the reference, subtract the offset,
+			// of the main axis else add it.
+			const hasBeforePlacement =
+				currentPlacement.includes( 'top' ) ||
+				currentPlacement.includes( 'left' );
+			const mainAxisModifier = hasBeforePlacement ? -1 : 1;
+
+			return {
+				mainAxis:
+					offsetRef.current +
+					frameOffsetRef.current[ mainAxis ] * mainAxisModifier,
+				crossAxis: frameOffsetRef.current[ crossAxis ],
+			};
+		} ),
 		__unstableForcePosition ? undefined : flip(),
 		__unstableForcePosition
 			? undefined
 			: size( {
 					apply( sizeProps ) {
-						const { height } = sizeProps;
+						const { availableHeight } = sizeProps;
 						if ( ! refs.floating.current ) return;
 						// Reduce the height of the popover to the available space.
 						Object.assign( refs.floating.current.firstChild.style, {
-							maxHeight: `${ height }px`,
+							maxHeight: `${ availableHeight }px`,
 							overflow: 'auto',
 						} );
 					},
@@ -296,6 +296,11 @@ const Popover = (
 		middlewareData: { arrow: arrowData = {} },
 	} = useFloating( { placement: normalizedPlacementFromProps, middleware } );
 
+	useEffect( () => {
+		offsetRef.current = offsetProp;
+		update();
+	}, [ offsetProp, update ] );
+
 	// Update the `reference`'s ref.
 	//
 	// In floating-ui's terms:
@@ -371,7 +376,10 @@ const Popover = (
 			refs.floating.current,
 			update
 		);
-	}, [ anchorRef, anchorRect, getAnchorRect ] );
+		// 'reference' and 'refs.floating' are refs and don't need to be listed
+		// as dependencies (see https://github.com/WordPress/gutenberg/pull/41612)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ anchorRef, anchorRect, getAnchorRect, update ] );
 
 	// This is only needed for a smooth transition when moving blocks.
 	useLayoutEffect( () => {
@@ -384,27 +392,43 @@ const Popover = (
 		return () => {
 			observer.disconnect();
 		};
-	}, [ __unstableObserveElement ] );
+	}, [ __unstableObserveElement, update ] );
 
 	// 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.
+	// document scrolls. Also update the frame offset if the view resizes.
 	useLayoutEffect( () => {
-		if ( ownerDocument === document ) {
+		if ( referenceOwnerDocument === document ) {
+			frameOffsetRef.current = undefined;
 			return;
 		}
 
-		ownerDocument.addEventListener( 'scroll', update );
-		return () => ownerDocument.removeEventListener( 'scroll', update );
-	}, [ ownerDocument ] );
+		const { defaultView } = referenceOwnerDocument;
 
-	/** @type {false | string} */
-	const animateClassName =
-		!! animate &&
-		getAnimateClassName( {
-			type: 'appear',
-			origin: placementToAnimationOrigin( computedPlacement ),
-		} );
+		referenceOwnerDocument.addEventListener( 'scroll', update );
+
+		let updateFrameOffset;
+		const hasFrameElement =
+			!! referenceOwnerDocument?.defaultView?.frameElement;
+		if ( hasFrameElement ) {
+			updateFrameOffset = () => {
+				frameOffsetRef.current = getFrameOffset(
+					referenceOwnerDocument
+				);
+				update();
+			};
+			updateFrameOffset();
+			defaultView.addEventListener( 'resize', updateFrameOffset );
+		}
+
+		return () => {
+			referenceOwnerDocument.removeEventListener( 'scroll', update );
+
+			if ( updateFrameOffset ) {
+				defaultView.removeEventListener( 'resize', updateFrameOffset );
+			}
+		};
+	}, [ referenceOwnerDocument, update ] );
 
 	const mergedFloatingRef = useMergeRefs( [
 		floating,
@@ -418,16 +442,13 @@ const Popover = (
 	let content = (
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className={ classnames(
-				'components-popover',
-				className,
-				animateClassName,
-				{
-					'is-expanded': isExpanded,
-					'is-alternate': isAlternate,
-				}
-			) }
+		<MaybeAnimatedWrapper
+			shouldAnimate={ animate && ! isExpanded }
+			placement={ computedPlacement }
+			className={ classnames( 'components-popover', className, {
+				'is-expanded': isExpanded,
+				'is-alternate': isAlternate,
+			} ) }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }
 			{ ...dialogProps }
@@ -476,7 +497,7 @@ const Popover = (
 					<ArrowTriangle />
 				</div>
 			) }
-		</div>
+		</MaybeAnimatedWrapper>
 	);
 
 	if ( slot.ref ) {

package/src/popover/stories/index.js

@@ -126,7 +126,14 @@ export const Default = ( args ) => {
 	);
 };
 Default.args = {
-	children: <>Popover&apos;s&nbsp;content</>,
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+			aliquip ex ea commodo consequat.
+		</div>
+	),
 };
 
 /**
@@ -166,8 +173,15 @@ AllPlacements.parameters = {
 };
 AllPlacements.args = {
 	...Default.args,
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua.
+		</div>
+	),
 	noArrow: false,
 	offset: 10,
+	__unstableForcePosition: true,
 };
 
 export const DynamicHeight = ( { children, ...args } ) => {
@@ -230,7 +244,7 @@ export const WithSlotOutsideIframe = ( args ) => {
 				<Iframe
 					style={ {
 						width: '100%',
-						height: '100%',
+						height: '400px',
 					} }
 				>
 					<div
@@ -244,7 +258,7 @@ export const WithSlotOutsideIframe = ( args ) => {
 								padding: '8px',
 								background: 'salmon',
 								maxWidth: '200px',
-								marginTop: '30px',
+								marginTop: '100px',
 								marginLeft: 'auto',
 								marginRight: 'auto',
 							} }

package/src/popover/test/__snapshots__/index.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Popover should pass additional props to portaled element 1`] = `
+exports[`Popover Component should pass additional props to portaled element 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-left is-from-top"
+    class="components-popover"
     role="tooltip"
-    style="position: absolute;"
+    style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 0% 0% 0;"
     tabindex="-1"
   >
     <div
@@ -17,11 +17,11 @@ exports[`Popover should pass additional props to portaled element 1`] = `
 </span>
 `;
 
-exports[`Popover should render content 1`] = `
+exports[`Popover Component should render content 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-left is-from-top"
-    style="position: absolute;"
+    class="components-popover"
+    style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 0% 0% 0;"
     tabindex="-1"
   >
     <div