@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

package/build/components/url-input/index.js

@@ -1,42 +1,51 @@
 "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 url_input_exports = {};
+__export(url_input_exports, {
+  default: () => url_input_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _keycodes = require("@wordpress/keycodes");
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _data = require("@wordpress/data");
-var _url = require("@wordpress/url");
-var _store = require("../../store");
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */function isFunction(maybeFunc) {
-  return typeof maybeFunc === 'function';
+module.exports = __toCommonJS(url_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_keycodes = require("@wordpress/keycodes");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_data = require("@wordpress/data");
+var import_url = require("@wordpress/url");
+var import_store = require("../../store");
+function isFunction(maybeFunc) {
+  return typeof maybeFunc === "function";
 }
-class URLInput extends _element.Component {
+class URLInput extends import_element.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
@@ -45,9 +54,12 @@ class URLInput extends _element.Component {
     this.selectLink = this.selectLink.bind(this);
     this.handleOnClick = this.handleOnClick.bind(this);
     this.bindSuggestionNode = this.bindSuggestionNode.bind(this);
-    this.autocompleteRef = props.autocompleteRef || (0, _element.createRef)();
-    this.inputRef = (0, _element.createRef)();
-    this.updateSuggestions = (0, _compose.debounce)(this.updateSuggestions.bind(this), 200);
+    this.autocompleteRef = props.autocompleteRef || (0, import_element.createRef)();
+    this.inputRef = props.inputRef || (0, import_element.createRef)();
+    this.updateSuggestions = (0, import_compose.debounce)(
+      this.updateSuggestions.bind(this),
+      200
+    );
     this.suggestionNodes = [];
     this.suggestionsRequest = null;
     this.state = {
@@ -55,37 +67,24 @@ class URLInput extends _element.Component {
       showSuggestions: false,
       suggestionsValue: null,
       selectedSuggestion: null,
-      suggestionsListboxId: '',
-      suggestionOptionIdPrefix: ''
+      suggestionsListboxId: "",
+      suggestionOptionIdPrefix: ""
     };
   }
   componentDidUpdate(prevProps) {
-    const {
-      showSuggestions,
-      selectedSuggestion
-    } = this.state;
-    const {
-      value,
-      __experimentalShowInitialSuggestions = false
-    } = this.props;
-
-    // Only have to worry about scrolling selected suggestion into view
-    // when already expanded.
+    const { showSuggestions, selectedSuggestion } = this.state;
+    const { value, __experimentalShowInitialSuggestions = false } = this.props;
     if (showSuggestions && selectedSuggestion !== null && this.suggestionNodes[selectedSuggestion]) {
       this.suggestionNodes[selectedSuggestion].scrollIntoView({
-        behavior: 'instant',
-        block: 'nearest',
-        inline: 'nearest'
+        behavior: "instant",
+        block: "nearest",
+        inline: "nearest"
       });
     }
-
-    // Update suggestions when the value changes.
     if (prevProps.value !== value && !this.props.disableSuggestions) {
       if (value?.length) {
-        // If the new value is not empty we need to update with suggestions for it.
         this.updateSuggestions(value);
       } else if (__experimentalShowInitialSuggestions) {
-        // If the new value is empty and we can show initial suggestions, then show initial suggestions.
         this.updateSuggestions();
       }
     }
@@ -100,18 +99,15 @@ class URLInput extends _element.Component {
     this.suggestionsRequest = null;
   }
   bindSuggestionNode(index) {
-    return ref => {
+    return (ref) => {
       this.suggestionNodes[index] = ref;
     };
   }
   shouldShowInitialSuggestions() {
-    const {
-      __experimentalShowInitialSuggestions = false,
-      value
-    } = this.props;
+    const { __experimentalShowInitialSuggestions = false, value } = this.props;
     return __experimentalShowInitialSuggestions && !(value && value.length);
   }
-  updateSuggestions(value = '') {
+  updateSuggestions(value = "") {
     const {
       __experimentalFetchLinkSuggestions: fetchLinkSuggestions,
       __experimentalHandleURLSuggestions: handleURLSuggestions
@@ -119,20 +115,9 @@ class URLInput extends _element.Component {
     if (!fetchLinkSuggestions) {
       return;
     }
-
-    // Initial suggestions may only show if there is no value
-    // (note: this includes whitespace).
     const isInitialSuggestions = !value?.length;
-
-    // Trim only now we've determined whether or not it originally had a "length"
-    // (even if that value was all whitespace).
     value = value.trim();
-
-    // Allow a suggestions request if:
-    // - there are at least 2 characters in the search input (except manual searches where
-    //   search input length is not required to trigger a fetch)
-    // - this is a direct entry (eg: a URL)
-    if (!isInitialSuggestions && (value.length < 2 || !handleURLSuggestions && (0, _url.isURL)(value))) {
+    if (!isInitialSuggestions && (value.length < 2 || !handleURLSuggestions && (0, import_url.isURL)(value))) {
       this.suggestionsRequest?.cancel?.();
       this.suggestionsRequest = null;
       this.setState({
@@ -151,10 +136,7 @@ class URLInput extends _element.Component {
     const request = fetchLinkSuggestions(value, {
       isInitialSuggestions
     });
-    request.then(suggestions => {
-      // A fetch Promise doesn't have an abort option. It's mimicked by
-      // comparing the request reference in on the instance, which is
-      // reset or deleted on subsequent requests or unmounting.
+    request.then((suggestions) => {
       if (this.suggestionsRequest !== request) {
         return;
       }
@@ -165,10 +147,23 @@ class URLInput extends _element.Component {
         showSuggestions: !!suggestions.length
       });
       if (!!suggestions.length) {
-        this.props.debouncedSpeak((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.', suggestions.length), suggestions.length), 'assertive');
+        this.props.debouncedSpeak(
+          (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.",
+              suggestions.length
+            ),
+            suggestions.length
+          ),
+          "assertive"
+        );
       } else {
-        this.props.debouncedSpeak((0, _i18n.__)('No results.'), 'assertive');
+        this.props.debouncedSpeak(
+          (0, import_i18n.__)("No results."),
+          "assertive"
+        );
       }
     }).catch(() => {
       if (this.suggestionsRequest !== request) {
@@ -178,134 +173,96 @@ class URLInput extends _element.Component {
         loading: false
       });
     }).finally(() => {
-      // If this is the current promise then reset the reference
-      // to allow for checking if a new request is made.
       if (this.suggestionsRequest === request) {
         this.suggestionsRequest = null;
       }
     });
-
-    // Note that this assignment is handled *before* the async search request
-    // as a Promise always resolves on the next tick of the event loop.
     this.suggestionsRequest = request;
   }
   onChange(newValue) {
     this.props.onChange(newValue);
   }
   onFocus() {
-    const {
-      suggestions
-    } = this.state;
-    const {
-      disableSuggestions,
-      value
-    } = this.props;
-
-    // When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value
-    // Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)
-    // or there is already a request in progress.
+    const { suggestions } = this.state;
+    const { disableSuggestions, value } = this.props;
     if (value && !disableSuggestions && !(suggestions && suggestions.length) && this.suggestionsRequest === null) {
-      // Ensure the suggestions are updated with the current input value.
       this.updateSuggestions(value);
     }
   }
   onKeyDown(event) {
     this.props.onKeyDown?.(event);
-    const {
-      showSuggestions,
-      selectedSuggestion,
-      suggestions,
-      loading
-    } = this.state;
-
-    // If the suggestions are not shown or loading, we shouldn't handle the arrow keys
-    // We shouldn't preventDefault to allow block arrow keys navigation.
+    const { showSuggestions, selectedSuggestion, suggestions, loading } = this.state;
     if (!showSuggestions || !suggestions.length || loading) {
-      // In the Windows version of Firefox the up and down arrows don't move the caret
-      // within an input field like they do for Mac Firefox/Chrome/Safari. This causes
-      // a form of focus trapping that is disruptive to the user experience. This disruption
-      // only happens if the caret is not in the first or last position in the text input.
-      // See: https://github.com/WordPress/gutenberg/issues/5693#issuecomment-436684747
       switch (event.keyCode) {
         // When UP is pressed, if the caret is at the start of the text, move it to the 0
         // position.
-        case _keycodes.UP:
-          {
-            if (0 !== event.target.selectionStart) {
-              event.preventDefault();
-
-              // Set the input caret to position 0.
-              event.target.setSelectionRange(0, 0);
-            }
-            break;
+        case import_keycodes.UP: {
+          if (0 !== event.target.selectionStart) {
+            event.preventDefault();
+            event.target.setSelectionRange(0, 0);
           }
+          break;
+        }
         // When DOWN is pressed, if the caret is not at the end of the text, move it to the
         // last position.
-        case _keycodes.DOWN:
-          {
-            if (this.props.value.length !== event.target.selectionStart) {
-              event.preventDefault();
-
-              // Set the input caret to the last position.
-              event.target.setSelectionRange(this.props.value.length, this.props.value.length);
-            }
-            break;
+        case import_keycodes.DOWN: {
+          if (this.props.value.length !== event.target.selectionStart) {
+            event.preventDefault();
+            event.target.setSelectionRange(
+              this.props.value.length,
+              this.props.value.length
+            );
           }
-
+          break;
+        }
         // Submitting while loading should trigger onSubmit.
-        case _keycodes.ENTER:
-          {
-            if (this.props.onSubmit) {
-              event.preventDefault();
-              this.props.onSubmit(null, event);
-            }
-            break;
+        case import_keycodes.ENTER: {
+          if (this.props.onSubmit) {
+            event.preventDefault();
+            this.props.onSubmit(null, event);
           }
+          break;
+        }
       }
       return;
     }
     const suggestion = this.state.suggestions[this.state.selectedSuggestion];
     switch (event.keyCode) {
-      case _keycodes.UP:
-        {
-          event.preventDefault();
-          const previousIndex = !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
-          this.setState({
-            selectedSuggestion: previousIndex
-          });
-          break;
-        }
-      case _keycodes.DOWN:
-        {
-          event.preventDefault();
-          const nextIndex = selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1;
-          this.setState({
-            selectedSuggestion: nextIndex
-          });
-          break;
+      case import_keycodes.UP: {
+        event.preventDefault();
+        const previousIndex = !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
+        this.setState({
+          selectedSuggestion: previousIndex
+        });
+        break;
+      }
+      case import_keycodes.DOWN: {
+        event.preventDefault();
+        const nextIndex = selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1;
+        this.setState({
+          selectedSuggestion: nextIndex
+        });
+        break;
+      }
+      case import_keycodes.TAB: {
+        if (this.state.selectedSuggestion !== null) {
+          this.selectLink(suggestion);
+          this.props.speak((0, import_i18n.__)("Link selected."));
         }
-      case _keycodes.TAB:
-        {
-          if (this.state.selectedSuggestion !== null) {
-            this.selectLink(suggestion);
-            // Announce a link has been selected when tabbing away from the input field.
-            this.props.speak((0, _i18n.__)('Link selected.'));
+        break;
+      }
+      case import_keycodes.ENTER: {
+        event.preventDefault();
+        if (this.state.selectedSuggestion !== null) {
+          this.selectLink(suggestion);
+          if (this.props.onSubmit) {
+            this.props.onSubmit(suggestion, event);
           }
-          break;
-        }
-      case _keycodes.ENTER:
-        {
-          event.preventDefault();
-          if (this.state.selectedSuggestion !== null) {
-            this.selectLink(suggestion);
-            if (this.props.onSubmit) {
-              this.props.onSubmit(suggestion, event);
-            }
-          } else if (this.props.onSubmit) {
-            this.props.onSubmit(null, event);
-          }
-          break;
+        } else if (this.props.onSubmit) {
+          this.props.onSubmit(null, event);
         }
+        break;
+      }
     }
   }
   selectLink(suggestion) {
@@ -317,7 +274,6 @@ class URLInput extends _element.Component {
   }
   handleOnClick(suggestion) {
     this.selectLink(suggestion);
-    // Move focus to the input field when a link suggestion is clicked.
     this.inputRef.current.focus();
   }
   static getDerivedStateFromProps({
@@ -325,9 +281,7 @@ class URLInput extends _element.Component {
     instanceId,
     disableSuggestions,
     __experimentalShowInitialSuggestions = false
-  }, {
-    showSuggestions
-  }) {
+  }, { showSuggestions }) {
     let shouldShowSuggestions = showSuggestions;
     const hasValue = value && value.length;
     if (!__experimentalShowInitialSuggestions && !hasValue) {
@@ -343,9 +297,10 @@ class URLInput extends _element.Component {
     };
   }
   render() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [this.renderControl(), this.renderSuggestions()]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      this.renderControl(),
+      this.renderSuggestions()
+    ] });
   }
   renderControl() {
     const {
@@ -353,10 +308,12 @@ class URLInput extends _element.Component {
       className,
       isFullWidth,
       instanceId,
-      placeholder = (0, _i18n.__)('Paste URL or type to search'),
+      placeholder = (0, import_i18n.__)("Paste URL or type to search"),
       __experimentalRenderControl: renderControl,
-      value = '',
-      hideLabelFromVision = false
+      value = "",
+      hideLabelFromVision = false,
+      help = null,
+      disabled = false
     } = this.props;
     const {
       loading,
@@ -370,8 +327,8 @@ class URLInput extends _element.Component {
       id: inputId,
       // Passes attribute to label for the for attribute
       label,
-      className: (0, _clsx.default)('block-editor-url-input', className, {
-        'is-full-width': isFullWidth
+      className: (0, import_clsx.default)("block-editor-url-input", className, {
+        "is-full-width": isFullWidth
       }),
       hideLabelFromVision
     };
@@ -379,32 +336,36 @@ class URLInput extends _element.Component {
       id: inputId,
       value,
       required: true,
-      type: 'text',
-      onChange: this.onChange,
-      onFocus: this.onFocus,
+      type: "text",
+      onChange: disabled ? () => {
+      } : this.onChange,
+      // Disable onChange when disabled
+      onFocus: disabled ? () => {
+      } : this.onFocus,
+      // Disable onFocus when disabled
       placeholder,
-      onKeyDown: this.onKeyDown,
-      role: 'combobox',
-      'aria-label': label ? undefined : (0, _i18n.__)('URL'),
+      onKeyDown: disabled ? () => {
+      } : this.onKeyDown,
+      // Disable onKeyDown when disabled
+      role: "combobox",
+      "aria-label": label ? void 0 : (0, import_i18n.__)("URL"),
       // Ensure input always has an accessible label
-      'aria-expanded': showSuggestions,
-      'aria-autocomplete': 'list',
-      'aria-owns': suggestionsListboxId,
-      'aria-activedescendant': selectedSuggestion !== null ? `${suggestionOptionIdPrefix}-${selectedSuggestion}` : undefined,
+      "aria-expanded": showSuggestions,
+      "aria-autocomplete": "list",
+      "aria-owns": suggestionsListboxId,
+      "aria-activedescendant": selectedSuggestion !== null ? `${suggestionOptionIdPrefix}-${selectedSuggestion}` : void 0,
       ref: this.inputRef,
-      suffix: this.props.suffix
+      disabled,
+      suffix: this.props.suffix,
+      help
     };
     if (renderControl) {
       return renderControl(controlProps, inputProps, loading);
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BaseControl, {
-      __nextHasNoMarginBottom: true,
-      ...controlProps,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-        ...inputProps,
-        __next40pxDefaultSize: true
-      }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.BaseControl, { __nextHasNoMarginBottom: true, ...controlProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControl, { ...inputProps, __next40pxDefaultSize: true }),
+      loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+    ] });
   }
   renderSuggestions() {
     const {
@@ -426,15 +387,15 @@ class URLInput extends _element.Component {
     const suggestionsListProps = {
       id: suggestionsListboxId,
       ref: this.autocompleteRef,
-      role: 'listbox'
+      role: "listbox"
     };
     const buildSuggestionItemProps = (suggestion, index) => {
       return {
-        role: 'option',
-        tabIndex: '-1',
+        role: "option",
+        tabIndex: "-1",
         id: `${suggestionOptionIdPrefix}-${index}`,
         ref: this.bindSuggestionNode(index),
-        'aria-selected': index === selectedSuggestion ? true : undefined
+        "aria-selected": index === selectedSuggestion ? true : void 0
       };
     };
     if (isFunction(renderSuggestions)) {
@@ -449,42 +410,45 @@ class URLInput extends _element.Component {
         currentInputValue: suggestionsValue
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
-      placement: "bottom",
-      focusOnMount: false,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Popover, { placement: "bottom", focusOnMount: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
         ...suggestionsListProps,
-        className: (0, _clsx.default)('block-editor-url-input__suggestions', {
+        className: (0, import_clsx.default)("block-editor-url-input__suggestions", {
           [`${className}__suggestions`]: className
         }),
-        children: suggestions.map((suggestion, index) => /*#__PURE__*/(0, _react.createElement)(_components.Button, {
-          __next40pxDefaultSize: true,
-          ...buildSuggestionItemProps(suggestion, index),
-          key: suggestion.id,
-          className: (0, _clsx.default)('block-editor-url-input__suggestion', {
-            'is-selected': index === selectedSuggestion
-          }),
-          onClick: () => this.handleOnClick(suggestion)
-        }, suggestion.title))
-      })
-    });
+        children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_react.createElement)(
+          import_components.Button,
+          {
+            __next40pxDefaultSize: true,
+            ...buildSuggestionItemProps(suggestion, index),
+            key: suggestion.id,
+            className: (0, import_clsx.default)(
+              "block-editor-url-input__suggestion",
+              {
+                "is-selected": index === selectedSuggestion
+              }
+            ),
+            onClick: () => this.handleOnClick(suggestion)
+          },
+          suggestion.title
+        ))
+      }
+    ) });
   }
 }
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md
- */
-var _default = exports.default = (0, _compose.compose)(_compose.withSafeTimeout, _components.withSpokenMessages, _compose.withInstanceId, (0, _data.withSelect)((select, props) => {
-  // If a link suggestions handler is already provided then
-  // bail.
-  if (isFunction(props.__experimentalFetchLinkSuggestions)) {
-    return;
-  }
-  const {
-    getSettings
-  } = select(_store.store);
-  return {
-    __experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions
-  };
-}))(URLInput);
-//# sourceMappingURL=index.js.map
+var url_input_default = (0, import_compose.compose)(
+  import_compose.withSafeTimeout,
+  import_components.withSpokenMessages,
+  import_compose.withInstanceId,
+  (0, import_data.withSelect)((select, props) => {
+    if (isFunction(props.__experimentalFetchLinkSuggestions)) {
+      return;
+    }
+    const { getSettings } = select(import_store.store);
+    return {
+      __experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions
+    };
+  })
+)(URLInput);
+//# sourceMappingURL=index.js.map