Make wrapper-element configurable

[flash1293]

This PR uses a span as the wrapping element instead of a div. This makes it possible to use the component inside of elements which prohibit the usage of block-elements as children like paragraphs.

Example:

<p><Autocomplete {/*...*/} /></p>

Prodcues the error <div> cannot appear as a descendant of <p>. See ... > Autocomplete > div.

Tests are not adjusted, I will add them tomorrow.

[CMTegner]

Hi Johannes! I think I'd rather wait for something like https://github.com/reactjs/react-autocomplete/issues/298 instead of changing the root node type, as this will likely cause problems for people who rely on the rapper being a <div>. If you feel like having an attempt at implementing the that suggestion it would be greatly appreciated.

[flash1293]

Fair enough - what about a new prop renderWrapper analogous to renderInput and renderMenu? It would be a function with the parameters wrapperProps, wrapperStyle, renderedInput and renderedMenu, default is something like

return <div style={{wrapperStyle}} {...wrapperProps}>
{renderedInput}
{renderedMenu}
</div>;

Pros:

• no breaking change
• #298 covered
• even more flexibility for the consumer

Would be happy to adjust the PR if you agree.

[CMTegner]

Sounds good! I wonder if maybe we should rather pass in renderInput and renderMenu in addition to isOpen, so you have full control over what you want to render.

[flash1293]

@CMTegner I added the renderWrapper prop. I'm not sure what you mean by full control. With open, renderMenu, renderInput and now renderWrapper, the user should be in complete control of the render-output.

[bitionaire]

y no merge?