From 7c18f4284ae7f6fd19e8b8be8da8ee28e82cc2b4 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 10 Jul 2022 20:33:50 -0700 Subject: [PATCH 1/2] Remove dom-helpers dependency from @react-aria/overlays --- packages/@react-aria/overlays/package.json | 4 +- .../overlays/src/calculatePosition.ts | 56 ++++++++++++------- yarn.lock | 2 +- 3 files changed, 39 insertions(+), 23 deletions(-) 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..fe8f856b5e4 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,31 @@ export function calculatePosition(opts: PositionOpts): PositionResult { maxHeight ); } + +function getOffset(node: Element): Offset { + let box: Offset = node.getBoundingClientRect(); + let {scrollTop, scrollLeft, clientTop, clientLeft} = document.documentElement; + box.top += scrollTop - clientTop; + box.left += scrollLeft - clientLeft; + return box; +} + +function getPosition(node: Element, parent: Element): Offset { + let style = window.getComputedStyle(node); + let offset: Offset; + if (style.position === 'fixed') { + offset = node.getBoundingClientRect(); + } 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== From bcc5d8dbd454dbe5bcaf1823b8f8177b10d9174e Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 11 Jul 2022 18:17:47 -0700 Subject: [PATCH 2/2] Fix crash --- .../@react-aria/overlays/src/calculatePosition.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/@react-aria/overlays/src/calculatePosition.ts b/packages/@react-aria/overlays/src/calculatePosition.ts index fe8f856b5e4..fa9f7ef1f7c 100644 --- a/packages/@react-aria/overlays/src/calculatePosition.ts +++ b/packages/@react-aria/overlays/src/calculatePosition.ts @@ -403,18 +403,22 @@ export function calculatePosition(opts: PositionOpts): PositionResult { } function getOffset(node: Element): Offset { - let box: Offset = node.getBoundingClientRect(); + let {top, left, width, height} = node.getBoundingClientRect(); let {scrollTop, scrollLeft, clientTop, clientLeft} = document.documentElement; - box.top += scrollTop - clientTop; - box.left += scrollLeft - clientLeft; - return box; + 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') { - offset = node.getBoundingClientRect(); + let {top, left, width, height} = node.getBoundingClientRect(); + offset = {top, left, width, height}; } else { offset = getOffset(node); let parentOffset = getOffset(parent);