Fix useResizeObserver bugs (#65389)

* Rename "_legacy" dir to "legacy"

* Fix circular dependency issue

* Fix bug that caused elements to not be unobserved.

* Add changelog

* Remove changelog entry

Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

packages/compose/src/hooks/use-resize-observer/index.ts

@@ -1,53 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useEvent from '../use-event';
-import type { ObservedSize } from './_legacy';
-import _useLegacyResizeObserver from './_legacy';
+import { useResizeObserver as _useResizeObserver } from './use-resize-observer';
+import type { ObservedSize } from './legacy';
+import _useLegacyResizeObserver from './legacy';
 /**
  * External dependencies
  */
 import type { ReactElement } from 'react';
 
-// This is the current implementation of `useResizeObserver`.
-//
-// The legacy implementation is still supported for backwards compatibility.
-// This is achieved by overloading the exported function with both signatures,
-// and detecting which API is being used at runtime.
-function _useResizeObserver< T extends HTMLElement >(
-	callback: ResizeObserverCallback,
-	resizeObserverOptions: ResizeObserverOptions = {}
-): ( element?: T | null ) => void {
-	const callbackEvent = useEvent( callback );
-
-	const observedElementRef = useRef< T | null >();
-	const resizeObserverRef = useRef< ResizeObserver >();
-	return useEvent( ( element?: T | null ) => {
-		if ( element === observedElementRef.current ) {
-			return;
-		}
-		observedElementRef.current = element;
-
-		// Set up `ResizeObserver`.
-		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
-		const { current: resizeObserver } = resizeObserverRef;
-
-		// Unobserve previous element.
-		if ( observedElementRef.current ) {
-			resizeObserver.unobserve( observedElementRef.current );
-		}
-
-		// Observe new element.
-		if ( element ) {
-			resizeObserver.observe( element, resizeObserverOptions );
-		}
-	} );
-}
-
 /**
  * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
  * for an HTML or SVG element.

packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx → packages/compose/src/hooks/use-resize-observer/legacy/index.tsx

@@ -10,7 +10,7 @@ import { useCallback, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useResizeObserver from '../index';
+import { useResizeObserver } from '../use-resize-observer';
 
 export type ObservedSize = {
 	width: number | null;

packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import useEvent from '../use-event';
+
+// This is the current implementation of `useResizeObserver`.
+//
+// The legacy implementation is still supported for backwards compatibility.
+// This is achieved by overloading the exported function with both signatures,
+// and detecting which API is being used at runtime.
+export function useResizeObserver< T extends HTMLElement >(
+	callback: ResizeObserverCallback,
+	resizeObserverOptions: ResizeObserverOptions = {}
+): ( element?: T | null ) => void {
+	const callbackEvent = useEvent( callback );
+
+	const observedElementRef = useRef< T | null >();
+	const resizeObserverRef = useRef< ResizeObserver >();
+	return useEvent( ( element?: T | null ) => {
+		if ( element === observedElementRef.current ) {
+			return;
+		}
+
+		// Set up `ResizeObserver`.
+		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Unobserve previous element.
+		if ( observedElementRef.current ) {
+			resizeObserver.unobserve( observedElementRef.current );
+		}
+
+		// Observe new element.
+		observedElementRef.current = element;
+		if ( element ) {
+			resizeObserver.observe( element, resizeObserverOptions );
+		}
+	} );
+}