Remove dom-helpers dependency from @react-aria/overlays (#3291)

Author: devongovett

packages/@react-aria/overlays/package.json

@@ -26,9 +26,7 @@
     "@react-stately/overlays": "^3.3.1",
     "@react-types/button": "^3.5.1",
     "@react-types/overlays": "^3.6.1",
-    "@react-types/shared": "^3.13.1",
-    "dom-helpers": "^5.2.1",
-    "react-transition-group": "^4.4.2"
+    "@react-types/shared": "^3.13.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -11,12 +11,6 @@
  */
 
 import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
-import getCss from 'dom-helpers/css';
-import getOffset from 'dom-helpers/offset';
-import getPosition from 'dom-helpers/position';
-import getScrollLeft from 'dom-helpers/scrollLeft';
-import getScrollTop from 'dom-helpers/scrollTop';
-import ownerDocument from 'dom-helpers/ownerDocument';
 
 interface Position {
   top?: number,
@@ -104,19 +98,16 @@ function getContainerDimensions(containerNode: HTMLElement): Dimensions {
   let scroll: Position = {};
 
   if (containerNode.tagName === 'BODY') {
-    width = visualViewport?.width ?? document.documentElement.clientWidth;
-    height = visualViewport?.height ?? document.documentElement.clientHeight;
-
-    scroll.top =
-      getScrollTop(ownerDocument(containerNode).documentElement) ||
-      getScrollTop(containerNode);
-    scroll.left =
-      getScrollLeft(ownerDocument(containerNode).documentElement) ||
-      getScrollLeft(containerNode);
+    let documentElement = document.documentElement;
+    width = visualViewport?.width ?? documentElement.clientWidth;
+    height = visualViewport?.height ?? documentElement.clientHeight;
+
+    scroll.top = documentElement.scrollTop || containerNode.scrollTop;
+    scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
   } else {
     ({width, height, top, left} = getOffset(containerNode));
-    scroll.top = getScrollTop(containerNode);
-    scroll.left = getScrollLeft(containerNode);
+    scroll.top = containerNode.scrollTop;
+    scroll.left = containerNode.scrollLeft;
   }
 
   return {width, height, scroll, top, left};
@@ -380,8 +371,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
   let childOffset: Offset = isBodyContainer ? getOffset(targetNode) : getPosition(targetNode, container);
 
   if (!isBodyContainer) {
-    let marginTop = String(getCss(targetNode, 'marginTop'));
-    let marginLeft = String(getCss(targetNode, 'marginLeft'));
+    let {marginTop, marginLeft} = window.getComputedStyle(targetNode);
     childOffset.top += parseInt(marginTop, 10) || 0;
     childOffset.left += parseInt(marginLeft, 10) || 0;
   }
@@ -411,3 +401,35 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     maxHeight
   );
 }
+
+function getOffset(node: Element): Offset {
+  let {top, left, width, height} = node.getBoundingClientRect();
+  let {scrollTop, scrollLeft, clientTop, clientLeft} = document.documentElement;
+  return {
+    top: top + scrollTop - clientTop,
+    left: left + scrollLeft - clientLeft,
+    width,
+    height
+  };
+}
+
+function getPosition(node: Element, parent: Element): Offset {
+  let style = window.getComputedStyle(node);
+  let offset: Offset;
+  if (style.position === 'fixed') {
+    let {top, left, width, height} = node.getBoundingClientRect();
+    offset = {top, left, width, height};
+  } else {
+    offset = getOffset(node);
+    let parentOffset = getOffset(parent);
+    let parentStyle = window.getComputedStyle(parent);
+    parentOffset.top += (parseInt(parentStyle.borderTopWidth, 10) || 0) - parent.scrollTop;
+    parentOffset.left += (parseInt(parentStyle.borderLeftWidth, 10) || 0) - parent.scrollLeft;
+    offset.top -= parentOffset.top;
+    offset.left -= parentOffset.left;
+  }
+
+  offset.top -= parseInt(style.marginTop, 10) || 0;
+  offset.left -= parseInt(style.marginLeft, 10) || 0;
+  return offset;
+}

yarn.lock

@@ -9392,7 +9392,7 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-dom-helpers@^5.0.1, dom-helpers@^5.2.1:
+dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==