@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/src/font-size-picker/test/{util.js → utils.js}

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { isSimpleCssValue, splitValueAndUnitFromSize } from '../utils';
+import {
+	isSimpleCssValue,
+	splitValueAndUnitFromSize,
+	getToggleGroupOptions,
+} from '../utils';
 
 const simpleCSSCases = [
 	// Test integers and non-integers.
@@ -72,3 +76,75 @@ describe( 'splitValueAndUnitFromSize', () => {
 		}
 	);
 } );
+
+describe( 'getToggleGroupOptions', () => {
+	test( 'should assign t-shirt sizes by default up until the aliases length', () => {
+		const optionsArray = [
+			{
+				slug: '1',
+				size: '1',
+				name: '1',
+			},
+			{
+				slug: '2',
+				size: '2',
+				name: '2',
+			},
+			{
+				slug: '3',
+				size: '3',
+				name: '3',
+			},
+			{
+				slug: '4',
+				size: '4',
+				name: '4',
+			},
+			{
+				slug: '5',
+				size: '5',
+				name: '5',
+			},
+		];
+		expect(
+			getToggleGroupOptions( optionsArray, [
+				'S',
+				'M',
+				'L',
+				'XL',
+				'XXL',
+			] )
+		).toEqual( [
+			{
+				key: '1',
+				value: '1',
+				label: 'S',
+				name: '1',
+			},
+			{
+				key: '2',
+				value: '2',
+				label: 'M',
+				name: '2',
+			},
+			{
+				key: '3',
+				value: '3',
+				label: 'L',
+				name: '3',
+			},
+			{
+				key: '4',
+				value: '4',
+				label: 'XL',
+				name: '4',
+			},
+			{
+				key: '5',
+				value: '5',
+				label: 'XXL',
+				name: '5',
+			},
+		] );
+	} );
+} );

package/src/font-size-picker/utils.js

@@ -15,13 +15,22 @@ const CUSTOM_FONT_SIZE_OPTION = {
 };
 
 /**
- * In case we have at most five font sizes, where at least one the them
- * contain a complex css value(clamp, var, etc..) show a incremental sequence
- * of numbers as a label of the font size. We do this because complex css values
- * cannot be caluclated properly and the incremental sequence of numbers as labels
- * can help the user better mentally map the different available font sizes.
+ * In case we have at most five font sizes, show a `T-shirt size`
+ * alias as a label of the font size. The label assumes that the font sizes
+ * are ordered accordingly - from smallest to largest.
  */
-const FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];
+const FONT_SIZES_ALIASES = [
+	/* translators: S stands for 'small' and is a size label. */
+	__( 'S' ),
+	/* translators: M stands for 'medium' and is a size label. */
+	__( 'M' ),
+	/* translators: L stands for 'large' and is a size label. */
+	__( 'L' ),
+	/* translators: XL stands for 'extra large' and is a size label. */
+	__( 'XL' ),
+	/* translators: XXL stands for 'extra extra large' and is a size label. */
+	__( 'XXL' ),
+];
 
 /**
  * Helper util to split a font size to its numeric value
@@ -56,24 +65,22 @@ export function isSimpleCssValue( value ) {
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl               Whether to use a select control.
- * @param {Object[]} optionsArray                   Array of available font sizes objects.
- * @param {*}        disableCustomFontSizes         Flag that indicates if custom font sizes are disabled.
- * @param {boolean}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).
- * @return {Object[]|null} Array of font sizes in proper format for the used control.
+ * @param {boolean}  useSelectControl       Whether to use a select control.
+ * @param {Object[]} optionsArray           Array of available font sizes objects.
+ * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return {Object[]|null}                  Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
 	useSelectControl,
 	optionsArray,
-	disableCustomFontSizes,
-	optionsContainComplexCssValues
+	disableCustomFontSizes
 ) {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
 	return useSelectControl
 		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray, optionsContainComplexCssValues );
+		: getToggleGroupOptions( optionsArray );
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
@@ -91,16 +98,24 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-function getToggleGroupOptions( optionsArray, optionsContainComplexCssValues ) {
+/**
+ * Build options for the toggle group options.
+ *
+ * @param {Array}    optionsArray An array of font size options.
+ * @param {string[]} labelAliases An array of alternative labels.
+ * @return {Array}   Remapped optionsArray.
+ */
+export function getToggleGroupOptions(
+	optionsArray,
+	labelAliases = FONT_SIZES_ALIASES
+) {
 	return optionsArray.map( ( { slug, size, name }, index ) => {
-		let label = optionsContainComplexCssValues
-			? FONT_SIZES_ALIASES[ index ]
-			: size;
-		if ( ! optionsContainComplexCssValues && typeof size === 'string' ) {
-			const [ numericValue ] = splitValueAndUnitFromSize( size );
-			label = numericValue;
-		}
-		return { key: slug, value: size, label, name };
+		return {
+			key: slug,
+			value: size,
+			label: labelAliases[ index ],
+			name,
+		};
 	} );
 }
 

package/src/form-token-field/README.md

@@ -60,6 +60,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalExpandOnFocus` - If true, the suggestions list will be always expanded when the input field has the focus.
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
+-   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
 
 ## Usage
 

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';
 
@@ -12,17 +12,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
-import {
-	BACKSPACE,
-	ENTER,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	SPACE,
-	DELETE,
-	ESCAPE,
-} from '@wordpress/keycodes';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -78,6 +67,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
 		__next36pxDefaultSize = false,
+		__experimentalAutoSelectFirstMatch = false,
 	} = props;
 
 	const instanceId = useInstanceId( FormTokenField );
@@ -126,6 +116,11 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ incompleteTokenValue ] );
 
+	useEffect( () => {
+		updateSuggestions();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ __experimentalAutoSelectFirstMatch ] );
+
 	if ( disabled && isActive ) {
 		setIsActive( false );
 		setIncompleteTokenValue( '' );
@@ -178,35 +173,34 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		if ( event.defaultPrevented ) {
 			return;
 		}
-		// TODO: replace to event.code;
-		switch ( event.keyCode ) {
-			case BACKSPACE:
+		switch ( event.code ) {
+			case 'Backspace':
 				preventDefault = handleDeleteKey( deleteTokenBeforeInput );
 				break;
-			case ENTER:
+			case 'Enter':
 				preventDefault = addCurrentToken();
 				break;
-			case LEFT:
+			case 'ArrowLeft':
 				preventDefault = handleLeftArrowKey();
 				break;
-			case UP:
+			case 'ArrowUp':
 				preventDefault = handleUpArrowKey();
 				break;
-			case RIGHT:
+			case 'ArrowRight':
 				preventDefault = handleRightArrowKey();
 				break;
-			case DOWN:
+			case 'ArrowDown':
 				preventDefault = handleDownArrowKey();
 				break;
-			case DELETE:
+			case 'Delete':
 				preventDefault = handleDeleteKey( deleteTokenAfterInput );
 				break;
-			case SPACE:
+			case 'Space':
 				if ( tokenizeOnSpace ) {
 					preventDefault = addCurrentToken();
 				}
 				break;
-			case ESCAPE:
+			case 'Escape':
 				preventDefault = handleEscapeKey( event );
 				break;
 			default:
@@ -409,12 +403,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 +471,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();
 
@@ -528,14 +526,24 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			getMatchingSuggestions( incompleteTokenValue );
 		const hasMatchingSuggestions = matchingSuggestions.length > 0;
 
+		const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;
 		setIsExpanded(
-			__experimentalExpandOnFocus ||
+			shouldExpandIfFocuses ||
 				( inputHasMinimumChars && hasMatchingSuggestions )
 		);
 
 		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