Commit b3f557a6 authored by Jason Quense's avatar Jason Quense
Browse files

fix: consider margins in Popper calculations

parent 1bd62493
......@@ -7,6 +7,16 @@ import { componentOrElement, elementType } from 'prop-types-extra';
import Fade from './Fade';
function getMargins(element) {
const styles = getComputedStyle(element);
const top = parseFloat(styles.marginTop) || 0;
const right = parseFloat(styles.marginRight) || 0;
const bottom = parseFloat(styles.marginBottom) || 0;
const left = parseFloat(styles.marginLeft) || 0;
return { top, right, bottom, left };
}
const propTypes = {
/**
* A component instance, DOM node, or function that returns either.
......@@ -120,12 +130,73 @@ function wrapRefs(props, arrowProps) {
aRef.__wrapped || (aRef.__wrapped = (r) => aRef(findDOMNode(r)));
}
function Overlay({ children: overlay, transition, ...outerProps }) {
const marginModifiers = [
{
name: 'marginOffsets',
enabled: true,
phase: 'beforeRead',
effect: ({ state }) => {
return () => {
state.elements.reference.removeAttribute('aria-describedby');
};
},
fn: ({ state, name }) => {
const { popper: popperRect } = state.rects;
const { popper, arrow } = state.elements;
const popperMargins = getMargins(popper);
const arrowMargins = arrow && getMargins(arrow);
state.rects.popper = {
...popperRect,
width: popperRect.width + popperMargins.left + popperMargins.right,
height: popperRect.height + popperMargins.top + popperMargins.bottom,
y: popperRect.y - popperMargins.top,
x: popperRect.x - popperMargins.left,
};
state.modifiersData[name] = {
popper: popperMargins,
arrow: arrowMargins,
};
},
},
{
name: 'marginOffsetArrow',
enabled: true,
phase: 'main',
requiresIfExists: ['arrow'],
fn({ state }) {
if (!state.elements.arrow) return;
const { arrow: arrowMargin } = state.modifiersData.marginOffsets;
const offsets = state.modifiersData.arrow;
if (offsets.x != null) offsets.x -= arrowMargin.left;
if (offsets.y != null) offsets.y -= arrowMargin.top;
},
},
];
function Overlay({
children: overlay,
transition,
popperConfig = {},
...outerProps
}) {
const popperRef = useRef({});
transition = transition === true ? Fade : transition || null;
return (
<BaseOverlay {...outerProps} transition={transition}>
<BaseOverlay
{...outerProps}
popperConfig={{
...popperConfig,
modifiers: marginModifiers.concat(popperConfig.modifiers || []),
}}
transition={transition}
>
{({
props: overlayProps,
arrowProps,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment