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

package/build-module/components/url-input/button.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["__","useReducer","Button","__experimentalInputControlSuffixWrapper","InputControlSuffixWrapper","link","keyboardReturn","arrowLeft","URLInput","jsx","_jsx","jsxs","_jsxs","URLInputButton","url","onChange","expanded","toggleExpanded","isExpanded","submitLink","event","preventDefault","className","children","size","icon","label","onClick","isPressed","onSubmit","__next40pxDefaultSize","value","suffix","variant","type"],"sources":["@wordpress/block-editor/src/components/url-input/button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useReducer } from '@wordpress/element';\nimport {\n\tButton,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from '@wordpress/components';\nimport { link, keyboardReturn, arrowLeft } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport URLInput from './';\n\n/**\n * A button that toggles a URL input field for inserting or editing links.\n *\n * @param {Object}   props          Component properties.\n * @param {string}   props.url      The current URL value.\n * @param {Function} props.onChange Callback function to handle URL changes.\n * @return {JSX.Element} The URL input button component.\n */\nfunction URLInputButton( { url, onChange } ) {\n\tconst [ expanded, toggleExpanded ] = useReducer(\n\t\t( isExpanded ) => ! isExpanded,\n\t\tfalse\n\t);\n\n\tconst submitLink = ( event ) => {\n\t\tevent.preventDefault();\n\t\ttoggleExpanded();\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-url-input__button\">\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ link }\n\t\t\t\tlabel={ url ? __( 'Edit link' ) : __( 'Insert link' ) }\n\t\t\t\tonClick={ toggleExpanded }\n\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\tisPressed={ !! url }\n\t\t\t/>\n\t\t\t{ expanded && (\n\t\t\t\t<form\n\t\t\t\t\tclassName=\"block-editor-url-input__button-modal\"\n\t\t\t\t\tonSubmit={ submitLink }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"block-editor-url-input__button-modal-line\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"block-editor-url-input__back\"\n\t\t\t\t\t\t\ticon={ arrowLeft }\n\t\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\t\tonClick={ toggleExpanded }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<URLInput\n\t\t\t\t\t\t\tvalue={ url || '' }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Submit' ) }\n\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md\n */\nexport default URLInputButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SACCC,MAAM,EACNC,uCAAuC,IAAIC,yBAAyB,QAC9D,uBAAuB;AAC9B,SAASC,IAAI,EAAEC,cAAc,EAAEC,SAAS,QAAQ,kBAAkB;;AAElE;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,IAAI;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQA,SAASC,cAAcA,CAAE;EAAEC,GAAG;EAAEC;AAAS,CAAC,EAAG;EAC5C,MAAM,CAAEC,QAAQ,EAAEC,cAAc,CAAE,GAAGhB,UAAU,CAC5CiB,UAAU,IAAM,CAAEA,UAAU,EAC9B,KACD,CAAC;EAED,MAAMC,UAAU,GAAKC,KAAK,IAAM;IAC/BA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBJ,cAAc,CAAC,CAAC;EACjB,CAAC;EAED,oBACCL,KAAA;IAAKU,SAAS,EAAC,gCAAgC;IAAAC,QAAA,gBAC9Cb,IAAA,CAACR,MAAM;MACNsB,IAAI,EAAC,SAAS;MACdC,IAAI,EAAGpB,IAAM;MACbqB,KAAK,EAAGZ,GAAG,GAAGd,EAAE,CAAE,WAAY,CAAC,GAAGA,EAAE,CAAE,aAAc,CAAG;MACvD2B,OAAO,EAAGV,cAAgB;MAC1BK,SAAS,EAAC,6BAA6B;MACvCM,SAAS,EAAG,CAAC,CAAEd;IAAK,CACpB,CAAC,EACAE,QAAQ,iBACTN,IAAA;MACCY,SAAS,EAAC,sCAAsC;MAChDO,QAAQ,EAAGV,UAAY;MAAAI,QAAA,eAEvBX,KAAA;QAAKU,SAAS,EAAC,2CAA2C;QAAAC,QAAA,gBACzDb,IAAA,CAACR,MAAM;UACN4B,qBAAqB;UACrBR,SAAS,EAAC,8BAA8B;UACxCG,IAAI,EAAGlB,SAAW;UAClBmB,KAAK,EAAG1B,EAAE,CAAE,OAAQ,CAAG;UACvB2B,OAAO,EAAGV;QAAgB,CAC1B,CAAC,eACFP,IAAA,CAACF,QAAQ;UACRuB,KAAK,EAAGjB,GAAG,IAAI,EAAI;UACnBC,QAAQ,EAAGA,QAAU;UACrBiB,MAAM,eACLtB,IAAA,CAACN,yBAAyB;YAAC6B,OAAO,EAAC,SAAS;YAAAV,QAAA,eAC3Cb,IAAA,CAACR,MAAM;cACNsB,IAAI,EAAC,OAAO;cACZC,IAAI,EAAGnB,cAAgB;cACvBoB,KAAK,EAAG1B,EAAE,CAAE,QAAS,CAAG;cACxBkC,IAAI,EAAC;YAAQ,CACb;UAAC,CACwB;QAC3B,CACD,CAAC;MAAA,CACE;IAAC,CACD,CACN;EAAA,CACG,CAAC;AAER;;AAEA;AACA;AACA;AACA,eAAerB,cAAc","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/url-input/button.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useReducer } from '@wordpress/element';\nimport {\n\tButton,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from '@wordpress/components';\nimport { link, keyboardReturn, arrowLeft } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport URLInput from './';\n\n/**\n * A button that toggles a URL input field for inserting or editing links.\n *\n * @param {Object}   props          Component properties.\n * @param {string}   props.url      The current URL value.\n * @param {Function} props.onChange Callback function to handle URL changes.\n * @return {JSX.Element} The URL input button component.\n */\nfunction URLInputButton( { url, onChange } ) {\n\tconst [ expanded, toggleExpanded ] = useReducer(\n\t\t( isExpanded ) => ! isExpanded,\n\t\tfalse\n\t);\n\n\tconst submitLink = ( event ) => {\n\t\tevent.preventDefault();\n\t\ttoggleExpanded();\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-url-input__button\">\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ link }\n\t\t\t\tlabel={ url ? __( 'Edit link' ) : __( 'Insert link' ) }\n\t\t\t\tonClick={ toggleExpanded }\n\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\tisPressed={ !! url }\n\t\t\t/>\n\t\t\t{ expanded && (\n\t\t\t\t<form\n\t\t\t\t\tclassName=\"block-editor-url-input__button-modal\"\n\t\t\t\t\tonSubmit={ submitLink }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"block-editor-url-input__button-modal-line\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"block-editor-url-input__back\"\n\t\t\t\t\t\t\ticon={ arrowLeft }\n\t\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\t\tonClick={ toggleExpanded }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<URLInput\n\t\t\t\t\t\t\tvalue={ url || '' }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Submit' ) }\n\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md\n */\nexport default URLInputButton;\n"],
+  "mappings": "AAqCG,cAaE,YAbF;AAlCH,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B;AAAA,EACC;AAAA,EACA,2CAA2C;AAAA,OACrC;AACP,SAAS,MAAM,gBAAgB,iBAAiB;AAKhD,OAAO,cAAc;AAUrB,SAAS,eAAgB,EAAE,KAAK,SAAS,GAAI;AAC5C,QAAM,CAAE,UAAU,cAAe,IAAI;AAAA,IACpC,CAAE,eAAgB,CAAE;AAAA,IACpB;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,UAAW;AAC/B,UAAM,eAAe;AACrB,mBAAe;AAAA,EAChB;AAEA,SACC,qBAAC,SAAI,WAAU,kCACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,MAAO;AAAA,QACP,OAAQ,MAAM,GAAI,WAAY,IAAI,GAAI,aAAc;AAAA,QACpD,SAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAY,CAAC,CAAE;AAAA;AAAA,IAChB;AAAA,IACE,YACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,UAAW;AAAA,QAEX,+BAAC,SAAI,WAAU,6CACd;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,WAAU;AAAA,cACV,MAAO;AAAA,cACP,OAAQ,GAAI,OAAQ;AAAA,cACpB,SAAU;AAAA;AAAA,UACX;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,OAAQ,OAAO;AAAA,cACf;AAAA,cACA,QACC,oBAAC,6BAA0B,SAAQ,WAClC;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,MAAO;AAAA,kBACP,OAAQ,GAAI,QAAS;AAAA,kBACrB,MAAK;AAAA;AAAA,cACN,GACD;AAAA;AAAA,UAEF;AAAA,WACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAKA,IAAO,iBAAQ;",
+  "names": []
+}

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

@@ -1,34 +1,28 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf, _n } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
-import { BaseControl, Button, __experimentalInputControl as InputControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
-import { compose, debounce, withInstanceId, withSafeTimeout } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { isURL } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import clsx from "clsx";
+import { __, sprintf, _n } from "@wordpress/i18n";
+import { Component, createRef } from "@wordpress/element";
+import { UP, DOWN, ENTER, TAB } from "@wordpress/keycodes";
+import {
+  BaseControl,
+  Button,
+  __experimentalInputControl as InputControl,
+  Spinner,
+  withSpokenMessages,
+  Popover
+} from "@wordpress/components";
+import {
+  compose,
+  debounce,
+  withInstanceId,
+  withSafeTimeout
+} from "@wordpress/compose";
+import { withSelect } from "@wordpress/data";
+import { isURL } from "@wordpress/url";
+import { store as blockEditorStore } from "../../store";
 function isFunction(maybeFunc) {
-  return typeof maybeFunc === 'function';
+  return typeof maybeFunc === "function";
 }
 class URLInput extends Component {
   constructor(props) {
@@ -40,8 +34,11 @@ class URLInput extends Component {
     this.handleOnClick = this.handleOnClick.bind(this);
     this.bindSuggestionNode = this.bindSuggestionNode.bind(this);
     this.autocompleteRef = props.autocompleteRef || createRef();
-    this.inputRef = createRef();
-    this.updateSuggestions = debounce(this.updateSuggestions.bind(this), 200);
+    this.inputRef = props.inputRef || createRef();
+    this.updateSuggestions = debounce(
+      this.updateSuggestions.bind(this),
+      200
+    );
     this.suggestionNodes = [];
     this.suggestionsRequest = null;
     this.state = {
@@ -49,37 +46,24 @@ class URLInput extends 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();
       }
     }
@@ -94,18 +78,15 @@ class URLInput extends 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
@@ -113,19 +94,8 @@ class URLInput extends 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 && isURL(value))) {
       this.suggestionsRequest?.cancel?.();
       this.suggestionsRequest = null;
@@ -145,10 +115,7 @@ class URLInput extends 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;
       }
@@ -159,10 +126,23 @@ class URLInput extends Component {
         showSuggestions: !!suggestions.length
       });
       if (!!suggestions.length) {
-        this.props.debouncedSpeak(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.', suggestions.length), suggestions.length), 'assertive');
+        this.props.debouncedSpeak(
+          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.",
+              suggestions.length
+            ),
+            suggestions.length
+          ),
+          "assertive"
+        );
       } else {
-        this.props.debouncedSpeak(__('No results.'), 'assertive');
+        this.props.debouncedSpeak(
+          __("No results."),
+          "assertive"
+        );
       }
     }).catch(() => {
       if (this.suggestionsRequest !== request) {
@@ -172,134 +152,96 @@ class URLInput extends 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 UP:
-          {
-            if (0 !== event.target.selectionStart) {
-              event.preventDefault();
-
-              // Set the input caret to position 0.
-              event.target.setSelectionRange(0, 0);
-            }
-            break;
+        case 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 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 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 ENTER:
-          {
-            if (this.props.onSubmit) {
-              event.preventDefault();
-              this.props.onSubmit(null, event);
-            }
-            break;
+        case 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 UP:
-        {
-          event.preventDefault();
-          const previousIndex = !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
-          this.setState({
-            selectedSuggestion: previousIndex
-          });
-          break;
-        }
-      case DOWN:
-        {
-          event.preventDefault();
-          const nextIndex = selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1;
-          this.setState({
-            selectedSuggestion: nextIndex
-          });
-          break;
+      case UP: {
+        event.preventDefault();
+        const previousIndex = !selectedSuggestion ? suggestions.length - 1 : selectedSuggestion - 1;
+        this.setState({
+          selectedSuggestion: previousIndex
+        });
+        break;
+      }
+      case DOWN: {
+        event.preventDefault();
+        const nextIndex = selectedSuggestion === null || selectedSuggestion === suggestions.length - 1 ? 0 : selectedSuggestion + 1;
+        this.setState({
+          selectedSuggestion: nextIndex
+        });
+        break;
+      }
+      case TAB: {
+        if (this.state.selectedSuggestion !== null) {
+          this.selectLink(suggestion);
+          this.props.speak(__("Link selected."));
         }
-      case 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(__('Link selected.'));
+        break;
+      }
+      case ENTER: {
+        event.preventDefault();
+        if (this.state.selectedSuggestion !== null) {
+          this.selectLink(suggestion);
+          if (this.props.onSubmit) {
+            this.props.onSubmit(suggestion, event);
           }
-          break;
-        }
-      case 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) {
@@ -311,7 +253,6 @@ class URLInput extends Component {
   }
   handleOnClick(suggestion) {
     this.selectLink(suggestion);
-    // Move focus to the input field when a link suggestion is clicked.
     this.inputRef.current.focus();
   }
   static getDerivedStateFromProps({
@@ -319,9 +260,7 @@ class URLInput extends Component {
     instanceId,
     disableSuggestions,
     __experimentalShowInitialSuggestions = false
-  }, {
-    showSuggestions
-  }) {
+  }, { showSuggestions }) {
     let shouldShowSuggestions = showSuggestions;
     const hasValue = value && value.length;
     if (!__experimentalShowInitialSuggestions && !hasValue) {
@@ -337,9 +276,10 @@ class URLInput extends Component {
     };
   }
   render() {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [this.renderControl(), this.renderSuggestions()]
-    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      this.renderControl(),
+      this.renderSuggestions()
+    ] });
   }
   renderControl() {
     const {
@@ -347,10 +287,12 @@ class URLInput extends Component {
       className,
       isFullWidth,
       instanceId,
-      placeholder = __('Paste URL or type to search'),
+      placeholder = __("Paste URL or type to search"),
       __experimentalRenderControl: renderControl,
-      value = '',
-      hideLabelFromVision = false
+      value = "",
+      hideLabelFromVision = false,
+      help = null,
+      disabled = false
     } = this.props;
     const {
       loading,
@@ -364,8 +306,8 @@ class URLInput extends Component {
       id: inputId,
       // Passes attribute to label for the for attribute
       label,
-      className: clsx('block-editor-url-input', className, {
-        'is-full-width': isFullWidth
+      className: clsx("block-editor-url-input", className, {
+        "is-full-width": isFullWidth
       }),
       hideLabelFromVision
     };
@@ -373,32 +315,36 @@ class URLInput extends 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 : __('URL'),
+      onKeyDown: disabled ? () => {
+      } : this.onKeyDown,
+      // Disable onKeyDown when disabled
+      role: "combobox",
+      "aria-label": label ? void 0 : __("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__*/_jsxs(BaseControl, {
-      __nextHasNoMarginBottom: true,
-      ...controlProps,
-      children: [/*#__PURE__*/_jsx(InputControl, {
-        ...inputProps,
-        __next40pxDefaultSize: true
-      }), loading && /*#__PURE__*/_jsx(Spinner, {})]
-    });
+    return /* @__PURE__ */ jsxs(BaseControl, { __nextHasNoMarginBottom: true, ...controlProps, children: [
+      /* @__PURE__ */ jsx(InputControl, { ...inputProps, __next40pxDefaultSize: true }),
+      loading && /* @__PURE__ */ jsx(Spinner, {})
+    ] });
   }
   renderSuggestions() {
     const {
@@ -420,15 +366,15 @@ class URLInput extends 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)) {
@@ -443,42 +389,48 @@ class URLInput extends Component {
         currentInputValue: suggestionsValue
       });
     }
-    return /*#__PURE__*/_jsx(Popover, {
-      placement: "bottom",
-      focusOnMount: false,
-      children: /*#__PURE__*/_jsx("div", {
+    return /* @__PURE__ */ jsx(Popover, { placement: "bottom", focusOnMount: false, children: /* @__PURE__ */ jsx(
+      "div",
+      {
         ...suggestionsListProps,
-        className: clsx('block-editor-url-input__suggestions', {
+        className: clsx("block-editor-url-input__suggestions", {
           [`${className}__suggestions`]: className
         }),
-        children: suggestions.map((suggestion, index) => /*#__PURE__*/_createElement(Button, {
-          __next40pxDefaultSize: true,
-          ...buildSuggestionItemProps(suggestion, index),
-          key: suggestion.id,
-          className: clsx('block-editor-url-input__suggestion', {
-            'is-selected': index === selectedSuggestion
-          }),
-          onClick: () => this.handleOnClick(suggestion)
-        }, suggestion.title))
-      })
-    });
+        children: suggestions.map((suggestion, index) => /* @__PURE__ */ createElement(
+          Button,
+          {
+            __next40pxDefaultSize: true,
+            ...buildSuggestionItemProps(suggestion, index),
+            key: suggestion.id,
+            className: clsx(
+              "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
- */
-export default compose(withSafeTimeout, withSpokenMessages, withInstanceId, withSelect((select, props) => {
-  // If a link suggestions handler is already provided then
-  // bail.
-  if (isFunction(props.__experimentalFetchLinkSuggestions)) {
-    return;
-  }
-  const {
-    getSettings
-  } = select(blockEditorStore);
-  return {
-    __experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions
-  };
-}))(URLInput);
-//# sourceMappingURL=index.js.map
+var url_input_default = compose(
+  withSafeTimeout,
+  withSpokenMessages,
+  withInstanceId,
+  withSelect((select, props) => {
+    if (isFunction(props.__experimentalFetchLinkSuggestions)) {
+      return;
+    }
+    const { getSettings } = select(blockEditorStore);
+    return {
+      __experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions
+    };
+  })
+)(URLInput);
+export {
+  url_input_default as default
+};
+//# sourceMappingURL=index.js.map