Update react-resize-aware with use-resize-observer (#40509)

package.json

@@ -212,6 +212,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",

packages/components/package.json

@@ -65,7 +65,6 @@
 		"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",
 		"uuid": "^8.3.0"
 	},

packages/components/src/flyout/test/__snapshots__/index.js.snap

@@ -93,12 +93,9 @@ exports[`props should render correctly 1`] = `
   <div
     class="emotion-3 emotion-2"
   >
-    <iframe
+    <div
       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"
+      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"
@@ -165,11 +162,11 @@ 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"
+@@ -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"

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?.();

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( [

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>

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;
 
@@ -56,11 +56,10 @@ 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 ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 
 	/*
 	 * Indicates if the x/y axis is preferred.

packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -173,12 +173,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
-      <iframe
+      <div
         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"
+        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"
@@ -402,12 +399,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
+      <div
         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"
+        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"

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'

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)

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_
 

packages/compose/package.json

@@ -41,7 +41,6 @@
 		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
-		"react-resize-aware": "^3.1.0",
 		"use-memo-one": "^1.1.1"
 	},
 	"peerDependencies": {

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