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

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

@@ -1,77 +1,82 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_token_field_exports = {};
+__export(form_token_field_exports, {
+  FormTokenField: () => FormTokenField,
+  default: () => form_token_field_default
 });
-exports.FormTokenField = FormTokenField;
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _compose = require("@wordpress/compose");
-var _a11y = require("@wordpress/a11y");
-var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
-var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
-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");
-var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
-var _deprecated36pxSize = require("../utils/deprecated-36px-size");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * 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.
- *
- * 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.
- */
+module.exports = __toCommonJS(form_token_field_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_compose = require("@wordpress/compose");
+var import_a11y = require("@wordpress/a11y");
+var import_is_shallow_equal = __toESM(require("@wordpress/is-shallow-equal"));
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_token = __toESM(require("./token"));
+var import_token_input = __toESM(require("./token-input"));
+var import_styles = require("./styles");
+var import_suggestions_list = __toESM(require("./suggestions-list"));
+var import_flex = require("../flex");
+var import_base_control_styles = require("../base-control/styles/base-control-styles");
+var import_spacer = require("../spacer");
+var import_use_deprecated_props = require("../utils/use-deprecated-props");
+var import_with_ignore_ime_events = require("../utils/with-ignore-ime-events");
+var import_deprecated_36px_size = require("../utils/deprecated-36px-size");
+var import_jsx_runtime = require("react/jsx-runtime");
+const identity = (value) => value;
 function FormTokenField(props) {
   const {
     autoCapitalize,
     autoComplete,
     maxLength,
     placeholder,
-    label = (0, _i18n.__)('Add item'),
+    label = (0, import_i18n.__)("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: (0, _i18n.__)('Item added.'),
-      removed: (0, _i18n.__)('Item removed.'),
-      remove: (0, _i18n.__)('Remove item'),
-      __experimentalInvalid: (0, _i18n.__)('Invalid item')
+      added: (0, import_i18n.__)("Item added."),
+      removed: (0, import_i18n.__)("Item removed."),
+      remove: (0, import_i18n.__)("Remove item"),
+      __experimentalInvalid: (0, import_i18n.__)("Invalid item")
     },
     __experimentalRenderItem,
     __experimentalExpandOnFocus = false,
@@ -81,56 +86,51 @@ function FormTokenField(props) {
     __experimentalAutoSelectFirstMatch = false,
     __nextHasNoMarginBottom = false,
     tokenizeOnBlur = false
-  } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
+  } = (0, import_use_deprecated_props.useDeprecated36pxDefaultSizeProp)(props);
   if (!__nextHasNoMarginBottom) {
-    (0, _deprecated.default)('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.'
+    (0, import_deprecated.default)("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."
     });
   }
-  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
-    componentName: 'FormTokenField',
-    size: undefined,
+  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
+    componentName: "FormTokenField",
+    size: void 0,
     __next40pxDefaultSize
   });
-  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.
+  const instanceId = (0, import_compose.useInstanceId)(FormTokenField);
+  const [incompleteTokenValue, setIncompleteTokenValue] = (0, import_element.useState)("");
+  const [inputOffsetFromEnd, setInputOffsetFromEnd] = (0, import_element.useState)(0);
+  const [isActive, setIsActive] = (0, import_element.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_element.useState)(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_element.useState)(-1);
+  const [selectedSuggestionScroll, setSelectedSuggestionScroll] = (0, import_element.useState)(false);
+  const prevSuggestions = (0, import_compose.usePrevious)(suggestions);
+  const prevValue = (0, import_compose.usePrevious)(value);
+  const input = (0, import_element.useRef)(null);
+  const tokensAndInput = (0, import_element.useRef)(null);
+  const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500);
+  (0, import_element.useEffect)(() => {
     if (isActive && !hasFocus()) {
       focus();
     }
   }, [isActive]);
-  (0, _element.useEffect)(() => {
-    const suggestionsDidUpdate = !(0, _isShallowEqual.default)(suggestions, prevSuggestions || []);
+  (0, import_element.useEffect)(() => {
+    const suggestionsDidUpdate = !(0, import_is_shallow_equal.default)(suggestions, prevSuggestions || []);
     if (suggestionsDidUpdate || value !== prevValue) {
       updateSuggestions(suggestionsDidUpdate);
     }
-
-    // TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
   }, [suggestions, prevSuggestions, value, prevValue]);
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     updateSuggestions();
   }, [incompleteTokenValue]);
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     updateSuggestions();
   }, [__experimentalAutoSelectFirstMatch]);
   if (disabled && isActive) {
     setIsActive(false);
-    setIncompleteTokenValue('');
+    setIncompleteTokenValue("");
   }
   function focus() {
     input.current?.focus();
@@ -139,19 +139,13 @@ 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);
     }
   }
@@ -162,18 +156,13 @@ 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);
@@ -186,36 +175,36 @@ 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:
@@ -228,7 +217,7 @@ function FormTokenField(props) {
   function onKeyPress(event) {
     let preventDefault = false;
     switch (event.key) {
-      case ',':
+      case ",":
         preventDefault = handleCommaKey();
         break;
       default:
@@ -239,8 +228,6 @@ 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();
     }
@@ -263,7 +250,7 @@ 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));
     }
@@ -295,18 +282,18 @@ 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) {
@@ -318,28 +305,28 @@ 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);
     });
   }
@@ -353,7 +340,6 @@ 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);
     }
   }
@@ -370,7 +356,7 @@ 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);
@@ -379,12 +365,12 @@ function FormTokenField(props) {
   }
   function addNewToken(token) {
     if (!__experimentalValidateInput(token)) {
-      (0, _a11y.speak)(messages.__experimentalInvalid, 'assertive');
+      (0, import_a11y.speak)(messages.__experimentalInvalid, "assertive");
       return;
     }
     addNewTokens([token]);
-    (0, _a11y.speak)(messages.added, 'assertive');
-    setIncompleteTokenValue('');
+    (0, import_a11y.speak)(messages.added, "assertive");
+    setIncompleteTokenValue("");
     setSelectedSuggestionIndex(-1);
     setSelectedSuggestionScroll(false);
     setIsExpanded(!__experimentalExpandOnFocus);
@@ -393,14 +379,14 @@ function FormTokenField(props) {
     }
   }
   function deleteToken(token) {
-    const newTokens = value.filter(item => {
+    const newTokens = value.filter((item) => {
       return getTokenValue(item) !== getTokenValue(token);
     });
     onChange(newTokens);
-    (0, _a11y.speak)(messages.removed, 'assertive');
+    (0, import_a11y.speak)(messages.removed, "assertive");
   }
   function getTokenValue(token) {
-    if ('object' === typeof token) {
+    if ("object" === typeof token) {
       return token.value;
     }
     return token;
@@ -409,18 +395,18 @@ 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);
@@ -437,10 +423,10 @@ 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);
     });
   }
@@ -455,8 +441,8 @@ 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) {
@@ -469,9 +455,12 @@ function FormTokenField(props) {
       }
     }
     if (inputHasMinimumChars) {
-      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');
+      const message = hasMatchingSuggestions ? (0, import_i18n.sprintf)(
+        /* translators: %d: number of results. */
+        (0, import_i18n._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
+      ) : (0, import_i18n.__)("No results.");
+      debouncedSpeak(message, "assertive");
     }
   }
   function renderTokensAndInput() {
@@ -481,106 +470,104 @@ 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__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_token.default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_flex.FlexItem, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_token.default, {
         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__*/(0, _jsxRuntime.jsx)(_tokenInput.default, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_token_input.default, {
       ...inputProps,
-      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined,
+      onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : void 0,
       ref: input
     }, "input");
   }
-  const classes = (0, _clsx.default)(className, 'components-form-token-field__input-container', {
-    'is-active': isActive,
-    'is-disabled': disabled
+  const classes = (0, import_clsx.default)(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();
   if (!disabled) {
     tokenFieldProps = Object.assign({}, tokenFieldProps, {
-      onKeyDown: (0, _withIgnoreImeEvents.withIgnoreIMEEvents)(onKeyDown),
+      onKeyDown: (0, import_with_ignore_ime_events.withIgnoreIMEEvents)(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 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     ...tokenFieldProps,
-    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
+    children: [label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control_styles.StyledLabel, {
       htmlFor: `components-form-token-input-${instanceId}`,
       className: "components-form-token-field__label",
       children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
       ref: tokensAndInput,
       className: classes,
       tabIndex: -1,
       onMouseDown: onContainerTouched,
       onTouchStart: onContainerTouched,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TokensAndInputWrapperFlex, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.TokensAndInputWrapperFlex, {
         justify: "flex-start",
         align: "center",
         gap: 1,
         wrap: true,
-        __next40pxDefaultSize: __next40pxDefaultSize,
+        __next40pxDefaultSize,
         hasTokens: !!value.length,
         children: renderTokensAndInput()
-      }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_suggestionsList.default, {
-        instanceId: instanceId,
+      }), isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_suggestions_list.default, {
+        instanceId,
         match: saveTransform(incompleteTokenValue),
-        displayTransform: displayTransform,
+        displayTransform,
         suggestions: matchingSuggestions,
         selectedIndex: selectedSuggestionIndex,
         scrollIntoView: selectedSuggestionScroll,
         onHover: onSuggestionHovered,
         onSelect: onSuggestionSelected,
-        __experimentalRenderItem: __experimentalRenderItem
+        __experimentalRenderItem
       })]
-    }), !__nextHasNoMarginBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
+    }), !__nextHasNoMarginBottom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
       marginBottom: 2
-    }), __experimentalShowHowTo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledHelp, {
+    }), __experimentalShowHowTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_base_control_styles.StyledHelp, {
       id: `components-form-token-suggestions-howto-${instanceId}`,
       className: "components-form-token-field__help",
-      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-      children: tokenizeOnSpace ? (0, _i18n.__)('Separate with commas, spaces, or the Enter key.') : (0, _i18n.__)('Separate with commas or the Enter key.')
+      __nextHasNoMarginBottom,
+      children: tokenizeOnSpace ? (0, import_i18n.__)("Separate with commas, spaces, or the Enter key.") : (0, import_i18n.__)("Separate with commas or the Enter key.")
     })]
   });
-  /* eslint-enable jsx-a11y/no-static-element-interactions */
 }
-var _default = exports.default = FormTokenField;
-//# sourceMappingURL=index.js.map
+var form_token_field_default = FormTokenField;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormTokenField
+});
+//# sourceMappingURL=index.js.map