@wordpress/components 19.17.0 → 20.0.1-next.d6164808d3.0

package/src/form-token-field/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, clone, uniq, map, difference, some } from 'lodash';
+import { last, clone, map, some } from 'lodash';
 import classnames from 'classnames';
 import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
 
@@ -78,6 +78,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
 		__next36pxDefaultSize = false,
+		__experimentalAutoSelectFirstMatch = false,
 	} = props;
 
 	const instanceId = useInstanceId( FormTokenField );
@@ -409,12 +410,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	}
 
 	function addNewTokens( tokens: string[] ) {
-		const tokensToAdd = uniq(
-			tokens
-				.map( saveTransform )
-				.filter( Boolean )
-				.filter( ( token ) => ! valueContainsToken( token ) )
-		);
+		const tokensToAdd = [
+			...new Set(
+				tokens
+					.map( saveTransform )
+					.filter( Boolean )
+					.filter( ( token ) => ! valueContainsToken( token ) )
+			),
+		];
 
 		if ( tokensToAdd.length > 0 ) {
 			const newValue = clone( value );
@@ -475,7 +478,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		} );
 
 		if ( match.length === 0 ) {
-			_suggestions = difference( _suggestions, normalizedValue );
+			_suggestions = _suggestions.filter(
+				( suggestion ) => ! normalizedValue.includes( suggestion )
+			);
 		} else {
 			match = match.toLocaleLowerCase();
 
@@ -534,8 +539,17 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		);
 
 		if ( resetSelectedSuggestion ) {
-			setSelectedSuggestionIndex( -1 );
-			setSelectedSuggestionScroll( false );
+			if (
+				__experimentalAutoSelectFirstMatch &&
+				inputHasMinimumChars &&
+				hasMatchingSuggestions
+			) {
+				setSelectedSuggestionIndex( 0 );
+				setSelectedSuggestionScroll( true );
+			} else {
+				setSelectedSuggestionIndex( -1 );
+				setSelectedSuggestionScroll( false );
+			}
 		}
 
 		if ( inputHasMinimumChars ) {

package/src/form-token-field/stories/index.tsx

@@ -102,6 +102,14 @@ Async.args = {
 	suggestions: continents,
 };
 
+export const DropdownSelector: ComponentStory< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+DropdownSelector.args = {
+	...Default.args,
+	__experimentalExpandOnFocus: true,
+	__experimentalAutoSelectFirstMatch: true,
+};
+
 /**
  * The rendered output of each suggestion can be customized by passing a
  * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature

package/src/form-token-field/test/index.js

@@ -396,6 +396,37 @@ describe( 'FormTokenField', () => {
 			sendKeyDown( keyCodes.enter );
 			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
 		} );
+
+		it( 'should automatically select the first matching suggestions when __experimentalAutoSelectFirstMatch is set to true', () => {
+			setUp( { __experimentalAutoSelectFirstMatch: true } );
+
+			wrapper.setState( {
+				isExpanded: true,
+			} );
+
+			expect( getSuggestionsText() ).toEqual( [] );
+
+			const searchText = 'so';
+
+			act( () => {
+				setText( searchText );
+			} );
+
+			const expectedFirstMatchTokens =
+				fixtures.matchingSuggestions[ searchText ][ 0 ];
+
+			expect( getSelectedSuggestion() ).toEqual(
+				expectedFirstMatchTokens
+			);
+
+			sendKeyDown( keyCodes.enter );
+
+			expect( wrapper.state.tokens ).toEqual( [
+				'foo',
+				'bar',
+				expectedFirstMatchTokens.join( '' ),
+			] );
+		} );
 	} );
 
 	describe( 'removing tokens', () => {

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

@@ -158,6 +158,13 @@ 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.
 	 */

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