@wordpress/components 37.0.1-next.v.202607070741.0 → 39.0.0

package/src/range-control/types.ts

@@ -1,18 +1,12 @@
-/**
- * External dependencies
- */
 import type {
 	CSSProperties,
 	FocusEventHandler,
 	MouseEventHandler,
 	RefObject,
 } from 'react';
-
-/**
- * Internal dependencies
- */
 import type { BaseControlProps } from '../base-control/types';
 import type { IconType } from '../icon';
+import type { NumberControlProps } from '../number-control/types';
 
 export type NumericProps = {
 	/**
@@ -78,6 +72,7 @@ export type RangeControlProps = Pick<
 	BaseControlProps,
 	'__nextHasNoMarginBottom' | 'hideLabelFromVision' | 'help'
 > &
+	Pick< NumberControlProps, '__next40pxDefaultSize' > &
 	MarksProps & {
 		/**
 		 * If this property is added, an Icon component will be rendered
@@ -199,13 +194,6 @@ export type RangeControlProps = Pick<
 		 * @default 10
 		 */
 		shiftStep?: number;
-		/**
-		 * Start opting into the larger default height that will become the default size in a future version.
-		 *
-		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-		 * @ignore
-		 */
-		__next40pxDefaultSize?: boolean;
 		/**
 		 * Forcing the Tooltip UI to show or hide. This is overridden to `false`
 		 * when `step` is set to the special string value `any`.
@@ -230,14 +218,6 @@ export type RangeControlProps = Pick<
 		 * @default true
 		 */
 		withInputField?: boolean;
-		/**
-		 * Do not throw a warning for the deprecated 36px default size.
-		 * For internal components of other components that already throw the warning.
-		 *
-		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-		 * @ignore
-		 */
-		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
 
 export type RailProps = MarksProps & {

package/src/range-control/utils.ts

@@ -1,14 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { useControlledState } from '../utils/hooks';
 import { clamp } from '../utils/math';
-
 import type { UseControlledRangeValueArgs } from './types';
 
 /**

package/src/resizable-box/index.tsx

@@ -1,19 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
 import type { ForwardedRef } from 'react';
-
-/**
- * Internal dependencies
- */
 import ResizeTooltip from './resize-tooltip';
 
 const HANDLE_CLASS_NAME = 'components-resizable-box__handle';

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import type { Ref, ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import Label from './label';
 import type { Axis, Position } from './utils';
 import { useResizeLabel, POSITIONS } from './utils';

package/src/resizable-box/resize-tooltip/label.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import type { Position } from './utils';
 import { POSITIONS } from './utils';
 import {

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
 import { Text } from '../../../text';
 import { font, COLORS, CONFIG } from '../../../utils';
 

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 

package/src/resizable-box/stories/index.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import ResizableBox from '..';
 
 const meta: Meta< typeof ResizableBox > = {

package/src/responsive-wrapper/index.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { cloneElement, Children } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { ResponsiveWrapperProps } from './types';
 
 /**

package/src/responsive-wrapper/stories/index.story.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import ResponsiveWrapper from '..';
 
 const meta: Meta< typeof ResponsiveWrapper > = {

package/src/sandbox/index.tsx

@@ -1,6 +1,4 @@
-/**
- * WordPress dependencies
- */
+import clsx from 'clsx';
 import {
 	renderToString,
 	useRef,
@@ -9,10 +7,6 @@ import {
 	useMemo,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import type { SandBoxProps } from './types';
 
 type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
@@ -37,11 +31,17 @@ export const VIEWPORT_UNIT_VALUE_REGEX =
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
+	if ( ! MutationObserver || ! window.parent ) {
 		return;
 	}
 
 	function sendResize() {
+		// This runs in the document <head>, and as a `load`/`resize` listener,
+		// so the body may not exist yet. Bail rather than throw on a null body.
+		if ( ! document.body ) {
+			return;
+		}
+
 		const clientBoundingRect = document.body.getBoundingClientRect();
 
 		window.parent.postMessage(
@@ -54,60 +54,88 @@ const observeAndResizeJS = function () {
 		);
 	}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+	// Runs the body-dependent setup once the document body is available. Reads
+	// `document.body` into a local so the null check narrows it for the rest of
+	// the function: this runs in <head> and via DOMContentLoaded, so the body
+	// isn't guaranteed to exist yet.
+	function connect() {
+		const { body } = document;
+		if ( ! body ) {
+			return;
+		}
 
-	window.addEventListener( 'load', sendResize, true );
+		const observer = new MutationObserver( sendResize );
+		observer.observe( body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: 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: ElementCSSInlineStyle ) {
+			if ( ruleOrNode.style ) {
+				(
+					[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
+				 ).forEach( function ( style ) {
+					if (
+						/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
+							ruleOrNode.style[ style ]
+						)
+					) {
+						ruleOrNode.style[ style ] = '';
+					}
+				} );
+			}
+		}
 
-	// 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: ElementCSSInlineStyle ) {
-		if ( ruleOrNode.style ) {
-			(
-				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
-			 ).forEach( function ( style ) {
-				if (
-					/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
-						ruleOrNode.style[ style ]
-					)
-				) {
-					ruleOrNode.style[ style ] = '';
+		Array.prototype.forEach.call(
+			document.querySelectorAll( '[style]' ),
+			removeViewportStyles
+		);
+		Array.prototype.forEach.call(
+			document.styleSheets,
+			function ( stylesheet ) {
+				let rules;
+				try {
+					rules = stylesheet.cssRules || stylesheet.rules;
+				} catch {
+					// Reading `cssRules` throws a SecurityError for a
+					// cross-origin stylesheet (e.g. a remote <link> in the
+					// user's HTML). Skip those rather than aborting the setup.
+					return;
 				}
-			} );
-		}
-	}
+				Array.prototype.forEach.call( 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
-			);
-		}
-	);
+		body.style.position = 'absolute';
+		body.style.width = '100%';
+		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();
+	window.addEventListener( 'load', 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 );
+
+	// This script is injected into the document <head> so it parses before the
+	// (possibly malformed) user content in <body>: an unclosed attribute quote
+	// in that content can't then swallow this <script> tag and dump its source
+	// into the preview as visible text. Because <head> runs before <body>
+	// exists, defer the body-dependent setup until the DOM is ready.
+	if ( document.body ) {
+		connect();
+	} else {
+		document.addEventListener( 'DOMContentLoaded', connect );
+	}
 };
 
 // TODO: These styles shouldn't be coupled with WordPress.
@@ -135,23 +163,48 @@ const style = `
 `;
 
 /**
- * Builds the full HTML document string for the sandbox iframe content.
+ * Builds the full HTML document string for the sandbox iframe content. Shared
+ * by both the isolated (`srcdoc`) and same-origin (`contentDocument.write`)
+ * sandboxes so the two paths always emit the same markup — notably keeping the
+ * resize script in `<head>`, ahead of the user content, on both. A single
+ * builder means the write path cannot drift back to putting the script in
+ * `<body>` while the `srcdoc` path keeps it in `<head>`.
+ *
+ * `lang` is passed in rather than read here because the two callers source it
+ * from different documents: the isolated sandbox uses the module's `document`,
+ * while the same-origin sandbox uses the iframe's `ownerDocument`. They are
+ * normally the same document, but keeping the argument preserves each path's
+ * exact prior behavior.
+ *
+ * Exported for tests.
+ *
+ * @param props
+ * @param props.html    User-supplied HTML for the iframe body.
+ * @param props.title   Document title.
+ * @param props.type    Optional class name for the `<html>`/`<body>` elements.
+ * @param props.styles  CSS rule strings, injected as `<style>` tags in the head.
+ * @param props.scripts External script URLs, injected as `<script src>` in the
+ *                      body (embeds expect their scripts there).
+ * @param props.lang    Language for the `<html lang>` attribute.
+ * @return The full `<!DOCTYPE html>…` document string.
  */
-function buildSandBoxDocument( {
+export function buildSandBoxDocument( {
 	html,
 	title,
 	type,
 	styles,
 	scripts,
+	lang,
 }: {
 	html: string;
 	title: string;
 	type?: string;
 	styles: string[];
 	scripts: string[];
+	lang: string;
 } ): string {
 	const htmlDoc = (
-		<html lang={ document.documentElement.lang } className={ type }>
+		<html lang={ lang } className={ type }>
 			<head>
 				<title>{ title }</title>
 				<style dangerouslySetInnerHTML={ { __html: style } } />
@@ -161,18 +214,18 @@ function buildSandBoxDocument( {
 						dangerouslySetInnerHTML={ { __html: rules } }
 					/>
 				) ) }
-			</head>
-			<body
-				data-resizable-iframe-connected="data-resizable-iframe-connected"
-				className={ type }
-			>
-				<div dangerouslySetInnerHTML={ { __html: html } } />
 				<script
 					type="text/javascript"
 					dangerouslySetInnerHTML={ {
 						__html: `(${ observeAndResizeJS.toString() })();`,
 					} }
 				/>
+			</head>
+			<body
+				data-resizable-iframe-connected="data-resizable-iframe-connected"
+				className={ type }
+			>
+				<div dangerouslySetInnerHTML={ { __html: html } } />
 				{ scripts.map( ( src ) => (
 					<script key={ src } src={ src } />
 				) ) }
@@ -203,13 +256,31 @@ function IsolatedSandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
+	allowPopups = false,
+	allowForms = false,
 }: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
+	const sandbox = clsx( 'allow-scripts', 'allow-presentation', {
+		'allow-popups': allowPopups,
+		'allow-forms': allowForms,
+	} );
+
 	const srcDoc = useMemo(
-		() => buildSandBoxDocument( { html, title, type, styles, scripts } ),
+		() =>
+			buildSandBoxDocument( {
+				html,
+				title,
+				type,
+				styles,
+				scripts,
+				// Read inside the memo: the `no-dom-globals-in-react-fc` lint
+				// rule forbids DOM globals in the render body. `lang` rarely
+				// changes after load, so leaving it out of the deps is fine.
+				lang: document.documentElement.lang,
+			} ),
 		[ html, title, type, styles, scripts ]
 	);
 
@@ -281,7 +352,7 @@ function IsolatedSandBox( {
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox="allow-scripts allow-presentation"
+			sandbox={ sandbox }
 			srcDoc={ srcDoc }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
@@ -312,11 +383,23 @@ function SameOriginSandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
+	allowPopups = false,
+	allowForms = false,
 }: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
+	const sandbox = clsx(
+		'allow-scripts',
+		'allow-same-origin',
+		'allow-presentation',
+		{
+			'allow-popups': allowPopups,
+			'allow-forms': allowForms,
+		}
+	);
+
 	function isFrameAccessible() {
 		try {
 			return !! ref.current?.contentDocument?.body;
@@ -345,48 +428,25 @@ function SameOriginSandBox( {
 			return;
 		}
 
-		// Put the html snippet into a html document, and then write it to the iframe's document
-		// we can use this in the future to inject custom styles or scripts.
-		// Scripts go into the body rather than the head, to support embedded content such as Instagram
-		// that expect the scripts to be part of the body.
-		const htmlDoc = (
-			<html
-				lang={ ownerDocument.documentElement.lang }
-				className={ type }
-			>
-				<head>
-					<title>{ title }</title>
-					<style dangerouslySetInnerHTML={ { __html: style } } />
-					{ styles.map( ( rules, i ) => (
-						<style
-							key={ i }
-							dangerouslySetInnerHTML={ { __html: rules } }
-						/>
-					) ) }
-				</head>
-				<body
-					data-resizable-iframe-connected="data-resizable-iframe-connected"
-					className={ type }
-				>
-					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html: `(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
-					{ scripts.map( ( src ) => (
-						<script key={ src } src={ src } />
-					) ) }
-				</body>
-			</html>
-		);
-
-		// Writing the document like this makes it act in the same way as if it was
-		// loaded over the network, so DOM creation and mutation, script execution, etc.
-		// all work as expected.
+		// Put the html snippet into a html document, and then write it to the
+		// iframe's document. The external `scripts` still go into the body to
+		// support embedded content such as Instagram that expects them there;
+		// only the resize helper lives in the head.
+		//
+		// Writing the document like this makes it act in the same way as if it
+		// was loaded over the network, so DOM creation and mutation, script
+		// execution, etc. all work as expected.
 		contentDocument.open();
-		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
+		contentDocument.write(
+			buildSandBoxDocument( {
+				html,
+				title,
+				type,
+				styles,
+				scripts,
+				lang: ownerDocument.documentElement.lang,
+			} )
+		);
 		contentDocument.close();
 	}
 
@@ -463,7 +523,7 @@ function SameOriginSandBox( {
 			title={ title }
 			tabIndex={ tabIndex }
 			className="components-sandbox"
-			sandbox="allow-scripts allow-same-origin allow-presentation"
+			sandbox={ sandbox }
 			onFocus={ onFocus }
 			width={ Math.ceil( width ) }
 			height={ Math.ceil( height ) }

package/src/sandbox/stories/index.story.tsx

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * Internal dependencies
- */
 import SandBox from '..';
 
 const meta: Meta< typeof SandBox > = {
@@ -36,4 +29,11 @@ const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 export const Default = Template.bind( {} );
 Default.args = {
 	html: '<p>Arbitrary HTML content</p>',
+	allowForms: false,
+};
+
+export const WithForm = Template.bind( {} );
+WithForm.args = {
+	html: '<form action="#"><label for="name">Name</label><input id="name" type="text" /><button type="submit">Submit</button></form>',
+	allowForms: true,
 };