This component will effectively replace 'react-tether' in our codebase as well as any other type of positioning logic where a target/overlay relationship is necessary.
Components that use this:

• Dropdown

• Popover

• Datepicker

• Timepicker

• Selection

• MultiSelection

This component should make it possible to opt-in to rendering into a Portal as well as provide the proper hooks for when the overlay is rendered. Non-portal rendering should be the default.

The component should also account for situations where the overlay might normally be rendered outside of the border of the screen or outside of the visible area of an overflow: hidden container.

Some of our overlay components have an implementation of looping through their children and cloning them via cloneElement. This isn't what we want for this.. nor do we want a first-child, 2nd child API (like react-tether)... ideally we have something that allows for better separation between the 'target' and the 'overlay' - this may be a single child for the target and a prop for the 'overlay', or a similar configuration.

John Coburn Investigated React-popper for this, but it seems a bit overkill (relies on context, strange API). And it also looks like MaterialUI went the route of creating their own simple popper.js wrapper (rather than use React-popper) - so I'm not sure we'd need much more than that, either.

Requirements:

• Create a component using Popper.js lib.

• Should receive overlay component through the prop ‘overlay’.

• Should receive single target component through children prop.

• Should render the overlay next to/close to the target by default.

• Should support rendering inside a «Portal» when «usePortal» property is set as true. The `usePortal` capability is mostly for situations where the popper is used within a scrolling container.

• Overlay must not climb off the screen boundaries.

• Should have “placement” prop supporting: ‘top, bottom, right, left’ values.

• Should have “open” prop to determine whether or not to display the overlay.

• The overlay should position itself in a way so that it avoids being hidden in the overflow.