@wordpress/components 37.0.0 → 38.0.0

package/src/panel/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[`Panel basic rendering should render an additional className 1`] = `
 <div>

package/src/panel/test/__snapshots__/row.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PanelRow should render with the custom class name 1`] = `
 <div>

package/src/private-apis.ts

@@ -9,7 +9,6 @@ import { useDrag } from '@use-gesture/react';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
-import Theme from './theme';
 import { Tabs } from './tabs';
 import { kebabCase, normalizeTextString } from './utils/strings';
 import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
@@ -39,7 +38,6 @@ lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
 	ComponentsContext,
 	Tabs,
-	Theme,
 	Menu,
 	kebabCase,
 	withIgnoreIMEEvents,

package/src/range-control/index.tsx

@@ -68,7 +68,6 @@ function UnforwardedRangeControl(
 		// Prevent passing legacy props to internal component.
 		__nextHasNoMarginBottom: _,
 		__next40pxDefaultSize: _next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		afterIcon,
 		allowReset = false,
 		beforeIcon,

package/src/range-control/types.ts

@@ -13,6 +13,7 @@ import type {
  */
 import type { BaseControlProps } from '../base-control/types';
 import type { IconType } from '../icon';
+import type { NumberControlProps } from '../number-control/types';
 
 export type NumericProps = {
 	/**
@@ -78,6 +79,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 +201,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 +225,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/sandbox/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -262,11 +267,16 @@ function IsolatedSandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
+	allowPopups = 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,
+	} );
+
 	const srcDoc = useMemo(
 		() =>
 			buildSandBoxDocument( {
@@ -351,7 +361,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 ) }
@@ -382,11 +392,21 @@ function SameOriginSandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
+	allowPopups = 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,
+		}
+	);
+
 	function isFrameAccessible() {
 		try {
 			return !! ref.current?.contentDocument?.body;
@@ -510,7 +530,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/test/index.tsx

@@ -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" /> );
 

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,32 +79,42 @@ function UnforwardedSearchControl(
 		SearchControl,
 		'components-search-control'
 	);
+	const hasSuffix = !! onClose || !! value;
 
 	return (
-		<StyledInputControl
+		<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,

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

@@ -35,13 +35,6 @@ type SelectControlBaseProps< V extends string > = Pick<
 		 * @ignore
 		 */
 		__next40pxDefaultSize?: boolean;
-		/**
-		 * Do not throw a warning for the deprecated 36px default size.
-		 * For internal components of other components that already throw the warning.
-		 *
-		 * @ignore
-		 */
-		__shouldNotWarnDeprecated36pxSize?: boolean;
 		/**
 		 * An array of option property objects to be rendered,
 		 * each with a `label` and `value` property, as well as any other

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 ) => {

package/src/spacer/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`] = `
 <div

package/src/text/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[`Text should render align 1`] = `
 Snapshot Diff:

package/src/text-control/style.scss

@@ -23,7 +23,7 @@
 	margin: 0;
 	background: $components-color-background;
 	color: $components-color-foreground;
-	@include input-control( $components-color-accent );
+	@include input-control;
 	border-color: $components-color-border;
 
 	// Subtract 1px to account for the border, which isn't included on the element