Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devongovett merged 3 commits into from
Jul 12, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c18f42
Remove dom-helpers dependency from @react-aria/overlays
devongovett Jul 11, 2022
bcc5d8d
Fix crash
devongovett Jul 12, 2022
ef463c4
Merge branch 'main' into remove-dom-helpers
snowystinger Jul 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/@react-aria/overlays/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
60 changes: 41 additions & 19 deletions packages/@react-aria/overlays/src/calculatePosition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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};
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Copy link
Copy Markdown
Member

@snowystinger snowystinger Jul 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's odd there's still one left over, looks like it's a dependency of react-transition-group, which we have two different version dependencies on actually, even with the removal you did
Screen Shot 2022-07-11 at 9 56 41 AM
I'm happy to look into consolidating those separately, so this is mostly just a note

Copy link
Copy Markdown
Member Author

@devongovett devongovett Jul 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, react-spectrum will still have a dependency, but react-aria won't

version "5.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
Expand Down