@wordpress/components 19.12.0 → 19.15.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

@@ -1,14 +1,10 @@
 .components-form-token-field__input-container {
 	@include input-control();
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05*0.5 $grid-unit-05;
+	padding: 0;
 	cursor: text;
 
-
 	&.is-disabled {
 		background: $gray-300;
 		border-color: $gray-300;
@@ -67,7 +63,6 @@
 .components-form-token-field__token {
 	font-size: $default-font-size;
 	display: flex;
-	margin: 2px 4px 2px 0;
 	color: $gray-900;
 	max-width: 100%;
 
@@ -94,7 +89,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 +102,7 @@
 			position: absolute;
 			top: 1px;
 			right: 0;
+			padding: 0;
 		}
 
 		&.is-success {
@@ -179,7 +175,7 @@
 	@include reduce-motion("transition");
 	list-style: none;
 	border-top: $border-width solid $gray-700;
-	margin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05);
+	margin: 0;
 	padding: 0;
 }
 

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

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+type TokensAndInputWrapperProps = {
+	__next36pxDefaultSize: boolean;
+	hasTokens: boolean;
+};
+
+const deprecatedPaddings = ( {
+	__next36pxDefaultSize,
+	hasTokens,
+}: TokensAndInputWrapperProps ) =>
+	! __next36pxDefaultSize &&
+	css`
+		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
+		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
+	`;
+
+export const TokensAndInputWrapperFlex = styled( Flex )`
+	padding: 5px ${ space( 1 ) };
+
+	${ deprecatedPaddings }
+`;

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

@@ -4,55 +4,69 @@
 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 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 = window.setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
+
+			return () => {
+				if ( id !== undefined ) {
+					window.clearTimeout( id );
+				}
+			};
 		},
 		[ selectedIndex, scrollIntoView ]
 	);
 
-	const handleHover = ( suggestion ) => {
+	const handleHover = ( suggestion: T ) => {
 		return () => {
 			if ( ! scrollingIntoView ) {
 				onHover?.( suggestion );
@@ -60,39 +74,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 +129,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 +158,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;