diff --git a/packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts index 291cf4712..2189282dd 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/tab/defaultTab.spec.ts @@ -54,7 +54,7 @@ describe('defaultTab', () => { let el = cut.element.querySelector('.dv-default-tab-action'); - fireEvent.mouseDown(el!); + fireEvent.pointerDown(el!); expect(api.close).toHaveBeenCalledTimes(0); fireEvent.click(el!); diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index bdcc370ee..7681e70ee 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -459,6 +459,7 @@ describe('tabsContainer', () => { onDidRemovePanel: jest.fn(), element: document.createElement('div'), addFloatingGroup: jest.fn(), + doSetGroupActive: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -486,10 +487,11 @@ describe('tabsContainer', () => { return { top: 10, left: 20, width: 0, height: 0 } as any; }); - const event = new KeyboardEvent('mousedown', { shiftKey: true }); + const event = new KeyboardEvent('pointerdown', { shiftKey: true }); const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault'); fireEvent(container, event); + expect(accessor.doSetGroupActive).toHaveBeenCalledWith(groupPanel); expect(accessor.addFloatingGroup).toHaveBeenCalledWith(groupPanel, { x: 100, y: 60, @@ -498,7 +500,7 @@ describe('tabsContainer', () => { expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(1); expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(1); - const event2 = new KeyboardEvent('mousedown', { shiftKey: false }); + const event2 = new KeyboardEvent('pointerdown', { shiftKey: false }); const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault'); fireEvent(container, event2); @@ -513,6 +515,7 @@ describe('tabsContainer', () => { onDidRemovePanel: jest.fn(), element: document.createElement('div'), addFloatingGroup: jest.fn(), + doSetGroupActive: jest.fn(), }); const groupPanelMock = jest.fn(() => { @@ -540,14 +543,15 @@ describe('tabsContainer', () => { return { top: 10, left: 20, width: 0, height: 0 } as any; }); - const event = new KeyboardEvent('mousedown', { shiftKey: true }); + const event = new KeyboardEvent('pointerdown', { shiftKey: true }); const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault'); fireEvent(container, event); + expect(accessor.doSetGroupActive).toHaveBeenCalledWith(groupPanel); expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0); expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(0); - const event2 = new KeyboardEvent('mousedown', { shiftKey: false }); + const event2 = new KeyboardEvent('pointerdown', { shiftKey: false }); const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault'); fireEvent(container, event2); @@ -595,7 +599,7 @@ describe('tabsContainer', () => { const el = cut.element.querySelector('.tab')!; expect(el).toBeTruthy(); - const event = new KeyboardEvent('mousedown', { shiftKey: true }); + const event = new KeyboardEvent('pointerdown', { shiftKey: true }); const preventDefaultSpy = jest.spyOn(event, 'preventDefault'); fireEvent(el, event); diff --git a/packages/dockview-core/src/__tests__/events.spec.ts b/packages/dockview-core/src/__tests__/events.spec.ts index af05c3f28..461b1518e 100644 --- a/packages/dockview-core/src/__tests__/events.spec.ts +++ b/packages/dockview-core/src/__tests__/events.spec.ts @@ -153,14 +153,14 @@ describe('events', () => { const disposable = addDisposableWindowListener( element as any, - 'mousedown', + 'pointerdown', handler, true ); expect(element.addEventListener).toBeCalledTimes(1); expect(element.addEventListener).toHaveBeenCalledWith( - 'mousedown', + 'pointerdown', handler, true ); @@ -171,7 +171,7 @@ describe('events', () => { expect(element.addEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledWith( - 'mousedown', + 'pointerdown', handler, true ); @@ -187,13 +187,13 @@ describe('events', () => { const disposable = addDisposableWindowListener( element as any, - 'mousedown', + 'pointerdown', handler ); expect(element.addEventListener).toBeCalledTimes(1); expect(element.addEventListener).toHaveBeenCalledWith( - 'mousedown', + 'pointerdown', handler, undefined ); @@ -204,7 +204,7 @@ describe('events', () => { expect(element.addEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledWith( - 'mousedown', + 'pointerdown', handler, undefined ); @@ -220,14 +220,14 @@ describe('events', () => { const disposable = addDisposableListener( element as any, - 'mousedown', + 'pointerdown', handler, true ); expect(element.addEventListener).toBeCalledTimes(1); expect(element.addEventListener).toHaveBeenCalledWith( - 'mousedown', + 'pointerdown', handler, true ); @@ -238,7 +238,7 @@ describe('events', () => { expect(element.addEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledWith( - 'mousedown', + 'pointerdown', handler, true ); @@ -254,13 +254,13 @@ describe('events', () => { const disposable = addDisposableListener( element as any, - 'mousedown', + 'pointerdown', handler ); expect(element.addEventListener).toBeCalledTimes(1); expect(element.addEventListener).toHaveBeenCalledWith( - 'mousedown', + 'pointerdown', handler, undefined ); @@ -271,7 +271,7 @@ describe('events', () => { expect(element.addEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledTimes(1); expect(element.removeEventListener).toBeCalledWith( - 'mousedown', + 'pointerdown', handler, undefined ); diff --git a/packages/dockview-core/src/dnd/groupDragHandler.ts b/packages/dockview-core/src/dnd/groupDragHandler.ts index 7138437bf..bdda2be3b 100644 --- a/packages/dockview-core/src/dnd/groupDragHandler.ts +++ b/packages/dockview-core/src/dnd/groupDragHandler.ts @@ -21,7 +21,7 @@ export class GroupDragHandler extends DragHandler { this.addDisposables( addDisposableListener( element, - 'mousedown', + 'pointerdown', (e) => { if (e.shiftKey) { /** diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index 8b927a105..af86ee35b 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -30,7 +30,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { this._element.appendChild(this.action); this.addDisposables( - addDisposableListener(this.action, 'mousedown', (ev) => { + addDisposableListener(this.action, 'pointerdown', (ev) => { ev.preventDefault(); }) ); @@ -46,7 +46,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { this._title = event.title; this.render(); }), - addDisposableListener(this.action, 'mousedown', (ev) => { + addDisposableListener(this.action, 'pointerdown', (ev) => { ev.preventDefault(); }), addDisposableListener(this.action, 'click', (ev) => { diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts index c97f1f110..69094e92e 100644 --- a/packages/dockview-core/src/dockview/components/tab/tab.ts +++ b/packages/dockview-core/src/dockview/components/tab/tab.ts @@ -124,7 +124,7 @@ export class Tab extends CompositeDisposable { this._onDragStart.fire(event); }), dragHandler, - addDisposableListener(this._element, 'mousedown', (event) => { + addDisposableListener(this._element, 'pointerdown', (event) => { if (event.defaultPrevented) { return; } diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 7557f3fde..f856d03df 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -253,7 +253,7 @@ export class TabsContainer }), addDisposableListener( this.voidContainer.element, - 'mousedown', + 'pointerdown', (event) => { const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups; @@ -278,7 +278,7 @@ export class TabsContainer } } ), - addDisposableListener(this.tabContainer, 'mousedown', (event) => { + addDisposableListener(this.tabContainer, 'pointerdown', (event) => { if (event.defaultPrevented) { return; } diff --git a/packages/dockview-core/src/overlay/overlay.ts b/packages/dockview-core/src/overlay/overlay.ts index 0f39961ce..bcc0ac3a2 100644 --- a/packages/dockview-core/src/overlay/overlay.ts +++ b/packages/dockview-core/src/overlay/overlay.ts @@ -37,7 +37,9 @@ class AriaLevelTracker { private update(): void { for (let i = 0; i < this._orderedList.length; i++) { this._orderedList[i].setAttribute('aria-level', `${i}`); - this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`; + this._orderedList[i].style.zIndex = `${ + DEFAULT_OVERLAY_Z_INDEX + i * 2 + }`; } } } @@ -241,7 +243,7 @@ export class Overlay extends CompositeDisposable { iframes.release(); }, }, - addDisposableWindowListener(window, 'mousemove', (e) => { + addDisposableWindowListener(window, 'pointermove', (e) => { const containerRect = this.options.container.getBoundingClientRect(); const x = e.clientX - containerRect.left; @@ -342,7 +344,7 @@ export class Overlay extends CompositeDisposable { this.addDisposables( move, - addDisposableListener(dragTarget, 'mousedown', (event) => { + addDisposableListener(dragTarget, 'pointerdown', (event) => { if (event.defaultPrevented) { event.preventDefault(); return; @@ -358,7 +360,7 @@ export class Overlay extends CompositeDisposable { }), addDisposableListener( this.options.content, - 'mousedown', + 'pointerdown', (event) => { if (event.defaultPrevented) { return; @@ -377,7 +379,7 @@ export class Overlay extends CompositeDisposable { ), addDisposableListener( this.options.content, - 'mousedown', + 'pointerdown', () => { arialLevelTracker.push(this._element); }, @@ -409,7 +411,7 @@ export class Overlay extends CompositeDisposable { this.addDisposables( move, - addDisposableListener(resizeHandleElement, 'mousedown', (e) => { + addDisposableListener(resizeHandleElement, 'pointerdown', (e) => { e.preventDefault(); let startPosition: { @@ -422,7 +424,7 @@ export class Overlay extends CompositeDisposable { const iframes = disableIframePointEvents(); move.value = new CompositeDisposable( - addDisposableWindowListener(window, 'mousemove', (e) => { + addDisposableWindowListener(window, 'pointermove', (e) => { const containerRect = this.options.container.getBoundingClientRect(); const overlayRect = diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx index d5fb32c7d..427e9650e 100644 --- a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx +++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx @@ -176,7 +176,7 @@ describe('defaultTab', () => { expect(element.querySelector('.dv-default-tab-action')).toBeTruthy(); }); - test('that mouseDown on close button prevents panel becoming active', async () => { + test('that pointerDown on close button prevents panel becoming active', async () => { const api = fromPartial({ setActive: jest.fn(), onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), @@ -197,7 +197,7 @@ describe('defaultTab', () => { '.dv-default-tab-action' ) as HTMLElement; - fireEvent.mouseDown(btn); + fireEvent.pointerDown(btn); expect(api.setActive).toHaveBeenCalledTimes(0); fireEvent.click(element); diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx index 56c3a6793..f1586fa83 100644 --- a/packages/dockview/src/dockview/defaultTab.tsx +++ b/packages/dockview/src/dockview/defaultTab.tsx @@ -49,7 +49,7 @@ export const DockviewDefaultTab: React.FunctionComponent< [api, closeActionOverride] ); - const onMouseDown = React.useCallback((e: React.MouseEvent) => { + const onPointerDown = React.useCallback((e: React.MouseEvent) => { e.preventDefault(); }, []); @@ -79,7 +79,7 @@ export const DockviewDefaultTab: React.FunctionComponent< {!hideClose && (