@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.