@wordpress/components 23.6.0 → 23.8.0

package/src/navigator/test/index.tsx

@@ -22,6 +22,7 @@ import {
 	NavigatorToParentButton,
 	useNavigator,
 } from '..';
+import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
 	raw: ' "\'><=invalid_path',
@@ -57,6 +58,7 @@ const BUTTON_TEXT = {
 		'Navigate to screen with an invalid HTML value as a path.',
 	back: 'Go back',
 	backUsingGoTo: 'Go back using goTo',
+	goToWithSkipFocus: 'Go to with skipFocus',
 };
 
 type CustomTestOnClickHandler = (
@@ -64,6 +66,7 @@ type CustomTestOnClickHandler = (
 		| {
 				type: 'goTo';
 				path: string;
+				options?: NavigateOptions;
 		  }
 		| { type: 'goBack' }
 		| { type: 'goToParent' }
@@ -108,6 +111,26 @@ function CustomNavigatorGoToBackButton( {
 	);
 }
 
+function CustomNavigatorGoToSkipFocusButton( {
+	path,
+	onClick,
+	...props
+}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goTo } = useNavigator();
+	return (
+		<Button
+			onClick={ () => {
+				goTo( path, { skipFocus: true } );
+				// Used to spy on the values passed to `navigator.goTo`.
+				onClick?.( { type: 'goTo', path } );
+			} }
+			{ ...props }
+		/>
+	);
+}
+
 function CustomNavigatorBackButton( {
 	onClick,
 	...props
@@ -342,6 +365,12 @@ const MyHierarchicalNavigation = ( {
 						{ BUTTON_TEXT.backUsingGoTo }
 					</CustomNavigatorGoToBackButton>
 				</NavigatorScreen>
+				<CustomNavigatorGoToSkipFocusButton
+					path={ PATHS.NESTED }
+					onClick={ onNavigatorButtonClick }
+				>
+					{ BUTTON_TEXT.goToWithSkipFocus }
+				</CustomNavigatorGoToSkipFocusButton>
 			</NavigatorProvider>
 		</>
 	);
@@ -716,6 +745,29 @@ describe( 'Navigator', () => {
 			await user.click( getNavigationButton( 'back' ) );
 			expect( getNavigationButton( 'toChildScreen' ) ).toHaveFocus();
 		} );
+
+		it( 'should skip focus based on location `skipFocus` option', async () => {
+			const user = userEvent.setup();
+			render( <MyHierarchicalNavigation /> );
+
+			// Navigate to child screen with skipFocus.
+			await user.click( getNavigationButton( 'goToWithSkipFocus' ) );
+			expect( queryScreen( 'home' ) ).not.toBeInTheDocument();
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+
+			// The clicked button should remain focused.
+			expect( getNavigationButton( 'goToWithSkipFocus' ) ).toHaveFocus();
+
+			// Navigate back to parent screen.
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			// The first tabbable element receives focus.
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
+		} );
 	} );
 
 	describe( 'animation', () => {

package/src/navigator/types.ts

@@ -10,9 +10,10 @@ import type { ButtonAsButtonProps } from '../button/types';
 
 export type MatchParams = Record< string, string | string[] >;
 
-type NavigateOptions = {
+export type NavigateOptions = {
 	focusTargetSelector?: string;
 	isBack?: boolean;
+	skipFocus?: boolean;
 };
 
 export type NavigatorLocation = NavigateOptions & {

package/src/palette-edit/index.tsx

@@ -133,7 +133,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 						__nextHasNoMargin
 						__experimentalIsRenderedInSidebar
 						value={ element.gradient }
-						onChange={ ( newGradient: Gradient[ 'gradient' ] ) => {
+						onChange={ ( newGradient ) => {
 							onChange( {
 								...element,
 								gradient: newGradient,
@@ -532,7 +532,7 @@ export function PaletteEdit( {
 			{ hasElements && (
 				<>
 					{ isEditing && (
-						<PaletteEditListView< typeof elements[ number ] >
+						<PaletteEditListView< ( typeof elements )[ number ] >
 							canOnlyChangeValues={ canOnlyChangeValues }
 							elements={ elements }
 							// @ts-expect-error TODO: Don't know how to resolve
@@ -548,13 +548,13 @@ export function PaletteEdit( {
 							isGradient={ isGradient }
 							onClose={ () => setEditingElement( null ) }
 							onChange={ (
-								newElement: typeof elements[ number ]
+								newElement: ( typeof elements )[ number ]
 							) => {
 								debounceOnChange(
 									// @ts-expect-error TODO: Don't know how to resolve
 									elements.map(
 										(
-											currentElement: typeof elements[ number ],
+											currentElement: ( typeof elements )[ number ],
 											currentIndex: number
 										) => {
 											if (
@@ -572,7 +572,6 @@ export function PaletteEdit( {
 					) }
 					{ ! isEditing &&
 						( isGradient ? (
-							// @ts-expect-error TODO: Remove when GradientPicker is typed.
 							<GradientPicker
 								__nextHasNoMargin
 								gradients={ gradients }

package/src/query-controls/author-select.tsx

@@ -27,6 +27,7 @@ export default function AuthorSelect( {
 					? String( selectedAuthorId )
 					: undefined
 			}
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/query-controls/category-select.tsx

@@ -36,6 +36,7 @@ export default function CategorySelect( {
 					: undefined
 			}
 			{ ...props }
+			__nextHasNoMarginBottom
 		/>
 	);
 }

package/src/query-controls/index.tsx

@@ -11,6 +11,7 @@ import CategorySelect from './category-select';
 import FormTokenField from '../form-token-field';
 import RangeControl from '../range-control';
 import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
 import type {
 	QueryControlsProps,
 	QueryControlsWithMultipleCategorySelectionProps,
@@ -75,7 +76,7 @@ export function QueryControls( {
 	...props
 }: QueryControlsProps ) {
 	return (
-		<>
+		<VStack spacing="4" className="components-query-controls">
 			{ [
 				onOrderChange && onOrderByChange && (
 					<SelectControl
@@ -142,6 +143,7 @@ export function QueryControls( {
 					props.categorySuggestions &&
 					props.onCategoryChange && (
 						<FormTokenField
+							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
 							value={
@@ -185,7 +187,7 @@ export function QueryControls( {
 					/>
 				),
 			] }
-		</>
+		</VStack>
 	);
 }
 

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

@@ -13,7 +13,7 @@ export const POSITIONS = {
 	corner: 'corner',
 } as const;
 
-export type Position = typeof POSITIONS[ keyof typeof POSITIONS ];
+export type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];
 
 interface UseResizeLabelProps {
 	/** The label value. */

package/src/sandbox/index.native.js

@@ -14,6 +14,8 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	forwardRef,
+	useCallback,
 } from '@wordpress/element';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
@@ -22,85 +24,84 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-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;
+const observeAndResizeJS = `
+	(function() {
+		const { MutationObserver } = window;
 
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
-		return;
-	}
-
-	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',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-			} )
-		);
-	}
+		if ( ! MutationObserver || ! document.body || ! window.parent ) {
+			return;
+		}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+		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',
+					width: clientBoundingRect.width,
+					height: clientBoundingRect.height,
+				} )
+			);
+		}
 
-	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 ] )
+		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
 				) {
-					ruleOrNode.style[ 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 );
+		window.addEventListener( 'orientationchange', sendResize, true );
+	})();
+`;
 
 const style = `
 	body {
@@ -171,20 +172,23 @@ const style = `
 
 const EMPTY_ARRAY = [];
 
-function Sandbox( {
-	containerStyle,
-	customJS,
-	html = '',
-	lang = 'en',
-	providerUrl = '',
-	scripts = EMPTY_ARRAY,
-	styles = EMPTY_ARRAY,
-	title = '',
-	type,
-	url,
-} ) {
+const Sandbox = forwardRef( function Sandbox(
+	{
+		containerStyle,
+		customJS,
+		html = '',
+		lang = 'en',
+		providerUrl = '',
+		scripts = EMPTY_ARRAY,
+		styles = EMPTY_ARRAY,
+		title = '',
+		type,
+		url,
+		onWindowEvents = {},
+	},
+	ref
+) {
 	const colorScheme = usePreferredColorScheme();
-	const ref = useRef();
 	const [ height, setHeight ] = useState( 0 );
 	const [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );
 
@@ -230,14 +234,6 @@ function Sandbox( {
 					className={ type }
 				>
 					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html:
-								customJS ||
-								`(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
 					{ scripts.map( ( src ) => (
 						<script key={ src } src={ src } />
 					) ) }
@@ -247,6 +243,21 @@ function Sandbox( {
 		return '<!DOCTYPE html>' + renderToString( htmlDoc );
 	}
 
+	const getInjectedJavaScript = useCallback( () => {
+		// Allow parent to override the resize observers with prop.customJS (legacy support)
+		let injectedJS = customJS || observeAndResizeJS;
+
+		// Add any event listeners that were passed in.
+		Object.keys( onWindowEvents ).forEach( ( eventType ) => {
+			injectedJS += `
+				window.addEventListener( '${ eventType }', function( event ) {
+					window.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );
+				});`;
+		} );
+
+		return injectedJS;
+	}, [ customJS, onWindowEvents ] );
+
 	function updateContentHtml( forceRerender = false ) {
 		const newContentHtml = getHtmlDoc();
 
@@ -261,25 +272,6 @@ function Sandbox( {
 		}
 	}
 
-	function checkMessageForResize( event ) {
-		// Attempt to parse the message data as JSON if passed as string.
-		let data = event.nativeEvent.data || {};
-
-		if ( 'string' === typeof data ) {
-			try {
-				data = JSON.parse( data );
-			} catch ( e ) {}
-		}
-
-		// Update the state only if the message is formatted as we expect,
-		// i.e. as an object with a 'resize' action.
-		if ( 'resize' !== data.action ) {
-			return;
-		}
-
-		setHeight( data.height );
-	}
-
 	function getSizeStyle() {
 		const contentHeight = Math.ceil( height );
 
@@ -290,6 +282,39 @@ function Sandbox( {
 		setIsLandscape( dimensions.window.width >= dimensions.window.height );
 	}
 
+	const onMessage = useCallback(
+		( message ) => {
+			let data = message?.nativeEvent?.data;
+
+			try {
+				data = JSON.parse( data );
+			} catch ( e ) {
+				return;
+			}
+
+			// check for resize event
+			if ( 'resize' === data?.action ) {
+				setHeight( data.height );
+			}
+
+			// Forward the event to parent event listeners
+			Object.keys( onWindowEvents ).forEach( ( eventType ) => {
+				if ( data?.type === eventType ) {
+					try {
+						onWindowEvents[ eventType ]( data );
+					} catch ( e ) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							`Error handling event ${ eventType }`,
+							e
+						);
+					}
+				}
+			} );
+		},
+		[ onWindowEvents ]
+	);
+
 	useEffect( () => {
 		const dimensionsChangeSubscription = Dimensions.addEventListener(
 			'change',
@@ -322,6 +347,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
+			injectedJavaScript={ getInjectedJavaScript() }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }
@@ -333,14 +359,15 @@ function Sandbox( {
 				getSizeStyle(),
 				Platform.isAndroid && workaroundStyles.webView,
 			] }
-			onMessage={ checkMessageForResize }
+			onMessage={ onMessage }
 			scrollEnabled={ false }
 			setBuiltInZoomControls={ false }
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
+			mediaPlaybackRequiresUserAction={ false }
 		/>
 	);
-}
+} );
 
 const workaroundStyles = StyleSheet.create( {
 	webView: {

package/src/slot-fill/test/slot.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -92,9 +93,9 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'calls the functions passed as the Slot’s fillProps in the Fill', () => {
+	it( 'calls the functions passed as the Slot’s fillProps in the Fill', async () => {
 		const onClose = jest.fn();
-
+		const user = userEvent.setup();
 		render(
 			<Provider>
 				<Slot name="chicken" fillProps={ { onClose } } />
@@ -108,7 +109,7 @@ describe( 'Slot', () => {
 			</Provider>
 		);
 
-		fireEvent.click( screen.getByText( 'Click me' ) );
+		await user.click( screen.getByText( 'Click me' ) );
 
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -149,7 +150,8 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render Slot when not bubbling virtually', () => {
+	it( 'should re-render Slot when not bubbling virtually', async () => {
+		const user = userEvent.setup();
 		const { container } = render(
 			<Provider>
 				<div>
@@ -161,7 +163,7 @@ describe( 'Slot', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		fireEvent.click( screen.getByRole( 'button' ) );
+		await user.click( screen.getByRole( 'button' ) );
 
 		expect( container ).toMatchSnapshot();
 	} );

package/src/style.scss

@@ -11,7 +11,6 @@
 @import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
-@import "./color-list-picker/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
@@ -21,6 +20,7 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
+@import "./duotone-picker/color-list-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

package/src/tab-panel/index.tsx

@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -104,7 +109,7 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	// Handle selecting the initial tab.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		// If there's a selected tab, don't override it.
 		if ( selectedTab ) {
 			return;