@wordpress/components 25.5.0 → 25.6.1

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

@@ -1,10 +1,8 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -13,10 +11,10 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+
 /**
  * Internal dependencies
  */
-
 import Token from './token';
 import TokenInput from './token-input';
 import { TokensAndInputWrapperFlex } from './styles';
@@ -25,8 +23,8 @@ import { FlexItem } from '../flex';
 import { StyledHelp, StyledLabel } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-
 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.
@@ -37,8 +35,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.
  */
-
-
 export function FormTokenField(props) {
   const {
     autoCapitalize,
@@ -72,8 +68,9 @@ export function FormTokenField(props) {
     __experimentalAutoSelectFirstMatch = false,
     __nextHasNoMarginBottom = false
   } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.FormTokenField');
-  const instanceId = useInstanceId(FormTokenField); // We reset to these initial values again in the onBlur
+  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);
@@ -93,33 +90,31 @@ export function FormTokenField(props) {
   }, [isActive]);
   useEffect(() => {
     const suggestionsDidUpdate = !isShallowEqual(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]);
   useEffect(() => {
-    updateSuggestions(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    updateSuggestions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [incompleteTokenValue]);
   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) {
@@ -133,12 +128,10 @@ export function FormTokenField(props) {
        */
       setIsActive(false);
     }
-
     if ('function' === typeof onFocus) {
       onFocus(event);
     }
   }
-
   function onBlur() {
     if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) {
       setIsActive(false);
@@ -152,84 +145,67 @@ export 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.
@@ -237,73 +213,55 @@ export 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;
@@ -327,7 +285,6 @@ export function FormTokenField(props) {
       setSelectedSuggestionIndex(-1);
       setSelectedSuggestionScroll(false);
     }
-
     return true; // PreventDefault.
   }
 
@@ -335,48 +292,39 @@ export 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;
@@ -384,38 +332,31 @@ export 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)) {
       speak(messages.__experimentalInvalid, 'assertive');
       return;
     }
-
     addNewTokens([token]);
     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);
@@ -423,37 +364,28 @@ export function FormTokenField(props) {
     onChange(newTokens);
     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);
@@ -462,48 +394,36 @@ export 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);
@@ -513,24 +433,19 @@ export function FormTokenField(props) {
         setSelectedSuggestionScroll(false);
       }
     }
-
     if (inputHasMinimumChars) {
-      const message = hasMatchingSuggestions ? sprintf(
-      /* translators: %d: number of results. */
+      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.');
       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;
@@ -551,7 +466,6 @@ export function FormTokenField(props) {
       termPosition: termPosition
     }));
   }
-
   function renderInput() {
     const inputProps = {
       instanceId,
@@ -565,12 +479,12 @@ export function FormTokenField(props) {
       isExpanded,
       selectedSuggestionIndex
     };
-    return createElement(TokenInput, { ...inputProps,
+    return createElement(TokenInput, {
+      ...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
@@ -580,21 +494,20 @@ export 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 createElement("div", { ...tokenFieldProps
+  return createElement("div", {
+    ...tokenFieldProps
   }, createElement(StyledLabel, {
     htmlFor: `components-form-token-input-${instanceId}`,
     className: "components-form-token-field__label"
@@ -630,5 +543,6 @@ export function FormTokenField(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 */
 }
+
 export default FormTokenField;
 //# sourceMappingURL=index.js.map