@wordpress/components 23.1.0 → 23.3.0

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

@@ -1,3 +1,5 @@
+/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectTokensToBeInTheDocument", "expectTokensNotToBeInTheDocument", "expectVisibleSuggestionsToBe", "expectEscapedProperly"] }] */
+
 /**
  * External dependencies
  */
@@ -21,8 +23,6 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
-jest.useFakeTimers();
-
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
@@ -85,6 +85,17 @@ const expectTokensNotToBeInTheDocument = ( tokensText: string[] ) => {
 	);
 };
 
+const expectEscapedProperly = ( tokenHtml: string ) => {
+	screen.getByText( ( _, node: Element | null ) => {
+		if ( node === null ) {
+			return false;
+		}
+
+		// This is hacky, but it's a way we can check exactly the output HTML
+		return node.innerHTML === tokenHtml;
+	} );
+};
+
 const expectVisibleSuggestionsToBe = (
 	listElement: HTMLElement,
 	suggestionsText: string[]
@@ -109,9 +120,7 @@ function unescapeAndFormatSpaces( str: string ) {
 describe( 'FormTokenField', () => {
 	describe( 'basic usage', () => {
 		it( "should add tokens with the input's value when pressing the enter key", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -136,9 +145,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should add a token with the input's value when pressing the comma key", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -154,9 +161,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should add a token with the input value when pressing the space key and the `tokenizeOnSpace` prop is `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -200,9 +205,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should not add a token with the input's value when pressing the tab key", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -218,9 +221,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should remove the last token when pressing the backspace key', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -248,9 +249,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should remove a token when clicking the token\'s "remove" button', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -292,9 +291,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should remove a token when by focusing on the token\'s "remove" button and pressing space bar', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -329,9 +326,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not add a new token if a token with the same value already exists', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -358,9 +353,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not add a new token if the text input is blank', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -380,9 +373,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow moving the cursor through the tokens when pressing the arrow keys, and should remove the token in front of the cursor when pressing the delete key', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -509,9 +500,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should fire the `onFocus` callback when the input is focused', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onFocusSpy = jest.fn();
 
@@ -533,9 +522,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should fire the `onInputChange` callback when the input's value changes", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onInputChangeSpy = jest.fn();
 
@@ -602,9 +589,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should use the value of the `placeholder` prop as the input's placeholder only when there are no tokens", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -633,9 +618,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should handle accents and special characters in tokens and input value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -680,9 +663,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should render suggestions when receiving focus if the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onFocusSpy = jest.fn();
 
@@ -725,9 +706,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not render suggestions if the text input is not matching any of the suggestions', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'White', 'Pearl', 'Alabaster' ];
 
@@ -742,9 +721,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should render the matching suggestions only if the text input has the minimum length', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Yellow', 'Canary', 'Gold', 'Blonde' ];
 
@@ -769,9 +746,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not render a matching suggestion if a token with the same value has already been added', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -794,9 +769,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow the user to use the keyboard to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -875,9 +848,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow the user to use the mouse to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -947,9 +918,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should hide the suggestion list when the Escape key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -982,9 +951,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'matches the search text with the suggestions in a case-insensitive way', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Cinnamon', 'Tawny', 'Mocha' ];
 
@@ -1003,9 +970,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should show, at most, a number of suggestions equals to the value of the `maxSuggestions` prop', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [
 				'Ablaze',
@@ -1053,9 +1018,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should match the search text against the unescaped values of suggestions with special characters (including spaces)', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1096,9 +1059,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should re-render if suggestions change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Aluminum', 'Silver', 'Bronze' ];
 
@@ -1119,9 +1080,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should automatically select the first matching suggestions when the `__experimentalAutoSelectFirstMatch` prop is set to `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Walnut', 'Hazelnut', 'Pecan' ];
 
@@ -1162,9 +1121,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow to render custom suggestion items via the `__experimentalRenderItem` prop', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Wood', 'Stone', 'Metal' ];
 
@@ -1195,9 +1152,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'tokens as objects', () => {
 		it( 'should accept tokens in their object format', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1237,9 +1192,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should trigger mouse callbacks if the `onMouseEnter` and/or the `onMouseLeave` properties are set on a token data object', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onMouseEnterSpy = jest.fn();
 			const onMouseLeaveSpy = jest.fn();
@@ -1293,21 +1246,35 @@ describe( 'FormTokenField', () => {
 			expect( screen.getByTitle( 'España' ) ).toBeVisible();
 		} );
 
-		it( 'should be still used to filter out duplicate suggestions', () => {
+		it( 'should be still used to filter out duplicate suggestions', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<FormTokenFieldWithState
 					__experimentalExpandOnFocus
-					initialValue={ [ { value: 'France' }, { value: 'Spain' } ] }
+					initialValue={ [
+						{ value: 'Slovenia' },
+						{ value: 'Spain' },
+					] }
+					suggestions={ [ 'Slovenia', 'Slovakia', 'Sweden' ] }
 				/>
 			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Typing `slov` will match both `Slovenia` and `Slovakia`.
+			await user.type( input, 'slov' );
+
+			// However, `Slovenia` is already selected.
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Slovakia',
+			] );
 		} );
 	} );
 
 	describe( 'saveTransform', () => {
 		it( "by default, it should trim the input's value from extra white spaces before attempting to add it as a token", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1371,9 +1338,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should allow to modify the input's value when saving it as a token", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1436,9 +1401,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'is applied to the search value when matching it against the list of suggestions', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1476,9 +1439,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'displayTransform', () => {
 		it( 'should allow to modify the text rendered in the browser for each token', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1534,9 +1495,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "is applied to each suggestions, but doesn't influence the matching against the search value", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1586,15 +1545,7 @@ describe( 'FormTokenField', () => {
 				'a&nbsp;&nbsp;&nbsp;b',
 				'i&nbsp;&lt;3&nbsp;tags',
 				'1&amp;2&amp;3&amp;4',
-			].forEach( ( tokenHtml ) => {
-				screen.getByText( ( _, node: Element | null ) => {
-					if ( node === null ) {
-						return false;
-					}
-
-					return node.innerHTML === tokenHtml;
-				} );
-			} );
+			].forEach( ( tokenHtml ) => expectEscapedProperly( tokenHtml ) );
 		} );
 
 		it( 'should allow to pass a function that renders tokens with special characters correctly', async () => {
@@ -1616,23 +1567,13 @@ describe( 'FormTokenField', () => {
 				'a&nbsp;&nbsp;&nbsp;b',
 				'i&nbsp;&lt;3&nbsp;tags',
 				'1&amp;2&amp;3&amp;4',
-			].forEach( ( tokenHtml ) => {
-				screen.getByText( ( _, node: Element | null ) => {
-					if ( node === null ) {
-						return false;
-					}
-
-					return node.innerHTML === tokenHtml;
-				} );
-			} );
+			].forEach( ( tokenHtml ) => expectEscapedProperly( tokenHtml ) );
 		} );
 	} );
 
 	describe( 'validation', () => {
 		it( 'should add a token only if it passes the validation set via `__experimentalValidateInput`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
@@ -1677,9 +1618,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'maxLength', () => {
 		it( 'should not allow adding new tokens beyond the value defined by the `maxLength` prop', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1747,9 +1686,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not affect tokens that were added before the limit was imposed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1792,9 +1729,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'disabled', () => {
 		it( 'should not allow adding tokens when the `disabled` prop is `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1822,9 +1757,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not allow removing tokens when the `disable` prop is `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1870,9 +1803,7 @@ describe( 'FormTokenField', () => {
 		};
 
 		it( 'should announce to assistive technology the addition of a new token', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <FormTokenFieldWithState /> );
 
@@ -1888,9 +1819,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the addition of a new token with a custom message', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <FormTokenFieldWithState messages={ customMessages } /> );
 
@@ -1906,9 +1835,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the removal of a token', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <FormTokenFieldWithState initialValue={ [ 'horse' ] } /> );
 
@@ -1923,9 +1850,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the removal of a token with a custom message', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1945,9 +1870,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the failure of a potential token to pass validation', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1967,9 +1890,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the failure of a potential token to pass validation with a custom message', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1990,9 +1911,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the result of the matching of the search text against the list of suggestions', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -2054,9 +1973,7 @@ describe( 'FormTokenField', () => {
 	// but I wasn't sure if there was a better way.
 	describe( 'aria attributes', () => {
 		it( 'should add the correct aria attributes to the input as the user interacts with it', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Pine', 'Pistachio', 'Sage' ];
 

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

@@ -73,7 +73,7 @@ export default function Token( {
 			<Button
 				className="components-form-token-field__remove-token"
 				icon={ closeSmall }
-				onClick={ ! disabled && onClick }
+				onClick={ ! disabled ? onClick : undefined }
 				label={ messages.remove }
 				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }
 			/>

package/src/gradient-picker/index.js

@@ -14,6 +14,18 @@ import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
 import { Spacer } from '../spacer';
 
+// The Multiple Origin Gradients have a `gradients` property (an array of
+// gradient objects), while Single Origin ones have a `gradient` property.
+const isMultipleOriginObject = ( obj ) =>
+	Array.isArray( obj.gradients ) && ! ( 'gradient' in obj );
+
+const isMultipleOriginArray = ( arr ) => {
+	return (
+		arr.length > 0 &&
+		arr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )
+	);
+};
+
 function SingleOrigin( {
 	className,
 	clearGradient,
@@ -105,10 +117,9 @@ export default function GradientPicker( {
 		() => onChange( undefined ),
 		[ onChange ]
 	);
-	const Component =
-		gradients?.length && gradients[ 0 ].gradients
-			? MultipleOrigin
-			: SingleOrigin;
+	const Component = isMultipleOriginArray( gradients )
+		? MultipleOrigin
+		: SingleOrigin;
 
 	if ( ! __nextHasNoMargin ) {
 		deprecated( 'Outer margin styles for wp.components.GradientPicker', {