Description

URLInput makes it possible to customize how suggestions are rendered via __experimentalRenderSuggestions. Unfortunately, it assumes that the general structure of the component is more or less as follows:

<BaseControl>
    <input />
    <LoadingIndicator />
    <Popover><Suggestions /></Popover>
</BaseControl>

This works for some use cases, but doesn't serve the in-toolbar editing () very well, where the following structure would be preferred:

<>
    <div>
        <InputControl suffix={ <LoadingIndicator /> } />
    </div>
    <Popover><Suggestions /></Popover>
</>

(Note that aria-activedescendant allows this change in structure as long as valid aria-owns is present)

This PR closes this gap by adding an __experimentalRenderControl prop. Let's take a look at quick&dirty example of usage:

<URLInput
    renderControl={ ( controlProps, inputProps, isLoading ) => (
        <InputControl
            { ...controlProps }
            { ...inputProps } 
            prefix={
                <div className="toolbar-link-control__icon-wrapper">
                    <Icon icon={ linkIcon } />
                </div>
            }/>
    ) }
/>

And a result:

How has this been tested?

This PR is not supposed to change any behavior. To test it, simply walk through a few places where the URLInput is used (a full list available at #24089) and confirm they work the same before and after applying this PR.

Alternatives considered

At this point it seems like the control and suggestions could become two separate components. Alternatively, their respective logic could be extracted into hooks. The scope of such changes would be large and the usefulness very limited at this time so I decided to update the URLInput component as it is.

Types of changes

Non-breaking changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.