@wordpress/components 21.2.0 → 22.0.0

package/src/popover/index.tsx

@@ -169,7 +169,6 @@ const UnforwardedPopover = (
 		children,
 		className,
 		noArrow = true,
-		isAlternate,
 		position,
 		placement: placementProp = 'bottom-start',
 		offset: offsetProp = 0,
@@ -181,30 +180,23 @@ const UnforwardedPopover = (
 		flip = true,
 		resize = true,
 		shift = false,
+		variant,
 
 		// Deprecated props
 		__unstableForcePosition,
-		__unstableShift,
 		anchorRef,
 		anchorRect,
 		getAnchorRect,
-		range,
+		isAlternate,
 
 		// Rest
 		...contentProps
 	} = props;
 
-	if ( range ) {
-		deprecated( '`range` prop in wp.components.Popover', {
-			since: '6.1',
-			version: '6.3',
-		} );
-	}
-
 	let computedFlipProp = flip;
 	let computedResizeProp = resize;
 	if ( __unstableForcePosition !== undefined ) {
-		deprecated( '`__unstableForcePosition` prop wp.components.Popover', {
+		deprecated( '`__unstableForcePosition` prop in wp.components.Popover', {
 			since: '6.1',
 			version: '6.3',
 			alternative: '`flip={ false }` and  `resize={ false }`',
@@ -216,22 +208,9 @@ const UnforwardedPopover = (
 		computedResizeProp = ! __unstableForcePosition;
 	}
 
-	let shouldShift = shift;
-	if ( __unstableShift !== undefined ) {
-		deprecated( '`__unstableShift` prop in wp.components.Popover', {
-			since: '6.1',
-			version: '6.3',
-			alternative: '`shift` prop`',
-		} );
-
-		// Back-compat.
-		shouldShift = __unstableShift;
-	}
-
 	if ( anchorRef !== undefined ) {
 		deprecated( '`anchorRef` prop in wp.components.Popover', {
 			since: '6.1',
-			version: '6.3',
 			alternative: '`anchor` prop',
 		} );
 	}
@@ -239,7 +218,6 @@ const UnforwardedPopover = (
 	if ( anchorRect !== undefined ) {
 		deprecated( '`anchorRect` prop in wp.components.Popover', {
 			since: '6.1',
-			version: '6.3',
 			alternative: '`anchor` prop',
 		} );
 	}
@@ -247,12 +225,19 @@ const UnforwardedPopover = (
 	if ( getAnchorRect !== undefined ) {
 		deprecated( '`getAnchorRect` prop in wp.components.Popover', {
 			since: '6.1',
-			version: '6.3',
 			alternative: '`anchor` prop',
 		} );
 	}
 
-	const arrowRef = useRef( null );
+	const computedVariant = isAlternate ? 'toolbar' : variant;
+	if ( isAlternate !== undefined ) {
+		deprecated( '`isAlternate` prop in wp.components.Popover', {
+			since: '6.2',
+			alternative: "`variant` prop with the `'toolbar'` value",
+		} );
+	}
+
+	const arrowRef = useRef< HTMLElement | null >( null );
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
@@ -325,7 +310,7 @@ const UnforwardedPopover = (
 					},
 			  } )
 			: undefined,
-		shouldShift
+		shift
 			? shiftMiddleware( {
 					crossAxis: true,
 					limiter: customLimitShift(),
@@ -385,7 +370,7 @@ const UnforwardedPopover = (
 	} );
 
 	const arrowCallbackRef = useCallback(
-		( node ) => {
+		( node: HTMLElement | null ) => {
 			arrowRef.current = node;
 			update();
 		},
@@ -476,7 +461,12 @@ const UnforwardedPopover = (
 			placement={ computedPlacement }
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
-				'is-alternate': isAlternate,
+				// Use the 'alternate' classname for 'toolbar' variant for back compat.
+				[ `is-${
+					computedVariant === 'toolbar'
+						? 'alternate'
+						: computedVariant
+				}` ]: computedVariant,
 			} ) }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }

package/src/popover/stories/index.tsx

@@ -80,7 +80,7 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Popover > = ( args ) => {
+const Template: ComponentStory< typeof Popover > = ( args ) => {
 	const [ isVisible, setIsVisible ] = useState( false );
 	const toggleVisible = () => {
 		setIsVisible( ( state ) => ! state );
@@ -114,6 +114,8 @@ export const Default: ComponentStory< typeof Popover > = ( args ) => {
 		</div>
 	);
 };
+
+export const Default: ComponentStory< typeof Popover > = Template.bind( {} );
 Default.args = {
 	children: (
 		<div style={ { width: '280px', whiteSpace: 'normal' } }>
@@ -125,6 +127,32 @@ Default.args = {
 	),
 };
 
+export const Toolbar: ComponentStory< typeof Popover > = Template.bind( {} );
+Toolbar.args = {
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+			aliquip ex ea commodo consequat.
+		</div>
+	),
+	variant: 'toolbar',
+};
+
+export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} );
+Unstyled.args = {
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+			aliquip ex ea commodo consequat.
+		</div>
+	),
+	variant: 'unstyled',
+};
+
 export const AllPlacements: ComponentStory< typeof Popover > = ( {
 	children,
 	...args

package/src/popover/style.scss

@@ -29,6 +29,15 @@ $arrow-triangle-base-size: 14px;
 		box-shadow: none;
 	}
 
+	// A style that gives the popover no visible ui.
+	.is-unstyled & {
+		background: none;
+		border: none;
+		border-radius: 0;
+		outline: none;
+		box-shadow: none;
+	}
+
 	.components-popover.is-expanded & {
 		position: static;
 		height: calc(100% - #{ $panel-header-height });

package/src/popover/types.ts

@@ -92,10 +92,6 @@ export type PopoverProps = {
 	 * fullscreen on mobile viewports (see the `expandOnMobile` prop).
 	 */
 	headerTitle?: string;
-	/**
-	 * Used to enable a different visual style for the popover.
-	 */
-	isAlternate?: boolean;
 	/**
 	 * Used to show/hide the arrow that points at the popover's anchor.
 	 *
@@ -138,7 +134,20 @@ export type PopoverProps = {
 	 * @default false
 	 */
 	shift?: boolean;
-
+	/**
+	 * Specifies the popover's style.
+	 *
+	 * Leave undefined for the default style. Other values are:
+	 * - 'unstyled':  The popover is essentially without any visible style, it
+	 *                has no background, border, outline or drop shadow, but
+	 *                the popover contents are still displayed.
+	 * - 'toolbar':   A style that has no elevation, but a high contrast with
+	 *                other elements. This is matches the style of the
+	 *                `Toolbar` component.
+	 *
+	 * @default undefined
+	 */
+	variant?: 'unstyled' | 'toolbar';
 	// Deprecated props
 	/**
 	 * Prevent the popover from flipping and resizing when meeting the viewport
@@ -148,14 +157,6 @@ export type PopoverProps = {
 	 * @deprecated
 	 */
 	__unstableForcePosition?: boolean;
-	/**
-	 * Enables the `Popover` to shift in order to stay in view when meeting the
-	 * viewport edges.
-	 * _Note: this prop is deprecated. Use the `shift` prop instead._
-	 *
-	 * @deprecated
-	 */
-	__unstableShift?: boolean;
 	/**
 	 * An object extending a `DOMRect` with an additional optional `ownerDocument`
 	 * property, used to specify a fixed popover position.
@@ -185,9 +186,11 @@ export type PopoverProps = {
 		fallbackReferenceElement: Element | null
 	) => DomRectWithOwnerDocument;
 	/**
-	 * _Note: this prop is deprecated and has no effect on the component._
+	 * Used to enable a different visual style for the popover.
+	 * _Note: this prop is deprecated. Use the `variant` prop with the
+	 * 'toolbar' value instead._
 	 *
 	 * @deprecated
 	 */
-	range?: unknown;
+	isAlternate?: boolean;
 };

package/src/radio-group/README.md

@@ -1,5 +1,9 @@
 # RadioGroup
 
+<div class="callout callout-alert">
+This component is deprecated. Consider using `RadioControl` or `ToggleGroupControl` instead.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>

package/src/radio-group/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */
@@ -12,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import ButtonGroup from '../button-group';
-import RadioContext from '../radio-context';
+import RadioContext from './radio-context';
 
 function RadioGroup(
 	{ label, checked, defaultChecked, disabled, onChange, ...props },
@@ -43,4 +45,7 @@ function RadioGroup(
 	);
 }
 
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
 export default forwardRef( RadioGroup );

package/src/{radio → radio-group/radio}/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */
@@ -11,7 +13,7 @@ import { useContext, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import Button from '../../button';
 import RadioContext from '../radio-context';
 
 function Radio( { children, value, ...props }, ref ) {
@@ -32,4 +34,7 @@ function Radio( { children, value, ...props }, ref ) {
 	);
 }
 
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
 export default forwardRef( Radio );

package/src/radio-group/stories/index.js

@@ -6,12 +6,21 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Radio from '../../radio';
+import Radio from '../radio';
 import RadioGroup from '../';
 
 export default {
-	title: 'Components (Experimental)/RadioGroup',
+	title: 'Components (Deprecated)/RadioGroup',
+	subcomponents: { Radio },
 	component: RadioGroup,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
+			},
+		},
+	},
 };
 
 export const _default = () => {

package/src/sandbox/index.js

@@ -9,64 +9,79 @@ import {
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
-const observeAndResizeJS = `
-	( function() {
-		var observer;
+const observeAndResizeJS = function () {
+	const { MutationObserver } = window;
 
-		if ( ! window.MutationObserver || ! document.body || ! window.parent ) {
-			return;
-		}
+	if ( ! MutationObserver || ! document.body || ! window.parent ) {
+		return;
+	}
 
-		function sendResize() {
-			var clientBoundingRect = document.body.getBoundingClientRect();
+	function sendResize() {
+		const clientBoundingRect = document.body.getBoundingClientRect();
 
-			window.parent.postMessage( {
+		window.parent.postMessage(
+			{
 				action: 'resize',
 				width: clientBoundingRect.width,
 				height: clientBoundingRect.height,
-			}, '*' );
-		}
+			},
+			'*'
+		);
+	}
 
-		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 ) {
-					if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
-						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
+			) {
+				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 );
+};
 
 const style = `
 	body {
@@ -153,7 +168,7 @@ export default function Sandbox( {
 					<script
 						type="text/javascript"
 						dangerouslySetInnerHTML={ {
-							__html: observeAndResizeJS,
+							__html: `(${ observeAndResizeJS.toString() })();`,
 						} }
 					/>
 					{ scripts.map( ( src ) => (

package/src/sandbox/index.native.js

@@ -22,67 +22,85 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-const observeAndResizeJS = `
-	( function() {
-		var observer;
-
-		if ( ! window.MutationObserver || ! document.body || ! window.parent ) {
-			return;
-		}
+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;
+	}
 
-		function sendResize() {
-			var clientBoundingRect = document.body.getBoundingClientRect();
+	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',
+		// 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,
-            }));
-		}
+			} )
+		);
+	}
 
-		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 ) {
-					if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
-						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
+			) {
+				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 );
+};
 
 const style = `
 	body {
@@ -215,7 +233,9 @@ function Sandbox( {
 					<script
 						type="text/javascript"
 						dangerouslySetInnerHTML={ {
-							__html: customJS || observeAndResizeJS,
+							__html:
+								customJS ||
+								`(${ observeAndResizeJS.toString() })();`,
 						} }
 					/>
 					{ scripts.map( ( src ) => (

package/src/sandbox/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -39,28 +39,25 @@ describe( 'Sandbox', () => {
 	};
 
 	it( 'should rerender with new emdeded content if html prop changes', () => {
-		let result;
-		act( () => {
-			result = render( <TestWrapper /> );
-		} );
+		const { container } = render( <TestWrapper /> );
 
-		const iframe = result.container.querySelector( '.components-sandbox' );
+		const iframe = container.querySelector( '.components-sandbox' );
 
 		let sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
-		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
 			'https://super.embed'
 		);
 
-		act( () => {
-			fireEvent.click( result.getByRole( 'button' ) );
-		} );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
-		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
 			'https://another.super.embed'
 		);
 	} );