Merge ecbf35c into a1122e4

.changeset/cyan-shirts-drive.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(useResizeObserver): undefined variable alternative

packages/react/src/hooks/useResizeObserver.ts

@@ -1,5 +1,5 @@
 import type {RefObject} from 'react'
-import {useRef} from 'react'
+import {useRef, useState} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 // https://gist.github.com/strothj/708afcf4f01dd04de8f49c92e88093c3
@@ -14,6 +14,7 @@ export function useResizeObserver<T extends HTMLElement>(
   target?: RefObject<T>,
   depsArray: unknown[] = [],
 ) {
+  const [targetClientRect, setTargetClientRect] = useState<DOMRect | null>(null)
   const savedCallback = useRef(callback)
 
   useLayoutEffect(() => {
@@ -26,15 +27,37 @@ export function useResizeObserver<T extends HTMLElement>(
       return
     }
 
-    const observer = new ResizeObserver(entries => {
-      savedCallback.current(entries)
-    })
-
-    observer.observe(targetEl)
-
-    return () => {
-      observer.disconnect()
+    if (typeof ResizeObserver === 'function') {
+      const observer = new ResizeObserver(entries => {
+        savedCallback.current(entries)
+      })
+
+      observer.observe(targetEl)
+
+      return () => {
+        observer.disconnect()
+      }
+    } else {
+      const saveTargetDimensions = () => {
+        const currTargetRect = targetEl.getBoundingClientRect()
+
+        if (currTargetRect.width !== targetClientRect?.width || currTargetRect.height !== targetClientRect.height) {
+          savedCallback.current([
+            {
+              contentRect: currTargetRect,
+            },
+          ])
+        }
+        setTargetClientRect(currTargetRect)
+      }
+      // eslint-disable-next-line github/prefer-observers
+      window.addEventListener('resize', saveTargetDimensions)
+
+      return () => {
+        window.removeEventListener('resize', saveTargetDimensions)
+      }
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [target, ...depsArray])
 }