@wordpress/components 21.2.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

@@ -182,6 +182,9 @@
 	backdrop-filter: blur(100px);
 	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 & {
 		background-color: rgba($black, 0.1);
@@ -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/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 ) => (

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 ) => (

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'
 		);
 	} );

package/src/shortcut/test/index.tsx

@@ -11,7 +11,7 @@ import Shortcut from '..';
 describe( 'Shortcut', () => {
 	it( 'does not render anything if no shortcut prop is provided', () => {
 		const { container } = render( <Shortcut /> );
-		expect( container.firstChild ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders the shortcut display text when a string is passed as the shortcut', () => {

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -67,9 +67,11 @@ function useSlotRegistry() {
 		if ( fills.current.get( name ) ) {
 			fills.current.set(
 				name,
-				fills.current
-					.get( name )
-					.filter( ( fillRef ) => fillRef !== ref )
+				valRef(
+					fills.current
+						.get( name )
+						.filter( ( fillRef ) => fillRef !== ref )
+				)
 			);
 		}
 	}, [] );

package/src/style.scss

@@ -1,3 +1,7 @@
+// Variables
+@import "./utils/theme-variables.scss";
+
+// Components
 @import "./animate/style.scss";
 @import "./autocomplete/style.scss";
 @import "./button-group/style.scss";

package/src/tab-panel/index.tsx

@@ -85,7 +85,7 @@ export function TabPanel( {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
-	const handleClick = ( tabKey: string ) => {
+	const handleTabSelection = ( tabKey: string ) => {
 		setSelected( tabKey );
 		onSelect?.( tabKey );
 	};
@@ -98,11 +98,8 @@ export function TabPanel( {
 
 	useEffect( () => {
 		const newSelectedTab = find( tabs, { name: selected } );
-		if ( ! newSelectedTab ) {
-			setSelected(
-				initialTabName ||
-					( tabs.length > 0 ? tabs[ 0 ].name : undefined )
-			);
+		if ( ! newSelectedTab && tabs.length > 0 ) {
+			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
 	}, [ tabs ] );
 
@@ -127,7 +124,7 @@ export function TabPanel( {
 						aria-controls={ `${ instanceId }-${ tab.name }-view` }
 						selected={ tab.name === selected }
 						key={ tab.name }
-						onClick={ () => handleClick( tab.name ) }
+						onClick={ () => handleTabSelection( tab.name ) }
 					>
 						{ tab.title }
 					</TabButton>

package/src/text-highlight/test/index.tsx

@@ -50,9 +50,7 @@ describe( 'TextHighlight', () => {
 			expect( highlightedEls ).toHaveLength( 2 );
 
 			highlightedEls.forEach( ( el ) => {
-				expect( el.textContent ).toEqual(
-					expect.stringContaining( highlight )
-				);
+				expect( el ).toHaveTextContent( highlight );
 			} );
 		} );
 

package/src/theme/README.md

@@ -0,0 +1,34 @@
+# Theme
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`Theme` allows defining theme variables for components in the `@wordpress/components` package.
+
+Multiple `Theme` components can be nested in order to override specific theme variables.
+
+## Usage
+
+```jsx
+import { __experimentalTheme as Theme } from '@wordpress/components';
+
+const Example = () => {
+	return (
+		<Theme accent="red">
+			<Button variant="primary">I'm red</Button>
+			<Theme accent="blue">
+				<Button variant="primary">I'm blue</Button>
+			</Theme>
+		</Theme>
+	);
+};
+```
+
+## Props
+
+### `accent`: `string`
+
+Used to set the accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color. No all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
+
+-   Required: No