@wordpress/components 23.5.0 → 23.7.0

package/src/range-control/types.ts

@@ -74,7 +74,7 @@ export type RangeMarkProps = {
 
 export type ControlledRangeValue = number | '' | null;
 
-export type RangeControlProps< IconProps = unknown > = Pick<
+export type RangeControlProps = Pick<
 	BaseControlProps,
 	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
 > &
@@ -86,7 +86,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * For more information on `IconType` see the Icon component:
 		 * /packages/components/src/icon/index.tsx
 		 */
-		afterIcon?: IconType< IconProps >;
+		afterIcon?: IconType;
 		/**
 		 * If this property is true, a button to reset the slider is
 		 * rendered.
@@ -101,7 +101,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * For more information on `IconType` see the Icon component:
 		 * /packages/components/src/icon/index.tsx
 		 */
-		beforeIcon?: IconType< IconProps >;
+		beforeIcon?: IconType;
 		/**
 		 * CSS color string for the `RangeControl` wrapper.
 		 *

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

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Text } from '../../../text';
-import { COLORS } from '../../../utils';
+import { font, COLORS } from '../../../utils';
 
 export const Root = styled.div`
 	bottom: 0;
@@ -33,6 +33,7 @@ export const Tooltip = styled.div`
 	background: ${ COLORS.gray[ 900 ] };
 	border-radius: 2px;
 	box-sizing: border-box;
+	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: 12px;
 	color: ${ COLORS.ui.textDark };
 	padding: 4px 8px;

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

@@ -13,7 +13,7 @@ export const POSITIONS = {
 	corner: 'corner',
 } as const;
 
-export type Position = typeof POSITIONS[ keyof typeof POSITIONS ];
+export type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];
 
 interface UseResizeLabelProps {
 	/** The label value. */

package/src/responsive-wrapper/README.md

@@ -17,6 +17,12 @@ const MyResponsiveWrapper = () => (
 );
 ```
 
+### Usage with `SVG` elements
+
+When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make sure that it has the `viewbox` and the `preserveAspectRatio` set.
+
+When dealing with SVGs, it may not be possible to derive its `naturalWidth` and `naturalHeight` and therefore passing them as propertied to `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill its container, unless the `height` and `width` attributes are specified.
+
 ## Props
 
 ### `children`: `React.ReactElement`
@@ -36,10 +42,10 @@ If true, the wrapper will be `span` instead of `div`.
 
 The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
 
--   Required: Yes
+-   Required: No
 
 ### `naturalWidth`: `number`
 
 The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
 
--   Required: Yes
+-   Required: No

package/src/responsive-wrapper/index.tsx

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { cloneElement, Children } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -36,28 +35,30 @@ function ResponsiveWrapper( {
 	children,
 	isInline = false,
 }: ResponsiveWrapperProps ) {
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}
-	const imageStyle = {
-		paddingBottom:
-			naturalWidth < ( containerWidth ?? 0 )
-				? naturalHeight
-				: ( naturalHeight / naturalWidth ) * 100 + '%',
-	};
+
 	const TagName = isInline ? 'span' : 'div';
+	let aspectRatio;
+	if ( naturalWidth && naturalHeight ) {
+		aspectRatio = `${ naturalWidth } / ${ naturalHeight }`;
+	}
+
 	return (
 		<TagName className="components-responsive-wrapper">
-			{ containerResizeListener }
-			<TagName style={ imageStyle } />
-			{ cloneElement( children, {
-				className: classnames(
-					'components-responsive-wrapper__content',
-					children.props.className
-				),
-			} ) }
+			<div>
+				{ cloneElement( children, {
+					className: classnames(
+						'components-responsive-wrapper__content',
+						children.props.className
+					),
+					style: {
+						...children.props.style,
+						aspectRatio,
+					},
+				} ) }
+			</div>
 		</TagName>
 	);
 }

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

@@ -36,3 +36,44 @@ Default.args = {
 		/>
 	),
 };
+
+/**
+ * When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make
+ * sure that it has the `viewbox` and the `preserveAspectRatio` set.
+ *
+ * When dealing with SVGs, it may not be possible to derive its `naturalWidth`
+ * and `naturalHeight` and therefore passing them as propertied to
+ * `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill
+ * its container, unless the `height` and `width` attributes are specified.
+ */
+export const WithSVG: ComponentStory< typeof ResponsiveWrapper > =
+	Template.bind( {} );
+WithSVG.args = {
+	children: (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 280 640"
+			preserveAspectRatio="xMinYMin meet"
+			width="280px"
+			height="640px"
+		>
+			<rect
+				x="0"
+				y="0"
+				width="280"
+				height="640"
+				style={ { fill: 'blue' } }
+			/>
+			<g>
+				<circle style={ { fill: 'red' } } cx="140" cy="160" r="60" />
+				<circle style={ { fill: 'yellow' } } cx="140" cy="320" r="60" />
+				<circle
+					style={ { fill: '#40CC40' } }
+					cx="140"
+					cy="480"
+					r="60"
+				/>
+			</g>
+		</svg>
+	),
+};

package/src/responsive-wrapper/style.scss

@@ -1,19 +1,13 @@
 .components-responsive-wrapper {
 	position: relative;
 	max-width: 100%;
-	&,
-	& > span {
-		display: block;
-	}
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .components-responsive-wrapper__content {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	display: block;
+	max-width: 100%;
 	width: 100%;
-	height: 100%;
-	margin: auto;
 }

package/src/responsive-wrapper/types.ts

@@ -2,11 +2,11 @@ export type ResponsiveWrapperProps = {
 	/**
 	 * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
 	 */
-	naturalWidth: number;
+	naturalWidth?: number;
 	/**
 	 * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
 	 */
-	naturalHeight: number;
+	naturalHeight?: number;
 	/**
 	 * The element to wrap.
 	 */

package/src/sandbox/index.native.js

@@ -22,85 +22,85 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-const observeAndResizeJS = function () {
-	// Hermes requires a special directive to preserve the original source code
-	// when using `Function.prototype.toString()` below.
-	// https://github.com/facebook/hermes/issues/114#issuecomment-887106990
-	'show source';
-	const { MutationObserver } = window;
-
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
-		return;
-	}
+const observeAndResizeJS = `
+	(function() {
+		const { MutationObserver } = window;
 
-	function sendResize() {
-		const clientBoundingRect = document.body.getBoundingClientRect();
-
-		// The function postMessage is exposed by the react-native-webview library
-		// to communicate between React Native and the WebView, in this case,
-		// we use it for notifying resize changes.
-		window.ReactNativeWebView.postMessage(
-			JSON.stringify( {
-				action: 'resize',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-			} )
-		);
-	}
+		if ( ! MutationObserver || ! document.body || ! window.parent ) {
+			return;
+		}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+		function sendResize() {
+			const clientBoundingRect = document.body.getBoundingClientRect();
+
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
+			// we use it for notifying resize changes.
+			window.ReactNativeWebView.postMessage(
+				JSON.stringify( {
+					action: 'resize',
+					width: clientBoundingRect.width,
+					height: clientBoundingRect.height,
+				} )
+			);
+		}
 
-	window.addEventListener( 'load', sendResize, 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 ) {
-		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
-				if (
-					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+		const observer = new MutationObserver( sendResize );
+		observer.observe( document.body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: true,
+		} );
+
+		window.addEventListener( 'load', sendResize, 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 ) {
+			if ( ruleOrNode.style ) {
+				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
+					style
 				) {
-					ruleOrNode.style[ style ] = '';
-				}
-			} );
+					if (
+						/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+					) {
+						ruleOrNode.style[ style ] = '';
+					}
+				} );
+			}
 		}
-	}
 
-	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
-			);
-		}
-	);
+		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
+				);
+			}
+		);
 
-	document.body.style.position = 'absolute';
-	document.body.style.width = '100%';
-	document.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();
 
-	// 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 );
-};
+		// 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 );
+		window.addEventListener( 'orientationchange', sendResize, true );
+		widow.addEventListener( 'click', sendResize, true );
+	})();
+`;
 
 const style = `
 	body {
@@ -230,14 +230,6 @@ function Sandbox( {
 					className={ type }
 				>
 					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html:
-								customJS ||
-								`(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
 					{ scripts.map( ( src ) => (
 						<script key={ src } src={ src } />
 					) ) }
@@ -322,6 +314,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
+			injectedJavaScript={ customJS || observeAndResizeJS }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }

package/src/select-control/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -30,7 +29,10 @@ function useUniqueId( idProp?: string ) {
 }
 
 function UnforwardedSelectControl(
-	{
+	props: WordPressComponentProps< SelectControlProps, 'select', false >,
+	ref: React.ForwardedRef< HTMLSelectElement >
+) {
+	const {
 		className,
 		disabled = false,
 		help,
@@ -39,7 +41,7 @@ function UnforwardedSelectControl(
 		label,
 		multiple = false,
 		onBlur = noop,
-		onChange = noop,
+		onChange,
 		onFocus = noop,
 		options = [],
 		size = 'default',
@@ -50,10 +52,8 @@ function UnforwardedSelectControl(
 		suffix,
 		__next36pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
-		...props
-	}: WordPressComponentProps< SelectControlProps, 'select', false >,
-	ref: ForwardedRef< HTMLSelectElement >
-) {
+		...restProps
+	} = props;
 	const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
@@ -61,32 +61,33 @@ function UnforwardedSelectControl(
 	// Disable reason: A select with an onchange throws a warning.
 	if ( ! options?.length && ! children ) return null;
 
-	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {
+	const handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {
 		onBlur( event );
 		setIsFocused( false );
 	};
 
-	const handleOnFocus = ( event: FocusEvent< HTMLSelectElement > ) => {
+	const handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {
 		onFocus( event );
 		setIsFocused( true );
 	};
 
-	const handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {
-		if ( multiple ) {
+	const handleOnChange = (
+		event: React.ChangeEvent< HTMLSelectElement >
+	) => {
+		if ( props.multiple ) {
 			const selectedOptions = Array.from( event.target.options ).filter(
 				( { selected } ) => selected
 			);
 			const newValues = selectedOptions.map( ( { value } ) => value );
-			onChange( newValues );
+			props.onChange?.( newValues, { event } );
 			return;
 		}
 
-		onChange( event.target.value, { event } );
+		props.onChange?.( event.target.value, { event } );
 	};
 
 	const classes = classNames( 'components-select-control', className );
 
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<BaseControl
 			help={ help }
@@ -109,7 +110,7 @@ function UnforwardedSelectControl(
 				__next36pxDefaultSize={ __next36pxDefaultSize }
 			>
 				<Select
-					{ ...props }
+					{ ...restProps }
 					__next36pxDefaultSize={ __next36pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
@@ -143,7 +144,6 @@ function UnforwardedSelectControl(
 			</InputBase>
 		</BaseControl>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 /**

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
 
 /**
  * WordPress dependencies
@@ -32,20 +31,33 @@ const meta: ComponentMeta< typeof SelectControl > = {
 };
 export default meta;
 
-const SelectControlWithState: ComponentStory< typeof SelectControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ selection, setSelection ] =
-		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
+const SelectControlWithState: ComponentStory< typeof SelectControl > = (
+	props
+) => {
+	const [ selection, setSelection ] = useState< string[] >();
+
+	if ( props.multiple ) {
+		return (
+			<SelectControl
+				{ ...props }
+				multiple
+				value={ selection }
+				onChange={ ( value ) => {
+					setSelection( value );
+					props.onChange?.( value );
+				} }
+			/>
+		);
+	}
 
 	return (
 		<SelectControl
-			{ ...args }
-			value={ selection }
+			{ ...props }
+			multiple={ false }
+			value={ selection?.[ 0 ] }
 			onChange={ ( value ) => {
-				setSelection( value );
-				onChange?.( value );
+				setSelection( [ value ] );
+				props.onChange?.( value );
 			} }
 		/>
 	);
@@ -70,7 +82,7 @@ WithLabelAndHelpText.args = {
 
 /**
  * As an alternative to the `options` prop, `optgroup`s and `options` can be
- * passed in as `children` for more customizability.
+ * passed in as `children` for more customizeability.
  */
 export const WithCustomChildren: ComponentStory< typeof SelectControl > = (
 	args