@wordpress/components 19.12.0 → 19.15.0

package/build-module/form-token-field/index.js

@@ -1,17 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import { last, take, clone, uniq, map, difference, each, identity, some } from 'lodash';
+import { last, clone, uniq, map, difference, some } from 'lodash';
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+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';
 /**
@@ -20,156 +22,181 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 
 import Token from './token';
 import TokenInput from './token-input';
+import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
-import withSpokenMessages from '../higher-order/with-spoken-messages';
-const initialState = {
-  incompleteTokenValue: '',
-  inputOffsetFromEnd: 0,
-  isActive: false,
-  isExpanded: false,
-  selectedSuggestionIndex: -1,
-  selectedSuggestionScroll: false
-};
-
-class FormTokenField extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = initialState;
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onKeyPress = this.onKeyPress.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.deleteTokenBeforeInput = this.deleteTokenBeforeInput.bind(this);
-    this.deleteTokenAfterInput = this.deleteTokenAfterInput.bind(this);
-    this.addCurrentToken = this.addCurrentToken.bind(this);
-    this.onContainerTouched = this.onContainerTouched.bind(this);
-    this.renderToken = this.renderToken.bind(this);
-    this.onTokenClickRemove = this.onTokenClickRemove.bind(this);
-    this.onSuggestionHovered = this.onSuggestionHovered.bind(this);
-    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
-    this.onInputChange = this.onInputChange.bind(this);
-    this.bindInput = this.bindInput.bind(this);
-    this.bindTokensAndInput = this.bindTokensAndInput.bind(this);
-    this.updateSuggestions = this.updateSuggestions.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
+import { FlexItem } from '../flex';
+
+const identity = value => value;
+/**
+ * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome,
+ * or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.
+ *
+ * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete).
+ * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
+ *
+ * The `value` property is handled in a manner similar to controlled form components.
+ * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+ */
+
+
+export function FormTokenField(props) {
+  const {
+    autoCapitalize,
+    autoComplete,
+    maxLength,
+    placeholder,
+    label = __('Add item'),
+    className,
+    suggestions = [],
+    maxSuggestions = 100,
+    value = [],
+    displayTransform = identity,
+    saveTransform = token => token.trim(),
+    onChange = () => {},
+    onInputChange = () => {},
+    onFocus = undefined,
+    isBorderless = false,
+    disabled = false,
+    tokenizeOnSpace = false,
+    messages = {
+      added: __('Item added.'),
+      removed: __('Item removed.'),
+      remove: __('Remove item'),
+      __experimentalInvalid: __('Invalid item')
+    },
+    __experimentalExpandOnFocus = false,
+    __experimentalValidateInput = () => true,
+    __experimentalShowHowTo = true,
+    __next36pxDefaultSize = false
+  } = props;
+  const instanceId = useInstanceId(FormTokenField); // We reset to these initial values again in the onBlur
+
+  const [incompleteTokenValue, setIncompleteTokenValue] = useState('');
+  const [inputOffsetFromEnd, setInputOffsetFromEnd] = useState(0);
+  const [isActive, setIsActive] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+  const [selectedSuggestionScroll, setSelectedSuggestionScroll] = useState(false);
+  const prevSuggestions = usePrevious(suggestions);
+  const prevValue = usePrevious(value);
+  const input = useRef(null);
+  const tokensAndInput = useRef(null);
+  const debouncedSpeak = useDebounce(speak, 500);
+  useEffect(() => {
     // Make sure to focus the input when the isActive state is true.
-    if (this.state.isActive && !this.input.hasFocus()) {
-      this.input.focus();
+    if (isActive && !hasFocus()) {
+      focus();
     }
+  }, [isActive]);
+  useEffect(() => {
+    const suggestionsDidUpdate = !isShallowEqual(suggestions, prevSuggestions || []);
 
-    const {
-      suggestions,
-      value
-    } = this.props;
-    const suggestionsDidUpdate = !isShallowEqual(suggestions, prevProps.suggestions);
+    if (suggestionsDidUpdate || value !== prevValue) {
+      updateSuggestions(suggestionsDidUpdate);
+    } // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    if (suggestionsDidUpdate || value !== prevProps.value) {
-      this.updateSuggestions(suggestionsDidUpdate);
-    }
+  }, [suggestions, prevSuggestions, value, prevValue]);
+  useEffect(() => {
+    updateSuggestions(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [incompleteTokenValue]);
+
+  if (disabled && isActive) {
+    setIsActive(false);
+    setIncompleteTokenValue('');
   }
 
-  static getDerivedStateFromProps(props, state) {
-    if (!props.disabled || !state.isActive) {
-      return null;
-    }
+  function focus() {
+    var _input$current;
 
-    return {
-      isActive: false,
-      incompleteTokenValue: ''
-    };
+    (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.focus();
   }
 
-  bindInput(ref) {
-    this.input = ref;
-  }
+  function hasFocus() {
+    var _input$current2;
 
-  bindTokensAndInput(ref) {
-    this.tokensAndInput = ref;
+    return input.current === ((_input$current2 = input.current) === null || _input$current2 === void 0 ? void 0 : _input$current2.ownerDocument.activeElement);
   }
 
-  onFocus(event) {
-    const {
-      __experimentalExpandOnFocus
-    } = this.props; // If focus is on the input or on the container, set the isActive state to true.
-
-    if (this.input.hasFocus() || event.target === this.tokensAndInput) {
-      this.setState({
-        isActive: true,
-        isExpanded: !!__experimentalExpandOnFocus || this.state.isExpanded
-      });
+  function onFocusHandler(event) {
+    // If focus is on the input or on the container, set the isActive state to true.
+    if (hasFocus() || event.target === tokensAndInput.current) {
+      setIsActive(true);
+      setIsExpanded(__experimentalExpandOnFocus || isExpanded);
     } else {
       /*
        * Otherwise, focus is on one of the token "remove" buttons and we
        * set the isActive state to false to prevent the input to be
        * re-focused, see componentDidUpdate().
        */
-      this.setState({
-        isActive: false
-      });
+      setIsActive(false);
     }
 
-    if ('function' === typeof this.props.onFocus) {
-      this.props.onFocus(event);
+    if ('function' === typeof onFocus) {
+      onFocus(event);
     }
   }
 
-  onBlur() {
-    if (this.inputHasValidValue()) {
-      this.setState({
-        isActive: false
-      });
+  function onBlur() {
+    if (inputHasValidValue()) {
+      setIsActive(false);
     } else {
-      this.setState(initialState);
+      // Reset to initial state
+      setIncompleteTokenValue('');
+      setInputOffsetFromEnd(0);
+      setIsActive(false);
+      setIsExpanded(false);
+      setSelectedSuggestionIndex(-1);
+      setSelectedSuggestionScroll(false);
     }
   }
 
-  onKeyDown(event) {
+  function onKeyDown(event) {
     let preventDefault = false;
 
     if (event.defaultPrevented) {
       return;
-    }
+    } // TODO: replace to event.code;
+
 
     switch (event.keyCode) {
       case BACKSPACE:
-        preventDefault = this.handleDeleteKey(this.deleteTokenBeforeInput);
+        preventDefault = handleDeleteKey(deleteTokenBeforeInput);
         break;
 
       case ENTER:
-        preventDefault = this.addCurrentToken();
+        preventDefault = addCurrentToken();
         break;
 
       case LEFT:
-        preventDefault = this.handleLeftArrowKey();
+        preventDefault = handleLeftArrowKey();
         break;
 
       case UP:
-        preventDefault = this.handleUpArrowKey();
+        preventDefault = handleUpArrowKey();
         break;
 
       case RIGHT:
-        preventDefault = this.handleRightArrowKey();
+        preventDefault = handleRightArrowKey();
         break;
 
       case DOWN:
-        preventDefault = this.handleDownArrowKey();
+        preventDefault = handleDownArrowKey();
         break;
 
       case DELETE:
-        preventDefault = this.handleDeleteKey(this.deleteTokenAfterInput);
+        preventDefault = handleDeleteKey(deleteTokenAfterInput);
         break;
 
       case SPACE:
-        if (this.props.tokenizeOnSpace) {
-          preventDefault = this.addCurrentToken();
+        if (tokenizeOnSpace) {
+          preventDefault = addCurrentToken();
         }
 
         break;
 
       case ESCAPE:
-        preventDefault = this.handleEscapeKey(event);
+        preventDefault = handleEscapeKey(event);
         break;
 
       default:
@@ -181,13 +208,13 @@ class FormTokenField extends Component {
     }
   }
 
-  onKeyPress(event) {
-    let preventDefault = false;
+  function onKeyPress(event) {
+    let preventDefault = false; // TODO: replace to event.code;
 
     switch (event.charCode) {
       case 44:
         // Comma.
-        preventDefault = this.handleCommaKey();
+        preventDefault = handleCommaKey();
         break;
 
       default:
@@ -199,212 +226,201 @@ class FormTokenField extends Component {
     }
   }
 
-  onContainerTouched(event) {
+  function onContainerTouched(event) {
     // Prevent clicking/touching the tokensAndInput container from blurring
     // the input and adding the current token.
-    if (event.target === this.tokensAndInput && this.state.isActive) {
+    if (event.target === tokensAndInput.current && isActive) {
       event.preventDefault();
     }
   }
 
-  onTokenClickRemove(event) {
-    this.deleteToken(event.value);
-    this.input.focus();
+  function onTokenClickRemove(event) {
+    deleteToken(event.value);
+    focus();
   }
 
-  onSuggestionHovered(suggestion) {
-    const index = this.getMatchingSuggestions().indexOf(suggestion);
+  function onSuggestionHovered(suggestion) {
+    const index = getMatchingSuggestions().indexOf(suggestion);
 
     if (index >= 0) {
-      this.setState({
-        selectedSuggestionIndex: index,
-        selectedSuggestionScroll: false
-      });
+      setSelectedSuggestionIndex(index);
+      setSelectedSuggestionScroll(false);
     }
   }
 
-  onSuggestionSelected(suggestion) {
-    this.addNewToken(suggestion);
+  function onSuggestionSelected(suggestion) {
+    addNewToken(suggestion);
   }
 
-  onInputChange(event) {
+  function onInputChangeHandler(event) {
     const text = event.value;
-    const separator = this.props.tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/;
+    const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/;
     const items = text.split(separator);
     const tokenValue = last(items) || '';
 
     if (items.length > 1) {
-      this.addNewTokens(items.slice(0, -1));
+      addNewTokens(items.slice(0, -1));
     }
 
-    this.setState({
-      incompleteTokenValue: tokenValue
-    }, this.updateSuggestions);
-    this.props.onInputChange(tokenValue);
+    setIncompleteTokenValue(tokenValue);
+    onInputChange(tokenValue);
   }
 
-  handleDeleteKey(deleteToken) {
+  function handleDeleteKey(_deleteToken) {
     let preventDefault = false;
 
-    if (this.input.hasFocus() && this.isInputEmpty()) {
-      deleteToken();
+    if (hasFocus() && isInputEmpty()) {
+      _deleteToken();
+
       preventDefault = true;
     }
 
     return preventDefault;
   }
 
-  handleLeftArrowKey() {
+  function handleLeftArrowKey() {
     let preventDefault = false;
 
-    if (this.isInputEmpty()) {
-      this.moveInputBeforePreviousToken();
+    if (isInputEmpty()) {
+      moveInputBeforePreviousToken();
       preventDefault = true;
     }
 
     return preventDefault;
   }
 
-  handleRightArrowKey() {
+  function handleRightArrowKey() {
     let preventDefault = false;
 
-    if (this.isInputEmpty()) {
-      this.moveInputAfterNextToken();
+    if (isInputEmpty()) {
+      moveInputAfterNextToken();
       preventDefault = true;
     }
 
     return preventDefault;
   }
 
-  handleUpArrowKey() {
-    this.setState((state, props) => ({
-      selectedSuggestionIndex: (state.selectedSuggestionIndex === 0 ? this.getMatchingSuggestions(state.incompleteTokenValue, props.suggestions, props.value, props.maxSuggestions, props.saveTransform).length : state.selectedSuggestionIndex) - 1,
-      selectedSuggestionScroll: true
-    }));
+  function handleUpArrowKey() {
+    setSelectedSuggestionIndex(index => {
+      return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
+    });
+    setSelectedSuggestionScroll(true);
     return true; // PreventDefault.
   }
 
-  handleDownArrowKey() {
-    this.setState((state, props) => ({
-      selectedSuggestionIndex: (state.selectedSuggestionIndex + 1) % this.getMatchingSuggestions(state.incompleteTokenValue, props.suggestions, props.value, props.maxSuggestions, props.saveTransform).length,
-      selectedSuggestionScroll: true
-    }));
+  function handleDownArrowKey() {
+    setSelectedSuggestionIndex(index => {
+      return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length;
+    });
+    setSelectedSuggestionScroll(true);
     return true; // PreventDefault.
   }
 
-  handleEscapeKey(event) {
-    this.setState({
-      incompleteTokenValue: event.target.value,
-      isExpanded: false,
-      selectedSuggestionIndex: -1,
-      selectedSuggestionScroll: false
-    });
+  function handleEscapeKey(event) {
+    if (event.target instanceof HTMLInputElement) {
+      setIncompleteTokenValue(event.target.value);
+      setIsExpanded(false);
+      setSelectedSuggestionIndex(-1);
+      setSelectedSuggestionScroll(false);
+    }
+
     return true; // PreventDefault.
   }
 
-  handleCommaKey() {
-    if (this.inputHasValidValue()) {
-      this.addNewToken(this.state.incompleteTokenValue);
+  function handleCommaKey() {
+    if (inputHasValidValue()) {
+      addNewToken(incompleteTokenValue);
     }
 
     return true; // PreventDefault.
   }
 
-  moveInputToIndex(index) {
-    this.setState((state, props) => ({
-      inputOffsetFromEnd: props.value.length - Math.max(index, -1) - 1
-    }));
+  function moveInputToIndex(index) {
+    setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);
   }
 
-  moveInputBeforePreviousToken() {
-    this.setState((state, props) => ({
-      inputOffsetFromEnd: Math.min(state.inputOffsetFromEnd + 1, props.value.length)
-    }));
+  function moveInputBeforePreviousToken() {
+    setInputOffsetFromEnd(prevInputOffsetFromEnd => {
+      return Math.min(prevInputOffsetFromEnd + 1, value.length);
+    });
   }
 
-  moveInputAfterNextToken() {
-    this.setState(state => ({
-      inputOffsetFromEnd: Math.max(state.inputOffsetFromEnd - 1, 0)
-    }));
+  function moveInputAfterNextToken() {
+    setInputOffsetFromEnd(prevInputOffsetFromEnd => {
+      return Math.max(prevInputOffsetFromEnd - 1, 0);
+    });
   }
 
-  deleteTokenBeforeInput() {
-    const index = this.getIndexOfInput() - 1;
+  function deleteTokenBeforeInput() {
+    const index = getIndexOfInput() - 1;
 
     if (index > -1) {
-      this.deleteToken(this.props.value[index]);
+      deleteToken(value[index]);
     }
   }
 
-  deleteTokenAfterInput() {
-    const index = this.getIndexOfInput();
+  function deleteTokenAfterInput() {
+    const index = getIndexOfInput();
 
-    if (index < this.props.value.length) {
-      this.deleteToken(this.props.value[index]); // Update input offset since it's the offset from the last token.
+    if (index < value.length) {
+      deleteToken(value[index]); // Update input offset since it's the offset from the last token.
 
-      this.moveInputToIndex(index);
+      moveInputToIndex(index);
     }
   }
 
-  addCurrentToken() {
+  function addCurrentToken() {
     let preventDefault = false;
-    const selectedSuggestion = this.getSelectedSuggestion();
+    const selectedSuggestion = getSelectedSuggestion();
 
     if (selectedSuggestion) {
-      this.addNewToken(selectedSuggestion);
+      addNewToken(selectedSuggestion);
       preventDefault = true;
-    } else if (this.inputHasValidValue()) {
-      this.addNewToken(this.state.incompleteTokenValue);
+    } else if (inputHasValidValue()) {
+      addNewToken(incompleteTokenValue);
       preventDefault = true;
     }
 
     return preventDefault;
   }
 
-  addNewTokens(tokens) {
-    const tokensToAdd = uniq(tokens.map(this.props.saveTransform).filter(Boolean).filter(token => !this.valueContainsToken(token)));
+  function addNewTokens(tokens) {
+    const tokensToAdd = uniq(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)));
 
     if (tokensToAdd.length > 0) {
-      const newValue = clone(this.props.value);
-      newValue.splice.apply(newValue, [this.getIndexOfInput(), 0].concat(tokensToAdd));
-      this.props.onChange(newValue);
+      const newValue = clone(value);
+      newValue.splice(getIndexOfInput(), 0, ...tokensToAdd);
+      onChange(newValue);
     }
   }
 
-  addNewToken(token) {
-    const {
-      __experimentalExpandOnFocus,
-      __experimentalValidateInput
-    } = this.props;
-
+  function addNewToken(token) {
     if (!__experimentalValidateInput(token)) {
-      this.props.speak(this.props.messages.__experimentalInvalid, 'assertive');
+      speak(messages.__experimentalInvalid, 'assertive');
       return;
     }
 
-    this.addNewTokens([token]);
-    this.props.speak(this.props.messages.added, 'assertive');
-    this.setState({
-      incompleteTokenValue: '',
-      selectedSuggestionIndex: -1,
-      selectedSuggestionScroll: false,
-      isExpanded: !__experimentalExpandOnFocus
-    });
+    addNewTokens([token]);
+    speak(messages.added, 'assertive');
+    setIncompleteTokenValue('');
+    setSelectedSuggestionIndex(-1);
+    setSelectedSuggestionScroll(false);
+    setIsExpanded(!__experimentalExpandOnFocus);
 
-    if (this.state.isActive) {
-      this.input.focus();
+    if (isActive) {
+      focus();
     }
   }
 
-  deleteToken(token) {
-    const newTokens = this.props.value.filter(item => {
-      return this.getTokenValue(item) !== this.getTokenValue(token);
+  function deleteToken(token) {
+    const newTokens = value.filter(item => {
+      return getTokenValue(item) !== getTokenValue(token);
     });
-    this.props.onChange(newTokens);
-    this.props.speak(this.props.messages.removed, 'assertive');
+    onChange(newTokens);
+    speak(messages.removed, 'assertive');
   }
 
-  getTokenValue(token) {
+  function getTokenValue(token) {
     if ('object' === typeof token) {
       return token.value;
     }
@@ -412,24 +428,39 @@ class FormTokenField extends Component {
     return token;
   }
 
-  getMatchingSuggestions() {
-    let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.incompleteTokenValue;
-    let suggestions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.suggestions;
-    let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.value;
-    let maxSuggestions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.props.maxSuggestions;
-    let saveTransform = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.props.saveTransform;
-    let match = saveTransform(searchValue);
+  function getMatchingSuggestions() {
+    let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : incompleteTokenValue;
+
+    let _suggestions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : suggestions;
+
+    let _value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : value;
+
+    let _maxSuggestions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : maxSuggestions;
+
+    let _saveTransform = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : saveTransform;
+
+    let match = _saveTransform(searchValue);
+
     const startsWithMatch = [];
     const containsMatch = [];
 
+    const normalizedValue = _value.map(item => {
+      if (typeof item === 'string') {
+        return item;
+      }
+
+      return item.value;
+    });
+
     if (match.length === 0) {
-      suggestions = difference(suggestions, value);
+      _suggestions = difference(_suggestions, normalizedValue);
     } else {
       match = match.toLocaleLowerCase();
-      each(suggestions, suggestion => {
+
+      _suggestions.forEach(suggestion => {
         const index = suggestion.toLocaleLowerCase().indexOf(match);
 
-        if (value.indexOf(suggestion) === -1) {
+        if (normalizedValue.indexOf(suggestion) === -1) {
           if (index === 0) {
             startsWithMatch.push(suggestion);
           } else if (index > 0) {
@@ -437,62 +468,52 @@ class FormTokenField extends Component {
           }
         }
       });
-      suggestions = startsWithMatch.concat(containsMatch);
+
+      _suggestions = startsWithMatch.concat(containsMatch);
     }
 
-    return take(suggestions, maxSuggestions);
+    return _suggestions.slice(0, _maxSuggestions);
   }
 
-  getSelectedSuggestion() {
-    if (this.state.selectedSuggestionIndex !== -1) {
-      return this.getMatchingSuggestions()[this.state.selectedSuggestionIndex];
+  function getSelectedSuggestion() {
+    if (selectedSuggestionIndex !== -1) {
+      return getMatchingSuggestions()[selectedSuggestionIndex];
     }
+
+    return undefined;
   }
 
-  valueContainsToken(token) {
-    return some(this.props.value, item => {
-      return this.getTokenValue(token) === this.getTokenValue(item);
+  function valueContainsToken(token) {
+    return some(value, item => {
+      return getTokenValue(token) === getTokenValue(item);
     });
   }
 
-  getIndexOfInput() {
-    return this.props.value.length - this.state.inputOffsetFromEnd;
+  function getIndexOfInput() {
+    return value.length - inputOffsetFromEnd;
   }
 
-  isInputEmpty() {
-    return this.state.incompleteTokenValue.length === 0;
+  function isInputEmpty() {
+    return incompleteTokenValue.length === 0;
   }
 
-  inputHasValidValue() {
-    return this.props.saveTransform(this.state.incompleteTokenValue).length > 0;
+  function inputHasValidValue() {
+    return saveTransform(incompleteTokenValue).length > 0;
   }
 
-  updateSuggestions() {
+  function updateSuggestions() {
     let resetSelectedSuggestion = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    const {
-      __experimentalExpandOnFocus
-    } = this.props;
-    const {
-      incompleteTokenValue
-    } = this.state;
     const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;
-    const matchingSuggestions = this.getMatchingSuggestions(incompleteTokenValue);
+    const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);
     const hasMatchingSuggestions = matchingSuggestions.length > 0;
-    const newState = {
-      isExpanded: __experimentalExpandOnFocus || inputHasMinimumChars && hasMatchingSuggestions
-    };
+    setIsExpanded(__experimentalExpandOnFocus || inputHasMinimumChars && hasMatchingSuggestions);
 
     if (resetSelectedSuggestion) {
-      newState.selectedSuggestionIndex = -1;
-      newState.selectedSuggestionScroll = false;
+      setSelectedSuggestionIndex(-1);
+      setSelectedSuggestionScroll(false);
     }
 
-    this.setState(newState);
-
     if (inputHasMinimumChars) {
-      const {
-        debouncedSpeak
-      } = this.props;
       const message = hasMatchingSuggestions ? sprintf(
       /* translators: %d: number of results. */
       _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');
@@ -500,147 +521,108 @@ class FormTokenField extends Component {
     }
   }
 
-  renderTokensAndInput() {
-    const components = map(this.props.value, this.renderToken);
-    components.splice(this.getIndexOfInput(), 0, this.renderInput());
+  function renderTokensAndInput() {
+    const components = map(value, renderToken);
+    components.splice(getIndexOfInput(), 0, renderInput());
     return components;
   }
 
-  renderToken(token, index, tokens) {
-    const value = this.getTokenValue(token);
-    const status = token.status ? token.status : undefined;
+  function renderToken(token, index, tokens) {
+    const _value = getTokenValue(token);
+
+    const status = typeof token !== 'string' ? token.status : undefined;
     const termPosition = index + 1;
     const termsCount = tokens.length;
-    return createElement(Token, {
-      key: 'token-' + value,
-      value: value,
+    return createElement(FlexItem, {
+      key: 'token-' + _value
+    }, createElement(Token, {
+      value: _value,
       status: status,
-      title: token.title,
-      displayTransform: this.props.displayTransform,
-      onClickRemove: this.onTokenClickRemove,
-      isBorderless: token.isBorderless || this.props.isBorderless,
-      onMouseEnter: token.onMouseEnter,
-      onMouseLeave: token.onMouseLeave,
-      disabled: 'error' !== status && this.props.disabled,
-      messages: this.props.messages,
+      title: typeof token !== 'string' ? token.title : undefined,
+      displayTransform: displayTransform,
+      onClickRemove: onTokenClickRemove,
+      isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless,
+      onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined,
+      onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined,
+      disabled: 'error' !== status && disabled,
+      messages: messages,
       termsCount: termsCount,
       termPosition: termPosition
-    });
+    }));
   }
 
-  renderInput() {
-    const {
-      autoCapitalize,
-      autoComplete,
-      maxLength,
-      placeholder,
-      value,
-      instanceId
-    } = this.props;
-    let props = {
+  function renderInput() {
+    const inputProps = {
       instanceId,
       autoCapitalize,
       autoComplete,
       placeholder: value.length === 0 ? placeholder : '',
-      ref: this.bindInput,
       key: 'input',
-      disabled: this.props.disabled,
-      value: this.state.incompleteTokenValue,
-      onBlur: this.onBlur,
-      isExpanded: this.state.isExpanded,
-      selectedSuggestionIndex: this.state.selectedSuggestionIndex
-    };
-
-    if (!(maxLength && value.length >= maxLength)) {
-      props = { ...props,
-        onChange: this.onInputChange
-      };
-    }
-
-    return createElement(TokenInput, props);
-  }
-
-  render() {
-    const {
       disabled,
-      label = __('Add item'),
-      instanceId,
-      className,
-      __experimentalShowHowTo
-    } = this.props;
-    const {
-      isExpanded
-    } = this.state;
-    const classes = classnames(className, 'components-form-token-field__input-container', {
-      'is-active': this.state.isActive,
-      'is-disabled': disabled
-    });
-    let tokenFieldProps = {
-      className: 'components-form-token-field',
-      tabIndex: '-1'
+      value: incompleteTokenValue,
+      onBlur,
+      isExpanded,
+      selectedSuggestionIndex
     };
-    const matchingSuggestions = this.getMatchingSuggestions();
-
-    if (!disabled) {
-      tokenFieldProps = Object.assign({}, tokenFieldProps, {
-        onKeyDown: this.onKeyDown,
-        onKeyPress: this.onKeyPress,
-        onFocus: this.onFocus
-      });
-    } // Disable reason: There is no appropriate role which describes the
-    // input container intended accessible usability.
-    // TODO: Refactor click detection to use blur to stop propagation.
-
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-
-    return createElement("div", tokenFieldProps, createElement("label", {
-      htmlFor: `components-form-token-input-${instanceId}`,
-      className: "components-form-token-field__label"
-    }, label), createElement("div", {
-      ref: this.bindTokensAndInput,
-      className: classes,
-      tabIndex: "-1",
-      onMouseDown: this.onContainerTouched,
-      onTouchStart: this.onContainerTouched
-    }, this.renderTokensAndInput(), isExpanded && createElement(SuggestionsList, {
-      instanceId: instanceId,
-      match: this.props.saveTransform(this.state.incompleteTokenValue),
-      displayTransform: this.props.displayTransform,
-      suggestions: matchingSuggestions,
-      selectedIndex: this.state.selectedSuggestionIndex,
-      scrollIntoView: this.state.selectedSuggestionScroll,
-      onHover: this.onSuggestionHovered,
-      onSelect: this.onSuggestionSelected
-    })), __experimentalShowHowTo && createElement("p", {
-      id: `components-form-token-suggestions-howto-${instanceId}`,
-      className: "components-form-token-field__help"
-    }, this.props.tokenizeOnSpace ? __('Separate with commas, spaces, or the Enter key.') : __('Separate with commas or the Enter key.')));
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
+    return createElement(TokenInput, _extends({}, inputProps, {
+      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,
+      ref: input
+    }));
   }
 
+  const classes = classnames(className, 'components-form-token-field__input-container', {
+    'is-active': isActive,
+    'is-disabled': disabled
+  });
+  let tokenFieldProps = {
+    className: 'components-form-token-field',
+    tabIndex: -1
+  };
+  const matchingSuggestions = getMatchingSuggestions();
+
+  if (!disabled) {
+    tokenFieldProps = Object.assign({}, tokenFieldProps, {
+      onKeyDown,
+      onKeyPress,
+      onFocus: onFocusHandler
+    });
+  } // Disable reason: There is no appropriate role which describes the
+  // input container intended accessible usability.
+  // TODO: Refactor click detection to use blur to stop propagation.
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+
+
+  return createElement("div", tokenFieldProps, createElement("label", {
+    htmlFor: `components-form-token-input-${instanceId}`,
+    className: "components-form-token-field__label"
+  }, label), createElement("div", {
+    ref: tokensAndInput,
+    className: classes,
+    tabIndex: -1,
+    onMouseDown: onContainerTouched,
+    onTouchStart: onContainerTouched
+  }, createElement(TokensAndInputWrapperFlex, {
+    justify: "flex-start",
+    align: "center",
+    gap: 1,
+    wrap: true,
+    __next36pxDefaultSize: __next36pxDefaultSize,
+    hasTokens: !!value.length
+  }, renderTokensAndInput()), isExpanded && createElement(SuggestionsList, {
+    instanceId: instanceId,
+    match: saveTransform(incompleteTokenValue),
+    displayTransform: displayTransform,
+    suggestions: matchingSuggestions,
+    selectedIndex: selectedSuggestionIndex,
+    scrollIntoView: selectedSuggestionScroll,
+    onHover: onSuggestionHovered,
+    onSelect: onSuggestionSelected
+  })), __experimentalShowHowTo && createElement("p", {
+    id: `components-form-token-suggestions-howto-${instanceId}`,
+    className: "components-form-token-field__help"
+  }, tokenizeOnSpace ? __('Separate with commas, spaces, or the Enter key.') : __('Separate with commas or the Enter key.')));
+  /* eslint-enable jsx-a11y/no-static-element-interactions */
 }
-
-FormTokenField.defaultProps = {
-  suggestions: Object.freeze([]),
-  maxSuggestions: 100,
-  value: Object.freeze([]),
-  displayTransform: identity,
-  saveTransform: token => token.trim(),
-  onChange: () => {},
-  onInputChange: () => {},
-  isBorderless: false,
-  disabled: false,
-  tokenizeOnSpace: false,
-  messages: {
-    added: __('Item added.'),
-    removed: __('Item removed.'),
-    remove: __('Remove item'),
-    __experimentalInvalid: __('Invalid item')
-  },
-  __experimentalExpandOnFocus: false,
-  __experimentalValidateInput: () => true,
-  __experimentalShowHowTo: true
-};
-export default withSpokenMessages(withInstanceId(FormTokenField));
+export default FormTokenField;
 //# sourceMappingURL=index.js.map