Dropdown: Popover content is wrong positioned

[mmtr]

Describe the bug
When rendering a Dropdown component outside Gutenberg, the popover content is wrong positioned.

To Reproduce
Execute the code below in a new React project after installing @wordpress/components.

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Dropdown } from '@wordpress/components';

import '@wordpress/components/build-style/styles.css';

const MyDropdown = () => (
	<Dropdown
		position="bottom right"
		renderToggle={ ( { isOpen, onToggle } ) => (
			<Button isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
				Toggle Popover!
			</Button>
		) }
		renderContent={ () => (
			<div>
				This is the content of the popover.
			</div>
		) }
	/>
);

ReactDOM.render(
	<MyDropdown />,
	document.getElementById( 'root' )
);

Expected behavior
The popover content should be displayed below the button.

Screenshots

Desktop:

• OS: macOS High Sierra
• Browser Chrome
• Version 67

Additional context
Issue found while working on #8338 and Automattic/wp-calypso#26367

[youknowriad]

I'm not certain this is an issue.

In this particular example if you give a className to the dropdown component and display it as an "inline-block" it will show up properly. The idea is that the popover shows up centered within the Dropdown component's container.

Should we make the dropdown's container always inline-block by default? Maybe, but we should be careful about the consequences.

[rmorse]

In case it helps anyone, I've been having some similar issues with this, and the color picker tooltips in standalone React apps.

If you are making applications outside of Block Editor and want to use these features, make sure to add a

<SlotFillProvider /> and a <Popopver.Slot />

So your app could look something like this:

<SlotFillProvider>
	<YourApp />
	<Popover.Slot />
</SlotFillProvider>

[dlxsnippets]

If you are making applications outside of Block Editor and want to use these features, make sure to add a

<SlotFillProvider /> and a <Popopver.Slot />

So your app could look something like this:

<SlotFillProvider>
	<YourApp />
	<Popover.Slot />
</SlotFillProvider>

@rmorse This is AMAZING. I've been debugging this now for a few hours and you got it on the nose. Thanks so much.