Post author dropdown: add accessible-autocomplete

assets/stylesheets/_z-index.scss

@@ -48,6 +48,9 @@ $z-layers: (
 	".components-drop-zone": 100,
 	".components-drop-zone__content": 110,
 
+	// Autocomplete dropdown shows over other sidebar elements.
+	".autocomplete__menu--overlay": 100,
+
 	// The block mover, particularly in nested contexts,
 	// should overlap most block content.
 	".editor-block-list__block.is-{selected,hovered} .editor-block-mover": 80,

package.json

@@ -76,6 +76,7 @@
 		"@wordpress/npm-package-json-lint-config": "file:packages/npm-package-json-lint-config",
 		"@wordpress/postcss-themes": "file:packages/postcss-themes",
 		"@wordpress/scripts": "file:packages/scripts",
+		"accessible-autocomplete": "1.6.2",
 		"benchmark": "2.1.4",
 		"browserslist": "4.4.1",
 		"chalk": "2.4.1",

packages/core-data/src/resolvers.js

@@ -26,7 +26,7 @@ import { apiFetch } from './controls';
  * Requests authors from the REST API.
  */
 export function* getAuthors() {
-	const users = yield apiFetch( { path: '/wp/v2/users/?who=authors&per_page=-1' } );
+	const users = yield apiFetch( { path: '/wp/v2/users/?who=authors&per_page=100' } );
 	yield receiveUserQuery( 'authors', users );
 }
 

packages/editor/src/components/autocompleters/user.js

@@ -15,9 +15,9 @@ export default {
 	options( search ) {
 		let payload = '';
 		if ( search ) {
-			payload = '?search=' + encodeURIComponent( search );
+			payload = `?search=${ encodeURIComponent( search ) }`;
 		}
-		return apiFetch( { path: '/wp/v2/users' + payload } );
+		return apiFetch( { path: `/wp/v2/users${ payload }` } );
 	},
 	isDebounced: true,
 	getOptionKeywords( user ) {

packages/editor/src/components/post-author/index.js

@@ -1,10 +1,17 @@
+/**
+ * External dependencies
+ */
+import Autocomplete from 'accessible-autocomplete/react';
+import { debounce } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { sprintf, __, _n } from '@wordpress/i18n';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -16,34 +23,145 @@ export class PostAuthor extends Component {
 		super( ...arguments );
 
 		this.setAuthorId = this.setAuthorId.bind( this );
+		this.suggestAuthor = this.suggestAuthor.bind( this );
+		this.getCurrentAuthor = this.getCurrentAuthor.bind( this );
+		this.resolveResults = this.resolveResults.bind( this );
+		this.requestResults = debounce( ( query, populateResults ) => {
+			const payload = '?search=' + encodeURIComponent( query );
+			apiFetch( { path: `/wp/v2/users${ payload }` } ).then( ( results ) => {
+				populateResults( this.resolveResults( results ) );
+				this.searchCache[ query ] = results;
+			} );
+		}, 300 );
+		this.searchCache = [];
+		this.state = {
+			postAuthor: false,
+		};
+	}
+
+	getInitialPostAuthor() {
+		// Get the initial author from props if available.
+		return this.props.postAuthor;
+	}
+
+	componentDidMount() {
+		const { postAuthorId, authors } = this.props;
+
+		// Load the initial post author.
+		const postAuthor = this.getInitialPostAuthor();
+		this.setState( { postAuthor } );
+
+		const authorInAuthors = authors.find( ( singleAuthor ) => {
+			return singleAuthor.id === postAuthorId;
+		} );
+
+		// Set or fetch the current author.
+		if ( authorInAuthors ) {
+			this.setState( { postAuthor: authorInAuthors } );
+		} else {
+			this.getCurrentAuthor( postAuthorId );
+		}
+	}
+
+	suggestAuthor( query, populateResults ) {
+		if ( query.length < 2 ) {
+			return;
+		}
+
+		if ( this.searchCache[ query ] ) {
+			populateResults( this.resolveResults( this.searchCache[ query ] ) );
+			return;
+		}
+
+		this.requestResults( query, populateResults );
 	}
 
-	setAuthorId( event ) {
+	resolveResults( results ) {
+		this.authors = results;
+		return results.map( ( author ) => ( author.name ) );
+	}
+
+	getCurrentAuthor( authorId ) {
+		if ( ! authorId ) {
+			return;
+		}
+		apiFetch( { path: `/wp/v2/users/${ encodeURIComponent( authorId ) }` } ).then( ( results ) => {
+			this.setState( { postAuthor: results } );
+		} );
+	}
+
+	setAuthorId( selection ) {
+		if ( ! selection ) {
+			return;
+		}
 		const { onUpdateAuthor } = this.props;
-		const { value } = event.target;
-		onUpdateAuthor( Number( value ) );
+		if ( typeof selection === 'string' ) {
+			// Author name from the autocompleter.
+			const author = this.authors.find( ( singleAuthor ) => {
+				return singleAuthor.name === selection;
+			} );
+			onUpdateAuthor( Number( author.id ) );
+		} else {
+			// Author ID from the select.
+			onUpdateAuthor( Number( selection.target.value ) );
+		}
 	}
 
 	render() {
-		const { postAuthor, instanceId, authors } = this.props;
-		const selectId = 'post-author-selector-' + instanceId;
-
-		// Disable reason: A select with an onchange throws a warning
+		const { postAuthor } = this.state;
+		const { postAuthorId, instanceId, authors } = this.props;
+		const selectId = `post-author-selector-${ instanceId }`;
+		let selector;
+		if ( ! postAuthor ) {
+			return null;
+		}
 
-		/* eslint-disable jsx-a11y/no-onchange */
-		return (
-			<PostAuthorCheck>
-				<label htmlFor={ selectId }>{ __( 'Author' ) }</label>
+		if ( authors.length < 50 ) {
+			// Disable reason: A select with an onchange throws a warning.
+			/* eslint-disable jsx-a11y/no-onchange */
+			selector =
 				<select
 					id={ selectId }
-					value={ postAuthor }
-					onChange={ this.setAuthorId }
+					value={ postAuthorId }
 					className="editor-post-author__select"
+					onChange={ this.setAuthorId }
 				>
 					{ authors.map( ( author ) => (
 						<option key={ author.id } value={ author.id }>{ author.name }</option>
 					) ) }
-				</select>
+				</select>;
+		} else {
+			selector =
+				<Autocomplete
+					id={ selectId }
+					minLength={ 2 }
+					showAllValues={ true }
+					defaultValue={ postAuthor ? postAuthor.name : '' }
+					displayMenu="overlay"
+					onConfirm={ this.setAuthorId }
+					source={ this.suggestAuthor }
+					showNoResultsFound={ false }
+					tStatusQueryTooShort={ ( minQueryLength ) =>
+						// translators: %d: the number characters required to initiate an author search.
+						sprintf( __( 'Type in %d or more characters for results' ), minQueryLength )
+					}
+					tStatusNoResults={ () => __( 'No search results' ) }
+					tStatusSelectedOption={ ( selectedOption, length ) => __( `${ selectedOption } (1 of ${ length }) is selected` ) }
+					tStatusResults={ ( length, contentSelectedOption ) => {
+						return (
+							_n( '%d result is available.', '%d results are available.', length ) +
+							' ' + contentSelectedOption
+						);
+					} }
+					cssNamespace="components-post-author__autocomplete"
+
+				/>;
+		}
+
+		return (
+			<PostAuthorCheck>
+				<label htmlFor={ selectId }>{ __( 'Author' ) }</label>
+				{ selector }
 			</PostAuthorCheck>
 		);
 		/* eslint-enable jsx-a11y/no-onchange */
@@ -53,7 +171,7 @@ export class PostAuthor extends Component {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			postAuthor: select( 'core/editor' ).getEditedPostAttribute( 'author' ),
+			postAuthorId: select( 'core/editor' ).getEditedPostAttribute( 'author' ),
 			authors: select( 'core' ).getAuthors(),
 		};
 	} ),

packages/editor/src/components/post-author/style.scss

@@ -0,0 +1,94 @@
+.components-post-author__autocomplete__wrapper {
+	position: relative;
+}
+
+.components-post-author__autocomplete__hint,
+.components-post-author__autocomplete__input {
+	-webkit-appearance: none;
+	border: 2px solid;
+	border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+	width: 100%;
+}
+
+.components-post-author__autocomplete__input {
+	background-color: transparent;
+	position: relative;
+}
+
+.components-post-author__autocomplete__hint {
+	position: absolute;
+}
+
+.components-post-author__autocomplete__dropdown-arrow-down {
+	display: none;
+}
+
+.components-post-author__autocomplete__menu {
+	background: $white;
+	border-top: 0;
+	color: $dark-gray-300;
+	margin: 0;
+	padding: #{$grid-size-small / 2} 0;
+	overflow-x: hidden;
+	overflow-y: auto;
+	max-height: 200px;
+	transition: all 0.15s ease-in-out;
+	width: calc(100% + 2px);
+
+	&.components-post-author__autocomplete__menu--visible {
+		display: block;
+	}
+
+	&.components-post-author__autocomplete__menu--hidden {
+		display: none;
+	}
+}
+
+.components-post-author__autocomplete__menu--overlay {
+	box-shadow: $shadow-popover;
+	border: $border-width solid $light-gray-500;
+	left: 0;
+	position: absolute;
+	top: 100%;
+	z-index: 100;
+}
+
+.components-post-author__autocomplete__menu--inline {
+	position: relative;
+}
+
+.components-post-author__autocomplete__option {
+	font-size: $default-font-size;
+	padding: #{$grid-size-small / 2} $grid-size;
+	margin-bottom: 0;
+	cursor: pointer;
+	display: block;
+	position: relative;
+
+	> * {
+		pointer-events: none;
+	}
+
+	&:hover {
+		background: $light-gray-500;
+	}
+
+	&:focus,
+	&.components-post-author__autocomplete__option--focused
+	&.components-post-author__autocomplete__option--focused:hover {
+		background: color(theme(primary) shade(15%));
+		color: $white;
+		outline: none;
+	}
+
+	&.components-post-author__autocomplete__option--no-results,
+	&.components-post-author__autocomplete__option--no-results:hover {
+		background: $white;
+		font-style: italic;
+		cursor: not-allowed;
+	}
+}

packages/editor/src/components/post-author/test/index.js

@@ -41,14 +41,23 @@ describe( 'PostAuthor', () => {
 		},
 	};
 
+	const postAuthor = [
+		{
+			id: 1,
+			name: 'admin',
+		},
+	];
+
 	describe( '#render()', () => {
 		it( 'should update author', () => {
 			const onUpdateAuthor = jest.fn();
 			const wrapper = shallow(
 				<PostAuthor
 					authors={ authors }
 					user={ user }
-					onUpdateAuthor={ onUpdateAuthor } />
+					onUpdateAuthor={ onUpdateAuthor }
+					postAuthor={ postAuthor }
+				/>
 			);
 
 			wrapper.find( 'select' ).simulate( 'change', {

packages/editor/src/style.scss

@@ -28,6 +28,7 @@
 @import "./components/page-attributes/style.scss";
 @import "./components/panel-color-settings/style.scss";
 @import "./components/plain-text/style.scss";
+@import "./components/post-author/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";