Fix: DOMLayoutDelegate miscalculates item & visible rects (#8696)

* fix: subtract border width from visible rect

* fix: tests

* fix: table tests

* fix: adjust item rects by container border

* fix: item rect calculation

* feat: simplify rect calculation

* fix: remove scroll position from offset

* fix: typo

* fix: calculate position relative to viewport

* fix: container relative calc

* chore: formatting

Author: nwidynski

packages/@react-aria/dnd/test/useDroppableCollection.test.js

@@ -56,7 +56,7 @@ describe('useDroppableCollection', () => {
       return this.getBoundingClientRect().top;
     });
 
-    jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
+    jest.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
       return this.getBoundingClientRect().height;
     });
 

packages/@react-aria/selection/src/DOMLayoutDelegate.ts

@@ -34,8 +34,8 @@ export class DOMLayoutDelegate implements LayoutDelegate {
     let itemRect = item.getBoundingClientRect();
 
     return {
-      x: itemRect.left - containerRect.left + container.scrollLeft,
-      y: itemRect.top - containerRect.top + container.scrollTop,
+      x: itemRect.left - containerRect.left - container.clientLeft + container.scrollLeft,
+      y: itemRect.top - containerRect.top - container.clientTop + container.scrollTop,
       width: itemRect.width,
       height: itemRect.height
     };
@@ -54,8 +54,8 @@ export class DOMLayoutDelegate implements LayoutDelegate {
     return {
       x: container?.scrollLeft ?? 0,
       y: container?.scrollTop ?? 0,
-      width: container?.offsetWidth ?? 0,
-      height: container?.offsetHeight ?? 0
+      width: container?.clientWidth ?? 0,
+      height: container?.clientHeight ?? 0
     };
   }
 }

packages/react-aria-components/test/Table.test.js

@@ -1633,15 +1633,15 @@ describe('Table', () => {
   });
 
   describe('load more spinner', () => {
-    let offsetHeight, scrollHeight;
+    let clientHeight, scrollHeight;
     let DndTable = stories.DndTable;
     let initialItems = [
       {id: '1', type: 'file', name: 'Adobe Photoshop'},
       {id: '2', type: 'file', name: 'Adobe XD'}
     ];
     beforeAll(function () {
       scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 200);
-      offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
+      clientHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
         if (this.getAttribute('role') === 'grid') {
           return 200;
         }
@@ -1651,7 +1651,7 @@ describe('Table', () => {
     });
 
     afterAll(function () {
-      offsetHeight.mockReset();
+      clientHeight.mockReset();
       scrollHeight.mockReset();
     });