@wordpress/components 25.5.0 → 25.6.0

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

@@ -1,41 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormTokenField = FormTokenField;
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _i18n = require("@wordpress/i18n");
-
 var _compose = require("@wordpress/compose");
-
 var _a11y = require("@wordpress/a11y");
-
 var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
-
 var _token = _interopRequireDefault(require("./token"));
-
 var _tokenInput = _interopRequireDefault(require("./token-input"));
-
 var _styles = require("./styles");
-
 var _suggestionsList = _interopRequireDefault(require("./suggestions-list"));
-
 var _flex = require("../flex");
-
 var _baseControlStyles = require("../base-control/styles/base-control-styles");
-
 var _spacer = require("../spacer");
-
 var _useDeprecatedProps = require("../utils/use-deprecated-props");
-
 /**
  * External dependencies
  */
@@ -47,7 +31,9 @@ var _useDeprecatedProps = require("../utils/use-deprecated-props");
 /**
  * Internal dependencies
  */
+
 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.
@@ -58,8 +44,6 @@ const identity = value => value;
  * 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,
@@ -93,8 +77,9 @@ function FormTokenField(props) {
     __experimentalAutoSelectFirstMatch = false,
     __nextHasNoMarginBottom = false
   } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props, 'wp.components.FormTokenField');
-  const instanceId = (0, _compose.useInstanceId)(FormTokenField); // We reset to these initial values again in the onBlur
+  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);
@@ -114,33 +99,31 @@ function FormTokenField(props) {
   }, [isActive]);
   (0, _element.useEffect)(() => {
     const suggestionsDidUpdate = !(0, _isShallowEqual.default)(suggestions, prevSuggestions || []);
-
     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
+    }
 
+    // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [suggestions, prevSuggestions, value, prevValue]);
   (0, _element.useEffect)(() => {
-    updateSuggestions(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    updateSuggestions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [incompleteTokenValue]);
   (0, _element.useEffect)(() => {
-    updateSuggestions(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    updateSuggestions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [__experimentalAutoSelectFirstMatch]);
-
   if (disabled && isActive) {
     setIsActive(false);
     setIncompleteTokenValue('');
   }
-
   function focus() {
     input.current?.focus();
   }
-
   function hasFocus() {
     return input.current === input.current?.ownerDocument.activeElement;
   }
-
   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) {
@@ -154,12 +137,10 @@ function FormTokenField(props) {
        */
       setIsActive(false);
     }
-
     if ('function' === typeof onFocus) {
       onFocus(event);
     }
   }
-
   function onBlur() {
     if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {
       setIsActive(false);
@@ -173,84 +154,67 @@ function FormTokenField(props) {
       setSelectedSuggestionScroll(false);
     }
   }
-
   function onKeyDown(event) {
     let preventDefault = false;
-
-    if (event.defaultPrevented || // Ignore keydowns from IMEs
-    event.nativeEvent.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+    if (event.defaultPrevented ||
+    // Ignore keydowns from IMEs
+    event.nativeEvent.isComposing ||
+    // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
     // is `isComposing=false`, even though it's technically still part of the composition.
     // These can only be detected by keyCode.
     event.keyCode === 229) {
       return;
     }
-
     switch (event.key) {
       case 'Backspace':
         preventDefault = handleDeleteKey(deleteTokenBeforeInput);
         break;
-
       case 'Enter':
         preventDefault = addCurrentToken();
         break;
-
       case 'ArrowLeft':
         preventDefault = handleLeftArrowKey();
         break;
-
       case 'ArrowUp':
         preventDefault = handleUpArrowKey();
         break;
-
       case 'ArrowRight':
         preventDefault = handleRightArrowKey();
         break;
-
       case 'ArrowDown':
         preventDefault = handleDownArrowKey();
         break;
-
       case 'Delete':
         preventDefault = handleDeleteKey(deleteTokenAfterInput);
         break;
-
       case 'Space':
         if (tokenizeOnSpace) {
           preventDefault = addCurrentToken();
         }
-
         break;
-
       case 'Escape':
         preventDefault = handleEscapeKey(event);
         break;
-
       default:
         break;
     }
-
     if (preventDefault) {
       event.preventDefault();
     }
   }
-
   function onKeyPress(event) {
     let preventDefault = false;
-
     switch (event.key) {
       case ',':
         preventDefault = handleCommaKey();
         break;
-
       default:
         break;
     }
-
     if (preventDefault) {
       event.preventDefault();
     }
   }
-
   function onContainerTouched(event) {
     // Prevent clicking/touching the tokensAndInput container from blurring
     // the input and adding the current token.
@@ -258,73 +222,55 @@ function FormTokenField(props) {
       event.preventDefault();
     }
   }
-
   function onTokenClickRemove(event) {
     deleteToken(event.value);
     focus();
   }
-
   function onSuggestionHovered(suggestion) {
     const index = getMatchingSuggestions().indexOf(suggestion);
-
     if (index >= 0) {
       setSelectedSuggestionIndex(index);
       setSelectedSuggestionScroll(false);
     }
   }
-
   function onSuggestionSelected(suggestion) {
     addNewToken(suggestion);
   }
-
   function onInputChangeHandler(event) {
     const text = event.value;
     const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/;
     const items = text.split(separator);
     const tokenValue = items[items.length - 1] || '';
-
     if (items.length > 1) {
       addNewTokens(items.slice(0, -1));
     }
-
     setIncompleteTokenValue(tokenValue);
     onInputChange(tokenValue);
   }
-
   function handleDeleteKey(_deleteToken) {
     let preventDefault = false;
-
     if (hasFocus() && isInputEmpty()) {
       _deleteToken();
-
       preventDefault = true;
     }
-
     return preventDefault;
   }
-
   function handleLeftArrowKey() {
     let preventDefault = false;
-
     if (isInputEmpty()) {
       moveInputBeforePreviousToken();
       preventDefault = true;
     }
-
     return preventDefault;
   }
-
   function handleRightArrowKey() {
     let preventDefault = false;
-
     if (isInputEmpty()) {
       moveInputAfterNextToken();
       preventDefault = true;
     }
-
     return preventDefault;
   }
-
   function handleUpArrowKey() {
     setSelectedSuggestionIndex(index => {
       return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
@@ -348,7 +294,6 @@ function FormTokenField(props) {
       setSelectedSuggestionIndex(-1);
       setSelectedSuggestionScroll(false);
     }
-
     return true; // PreventDefault.
   }
 
@@ -356,48 +301,39 @@ function FormTokenField(props) {
     if (inputHasValidValue()) {
       addNewToken(incompleteTokenValue);
     }
-
     return true; // PreventDefault.
   }
 
   function moveInputToIndex(index) {
     setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);
   }
-
   function moveInputBeforePreviousToken() {
     setInputOffsetFromEnd(prevInputOffsetFromEnd => {
       return Math.min(prevInputOffsetFromEnd + 1, value.length);
     });
   }
-
   function moveInputAfterNextToken() {
     setInputOffsetFromEnd(prevInputOffsetFromEnd => {
       return Math.max(prevInputOffsetFromEnd - 1, 0);
     });
   }
-
   function deleteTokenBeforeInput() {
     const index = getIndexOfInput() - 1;
-
     if (index > -1) {
       deleteToken(value[index]);
     }
   }
-
   function deleteTokenAfterInput() {
     const index = getIndexOfInput();
-
     if (index < value.length) {
-      deleteToken(value[index]); // Update input offset since it's the offset from the last token.
-
+      deleteToken(value[index]);
+      // Update input offset since it's the offset from the last token.
       moveInputToIndex(index);
     }
   }
-
   function addCurrentToken() {
     let preventDefault = false;
     const selectedSuggestion = getSelectedSuggestion();
-
     if (selectedSuggestion) {
       addNewToken(selectedSuggestion);
       preventDefault = true;
@@ -405,38 +341,31 @@ function FormTokenField(props) {
       addNewToken(incompleteTokenValue);
       preventDefault = true;
     }
-
     return preventDefault;
   }
-
   function addNewTokens(tokens) {
     const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))];
-
     if (tokensToAdd.length > 0) {
       const newValue = [...value];
       newValue.splice(getIndexOfInput(), 0, ...tokensToAdd);
       onChange(newValue);
     }
   }
-
   function addNewToken(token) {
     if (!__experimentalValidateInput(token)) {
       (0, _a11y.speak)(messages.__experimentalInvalid, 'assertive');
       return;
     }
-
     addNewTokens([token]);
     (0, _a11y.speak)(messages.added, 'assertive');
     setIncompleteTokenValue('');
     setSelectedSuggestionIndex(-1);
     setSelectedSuggestionScroll(false);
     setIsExpanded(!__experimentalExpandOnFocus);
-
     if (isActive) {
       focus();
     }
   }
-
   function deleteToken(token) {
     const newTokens = value.filter(item => {
       return getTokenValue(item) !== getTokenValue(token);
@@ -444,37 +373,28 @@ function FormTokenField(props) {
     onChange(newTokens);
     (0, _a11y.speak)(messages.removed, 'assertive');
   }
-
   function getTokenValue(token) {
     if ('object' === typeof token) {
       return token.value;
     }
-
     return token;
   }
-
   function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = 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 = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion));
     } else {
       match = match.toLocaleLowerCase();
-
       _suggestions.forEach(suggestion => {
         const index = suggestion.toLocaleLowerCase().indexOf(match);
-
         if (normalizedValue.indexOf(suggestion) === -1) {
           if (index === 0) {
             startsWithMatch.push(suggestion);
@@ -483,48 +403,36 @@ function FormTokenField(props) {
           }
         }
       });
-
       _suggestions = startsWithMatch.concat(containsMatch);
     }
-
     return _suggestions.slice(0, _maxSuggestions);
   }
-
   function getSelectedSuggestion() {
     if (selectedSuggestionIndex !== -1) {
       return getMatchingSuggestions()[selectedSuggestionIndex];
     }
-
     return undefined;
   }
-
   function valueContainsToken(token) {
     return value.some(item => {
       return getTokenValue(token) === getTokenValue(item);
     });
   }
-
   function getIndexOfInput() {
     return value.length - inputOffsetFromEnd;
   }
-
   function isInputEmpty() {
     return incompleteTokenValue.length === 0;
   }
-
   function inputHasValidValue() {
     return saveTransform(incompleteTokenValue).length > 0;
   }
-
   function updateSuggestions(resetSelectedSuggestion = true) {
     const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;
     const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);
     const hasMatchingSuggestions = matchingSuggestions.length > 0;
-
     const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;
-
     setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);
-
     if (resetSelectedSuggestion) {
       if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) {
         setSelectedSuggestionIndex(0);
@@ -534,24 +442,19 @@ function FormTokenField(props) {
         setSelectedSuggestionScroll(false);
       }
     }
-
     if (inputHasMinimumChars) {
-      const message = hasMatchingSuggestions ? (0, _i18n.sprintf)(
-      /* translators: %d: number of results. */
+      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.');
       debouncedSpeak(message, 'assertive');
     }
   }
-
   function renderTokensAndInput() {
     const components = value.map(renderToken);
     components.splice(getIndexOfInput(), 0, renderInput());
     return components;
   }
-
   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;
@@ -572,7 +475,6 @@ function FormTokenField(props) {
       termPosition: termPosition
     }));
   }
-
   function renderInput() {
     const inputProps = {
       instanceId,
@@ -586,12 +488,12 @@ function FormTokenField(props) {
       isExpanded,
       selectedSuggestionIndex
     };
-    return (0, _element.createElement)(_tokenInput.default, { ...inputProps,
+    return (0, _element.createElement)(_tokenInput.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
@@ -601,21 +503,20 @@ function FormTokenField(props) {
     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
+  }
+
+  // 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
+  return (0, _element.createElement)("div", {
+    ...tokenFieldProps
   }, (0, _element.createElement)(_baseControlStyles.StyledLabel, {
     htmlFor: `components-form-token-input-${instanceId}`,
     className: "components-form-token-field__label"
@@ -651,7 +552,6 @@ function FormTokenField(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 */
 }
-
 var _default = FormTokenField;
 exports.default = _default;
 //# sourceMappingURL=index.js.map