@codecademy/gamut

68.2.268.2.3-alpha.809fdd.0
dist/Popover/Popover.js
~dist/Popover/Popover.jsModified
+4−4
Index: package/dist/Popover/Popover.js
===================================================================
--- package/dist/Popover/Popover.js
+++ package/dist/Popover/Popover.js
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useWindowScroll, useWindowSize } from 'react-use';
 import { FocusTrap } from '../FocusTrap';
-import { useResizingParentEffect, useScrollingParentsEffect } from '../PopoverContainer/hooks';
+import { getRefElement, useResizingParentEffect, useScrollingParentsEffect } from '../PopoverContainer/hooks';
 import { Beak, BeakBox, PatternContainer, PopoverContainer, PopoverPortal, RaisedDiv } from './elements';
 import { getBeakVariant } from './styles/beak';
 import { getDefaultOffset } from './utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -99,12 +99,12 @@
       left: alignments[align]
     };
   }, [align, horizontalOffset, popoverHeight, popoverWidth, position, targetRect, verticalOffset]);
   useEffect(() => {
-    setTargetRect(targetRef?.current?.getBoundingClientRect());
+    setTargetRect(getRefElement(targetRef)?.getBoundingClientRect());
   }, [targetRef, isOpen, width, height, x, y]);
   const updateTargetPosition = useCallback(rect => {
-    const target = targetRef?.current;
+    const target = getRefElement(targetRef);
     if (!target) return;
     const newRect = rect || target.getBoundingClientRect();
     setTargetRect(newRect);
   }, [targetRef]);
@@ -118,9 +118,9 @@
     if (!isInViewport) onRequestClose?.();
   }, [targetRect, isInViewport, onRequestClose]);
   const handleClickOutside = useCallback(e => {
     const target = e.target;
-    const targetElement = targetRef.current;
+    const targetElement = getRefElement(targetRef);
     if (!targetElement) return;
 
     /**
      * Allows targetRef to be or contain a button that toggles the popover open and closed.