@wordpress/components 23.0.0 → 23.2.0

package/src/panel/test/body.js

@@ -1,154 +1,163 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { PanelBody } from '../body';
 
-const getPanelBody = ( container ) =>
-	container.querySelector( '.components-panel__body' );
-const getPanelBodyContent = ( container ) =>
-	container.querySelector( '.components-panel__body > div' );
-const getPanelToggle = ( container ) =>
-	container.querySelector( '.components-panel__body-toggle' );
+jest.useFakeTimers();
 
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
 			const { container } = render( <PanelBody /> );
-			const panelBody = getPanelBody( container );
 
-			expect( panelBody ).toBeTruthy();
-			expect( panelBody.tagName ).toBe( 'DIV' );
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render inner content, if opened', () => {
-			const { container } = render(
-				<PanelBody opened={ true }>
-					<div className="inner-content">Content</div>
+			render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should be opened by default', () => {
-			const { container } = render(
+			render(
 				<PanelBody>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should render as initially opened, if specified', () => {
-			const { container } = render(
-				<PanelBody initialOpen={ true }>
-					<div>Content</div>
+			render(
+				<PanelBody initialOpen>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should call the children function, if specified', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+			const { rerender } = render(
+				<PanelBody opened>
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeInTheDocument();
+			expect( panelContent ).not.toBeVisible();
 			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 
 	describe( 'toggling', () => {
 		it( 'should toggle collapse with opened prop', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+			const { rerender } = render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 
 			rerender(
 				<PanelBody opened={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 
 			rerender(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 		} );
 
-		it( 'should toggle when clicking header', () => {
-			const { container } = render(
+		it( 'should toggle when clicking header', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<PanelBody title="Panel" initialOpen={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
-			const panelToggle = getPanelToggle( container );
 
-			expect( panelContent ).toBeFalsy();
+			let panelContent = screen.queryByTestId( 'inner-content' );
+			const panelToggle = screen.getByRole( 'button', { name: 'Panel' } );
+
+			expect( panelContent ).not.toBeInTheDocument();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 		} );
 
-		it( 'should pass button props to panel title', () => {
+		it( 'should pass button props to panel title', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const mock = jest.fn();
 
-			const { container } = render(
+			render(
 				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			const panelToggle = getPanelToggle( container );
-
-			fireEvent.click( panelToggle );
+			await user.click( screen.getByRole( 'button', { name: 'Panel' } ) );
 
 			expect( mock ).toHaveBeenCalled();
 		} );

package/src/placeholder/style.scss

@@ -45,7 +45,7 @@
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: 1ch;
+		margin-right: $grid-unit-15;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.

package/src/placeholder/test/index.tsx

@@ -59,6 +59,7 @@ describe( 'Placeholder', () => {
 
 			// Test for empty label. When the label is empty, the only way to
 			// query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const label = placeholder.querySelector(
 				'.components-placeholder__label'
 			);
@@ -67,6 +68,7 @@ describe( 'Placeholder', () => {
 
 			// Test for non existent instructions. When the instructions is
 			// empty, the only way to query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const placeholderInstructions = placeholder.querySelector(
 				'.components-placeholder__instructions'
 			);
@@ -84,6 +86,7 @@ describe( 'Placeholder', () => {
 
 			const placeholder = getPlaceholder();
 			const icon = within( placeholder ).getByTestId( 'icon' );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( icon.parentNode ).toHaveClass(
 				'components-placeholder__label'
 			);

package/src/query-controls/index.js

@@ -35,6 +35,7 @@ export default function QueryControls( {
 	return [
 		onOrderChange && onOrderByChange && (
 			<SelectControl
+				__nextHasNoMarginBottom
 				key="query-controls-order-select"
 				label={ __( 'Order by' ) }
 				value={ `${ orderBy }/${ order }` }

package/src/resizable-box/README.md

@@ -38,8 +38,8 @@ const Edit = ( props ) => {
 			} }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
-					height: parseInt( height + delta.height, 10 ),
-					width: parseInt( width + delta.width, 10 ),
+					height: height + delta.height,
+					width: width + delta.width,
 				} );
 				toggleSelection( true );
 			} }

package/src/resizable-box/index.tsx

@@ -88,14 +88,13 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	className: string;
 	children: ReactNode;
-	showHandle: boolean;
-	__experimentalShowTooltip: boolean;
-	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+	showHandle?: boolean;
+	__experimentalShowTooltip?: boolean;
+	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
 };
 
-function ResizableBox(
+function UnforwardedResizableBox(
 	{
 		className,
 		children,
@@ -124,4 +123,6 @@ function ResizableBox(
 	);
 }
 
-export default forwardRef( ResizableBox );
+export const ResizableBox = forwardRef( UnforwardedResizableBox );
+
+export default ResizableBox;

package/src/resizable-box/stories/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: ComponentMeta< typeof ResizableBox > = {
+	title: 'Components/ResizableBox',
+	component: ResizableBox,
+	argTypes: {
+		children: { control: { type: null } },
+		enable: { control: 'object' },
+		onResizeStop: { action: 'onResizeStop' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResizableBox > = ( {
+	onResizeStop,
+	...props
+} ) => {
+	const [ { height, width }, setAttributes ] = useState( {
+		height: 200,
+		width: 400,
+	} );
+
+	return (
+		<ResizableBox
+			{ ...props }
+			size={ {
+				height,
+				width,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop?.( event, direction, elt, delta );
+				setAttributes( {
+					height: height + delta.height,
+					width: width + delta.width,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<div
+			style={ {
+				background: '#eee',
+				display: 'flex',
+				height: '100%',
+				width: '100%',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			Resize
+		</div>
+	),
+};
+
+/**
+ * The `enable` prop can be used to disable resizing in specific directions.
+ */
+export const DisabledDirections = Template.bind( {} );
+DisabledDirections.args = {
+	...Default.args,
+	enable: {
+		top: false,
+		right: true,
+		bottom: true,
+		left: false,
+		topRight: false,
+		bottomRight: true,
+		bottomLeft: false,
+		topLeft: false,
+	},
+};

package/src/responsive-wrapper/README.md

@@ -1,5 +1,7 @@
 # ResponsiveWrapper
 
+A wrapper component that maintains its aspect ratio when resized.
+
 ## Usage
 
 ```jsx
@@ -14,3 +16,30 @@ const MyResponsiveWrapper = () => (
 	</ResponsiveWrapper>
 );
 ```
+
+## Props
+
+### `children`: `React.ReactElement`
+
+The element to wrap.
+
+-   Required: Yes
+
+### `isInline`: `boolean`
+
+If true, the wrapper will be `span` instead of `div`.
+
+-   Required: No
+-   Default: `false`
+
+### `naturalHeight`: `number`
+
+The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes
+
+### `naturalWidth`: `number`
+
+The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes

package/src/responsive-wrapper/{index.js → index.tsx}

@@ -9,12 +9,33 @@ import classnames from 'classnames';
 import { cloneElement, Children } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveWrapperProps } from './types';
+
+/**
+ * A wrapper component that maintains its aspect ratio when resized.
+ *
+ * ```jsx
+ * import { ResponsiveWrapper } from '@wordpress/components';
+ *
+ * const MyResponsiveWrapper = () => (
+ * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
+ * 		<img
+ * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+ * 			alt="WordPress"
+ * 		/>
+ * 	</ResponsiveWrapper>
+ * );
+ * ```
+ */
 function ResponsiveWrapper( {
 	naturalWidth,
 	naturalHeight,
 	children,
 	isInline = false,
-} ) {
+}: ResponsiveWrapperProps ) {
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
@@ -22,7 +43,7 @@ function ResponsiveWrapper( {
 	}
 	const imageStyle = {
 		paddingBottom:
-			naturalWidth < containerWidth
+			naturalWidth < ( containerWidth ?? 0 )
 				? naturalHeight
 				: ( naturalHeight / naturalWidth ) * 100 + '%',
 	};

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

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResponsiveWrapper from '..';
+
+const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+	component: ResponsiveWrapper,
+	title: 'Components/ResponsiveWrapper',
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResponsiveWrapper > = ( args ) => (
+	<ResponsiveWrapper { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	naturalWidth: 2000,
+	naturalHeight: 680,
+	children: (
+		<img
+			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+			alt="WordPress"
+		/>
+	),
+};

package/src/responsive-wrapper/types.ts

@@ -0,0 +1,20 @@
+export type ResponsiveWrapperProps = {
+	/**
+	 * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalWidth: number;
+	/**
+	 * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalHeight: number;
+	/**
+	 * The element to wrap.
+	 */
+	children: React.ReactElement;
+	/**
+	 * If true, the wrapper will be `span` instead of `div`.
+	 *
+	 * @default false
+	 */
+	isInline?: boolean;
+};

package/src/sandbox/README.md

@@ -1,4 +1,4 @@
-# Sandbox
+# SandBox
 
 This component provides an isolated environment for arbitrary HTML via iframes.
 
@@ -8,6 +8,49 @@ This component provides an isolated environment for arbitrary HTML via iframes.
 import { SandBox } from '@wordpress/components';
 
 const MySandBox = () => (
-	<SandBox html="<p>Content</p>" title="Sandbox" type="embed" />
+	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
 );
 ```
+
+## Props
+
+### `html`: `string`
+
+The HTML to render in the body of the iframe document.
+
+-   Required: No
+-   Default: ""
+
+### `onFocus`: `React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ]`
+
+The `onFocus` callback for the iframe.
+
+-   Required: No
+
+### `scripts`: `string[]`
+
+An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.
+
+-   Required: No
+-   Default: []
+
+### `styles`: `string[]`
+
+An array of CSS strings to inject into the `<head>` of the iframe document.
+
+-   Required: No
+-   Default: []
+
+### `title`: `string`
+
+The `<title>` of the iframe document.
+
+-   Required: No
+-   Default: ""
+
+### `type`: `string`
+
+The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
+
+-   Required: No
+-   Default: ""