fix: consider margins in Popper calculations

src/Overlay.js

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