npm - @wordpress/components - Versions diffs - 23.7.0 → 23.8.0 - Mend

@wordpress/components 23.7.0 → 23.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/src/query-controls/index.tsx CHANGED Viewed

@@ -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/sandbox/index.native.js CHANGED Viewed

@@ -14,6 +14,8 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	forwardRef,
+	useCallback,
 } from '@wordpress/element';
 import { usePreferredColorScheme } from '@wordpress/compose';
@@ -98,7 +100,6 @@ const observeAndResizeJS = `
 		// 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 );
-		widow.addEventListener( 'click', sendResize, true );
 	})();
 `;
@@ -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() );
@@ -239,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();
@@ -253,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 );
@@ -282,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',
@@ -314,7 +347,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
-			injectedJavaScript={ customJS || observeAndResizeJS }
+			injectedJavaScript={ getInjectedJavaScript() }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }
@@ -326,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/tsconfig.json CHANGED Viewed

@@ -43,7 +43,6 @@
 		"src/**/*.native.js",
 		"src/**/react-native-*",
 		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
-		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
-		"src/index.js"
+		"src/**/test/**/*.js" // only exclude js files, ts{x} files should be checked
 	]
 }