diff --git a/packages/@react-aria/overlays/package.json b/packages/@react-aria/overlays/package.json index b4d1ef55fa1..f1cec06d2cd 100644 --- a/packages/@react-aria/overlays/package.json +++ b/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", diff --git a/packages/@react-aria/overlays/src/calculatePosition.ts b/packages/@react-aria/overlays/src/calculatePosition.ts index b3831182e7d..fa9f7ef1f7c 100644 --- a/packages/@react-aria/overlays/src/calculatePosition.ts +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 9a1c5d2d962..68e4e39c14c 100644 --- a/yarn.lock +++ b/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==