From c0a34e054045d58d16706294641a29262b432ac3 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 17 Oct 2023 11:07:46 +0200
Subject: [PATCH 1/8] fix: Use correct target windows for ResizeObserver

Updates all instance of ResizeObserver in react-components to be created
from the correct window global. The enforcement is not in the scope of
this PR and is already in progress in #28887.

Fixes #29509
---
 .../src/createResizeObserver.ts               | 25 +++++++++++++++++++
 .../priority-overflow/src/overflowManager.ts  | 19 +++++++-------
 .../src/hooks/useMeasureElement.ts            |  9 +++++--
 .../react-virtualizer/package.json            |  1 +
 .../src/hooks/useResizeObserverRef.ts         | 20 +++++++++++----
 5 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-components/priority-overflow/src/createResizeObserver.ts

diff --git a/packages/react-components/priority-overflow/src/createResizeObserver.ts b/packages/react-components/priority-overflow/src/createResizeObserver.ts
new file mode 100644
index 00000000000000..7e8a7597c946d1
--- /dev/null
+++ b/packages/react-components/priority-overflow/src/createResizeObserver.ts
@@ -0,0 +1,25 @@
+/**
+ * Helper function that creates a resize observer in the element's own window global
+ * @param elementToObserve - Uses the element's window global to create the resize observer
+ * @param callback
+ * @returns function to cleanup the resize observer
+ */
+export function observeResize(elementToObserve: HTMLElement, callback: ResizeObserverCallback) {
+  const GlobalResizeObsever = elementToObserve.ownerDocument.defaultView?.ResizeObserver;
+
+  if (!GlobalResizeObsever) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('@fluentui/priority-overflow', 'ResizeObserver does not exist on container window');
+    }
+    return () => null;
+  }
+
+  let resizeObserver: ResizeObserver | undefined = new GlobalResizeObsever(callback);
+  resizeObserver.observe(elementToObserve);
+
+  return () => {
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+  };
+}
diff --git a/packages/react-components/priority-overflow/src/overflowManager.ts b/packages/react-components/priority-overflow/src/overflowManager.ts
index 2b223303166919..0dedfd414095ba 100644
--- a/packages/react-components/priority-overflow/src/overflowManager.ts
+++ b/packages/react-components/priority-overflow/src/overflowManager.ts
@@ -1,4 +1,5 @@
 import { DATA_OVERFLOWING, DATA_OVERFLOW_GROUP } from './consts';
+import { observeResize } from './createResizeObserver';
 import { debounce } from './debounce';
 import { createPriorityQueue, PriorityQueue } from './priorityQueue';
 import type {
@@ -35,13 +36,7 @@ export function createOverflowManager(): OverflowManager {
 
   const overflowItems: Record<string, OverflowItemEntry> = {};
   const overflowDividers: Record<string, OverflowDividerEntry> = {};
-  const resizeObserver = new ResizeObserver(entries => {
-    if (!entries[0] || !container) {
-      return;
-    }
-
-    update();
-  });
+  let disposeResizeObserver: () => void = () => null;
 
   const getNextItem = (queueToDequeue: PriorityQueue<string>, queueToEnqueue: PriorityQueue<string>) => {
     const nextItem = queueToDequeue.dequeue();
@@ -247,13 +242,19 @@ export function createOverflowManager(): OverflowManager {
     Object.values(overflowItems).forEach(item => visibleItemQueue.enqueue(item.id));
 
     container = observedContainer;
-    resizeObserver.observe(container);
+    disposeResizeObserver = observeResize(container, entries => {
+      if (!entries[0] || !container) {
+        return;
+      }
+
+      update();
+    });
   };
 
   const disconnect: OverflowManager['disconnect'] = () => {
     observing = false;
     sizeCache.clear();
-    resizeObserver.disconnect();
+    disposeResizeObserver();
   };
 
   const addItem: OverflowManager['addItem'] = item => {
diff --git a/packages/react-components/react-table/src/hooks/useMeasureElement.ts b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
index babe01bd2eedeb..d1ebdd911bd6eb 100644
--- a/packages/react-components/react-table/src/hooks/useMeasureElement.ts
+++ b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
@@ -1,4 +1,3 @@
-import { canUseDOM } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 
@@ -21,7 +20,13 @@ export function useMeasureElement<TElement extends HTMLElement = HTMLElement>()
   }, []);
 
   // Keep the reference of ResizeObserver in the state, as it should live through renders
-  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);
+  const [resizeObserver] = React.useState(() => {
+    if (!targetDocument?.defaultView?.ResizeObserver) {
+      return null;
+    }
+
+    return new targetDocument.defaultView.ResizeObserver(handleResize);
+  });
   const measureElementRef = React.useCallback(
     (el: TElement | null) => {
       if (!targetDocument || !resizeObserver) {
diff --git a/packages/react-components/react-virtualizer/package.json b/packages/react-components/react-virtualizer/package.json
index d7b399db413be8..a45ac058ef3293 100644
--- a/packages/react-components/react-virtualizer/package.json
+++ b/packages/react-components/react-virtualizer/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@fluentui/react-jsx-runtime": "^9.0.17",
+    "@fluentui/react-shared-contexts": "^9.10.0",
     "@fluentui/react-utilities": "^9.15.0",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
diff --git a/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts b/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
index 6734eb52d1f4f4..18d81045bf722d 100644
--- a/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
+++ b/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { debounce } from '../utilities/debounce';
 import { canUseDOM } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ResizeCallbackWithRef } from './hooks.types';
 
 /**
  * useResizeObserverRef_unstable simplifies resize observer connection and ensures debounce/cleanup
  */
 export const useResizeObserverRef_unstable = (resizeCallback: ResizeCallbackWithRef) => {
+  const { targetDocument } = useFluent();
   const container = React.useRef<HTMLElement | null>(null);
   // the handler for resize observer
   const handleResize = debounce((entries: ResizeObserverEntry[], observer: ResizeObserver) => {
@@ -14,17 +16,25 @@ export const useResizeObserverRef_unstable = (resizeCallback: ResizeCallbackWith
   });
 
   // Keep the reference of ResizeObserver in the state, as it should live through renders
-  const [resizeObserver, setResizeObserver] = React.useState(() =>
-    canUseDOM() ? new ResizeObserver(handleResize) : undefined,
-  );
+  const [resizeObserver, setResizeObserver] = React.useState(() => {
+    if (!targetDocument?.defaultView?.ResizeObserver) {
+      return undefined;
+    }
+    return new targetDocument.defaultView.ResizeObserver(handleResize);
+  });
 
   React.useEffect(() => {
     // Update our state when resizeCallback changes
     container.current = null;
     resizeObserver?.disconnect();
-    setResizeObserver(canUseDOM() ? new ResizeObserver(handleResize) : undefined);
+    setResizeObserver(() => {
+      if (!targetDocument?.defaultView?.ResizeObserver) {
+        return undefined;
+      }
+      return new targetDocument.defaultView.ResizeObserver(handleResize);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resizeCallback]);
+  }, [resizeCallback, targetDocument]);
 
   React.useEffect(() => {
     return () => {

From cbad8b6e1a4668bf68b83bc1a4a9839e00191d83 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 17 Oct 2023 11:15:42 +0200
Subject: [PATCH 2/8] changefile

---
 ...rity-overflow-10c22153-de2e-4c16-8fc0-b49aadbd1d08.json | 7 +++++++
 ...i-react-table-01e02e96-5aa2-493f-8614-61799987dce2.json | 7 +++++++
 ...t-virtualizer-6da34b46-57b4-4d39-92c6-b5abe95ef0c0.json | 7 +++++++
 3 files changed, 21 insertions(+)
 create mode 100644 change/@fluentui-priority-overflow-10c22153-de2e-4c16-8fc0-b49aadbd1d08.json
 create mode 100644 change/@fluentui-react-table-01e02e96-5aa2-493f-8614-61799987dce2.json
 create mode 100644 change/@fluentui-react-virtualizer-6da34b46-57b4-4d39-92c6-b5abe95ef0c0.json

diff --git a/change/@fluentui-priority-overflow-10c22153-de2e-4c16-8fc0-b49aadbd1d08.json b/change/@fluentui-priority-overflow-10c22153-de2e-4c16-8fc0-b49aadbd1d08.json
new file mode 100644
index 00000000000000..a0b0f98f1b0413
--- /dev/null
+++ b/change/@fluentui-priority-overflow-10c22153-de2e-4c16-8fc0-b49aadbd1d08.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Use container window's resize observer",
+  "packageName": "@fluentui/priority-overflow",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-01e02e96-5aa2-493f-8614-61799987dce2.json b/change/@fluentui-react-table-01e02e96-5aa2-493f-8614-61799987dce2.json
new file mode 100644
index 00000000000000..2bf488c509175c
--- /dev/null
+++ b/change/@fluentui-react-table-01e02e96-5aa2-493f-8614-61799987dce2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use targetDocument resize observer",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-virtualizer-6da34b46-57b4-4d39-92c6-b5abe95ef0c0.json b/change/@fluentui-react-virtualizer-6da34b46-57b4-4d39-92c6-b5abe95ef0c0.json
new file mode 100644
index 00000000000000..4b20ebd4f309e0
--- /dev/null
+++ b/change/@fluentui-react-virtualizer-6da34b46-57b4-4d39-92c6-b5abe95ef0c0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: use targetDocument resize observer",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

From 238123a92c1e18ec541a5d94f30bd1c45f95c738 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 17 Oct 2023 11:25:47 +0200
Subject: [PATCH 3/8] create new utility

---
 .../src/hooks/useMeasureElement.ts            |  9 ++-------
 .../etc/react-utilities.api.md                |  3 +++
 .../react-utilities/src/index.ts              |  1 +
 .../utils/createResizeObserverFromDocument.ts | 16 +++++++++++++++
 .../react-utilities/src/utils/index.ts        |  1 +
 .../src/hooks/useResizeObserverRef.ts         | 20 ++++++-------------
 .../src/utilities/createResizeObserver.ts     |  0
 7 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 packages/react-components/react-utilities/src/utils/createResizeObserverFromDocument.ts
 create mode 100644 packages/react-components/react-virtualizer/src/utilities/createResizeObserver.ts

diff --git a/packages/react-components/react-table/src/hooks/useMeasureElement.ts b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
index d1ebdd911bd6eb..a78206377855c1 100644
--- a/packages/react-components/react-table/src/hooks/useMeasureElement.ts
+++ b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { createResizeObserverFromDocument } from '@fluentui/react-utilities';
 
 /**
  * Provides a way of reporting element width.
@@ -20,13 +21,7 @@ export function useMeasureElement<TElement extends HTMLElement = HTMLElement>()
   }, []);
 
   // Keep the reference of ResizeObserver in the state, as it should live through renders
-  const [resizeObserver] = React.useState(() => {
-    if (!targetDocument?.defaultView?.ResizeObserver) {
-      return null;
-    }
-
-    return new targetDocument.defaultView.ResizeObserver(handleResize);
-  });
+  const [resizeObserver] = React.useState(() => createResizeObserverFromDocument(targetDocument, handleResize));
   const measureElementRef = React.useCallback(
     (el: TElement | null) => {
       if (!targetDocument || !resizeObserver) {
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index 8a9b4833e0cef5..51d8b622117ef8 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/packages/react-components/react-utilities/etc/react-utilities.api.md
@@ -37,6 +37,9 @@ export type ComponentState<Slots extends SlotPropsRecord> = {
 // @internal (undocumented)
 export function createPriorityQueue<T>(compare: PriorityQueueCompareFn<T>): PriorityQueue<T>;
 
+// @public
+export function createResizeObserverFromDocument(targetDocument: Document | null | undefined, callback: ResizeObserverCallback): ResizeObserver | null;
+
 // @internal
 export function elementContains(parent: Node | null, child: Node | null): boolean;
 
diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts
index 6f4fd534a6a317..4a14d4a216de7c 100644
--- a/packages/react-components/react-utilities/src/index.ts
+++ b/packages/react-components/react-utilities/src/index.ts
@@ -60,6 +60,7 @@ export {
   isInteractiveHTMLElement,
   omit,
   createPriorityQueue,
+  createResizeObserverFromDocument,
 } from './utils/index';
 
 export type { PriorityQueue } from './utils/priorityQueue';
diff --git a/packages/react-components/react-utilities/src/utils/createResizeObserverFromDocument.ts b/packages/react-components/react-utilities/src/utils/createResizeObserverFromDocument.ts
new file mode 100644
index 00000000000000..cb690fb87a66e8
--- /dev/null
+++ b/packages/react-components/react-utilities/src/utils/createResizeObserverFromDocument.ts
@@ -0,0 +1,16 @@
+/**
+ * A utility method that creates a ResizeObserver from a target document
+ * @param targetDocument - document to use to create the ResizeObserver
+ * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback
+ * @returns a ResizeObserver instance or null if the global does not exist on the document
+ */
+export function createResizeObserverFromDocument(
+  targetDocument: Document | null | undefined,
+  callback: ResizeObserverCallback,
+) {
+  if (!targetDocument?.defaultView?.ResizeObserver) {
+    return null;
+  }
+
+  return new targetDocument.defaultView.ResizeObserver(callback);
+}
diff --git a/packages/react-components/react-utilities/src/utils/index.ts b/packages/react-components/react-utilities/src/utils/index.ts
index c25cc8e7d42050..666a70b92eedb2 100644
--- a/packages/react-components/react-utilities/src/utils/index.ts
+++ b/packages/react-components/react-utilities/src/utils/index.ts
@@ -7,3 +7,4 @@ export * from './properties';
 export * from './isHTMLElement';
 export * from './isInteractiveHTMLElement';
 export * from './priorityQueue';
+export * from './createResizeObserverFromDocument';
diff --git a/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts b/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
index 18d81045bf722d..80e4ce993778cf 100644
--- a/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
+++ b/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { debounce } from '../utilities/debounce';
-import { canUseDOM } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { createResizeObserverFromDocument } from '@fluentui/react-utilities';
+import { debounce } from '../utilities/debounce';
 import { ResizeCallbackWithRef } from './hooks.types';
 
 /**
@@ -16,23 +16,15 @@ export const useResizeObserverRef_unstable = (resizeCallback: ResizeCallbackWith
   });
 
   // Keep the reference of ResizeObserver in the state, as it should live through renders
-  const [resizeObserver, setResizeObserver] = React.useState(() => {
-    if (!targetDocument?.defaultView?.ResizeObserver) {
-      return undefined;
-    }
-    return new targetDocument.defaultView.ResizeObserver(handleResize);
-  });
+  const [resizeObserver, setResizeObserver] = React.useState(() =>
+    createResizeObserverFromDocument(targetDocument, handleResize),
+  );
 
   React.useEffect(() => {
     // Update our state when resizeCallback changes
     container.current = null;
     resizeObserver?.disconnect();
-    setResizeObserver(() => {
-      if (!targetDocument?.defaultView?.ResizeObserver) {
-        return undefined;
-      }
-      return new targetDocument.defaultView.ResizeObserver(handleResize);
-    });
+    setResizeObserver(() => createResizeObserverFromDocument(targetDocument, handleResize));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resizeCallback, targetDocument]);
 
diff --git a/packages/react-components/react-virtualizer/src/utilities/createResizeObserver.ts b/packages/react-components/react-virtualizer/src/utilities/createResizeObserver.ts
new file mode 100644
index 00000000000000..e69de29bb2d1d6

From 19ee69f639495f519004237257dbcdeec32e8be9 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 17 Oct 2023 11:26:52 +0200
Subject: [PATCH 4/8] changefile

---
 ...act-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json

diff --git a/change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json b/change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json
new file mode 100644
index 00000000000000..9f688c9f997764
--- /dev/null
+++ b/change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Implement helper method to create ResizeObserver from document",
+  "packageName": "@fluentui/react-utilities",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

From b086d78e940a2cb1346766fac2334bc372b72224 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 17 Oct 2023 11:41:44 +0200
Subject: [PATCH 5/8] remove unnecessary

---
 .../react-virtualizer/src/utilities/createResizeObserver.ts       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/react-components/react-virtualizer/src/utilities/createResizeObserver.ts

diff --git a/packages/react-components/react-virtualizer/src/utilities/createResizeObserver.ts b/packages/react-components/react-virtualizer/src/utilities/createResizeObserver.ts
deleted file mode 100644
index e69de29bb2d1d6..00000000000000

From abac21524c1c3c3d25353ed862797520e8107b39 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 18 Oct 2023 05:51:34 +0200
Subject: [PATCH 6/8] revert utilities change

---
 ...s-742e5f7d-22d2-4233-a722-68650e57a994.json |  7 -------
 .../react-table/src/hooks/useMeasureElement.ts | 18 +++++++++++++++++-
 .../react-utilities/etc/react-utilities.api.md |  3 ---
 .../react-utilities/src/index.ts               |  1 -
 .../react-utilities/src/utils/index.ts         |  1 -
 .../src/hooks/useResizeObserverRef.ts          |  2 +-
 .../createResizeObserverFromDocument.ts        |  0
 7 files changed, 18 insertions(+), 14 deletions(-)
 delete mode 100644 change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json
 rename packages/react-components/{react-utilities/src/utils => react-virtualizer/src/utilities}/createResizeObserverFromDocument.ts (100%)

diff --git a/change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json b/change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json
deleted file mode 100644
index 9f688c9f997764..00000000000000
--- a/change/@fluentui-react-utilities-742e5f7d-22d2-4233-a722-68650e57a994.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "feat: Implement helper method to create ResizeObserver from document",
-  "packageName": "@fluentui/react-utilities",
-  "email": "lingfangao@hotmail.com",
-  "dependentChangeType": "patch"
-}
diff --git a/packages/react-components/react-table/src/hooks/useMeasureElement.ts b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
index a78206377855c1..85e34ea2f3ffc1 100644
--- a/packages/react-components/react-table/src/hooks/useMeasureElement.ts
+++ b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { createResizeObserverFromDocument } from '@fluentui/react-utilities';
 
 /**
  * Provides a way of reporting element width.
@@ -49,3 +48,20 @@ export function useMeasureElement<TElement extends HTMLElement = HTMLElement>()
 
   return { width, measureElementRef };
 }
+
+/**
+ * A utility method that creates a ResizeObserver from a target document
+ * @param targetDocument - document to use to create the ResizeObserver
+ * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback
+ * @returns a ResizeObserver instance or null if the global does not exist on the document
+ */
+export function createResizeObserverFromDocument(
+  targetDocument: Document | null | undefined,
+  callback: ResizeObserverCallback,
+) {
+  if (!targetDocument?.defaultView?.ResizeObserver) {
+    return null;
+  }
+
+  return new targetDocument.defaultView.ResizeObserver(callback);
+}
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index 51d8b622117ef8..8a9b4833e0cef5 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/packages/react-components/react-utilities/etc/react-utilities.api.md
@@ -37,9 +37,6 @@ export type ComponentState<Slots extends SlotPropsRecord> = {
 // @internal (undocumented)
 export function createPriorityQueue<T>(compare: PriorityQueueCompareFn<T>): PriorityQueue<T>;
 
-// @public
-export function createResizeObserverFromDocument(targetDocument: Document | null | undefined, callback: ResizeObserverCallback): ResizeObserver | null;
-
 // @internal
 export function elementContains(parent: Node | null, child: Node | null): boolean;
 
diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts
index 4a14d4a216de7c..6f4fd534a6a317 100644
--- a/packages/react-components/react-utilities/src/index.ts
+++ b/packages/react-components/react-utilities/src/index.ts
@@ -60,7 +60,6 @@ export {
   isInteractiveHTMLElement,
   omit,
   createPriorityQueue,
-  createResizeObserverFromDocument,
 } from './utils/index';
 
 export type { PriorityQueue } from './utils/priorityQueue';
diff --git a/packages/react-components/react-utilities/src/utils/index.ts b/packages/react-components/react-utilities/src/utils/index.ts
index 666a70b92eedb2..c25cc8e7d42050 100644
--- a/packages/react-components/react-utilities/src/utils/index.ts
+++ b/packages/react-components/react-utilities/src/utils/index.ts
@@ -7,4 +7,3 @@ export * from './properties';
 export * from './isHTMLElement';
 export * from './isInteractiveHTMLElement';
 export * from './priorityQueue';
-export * from './createResizeObserverFromDocument';
diff --git a/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts b/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
index 80e4ce993778cf..3de686b456aed6 100644
--- a/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
+++ b/packages/react-components/react-virtualizer/src/hooks/useResizeObserverRef.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { createResizeObserverFromDocument } from '@fluentui/react-utilities';
 import { debounce } from '../utilities/debounce';
+import { createResizeObserverFromDocument } from '../utilities/createResizeObserverFromDocument';
 import { ResizeCallbackWithRef } from './hooks.types';
 
 /**
diff --git a/packages/react-components/react-utilities/src/utils/createResizeObserverFromDocument.ts b/packages/react-components/react-virtualizer/src/utilities/createResizeObserverFromDocument.ts
similarity index 100%
rename from packages/react-components/react-utilities/src/utils/createResizeObserverFromDocument.ts
rename to packages/react-components/react-virtualizer/src/utilities/createResizeObserverFromDocument.ts

From 3814355a03777b372b4daa787a47b8762f96f672 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 19 Oct 2023 10:32:52 +0200
Subject: [PATCH 7/8] add fixme

---
 .../react-components/react-table/src/hooks/useMeasureElement.ts  | 1 +
 .../src/utilities/createResizeObserverFromDocument.ts            | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-components/react-table/src/hooks/useMeasureElement.ts b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
index 85e34ea2f3ffc1..89899f74115cea 100644
--- a/packages/react-components/react-table/src/hooks/useMeasureElement.ts
+++ b/packages/react-components/react-table/src/hooks/useMeasureElement.ts
@@ -50,6 +50,7 @@ export function useMeasureElement<TElement extends HTMLElement = HTMLElement>()
 }
 
 /**
+ * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar
  * A utility method that creates a ResizeObserver from a target document
  * @param targetDocument - document to use to create the ResizeObserver
  * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback
diff --git a/packages/react-components/react-virtualizer/src/utilities/createResizeObserverFromDocument.ts b/packages/react-components/react-virtualizer/src/utilities/createResizeObserverFromDocument.ts
index cb690fb87a66e8..ca4e9930d84931 100644
--- a/packages/react-components/react-virtualizer/src/utilities/createResizeObserverFromDocument.ts
+++ b/packages/react-components/react-virtualizer/src/utilities/createResizeObserverFromDocument.ts
@@ -1,4 +1,5 @@
 /**
+ * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar
  * A utility method that creates a ResizeObserver from a target document
  * @param targetDocument - document to use to create the ResizeObserver
  * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback

From 9c2abd35324ac4470c0d89b2e46c430d76615ad5 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Thu, 19 Oct 2023 11:50:49 +0200
Subject: [PATCH 8/8] revert

---
 .../GroupedVerticalBarChart.base.tsx             |  2 +-
 .../HorizontalBarChart.base.tsx                  |  2 +-
 .../MultiStackedBarChart.base.tsx                | 16 ++++++++--------
 .../VerticalBarChart/VerticalBarChart.base.tsx   |  4 ++--
 .../VerticalStackedBarChart.base.tsx             |  4 ++--
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
index 6bc9ea6ab767ba..9eb4c3e5cea501 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -510,7 +510,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
         }
         const legend: ILegend = {
           title: point.legend,
-          color,
+          color: color,
           action: () => {
             this._onLegendClick(point.legend);
           },
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 88f55311c00b9e..9b10c90dd0b41a 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -203,7 +203,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       this._calloutAnchorPoint = point;
       this.setState({
         isCalloutVisible: true,
-        hoverValue,
+        hoverValue: hoverValue,
         lineColor: point.color!,
         legend: point.legend!,
         refSelected: currentHoveredElement!.refElement,
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index d33ab37e19f745..8462ed43acef27 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -271,8 +271,8 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
 
       this._classNames = getClassNames(styles!, {
         theme: this.props.theme!,
-        shouldHighlight,
-        href,
+        shouldHighlight: shouldHighlight,
+        href: href,
         variant: this.props.variant,
         hideLabels: this.props.hideLabels,
       });
@@ -437,7 +437,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
           isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend!,
           calloutLegend: point.legend!,
           dataForHoverCard: pointData,
-          color,
+          color: color,
           xCalloutValue: point.xAxisCalloutData!,
           yCalloutValue: point.yAxisCalloutData!,
           dataPointCalloutProps: point,
@@ -456,9 +456,9 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     this._classNames = getClassNames(styles!, {
       legendColor: this.state.color,
       theme: theme!,
-      width,
+      width: width,
       className,
-      barHeight,
+      barHeight: barHeight,
     });
   };
 
@@ -486,7 +486,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
             }
             const legend: ILegend = {
               title: point.legend!,
-              color,
+              color: color,
               action: () => {
                 this._onClick(point.legend!);
               },
@@ -512,7 +512,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
           }
           const legend: ILegend = {
             title: point.legend!,
-            color,
+            color: color,
             action: () => {
               this._onClick(point.legend!);
             },
@@ -573,7 +573,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
         isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend!,
         calloutLegend: point.legend!,
         dataForHoverCard: pointData,
-        color,
+        color: color,
         xCalloutValue: point.xAxisCalloutData!,
         yCalloutValue: point.yAxisCalloutData!,
         dataPointCalloutProps: point,
diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 312d2e47330205..4fb515d44902a8 100644
--- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -533,7 +533,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       this._classNames = getClassNames(this.props.styles!, {
         theme: this.props.theme!,
         legendColor: this.state.color,
-        shouldHighlight,
+        shouldHighlight: shouldHighlight,
       });
       const barHeight: number = Math.max(yBarScale(point.y), 0);
       let adjustedBarHeight = 0;
@@ -701,7 +701,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       // mapping data to the format Legends component needs
       const legend: ILegend = {
         title: point.legend!,
-        color,
+        color: color,
         action: () => {
           this._onLegendClick(point.legend!);
         },
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index 6d1844f1aade86..3b4ac0c6d637f1 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -532,7 +532,7 @@ export class VerticalStackedBarChartBase extends React.Component<
 
         const legend: ILegend = {
           title: point.legend,
-          color,
+          color: color,
           action: () => {
             this._onLegendClick(point.legend);
           },
@@ -774,7 +774,7 @@ export class VerticalStackedBarChartBase extends React.Component<
         const shouldHighlight = this._legendHighlighted(point.legend) || this._noLegendHighlighted() ? true : false;
         this._classNames = getClassNames(this.props.styles!, {
           theme: this.props.theme!,
-          shouldHighlight,
+          shouldHighlight: shouldHighlight,
           href: this.props.href,
         });
         const rectFocusProps = !shouldFocusWholeStack && {