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

package/src/sandbox/test/index.tsx

@@ -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 = () => {
@@ -49,6 +49,27 @@ describe( 'SandBox', () => {
 		);
 	} );
 
+	it( 'should not include allow-popups by default', () => {
+		render( <SandBox html="<p>Hello</p>" title="No Popups" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'No Popups' );
+
+		expect( iframe.getAttribute( 'sandbox' ) ).not.toContain(
+			'allow-popups'
+		);
+	} );
+
+	it( 'should include allow-popups when allowPopups is set', () => {
+		render( <SandBox html="<p>Hello</p>" title="Popups" allowPopups /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Popups' );
+
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation allow-popups'
+		);
+	} );
+
 	it( 'should set srcdoc with the provided html content', () => {
 		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
 
@@ -91,6 +112,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/sandbox/types.ts

@@ -10,6 +10,17 @@ export type SandBoxProps = {
 	 * @default false
 	 */
 	allowSameOrigin?: boolean;
+	/**
+	 * Whether to include `allow-popups` in the iframe's sandbox attribute.
+	 * When true, content inside the iframe is allowed to open new browsing
+	 * contexts (e.g. links that open in a new tab, or `window.open`).
+	 *
+	 * Enable this for previews whose content includes links that should be
+	 * followable, such as embeds.
+	 *
+	 * @default false
+	 */
+	allowPopups?: boolean;
 	/**
 	 * The HTML to render in the body of the iframe document.
 	 *

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {

package/src/search-control/index.tsx

@@ -17,22 +17,15 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Button from '../button';
+import InputControl from '../input-control';
+import Icon from '../icon';
 import { InputControlPrefixWrapper } from '../input-control/input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-control/input-suffix-wrapper';
 import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { SearchControlProps, SuffixItemProps } from './types';
-import { StyledInputControl, StyledIcon } from './styles';
-
-function SuffixItem( {
-	searchRef,
-	value,
-	onChange,
-	onClose,
-}: SuffixItemProps ) {
-	if ( ! onClose && ! value ) {
-		return null;
-	}
+import styles from './style.module.scss';
 
+function SuffixItem( { searchRef, onChange, onClose }: SuffixItemProps ) {
 	if ( onClose ) {
 		deprecated( '`onClose` prop in wp.components.SearchControl', {
 			since: '6.8',
@@ -86,33 +79,42 @@ function UnforwardedSearchControl(
 		SearchControl,
 		'components-search-control'
 	);
+	const hasSuffix = !! onClose || !! value;
 
 	return (
-		<StyledInputControl
-			__next40pxDefaultSize
+		<InputControl
 			id={ instanceId }
 			hideLabelFromVision={ hideLabelFromVision }
 			label={ label }
 			ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
 			type="search"
 			size={ size }
-			className={ clsx( 'components-search-control', className ) }
+			className={ clsx(
+				styles.input,
+				'components-search-control',
+				className
+			) }
 			onChange={ ( nextValue?: string ) => onChange( nextValue ?? '' ) }
 			autoComplete="off"
 			placeholder={ placeholder }
 			value={ value ?? '' }
 			prefix={
 				<InputControlPrefixWrapper variant="icon">
-					<StyledIcon icon={ search } fill="currentColor" />
+					<Icon
+						className={ styles.icon }
+						icon={ search }
+						fill="currentColor"
+					/>
 				</InputControlPrefixWrapper>
 			}
 			suffix={
-				<SuffixItem
-					searchRef={ searchRef }
-					value={ value }
-					onChange={ onChange }
-					onClose={ onClose }
-				/>
+				hasSuffix && (
+					<SuffixItem
+						searchRef={ searchRef }
+						onChange={ onChange }
+						onClose={ onClose }
+					/>
+				)
 			}
 			{ ...filteredRestProps }
 		/>

package/src/search-control/style.module.scss

@@ -0,0 +1,16 @@
+.input {
+	input[type="search"] {
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+}
+
+.icon {
+	&:dir(ltr) {
+		transform: scaleX(-1);
+	}
+}

package/src/search-control/test/index.tsx

@@ -59,16 +59,24 @@ describe( 'SearchControl', () => {
 			expect(
 				screen.queryByRole( 'button', { name: 'Reset search' } )
 			).not.toBeInTheDocument();
+			const paddingInlineEndWithoutSuffix =
+				getComputedStyle( searchInput ).paddingInlineEnd;
 
 			await type( 'test', searchInput );
 			const resetButton = screen.getByRole( 'button', {
 				name: 'Reset search',
 			} );
 			expect( resetButton ).toBeVisible();
+			expect( getComputedStyle( searchInput ).paddingInlineEnd ).not.toBe(
+				paddingInlineEndWithoutSuffix
+			);
 
 			await click( resetButton );
 			expect( searchInput ).toHaveValue( '' );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith( '' );
+			expect( getComputedStyle( searchInput ).paddingInlineEnd ).toBe(
+				paddingInlineEndWithoutSuffix
+			);
 		} );
 
 		it( 'should render a Close button (instead of Reset) when onClose function is provided', async () => {

package/src/search-control/types.ts

@@ -70,7 +70,7 @@ export type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & {
 
 export type SuffixItemProps = Pick<
 	SearchControlProps,
-	'value' | 'onChange' | 'onClose'
+	'onChange' | 'onClose'
 > & {
 	searchRef: React.RefObject< HTMLInputElement | null >;
 };

package/src/select-control/index.tsx

@@ -50,7 +50,6 @@ function UnforwardedSelectControl< V extends string >(
 		__nextHasNoMarginBottom: _,
 		__next40pxDefaultSize: _next40pxDefaultSize,
 		__next36pxDefaultSize: _next36pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		className,
 		disabled = false,
 		help,
@@ -113,7 +112,6 @@ function UnforwardedSelectControl< V extends string >(
 					variant === 'minimal' ? 'auto' : undefined
 				}
 				variant={ variant }
-				__next40pxDefaultSize
 			>
 				<Select
 					{ ...restProps }

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

@@ -36,7 +36,7 @@ const meta: Meta< typeof SelectControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`SelectControl`](?path=/docs/design-system-components-form-selectcontrol--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };

package/src/select-control/styles/select-control-styles.ts

@@ -76,12 +76,6 @@ const sizeStyles = ( { multiple, selectSize = 'default' }: SelectProps ) => {
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
-		'__unstable-large': {
-			height: 40,
-			minHeight: 40,
-			paddingTop: 0,
-			paddingBottom: 0,
-		},
 	};
 
 	const style = sizes[ selectSize ] || sizes.default;
@@ -96,7 +90,6 @@ const sizePaddings = ( { multiple, selectSize = 'default' }: SelectProps ) => {
 		default: CONFIG.controlPaddingX,
 		small: CONFIG.controlPaddingXSmall,
 		compact: CONFIG.controlPaddingXSmall,
-		'__unstable-large': CONFIG.controlPaddingX,
 	};
 
 	const selectedPadding = padding[ selectSize ] || padding.default;

package/src/select-control/test/__snapshots__/select-control.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`SelectControl Legacy size support treats __unstable-large the same as default 1`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;
+
+exports[`SelectControl Legacy size support treats __unstable-large the same as default 2`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;

package/src/select-control/test/select-control.tsx

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import SelectControl from '..';
+import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
@@ -225,4 +226,40 @@ describe( 'SelectControl', () => {
 		} );
 	} );
 	/* eslint-enable jest/expect-expect */
+
+	describe( 'Legacy size support', () => {
+		it( 'treats __unstable-large the same as default', () => {
+			const prefix = (
+				<InputControlPrefixWrapper>$</InputControlPrefixWrapper>
+			);
+			const options = [ { value: 'one', label: 'One' } ];
+
+			render(
+				<SelectControl
+					label="Test"
+					options={ options }
+					prefix={ prefix }
+				/>
+			);
+			render(
+				<SelectControl
+					label="Test"
+					options={ options }
+					prefix={ prefix }
+					// @ts-expect-error testing legacy runtime support for removed size type
+					size="__unstable-large"
+				/>
+			);
+
+			const [ defaultPrefixWrapper, legacyPrefixWrapper ] =
+				screen.getAllByText( '$' );
+			const [ defaultSelect, legacySelect ] =
+				screen.getAllByRole( 'combobox' );
+
+			expect( legacyPrefixWrapper ).toMatchStyleDiffSnapshot(
+				defaultPrefixWrapper
+			);
+			expect( legacySelect ).toMatchStyleDiffSnapshot( defaultSelect );
+		} );
+	} );
 } );

package/src/select-control/types.ts

@@ -11,8 +11,6 @@ import type { BaseControlProps } from '../base-control/types';
 
 type SelectControlBaseProps< V extends string > = Pick<
 	InputBaseProps,
-	| '__next36pxDefaultSize'
-	| '__shouldNotWarnDeprecated36pxSize'
 	| 'disabled'
 	| 'hideLabelFromVision'
 	| 'label'
@@ -22,6 +20,14 @@ type SelectControlBaseProps< V extends string > = Pick<
 	| 'suffix'
 > &
 	Pick< BaseControlProps, '__nextHasNoMarginBottom' | 'help' > & {
+		/**
+		 * Deprecated. Use `__next40pxDefaultSize` instead.
+		 *
+		 * @default false
+		 * @deprecated
+		 * @ignore
+		 */
+		__next36pxDefaultSize?: boolean;
 		/**
 		 * Start opting into the larger default height that will become the default size in a future version.
 		 *

package/src/shortcut/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Shortcut renders passed className 1`] = `
 <span

package/src/slot-fill/fill.tsx

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
@@ -9,9 +6,6 @@ import {
 	createPortal,
 } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
 import SlotFillContext from './context';
 import type { FillComponentProps } from './types';
 import StyleProvider from '../style-provider';
@@ -62,9 +56,9 @@ export default function Fill( { name, children }: FillComponentProps ) {
 			: children;
 
 	// When using a `Fill`, the `children` will be rendered in the document of the
-	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
-	// to make sure we're referencing the right document/iframe (instead of the
-	// context of the `Fill`'s parent).
+	// `Slot`. Wrap the children in a `StyleProvider` so CSS module styles and
+	// legacy Emotion styles target that document/iframe instead of the document
+	// containing the `Fill`.
 	return createPortal(
 		<StyleProvider document={ portalEl.ownerDocument }>
 			{ wrappedChildren }

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

@@ -1,17 +1,34 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { ReactNode } from 'react';
 
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
+import {
+	createContext,
+	createPortal,
+	useContext,
+	useState,
+} from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
 import { Slot, Fill, Provider as SlotFillProvider } from '../';
+import { Spacer } from '../../spacer';
+
+function IframePortal( { children }: { children: ReactNode } ) {
+	const [ bodyNode, setBodyNode ] = useState< HTMLElement | null >( null );
+
+	return (
+		<iframe
+			title="Cross-document SlotFill styles"
+			srcDoc="<!doctype html><html><body></body></html>"
+			onLoad={ ( event ) => {
+				setBodyNode(
+					event.currentTarget.contentDocument?.body ?? null
+				);
+			} }
+			style={ { border: 0, height: 160, width: '100%' } }
+		>
+			{ bodyNode && createPortal( children, bodyNode ) }
+		</iframe>
+	);
+}
 
 const meta: Meta< typeof Slot > = {
 	tags: [ 'manifest' ],
@@ -143,3 +160,28 @@ export const WithContext: StoryFn< typeof Slot > = ( props ) => {
 WithContext.args = {
 	...Default.args,
 };
+
+export const CrossDocumentStyles: StoryFn< typeof Slot > = () => {
+	return (
+		<SlotFillProvider>
+			<p>
+				The content below should have 32px of padding inside its
+				outline.
+			</p>
+			<IframePortal>
+				<Slot name="cross-document-styles" bubblesVirtually />
+			</IframePortal>
+			<Fill name="cross-document-styles">
+				<Spacer
+					padding={ 8 }
+					style={ {
+						display: 'inline-block',
+						outline: '2px solid currentColor',
+					} }
+				>
+					SCSS module styles rendered in another document
+				</Spacer>
+			</Fill>
+		</SlotFillProvider>
+	);
+};

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Slot bubblesVirtually false should subsume another slot by the same name 1`] = `
 <div>

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

@@ -1,18 +1,21 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-/**
- * Internal dependencies
- */
+import { Component, createPortal, useState } from '@wordpress/element';
+import { registerStyle } from '@wordpress/style-runtime';
+
 import { Slot, Fill, Provider, useSlotFills } from '../';
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
+function IframePortal( { children } ) {
+	const [ iframe, setIframe ] = useState( null );
+	const body = iframe?.contentDocument?.body;
+
+	return (
+		<iframe title="Slot document" ref={ setIframe }>
+			{ body && createPortal( children, body ) }
+		</iframe>
+	);
+}
 
 class Filler extends Component {
 	constructor() {
@@ -287,6 +290,45 @@ describe( 'Slot', () => {
 		expect( console ).toHaveWarned();
 	} );
 
+	describe( 'cross-document styles', () => {
+		afterEach( () => {
+			delete globalThis.__wpStyleRuntime;
+			document.head.innerHTML = '';
+		} );
+
+		it( 'injects registered SCSS module styles into the Slot document', () => {
+			const styleHash = 'slot-fill-cross-document-style';
+			const css = '.slot-fill-cross-document{padding:32px;}';
+
+			// CSS module registration is skipped by the Jest transform, so mirror the
+			// generated production call explicitly.
+			registerStyle( styleHash, css );
+
+			render(
+				<Provider>
+					<IframePortal>
+						<Slot name="cross-document" bubblesVirtually />
+					</IframePortal>
+					<Fill name="cross-document">
+						<div className="slot-fill-cross-document">
+							Styled content
+						</div>
+					</Fill>
+				</Provider>
+			);
+			const iframeDocument =
+				screen.getByTitle( 'Slot document' ).contentDocument;
+
+			const styledElement = within( iframeDocument.body ).getByText(
+				'Styled content'
+			);
+			expect(
+				iframeDocument.defaultView.getComputedStyle( styledElement )
+					.padding
+			).toBe( '32px' );
+		} );
+	} );
+
 	describe.each( [ false, true ] )(
 		'bubblesVirtually %p',
 		( bubblesVirtually ) => {