From 2d81e987464b7985d69d852af1672ffeecd50d37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sat, 9 Aug 2025 20:27:33 +0200 Subject: [PATCH 01/11] fix: subtract border width from visible rect --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 8b427d3fa01..e15edd0f103 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -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 }; } } From edfecf450b5a09602fbdc410f1507892b0474cec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sat, 9 Aug 2025 20:47:01 +0200 Subject: [PATCH 02/11] fix: tests --- packages/@react-aria/dnd/test/useDroppableCollection.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/dnd/test/useDroppableCollection.test.js b/packages/@react-aria/dnd/test/useDroppableCollection.test.js index 672c415bced..9eded156702 100644 --- a/packages/@react-aria/dnd/test/useDroppableCollection.test.js +++ b/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; }); From afb552861133c77ef72d06f446360fc50b8573c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sat, 9 Aug 2025 20:57:24 +0200 Subject: [PATCH 03/11] fix: table tests --- packages/react-aria-components/test/Table.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js index 667096ceabd..b003525254e 100644 --- a/packages/react-aria-components/test/Table.test.js +++ b/packages/react-aria-components/test/Table.test.js @@ -1633,7 +1633,7 @@ 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'}, @@ -1641,7 +1641,7 @@ describe('Table', () => { ]; 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(); }); From 1d460ccf43b71e7d1404920260ecc55d360d0fc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sun, 10 Aug 2025 11:43:15 +0200 Subject: [PATCH 04/11] fix: adjust item rects by container border --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index e15edd0f103..4d4311e6aa8 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -33,9 +33,12 @@ export class DOMLayoutDelegate implements LayoutDelegate { let containerRect = container.getBoundingClientRect(); let itemRect = item.getBoundingClientRect(); + let borderAdjustedX = 2 * itemRect.left - 2 * containerRect.left - container.offsetWidth + container.clientWidth; + let borderAdjustedY = 2 * itemRect.top - 2 * containerRect.top - container.offsetHeight + container.clientHeight; + return { - x: itemRect.left - containerRect.left + container.scrollLeft, - y: itemRect.top - containerRect.top + container.scrollTop, + x: borderAdjustedX + container.scrollLeft, + y: borderAdjustedY + container.scrollTop, width: itemRect.width, height: itemRect.height }; From 9ae42595618f8b4f01dcdb95a0ac57fe25aee1c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sun, 10 Aug 2025 11:58:23 +0200 Subject: [PATCH 05/11] fix: item rect calculation --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 4d4311e6aa8..a7653911828 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -33,8 +33,8 @@ export class DOMLayoutDelegate implements LayoutDelegate { let containerRect = container.getBoundingClientRect(); let itemRect = item.getBoundingClientRect(); - let borderAdjustedX = 2 * itemRect.left - 2 * containerRect.left - container.offsetWidth + container.clientWidth; - let borderAdjustedY = 2 * itemRect.top - 2 * containerRect.top - container.offsetHeight + container.clientHeight; + let borderAdjustedX = itemRect.left - containerRect.left - container.clientLeft; + let borderAdjustedY = itemRect.top - containerRect.top - container.clientTop; return { x: borderAdjustedX + container.scrollLeft, From 749a6966520a8ad53d732db1afe19f82669f5f9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sun, 10 Aug 2025 12:15:47 +0200 Subject: [PATCH 06/11] feat: simplify rect calculation --- .../@react-aria/selection/src/DOMLayoutDelegate.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index a7653911828..5ec4b499e0a 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -30,17 +30,16 @@ export class DOMLayoutDelegate implements LayoutDelegate { return null; } - let containerRect = container.getBoundingClientRect(); - let itemRect = item.getBoundingClientRect(); + let rect = item.getBoundingClientRect(); - let borderAdjustedX = itemRect.left - containerRect.left - container.clientLeft; - let borderAdjustedY = itemRect.top - containerRect.top - container.clientTop; + let borderAdjustedX = rect.left - container.offsetLeft - container.clientLeft; + let borderAdjustedY = rect.top - container.offsetTop - container.clientTop; return { x: borderAdjustedX + container.scrollLeft, y: borderAdjustedY + container.scrollTop, - width: itemRect.width, - height: itemRect.height + width: rect.width, + height: rect.height }; } From ab0e277952ed45fa6ae5c712d188bae4d3027963 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sun, 10 Aug 2025 12:26:06 +0200 Subject: [PATCH 07/11] fix: remove scroll position from offset --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 5ec4b499e0a..9444feccdc4 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -32,12 +32,9 @@ export class DOMLayoutDelegate implements LayoutDelegate { let rect = item.getBoundingClientRect(); - let borderAdjustedX = rect.left - container.offsetLeft - container.clientLeft; - let borderAdjustedY = rect.top - container.offsetTop - container.clientTop; - return { - x: borderAdjustedX + container.scrollLeft, - y: borderAdjustedY + container.scrollTop, + x: rect.left - container.offsetLeft - container.clientLeft + y: rect.top - container.offsetTop - container.clientTop, width: rect.width, height: rect.height }; From 4792d973d3bf118cc188d7ff8f05da5e468dac2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Sun, 10 Aug 2025 12:30:05 +0200 Subject: [PATCH 08/11] fix: typo --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 9444feccdc4..06e601cee36 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -33,7 +33,7 @@ export class DOMLayoutDelegate implements LayoutDelegate { let rect = item.getBoundingClientRect(); return { - x: rect.left - container.offsetLeft - container.clientLeft + x: rect.left - container.offsetLeft - container.clientLeft, y: rect.top - container.offsetTop - container.clientTop, width: rect.width, height: rect.height From 3c938d2007695ef819ca2bb86fb5c4d28bd5d2eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Fri, 15 Aug 2025 22:03:29 +0200 Subject: [PATCH 09/11] fix: calculate position relative to viewport --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 06e601cee36..6feae3e1139 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -33,8 +33,8 @@ export class DOMLayoutDelegate implements LayoutDelegate { let rect = item.getBoundingClientRect(); return { - x: rect.left - container.offsetLeft - container.clientLeft, - y: rect.top - container.offsetTop - container.clientTop, + x: rect.left - container.offsetLeft - container.clientLeft + container.scrollLeft, + y: rect.top - container.offsetTop - container.clientTop + container.scrollTop, width: rect.width, height: rect.height }; From 82e81f269a68812450af84c09bcddccfd91638d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Fri, 15 Aug 2025 22:10:29 +0200 Subject: [PATCH 10/11] fix: container relative calc --- packages/@react-aria/selection/src/DOMLayoutDelegate.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 6feae3e1139..ca385642083 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -31,10 +31,11 @@ export class DOMLayoutDelegate implements LayoutDelegate { } let rect = item.getBoundingClientRect(); + let containerRect = container.getBoundingClientRect(); return { - x: rect.left - container.offsetLeft - container.clientLeft + container.scrollLeft, - y: rect.top - container.offsetTop - container.clientTop + container.scrollTop, + x: rect.left - containerRect.left - container.clientLeft + container.scrollLeft, + y: rect.top - containerRect.top - container.clientTop + container.scrollTop, width: rect.width, height: rect.height }; From d821b90b8abe379fcfb2ed4d46709d6b4d5637f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nikolas=20Schr=C3=B6ter?= <25958801+nwidynski@users.noreply.github.com> Date: Fri, 15 Aug 2025 22:11:28 +0200 Subject: [PATCH 11/11] chore: formatting --- .../@react-aria/selection/src/DOMLayoutDelegate.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index ca385642083..fe54211a910 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts @@ -30,14 +30,14 @@ export class DOMLayoutDelegate implements LayoutDelegate { return null; } - let rect = item.getBoundingClientRect(); let containerRect = container.getBoundingClientRect(); + let itemRect = item.getBoundingClientRect(); return { - x: rect.left - containerRect.left - container.clientLeft + container.scrollLeft, - y: rect.top - containerRect.top - container.clientTop + container.scrollTop, - width: rect.width, - height: rect.height + x: itemRect.left - containerRect.left - container.clientLeft + container.scrollLeft, + y: itemRect.top - containerRect.top - container.clientTop + container.scrollTop, + width: itemRect.width, + height: itemRect.height }; }