✨ [Popover] Now observes overlay attributes

[beefchimi]

This PR replaces the previous effort: #4303

We are now always observing the Overlay attributes. We feel that the performance cost will not be that severe, and it is better to take this first step than to introduce another prop to the API.

Our main ask here is having control over how the Popover re-renders (re-sizes/positions itself). Eventually, we think a better solution is to offer a mechanism to force a re-render. In the words of @clauderic

...the best way to support consumers that have complex use-cases would be to add an imperative API to force the popover to be re-measured from the consumer, something like:

function ConsumerComponent() {
  const popoverRef = useRef();

  return (
    <>
      <Button onClick={forceMeasurePopover}>Click me</Button>
      <Popover ref={popoverRef} />
    </>
  );

  function forceMeasurePopover() {
    popoverRef.currrent.forceUpdateMeasurement();
  }
}

[github-actions]

size-limit report

Path	Size
cjs	142.56 KB (+0.03% 🔺)
esm	96.31 KB (+0.01% 🔺)
esnext	139.51 KB (+0.01% 🔺)
css	33.75 KB (0%)

[kyledurand]

Love this approach and that we don't have to add another nested prop to popover 👍

Thanks @beefchimi

[kyledurand]

Suggested change

	it('observers the overlay', () => {
	it('observes the overlay', () => {

[AndrewMusgrave]

LGTM! ✅

[beefchimi]

Closed in favour of: #4385