@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

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

@@ -1,67 +1,48 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef, useState } from '@wordpress/element';
-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';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import Token from './token';
-import TokenInput from './token-input';
-import { TokensAndInputWrapperFlex } from './styles';
-import SuggestionsList from './suggestions-list';
-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';
-import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "@wordpress/element";
+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";
+import deprecated from "@wordpress/deprecated";
+import Token from "./token";
+import TokenInput from "./token-input";
+import { TokensAndInputWrapperFlex } from "./styles";
+import SuggestionsList from "./suggestions-list";
+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";
+import { withIgnoreIMEEvents } from "../utils/with-ignore-ime-events";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
- */
-export function FormTokenField(props) {
+const identity = (value) => value;
+function FormTokenField(props) {
   const {
     autoCapitalize,
     autoComplete,
     maxLength,
     placeholder,
-    label = __('Add item'),
+    label = __("Add item"),
     className,
     suggestions = [],
     maxSuggestions = 100,
     value = [],
     displayTransform = identity,
-    saveTransform = token => token.trim(),
-    onChange = () => {},
-    onInputChange = () => {},
-    onFocus = undefined,
+    saveTransform = (token) => token.trim(),
+    onChange = () => {
+    },
+    onInputChange = () => {
+    },
+    onFocus = void 0,
     isBorderless = false,
     disabled = false,
     tokenizeOnSpace = false,
     messages = {
-      added: __('Item added.'),
-      removed: __('Item removed.'),
-      remove: __('Remove item'),
-      __experimentalInvalid: __('Invalid item')
+      added: __("Item added."),
+      removed: __("Item removed."),
+      remove: __("Remove item"),
+      __experimentalInvalid: __("Invalid item")
     },
     __experimentalRenderItem,
     __experimentalExpandOnFocus = false,
@@ -73,21 +54,19 @@ export function FormTokenField(props) {
     tokenizeOnBlur = false
   } = useDeprecated36pxDefaultSizeProp(props);
   if (!__nextHasNoMarginBottom) {
-    deprecated('Bottom margin styles for wp.components.FormTokenField', {
-      since: '6.7',
-      version: '7.0',
-      hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
+    deprecated("Bottom margin styles for wp.components.FormTokenField", {
+      since: "6.7",
+      version: "7.0",
+      hint: "Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version."
     });
   }
   maybeWarnDeprecated36pxSize({
-    componentName: 'FormTokenField',
-    size: undefined,
+    componentName: "FormTokenField",
+    size: void 0,
     __next40pxDefaultSize
   });
   const instanceId = useInstanceId(FormTokenField);
-
-  // We reset to these initial values again in the onBlur
-  const [incompleteTokenValue, setIncompleteTokenValue] = useState('');
+  const [incompleteTokenValue, setIncompleteTokenValue] = useState("");
   const [inputOffsetFromEnd, setInputOffsetFromEnd] = useState(0);
   const [isActive, setIsActive] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -99,7 +78,6 @@ export function FormTokenField(props) {
   const tokensAndInput = useRef(null);
   const debouncedSpeak = useDebounce(speak, 500);
   useEffect(() => {
-    // Make sure to focus the input when the isActive state is true.
     if (isActive && !hasFocus()) {
       focus();
     }
@@ -109,8 +87,6 @@ export function FormTokenField(props) {
     if (suggestionsDidUpdate || value !== prevValue) {
       updateSuggestions(suggestionsDidUpdate);
     }
-
-    // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
   }, [suggestions, prevSuggestions, value, prevValue]);
   useEffect(() => {
     updateSuggestions();
@@ -120,7 +96,7 @@ export function FormTokenField(props) {
   }, [__experimentalAutoSelectFirstMatch]);
   if (disabled && isActive) {
     setIsActive(false);
-    setIncompleteTokenValue('');
+    setIncompleteTokenValue("");
   }
   function focus() {
     input.current?.focus();
@@ -129,19 +105,13 @@ export function FormTokenField(props) {
     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) {
       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().
-       */
       setIsActive(false);
     }
-    if ('function' === typeof onFocus) {
+    if ("function" === typeof onFocus) {
       onFocus(event);
     }
   }
@@ -152,18 +122,13 @@ export function FormTokenField(props) {
         addNewToken(incompleteTokenValue);
       }
     } else {
-      // Reset to initial state
-      setIncompleteTokenValue('');
+      setIncompleteTokenValue("");
       setInputOffsetFromEnd(0);
       setIsActive(false);
       if (__experimentalExpandOnFocus) {
-        // If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
-        // the user clicks on it (`tokensAndInput` will be the element that caused the blur).
         const hasFocusWithin = event.relatedTarget === tokensAndInput.current;
         setIsExpanded(hasFocusWithin);
       } else {
-        // Else collapse the suggestion list. This will result in the suggestion list closing
-        // after a suggestion has been submitted since that causes a blur.
         setIsExpanded(false);
       }
       setSelectedSuggestionIndex(-1);
@@ -176,36 +141,36 @@ export function FormTokenField(props) {
       return;
     }
     switch (event.key) {
-      case 'Backspace':
+      case "Backspace":
         preventDefault = handleDeleteKey(deleteTokenBeforeInput);
         break;
-      case 'Enter':
+      case "Enter":
         preventDefault = addCurrentToken();
         break;
-      case 'ArrowLeft':
+      case "ArrowLeft":
         preventDefault = handleLeftArrowKey();
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         preventDefault = handleUpArrowKey();
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         preventDefault = handleRightArrowKey();
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         preventDefault = handleDownArrowKey();
         break;
-      case 'Delete':
+      case "Delete":
         preventDefault = handleDeleteKey(deleteTokenAfterInput);
         break;
-      case 'Space':
+      case "Space":
         if (tokenizeOnSpace) {
           preventDefault = addCurrentToken();
         }
         break;
-      case 'Escape':
+      case "Escape":
         preventDefault = handleEscapeKey(event);
         break;
-      case 'Tab':
+      case "Tab":
         preventDefault = handleTabKey(event);
         break;
       default:
@@ -218,7 +183,7 @@ export function FormTokenField(props) {
   function onKeyPress(event) {
     let preventDefault = false;
     switch (event.key) {
-      case ',':
+      case ",":
         preventDefault = handleCommaKey();
         break;
       default:
@@ -229,8 +194,6 @@ export function FormTokenField(props) {
     }
   }
   function onContainerTouched(event) {
-    // Prevent clicking/touching the tokensAndInput container from blurring
-    // the input and adding the current token.
     if (event.target === tokensAndInput.current && isActive) {
       event.preventDefault();
     }
@@ -253,7 +216,7 @@ export function FormTokenField(props) {
     const text = event.value;
     const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/;
     const items = text.split(separator);
-    const tokenValue = items[items.length - 1] || '';
+    const tokenValue = items[items.length - 1] || "";
     if (items.length > 1) {
       addNewTokens(items.slice(0, -1));
     }
@@ -285,18 +248,18 @@ export function FormTokenField(props) {
     return preventDefault;
   }
   function handleUpArrowKey() {
-    setSelectedSuggestionIndex(index => {
+    setSelectedSuggestionIndex((index) => {
       return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
     });
     setSelectedSuggestionScroll(true);
-    return true; // PreventDefault.
+    return true;
   }
   function handleDownArrowKey() {
-    setSelectedSuggestionIndex(index => {
+    setSelectedSuggestionIndex((index) => {
       return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length;
     });
     setSelectedSuggestionScroll(true);
-    return true; // PreventDefault.
+    return true;
   }
   function collapseSuggestionsList(event) {
     if (event.target instanceof HTMLInputElement) {
@@ -308,28 +271,28 @@ export function FormTokenField(props) {
   }
   function handleEscapeKey(event) {
     collapseSuggestionsList(event);
-    return true; // PreventDefault.
+    return true;
   }
   function handleTabKey(event) {
     collapseSuggestionsList(event);
-    return false; // Do not prevent the default behavior.
+    return false;
   }
   function handleCommaKey() {
     if (inputHasValidValue()) {
       addNewToken(incompleteTokenValue);
     }
-    return true; // PreventDefault.
+    return true;
   }
   function moveInputToIndex(index) {
     setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1);
   }
   function moveInputBeforePreviousToken() {
-    setInputOffsetFromEnd(prevInputOffsetFromEnd => {
+    setInputOffsetFromEnd((prevInputOffsetFromEnd) => {
       return Math.min(prevInputOffsetFromEnd + 1, value.length);
     });
   }
   function moveInputAfterNextToken() {
-    setInputOffsetFromEnd(prevInputOffsetFromEnd => {
+    setInputOffsetFromEnd((prevInputOffsetFromEnd) => {
       return Math.max(prevInputOffsetFromEnd - 1, 0);
     });
   }
@@ -343,7 +306,6 @@ export function FormTokenField(props) {
     const index = getIndexOfInput();
     if (index < value.length) {
       deleteToken(value[index]);
-      // Update input offset since it's the offset from the last token.
       moveInputToIndex(index);
     }
   }
@@ -360,7 +322,7 @@ export function FormTokenField(props) {
     return preventDefault;
   }
   function addNewTokens(tokens) {
-    const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))];
+    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);
@@ -369,12 +331,12 @@ export function FormTokenField(props) {
   }
   function addNewToken(token) {
     if (!__experimentalValidateInput(token)) {
-      speak(messages.__experimentalInvalid, 'assertive');
+      speak(messages.__experimentalInvalid, "assertive");
       return;
     }
     addNewTokens([token]);
-    speak(messages.added, 'assertive');
-    setIncompleteTokenValue('');
+    speak(messages.added, "assertive");
+    setIncompleteTokenValue("");
     setSelectedSuggestionIndex(-1);
     setSelectedSuggestionScroll(false);
     setIsExpanded(!__experimentalExpandOnFocus);
@@ -383,14 +345,14 @@ export function FormTokenField(props) {
     }
   }
   function deleteToken(token) {
-    const newTokens = value.filter(item => {
+    const newTokens = value.filter((item) => {
       return getTokenValue(item) !== getTokenValue(token);
     });
     onChange(newTokens);
-    speak(messages.removed, 'assertive');
+    speak(messages.removed, "assertive");
   }
   function getTokenValue(token) {
-    if ('object' === typeof token) {
+    if ("object" === typeof token) {
       return token.value;
     }
     return token;
@@ -399,18 +361,18 @@ export function FormTokenField(props) {
     let match = _saveTransform(searchValue);
     const startsWithMatch = [];
     const containsMatch = [];
-    const normalizedValue = _value.map(item => {
-      if (typeof item === 'string') {
+    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));
+      _suggestions = _suggestions.filter((suggestion) => !normalizedValue.includes(suggestion));
     } else {
-      match = match.normalize('NFKC').toLocaleLowerCase();
-      _suggestions.forEach(suggestion => {
-        const index = suggestion.normalize('NFKC').toLocaleLowerCase().indexOf(match);
+      match = match.normalize("NFKC").toLocaleLowerCase();
+      _suggestions.forEach((suggestion) => {
+        const index = suggestion.normalize("NFKC").toLocaleLowerCase().indexOf(match);
         if (normalizedValue.indexOf(suggestion) === -1) {
           if (index === 0) {
             startsWithMatch.push(suggestion);
@@ -427,10 +389,10 @@ export function FormTokenField(props) {
     if (selectedSuggestionIndex !== -1) {
       return getMatchingSuggestions()[selectedSuggestionIndex];
     }
-    return undefined;
+    return void 0;
   }
   function valueContainsToken(token) {
-    return value.some(item => {
+    return value.some((item) => {
       return getTokenValue(token) === getTokenValue(item);
     });
   }
@@ -445,8 +407,8 @@ export function FormTokenField(props) {
   }
   function updateSuggestions(resetSelectedSuggestion = true) {
     const inputHasMinimumChars = incompleteTokenValue.trim().length > 1;
-    const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue);
-    const hasMatchingSuggestions = matchingSuggestions.length > 0;
+    const matchingSuggestions2 = getMatchingSuggestions(incompleteTokenValue);
+    const hasMatchingSuggestions = matchingSuggestions2.length > 0;
     const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus;
     setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions);
     if (resetSelectedSuggestion) {
@@ -459,9 +421,12 @@ export function FormTokenField(props) {
       }
     }
     if (inputHasMinimumChars) {
-      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');
+      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.", matchingSuggestions2.length),
+        matchingSuggestions2.length
+      ) : __("No results.");
+      debouncedSpeak(message, "assertive");
     }
   }
   function renderTokensAndInput() {
@@ -471,50 +436,50 @@ export function FormTokenField(props) {
   }
   function renderToken(token, index, tokens) {
     const _value = getTokenValue(token);
-    const status = typeof token !== 'string' ? token.status : undefined;
+    const status = typeof token !== "string" ? token.status : void 0;
     const termPosition = index + 1;
     const termsCount = tokens.length;
-    return /*#__PURE__*/_jsx(FlexItem, {
-      children: /*#__PURE__*/_jsx(Token, {
+    return /* @__PURE__ */ _jsx(FlexItem, {
+      children: /* @__PURE__ */ _jsx(Token, {
         value: _value,
-        status: status,
-        title: typeof token !== 'string' ? token.title : undefined,
-        displayTransform: displayTransform,
+        status,
+        title: typeof token !== "string" ? token.title : void 0,
+        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
+        isBorderless: typeof token !== "string" && token.isBorderless || isBorderless,
+        onMouseEnter: typeof token !== "string" ? token.onMouseEnter : void 0,
+        onMouseLeave: typeof token !== "string" ? token.onMouseLeave : void 0,
+        disabled: "error" !== status && disabled,
+        messages,
+        termsCount,
+        termPosition
       })
-    }, 'token-' + _value);
+    }, "token-" + _value);
   }
   function renderInput() {
     const inputProps = {
       instanceId,
       autoCapitalize,
       autoComplete,
-      placeholder: value.length === 0 ? placeholder : '',
+      placeholder: value.length === 0 ? placeholder : "",
       disabled,
       value: incompleteTokenValue,
       onBlur,
       isExpanded,
       selectedSuggestionIndex
     };
-    return /*#__PURE__*/_jsx(TokenInput, {
+    return /* @__PURE__ */ _jsx(TokenInput, {
       ...inputProps,
-      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,
+      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : void 0,
       ref: input
     }, "input");
   }
-  const classes = clsx(className, 'components-form-token-field__input-container', {
-    'is-active': isActive,
-    'is-disabled': disabled
+  const classes = clsx(className, "components-form-token-field__input-container", {
+    "is-active": isActive,
+    "is-disabled": disabled
   });
   let tokenFieldProps = {
-    className: 'components-form-token-field',
+    className: "components-form-token-field",
     tabIndex: -1
   };
   const matchingSuggestions = getMatchingSuggestions();
@@ -525,52 +490,50 @@ export function FormTokenField(props) {
       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 /*#__PURE__*/_jsxs("div", {
+  return /* @__PURE__ */ _jsxs("div", {
     ...tokenFieldProps,
-    children: [label && /*#__PURE__*/_jsx(StyledLabel, {
+    children: [label && /* @__PURE__ */ _jsx(StyledLabel, {
       htmlFor: `components-form-token-input-${instanceId}`,
       className: "components-form-token-field__label",
       children: label
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /* @__PURE__ */ _jsxs("div", {
       ref: tokensAndInput,
       className: classes,
       tabIndex: -1,
       onMouseDown: onContainerTouched,
       onTouchStart: onContainerTouched,
-      children: [/*#__PURE__*/_jsx(TokensAndInputWrapperFlex, {
+      children: [/* @__PURE__ */ _jsx(TokensAndInputWrapperFlex, {
         justify: "flex-start",
         align: "center",
         gap: 1,
         wrap: true,
-        __next40pxDefaultSize: __next40pxDefaultSize,
+        __next40pxDefaultSize,
         hasTokens: !!value.length,
         children: renderTokensAndInput()
-      }), isExpanded && /*#__PURE__*/_jsx(SuggestionsList, {
-        instanceId: instanceId,
+      }), isExpanded && /* @__PURE__ */ _jsx(SuggestionsList, {
+        instanceId,
         match: saveTransform(incompleteTokenValue),
-        displayTransform: displayTransform,
+        displayTransform,
         suggestions: matchingSuggestions,
         selectedIndex: selectedSuggestionIndex,
         scrollIntoView: selectedSuggestionScroll,
         onHover: onSuggestionHovered,
         onSelect: onSuggestionSelected,
-        __experimentalRenderItem: __experimentalRenderItem
+        __experimentalRenderItem
       })]
-    }), !__nextHasNoMarginBottom && /*#__PURE__*/_jsx(Spacer, {
+    }), !__nextHasNoMarginBottom && /* @__PURE__ */ _jsx(Spacer, {
       marginBottom: 2
-    }), __experimentalShowHowTo && /*#__PURE__*/_jsx(StyledHelp, {
+    }), __experimentalShowHowTo && /* @__PURE__ */ _jsx(StyledHelp, {
       id: `components-form-token-suggestions-howto-${instanceId}`,
       className: "components-form-token-field__help",
-      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-      children: tokenizeOnSpace ? __('Separate with commas, spaces, or the Enter key.') : __('Separate with commas or the Enter key.')
+      __nextHasNoMarginBottom,
+      children: 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
+var form_token_field_default = FormTokenField;
+export {
+  FormTokenField,
+  form_token_field_default as default
+};
+//# sourceMappingURL=index.js.map