@wordpress/components 19.11.0 → 19.14.0

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

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormTokenField from '../';
+
+const meta: ComponentMeta< typeof FormTokenField > = {
+	component: FormTokenField,
+	title: 'Components/FormTokenField',
+	argTypes: {
+		value: {
+			control: { type: null },
+		},
+		__experimentalValidateInput: {
+			control: { type: null },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const continents = [
+	'Africa',
+	'America',
+	'Antarctica',
+	'Asia',
+	'Europe',
+	'Oceania',
+];
+
+const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
+	...args
+} ) => {
+	const [ selectedContinents, setSelectedContinents ] = useState<
+		ComponentProps< typeof FormTokenField >[ 'value' ]
+	>( [] );
+
+	return (
+		<FormTokenField
+			{ ...args }
+			value={ selectedContinents }
+			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+Default.args = {
+	label: 'Type a continent',
+	suggestions: continents,
+};
+
+export const Async: ComponentStory< typeof FormTokenField > = ( {
+	suggestions,
+	...args
+} ) => {
+	const [ selectedContinents, setSelectedContinents ] = useState<
+		ComponentProps< typeof FormTokenField >[ 'value' ]
+	>( [] );
+	const [ availableContinents, setAvailableContinents ] = useState<
+		string[]
+	>( [] );
+
+	const searchContinents = ( input: string ) => {
+		const timeout = setTimeout( () => {
+			const available = ( suggestions || [] ).filter( ( continent ) =>
+				continent.toLowerCase().includes( input.toLowerCase() )
+			);
+			setAvailableContinents( available );
+		}, 1000 );
+
+		return () => clearTimeout( timeout );
+	};
+
+	return (
+		<FormTokenField
+			{ ...args }
+			value={ selectedContinents }
+			suggestions={ availableContinents }
+			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+			onInputChange={ searchContinents }
+		/>
+	);
+};
+Async.args = {
+	label: 'Type a continent',
+	suggestions: continents,
+};

package/src/form-token-field/style.scss

@@ -94,7 +94,7 @@
 
 	&.is-borderless {
 		position: relative;
-		padding: 0 16px 0 0;
+		padding: 0 24px 0 0;
 
 		.components-form-token-field__token-text {
 			background: transparent;
@@ -107,6 +107,7 @@
 			position: absolute;
 			top: 1px;
 			right: 0;
+			padding: 0;
 		}
 
 		&.is-success {

package/src/form-token-field/{suggestions-list.js → suggestions-list.tsx}

@@ -4,55 +4,71 @@
 import { map } from 'lodash';
 import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
+import type { MouseEventHandler } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
 
-const emptyList = Object.freeze( [] );
+/**
+ * Internal dependencies
+ */
+import type { SuggestionsListProps } from './types';
 
-const handleMouseDown = ( e ) => {
+const { setTimeout, clearTimeout } = window;
+
+const handleMouseDown: MouseEventHandler = ( e ) => {
 	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
 };
 
-function SuggestionsList( {
+export function SuggestionsList< T extends string | { value: string } >( {
 	selectedIndex,
 	scrollIntoView,
-	match = '',
+	match,
 	onHover,
 	onSelect,
-	suggestions = emptyList,
+	suggestions = [],
 	displayTransform,
 	instanceId,
-	setTimeout,
-} ) {
+}: SuggestionsListProps< T > ) {
 	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
-	const listRef = useRefEffect(
+	const listRef = useRefEffect< HTMLUListElement >(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
+			let id: number;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
 				listNode.children[ selectedIndex ]
 			) {
 				setScrollingIntoView( true );
-				scrollView( listNode.children[ selectedIndex ], listNode, {
-					onlyScrollIfNeeded: true,
-				} );
-				setTimeout( () => {
+				scrollView(
+					listNode.children[ selectedIndex ] as HTMLLIElement,
+					listNode,
+					{
+						onlyScrollIfNeeded: true,
+					}
+				);
+				id = setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
+
+			return () => {
+				if ( id !== undefined ) {
+					clearTimeout( id );
+				}
+			};
 		},
 		[ selectedIndex, scrollIntoView ]
 	);
 
-	const handleHover = ( suggestion ) => {
+	const handleHover = ( suggestion: T ) => {
 		return () => {
 			if ( ! scrollingIntoView ) {
 				onHover?.( suggestion );
@@ -60,39 +76,38 @@ function SuggestionsList( {
 		};
 	};
 
-	const handleClick = ( suggestion ) => {
+	const handleClick = ( suggestion: T ) => {
 		return () => {
 			onSelect?.( suggestion );
 		};
 	};
 
-	const computeSuggestionMatch = ( suggestion ) => {
-		const matchText = displayTransform( match || '' ).toLocaleLowerCase();
+	const computeSuggestionMatch = ( suggestion: T ) => {
+		const matchText = displayTransform( match ).toLocaleLowerCase();
 		if ( matchText.length === 0 ) {
 			return null;
 		}
 
-		suggestion = displayTransform( suggestion );
-		const indexOfMatch = suggestion
+		const transformedSuggestion = displayTransform( suggestion );
+		const indexOfMatch = transformedSuggestion
 			.toLocaleLowerCase()
 			.indexOf( matchText );
 
 		return {
-			suggestionBeforeMatch: suggestion.substring( 0, indexOfMatch ),
-			suggestionMatch: suggestion.substring(
+			suggestionBeforeMatch: transformedSuggestion.substring(
+				0,
+				indexOfMatch
+			),
+			suggestionMatch: transformedSuggestion.substring(
 				indexOfMatch,
 				indexOfMatch + matchText.length
 			),
-			suggestionAfterMatch: suggestion.substring(
+			suggestionAfterMatch: transformedSuggestion.substring(
 				indexOfMatch + matchText.length
 			),
 		};
 	};
 
-	// We set `tabIndex` here because otherwise Firefox sets focus on this
-	// div when tabbing off of the input in `TokenField` -- not really sure
-	// why, since usually a div isn't focusable by default
-	// TODO does this still apply now that it's a <ul> and not a <div>?
 	return (
 		<ul
 			ref={ listRef }
@@ -116,8 +131,9 @@ function SuggestionsList( {
 						role="option"
 						className={ className }
 						key={
-							suggestion?.value
-								? suggestion.value
+							typeof suggestion === 'object' &&
+							'value' in suggestion
+								? suggestion?.value
 								: displayTransform( suggestion )
 						}
 						onMouseDown={ handleMouseDown }
@@ -144,4 +160,4 @@ function SuggestionsList( {
 	);
 }
 
-export default withSafeTimeout( SuggestionsList );
+export default SuggestionsList;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { filter, map } from 'lodash';
 import TestUtils, { act } from 'react-dom/test-utils';
 import ReactDOM from 'react-dom';
 
@@ -10,7 +9,6 @@ import ReactDOM from 'react-dom';
  */
 import fixtures from './lib/fixtures';
 import TokenFieldWrapper from './lib/token-field-wrapper';
-import TokenInput from '../token-input';
 
 /**
  * Module variables
@@ -57,7 +55,7 @@ describe( 'FormTokenField', () => {
 		const textNodes = wrapperElement().querySelectorAll(
 			'.components-form-token-field__token-text span[aria-hidden]'
 		);
-		return map( textNodes, ( node ) => node.innerHTML );
+		return Array.from( textNodes ).map( ( node ) => node.innerHTML );
 	}
 
 	function getSuggestionsText( selector ) {
@@ -65,7 +63,7 @@ describe( 'FormTokenField', () => {
 			selector || '.components-form-token-field__suggestion'
 		);
 
-		return map( suggestionNodes, getSuggestionNodeText );
+		return Array.from( suggestionNodes ).map( getSuggestionNodeText );
 	}
 
 	function getSuggestionNodeText( node ) {
@@ -78,13 +76,11 @@ describe( 'FormTokenField', () => {
 		// match).
 		const div = document.createElement( 'div' );
 		div.innerHTML = node.querySelector( 'span' ).outerHTML;
-		return map(
-			filter(
-				div.firstChild.childNodes,
+		return Array.from( div.firstChild.childNodes )
+			.filter(
 				( childNode ) => childNode.nodeType !== childNode.COMMENT_NODE
-			),
-			( childNode ) => childNode.textContent
-		);
+			)
+			.map( ( childNode ) => childNode.textContent );
 	}
 
 	function getSelectedSuggestion() {
@@ -106,8 +102,9 @@ describe( 'FormTokenField', () => {
 				wrapper,
 				'components-form-token-field__input'
 			);
+
 		textInputComponent = () =>
-			TestUtils.findRenderedComponentWithType( wrapper, TokenInput );
+			TestUtils.findRenderedDOMComponentWithTag( wrapper, 'input' );
 		/* eslint-enable react/no-find-dom-node */
 		TestUtils.Simulate.focus( textInputElement() );
 	}
@@ -157,7 +154,9 @@ describe( 'FormTokenField', () => {
 				isExpanded: true,
 			} );
 			expect( getSuggestionsText() ).toEqual( [] );
-			setText( 'th' );
+			act( () => {
+				setText( 'th' );
+			} );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.matchingSuggestions.th
 			);
@@ -184,7 +183,9 @@ describe( 'FormTokenField', () => {
 			wrapper.setState( {
 				isExpanded: true,
 			} );
-			setText( 'so' );
+			act( () => {
+				setText( 'so' );
+			} );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.matchingSuggestions.so
 			);
@@ -192,11 +193,18 @@ describe( 'FormTokenField', () => {
 
 		it( 'should match against the unescaped values of suggestions with special characters', () => {
 			setUp();
-			wrapper.setState( {
-				tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
-				isExpanded: true,
+
+			act( () => {
+				wrapper.setState( {
+					tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
+					isExpanded: true,
+				} );
 			} );
-			setText( '& S' );
+
+			act( () => {
+				setText( '& S' );
+			} );
+
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.specialSuggestions.matchAmpersandUnescaped
 			);
@@ -204,11 +212,15 @@ describe( 'FormTokenField', () => {
 
 		it( 'should match against the unescaped values of suggestions with special characters (including spaces)', () => {
 			setUp();
-			wrapper.setState( {
-				tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
-				isExpanded: true,
+			act( () => {
+				wrapper.setState( {
+					tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
+					isExpanded: true,
+				} );
+			} );
+			act( () => {
+				setText( 's &' );
 			} );
-			setText( 's &' );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.specialSuggestions.matchAmpersandSequence
 			);
@@ -216,10 +228,14 @@ describe( 'FormTokenField', () => {
 
 		it( 'should not match against the escaped values of suggestions with special characters', () => {
 			setUp();
-			setText( 'amp' );
-			wrapper.setState( {
-				tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
-				isExpanded: true,
+			act( () => {
+				setText( 'amp' );
+			} );
+			act( () => {
+				wrapper.setState( {
+					tokenSuggestions: fixtures.specialSuggestions.textUnescaped,
+					isExpanded: true,
+				} );
 			} );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.specialSuggestions.matchAmpersandEscaped
@@ -231,7 +247,9 @@ describe( 'FormTokenField', () => {
 			wrapper.setState( {
 				isExpanded: true,
 			} );
-			setText( '  at  ' );
+			act( () => {
+				setText( '  at  ' );
+			} );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.matchingSuggestions.at
 			);
@@ -242,7 +260,9 @@ describe( 'FormTokenField', () => {
 			wrapper.setState( {
 				isExpanded: true,
 			} );
-			setText( 'th' );
+			act( () => {
+				setText( 'th' );
+			} );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.matchingSuggestions.th
 			);
@@ -279,23 +299,29 @@ describe( 'FormTokenField', () => {
 
 		it( 'should re-render when suggestions prop has changed', () => {
 			setUp();
-			wrapper.setState( {
-				tokenSuggestions: [],
-				isExpanded: true,
+			act( () => {
+				wrapper.setState( {
+					tokenSuggestions: [],
+					isExpanded: true,
+				} );
 			} );
 			expect( getSuggestionsText() ).toEqual( [] );
-			setText( 'so' );
+			act( () => {
+				setText( 'so' );
+			} );
 			expect( getSuggestionsText() ).toEqual( [] );
-
-			wrapper.setState( {
-				tokenSuggestions: fixtures.specialSuggestions.default,
+			act( () => {
+				wrapper.setState( {
+					tokenSuggestions: fixtures.specialSuggestions.default,
+				} );
 			} );
 			expect( getSuggestionsText() ).toEqual(
 				fixtures.matchingSuggestions.so
 			);
-
-			wrapper.setState( {
-				tokenSuggestions: [],
+			act( () => {
+				wrapper.setState( {
+					tokenSuggestions: [],
+				} );
 			} );
 			expect( getSuggestionsText() ).toEqual( [] );
 		} );
@@ -310,18 +336,22 @@ describe( 'FormTokenField', () => {
 
 		it( 'should not allow adding whitespace tokens with Tab', () => {
 			setUp();
-			setText( '   ' );
+			act( () => {
+				setText( '   ' );
+			} );
 			sendKeyDown( keyCodes.tab );
 			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar' ] );
 		} );
 
 		it( 'should add a token when Enter pressed', () => {
 			setUp();
-			setText( 'baz' );
+			act( () => {
+				setText( 'baz' );
+			} );
 			sendKeyDown( keyCodes.enter );
 			expect( wrapper.state.tokens ).toEqual( [ 'foo', 'bar', 'baz' ] );
 			const textNode = textInputComponent();
-			expect( textNode.props.value ).toBe( '' );
+			expect( textNode.value ).toBe( '' );
 		} );
 
 		it( 'should not allow adding blank tokens with Enter', () => {

package/src/form-token-field/test/lib/token-field-wrapper.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import fixtures from './fixtures';
+import type { FormTokenFieldProps } from '../../types';
+import FormTokenField from '../../';
+
+const {
+	specialSuggestions: { default: suggestions },
+} = fixtures;
+
+function unescapeAndFormatSpaces( str: string ) {
+	const nbsp = String.fromCharCode( 160 );
+	const escaped = new DOMParser().parseFromString( str, 'text/html' );
+	return escaped.documentElement.textContent?.replace( / /g, nbsp ) ?? '';
+}
+
+class TokenFieldWrapper extends Component<
+	FormTokenFieldProps,
+	{
+		tokenSuggestions: ComponentProps<
+			typeof FormTokenField
+		>[ 'suggestions' ];
+		tokens: ComponentProps< typeof FormTokenField >[ 'value' ];
+		isExpanded: boolean;
+	}
+> {
+	constructor( props: FormTokenFieldProps ) {
+		super( props );
+		this.state = {
+			tokenSuggestions: suggestions,
+			tokens: Object.freeze( [ 'foo', 'bar' ] ) as string[],
+			isExpanded: false,
+		};
+		this.onTokensChange = this.onTokensChange.bind( this );
+	}
+
+	render() {
+		return (
+			<FormTokenField
+				suggestions={
+					this.state.isExpanded
+						? this.state.tokenSuggestions
+						: undefined
+				}
+				value={ this.state.tokens }
+				displayTransform={ unescapeAndFormatSpaces }
+				onChange={ this.onTokensChange }
+				{ ...this.props }
+			/>
+		);
+	}
+
+	onTokensChange(
+		value: ComponentProps< typeof FormTokenField >[ 'value' ]
+	) {
+		this.setState( { tokens: value } );
+	}
+}
+
+export default TokenFieldWrapper;

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

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { ChangeEvent, ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { TokenInputProps } from './types';
+
+export function UnForwardedTokenInput(
+	props: WordPressComponentProps< TokenInputProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
+) {
+	const {
+		value,
+		isExpanded,
+		instanceId,
+		selectedSuggestionIndex,
+		className,
+		onChange,
+		...restProps
+	} = props;
+
+	const size = value ? value.length + 1 : 0;
+
+	const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
+		if ( onChange ) {
+			onChange( {
+				value: event.target.value,
+			} );
+		}
+	};
+
+	return (
+		<input
+			ref={ ref }
+			id={ `components-form-token-input-${ instanceId }` }
+			type="text"
+			{ ...restProps }
+			value={ value || '' }
+			onChange={ onChangeHandler }
+			size={ size }
+			className={ classnames(
+				className,
+				'components-form-token-field__input'
+			) }
+			autoComplete="off"
+			role="combobox"
+			aria-expanded={ isExpanded }
+			aria-autocomplete="list"
+			aria-owns={
+				isExpanded
+					? `components-form-token-suggestions-${ instanceId }`
+					: undefined
+			}
+			aria-activedescendant={
+				selectedSuggestionIndex !== -1
+					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
+					: undefined
+			}
+			aria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }
+		/>
+	);
+}
+
+export const TokenInput = forwardRef( UnForwardedTokenInput );
+
+export default TokenInput;

package/src/form-token-field/{token.js → token.tsx}

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,9 @@ import { closeSmall } from '@wordpress/icons';
  */
 import Button from '../button';
 import { VisuallyHidden } from '../visually-hidden';
+import type { TokenProps } from './types';
+
+const noop = () => {};
 
 export default function Token( {
 	value,
@@ -30,7 +32,7 @@ export default function Token( {
 	messages,
 	termPosition,
 	termsCount,
-} ) {
+}: TokenProps ) {
 	const instanceId = useInstanceId( Token );
 	const tokenClasses = classnames( 'components-form-token-field__token', {
 		'is-error': 'error' === status,