npm - @wordpress/components - Versions diffs - 32.5.2-next.v.202604091042.0 → 33.0.0 - Mend

@wordpress/components 32.5.2-next.v.202604091042.0 → 33.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 (375) hide show

package/src/sandbox/index.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
@@ -14,6 +15,8 @@ import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
  */
 import type { SandBoxProps } from './types';
+type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
@@ -115,17 +118,176 @@ const style = `
 `;
 /**
- * This component provides an isolated environment for arbitrary HTML via iframes.
+ * Builds the full HTML document string for the sandbox iframe content.
+ */
+function buildSandBoxDocument( {
+	html,
+	title,
+	type,
+	styles,
+	scripts,
+}: {
+	html: string;
+	title: string;
+	type?: string;
+	styles: string[];
+	scripts: string[];
+} ): string {
+	const htmlDoc = (
+		<html lang={ document.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>
+	);
+	return '<!DOCTYPE html>' + renderToString( htmlDoc );
+}
+/**
+ * Isolated sandbox that uses the `srcdoc` attribute to render content
+ * without `allow-same-origin`. This is the default for user-controlled
+ * content (e.g., the HTML block) where same-origin access would be a
+ * security risk.
  *
- * ```jsx
- * import { SandBox } from '@wordpress/components';
+ * Because `srcdoc` is a declarative attribute, the browser automatically
+ * re-renders the content when the iframe is moved in the DOM (e.g.,
+ * block reordering), so no `load` event listener is needed.
+ * The `message` listener is re-synced on every `load` so
+ * it follows the iframe if it's reparented into a different document.
+ */
+function IsolatedSandBox( {
+	html = '',
+	title = '',
+	type,
+	styles = [],
+	scripts = [],
+	onFocus,
+	tabIndex,
+}: SandBoxContentProps ) {
+	const ref = useRef< HTMLIFrameElement >( null );
+	const [ width, setWidth ] = useState( 0 );
+	const [ height, setHeight ] = useState( 0 );
+	const srcDoc = useMemo(
+		() => buildSandBoxDocument( { html, title, type, styles, scripts } ),
+		[ html, title, type, styles, scripts ]
+	);
+	useEffect( () => {
+		const iframe = ref.current;
+		if ( ! iframe ) {
+			return;
+		}
+		function checkMessageForResize( event: MessageEvent ) {
+			// Verify that the mounted element is the source of the message.
+			// iframe.contentWindow is accessible cross-origin as a
+			// WindowProxy reference, so this check still works without
+			// allow-same-origin.
+			if ( ! iframe || iframe.contentWindow !== event.source ) {
+				return;
+			}
+			// Attempt to parse the message data as JSON if passed as string.
+			let data = event.data || {};
+			if ( 'string' === typeof data ) {
+				try {
+					data = JSON.parse( data );
+				} catch {}
+			}
+			// 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;
+			}
+			setWidth( data.width );
+			setHeight( data.height );
+		}
+		let currentView: Window | null = null;
+		function syncListener() {
+			const view = iframe?.ownerDocument?.defaultView ?? null;
+			if ( view === currentView ) {
+				return;
+			}
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+			currentView = view;
+			currentView?.addEventListener( 'message', checkMessageForResize );
+		}
+		syncListener();
+		iframe.addEventListener( 'load', syncListener );
+		return () => {
+			iframe.removeEventListener( 'load', syncListener );
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+		};
+	}, [] );
+	return (
+		<iframe
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+			title={ title }
+			tabIndex={ tabIndex }
+			className="components-sandbox"
+			sandbox="allow-scripts allow-presentation"
+			srcDoc={ srcDoc }
+			onFocus={ onFocus }
+			width={ Math.ceil( width ) }
+			height={ Math.ceil( height ) }
+		/>
+	);
+}
+/**
+ * Same-origin sandbox that writes to `contentDocument` directly. This
+ * preserves the parent page's URL as the iframe's document URL, which
+ * provides a valid Referer header for nested iframes (required by
+ * providers like YouTube).
  *
- * const MySandBox = () => (
- * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
- * );
- * ```
+ * Only used when `allowSameOrigin` is true — i.e., for server-fetched
+ * oEmbed previews that are not directly user-controlled.
+ *
+ * This implementation is intentionally kept close to the original
+ * pre-refactor code to preserve past bugfixes:
+ * - load listener for iframe re-initialization after DOM moves (#21916)
+ * - forceRerender guard to avoid unnecessary full rewrites (#20176)
  */
-function SandBox( {
+function SameOriginSandBox( {
 	html = '',
 	title = '',
 	type,
@@ -133,7 +295,7 @@ function SandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
-}: SandBoxProps ) {
+}: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
@@ -292,4 +454,22 @@ function SandBox( {
 	);
 }
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( { allowSameOrigin = false, ...contentProps }: SandBoxProps ) {
+	if ( allowSameOrigin ) {
+		return <SameOriginSandBox { ...contentProps } />;
+	}
+	return <IsolatedSandBox { ...contentProps } />;
+}
 export default SandBox;

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

@@ -10,6 +10,7 @@ import { fn } from 'storybook/test';
 import SandBox from '..';
 const meta: Meta< typeof SandBox > = {
+	tags: [ 'manifest' ],
 	component: SandBox,
 	title: 'Components/Utilities/SandBox',
 	id: 'components-sandbox',

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
@@ -16,10 +16,7 @@ import SandBox from '..';
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
-			// MutationObserver implementation from JSDom does not work as intended
-			// with iframes so we need to ignore it for the time being.
-			'<script type="text/javascript">window.MutationObserver = null;</script>' +
-				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
+			'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
 		);
 		const updateHtml = () => {
@@ -38,34 +35,78 @@ describe( 'SandBox', () => {
 		);
 	};
-	it( 'should rerender with new emdeded content if html prop changes', () => {
+	it( 'should not include allow-same-origin by default', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test" /> );
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test' );
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation'
+		);
+		expect( iframe.getAttribute( 'sandbox' ) ).not.toContain(
+			'allow-same-origin'
+		);
+	} );
+	it( 'should set srcdoc with the provided html content', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test Title' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+		expect( srcDoc ).toContain( '<p>Hello</p>' );
+		expect( srcDoc ).toContain( '<title>Test Title</title>' );
+	} );
+	it( 'should include custom styles in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Styled</p>"
+				title="Styled Test"
+				styles={ [ '.custom { color: red; }' ] }
+			/>
+		);
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Styled Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+		expect( srcDoc ).toContain( '.custom { color: red; }' );
+	} );
+	it( 'should include script tags in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Script</p>"
+				title="Script Test"
+				scripts={ [ 'https://example.com/embed.js' ] }
+			/>
+		);
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Script Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+		expect( srcDoc ).toContain(
+			'<script src="https://example.com/embed.js">'
+		);
+	} );
+	it( 'should update srcdoc when html prop changes', () => {
 		render( <TestWrapper /> );
 		const iframe =
 			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
-		if ( ! iframe.contentWindow ) {
-			throw new Error();
-		}
-		let sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://super.embed' )
 		);
 		fireEvent.click( screen.getByRole( 'button' ) );
-		sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://another.super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://another.super.embed' )
 		);
 	} );
 } );

package/src/sandbox/types.ts CHANGED Viewed

@@ -1,4 +1,15 @@
 export type SandBoxProps = {
+	/**
+	 * Whether to include `allow-same-origin` in the iframe's sandbox
+	 * attribute. When true, nested iframes (such as third-party embeds)
+	 * can access their own origin's cookies and storage.
+	 *
+	 * Only enable this for content that is NOT directly user-controlled,
+	 * such as server-fetched oEmbed previews.
+	 *
+	 * @default false
+	 */
+	allowSameOrigin?: boolean;
 	/**
 	 * The HTML to render in the body of the iframe document.
 	 *

package/src/scroll-lock/stories/index.story.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ import Button from '../../button';
 import ScrollLock from '..';
 const meta: Meta< typeof ScrollLock > = {
+	tags: [ 'manifest' ],
 	component: ScrollLock,
 	title: 'Components/Utilities/ScrollLock',
 	id: 'components-scrolllock',

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import SearchControl from '..';
 const meta: Meta< typeof SearchControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/SearchControl',
 	id: 'components-searchcontrol',
 	component: SearchControl,

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

@@ -16,6 +16,7 @@ import SelectControl from '../';
 import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 const meta: Meta< typeof SelectControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/SelectControl',
 	id: 'components-selectcontrol',
 	component: SelectControl,

package/src/shortcut/stories/index.story.tsx CHANGED Viewed

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import Shortcut from '../';
 const meta: Meta< typeof Shortcut > = {
+	tags: [ 'manifest' ],
 	component: Shortcut,
 	title: 'Components/Utilities/Shortcut',
 	id: 'components-shortcut',

package/src/slot-fill/stories/index.story.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { createContext, useContext } from '@wordpress/element';
 import { Slot, Fill, Provider as SlotFillProvider } from '../';
 const meta: Meta< typeof Slot > = {
+	tags: [ 'manifest' ],
 	component: Slot,
 	title: 'Components/Utilities/SlotFill',
 	id: 'components-slotfill',

package/src/snackbar/stories/index.story.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ import Icon from '../../icon';
 import Snackbar from '..';
 const meta: Meta< typeof Snackbar > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Snackbar',
 	id: 'components-snackbar',
 	component: Snackbar,

package/src/snackbar/style.scss CHANGED Viewed

@@ -16,7 +16,7 @@
 	width: 100%;
 	max-width: var(--wpds-dimension-surface-width-lg);
 	box-sizing: border-box;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	// Re-enable pointer events, which are disabled by the
 	// .components-snackbar-list styles.
@@ -47,7 +47,7 @@
 	.components-snackbar__dismiss-button {
 		margin-left: $grid-unit-30;
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 	}
 }

package/src/spinner/stories/index.story.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import Spinner from '../';
 import { space } from '../../utils/space';
 const meta: Meta< typeof Spinner > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Spinner',
 	id: 'components-spinner',
 	component: Spinner,

package/src/tab-panel/style.scss CHANGED Viewed

@@ -18,7 +18,7 @@
 	background: transparent;
 	border: none;
 	box-shadow: none;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: $font-weight-regular;

package/src/text-control/stories/index.story.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import TextControl from '..';
 const meta: Meta< typeof TextControl > = {
+	tags: [ 'manifest' ],
 	component: TextControl,
 	title: 'Components/Selection & Input/Common/TextControl',
 	id: 'components-textcontrol',

package/src/text-highlight/stories/index.story.tsx CHANGED Viewed

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import TextHighlight from '..';
 const meta: Meta< typeof TextHighlight > = {
+	tags: [ 'manifest' ],
 	component: TextHighlight,
 	title: 'Components/Typography/TextHighlight',
 	id: 'components-texthighlight',

package/src/textarea-control/stories/index.story.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import TextareaControl from '..';
 const meta: Meta< typeof TextareaControl > = {
+	tags: [ 'manifest' ],
 	component: TextareaControl,
 	title: 'Components/Selection & Input/Common/TextareaControl',
 	id: 'components-textareacontrol',
@@ -21,6 +22,9 @@ const meta: Meta< typeof TextareaControl > = {
 		onChange: { action: 'onChange' },
 		label: { control: { type: 'text' } },
 		help: { control: { type: 'text' } },
+		disabled: {
+			control: { type: 'boolean' },
+		},
 		value: { control: false },
 	},
 	parameters: {

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

@@ -62,6 +62,12 @@ export const StyledTextarea = styled.textarea`
 		${ inputStyleFocus }
 	}
+	&:disabled {
+		background: ${ COLORS.ui.backgroundDisabled };
+		border-color: ${ COLORS.ui.borderDisabled };
+		color: ${ COLORS.ui.textDisabled };
+	}
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
 		color: ${ COLORS.ui.darkGrayPlaceholder };

package/src/toggle-control/stories/index.story.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import ToggleControl from '..';
 const meta: Meta< typeof ToggleControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/ToggleControl',
 	id: 'components-togglecontrol',
 	component: ToggleControl,

package/src/toggle-control/style.scss CHANGED Viewed

@@ -5,7 +5,7 @@
 	line-height: form-toggle.$toggle-height;
 	&:not(.is-disabled) {
-		cursor: pointer;
+		cursor: var(--wpds-cursor-control);
 	}
 }

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

@@ -22,10 +22,16 @@ describe( 'ToggleControl', () => {
 		render( <ToggleControl label="My toggle" onChange={ onChange } /> );
-		screen.getByRole( 'checkbox' ).click();
+		screen
+			.getByRole( 'checkbox' )
+			// eslint-disable-next-line testing-library/no-node-access
+			.click();
 		expect( onChange ).toHaveBeenLastCalledWith( true );
-		screen.getByRole( 'checkbox' ).click();
+		screen
+			.getByRole( 'checkbox' )
+			// eslint-disable-next-line testing-library/no-node-access
+			.click();
 		expect( onChange ).toHaveBeenLastCalledWith( false );
 	} );

package/src/toggle-group-control/stories/index.story.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ const meta: Meta< typeof ToggleGroupControl > = {
 		onChange: { action: 'onChange' },
 		value: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/toolbar/toolbar-group/index.tsx CHANGED Viewed

@@ -17,7 +17,7 @@ import ToolbarGroupCollapsed from './toolbar-group-collapsed';
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarGroupProps, ToolbarGroupControls } from './types';
-function isNestedArray< T = any >( arr: T[] | T[][] ): arr is T[][] {
+function isNestedArray< T >( arr: T | T[] ): arr is T[] {
 	return Array.isArray( arr ) && Array.isArray( arr[ 0 ] );
 }
@@ -78,7 +78,7 @@ function ToolbarGroup( {
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets: ToolbarGroupControls[][];
-	if ( isNestedArray( controls ) ) {
+	if ( isNestedArray< ToolbarGroupControls[] >( controls ) ) {
 		controlSets = controls;
 	} else {
 		controlSets = [ controls ];

package/src/tooltip/stories/index.story.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ import Tooltip from '..';
 import Button from '../../button';
 const meta: Meta< typeof Tooltip > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Tooltip',
 	id: 'components-tooltip',
 	component: Tooltip,

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

@@ -286,7 +286,7 @@ describe( 'Tooltip', () => {
 	describe( 'delay', () => {
 		it( 'should respect custom delay prop when showing tooltip', async () => {
-			const ADDITIONAL_DELAY = 100;
+			const ADDITIONAL_DELAY = 500;
 			render(
 				<Tooltip
@@ -304,7 +304,8 @@ describe( 'Tooltip', () => {
 			await hover( anchor );
 			expectTooltipToBeHidden();
-			// Advance time by default delay
+			// Advance time by default delay, which is still well before the
+			// custom delay even when CI is slow to resolve the hover event.
 			await sleep( TOOLTIP_DELAY );
 			// Tooltip hasn't appeared yet

package/src/tree-grid/stories/index.story.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ const meta: Meta< typeof TreeGrid > = {
 	argTypes: {
 		children: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onExpandRow: fn(),
 		onCollapseRow: fn(),

package/src/tree-select/stories/index.story.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import TreeSelect from '../';
 const meta: Meta< typeof TreeSelect > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/TreeSelect',
 	id: 'components-treeselect',
 	component: TreeSelect,

package/src/truncate/stories/index.story.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ const meta: Meta< typeof Truncate > = {
 		children: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: {
 			expanded: true,

package/src/unit-control/stories/index.story.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ const meta: Meta< typeof UnitControl > = {
 		prefix: { control: { type: 'text' } },
 		value: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onChange: fn(),
 		onUnitChange: fn(),

package/src/utils/breakpoint.js CHANGED Viewed

@@ -4,7 +4,7 @@
 import breakpoints from './breakpoint-values';
 /**
- * @param {keyof breakpoints} point
+ * @param {keyof typeof breakpoints} point
  * @return {string} Media query declaration.
  */
 export const breakpoint = ( point ) =>