@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

package/src/notice/test/index.js

@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
-import { create } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import TokenList from '@wordpress/token-list';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -23,9 +21,7 @@ describe( 'Notice', () => {
 	} );
 
 	it( 'should match snapshot', () => {
-		const renderer = new ShallowRenderer();
-
-		renderer.render(
+		const { container } = render(
 			<Notice
 				status="success"
 				actions={ [
@@ -38,63 +34,47 @@ describe( 'Notice', () => {
 			</Notice>
 		);
 
-		expect( renderer.getRenderOutput() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
-		const renderer = new ShallowRenderer();
-
-		renderer.render( <Notice isDismissible={ false } /> );
+		const { container } = render( <Notice isDismissible={ false } /> );
 
-		const classes = new TokenList(
-			renderer.getRenderOutput().props.className
-		);
-		expect( classes.contains( 'components-notice' ) ).toBe( true );
-		expect( classes.contains( 'is-dismissible' ) ).toBe( false );
+		expect( container.firstChild ).toHaveClass( 'components-notice' );
+		expect( container.firstChild ).not.toHaveClass( 'is-dismissible' );
 	} );
 
 	it( 'should default to info status', () => {
-		const renderer = new ShallowRenderer();
+		const { container } = render( <Notice /> );
 
-		renderer.render( <Notice /> );
-
-		const classes = new TokenList(
-			renderer.getRenderOutput().props.className
-		);
-		expect( classes.contains( 'is-info' ) ).toBe( true );
+		expect( container.firstChild ).toHaveClass( 'is-info' );
 	} );
 
 	describe( 'useSpokenMessage', () => {
 		it( 'should speak the given message', () => {
-			const tree = create( <Notice>FYI</Notice> );
-			tree.update();
+			render( <Notice>FYI</Notice> );
 
 			expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
 		} );
 
 		it( 'should speak the given message by explicit politeness', () => {
-			const tree = create(
-				<Notice politeness="assertive">Uh oh!</Notice>
-			);
-			tree.update();
+			render( <Notice politeness="assertive">Uh oh!</Notice> );
 
 			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
 		} );
 
 		it( 'should speak the given message by implicit politeness by status', () => {
-			const tree = create( <Notice status="error">Uh oh!</Notice> );
-			tree.update();
+			render( <Notice status="error">Uh oh!</Notice> );
 
 			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
 		} );
 
 		it( 'should speak the given message, preferring explicit to implicit politeness', () => {
-			const tree = create(
+			render(
 				<Notice politeness="polite" status="error">
 					No need to panic
 				</Notice>
 			);
-			tree.update();
 
 			expect( speak ).toHaveBeenCalledWith(
 				'No need to panic',
@@ -105,12 +85,11 @@ describe( 'Notice', () => {
 		it( 'should coerce a message to a string', () => {
 			// This test assumes that `@wordpress/a11y` is capable of handling
 			// markup strings appropriately.
-			const tree = create(
+			render(
 				<Notice>
 					With <em>emphasis</em> this time.
 				</Notice>
 			);
-			tree.update();
 
 			expect( speak ).toHaveBeenCalledWith(
 				'With <em>emphasis</em> this time.',
@@ -119,12 +98,12 @@ describe( 'Notice', () => {
 		} );
 
 		it( 'should not re-speak an effectively equivalent element message', () => {
-			const tree = create(
+			const { rerender } = render(
 				<Notice>
 					With <em>emphasis</em> this time.
 				</Notice>
 			);
-			tree.update(
+			rerender(
 				<Notice>
 					With <em>emphasis</em> this time.
 				</Notice>

package/src/notice/test/list.js

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
-
-/**
- * WordPress dependencies
- */
-import TokenList from '@wordpress/token-list';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -15,14 +10,11 @@ import NoticeList from '../list';
 
 describe( 'NoticeList', () => {
 	it( 'should merge className', () => {
-		const renderer = new ShallowRenderer();
-
-		renderer.render( <NoticeList notices={ [] } className="is-ok" /> );
-
-		const classes = new TokenList(
-			renderer.getRenderOutput().props.className
+		const { container } = render(
+			<NoticeList notices={ [] } className="is-ok" />
 		);
-		expect( classes.contains( 'is-ok' ) ).toBe( true );
-		expect( classes.contains( 'components-notice-list' ) ).toBe( true );
+
+		expect( container.firstChild ).toHaveClass( 'is-ok' );
+		expect( container.firstChild ).toHaveClass( 'components-notice-list' );
 	} );
 } );

package/src/number-control/test/index.js

@@ -90,9 +90,10 @@ describe( 'NumberControl', () => {
 			// After the blur, the `onChange` callback fires asynchronously.
 			await waitFor( () => {
 				expect( spy ).toHaveBeenCalledTimes( 2 );
-				expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
-				expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
 			} );
+
+			expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
+			expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
 		} );
 
 		it( 'should call onChange callback when value is not valid', () => {

package/src/panel/test/body.js

@@ -67,7 +67,7 @@ describe( 'PanelBody', () => {
 			let panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
-			expect( panelContent.getAttribute( 'hidden' ) ).toBe( '' );
+			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
@@ -77,7 +77,7 @@ describe( 'PanelBody', () => {
 			panelContent = getPanelBodyContent( container );
 
 			expect( panelContent ).toBeTruthy();
-			expect( panelContent.getAttribute( 'hidden' ) ).toBeNull();
+			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 

package/src/placeholder/style.scss

@@ -178,9 +178,12 @@
 	min-width: 100px;
 
 	// Blur the background so layered dashed placeholders are still visually separate.
-	// We also provide a semitransparent background so as to allow duotones to sheen through.
+	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
 	backdrop-filter: blur(100px);
-	background-color: rgba($white, 0.1);
+	background-color: transparent;
+
+	// This appears to fix an occasional Chrome bug where the blurred background would have an incorrect color.
+	backface-visibility: hidden;
 
 	// Invert the colors in themes deemed dark.
 	.is-dark-theme & {
@@ -201,6 +204,7 @@
 	.components-placeholder__instructions,
 	.components-button {
 		opacity: 0;
+		pointer-events: none;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 	}
@@ -210,6 +214,7 @@
 		.components-placeholder__instructions,
 		.components-button {
 			opacity: 1;
+			pointer-events: auto;
 		}
 	}
 

package/src/resizable-box/resize-tooltip/utils.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
 const noop = () => {};
@@ -84,23 +84,23 @@ export function useResizeLabel( {
 	 */
 	const moveTimeoutRef = useRef< number >();
 
-	const unsetMoveXY = () => {
-		/*
-		 * If axis is controlled, we will avoid resetting the moveX and moveY values.
-		 * This will allow for the preferred axis values to persist in the label.
-		 */
-		if ( isAxisControlled ) return;
-		setMoveX( false );
-		setMoveY( false );
-	};
+	const debounceUnsetMoveXY = useCallback( () => {
+		const unsetMoveXY = () => {
+			/*
+			 * If axis is controlled, we will avoid resetting the moveX and moveY values.
+			 * This will allow for the preferred axis values to persist in the label.
+			 */
+			if ( isAxisControlled ) return;
+			setMoveX( false );
+			setMoveY( false );
+		};
 
-	const debounceUnsetMoveXY = () => {
 		if ( moveTimeoutRef.current ) {
 			window.clearTimeout( moveTimeoutRef.current );
 		}
 
 		moveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );
-	};
+	}, [ fadeTimeout, isAxisControlled ] );
 
 	useEffect( () => {
 		/*
@@ -143,7 +143,7 @@ export function useResizeLabel( {
 
 		onResize( { width, height } );
 		debounceUnsetMoveXY();
-	}, [ width, height ] );
+	}, [ width, height, onResize, debounceUnsetMoveXY ] );
 
 	const label = getSizeLabel( {
 		axis,

package/src/sandbox/index.js

@@ -9,64 +9,79 @@ import {
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
-const observeAndResizeJS = `
-	( function() {
-		var observer;
+const observeAndResizeJS = function () {
+	const { MutationObserver } = window;
 
-		if ( ! window.MutationObserver || ! document.body || ! window.parent ) {
-			return;
-		}
+	if ( ! MutationObserver || ! document.body || ! window.parent ) {
+		return;
+	}
 
-		function sendResize() {
-			var clientBoundingRect = document.body.getBoundingClientRect();
+	function sendResize() {
+		const clientBoundingRect = document.body.getBoundingClientRect();
 
-			window.parent.postMessage( {
+		window.parent.postMessage(
+			{
 				action: 'resize',
 				width: clientBoundingRect.width,
 				height: clientBoundingRect.height,
-			}, '*' );
-		}
+			},
+			'*'
+		);
+	}
 
-		observer = new MutationObserver( sendResize );
-		observer.observe( document.body, {
-			attributes: true,
-			attributeOldValue: false,
-			characterData: true,
-			characterDataOldValue: false,
-			childList: true,
-			subtree: true
-		} );
-
-		window.addEventListener( 'load', sendResize, true );
-
-		// Hack: Remove viewport unit styles, as these are relative
-		// the iframe root and interfere with our mechanism for
-		// determining the unconstrained page bounds.
-		function removeViewportStyles( ruleOrNode ) {
-			if( ruleOrNode.style ) {
-				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {
-					if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
-						ruleOrNode.style[ style ] = '';
-					}
-				} );
-			}
+	const observer = new MutationObserver( sendResize );
+	observer.observe( document.body, {
+		attributes: true,
+		attributeOldValue: false,
+		characterData: true,
+		characterDataOldValue: false,
+		childList: true,
+		subtree: true,
+	} );
+
+	window.addEventListener( 'load', sendResize, true );
+
+	// Hack: Remove viewport unit styles, as these are relative
+	// the iframe root and interfere with our mechanism for
+	// determining the unconstrained page bounds.
+	function removeViewportStyles( ruleOrNode ) {
+		if ( ruleOrNode.style ) {
+			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
+				style
+			) {
+				if (
+					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+				) {
+					ruleOrNode.style[ style ] = '';
+				}
+			} );
 		}
+	}
 
-		Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );
-		Array.prototype.forEach.call( document.styleSheets, function( stylesheet ) {
-			Array.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );
-		} );
+	Array.prototype.forEach.call(
+		document.querySelectorAll( '[style]' ),
+		removeViewportStyles
+	);
+	Array.prototype.forEach.call(
+		document.styleSheets,
+		function ( stylesheet ) {
+			Array.prototype.forEach.call(
+				stylesheet.cssRules || stylesheet.rules,
+				removeViewportStyles
+			);
+		}
+	);
 
-		document.body.style.position = 'absolute';
-		document.body.style.width = '100%';
-		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+	document.body.style.position = 'absolute';
+	document.body.style.width = '100%';
+	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
 
-		sendResize();
+	sendResize();
 
-		// Resize events can change the width of elements with 100% width, but we don't
-		// get an DOM mutations for that, so do the resize when the window is resized, too.
-		window.addEventListener( 'resize', sendResize, true );
-} )();`;
+	// Resize events can change the width of elements with 100% width, but we don't
+	// get an DOM mutations for that, so do the resize when the window is resized, too.
+	window.addEventListener( 'resize', sendResize, true );
+};
 
 const style = `
 	body {
@@ -153,7 +168,7 @@ export default function Sandbox( {
 					<script
 						type="text/javascript"
 						dangerouslySetInnerHTML={ {
-							__html: observeAndResizeJS,
+							__html: `(${ observeAndResizeJS.toString() })();`,
 						} }
 					/>
 					{ scripts.map( ( src ) => (
@@ -205,32 +220,38 @@ export default function Sandbox( {
 			setHeight( data.height );
 		}
 
-		const { ownerDocument } = ref.current;
+		const iframe = ref.current;
+		const { ownerDocument } = iframe;
 		const { defaultView } = ownerDocument;
 
 		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
 		// after reordering the containing block. See these two issues for more details:
 		// https://github.com/WordPress/gutenberg/issues/6146
 		// https://github.com/facebook/react/issues/18752
-		ref.current.addEventListener( 'load', tryNoForceSandbox, false );
+		iframe.addEventListener( 'load', tryNoForceSandbox, false );
 		defaultView.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
-			ref.current?.removeEventListener(
-				'load',
-				tryNoForceSandbox,
-				false
-			);
+			iframe?.removeEventListener( 'load', tryNoForceSandbox, false );
 			defaultView.addEventListener( 'message', checkMessageForResize );
 		};
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useEffect( () => {
 		trySandbox();
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandbox( true );
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ html, type ] );
 
 	return (

package/src/sandbox/index.native.js

@@ -22,67 +22,85 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-const observeAndResizeJS = `
-	( function() {
-		var observer;
-
-		if ( ! window.MutationObserver || ! document.body || ! window.parent ) {
-			return;
-		}
+const observeAndResizeJS = function () {
+	// Hermes requires a special directive to preserve the original source code
+	// when using `Function.prototype.toString()` below.
+	// https://github.com/facebook/hermes/issues/114#issuecomment-887106990
+	'show source';
+	const { MutationObserver } = window;
+
+	if ( ! MutationObserver || ! document.body || ! window.parent ) {
+		return;
+	}
 
-		function sendResize() {
-			var clientBoundingRect = document.body.getBoundingClientRect();
+	function sendResize() {
+		const clientBoundingRect = document.body.getBoundingClientRect();
 
-			// The function postMessage is exposed by the react-native-webview library
-			// to communicate between React Native and the WebView, in this case,
-			// we use it for notifying resize changes.
-            window.ReactNativeWebView.postMessage(JSON.stringify( {
-                action: 'resize',
+		// The function postMessage is exposed by the react-native-webview library
+		// to communicate between React Native and the WebView, in this case,
+		// we use it for notifying resize changes.
+		window.ReactNativeWebView.postMessage(
+			JSON.stringify( {
+				action: 'resize',
 				width: clientBoundingRect.width,
 				height: clientBoundingRect.height,
-            }));
-		}
+			} )
+		);
+	}
 
-		observer = new MutationObserver( sendResize );
-		observer.observe( document.body, {
-			attributes: true,
-			attributeOldValue: false,
-			characterData: true,
-			characterDataOldValue: false,
-			childList: true,
-			subtree: true
-		} );
-
-		window.addEventListener( 'load', sendResize, true );
-
-		// Hack: Remove viewport unit styles, as these are relative
-		// the iframe root and interfere with our mechanism for
-		// determining the unconstrained page bounds.
-		function removeViewportStyles( ruleOrNode ) {
-			if( ruleOrNode.style ) {
-				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {
-					if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
-						ruleOrNode.style[ style ] = '';
-					}
-				} );
-			}
+	const observer = new MutationObserver( sendResize );
+	observer.observe( document.body, {
+		attributes: true,
+		attributeOldValue: false,
+		characterData: true,
+		characterDataOldValue: false,
+		childList: true,
+		subtree: true,
+	} );
+
+	window.addEventListener( 'load', sendResize, true );
+
+	// Hack: Remove viewport unit styles, as these are relative
+	// the iframe root and interfere with our mechanism for
+	// determining the unconstrained page bounds.
+	function removeViewportStyles( ruleOrNode ) {
+		if ( ruleOrNode.style ) {
+			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
+				style
+			) {
+				if (
+					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+				) {
+					ruleOrNode.style[ style ] = '';
+				}
+			} );
 		}
+	}
 
-		Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );
-		Array.prototype.forEach.call( document.styleSheets, function( stylesheet ) {
-			Array.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles );
-		} );
+	Array.prototype.forEach.call(
+		document.querySelectorAll( '[style]' ),
+		removeViewportStyles
+	);
+	Array.prototype.forEach.call(
+		document.styleSheets,
+		function ( stylesheet ) {
+			Array.prototype.forEach.call(
+				stylesheet.cssRules || stylesheet.rules,
+				removeViewportStyles
+			);
+		}
+	);
 
-		document.body.style.position = 'absolute';
-		document.body.style.width = '100%';
-		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+	document.body.style.position = 'absolute';
+	document.body.style.width = '100%';
+	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
 
-		sendResize();
+	sendResize();
 
-		// Resize events can change the width of elements with 100% width, but we don't
-		// get an DOM mutations for that, so do the resize when the window is resized, too.
-		window.addEventListener( 'resize', sendResize, true );
-} )();`;
+	// Resize events can change the width of elements with 100% width, but we don't
+	// get an DOM mutations for that, so do the resize when the window is resized, too.
+	window.addEventListener( 'resize', sendResize, true );
+};
 
 const style = `
 	body {
@@ -215,7 +233,9 @@ function Sandbox( {
 					<script
 						type="text/javascript"
 						dangerouslySetInnerHTML={ {
-							__html: customJS || observeAndResizeJS,
+							__html:
+								customJS ||
+								`(${ observeAndResizeJS.toString() })();`,
 						} }
 					/>
 					{ scripts.map( ( src ) => (
@@ -282,6 +302,9 @@ function Sandbox( {
 
 	useEffect( () => {
 		updateContentHtml();
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {

package/src/sandbox/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -39,28 +39,25 @@ describe( 'Sandbox', () => {
 	};
 
 	it( 'should rerender with new emdeded content if html prop changes', () => {
-		let result;
-		act( () => {
-			result = render( <TestWrapper /> );
-		} );
+		const result = render( <TestWrapper /> );
 
 		const iframe = result.container.querySelector( '.components-sandbox' );
 
 		let sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
-		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
 			'https://super.embed'
 		);
 
-		act( () => {
-			fireEvent.click( result.getByRole( 'button' ) );
-		} );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
-		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
 			'https://another.super.embed'
 		);
 	} );