add ResizeObserver that observes targetRef (#6396)

add ResizeObserver that observes targetRef

Author: sookmax

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -192,6 +192,12 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     onResize: updatePosition
   });
 
+  // Update position when the target changes size (might need to flip).
+  useResizeObserver({
+    ref: targetRef,
+    onResize: updatePosition
+  });
+
   // Reposition the overlay and do not close on scroll while the visual viewport is resizing.
   // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.
   let isResizing = useRef(false);

packages/react-aria-components/stories/Popover.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover} from 'react-aria-components';
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 
 export default {
   title: 'React Aria Components'
@@ -49,6 +49,79 @@ export const PopoverExample = () => (
   </DialogTrigger>
   );
 
+
+const COUNTDOWN = 5000;
+
+function PopoverTriggerObserver() {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [countdown, setCountdown] = useState(COUNTDOWN);
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const intervalId = setInterval(() => {
+        setCountdown(countdown - 1000);
+      }, 1000);
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [countdown]);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (buttonRef.current) {
+        buttonRef.current.style.width = '200px';
+        buttonRef.current.style.height = '50px';
+      }
+    }, COUNTDOWN + 1000);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return (
+    <div style={{marginBottom: 100, display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+      <div>
+        <p>The trigger button below will change size in <strong>{Math.floor(countdown / 1000)}s</strong></p>
+      </div>
+      <DialogTrigger defaultOpen>
+        <Button ref={buttonRef}>Open popover</Button>
+        <Popover
+          placement="bottom start"
+          style={{
+            background: 'Canvas',
+            color: 'CanvasText',
+            border: '1px solid gray',
+            padding: 30,
+            zIndex: 5
+          }}>
+          <Dialog>
+            {({close}) => (
+              <form style={{display: 'flex', flexDirection: 'column'}}>
+                <Heading slot="title">Sign up</Heading>
+                <label>
+                  First Name: <input placeholder="John" />
+                </label>
+                <label>
+                  Last Name: <input placeholder="Smith" />
+                </label>
+                <Button onPress={close} style={{marginTop: 10}}>
+                  Submit
+                </Button>
+              </form>
+              )}
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+    </div>
+  );
+}
+
+
+export const PopoverTriggerObserverExample = {
+  render: PopoverTriggerObserver
+};
+
 export const PopoverArrowBoundaryOffsetExample = {
   args: {
     topLeft: 25,