fix(popOver): reposition PopOver when it is resized

- Fixes an issue where a `PopOver` was incorrectly positioned after a
  resize

Author: Brian Ochan

packages/core/src/PopOver/index.tsx

@@ -1,9 +1,19 @@
-import React, { useRef, useLayoutEffect, useContext, useCallback } from 'react'
+import React, {
+  useLayoutEffect,
+  useContext,
+  useCallback,
+  useState,
+} from 'react'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 
 import { LayerContext } from '../Practical'
-import { useOnResizeEffect, useOnScrollEffect, anchorPosition } from './utils'
+import {
+  useOnResizeParentEffect,
+  useOnResizeEffect,
+  useOnScrollEffect,
+  anchorPosition,
+} from './utils'
 
 type BaseElement = HTMLDivElement
 type BaseProps = React.HTMLAttributes<BaseElement>
@@ -84,23 +94,24 @@ export const PopOver: React.FC<PopOverProps> = ({
   children,
   ...props
 }) => {
-  const popOverContainerRef = useRef<HTMLDivElement>(null)
+  const [popOverContainer, setPopOverContainer] =
+    useState<HTMLDivElement | null>(null)
 
   const { el: layerRoot } = useContext(LayerContext)
 
   const position = useCallback(() => {
     // Position the pop-over element synchronously
-    if (anchorEl !== null && popOverContainerRef.current !== null) {
+    if (anchorEl !== null && popOverContainer !== null) {
       if (onPosition === undefined) {
-        anchorPosition(anchorEl, popOverContainerRef.current, {
+        anchorPosition(anchorEl, popOverContainer, {
           horizontalPosition,
           verticalPosition,
           horizontalAlignment,
           verticalAlignment,
         })
         return
       }
-      onPosition(anchorEl, popOverContainerRef.current)
+      onPosition(anchorEl, popOverContainer)
     }
   }, [
     horizontalPosition,
@@ -109,6 +120,7 @@ export const PopOver: React.FC<PopOverProps> = ({
     verticalAlignment,
     anchorEl,
     onPosition,
+    popOverContainer,
   ])
 
   useOnScrollEffect(
@@ -119,20 +131,24 @@ export const PopOver: React.FC<PopOverProps> = ({
           /** */
         }
   )
-  useOnResizeEffect(anchorEl, position)
+
+  // Used when resizing the parent anchorEl
+  useOnResizeParentEffect(anchorEl, position)
+
+  useOnResizeEffect(popOverContainer, position)
 
   // Reposition on initialize
   useLayoutEffect(() => {
     position()
-  }, [position])
+  }, [position, popOverContainer])
 
   // When the layer element is not available, there is no layer yet.
   if (layerRoot === null) {
     return null
   }
 
   return ReactDOM.createPortal(
-    <PopOverContainer ref={popOverContainerRef} {...props}>
+    <PopOverContainer ref={setPopOverContainer} {...props}>
       {children}
     </PopOverContainer>,
     layerRoot

packages/core/src/PopOver/utils.ts

@@ -33,16 +33,16 @@ export const useOnScrollEffect = (
 }
 
 // Reposition on resize
-export const useOnResizeEffect = (
-  anchorEl: HTMLElement | null,
+export const useOnResizeParentEffect = (
+  element: HTMLElement | null,
   onResize: () => void
 ): void => {
   useLayoutEffect(() => {
-    if (anchorEl === null) {
+    if (element === null) {
       return undefined
     }
 
-    let parentEl = anchorEl.parentElement
+    let parentEl = element.parentElement
     const observer = new window.ResizeObserver(onResize)
 
     while (parentEl !== null) {
@@ -51,7 +51,23 @@ export const useOnResizeEffect = (
     }
 
     return () => observer.disconnect()
-  }, [onResize, anchorEl])
+  }, [onResize, element])
+}
+
+export const useOnResizeEffect = (
+  element: HTMLElement | null,
+  onResize: () => void
+) => {
+  useLayoutEffect(() => {
+    if (element === null) {
+      return undefined
+    }
+
+    const observer = new window.ResizeObserver(onResize)
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [onResize, element])
 }
 
 export const anchorPosition = (