chore: refactor and fix tests

packages/dockview-core/src/__tests__/__test_utils__/utils.ts

@@ -44,3 +44,30 @@ export function createOffsetDragOverEvent(params: {
 export function exhaustMicrotaskQueue(): Promise<void> {
     return new Promise<void>((resolve) => resolve());
 }
+
+export const mockGetBoundingClientRect = ({
+    left,
+    top,
+    height,
+    width,
+}: {
+    left: number;
+    top: number;
+    height: number;
+    width: number;
+}) => {
+    const result = {
+        left,
+        top,
+        height,
+        width,
+        right: left + width,
+        bottom: top + height,
+        x: left,
+        y: top,
+    };
+    return {
+        ...result,
+        toJSON: () => result,
+    };
+};

packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts

@@ -70,8 +70,8 @@ describe('abstractDragHandler', () => {
         expect(span.style.pointerEvents).toBeFalsy();
 
         fireEvent.dragEnd(element);
-        expect(iframe.style.pointerEvents).toBe('auto');
-        expect(webview.style.pointerEvents).toBe('auto');
+        expect(iframe.style.pointerEvents).toBe('');
+        expect(webview.style.pointerEvents).toBe('');
         expect(span.style.pointerEvents).toBeFalsy();
 
         handler.dispose();
@@ -114,8 +114,8 @@ describe('abstractDragHandler', () => {
         expect(span.style.pointerEvents).toBeFalsy();
 
         handler.dispose();
-        expect(iframe.style.pointerEvents).toBe('auto');
-        expect(webview.style.pointerEvents).toBe('auto');
+        expect(iframe.style.pointerEvents).toBe('');
+        expect(webview.style.pointerEvents).toBe('');
         expect(span.style.pointerEvents).toBeFalsy();
     });
 
@@ -172,7 +172,7 @@ describe('abstractDragHandler', () => {
         const event = new Event('dragstart');
         const spy = jest.spyOn(event, 'preventDefault');
         fireEvent(element, event);
-        expect(spy).toBeCalledTimes(0);
+        expect(spy).toHaveBeenCalledTimes(0);
 
         handler.dispose();
     });

packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts

@@ -1,5 +1,4 @@
 import { fireEvent } from '@testing-library/dom';
-import { Emitter, Event } from '../../../../events';
 import { ContentContainer } from '../../../../dockview/components/panel/content';
 import {
     GroupPanelPartInitParameters,
@@ -10,9 +9,9 @@ import { PanelUpdateEvent } from '../../../../panel/types';
 import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
 import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
 import { DockviewComponent } from '../../../../dockview/dockviewComponent';
-import { OverlayRenderContainer } from '../../../../overlayRenderContainer';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
+import { OverlayRenderContainer } from '../../../../overlay/overlayRenderContainer';
 
 class TestContentRenderer
     extends CompositeDisposable
@@ -58,7 +57,8 @@ describe('contentContainer', () => {
         const disposable = new CompositeDisposable();
 
         const overlayRenderContainer = new OverlayRenderContainer(
-            document.createElement('div')
+            document.createElement('div'),
+            fromPartial<DockviewComponent>({})
         );
 
         const cut = new ContentContainer(

packages/dockview-core/src/__tests__/dockview/components/titlebar/voidContainer.spec.ts

@@ -0,0 +1,20 @@
+import { VoidContainer } from '../../../../dockview/components/titlebar/voidContainer';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
+import { fireEvent } from '@testing-library/dom';
+
+describe('voidContainer', () => {
+    test('that `pointerDown` triggers activation', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            doSetGroupActive: jest.fn(),
+        });
+        const group = fromPartial<DockviewGroupPanel>({});
+        const cut = new VoidContainer(accessor, group);
+
+        expect(accessor.doSetGroupActive).not.toHaveBeenCalled();
+
+        fireEvent.pointerDown(cut.element);
+        expect(accessor.doSetGroupActive).toHaveBeenCalledWith(group);
+    });
+});

packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts

@@ -30,7 +30,7 @@ import { createOffsetDragOverEvent } from '../__test_utils__/utils';
 import {
     DockviewPanelRenderer,
     OverlayRenderContainer,
-} from '../../overlayRenderContainer';
+} from '../../overlay/overlayRenderContainer';
 import { DockviewGroupPanelFloatingChangeEvent } from '../../api/dockviewGroupPanelApi';
 import { SizeEvent } from '../../api/gridviewPanelApi';
 import {
@@ -285,7 +285,8 @@ describe('dockviewGroupPanelModel', () => {
             onDidAddPanel: () => ({ dispose: jest.fn() }),
             onDidRemovePanel: () => ({ dispose: jest.fn() }),
             overlayRenderContainer: new OverlayRenderContainer(
-                document.createElement('div')
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
             ),
         });
 
@@ -823,7 +824,8 @@ describe('dockviewGroupPanelModel', () => {
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
-                document.createElement('div')
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
             ),
         });
 
@@ -894,7 +896,8 @@ describe('dockviewGroupPanelModel', () => {
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
-                document.createElement('div')
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
             ),
         });
 
@@ -966,7 +969,8 @@ describe('dockviewGroupPanelModel', () => {
             onDidAddPanel: jest.fn(),
             onDidRemovePanel: jest.fn(),
             overlayRenderContainer: new OverlayRenderContainer(
-                document.createElement('div')
+                document.createElement('div'),
+                fromPartial<DockviewComponent>({})
             ),
         });
 

packages/dockview-core/src/__tests__/dom.spec.ts

@@ -1,4 +1,5 @@
 import {
+    disableIframePointEvents,
     isInDocument,
     quasiDefaultPrevented,
     quasiPreventDefault,
@@ -45,4 +46,38 @@ describe('dom', () => {
 
         expect(isInDocument(el2)).toBeTruthy();
     });
+
+    test('disableIframePointEvents', () => {
+        const el1 = document.createElement('iframe');
+        const el2 = document.createElement('iframe');
+        const el3 = document.createElement('webview');
+        const el4 = document.createElement('webview');
+
+        document.body.appendChild(el1);
+        document.body.appendChild(el2);
+        document.body.appendChild(el3);
+        document.body.appendChild(el4);
+
+        el1.style.pointerEvents = 'inherit';
+        el3.style.pointerEvents = 'inherit';
+
+        expect(el1.style.pointerEvents).toBe('inherit');
+        expect(el2.style.pointerEvents).toBe('');
+        expect(el3.style.pointerEvents).toBe('inherit');
+        expect(el4.style.pointerEvents).toBe('');
+
+        const f = disableIframePointEvents();
+
+        expect(el1.style.pointerEvents).toBe('none');
+        expect(el2.style.pointerEvents).toBe('none');
+        expect(el3.style.pointerEvents).toBe('none');
+        expect(el4.style.pointerEvents).toBe('none');
+
+        f.release();
+
+        expect(el1.style.pointerEvents).toBe('inherit');
+        expect(el2.style.pointerEvents).toBe('');
+        expect(el3.style.pointerEvents).toBe('inherit');
+        expect(el4.style.pointerEvents).toBe('');
+    });
 });

packages/dockview-core/src/__tests__/overlay/overlay.spec.ts

@@ -1,31 +1,5 @@
-import { Overlay } from '../../dnd/overlay';
-
-const mockGetBoundingClientRect = ({
-    left,
-    top,
-    height,
-    width,
-}: {
-    left: number;
-    top: number;
-    height: number;
-    width: number;
-}) => {
-    const result = {
-        left,
-        top,
-        height,
-        width,
-        right: left + width,
-        bottom: top + height,
-        x: left,
-        y: top,
-    };
-    return {
-        ...result,
-        toJSON: () => result,
-    };
-};
+import { Overlay } from '../../overlay/overlay';
+import { mockGetBoundingClientRect } from '../__test_utils__/utils';
 
 describe('overlay', () => {
     test('toJSON, top left', () => {
@@ -76,6 +50,8 @@ describe('overlay', () => {
             width: 40,
             height: 50,
         });
+
+        cut.dispose();
     });
 
     test('toJSON, bottom right', () => {
@@ -126,6 +102,8 @@ describe('overlay', () => {
             width: 40,
             height: 50,
         });
+
+        cut.dispose();
     });
 
     test('that out-of-bounds dimensions are fixed, top left', () => {
@@ -176,6 +154,8 @@ describe('overlay', () => {
             width: 40,
             height: 50,
         });
+
+        cut.dispose();
     });
 
     test('that out-of-bounds dimensions are fixed, bottom right', () => {
@@ -226,6 +206,8 @@ describe('overlay', () => {
             width: 40,
             height: 50,
         });
+
+        cut.dispose();
     });
 
     test('setBounds, top left', () => {
@@ -276,6 +258,8 @@ describe('overlay', () => {
         expect(element.style.width).toBe('200px');
         expect(element.style.left).toBe('300px');
         expect(element.style.top).toBe('400px');
+
+        cut.dispose();
     });
 
     test('setBounds, bottom right', () => {
@@ -326,6 +310,8 @@ describe('overlay', () => {
         expect(element.style.width).toBe('200px');
         expect(element.style.right).toBe('300px');
         expect(element.style.bottom).toBe('400px');
+
+        cut.dispose();
     });
 
     test('that the resize handles are added', () => {
@@ -364,4 +350,66 @@ describe('overlay', () => {
 
         cut.dispose();
     });
+
+    test('aria-level attributes and corresponding z-index', () => {
+        const container = document.createElement('div');
+        const content = document.createElement('div');
+
+        const createOverlay = () =>
+            new Overlay({
+                height: 500,
+                width: 500,
+                left: 100,
+                top: 200,
+                minimumInViewportWidth: 0,
+                minimumInViewportHeight: 0,
+                container,
+                content,
+            });
+
+        const overlay1 = createOverlay();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay1.element.style.zIndex).toBe('999');
+
+        const overlay2 = createOverlay();
+        const overlay3 = createOverlay();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay2.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('2');
+        expect(overlay1.element.style.zIndex).toBe('999');
+        expect(overlay2.element.style.zIndex).toBe('1001');
+        expect(overlay3.element.style.zIndex).toBe('1003');
+
+        overlay2.bringToFront();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay2.element.getAttribute('aria-level')).toBe('2');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay1.element.style.zIndex).toBe('999');
+        expect(overlay2.element.style.zIndex).toBe('1003');
+        expect(overlay3.element.style.zIndex).toBe('1001');
+
+        overlay1.bringToFront();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('2');
+        expect(overlay2.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay1.element.style.zIndex).toBe('1003');
+        expect(overlay2.element.style.zIndex).toBe('1001');
+        expect(overlay3.element.style.zIndex).toBe('999');
+
+        overlay2.dispose();
+
+        expect(overlay1.element.getAttribute('aria-level')).toBe('1');
+        expect(overlay3.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay1.element.style.zIndex).toBe('1001');
+        expect(overlay3.element.style.zIndex).toBe('999');
+
+        overlay1.dispose();
+
+        expect(overlay3.element.getAttribute('aria-level')).toBe('0');
+        expect(overlay3.element.style.zIndex).toBe('999');
+    });
 });

packages/dockview-core/src/__tests__/overlay/overlayRenderContainer.spec.ts

@@ -1,9 +1,13 @@
-import { Droptarget } from '../dnd/droptarget';
-import { IDockviewPanel } from '../dockview/dockviewPanel';
-import { Emitter } from '../events';
-import { IRenderable, OverlayRenderContainer } from '../overlayRenderContainer';
+import { Droptarget } from '../../dnd/droptarget';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
+import { Emitter } from '../../events';
+import {
+    IRenderable,
+    OverlayRenderContainer,
+} from '../../overlay/overlayRenderContainer';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { Writable, exhaustMicrotaskQueue } from './__test_utils__/utils';
+import { Writable, exhaustMicrotaskQueue } from '../__test_utils__/utils';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
 
 describe('overlayRenderContainer', () => {
     let referenceContainer: IRenderable;
@@ -18,7 +22,10 @@ describe('overlayRenderContainer', () => {
             dropTarget: fromPartial<Droptarget>({}),
         };
 
-        cut = new OverlayRenderContainer(parentContainer);
+        cut = new OverlayRenderContainer(
+            parentContainer,
+            fromPartial<DockviewComponent>({})
+        );
     });
 
     test('that attach(...) and detach(...) mutate the DOM as expected', () => {
@@ -26,12 +33,14 @@ describe('overlayRenderContainer', () => {
 
         const onDidVisibilityChange = new Emitter<any>();
         const onDidDimensionsChange = new Emitter<any>();
+        const onDidLocationChange = new Emitter<any>();
 
         const panel = fromPartial<IDockviewPanel>({
             api: {
                 id: 'test_panel_id',
                 onDidVisibilityChange: onDidVisibilityChange.event,
                 onDidDimensionsChange: onDidDimensionsChange.event,
+                onDidLocationChange: onDidLocationChange.event,
                 isVisible: true,
             },
             view: {
@@ -62,12 +71,14 @@ describe('overlayRenderContainer', () => {
 
         const onDidVisibilityChange = new Emitter<any>();
         const onDidDimensionsChange = new Emitter<any>();
+        const onDidLocationChange = new Emitter<any>();
 
         const panel = fromPartial<IDockviewPanel>({
             api: {
                 id: 'test_panel_id',
                 onDidVisibilityChange: onDidVisibilityChange.event,
                 onDidDimensionsChange: onDidDimensionsChange.event,
+                onDidLocationChange: onDidLocationChange.event,
                 isVisible: true,
             },
             view: {

packages/dockview-core/src/api/dockviewPanelApi.ts

@@ -5,7 +5,7 @@ import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { DockviewPanel } from '../dockview/dockviewPanel';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { Position } from '../dnd/droptarget';
-import { DockviewPanelRenderer } from '../overlayRenderContainer';
+import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
 import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -50,7 +50,7 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
 import { Parameters } from '../panel/types';
-import { Overlay } from '../dnd/overlay';
+import { Overlay } from '../overlay/overlay';
 import { addTestId, toggleClass, watchElementResize } from '../dom';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import {
@@ -65,7 +65,7 @@ import {
 import {
     DockviewPanelRenderer,
     OverlayRenderContainer,
-} from '../overlayRenderContainer';
+} from '../overlay/overlayRenderContainer';
 import { PopoutWindow } from '../popoutWindow';
 
 const DEFAULT_ROOT_OVERLAY_MODEL: DroptargetOverlayModel = {
@@ -845,8 +845,6 @@ export class DockviewComponent
             }
         }
 
-        group.model.location = { type: 'floating' };
-
         function getAnchoredBox(): AnchoredBox {
             if (options?.position) {
                 const result: any = {};
@@ -968,8 +966,8 @@ export class DockviewComponent
                 dispose: () => {
                     disposable.dispose();
 
-                    group.model.location = { type: 'grid' };
                     remove(this._floatingGroups, floatingGroupPanel);
+                    group.model.location = { type: 'grid' };
                     this.updateWatermark();
                 },
             }
@@ -977,6 +975,8 @@ export class DockviewComponent
 
         this._floatingGroups.push(floatingGroupPanel);
 
+        group.model.location = { type: 'floating' };
+
         if (!options?.skipActiveGroup) {
             this.doSetGroupAndPanelActive(group);
         }

packages/dockview-core/src/dockview/dockviewFloatingGroupPanel.ts

@@ -1,4 +1,4 @@
-import { Overlay } from '../dnd/overlay';
+import { Overlay } from '../overlay/overlay';
 import { CompositeDisposable } from '../lifecycle';
 import { AnchoredBox } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
@@ -10,7 +10,8 @@ export interface IDockviewFloatingGroupPanel {
 
 export class DockviewFloatingGroupPanel
     extends CompositeDisposable
-    implements IDockviewFloatingGroupPanel {
+    implements IDockviewFloatingGroupPanel
+{
     constructor(readonly group: DockviewGroupPanel, readonly overlay: Overlay) {
         super();
         this.addDisposables(overlay);

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -36,7 +36,7 @@ import {
     DockviewUnhandledDragOverEvent,
     IHeaderActionsRenderer,
 } from './options';
-import { OverlayRenderContainer } from '../overlayRenderContainer';
+import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 
 interface GroupMoveEvent {

packages/dockview-core/src/dockview/dockviewPanel.ts

@@ -9,7 +9,7 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
 import { IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
 import { IDockviewPanelModel } from './dockviewPanelModel';
 import { DockviewComponent } from './dockviewComponent';
-import { DockviewPanelRenderer } from '../overlayRenderContainer';
+import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { WillFocusEvent } from '../api/panelApi';
 
 export interface IDockviewPanel extends IDisposable, IPanel {

packages/dockview-core/src/dockview/options.ts

@@ -12,7 +12,7 @@ import {
     GroupOptions,
 } from './dockviewGroupPanelModel';
 import { IDockviewPanel } from './dockviewPanel';
-import { DockviewPanelRenderer } from '../overlayRenderContainer';
+import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { IGroupHeaderProps } from './framework';
 import { AnchoredBox } from '../types';
 import { FloatingGroupOptions } from './dockviewComponent';

packages/dockview-core/src/dockview/types.ts

@@ -3,7 +3,7 @@ import { PanelInitParameters, IPanel } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
 import { Optional } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
-import { DockviewPanelRenderer } from '../overlayRenderContainer';
+import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 
 export interface HeaderPartInitParameters {
     title: string;

packages/dockview-core/src/dom.ts

@@ -259,11 +259,12 @@ export function addTestId(element: HTMLElement, id: string): void {
 }
 
 export function disableIframePointEvents() {
-    const iframes = [
+    const iframes: HTMLElement[] = [
         ...getElementsByTagName('iframe'),
         ...getElementsByTagName('webview'),
     ];
-    const original = new Map<HTMLElement, string>();
+
+    const original = new WeakMap<HTMLElement, string>(); // don't hold onto HTMLElement references longer than required
 
     for (const iframe of iframes) {
         original.set(iframe, iframe.style.pointerEvents);
@@ -275,6 +276,7 @@ export function disableIframePointEvents() {
             for (const iframe of iframes) {
                 iframe.style.pointerEvents = original.get(iframe) ?? 'auto';
             }
+            iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
         },
     };
 }

packages/dockview-core/src/index.ts

@@ -64,7 +64,7 @@ export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './dockview/types';
 
-export { DockviewPanelRenderer } from './overlayRenderContainer';
+export { DockviewPanelRenderer } from './overlay/overlayRenderContainer';
 
 export {
     Position,

packages/dockview-core/src/overlay/overlayRenderContainer.ts

@@ -1,15 +1,15 @@
-import { DragAndDropObserver } from './dnd/dnd';
-import { Droptarget } from './dnd/droptarget';
-import { getDomNodePagePosition, toggleClass } from './dom';
+import { DragAndDropObserver } from '../dnd/dnd';
+import { Droptarget } from '../dnd/droptarget';
+import { getDomNodePagePosition, toggleClass } from '../dom';
 import {
     CompositeDisposable,
     Disposable,
     IDisposable,
     MutableDisposable,
-} from './lifecycle';
-import { IDockviewPanel } from './dockview/dockviewPanel';
-import { DockviewComponent } from './dockview/dockviewComponent';
-import { DEFAULT_OVERLAY_Z_INDEX } from './dnd/overlay';
+} from '../lifecycle';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewComponent } from '../dockview/dockviewComponent';
+import { DEFAULT_OVERLAY_Z_INDEX } from './overlay';
 
 export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always';
 
@@ -165,11 +165,6 @@ export class OverlayRenderContainer extends CompositeDisposable {
             panel.api.onDidLocationChange((event) => {
                 const isFloating = event.location.type === 'floating';
 
-                /**
-                 * Whilst floating the z-index must sync with the floating
-                 * groups z-index
-                 */
-
                 if (isFloating) {
                     queueMicrotask(() => {
                         const floatingGroup = this.accessor.floatingGroups.find(