feat: Update position when target or container dimensions change

change/@fluentui-react-positioning-29f6eb38-4af2-40f1-a095-6abef76d64f4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Update position when target or container dimensions change",
+  "packageName": "@fluentui/react-positioning",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-positioning/src/createPositionManager.ts

@@ -43,15 +43,18 @@ interface PositionManagerOptions {
  * @returns manager that handles positioning out of the react lifecycle
  */
 export function createPositionManager(options: PositionManagerOptions): PositionManager {
-  const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;
   let isDestroyed = false;
+  const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;
   if (!target || !container) {
     return {
       updatePosition: () => undefined,
       dispose: () => undefined,
     };
   }
 
+  // When the dimensions of the target or the container change - trigger a position update
+  const resizeObserver = new ResizeObserver(() => updatePosition());
+
   let isFirstUpdate = true;
   const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();
   const targetWindow = container.ownerDocument.defaultView;
@@ -77,6 +80,11 @@ export function createPositionManager(options: PositionManagerOptions): Position
         scrollParent.addEventListener('scroll', updatePosition, { passive: true });
       });
 
+      resizeObserver.observe(container);
+      if (isHTMLElement(target)) {
+        resizeObserver.observe(target);
+      }
+
       isFirstUpdate = false;
     }
 
@@ -129,6 +137,8 @@ export function createPositionManager(options: PositionManagerOptions): Position
       scrollParent.removeEventListener('scroll', updatePosition);
     });
     scrollParents.clear();
+
+    resizeObserver.disconnect();
   };
 
   if (targetWindow) {