From 6a7d4b723d04294de450df9c647bd82f7f2cce25 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 21 Apr 2022 11:21:14 +0100
Subject: [PATCH 1/9] Update react-resize-aware with use-resize-observer

---
 package-lock.json                             | 24 +++++---
 packages/components/package.json              |  2 +-
 packages/components/src/flyout/utils.js       | 12 ++--
 .../src/resizable-box/resize-tooltip/utils.ts |  4 +-
 .../toggle-group-control/component.tsx        | 10 +++-
 packages/compose/README.md                    |  9 +--
 packages/compose/package.json                 |  4 +-
 .../src/hooks/use-resize-observer/index.js    | 31 ----------
 .../hooks/use-resize-observer/index.native.js |  2 -
 .../src/hooks/use-resize-observer/index.tsx   | 56 +++++++++++++++++++
 10 files changed, 90 insertions(+), 64 deletions(-)
 delete mode 100644 packages/compose/src/hooks/use-resize-observer/index.js
 create mode 100644 packages/compose/src/hooks/use-resize-observer/index.tsx

diff --git a/package-lock.json b/package-lock.json
index acd5b5df134116..d1e118093a0c39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4056,6 +4056,11 @@
 				"chalk": "^4.0.0"
 			}
 		},
+		"@juggle/resize-observer": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+			"integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+		},
 		"@kwsites/file-exists": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
@@ -17282,8 +17287,8 @@
 				"re-resizable": "^6.4.0",
 				"react-colorful": "^5.3.1",
 				"react-dates": "^21.8.0",
-				"react-resize-aware": "^3.1.0",
 				"reakit": "^1.3.8",
+				"use-resize-observer": "^8.0.0",
 				"uuid": "^8.3.0"
 			},
 			"dependencies": {
@@ -17369,8 +17374,8 @@
 				"clipboard": "^2.0.8",
 				"lodash": "^4.17.21",
 				"mousetrap": "^1.6.5",
-				"react-resize-aware": "^3.1.0",
-				"use-memo-one": "^1.1.1"
+				"use-memo-one": "^1.1.1",
+				"use-resize-observer": "^8.0.0"
 			}
 		},
 		"@wordpress/core-data": {
@@ -51126,11 +51131,6 @@
 			"integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==",
 			"dev": true
 		},
-		"react-resize-aware": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/react-resize-aware/-/react-resize-aware-3.1.0.tgz",
-			"integrity": "sha512-bIhHlxVTX7xKUz14ksXMEHjzCZPTpQZKZISY3nbTD273pDKPABGFNFBP6Tr42KECxzC5YQiKpMchjTVJCqaxpA=="
-		},
 		"react-router": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.1.1.tgz",
@@ -57982,6 +57982,14 @@
 			"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
 			"integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
 		},
+		"use-resize-observer": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-8.0.0.tgz",
+			"integrity": "sha512-n0iKSeiQpJCyaFh5JA0qsVLBIovsF4EIIR1G6XiBwKJN66ZrD4Oj62bjcuTAATPKiSp6an/2UZZxCf/67fk3sQ==",
+			"requires": {
+				"@juggle/resize-observer": "^3.3.1"
+			}
+		},
 		"use-subscription": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.0.tgz",
diff --git a/packages/components/package.json b/packages/components/package.json
index d587d1889e085b..294af1a7485b76 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -65,8 +65,8 @@
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
 		"react-dates": "^21.8.0",
-		"react-resize-aware": "^3.1.0",
 		"reakit": "^1.3.8",
+		"use-resize-observer": "^8.0.0",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
diff --git a/packages/components/src/flyout/utils.js b/packages/components/src/flyout/utils.js
index 25a3f1c07fc791..7258e8d72d8dc4 100644
--- a/packages/components/src/flyout/utils.js
+++ b/packages/components/src/flyout/utils.js
@@ -1,19 +1,17 @@
-/**
- * External dependencies
- */
-import useResizeAware from 'react-resize-aware';
-
 /**
  * WordPress dependencies
  */
-import { useIsomorphicLayoutEffect } from '@wordpress/compose';
+import {
+	useIsomorphicLayoutEffect,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  *
  * @param { { onResize?: () => any } } onResize
  */
 export function useFlyoutResizeUpdater( { onResize } ) {
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 
 	useIsomorphicLayoutEffect( () => {
 		onResize?.();
diff --git a/packages/components/src/resizable-box/resize-tooltip/utils.ts b/packages/components/src/resizable-box/resize-tooltip/utils.ts
index b4ec4b19f19fcb..3ac2d6babc4298 100644
--- a/packages/components/src/resizable-box/resize-tooltip/utils.ts
+++ b/packages/components/src/resizable-box/resize-tooltip/utils.ts
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { useEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 const { clearTimeout, setTimeout } = window;
 
@@ -60,7 +60,7 @@ export function useResizeLabel( {
 	 * This custom hook uses injects an iFrame into the element, allowing it
 	 * to tap into the onResize (window) callback events.
 	 */
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 
 	/*
 	 * Indicates if the x/y axis is preferred.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index 0ee7b7af82c4b4..a7727ccaf06670 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -4,14 +4,18 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -49,7 +53,7 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 19e12b4470ac24..bd123baf2d31aa 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -447,14 +447,7 @@ _Returns_
 ### useResizeObserver
 
 Hook which allows to listen the resize event of any target element when it changes sizes.
-_Note: `useResizeObserver` will report `null` until after first render_
-
-Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>
-for more details.
-
-_Related_
-
--   <https://github.com/FezVrasta/react-resize-aware>
+\_Note: `useResizeObserver` will report `null` until after first render.
 
 _Usage_
 
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 0bc48ac1f3f4c5..c1704bce5f7219 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -41,8 +41,8 @@
 		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
-		"react-resize-aware": "^3.1.0",
-		"use-memo-one": "^1.1.1"
+		"use-memo-one": "^1.1.1",
+		"use-resize-observer": "^8.0.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0"
diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js
deleted file mode 100644
index e992b57fa6b834..00000000000000
--- a/packages/compose/src/hooks/use-resize-observer/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import useResizeAware from 'react-resize-aware';
-
-/**
- * Hook which allows to listen the resize event of any target element when it changes sizes.
- * _Note: `useResizeObserver` will report `null` until after first render_
- *
- * Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>
- * for more details.
- *
- * @see https://github.com/FezVrasta/react-resize-aware
- *
- * @example
- *
- * ```js
- * const App = () => {
- * 	const [ resizeListener, sizes ] = useResizeObserver();
- *
- * 	return (
- * 		<div>
- * 			{ resizeListener }
- * 			Your content here
- * 		</div>
- * 	);
- * };
- * ```
- *
- */
-export default useResizeAware;
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
index 981412b4f86e96..101213cf90ceaf 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -10,8 +10,6 @@ import { useState, useCallback } from '@wordpress/element';
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  *
- * @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
- *
  * @example
  *
  * ```js
diff --git a/packages/compose/src/hooks/use-resize-observer/index.tsx b/packages/compose/src/hooks/use-resize-observer/index.tsx
new file mode 100644
index 00000000000000..d996d8a5058aa2
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import useResizeObserver from 'use-resize-observer';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import type { WPElement } from '@wordpress/element';
+
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ * _Note: `useResizeObserver` will report `null` until after first render.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export default function useResizeAware(): [
+	WPElement,
+	{ width: number | null; height: number | null }
+] {
+	const { ref, width, height } = useResizeObserver();
+	const sizes = useMemo( () => {
+		return { width: width ?? null, height: height ?? null };
+	}, [ width, height ] );
+	const resizeListener = (
+		<div
+			style={ {
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				pointerEvents: 'none',
+				opacity: 0,
+				overflow: 'hidden',
+				zIndex: -1,
+			} }
+			ref={ ref }
+		/>
+	);
+	return [ resizeListener, sizes ];
+}

From 95f7c538aa30186ffdb44512afc48ce9167f33a2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 21 Apr 2022 12:30:33 +0100
Subject: [PATCH 2/9] Fix unit tests

---
 .../flyout/test/__snapshots__/index.js.snap   | 24 ++++++++-----------
 .../test/__snapshots__/index.js.snap          | 14 -----------
 .../src/hooks/use-resize-observer/index.tsx   |  1 +
 3 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/packages/components/src/flyout/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap
index 66893021274f94..edd119e242d78b 100644
--- a/packages/components/src/flyout/test/__snapshots__/index.js.snap
+++ b/packages/components/src/flyout/test/__snapshots__/index.js.snap
@@ -93,13 +93,6 @@ exports[`props should render correctly 1`] = `
   <div
     class="emotion-3 emotion-2"
   >
-    <iframe
-      aria-hidden="true"
-      frameborder="0"
-      src="about:blank"
-      style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-      tabindex="-1"
-    />
     <div
       class="components-card__body components-card-body emotion-5 emotion-2"
       data-wp-c16t="true"
@@ -165,12 +158,14 @@ Snapshot Diff:
     tabindex="-1"
   >
     <div
-@@ -22,10 +22,17 @@
-          frameborder="0"
-          src="about:blank"
-          style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-          tabindex="-1"
-        />
+@@ -14,11 +14,19 @@
+      data-wp-c16t="true"
+      data-wp-component="Card"
+    >
+      <div
+        class="css-mgwsf4-View-Content em57xhy0"
+-     />
++     >
 +       <div
 +         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
 +         data-wp-c16t="true"
@@ -178,9 +173,10 @@ Snapshot Diff:
 +       >
 +         Code is Poetry
 +       </div>
-      </div>
++     </div>
       <div
         aria-hidden="true"
         class="components-elevation css-1b4rkmt-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
+        data-wp-component="Elevation"
 `;
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
index 0eac732eed09b9..189fceaa601452 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
@@ -173,13 +173,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
-      <iframe
-        aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
-      />
       <div
         class="emotion-8 emotion-9"
         role="presentation"
@@ -402,13 +395,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
-        aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
-      />
       <div
         class="emotion-8 emotion-9"
         data-active="false"
diff --git a/packages/compose/src/hooks/use-resize-observer/index.tsx b/packages/compose/src/hooks/use-resize-observer/index.tsx
index d996d8a5058aa2..9a228ff8cf1d7c 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.tsx
+++ b/packages/compose/src/hooks/use-resize-observer/index.tsx
@@ -49,6 +49,7 @@ export default function useResizeAware(): [
 				overflow: 'hidden',
 				zIndex: -1,
 			} }
+			aria-hidden="true"
 			ref={ ref }
 		/>
 	);

From 224084713dc5a5229c5f36e47a27c8239fee2fd1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 21 Apr 2022 12:32:01 +0100
Subject: [PATCH 3/9] Ignore license check for the unused polyfill

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 487cfdc6d11b59..5e7598ac9c24c6 100755
--- a/package.json
+++ b/package.json
@@ -244,7 +244,7 @@
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
 		"build": "npm run build:packages && wp-scripts build",
 		"changelog": "node ./bin/plugin/cli.js changelog",
-		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
+		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@juggle/resize-observer,@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
 		"precheck-local-changes": "npm run docs:build",
 		"check-local-changes": "( git diff -U0 | xargs -0 node bin/process-git-diff ) || ( echo \"There are local uncommitted changes after one or both of 'npm install' or 'npm run docs:build'!\" && git diff --exit-code && exit 1 );",
 		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",

From af5e4868a5b7c43e3f005c3aad2300f290a9fd6a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 6 May 2022 14:11:18 +0100
Subject: [PATCH 4/9] Remove dependency

---
 package-lock.json                             |   3 +-
 package.json                                  |   2 +-
 packages/compose/package.json                 |   3 +-
 .../src/hooks/use-resize-observer/index.tsx   | 309 +++++++++++++++++-
 4 files changed, 310 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1e118093a0c39..c0772050150b01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17374,8 +17374,7 @@
 				"clipboard": "^2.0.8",
 				"lodash": "^4.17.21",
 				"mousetrap": "^1.6.5",
-				"use-memo-one": "^1.1.1",
-				"use-resize-observer": "^8.0.0"
+				"use-memo-one": "^1.1.1"
 			}
 		},
 		"@wordpress/core-data": {
diff --git a/package.json b/package.json
index 5e7598ac9c24c6..487cfdc6d11b59 100755
--- a/package.json
+++ b/package.json
@@ -244,7 +244,7 @@
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
 		"build": "npm run build:packages && wp-scripts build",
 		"changelog": "node ./bin/plugin/cli.js changelog",
-		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@juggle/resize-observer,@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
+		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
 		"precheck-local-changes": "npm run docs:build",
 		"check-local-changes": "( git diff -U0 | xargs -0 node bin/process-git-diff ) || ( echo \"There are local uncommitted changes after one or both of 'npm install' or 'npm run docs:build'!\" && git diff --exit-code && exit 1 );",
 		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
diff --git a/packages/compose/package.json b/packages/compose/package.json
index c1704bce5f7219..724d7f68fc2b10 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -41,8 +41,7 @@
 		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
-		"use-memo-one": "^1.1.1",
-		"use-resize-observer": "^8.0.0"
+		"use-memo-one": "^1.1.1"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0"
diff --git a/packages/compose/src/hooks/use-resize-observer/index.tsx b/packages/compose/src/hooks/use-resize-observer/index.tsx
index 9a228ff8cf1d7c..2e4b60e63a36b5 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.tsx
+++ b/packages/compose/src/hooks/use-resize-observer/index.tsx
@@ -1,14 +1,319 @@
 /**
  * External dependencies
  */
-import useResizeObserver from 'use-resize-observer';
+import type { RefCallback, RefObject } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import {
+	useMemo,
+	useRef,
+	useCallback,
+	useEffect,
+	useState,
+} from '@wordpress/element';
 import type { WPElement } from '@wordpress/element';
 
+type SubscriberCleanup = () => void;
+type SubscriberResponse = SubscriberCleanup | void;
+
+// This of course could've been more streamlined with internal state instead of
+// refs, but then host hooks / components could not opt out of renders.
+// This could've been exported to its own module, but the current build doesn't
+// seem to work with module imports and I had no more time to spend on this...
+function useResolvedElement< T extends HTMLElement >(
+	subscriber: ( element: T ) => SubscriberResponse,
+	refOrElement?: T | RefObject< T > | null
+): RefCallback< T > {
+	const callbackRefElement = useRef< T | null >( null );
+	const lastReportRef = useRef< {
+		reporter: () => void;
+		element: T | null;
+	} | null >( null );
+	const cleanupRef = useRef< SubscriberResponse | null >();
+
+	const callSubscriber = useCallback( () => {
+		let element = null;
+		if ( callbackRefElement.current ) {
+			element = callbackRefElement.current;
+		} else if ( refOrElement ) {
+			if ( refOrElement instanceof HTMLElement ) {
+				element = refOrElement;
+			} else {
+				element = refOrElement.current;
+			}
+		}
+
+		if (
+			lastReportRef.current &&
+			lastReportRef.current.element === element &&
+			lastReportRef.current.reporter === callSubscriber
+		) {
+			return;
+		}
+
+		if ( cleanupRef.current ) {
+			cleanupRef.current();
+			// Making sure the cleanup is not called accidentally multiple times.
+			cleanupRef.current = null;
+		}
+		lastReportRef.current = {
+			reporter: callSubscriber,
+			element,
+		};
+
+		// Only calling the subscriber, if there's an actual element to report.
+		if ( element ) {
+			cleanupRef.current = subscriber( element );
+		}
+	}, [ refOrElement, subscriber ] );
+
+	// On each render, we check whether a ref changed, or if we got a new raw
+	// element.
+	useEffect( () => {
+		// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
+		// render accompanying that change as well.
+		// To guarantee we always have the right element, one must use the ref callback provided instead, but we support
+		// RefObjects to make the hook API more convenient in certain cases.
+		callSubscriber();
+	}, [ callSubscriber ] );
+
+	return useCallback< RefCallback< T > >(
+		( element ) => {
+			callbackRefElement.current = element;
+			callSubscriber();
+		},
+		[ callSubscriber ]
+	);
+}
+
+type ObservedSize = {
+	width: number | undefined;
+	height: number | undefined;
+};
+
+type ResizeHandler = ( size: ObservedSize ) => void;
+
+type HookResponse< T extends HTMLElement > = {
+	ref: RefCallback< T >;
+} & ObservedSize;
+
+// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
+// forcing consumers to use a specific TS version.
+type ResizeObserverBoxOptions =
+	| 'border-box'
+	| 'content-box'
+	| 'device-pixel-content-box';
+
+declare global {
+	interface ResizeObserverEntry {
+		readonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;
+	}
+}
+
+// We're only using the first element of the size sequences, until future versions of the spec solidify on how
+// exactly it'll be used for fragments in multi-column scenarios:
+// From the spec:
+// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
+// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
+// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
+// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
+// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
+//
+// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
+// regardless of the "box" option.
+// The spec states the following on this:
+// > This does not have any impact on which box dimensions are returned to the defined callback when the event
+// > is fired, it solely defines which box the author wishes to observe layout changes on.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
+// > This section is non-normative. An author may desire to observe more than one CSS box.
+// > In this case, author will need to use multiple ResizeObservers.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
+// For this reason I decided to only return the requested size,
+// even though it seems we have access to results for all box types.
+// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
+// regardless of box option.
+const extractSize = (
+	entry: ResizeObserverEntry,
+	boxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',
+	sizeType: keyof ResizeObserverSize
+): number | undefined => {
+	if ( ! entry[ boxProp ] ) {
+		if ( boxProp === 'contentBoxSize' ) {
+			// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
+			// See the 6th step in the description for the RO algorithm:
+			// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
+			// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
+			// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
+			return entry.contentRect[
+				sizeType === 'inlineSize' ? 'width' : 'height'
+			];
+		}
+
+		return undefined;
+	}
+
+	// A couple bytes smaller than calling Array.isArray() and just as effective here.
+	return entry[ boxProp ][ 0 ]
+		? entry[ boxProp ][ 0 ][ sizeType ]
+		: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
+		  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+		  // @ts-ignore
+		  entry[ boxProp ][ sizeType ];
+};
+
+type RoundingFunction = ( n: number ) => number;
+
+function useResizeObserver< T extends HTMLElement >(
+	opts: {
+		ref?: RefObject< T > | T | null | undefined;
+		onResize?: ResizeHandler;
+		box?: ResizeObserverBoxOptions;
+		round?: RoundingFunction;
+	} = {}
+): HookResponse< T > {
+	// Saving the callback as a ref. With this, I don't need to put onResize in the
+	// effect dep array, and just passing in an anonymous function without memoising
+	// will not reinstantiate the hook's ResizeObserver.
+	const onResize = opts.onResize;
+	const onResizeRef = useRef< ResizeHandler | undefined >( undefined );
+	onResizeRef.current = onResize;
+	const round = opts.round || Math.round;
+
+	// Using a single instance throughout the hook's lifetime
+	const resizeObserverRef = useRef< {
+		box?: ResizeObserverBoxOptions;
+		round?: RoundingFunction;
+		instance: ResizeObserver;
+	} >();
+
+	const [ size, setSize ] = useState< {
+		width?: number;
+		height?: number;
+	} >( {
+		width: undefined,
+		height: undefined,
+	} );
+
+	// In certain edge cases the RO might want to report a size change just after
+	// the component unmounted.
+	const didUnmount = useRef( false );
+	useEffect( () => {
+		return () => {
+			didUnmount.current = true;
+		};
+	}, [] );
+
+	// Using a ref to track the previous width / height to avoid unnecessary renders.
+	const previous: {
+		current: {
+			width?: number;
+			height?: number;
+		};
+	} = useRef( {
+		width: undefined,
+		height: undefined,
+	} );
+
+	// This block is kinda like a useEffect, only it's called whenever a new
+	// element could be resolved based on the ref option. It also has a cleanup
+	// function.
+	const refCallback = useResolvedElement< T >(
+		useCallback(
+			( element ) => {
+				// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
+				// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
+				if (
+					! resizeObserverRef.current ||
+					resizeObserverRef.current.box !== opts.box ||
+					resizeObserverRef.current.round !== round
+				) {
+					resizeObserverRef.current = {
+						box: opts.box,
+						round,
+						instance: new ResizeObserver( ( entries ) => {
+							const entry = entries[ 0 ];
+
+							let boxProp:
+								| 'borderBoxSize'
+								| 'contentBoxSize'
+								| 'devicePixelContentBoxSize' = 'borderBoxSize';
+							if ( opts.box === 'border-box' ) {
+								boxProp = 'borderBoxSize';
+							} else {
+								boxProp =
+									opts.box === 'device-pixel-content-box'
+										? 'devicePixelContentBoxSize'
+										: 'contentBoxSize';
+							}
+
+							const reportedWidth = extractSize(
+								entry,
+								boxProp,
+								'inlineSize'
+							);
+							const reportedHeight = extractSize(
+								entry,
+								boxProp,
+								'blockSize'
+							);
+
+							const newWidth = reportedWidth
+								? round( reportedWidth )
+								: undefined;
+							const newHeight = reportedHeight
+								? round( reportedHeight )
+								: undefined;
+
+							if (
+								previous.current.width !== newWidth ||
+								previous.current.height !== newHeight
+							) {
+								const newSize = {
+									width: newWidth,
+									height: newHeight,
+								};
+								previous.current.width = newWidth;
+								previous.current.height = newHeight;
+								if ( onResizeRef.current ) {
+									onResizeRef.current( newSize );
+								} else if ( ! didUnmount.current ) {
+									setSize( newSize );
+								}
+							}
+						} ),
+					};
+				}
+
+				resizeObserverRef.current.instance.observe( element, {
+					box: opts.box,
+				} );
+
+				return () => {
+					if ( resizeObserverRef.current ) {
+						resizeObserverRef.current.instance.unobserve( element );
+					}
+				};
+			},
+			[ opts.box, round ]
+		),
+		opts.ref
+	);
+
+	return useMemo(
+		() => ( {
+			ref: refCallback,
+			width: size.width,
+			height: size.height,
+		} ),
+		[ refCallback, size ? size.width : null, size ? size.height : null ]
+	);
+}
+
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  * _Note: `useResizeObserver` will report `null` until after first render.

From 1c2df393eb3515eee580276ca3dbe90898948531 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 9 May 2022 11:42:36 +0100
Subject: [PATCH 5/9] Remove useless dependency

---
 package-lock.json                | 14 --------------
 packages/components/package.json |  1 -
 2 files changed, 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c0772050150b01..1d3d3f68402f63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4056,11 +4056,6 @@
 				"chalk": "^4.0.0"
 			}
 		},
-		"@juggle/resize-observer": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
-			"integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
-		},
 		"@kwsites/file-exists": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
@@ -17288,7 +17283,6 @@
 				"react-colorful": "^5.3.1",
 				"react-dates": "^21.8.0",
 				"reakit": "^1.3.8",
-				"use-resize-observer": "^8.0.0",
 				"uuid": "^8.3.0"
 			},
 			"dependencies": {
@@ -57981,14 +57975,6 @@
 			"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
 			"integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
 		},
-		"use-resize-observer": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-8.0.0.tgz",
-			"integrity": "sha512-n0iKSeiQpJCyaFh5JA0qsVLBIovsF4EIIR1G6XiBwKJN66ZrD4Oj62bjcuTAATPKiSp6an/2UZZxCf/67fk3sQ==",
-			"requires": {
-				"@juggle/resize-observer": "^3.3.1"
-			}
-		},
 		"use-subscription": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.0.tgz",
diff --git a/packages/components/package.json b/packages/components/package.json
index 294af1a7485b76..15ea54baa7d6b2 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -66,7 +66,6 @@
 		"react-colorful": "^5.3.1",
 		"react-dates": "^21.8.0",
 		"reakit": "^1.3.8",
-		"use-resize-observer": "^8.0.0",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {

From 1f44d0c907f4cd4c6508b03f7b298073e2b6cdef Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 9 May 2022 12:56:04 +0100
Subject: [PATCH 6/9] Update comment

---
 .../components/src/resizable-box/resize-tooltip/utils.ts     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/resizable-box/resize-tooltip/utils.ts b/packages/components/src/resizable-box/resize-tooltip/utils.ts
index 3ac2d6babc4298..2e75f1e831e13d 100644
--- a/packages/components/src/resizable-box/resize-tooltip/utils.ts
+++ b/packages/components/src/resizable-box/resize-tooltip/utils.ts
@@ -56,9 +56,8 @@ export function useResizeLabel( {
 	showPx = false,
 }: UseResizeLabelArgs ): UseResizeLabelProps {
 	/*
-	 * The width/height values derive from this special useResizeAware hook.
-	 * This custom hook uses injects an iFrame into the element, allowing it
-	 * to tap into the onResize (window) callback events.
+	 * The width/height values derive from this special useResizeObserver hook.
+	 * This custom hook uses the ResizeObserver API to listen for resize events.
 	 */
 	const [ resizeListener, sizes ] = useResizeObserver();
 

From 47046923201a74e7d8197ab28a53452ff71ee327 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 9 May 2022 12:57:41 +0100
Subject: [PATCH 7/9] Add changelog note

---
 packages/compose/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index 26bcb598e31f4c..864c1581995069 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 -   Add `useDisabled` hook.
 
+### Internal
+
+-   Update the implementation of useResizeObserver to rely on the ResizableObserver API.
+
 ## 5.6.0 (2022-05-04)
 
 ## 5.5.0 (2022-04-21)

From 82b3a0c1807175e3d4059edbf32e63aa6c47162b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 9 May 2022 10:22:28 +0100
Subject: [PATCH 8/9] Add ResizeObserver polyfill for testing purposes

---
 package-lock.json                | 6 ++++++
 package.json                     | 1 +
 test/unit/config/global-mocks.js | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 1d3d3f68402f63..387c46b529e7d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52487,6 +52487,12 @@
 			"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
 			"dev": true
 		},
+		"resize-observer-polyfill": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+			"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+			"dev": true
+		},
 		"resolve": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
diff --git a/package.json b/package.json
index 487cfdc6d11b59..19e19e5f303bab 100755
--- a/package.json
+++ b/package.json
@@ -211,6 +211,7 @@
 		"react-refresh": "0.10.0",
 		"react-test-renderer": "17.0.2",
 		"redux": "4.1.2",
+		"resize-observer-polyfill": "1.5.1",
 		"rimraf": "3.0.2",
 		"rtlcss": "2.6.2",
 		"sass": "1.35.2",
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
index 29ca4ce94d4a6a..dffc2c75274627 100644
--- a/test/unit/config/global-mocks.js
+++ b/test/unit/config/global-mocks.js
@@ -22,3 +22,5 @@ jest.mock( '@wordpress/compose', () => {
 if ( ! window.wp?.galleryBlockV2Enabled ) {
 	window.wp = { ...window.wp, galleryBlockV2Enabled: true };
 }
+
+global.ResizeObserver = require( 'resize-observer-polyfill' );

From 0eeaa5ba32705da8bfcf3c04a0d96b48bcd57220 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 9 May 2022 14:37:16 +0100
Subject: [PATCH 9/9] Avoid mocking useResizeObserver

---
 .../flyout/test/__snapshots__/index.js.snap   | 21 ++++++++++---------
 .../components/src/placeholder/test/index.js  |  7 +++++++
 .../popover/test/__snapshots__/index.js.snap  |  8 +++++++
 .../test/__snapshots__/index.js.snap          |  8 +++++++
 test/unit/config/global-mocks.js              |  5 -----
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/flyout/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap
index edd119e242d78b..60c6d3fe10500f 100644
--- a/packages/components/src/flyout/test/__snapshots__/index.js.snap
+++ b/packages/components/src/flyout/test/__snapshots__/index.js.snap
@@ -93,6 +93,10 @@ exports[`props should render correctly 1`] = `
   <div
     class="emotion-3 emotion-2"
   >
+    <div
+      aria-hidden="true"
+      style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+    />
     <div
       class="components-card__body components-card-body emotion-5 emotion-2"
       data-wp-c16t="true"
@@ -158,14 +162,12 @@ Snapshot Diff:
     tabindex="-1"
   >
     <div
-@@ -14,11 +14,19 @@
-      data-wp-c16t="true"
-      data-wp-component="Card"
-    >
-      <div
-        class="css-mgwsf4-View-Content em57xhy0"
--     />
-+     >
+@@ -19,10 +19,17 @@
+      >
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
 +       <div
 +         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
 +         data-wp-c16t="true"
@@ -173,10 +175,9 @@ Snapshot Diff:
 +       >
 +         Code is Poetry
 +       </div>
-+     </div>
+      </div>
       <div
         aria-hidden="true"
         class="components-elevation css-1b4rkmt-View-Elevation-sx-Base-elevationClassName em57xhy0"
         data-wp-c16t="true"
-        data-wp-component="Elevation"
 `;
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
index e2d787bc51b40c..e2a6090764cb2b 100644
--- a/packages/components/src/placeholder/test/index.js
+++ b/packages/components/src/placeholder/test/index.js
@@ -14,6 +14,13 @@ import { useResizeObserver } from '@wordpress/compose';
  */
 import Placeholder from '../';
 
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( () => [] ),
+	};
+} );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		useResizeObserver.mockReturnValue( [
diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap
index e59d209c85b129..2c7663281a154e 100644
--- a/packages/components/src/popover/test/__snapshots__/index.js.snap
+++ b/packages/components/src/popover/test/__snapshots__/index.js.snap
@@ -16,6 +16,10 @@ exports[`Popover should pass additional props to portaled element 1`] = `
       <div
         style="position: relative;"
       >
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
         Hello
       </div>
     </div>
@@ -38,6 +42,10 @@ exports[`Popover should render content 1`] = `
       <div
         style="position: relative;"
       >
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
         Hello
       </div>
     </div>
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
index 189fceaa601452..25b38d19434425 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
@@ -173,6 +173,10 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
+      <div
+        aria-hidden="true"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+      />
       <div
         class="emotion-8 emotion-9"
         role="presentation"
@@ -395,6 +399,10 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
+      <div
+        aria-hidden="true"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+      />
       <div
         class="emotion-8 emotion-9"
         data-active="false"
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
index dffc2c75274627..8fac04b2151ad6 100644
--- a/test/unit/config/global-mocks.js
+++ b/test/unit/config/global-mocks.js
@@ -1,12 +1,7 @@
 jest.mock( '@wordpress/compose', () => {
-	const App = () => null;
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
 		useViewportMatch: jest.fn(),
-		useResizeObserver: jest.fn( () => [
-			<App key={ 'mock-key' } />,
-			{ width: 700, height: 500 },
-		] ),
 	};
 } );