@wordpress/components 19.12.0 → 19.15.0

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

@@ -5,10 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.FormTokenField = FormTokenField;
 exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _lodash = require("lodash");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,6 +20,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
 
+var _a11y = require("@wordpress/a11y");
+
 var _keycodes = require("@wordpress/keycodes");
 
 var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
@@ -25,9 +30,11 @@ var _token = _interopRequireDefault(require("./token"));
 
 var _tokenInput = _interopRequireDefault(require("./token-input"));
 
+var _styles = require("./styles");
+
 var _suggestionsList = _interopRequireDefault(require("./suggestions-list"));
 
-var _withSpokenMessages = _interopRequireDefault(require("../higher-order/with-spoken-messages"));
+var _flex = require("../flex");
 
 /**
  * External dependencies
@@ -40,154 +47,177 @@ var _withSpokenMessages = _interopRequireDefault(require("../higher-order/with-s
 /**
  * Internal dependencies
  */
-const initialState = {
-  incompleteTokenValue: '',
-  inputOffsetFromEnd: 0,
-  isActive: false,
-  isExpanded: false,
-  selectedSuggestionIndex: -1,
-  selectedSuggestionScroll: false
-};
-
-class FormTokenField extends _element.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) {
+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.
+ */
+
+
+function FormTokenField(props) {
+  const {
+    autoCapitalize,
+    autoComplete,
+    maxLength,
+    placeholder,
+    label = (0, _i18n.__)('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: (0, _i18n.__)('Item added.'),
+      removed: (0, _i18n.__)('Item removed.'),
+      remove: (0, _i18n.__)('Remove item'),
+      __experimentalInvalid: (0, _i18n.__)('Invalid item')
+    },
+    __experimentalExpandOnFocus = false,
+    __experimentalValidateInput = () => true,
+    __experimentalShowHowTo = true,
+    __next36pxDefaultSize = false
+  } = props;
+  const instanceId = (0, _compose.useInstanceId)(FormTokenField); // We reset to these initial values again in the onBlur
+
+  const [incompleteTokenValue, setIncompleteTokenValue] = (0, _element.useState)('');
+  const [inputOffsetFromEnd, setInputOffsetFromEnd] = (0, _element.useState)(0);
+  const [isActive, setIsActive] = (0, _element.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, _element.useState)(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, _element.useState)(-1);
+  const [selectedSuggestionScroll, setSelectedSuggestionScroll] = (0, _element.useState)(false);
+  const prevSuggestions = (0, _compose.usePrevious)(suggestions);
+  const prevValue = (0, _compose.usePrevious)(value);
+  const input = (0, _element.useRef)(null);
+  const tokensAndInput = (0, _element.useRef)(null);
+  const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
+  (0, _element.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]);
+  (0, _element.useEffect)(() => {
+    const suggestionsDidUpdate = !(0, _isShallowEqual.default)(suggestions, prevSuggestions || []);
 
-    const {
-      suggestions,
-      value
-    } = this.props;
-    const suggestionsDidUpdate = !(0, _isShallowEqual.default)(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]);
+  (0, _element.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 _keycodes.BACKSPACE:
-        preventDefault = this.handleDeleteKey(this.deleteTokenBeforeInput);
+        preventDefault = handleDeleteKey(deleteTokenBeforeInput);
         break;
 
       case _keycodes.ENTER:
-        preventDefault = this.addCurrentToken();
+        preventDefault = addCurrentToken();
         break;
 
       case _keycodes.LEFT:
-        preventDefault = this.handleLeftArrowKey();
+        preventDefault = handleLeftArrowKey();
         break;
 
       case _keycodes.UP:
-        preventDefault = this.handleUpArrowKey();
+        preventDefault = handleUpArrowKey();
         break;
 
       case _keycodes.RIGHT:
-        preventDefault = this.handleRightArrowKey();
+        preventDefault = handleRightArrowKey();
         break;
 
       case _keycodes.DOWN:
-        preventDefault = this.handleDownArrowKey();
+        preventDefault = handleDownArrowKey();
         break;
 
       case _keycodes.DELETE:
-        preventDefault = this.handleDeleteKey(this.deleteTokenAfterInput);
+        preventDefault = handleDeleteKey(deleteTokenAfterInput);
         break;
 
       case _keycodes.SPACE:
-        if (this.props.tokenizeOnSpace) {
-          preventDefault = this.addCurrentToken();
+        if (tokenizeOnSpace) {
+          preventDefault = addCurrentToken();
         }
 
         break;
 
       case _keycodes.ESCAPE:
-        preventDefault = this.handleEscapeKey(event);
+        preventDefault = handleEscapeKey(event);
         break;
 
       default:
@@ -199,13 +229,13 @@ class FormTokenField extends _element.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:
@@ -217,212 +247,201 @@ class FormTokenField extends _element.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 = (0, _lodash.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 = (0, _lodash.uniq)(tokens.map(this.props.saveTransform).filter(Boolean).filter(token => !this.valueContainsToken(token)));
+  function addNewTokens(tokens) {
+    const tokensToAdd = (0, _lodash.uniq)(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)));
 
     if (tokensToAdd.length > 0) {
-      const newValue = (0, _lodash.clone)(this.props.value);
-      newValue.splice.apply(newValue, [this.getIndexOfInput(), 0].concat(tokensToAdd));
-      this.props.onChange(newValue);
+      const newValue = (0, _lodash.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');
+      (0, _a11y.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]);
+    (0, _a11y.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);
+    (0, _a11y.speak)(messages.removed, 'assertive');
   }
 
-  getTokenValue(token) {
+  function getTokenValue(token) {
     if ('object' === typeof token) {
       return token.value;
     }
@@ -430,24 +449,39 @@ class FormTokenField extends _element.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 = (0, _lodash.difference)(suggestions, value);
+      _suggestions = (0, _lodash.difference)(_suggestions, normalizedValue);
     } else {
       match = match.toLocaleLowerCase();
-      (0, _lodash.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) {
@@ -455,62 +489,52 @@ class FormTokenField extends _element.Component {
           }
         }
       });
-      suggestions = startsWithMatch.concat(containsMatch);
+
+      _suggestions = startsWithMatch.concat(containsMatch);
     }
 
-    return (0, _lodash.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 (0, _lodash.some)(this.props.value, item => {
-      return this.getTokenValue(token) === this.getTokenValue(item);
+  function valueContainsToken(token) {
+    return (0, _lodash.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 ? (0, _i18n.sprintf)(
       /* translators: %d: number of results. */
       (0, _i18n._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) : (0, _i18n.__)('No results.');
@@ -518,150 +542,110 @@ class FormTokenField extends _element.Component {
     }
   }
 
-  renderTokensAndInput() {
-    const components = (0, _lodash.map)(this.props.value, this.renderToken);
-    components.splice(this.getIndexOfInput(), 0, this.renderInput());
+  function renderTokensAndInput() {
+    const components = (0, _lodash.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 (0, _element.createElement)(_token.default, {
-      key: 'token-' + value,
-      value: value,
+    return (0, _element.createElement)(_flex.FlexItem, {
+      key: 'token-' + _value
+    }, (0, _element.createElement)(_token.default, {
+      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 (0, _element.createElement)(_tokenInput.default, props);
-  }
-
-  render() {
-    const {
       disabled,
-      label = (0, _i18n.__)('Add item'),
-      instanceId,
-      className,
-      __experimentalShowHowTo
-    } = this.props;
-    const {
-      isExpanded
-    } = this.state;
-    const classes = (0, _classnames.default)(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 (0, _element.createElement)("div", tokenFieldProps, (0, _element.createElement)("label", {
-      htmlFor: `components-form-token-input-${instanceId}`,
-      className: "components-form-token-field__label"
-    }, label), (0, _element.createElement)("div", {
-      ref: this.bindTokensAndInput,
-      className: classes,
-      tabIndex: "-1",
-      onMouseDown: this.onContainerTouched,
-      onTouchStart: this.onContainerTouched
-    }, this.renderTokensAndInput(), isExpanded && (0, _element.createElement)(_suggestionsList.default, {
-      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 && (0, _element.createElement)("p", {
-      id: `components-form-token-suggestions-howto-${instanceId}`,
-      className: "components-form-token-field__help"
-    }, this.props.tokenizeOnSpace ? (0, _i18n.__)('Separate with commas, spaces, or the Enter key.') : (0, _i18n.__)('Separate with commas or the Enter key.')));
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
+    return (0, _element.createElement)(_tokenInput.default, (0, _extends2.default)({}, inputProps, {
+      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,
+      ref: input
+    }));
   }
 
+  const classes = (0, _classnames.default)(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 (0, _element.createElement)("div", tokenFieldProps, (0, _element.createElement)("label", {
+    htmlFor: `components-form-token-input-${instanceId}`,
+    className: "components-form-token-field__label"
+  }, label), (0, _element.createElement)("div", {
+    ref: tokensAndInput,
+    className: classes,
+    tabIndex: -1,
+    onMouseDown: onContainerTouched,
+    onTouchStart: onContainerTouched
+  }, (0, _element.createElement)(_styles.TokensAndInputWrapperFlex, {
+    justify: "flex-start",
+    align: "center",
+    gap: 1,
+    wrap: true,
+    __next36pxDefaultSize: __next36pxDefaultSize,
+    hasTokens: !!value.length
+  }, renderTokensAndInput()), isExpanded && (0, _element.createElement)(_suggestionsList.default, {
+    instanceId: instanceId,
+    match: saveTransform(incompleteTokenValue),
+    displayTransform: displayTransform,
+    suggestions: matchingSuggestions,
+    selectedIndex: selectedSuggestionIndex,
+    scrollIntoView: selectedSuggestionScroll,
+    onHover: onSuggestionHovered,
+    onSelect: onSuggestionSelected
+  })), __experimentalShowHowTo && (0, _element.createElement)("p", {
+    id: `components-form-token-suggestions-howto-${instanceId}`,
+    className: "components-form-token-field__help"
+  }, tokenizeOnSpace ? (0, _i18n.__)('Separate with commas, spaces, or the Enter key.') : (0, _i18n.__)('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: _lodash.identity,
-  saveTransform: token => token.trim(),
-  onChange: () => {},
-  onInputChange: () => {},
-  isBorderless: false,
-  disabled: false,
-  tokenizeOnSpace: false,
-  messages: {
-    added: (0, _i18n.__)('Item added.'),
-    removed: (0, _i18n.__)('Item removed.'),
-    remove: (0, _i18n.__)('Remove item'),
-    __experimentalInvalid: (0, _i18n.__)('Invalid item')
-  },
-  __experimentalExpandOnFocus: false,
-  __experimentalValidateInput: () => true,
-  __experimentalShowHowTo: true
-};
-
-var _default = (0, _withSpokenMessages.default)((0, _compose.withInstanceId)(FormTokenField));
-
+var _default = FormTokenField;
 exports.default = _default;
 //# sourceMappingURL=index.js.map