@wordpress/block-editor 16.0.0 → 16.1.0

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

@@ -30,10 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/components/url-input/index.js
 var url_input_exports = {};
 __export(url_input_exports, {
-  default: () => url_input_default
+  default: () => URLInput
 });
 module.exports = __toCommonJS(url_input_exports);
 var import_clsx = __toESM(require("clsx"));
+var import_a11y = require("@wordpress/a11y");
 var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
 var import_keycodes = require("@wordpress/keycodes");
@@ -46,158 +47,162 @@ var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var { ValidatedInputControl } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+var noop = () => {
+};
 function isFunction(maybeFunc) {
   return typeof maybeFunc === "function";
 }
-var URLInput = class extends import_element.Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.selectLink = this.selectLink.bind(this);
-    this.handleOnClick = this.handleOnClick.bind(this);
-    this.bindSuggestionNode = this.bindSuggestionNode.bind(this);
-    this.autocompleteRef = props.autocompleteRef || (0, import_element.createRef)();
-    this.inputRef = props.inputRef || (0, import_element.createRef)();
-    this.hasRenderedValidation = { current: false };
-    this.updateSuggestions = (0, import_compose.debounce)(
-      this.updateSuggestions.bind(this),
-      200
-    );
-    this.suggestionNodes = [];
-    this.suggestionsRequest = null;
-    this.state = {
-      suggestions: [],
-      showSuggestions: false,
-      suggestionsValue: null,
-      selectedSuggestion: null,
-      suggestionsListboxId: "",
-      suggestionOptionIdPrefix: ""
-    };
-  }
-  componentDidUpdate(prevProps) {
-    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"
-      });
-    }
-    if (prevProps.value !== value && !this.props.disableSuggestions) {
-      if (value?.length) {
-        this.updateSuggestions(value);
-      } else if (__experimentalShowInitialSuggestions) {
-        this.updateSuggestions();
-      }
-    }
-  }
-  componentDidMount() {
-    if (this.shouldShowInitialSuggestions()) {
-      this.updateSuggestions();
-    }
-  }
-  componentWillUnmount() {
-    this.suggestionsRequest?.cancel?.();
-    this.suggestionsRequest = null;
-  }
-  bindSuggestionNode(index) {
-    return (ref) => {
-      this.suggestionNodes[index] = ref;
-    };
-  }
-  shouldShowInitialSuggestions() {
-    const { __experimentalShowInitialSuggestions = false, value } = this.props;
-    return __experimentalShowInitialSuggestions && !(value && value.length);
-  }
-  updateSuggestions(value = "") {
-    const {
-      __experimentalFetchLinkSuggestions: fetchLinkSuggestions,
-      __experimentalHandleURLSuggestions: handleURLSuggestions
-    } = this.props;
+function URLInput(props) {
+  const {
+    __experimentalFetchLinkSuggestions: fetchLinkSuggestionsProp,
+    __experimentalHandleURLSuggestions: handleURLSuggestions,
+    __experimentalRenderControl: renderControl,
+    __experimentalRenderSuggestions: renderSuggestions,
+    __experimentalShowInitialSuggestions: showInitialSuggestions = false,
+    autocompleteRef,
+    className,
+    customValidity,
+    disableSuggestions,
+    disabled = false,
+    help = null,
+    hideLabelFromVision = false,
+    inputRef,
+    isFullWidth,
+    label = null,
+    markWhenOptional,
+    onChange,
+    onKeyDown,
+    onSubmit,
+    placeholder = (0, import_i18n.__)("Paste URL or type to search"),
+    required = true,
+    suffix,
+    value = ""
+  } = props;
+  const instanceId = (0, import_compose.useInstanceId)(URLInput);
+  const { getSettings } = (0, import_data.useSelect)(import_store.store);
+  const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500);
+  const [suggestions, setSuggestions] = (0, import_element.useState)([]);
+  const [suggestionsValue, setSuggestionsValue] = (0, import_element.useState)(null);
+  const [selectedSuggestion, setSelectedSuggestion] = (0, import_element.useState)(null);
+  const [isSuggestionsListOpen, setIsSuggestionsListOpen] = (0, import_element.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_element.useState)(false);
+  const fallbackInputRef = (0, import_element.useRef)();
+  const suggestionNodesRef = (0, import_element.useRef)([]);
+  const suggestionsRequestRef = (0, import_element.useRef)(null);
+  const controlInputRef = inputRef ?? fallbackInputRef;
+  const inputId = `url-input-control-${instanceId}`;
+  const suggestionsListboxId = `block-editor-url-input-suggestions-${instanceId}`;
+  const suggestionOptionIdPrefix = `block-editor-url-input-suggestion-${instanceId}`;
+  const showSuggestions = isSuggestionsListOpen && disableSuggestions !== true && (showInitialSuggestions || !!value.length);
+  const updateSuggestions = (0, import_compose.useEvent)((searchValue = "") => {
+    const fetchLinkSuggestions = isFunction(fetchLinkSuggestionsProp) ? fetchLinkSuggestionsProp : getSettings().__experimentalFetchLinkSuggestions;
     if (!fetchLinkSuggestions) {
       return;
     }
-    const isInitialSuggestions = !value?.length;
-    value = value.trim();
-    if (!isInitialSuggestions && (value.length < 2 || !handleURLSuggestions && (0, import_url.isURL)(value))) {
-      this.suggestionsRequest?.cancel?.();
-      this.suggestionsRequest = null;
-      this.setState({
-        suggestions: [],
-        showSuggestions: false,
-        suggestionsValue: value,
-        selectedSuggestion: null,
-        loading: false
-      });
+    const isInitialSuggestions = !searchValue?.length;
+    const search = searchValue.trim();
+    if (!isInitialSuggestions && (search.length < 2 || !handleURLSuggestions && (0, import_url.isURL)(search))) {
+      suggestionsRequestRef.current?.cancel?.();
+      suggestionsRequestRef.current = null;
+      setSuggestions([]);
+      setIsSuggestionsListOpen(false);
+      setSuggestionsValue(search);
+      setSelectedSuggestion(null);
+      setIsLoading(false);
       return;
     }
-    this.setState({
-      selectedSuggestion: null,
-      loading: true
-    });
-    const request = fetchLinkSuggestions(value, {
+    setSelectedSuggestion(null);
+    setIsLoading(true);
+    const request = fetchLinkSuggestions(search, {
       isInitialSuggestions
     });
-    request.then((suggestions) => {
-      if (this.suggestionsRequest !== request) {
+    suggestionsRequestRef.current = request;
+    request.then((nextSuggestions) => {
+      if (suggestionsRequestRef.current !== request) {
         return;
       }
-      this.setState({
-        suggestions,
-        suggestionsValue: value,
-        loading: false,
-        showSuggestions: !!suggestions.length
-      });
-      if (!!suggestions.length) {
-        this.props.debouncedSpeak(
+      setSuggestions(nextSuggestions);
+      setSuggestionsValue(search);
+      setIsLoading(false);
+      setIsSuggestionsListOpen(!!nextSuggestions.length);
+      if (nextSuggestions.length) {
+        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
+              nextSuggestions.length
             ),
-            suggestions.length
+            nextSuggestions.length
           ),
           "assertive"
         );
       } else {
-        this.props.debouncedSpeak(
-          (0, import_i18n.__)("No results."),
-          "assertive"
-        );
+        debouncedSpeak((0, import_i18n.__)("No results."), "assertive");
       }
     }).catch(() => {
-      if (this.suggestionsRequest !== request) {
+      if (suggestionsRequestRef.current !== request) {
         return;
       }
-      this.setState({
-        loading: false
-      });
+      setIsLoading(false);
     }).finally(() => {
-      if (this.suggestionsRequest === request) {
-        this.suggestionsRequest = null;
+      if (suggestionsRequestRef.current === request) {
+        suggestionsRequestRef.current = null;
       }
     });
-    this.suggestionsRequest = request;
+  });
+  const debouncedUpdateSuggestions = (0, import_compose.useDebounce)(updateSuggestions, 200);
+  (0, import_element.useEffect)(() => {
+    if (!disableSuggestions && (value.length || showInitialSuggestions)) {
+      debouncedUpdateSuggestions(value);
+    }
+  }, [
+    value,
+    disableSuggestions,
+    showInitialSuggestions,
+    debouncedUpdateSuggestions
+  ]);
+  (0, import_element.useEffect)(() => {
+    if (!showSuggestions) {
+      setIsSuggestionsListOpen(false);
+    }
+  }, [showSuggestions]);
+  (0, import_element.useEffect)(() => {
+    if (showSuggestions && selectedSuggestion !== null) {
+      suggestionNodesRef.current[selectedSuggestion]?.scrollIntoView({
+        behavior: "instant",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  }, [showSuggestions, selectedSuggestion]);
+  (0, import_element.useEffect)(() => {
+    return () => {
+      suggestionsRequestRef.current?.cancel?.();
+      suggestionsRequestRef.current = null;
+    };
+  }, []);
+  function selectLink(suggestion) {
+    onChange(suggestion.url, suggestion);
+    setSelectedSuggestion(null);
+    setIsSuggestionsListOpen(false);
+  }
+  function handleSuggestionClick(suggestion) {
+    selectLink(suggestion);
+    controlInputRef.current.focus();
   }
-  onChange(newValue) {
-    this.props.onChange(newValue);
+  function handleChange(newValue) {
+    onChange(newValue);
   }
-  onFocus() {
-    const { suggestions } = this.state;
-    const { disableSuggestions, value } = this.props;
-    if (value && !disableSuggestions && !(suggestions && suggestions.length) && this.suggestionsRequest === null) {
-      this.updateSuggestions(value);
+  function handleFocus() {
+    if (value && !disableSuggestions && !suggestions.length && suggestionsRequestRef.current === null) {
+      debouncedUpdateSuggestions(value);
     }
   }
-  onKeyDown(event) {
-    this.props.onKeyDown?.(event);
-    const { showSuggestions, selectedSuggestion, suggestions, loading } = this.state;
-    if (!showSuggestions || !suggestions.length || loading) {
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (!showSuggestions || !suggestions.length || isLoading) {
       switch (event.keyCode) {
         // When UP is pressed, if the caret is at the start of the text, move it to the 0
         // position.
@@ -211,273 +216,227 @@ var URLInput = class extends import_element.Component {
         // When DOWN is pressed, if the caret is not at the end of the text, move it to the
         // last position.
         case import_keycodes.DOWN: {
-          if (this.props.value.length !== event.target.selectionStart) {
+          if (value.length !== event.target.selectionStart) {
             event.preventDefault();
             event.target.setSelectionRange(
-              this.props.value.length,
-              this.props.value.length
+              value.length,
+              value.length
             );
           }
           break;
         }
         // Submitting while loading should trigger onSubmit.
         case import_keycodes.ENTER: {
-          if (this.props.onSubmit) {
+          if (onSubmit) {
             event.preventDefault();
-            this.props.onSubmit(null, event);
+            onSubmit(null, event);
           }
           break;
         }
       }
       return;
     }
-    const suggestion = this.state.suggestions[this.state.selectedSuggestion];
+    const suggestion = suggestions[selectedSuggestion];
     switch (event.keyCode) {
       case import_keycodes.UP: {
         event.preventDefault();
-        const previousIndex = !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
-        this.setState({
-          selectedSuggestion: previousIndex
-        });
+        setSelectedSuggestion(
+          !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1
+        );
         break;
       }
       case import_keycodes.DOWN: {
         event.preventDefault();
-        const nextIndex = selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1;
-        this.setState({
-          selectedSuggestion: nextIndex
-        });
+        setSelectedSuggestion(
+          selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1
+        );
         break;
       }
       case import_keycodes.TAB: {
-        if (this.state.selectedSuggestion !== null) {
-          this.selectLink(suggestion);
-          this.props.speak((0, import_i18n.__)("Link selected."));
+        if (selectedSuggestion !== null) {
+          selectLink(suggestion);
+          (0, import_a11y.speak)((0, import_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);
+        if (selectedSuggestion !== null) {
+          selectLink(suggestion);
+          if (onSubmit) {
+            onSubmit(suggestion, event);
           }
-        } else if (this.props.onSubmit) {
-          this.props.onSubmit(null, event);
+        } else if (onSubmit) {
+          onSubmit(null, event);
         }
         break;
       }
     }
   }
-  selectLink(suggestion) {
-    this.props.onChange(suggestion.url, suggestion);
-    this.setState({
-      selectedSuggestion: null,
-      showSuggestions: false
-    });
-  }
-  handleOnClick(suggestion) {
-    this.selectLink(suggestion);
-    this.inputRef.current.focus();
-  }
-  static getDerivedStateFromProps({
+  const controlProps = {
+    id: inputId,
+    // Passes attribute to label for the for attribute
+    label,
+    className: (0, import_clsx.default)("block-editor-url-input", className, {
+      "is-full-width": isFullWidth
+    }),
+    hideLabelFromVision
+  };
+  const inputProps = {
+    id: inputId,
     value,
-    instanceId,
-    disableSuggestions,
-    __experimentalShowInitialSuggestions = false
-  }, { showSuggestions }) {
-    let shouldShowSuggestions = showSuggestions;
-    const hasValue = value && value.length;
-    if (!__experimentalShowInitialSuggestions && !hasValue) {
-      shouldShowSuggestions = false;
-    }
-    if (disableSuggestions === true) {
-      shouldShowSuggestions = false;
-    }
-    return {
-      showSuggestions: shouldShowSuggestions,
-      suggestionsListboxId: `block-editor-url-input-suggestions-${instanceId}`,
-      suggestionOptionIdPrefix: `block-editor-url-input-suggestion-${instanceId}`
-    };
+    required,
+    type: "text",
+    name: inputId,
+    autoComplete: "off",
+    onChange: disabled ? noop : handleChange,
+    onFocus: disabled ? noop : handleFocus,
+    onKeyDown: disabled ? noop : handleKeyDown,
+    placeholder,
+    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}` : void 0,
+    ref: controlInputRef,
+    disabled,
+    suffix,
+    help
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Control,
+      {
+        controlProps,
+        inputProps,
+        isLoading,
+        customValidity,
+        markWhenOptional,
+        renderControl
+      }
+    ),
+    showSuggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Suggestions,
+      {
+        autocompleteRef,
+        className,
+        handleSuggestionClick,
+        isLoading,
+        renderSuggestions,
+        selectedSuggestion,
+        suggestionNodesRef,
+        suggestionOptionIdPrefix,
+        suggestions,
+        suggestionsListboxId,
+        suggestionsValue
+      }
+    )
+  ] });
+}
+function Control({
+  controlProps,
+  inputProps,
+  isLoading,
+  customValidity,
+  markWhenOptional,
+  renderControl
+}) {
+  const [isValidated, setIsValidated] = (0, import_element.useState)(
+    customValidity !== void 0
+  );
+  if (customValidity !== void 0 && !isValidated) {
+    setIsValidated(true);
   }
-  render() {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      this.renderControl(),
-      this.renderSuggestions()
-    ] });
+  if (renderControl) {
+    return renderControl(controlProps, inputProps, isLoading);
   }
-  renderControl() {
-    const {
-      label = null,
-      className,
-      isFullWidth,
-      instanceId,
-      placeholder = (0, import_i18n.__)("Paste URL or type to search"),
-      __experimentalRenderControl: renderControl,
-      value = "",
-      hideLabelFromVision = false,
-      help = null,
-      disabled = false,
-      customValidity,
-      markWhenOptional
-    } = this.props;
-    const {
-      loading,
-      showSuggestions,
-      selectedSuggestion,
-      suggestionsListboxId,
-      suggestionOptionIdPrefix
-    } = this.state;
-    const inputId = `url-input-control-${instanceId}`;
-    const controlProps = {
-      id: inputId,
-      // Passes attribute to label for the for attribute
-      label,
-      className: (0, import_clsx.default)("block-editor-url-input", className, {
-        "is-full-width": isFullWidth
-      }),
-      hideLabelFromVision
-    };
-    const inputProps = {
-      id: inputId,
-      value,
-      required: this.props.required ?? true,
-      type: "text",
-      name: inputId,
-      autoComplete: "off",
-      onChange: disabled ? () => {
-      } : this.onChange,
-      // Disable onChange when disabled
-      onFocus: disabled ? () => {
-      } : this.onFocus,
-      // Disable onFocus when disabled
-      placeholder,
-      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}` : void 0,
-      ref: this.inputRef,
-      disabled,
-      suffix: this.props.suffix,
-      help
-    };
-    const validationProps = {
-      customValidity,
-      // Suppress the "(Required)" indicator in the label.
-      // The field is still required for validation, but the indicator
-      // can be hidden when markWhenOptional is set to true.
-      ...markWhenOptional !== void 0 && {
-        markWhenOptional
+  const MaybeValidatedInputControl = isValidated ? ValidatedInputControl : import_components.__experimentalInputControl;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.BaseControl, { ...controlProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      MaybeValidatedInputControl,
+      {
+        ...inputProps,
+        ...isValidated && {
+          customValidity,
+          // Suppress the "(Required)" indicator in the label.
+          // The field is still required for validation, but the indicator
+          // can be hidden when markWhenOptional is set to true.
+          ...markWhenOptional !== void 0 && {
+            markWhenOptional
+          }
+        }
       }
+    ),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+  ] });
+}
+function Suggestions({
+  autocompleteRef,
+  className,
+  handleSuggestionClick,
+  isLoading,
+  renderSuggestions,
+  selectedSuggestion,
+  suggestionNodesRef,
+  suggestionOptionIdPrefix,
+  suggestions,
+  suggestionsListboxId,
+  suggestionsValue
+}) {
+  const suggestionsListProps = {
+    id: suggestionsListboxId,
+    ref: autocompleteRef,
+    role: "listbox"
+  };
+  const buildSuggestionItemProps = (suggestion, index) => {
+    return {
+      role: "option",
+      tabIndex: "-1",
+      id: `${suggestionOptionIdPrefix}-${index}`,
+      ref: (node) => {
+        suggestionNodesRef.current[index] = node;
+      },
+      "aria-selected": index === selectedSuggestion ? true : void 0
     };
-    if (renderControl) {
-      return renderControl(controlProps, inputProps, loading);
-    }
-    if (customValidity !== void 0) {
-      this.hasRenderedValidation.current = true;
-    }
-    const MaybeValidatedInputControl = this.hasRenderedValidation.current ? ValidatedInputControl : import_components.__experimentalInputControl;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.BaseControl, { ...controlProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        MaybeValidatedInputControl,
-        {
-          ...inputProps,
-          ...this.hasRenderedValidation.current ? validationProps : {},
-          __next40pxDefaultSize: true
-        }
-      ),
-      loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
-    ] });
-  }
-  renderSuggestions() {
-    const {
-      className,
-      __experimentalRenderSuggestions: renderSuggestions
-    } = this.props;
-    const {
-      showSuggestions,
+  };
+  if (isFunction(renderSuggestions)) {
+    return renderSuggestions({
       suggestions,
-      suggestionsValue,
       selectedSuggestion,
-      suggestionsListboxId,
-      suggestionOptionIdPrefix,
-      loading
-    } = this.state;
-    if (!showSuggestions || suggestions.length === 0) {
-      return null;
-    }
-    const suggestionsListProps = {
-      id: suggestionsListboxId,
-      ref: this.autocompleteRef,
-      role: "listbox"
-    };
-    const buildSuggestionItemProps = (suggestion, index) => {
-      return {
-        role: "option",
-        tabIndex: "-1",
-        id: `${suggestionOptionIdPrefix}-${index}`,
-        ref: this.bindSuggestionNode(index),
-        "aria-selected": index === selectedSuggestion ? true : void 0
-      };
-    };
-    if (isFunction(renderSuggestions)) {
-      return renderSuggestions({
-        suggestions,
-        selectedSuggestion,
-        suggestionsListProps,
-        buildSuggestionItemProps,
-        isLoading: loading,
-        handleSuggestionClick: this.handleOnClick,
-        isInitialSuggestions: !suggestionsValue?.length,
-        currentInputValue: suggestionsValue
-      });
-    }
-    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, import_clsx.default)("block-editor-url-input__suggestions", {
-          [`${className}__suggestions`]: className
-        }),
-        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
-        ))
-      }
-    ) });
+      suggestionsListProps,
+      buildSuggestionItemProps,
+      isLoading,
+      handleSuggestionClick,
+      isInitialSuggestions: !suggestionsValue?.length,
+      currentInputValue: suggestionsValue
+    });
   }
-};
-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;
+  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, import_clsx.default)("block-editor-url-input__suggestions", {
+        [`${className}__suggestions`]: className
+      }),
+      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: () => handleSuggestionClick(suggestion)
+        },
+        suggestion.title
+      ))
     }
-    const { getSettings } = select(import_store.store);
-    return {
-      __experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions
-    };
-  })
-)(URLInput);
+  ) });
+}
 //# sourceMappingURL=index.cjs.map