npm - @wordpress/components - Versions diffs - 36.1.0 → 37.0.0 - Mend

@wordpress/components 36.1.0 → 37.0.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 (1026) hide show

package/src/range-control/styles/range-control-styles.ts CHANGED Viewed

@@ -18,7 +18,6 @@ import type {
 	TooltipProps,
 	TrackProps,
 	WrapperProps,
-	RangeControlProps,
 } from '../types';
 const rangeHeightValue = 30;
@@ -27,13 +26,7 @@ const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
 const thumbSize = 12;
-const deprecatedHeight = ( {
-	__next40pxDefaultSize,
-}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>
-	! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );
-type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;
-export const Root = styled.div< RootProps >`
+export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
 	align-items: center;
 	display: flex;
@@ -43,8 +36,6 @@ export const Root = styled.div< RootProps >`
 	touch-action: none;
 	width: 100%;
 	min-height: 40px;
-	/* TODO: remove after removing the __next40pxDefaultSize prop */
-	${ deprecatedHeight };
 `;
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>

package/src/range-control/test/index.tsx CHANGED Viewed

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { act, fireEvent, render, screen } from '@testing-library/react';
-/**
- * Internal dependencies
- */
-import _RangeControl from '../';
+import RangeControl from '../';
 const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
 const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
@@ -15,12 +8,6 @@ const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
 const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 	fireEvent.change( input, { target: { value } } );
-const RangeControl = (
-	props: React.ComponentProps< typeof _RangeControl >
-) => {
-	return <_RangeControl { ...props } __next40pxDefaultSize />;
-};
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
 		it( 'should trigger change callback with numeric value', () => {

package/src/range-control/types.ts CHANGED Viewed

@@ -202,7 +202,8 @@ export type RangeControlProps = Pick<
 		/**
 		 * Start opting into the larger default height that will become the default size in a future version.
 		 *
-		 * @default false
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 * @ignore
 		 */
 		__next40pxDefaultSize?: boolean;
 		/**
@@ -233,6 +234,7 @@ export type RangeControlProps = Pick<
 		 * 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;

package/src/resizable-box/index.tsx CHANGED Viewed

@@ -132,6 +132,10 @@ function UnforwardedResizableBox(
 	);
 }
+/**
+ * `ResizableBox` wraps content in a container with draggable handles, letting
+ * users interactively resize it along one or more edges or corners.
+ */
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
 ResizableBox.displayName = 'ResizableBox';

package/src/sandbox/index.tsx CHANGED Viewed

@@ -37,11 +37,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 +60,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 +169,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 +220,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 } />
 				) ) }
@@ -209,7 +268,18 @@ function IsolatedSandBox( {
 	const [ height, setHeight ] = useState( 0 );
 	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 ]
 	);
@@ -345,48 +415,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();
 	}

package/src/sandbox/test/index.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SandBox, { VIEWPORT_UNIT_VALUE_REGEX } from '..';
+import SandBox, { VIEWPORT_UNIT_VALUE_REGEX, buildSandBoxDocument } from '..';
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
@@ -91,6 +91,47 @@ describe( 'SandBox', () => {
 		);
 	} );
+	it( 'places the resize script in the head, before the user content', () => {
+		// The resize script must parse before the (possibly malformed) user
+		// content in the body. Otherwise an unclosed attribute quote in that
+		// content swallows the <script> tag and its source leaks into the
+		// preview as visible text.
+		render( <SandBox html="<p>User content</p>" title="Head Script" /> );
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Head Script' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+		const resizeScriptIndex = srcDoc.indexOf( 'MutationObserver' );
+		const bodyIndex = srcDoc.indexOf( '<body' );
+		const userContentIndex = srcDoc.indexOf( '<p>User content</p>' );
+		expect( resizeScriptIndex ).toBeGreaterThan( -1 );
+		expect( resizeScriptIndex ).toBeLessThan( bodyIndex );
+		expect( resizeScriptIndex ).toBeLessThan( userContentIndex );
+	} );
+	it( 'builds a document with the resize script in the head, before the body', () => {
+		// Both sandboxes render this document: the isolated one as `srcdoc`,
+		// the same-origin one via `contentDocument.write()`. Testing the shared
+		// builder covers the write path too, so a future change cannot move the
+		// resize helper back into the body on either path.
+		const doc = buildSandBoxDocument( {
+			html: '<p>User content</p>',
+			title: 'Doc',
+			styles: [],
+			scripts: [],
+			lang: 'en',
+		} );
+		const resizeScriptIndex = doc.indexOf( 'MutationObserver' );
+		const bodyIndex = doc.indexOf( '<body' );
+		const userContentIndex = doc.indexOf( '<p>User content</p>' );
+		expect( resizeScriptIndex ).toBeGreaterThan( -1 );
+		expect( resizeScriptIndex ).toBeLessThan( bodyIndex );
+		expect( resizeScriptIndex ).toBeLessThan( userContentIndex );
+	} );
 	it( 'should update srcdoc when html prop changes', () => {
 		render( <TestWrapper /> );

package/src/scrollable/test/__snapshots__/index.tsx.snap CHANGED Viewed

@@ -3,26 +3,24 @@
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 @media only screen and ( min-device-width: 40em ) {
-  .emotion-0::-webkit-scrollbar {
+  .emotion-1::-webkit-scrollbar {
     height: 12px;
     width: 12px;
   }
-  .emotion-0::-webkit-scrollbar-track {
+  .emotion-1::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  .emotion-0::-webkit-scrollbar-track {
+  .emotion-1::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.04);
     border-radius: 8px;
   }
-  .emotion-0::-webkit-scrollbar-thumb {
+  .emotion-1::-webkit-scrollbar-thumb {
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
     background-color: rgba(0, 0, 0, 0.2);
@@ -30,13 +28,18 @@ exports[`props should render correctly 1`] = `
     border-radius: 7px;
   }
-  .emotion-0:hover::-webkit-scrollbar-thumb {
+  .emotion-1:hover::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.5);
   }
 }
+.emotion-2 {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
 <div
-  class="components-scrollable emotion-0 emotion-1"
+  class="emotion-0 emotion-1 emotion-2 components-scrollable"
   data-testid="scrollable"
   data-wp-c16t="true"
   data-wp-component="Scrollable"
@@ -50,12 +53,14 @@ Snapshot Diff:
 - Received styles
 + Base styles
-  Array [
+@@ -4,9 +4,6 @@
+    },
     Object {
-      "height": "100%",
       "overflow-x": "hidden",
       "overflow-y": "auto",
--     "scroll-behavior": "smooth",
     },
+-   Object {
+-     "scroll-behavior": "smooth",
+-   },
   ]
 `;

package/src/search-control/index.tsx CHANGED Viewed

@@ -58,7 +58,9 @@ function SuffixItem( {
 function UnforwardedSearchControl(
 	{
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
+		// Prevent passing legacy props to internal component.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		className,
 		onChange,
 		value,
@@ -87,7 +89,6 @@ function UnforwardedSearchControl(
 	return (
 		<StyledInputControl
-			__next40pxDefaultSize
 			id={ instanceId }
 			hideLabelFromVision={ hideLabelFromVision }
 			label={ label }

package/src/select-control/README.md CHANGED Viewed

@@ -92,7 +92,6 @@ const MySelectControl = () => {
 				{ label: 'Small', value: '25%' },
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
-			__next40pxDefaultSize
 		/>
 	);
 };
@@ -114,7 +113,6 @@ Render a user interface to select multiple users from a list.
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
 	] }
-	__next40pxDefaultSize
 />
 ```
@@ -129,7 +127,6 @@ const [ item, setItem ] = useState( '' );
     label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
-    __next40pxDefaultSize
 >
 	<optgroup label="Theropods">
 		<option value="Tyrannosaurus">Tyrannosaurus</option>
@@ -229,14 +226,6 @@ The style variant of the control.
 -   Required: No
 -   Default: `'default'`
-### __next40pxDefaultSize
-Start opting into the larger default height that will become the default size in a future version.
--   Type: `Boolean`
--   Required: No
--   Default: `false`
 ## Related components
 -   To select one option from a set, and you want to show them all the available options at once, use the `Radio` component.

package/src/select-control/index.tsx CHANGED Viewed

@@ -17,8 +17,6 @@ import { Select, StyledInputBase } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
@@ -48,6 +46,11 @@ function UnforwardedSelectControl< V extends string >(
 	ref: React.ForwardedRef< HTMLSelectElement >
 ) {
 	const {
+		// Prevent passing legacy props to internal components.
+		__nextHasNoMarginBottom: _,
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__next36pxDefaultSize: _next36pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		className,
 		disabled = false,
 		help,
@@ -64,11 +67,8 @@ function UnforwardedSelectControl< V extends string >(
 		prefix,
 		suffix,
 		variant = 'default',
-		__next40pxDefaultSize = false,
-		__nextHasNoMarginBottom: _, // Prevent passing to internal component
-		__shouldNotWarnDeprecated36pxSize,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp( props );
+	} = props;
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
@@ -95,13 +95,6 @@ function UnforwardedSelectControl< V extends string >(
 	const classes = clsx( 'components-select-control', className );
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'SelectControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
 	return (
 		<BaseControl help={ help } id={ id } className={ classes }>
 			<StyledInputBase
@@ -120,11 +113,9 @@ function UnforwardedSelectControl< V extends string >(
 					variant === 'minimal' ? 'auto' : undefined
 				}
 				variant={ variant }
-				__next40pxDefaultSize={ __next40pxDefaultSize }
 			>
 				<Select
 					{ ...restProps }
-					__next40pxDefaultSize={ __next40pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }
@@ -156,7 +147,6 @@ function UnforwardedSelectControl< V extends string >(
  *
  *   return (
  *     <SelectControl
- *       __next40pxDefaultSize
  *       label="Size"
  *       value={ size }
  *       options={ [