@wordpress/components 19.15.0 → 20.0.0

package/src/form-token-field/types.ts

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import type { ComponentPropsWithRef, MouseEventHandler } from 'react';
+import type {
+	ComponentPropsWithRef,
+	MouseEventHandler,
+	ReactNode,
+} from 'react';
 
 type Messages = {
 	/**
@@ -154,9 +158,25 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * If true, the select the first matching suggestion when the user presses
+	 * the Enter key (or space when tokenizeOnSpace is true).
+	 *
+	 * @default false
+	 */
+	__experimentalAutoSelectFirstMatch?: boolean;
+	/**
+	 * Custom renderer for suggestions.
+	 */
+	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
 }
 
-export interface SuggestionsListProps< T = string | { value: string } > {
+/**
+ * `T` can be either a `string` or an object which must have a `value` prop as a string.
+ */
+export interface SuggestionsListProps<
+	T = string | ( Record< string, unknown > & { value: string } )
+> {
 	selectedIndex: number;
 	scrollIntoView: boolean;
 	match: T;
@@ -165,6 +185,7 @@ export interface SuggestionsListProps< T = string | { value: string } > {
 	suggestions: T[];
 	displayTransform: ( value: T ) => string;
 	instanceId: string | number;
+	__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;
 }
 
 export interface TokenProps extends TokenItem {

package/src/gradient-picker/index.js

@@ -16,6 +16,7 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
+import { Spacer } from '../spacer';
 
 function SingleOrigin( {
 	className,
@@ -99,6 +100,8 @@ function MultipleOrigin( {
 }
 
 export default function GradientPicker( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMargin = false,
 	className,
 	gradients,
 	onChange,
@@ -117,6 +120,11 @@ export default function GradientPicker( {
 			? MultipleOrigin
 			: SingleOrigin;
 
+	// Can be removed when deprecation period is over
+	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
+		? { marginTop: 3 }
+		: {};
+
 	return (
 		<Component
 			className={ className }
@@ -137,13 +145,20 @@ export default function GradientPicker( {
 			}
 			content={
 				! disableCustomGradients && (
-					<CustomGradientPicker
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ value }
-						onChange={ onChange }
-					/>
+					<Spacer
+						marginTop={ gradients?.length ? 3 : 0 }
+						marginBottom={ 0 }
+						{ ...deprecatedMarginSpacerProps }
+					>
+						<CustomGradientPicker
+							__nextHasNoMargin={ __nextHasNoMargin }
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							value={ value }
+							onChange={ onChange }
+						/>
+					</Spacer>
 				)
 			}
 		/>

package/src/gradient-picker/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text, boolean, object } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,94 +11,74 @@ import GradientPicker from '../';
 export default {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		__nextHasNoMargin: { control: { type: 'boolean' } },
+		clearable: { control: { type: 'boolean' } },
+		disableCustomGradients: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
 	},
 };
 
-const GradientPickerWithState = ( props ) => {
+const GRADIENTS = [
+	{
+		name: 'Vivid cyan blue to vivid purple',
+		gradient:
+			'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+		slug: 'vivid-cyan-blue-to-vivid-purple',
+	},
+	{
+		name: 'Light green cyan to vivid green cyan',
+		gradient:
+			'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+		slug: 'light-green-cyan-to-vivid-green-cyan',
+	},
+	{
+		name: 'Luminous vivid amber to luminous vivid orange',
+		gradient:
+			'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+		slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+	},
+	{
+		name: 'Luminous vivid orange to vivid red',
+		gradient:
+			'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+		slug: 'luminous-vivid-orange-to-vivid-red',
+	},
+	{
+		name: 'Very light gray to cyan bluish gray',
+		gradient:
+			'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+		slug: 'very-light-gray-to-cyan-bluish-gray',
+	},
+	{
+		name: 'Cool to warm spectrum',
+		gradient:
+			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+		slug: 'cool-to-warm-spectrum',
+	},
+];
+
+const Template = ( { onChange, ...props } ) => {
 	const [ gradient, setGradient ] = useState();
 	return (
 		<GradientPicker
 			{ ...props }
 			value={ gradient }
-			onChange={ setGradient }
+			onChange={ ( ...changeArgs ) => {
+				setGradient( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
 		/>
 	);
 };
 
-export const _default = () => {
-	const disableCustomGradients = boolean( 'Disable Custom Gradients', false );
-	const clearable = boolean( 'Clearable', true );
-	const className = text( 'Class Name', '' );
-	const gradients = object( 'Gradients', [
-		{
-			name: 'Vivid cyan blue to vivid purple',
-			gradient:
-				'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-			slug: 'vivid-cyan-blue-to-vivid-purple',
-		},
-		{
-			name: 'Light green cyan to vivid green cyan',
-			gradient:
-				'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-			slug: 'light-green-cyan-to-vivid-green-cyan',
-		},
-		{
-			name: 'Luminous vivid amber to luminous vivid orange',
-			gradient:
-				'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
-			slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
-		},
-		{
-			name: 'Luminous vivid orange to vivid red',
-			gradient:
-				'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
-			slug: 'luminous-vivid-orange-to-vivid-red',
-		},
-		{
-			name: 'Very light gray to cyan bluish gray',
-			gradient:
-				'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
-			slug: 'very-light-gray-to-cyan-bluish-gray',
-		},
-		{
-			name: 'Cool to warm spectrum',
-			gradient:
-				'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
-			slug: 'cool-to-warm-spectrum',
-		},
-	] );
-
-	return (
-		<GradientPickerWithState
-			disableCustomGradients={ disableCustomGradients }
-			gradients={ gradients }
-			clearable={ clearable }
-			className={ className }
-		/>
-	);
+export const Default = Template.bind( {} );
+Default.args = {
+	gradients: GRADIENTS,
 };
 
-export const WithNoExistingGradients = () => {
-	const disableCustomGradients = boolean( 'Disable Custom Gradients', false );
-	const __experimentalHasMultipleOrigins = boolean(
-		'Experimental Has Multiple Origins',
-		true
-	);
-	const clearable = boolean( 'Clearable', true );
-	const className = text( 'Class Name', '' );
-	const gradients = object( 'Gradients', [] );
-
-	return (
-		<GradientPickerWithState
-			__experimentalHasMultipleOrigins={
-				__experimentalHasMultipleOrigins
-			}
-			disableCustomGradients={ disableCustomGradients }
-			gradients={ gradients }
-			clearable={ clearable }
-			className={ className }
-		/>
-	);
+export const WithNoExistingGradients = Template.bind( {} );
+WithNoExistingGradients.args = {
+	...Default.args,
+	gradients: [],
 };

package/src/guide/index.js

@@ -42,7 +42,9 @@ export default function Guide( {
 	useEffect( () => {
 		// Each time we change the current page, start from the first element of the page.
 		// This also solves any focus loss that can happen.
-		focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+		if ( guideContainer.current ) {
+			focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+		}
 	}, [ currentPage ] );
 
 	if ( Children.count( children ) ) {

package/src/guide/page-control.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { times } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,7 +19,7 @@ export default function PageControl( {
 			className="components-guide__page-control"
 			aria-label={ __( 'Guide controls' ) }
 		>
-			{ times( numberOfPages, ( page ) => (
+			{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (
 				<li
 					key={ page }
 					// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current

package/src/guide/stories/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { times } from 'lodash';
 import { text, number } from '@storybook/addon-knobs';
 
 /**
@@ -41,16 +40,18 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
 				<Guide
 					{ ...props }
 					onFinish={ closeGuide }
-					pages={ times( numberOfPages, ( page ) => ( {
-						content: (
-							<>
-								<h1>
-									Page { page + 1 } of { numberOfPages }
-								</h1>
-								<p>{ loremIpsum }</p>
-							</>
-						),
-					} ) ) }
+					pages={ Array.from( { length: numberOfPages } ).map(
+						( _, page ) => ( {
+							content: (
+								<>
+									<h1>
+										Page { page + 1 } of { numberOfPages }
+									</h1>
+									<p>{ loremIpsum }</p>
+								</>
+							),
+						} )
+					) }
 				/>
 			) }
 		</>

package/src/guide/test/index.js

@@ -1,23 +1,22 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Guide from '../';
-import PageControl from '../page-control';
-import Modal from '../../modal';
 
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
-		const wrapper = shallow( <Guide /> );
-		expect( wrapper.isEmptyRender() ).toBe( true );
+		render( <Guide pages={ [] } /> );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders one page at a time', () => {
-		const wrapper = shallow(
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -25,11 +24,14 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		expect( wrapper.find( 'p' ) ).toHaveLength( 1 );
+
+		expect( screen.queryByRole( 'dialog' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 1' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'hides back button and shows forward button on the first page', () => {
-		const wrapper = shallow(
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -37,20 +39,23 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		expect( wrapper.find( PageControl ).prop( 'currentPage' ) ).toBe( 0 );
-		expect( wrapper.find( '.components-guide__back-button' ) ).toHaveLength(
-			0
-		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).not.toBeInTheDocument();
 		expect(
-			wrapper.find( '.components-guide__forward-button' )
-		).toHaveLength( 1 );
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).toBeVisible();
 		expect(
-			wrapper.find( '.components-guide__finish-button' )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'shows back button and shows finish button on the last page', () => {
-		const wrapper = shallow(
+	it( 'shows back button and shows finish button on the last page', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render(
 			<Guide
 				pages={ [
 					{ content: <p>Page 1</p> },
@@ -58,47 +63,59 @@ describe( 'Guide', () => {
 				] }
 			/>
 		);
-		wrapper.find( '.components-guide__forward-button' ).simulate( 'click' );
-		expect( wrapper.find( PageControl ).prop( 'currentPage' ) ).toBe( 1 );
-		expect( wrapper.find( '.components-guide__back-button' ) ).toHaveLength(
-			1
-		);
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Page 2' ) ).toBeVisible();
+
 		expect(
-			wrapper.find( '.components-guide__forward-button' )
-		).toHaveLength( 0 );
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).toBeVisible();
 		expect(
-			wrapper.find( '.components-guide__finish-button' )
-		).toHaveLength( 1 );
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).toBeVisible();
 	} );
 
 	it( "doesn't display the page control if there is only one page", () => {
-		const wrapper = shallow(
-			<Guide pages={ [ { content: <p>Page 1</p> } ] } />
-		);
-		expect( wrapper.find( PageControl ).exists() ).toBeFalsy();
+		render( <Guide pages={ [ { content: <p>Page 1</p> } ] } /> );
+		expect(
+			screen.queryByRole( 'list', { name: 'Guide controls' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'calls onFinish when the finish button is clicked', () => {
+	it( 'calls onFinish when the finish button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onFinish = jest.fn();
-		const wrapper = shallow(
+		render(
 			<Guide
 				onFinish={ onFinish }
 				pages={ [ { content: <p>Page 1</p> } ] }
 			/>
 		);
-		wrapper.find( '.components-guide__finish-button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button', { name: 'Finish' } ) );
+
 		expect( onFinish ).toHaveBeenCalled();
 	} );
 
-	it( 'calls onFinish when the modal is closed', () => {
+	it( 'calls onFinish when the modal is closed', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onFinish = jest.fn();
-		const wrapper = shallow(
+		render(
 			<Guide
 				onFinish={ onFinish }
 				pages={ [ { content: <p>Page 1</p> } ] }
 			/>
 		);
-		wrapper.find( Modal ).prop( 'onRequestClose' )();
+
+		await user.keyboard( '[Escape]' );
+
 		expect( onFinish ).toHaveBeenCalled();
 	} );
 } );

package/src/guide/test/page-control.js

@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -15,29 +11,30 @@ import PageControl from '../page-control';
 
 describe( 'PageControl', () => {
 	it( 'renders an empty list when there are no pages', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 0 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 0 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 0 } /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a button for each page', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 5 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 5 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 5 } /> );
+		expect( screen.getAllByRole( 'button' ) ).toHaveLength( 5 );
 	} );
 
-	it( 'sets the current page when a button is clicked', () => {
+	it( 'sets the current page when a button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const setCurrentPage = jest.fn();
-		const wrapper = shallow(
+		render(
 			<PageControl
 				currentPage={ 0 }
 				numberOfPages={ 2 }
 				setCurrentPage={ setCurrentPage }
 			/>
 		);
-		wrapper.find( Button ).at( 1 ).simulate( 'click' );
+
+		await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
 		expect( setCurrentPage ).toHaveBeenCalledWith( 1 );
 	} );
 } );

package/src/higher-order/with-notices/test/index.js

@@ -5,6 +5,7 @@ import {
 	act,
 	render,
 	fireEvent,
+	screen,
 	waitForElementToBeRemoved,
 	within,
 } from '@testing-library/react';
@@ -145,10 +146,11 @@ describe( 'withNotices rendering', () => {
 	it( 'should display notices with functioning dismissal triggers', async () => {
 		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
 		const notices = noticesFrom( messages );
-		const { container, getAllByLabelText } = render(
+		const { container } = render(
 			<TestComponent notifications={ notices } />
 		);
-		const [ buttonRemoveFirst ] = getAllByLabelText( stockDismissText );
+		const [ buttonRemoveFirst ] =
+			screen.getAllByLabelText( stockDismissText );
 		const getRemovalTarget = () =>
 			within( container ).getByText(
 				// The last item corresponds to the first notice in the DOM.

package/src/higher-order/with-spoken-messages/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies

package/src/index.js

@@ -30,7 +30,10 @@ export {
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
-export { default as __experimentalBoxControl } from './box-control';
+export {
+	default as __experimentalBoxControl,
+	applyValueToSides as __experimentalApplyValueToSides,
+} from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export {
@@ -66,6 +69,7 @@ export { default as Draggable } from './draggable';
 export { default as DropZone } from './drop-zone';
 export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
+export { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';
 export { default as DropdownMenu } from './dropdown-menu';
 export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
 export { Elevation as __experimentalElevation } from './elevation';
@@ -91,6 +95,8 @@ export {
 	Item as __experimentalItem,
 } from './item-group';
 export { default as __experimentalInputControl } from './input-control';
+export { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';
+export { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';

package/src/input-control/index.tsx

@@ -16,6 +16,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
+import { space } from '../ui/utils/space';
 import { useDraft } from './utils';
 
 const noop = () => {};
@@ -29,6 +30,7 @@ function useUniqueId( idProp?: string ) {
 
 export function UnforwardedInputControl(
 	{
+		__next36pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -62,6 +64,7 @@ export function UnforwardedInputControl(
 
 	return (
 		<InputBase
+			__next36pxDefaultSize={ __next36pxDefaultSize }
 			__unstableInputWidth={ __unstableInputWidth }
 			className={ classes }
 			disabled={ disabled }
@@ -78,6 +81,7 @@ export function UnforwardedInputControl(
 		>
 			<InputField
 				{ ...props }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
 				className="components-input-control__input"
 				disabled={ disabled }
 				id={ id }
@@ -85,6 +89,8 @@ export function UnforwardedInputControl(
 				isPressEnterToChange={ isPressEnterToChange }
 				onKeyDown={ onKeyDown }
 				onValidate={ onValidate }
+				paddingInlineStart={ prefix ? space( 2 ) : undefined }
+				paddingInlineEnd={ suffix ? space( 2 ) : undefined }
 				ref={ ref }
 				setIsFocused={ setIsFocused }
 				size={ size }