diff --git a/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch b/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch index a602426af6f..fc4c114ded1 100644 --- a/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch +++ b/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch @@ -11,6 +11,19 @@ index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364e } UI.clearInitialValue(el); } +diff --git a/dist/cjs/event/behavior/keydown.js b/dist/cjs/event/behavior/keydown.js +index 55027cb256f66b808d17280dc01bc55a796a1032..993d5de5a838a711d7ae009344354772a42ed0c1 100644 +--- a/dist/cjs/event/behavior/keydown.js ++++ b/dist/cjs/event/behavior/keydown.js +@@ -110,7 +110,7 @@ const keydownBehavior = { + }, + Tab: (event, target, instance)=>{ + return ()=>{ +- const dest = getTabDestination.getTabDestination(target, instance.system.keyboard.modifiers.Shift); ++ const dest = getTabDestination.getTabDestination(document.activeElement, instance.system.keyboard.modifiers.Shift); + focus.focusElement(dest); + if (selection.hasOwnSelection(dest)) { + UI.setUISelection(dest, { diff --git a/dist/cjs/utils/focus/getActiveElement.js b/dist/cjs/utils/focus/getActiveElement.js index d25f3a8ef67e856e43614559f73012899c0b53d7..4ed9ee45565ed438ee9284d8d3043c0bd50463eb 100644 --- a/dist/cjs/utils/focus/getActiveElement.js 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; }); diff --git a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts b/packages/@react-aria/selection/src/DOMLayoutDelegate.ts index 8b427d3fa01..fe54211a910 100644 --- a/packages/@react-aria/selection/src/DOMLayoutDelegate.ts +++ b/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 }; } } diff --git a/packages/@react-spectrum/list/test/ListViewDnd.test.js b/packages/@react-spectrum/list/test/ListViewDnd.test.js index 7fa741629b4..04ad1c5b2c9 100644 --- a/packages/@react-spectrum/list/test/ListViewDnd.test.js +++ b/packages/@react-spectrum/list/test/ListViewDnd.test.js @@ -2425,7 +2425,6 @@ describe('ListView', function () { tree.rerender(); await user.tab({shift: true}); - await user.tab({shift: true}); await beginDrag(tree); await user.tab(); // Should automatically jump to the folder target since we didn't provide onRootDrop and onInsert diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index bc27615475c..95e07643f91 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -101,6 +101,9 @@ const tooltip = style jest.runAllTimers()); await user.tab({shift: true}); - await user.tab({shift: true}); await user.keyboard('{ArrowLeft}'); // Drop on folder in same table @@ -2301,10 +2300,6 @@ describe('TableView', function () { await user.keyboard('{Escape}'); tree.rerender(); - await user.tab({shift: true}); - await user.tab({shift: true}); - await user.keyboard('{ArrowLeft}'); - await user.keyboard('{ArrowRight}'); let grids = tree.getAllByRole('grid'); let rowgroup = within(grids[0]).getAllByRole('rowgroup')[1]; diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts index 8be657d42b0..1803d44f2d1 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts @@ -365,6 +365,7 @@ function handleProperty(element: string, property: string, value: t.ObjectProper case 'whiteSpace': case 'textWrap': case 'wordBreak': + case 'overflowWrap': case 'boxDecorationBreak': case 'forcedColorAdjust': case 'backgroundPosition': diff --git a/packages/react-aria-components/test/GridList.test.js b/packages/react-aria-components/test/GridList.test.js index dc01ea3f93b..be82e37b791 100644 --- a/packages/react-aria-components/test/GridList.test.js +++ b/packages/react-aria-components/test/GridList.test.js @@ -782,10 +782,7 @@ describe('GridList', () => { expect(document.activeElement).toBe(items[1]); await user.tab(); - expect(document.activeElement).toBe(buttonRef.current); - - await user.tab(); - expect(document.activeElement).toBe(document.body); + expect(document.body).toHaveFocus(); }); it('should support rendering a TagGroup with tabbing navigation inside a GridListItem', async () => { 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(); }); diff --git a/yarn.lock b/yarn.lock index ee1fcc75171..e61d9c86e08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10219,10 +10219,10 @@ __metadata: "@testing-library/user-event@patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch": version: 14.6.1 - resolution: "@testing-library/user-event@patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch::version=14.6.1&hash=13cf21" + resolution: "@testing-library/user-event@patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch::version=14.6.1&hash=3511b9" peerDependencies: "@testing-library/dom": ">=7.21.4" - checksum: 10c0/ede32fec9345bb5e5c19a5abcb647d8c4704239f3f5417afe2914c1397067dae7ce547e46adfd4027c913f5735c0651ec530c73bdc5c7ea955efa860cc6a9dd9 + checksum: 10c0/5a3e378cfdcad1ae09b73141ba9ea5adb0e7ed0d9f6bf1c4ba3631c91554414c4f2ab255c23f08425d2d398daa11d745ead8ef7ba0d1de76e19252db0b5dbba3 languageName: node linkType: hard