[PositionedOverlay] Observe activator

[AndrewMusgrave]

WHY are these changes introduced?

Fixes linked issue (see mentions below)

WHAT is this pull request doing?

• observe the activator
• observe text changes (character data - docs)

Gifs

Before	After

Notes

This covers more edge cases, but not all of them. Eventually we may want to look at adding a resize observer to track the activators rect.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Basic example below ⬇️

Copy-paste this code in playground/Playground.tsx:

import React, {useState, useCallback} from 'react';

import {Page, Button, Popover} from '../src';

export function Playground() {
  const [count, setCount] = useState(0);

  return (
    <Page title="Playground">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          maxWidth: '800px',
          flexWrap: 'wrap',
        }}
      >
        <PopoverExample
          onInc={() => {
            setCount((currentCount) => currentCount + 1);
          }}
          count={count}
        />
        {Array.from({length: count}).map((_, index) => (
          <div key={index}>{uuidv4()}</div>
        ))}
      </div>
    </Page>
  );
}

function PopoverExample({onInc, count}: any) {
  const [popoverActive, setPopoverActive] = useState(true);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    [],
  );

  const activator = (
    <Button onClick={togglePopoverActive} disclosure>
      Open
    </Button>
  );

  return (
    <Popover
      active={popoverActive}
      activator={activator}
      onClose={togglePopoverActive}
    >
      <Button onClick={onInc}>Added uuids {count} times</Button>
    </Popover>
  );
}

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0;
    const v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	142.37 KB (+0.02% 🔺)
esm	96.11 KB (+0.03% 🔺)
esnext	139.27 KB (+0.02% 🔺)
css	33.72 KB (0%)

[AndrewMusgrave]

@beefchimi I had to make a similar change 😄