dockview-core 3.2.0 → 4.0.0

package/dist/esm/dockview/components/titlebar/tabs.d.ts

@@ -0,0 +1,45 @@
+import { Event } from '../../../events';
+import { CompositeDisposable } from '../../../lifecycle';
+import { DockviewComponent } from '../../dockviewComponent';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
+import { IDockviewPanel } from '../../dockviewPanel';
+import { Tab } from '../tab/tab';
+import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
+export declare class Tabs extends CompositeDisposable {
+    private readonly group;
+    private readonly accessor;
+    private readonly _element;
+    private readonly _tabsList;
+    private readonly _observerDisposable;
+    private _tabs;
+    private selectedIndex;
+    private _showTabsOverflowControl;
+    private readonly _onTabDragStart;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    private readonly _onDrop;
+    readonly onDrop: Event<TabDropIndexEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    private readonly _onOverflowTabsChange;
+    readonly onOverflowTabsChange: Event<{
+        tabs: string[];
+        reset: boolean;
+    }>;
+    get showTabsOverflowControl(): boolean;
+    set showTabsOverflowControl(value: boolean);
+    get element(): HTMLElement;
+    get panels(): string[];
+    get size(): number;
+    get tabs(): Tab[];
+    constructor(group: DockviewGroupPanel, accessor: DockviewComponent, options: {
+        showTabsOverflowControl: boolean;
+    });
+    indexOf(id: string): number;
+    isActive(tab: Tab): boolean;
+    setActivePanel(panel: IDockviewPanel): void;
+    openPanel(panel: IDockviewPanel, index?: number): void;
+    delete(id: string): void;
+    private addTab;
+    private toggleDropdown;
+}

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -0,0 +1,183 @@
+import { getPanelData } from '../../../dnd/dataTransfer';
+import { isChildEntirelyVisibleWithinParent, OverflowObserver, } from '../../../dom';
+import { addDisposableListener, Emitter } from '../../../events';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
+import { Scrollbar } from '../../../scrollbar';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
+import { Tab } from '../tab/tab';
+export class Tabs extends CompositeDisposable {
+    get showTabsOverflowControl() {
+        return this._showTabsOverflowControl;
+    }
+    set showTabsOverflowControl(value) {
+        if (this._showTabsOverflowControl == value) {
+            return;
+        }
+        this._showTabsOverflowControl = value;
+        if (value) {
+            const observer = new OverflowObserver(this._tabsList);
+            this._observerDisposable.value = new CompositeDisposable(observer, observer.onDidChange((event) => {
+                const hasOverflow = event.hasScrollX || event.hasScrollY;
+                this.toggleDropdown({ reset: !hasOverflow });
+            }), addDisposableListener(this._tabsList, 'scroll', () => {
+                this.toggleDropdown({ reset: false });
+            }));
+        }
+    }
+    get element() {
+        return this._element;
+    }
+    get panels() {
+        return this._tabs.map((_) => _.value.panel.id);
+    }
+    get size() {
+        return this._tabs.length;
+    }
+    get tabs() {
+        return this._tabs.map((_) => _.value);
+    }
+    constructor(group, accessor, options) {
+        super();
+        this.group = group;
+        this.accessor = accessor;
+        this._observerDisposable = new MutableDisposable();
+        this._tabs = [];
+        this.selectedIndex = -1;
+        this._showTabsOverflowControl = false;
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onDrop = new Emitter();
+        this.onDrop = this._onDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._onOverflowTabsChange = new Emitter();
+        this.onOverflowTabsChange = this._onOverflowTabsChange.event;
+        this._tabsList = document.createElement('div');
+        this._tabsList.className = 'dv-tabs-container dv-horizontal';
+        this.showTabsOverflowControl = options.showTabsOverflowControl;
+        const scrollbar = new Scrollbar(this._tabsList);
+        this._element = scrollbar.element;
+        this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            const isLeftClick = event.button === 0;
+            if (isLeftClick) {
+                this.accessor.doSetGroupActive(this.group);
+            }
+        }), Disposable.from(() => {
+            for (const { value, disposable } of this._tabs) {
+                disposable.dispose();
+                value.dispose();
+            }
+            this._tabs = [];
+        }));
+    }
+    indexOf(id) {
+        return this._tabs.findIndex((tab) => tab.value.panel.id === id);
+    }
+    isActive(tab) {
+        return (this.selectedIndex > -1 &&
+            this._tabs[this.selectedIndex].value === tab);
+    }
+    setActivePanel(panel) {
+        let runningWidth = 0;
+        for (const tab of this._tabs) {
+            const isActivePanel = panel.id === tab.value.panel.id;
+            tab.value.setActive(isActivePanel);
+            if (isActivePanel) {
+                const element = tab.value.element;
+                const parentElement = element.parentElement;
+                if (runningWidth < parentElement.scrollLeft ||
+                    runningWidth + element.clientWidth >
+                        parentElement.scrollLeft + parentElement.clientWidth) {
+                    parentElement.scrollLeft = runningWidth;
+                }
+            }
+            runningWidth += tab.value.element.clientWidth;
+        }
+    }
+    openPanel(panel, index = this._tabs.length) {
+        if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
+            return;
+        }
+        const tab = new Tab(panel, this.accessor, this.group);
+        tab.setContent(panel.view.tab);
+        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+            this._onTabDragStart.fire({ nativeEvent: event, panel });
+        }), tab.onPointerDown((event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                this.size === 1;
+            if (isFloatingGroupsEnabled &&
+                !isFloatingWithOnePanel &&
+                event.shiftKey) {
+                event.preventDefault();
+                const panel = this.accessor.getGroupPanel(tab.panel.id);
+                const { top, left } = tab.element.getBoundingClientRect();
+                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                this.accessor.addFloatingGroup(panel, {
+                    x: left - rootLeft,
+                    y: top - rootTop,
+                    inDragMode: true,
+                });
+                return;
+            }
+            switch (event.button) {
+                case 0: // left click or touch
+                    if (this.group.activePanel !== panel) {
+                        this.group.model.openPanel(panel);
+                    }
+                    break;
+            }
+        }), tab.onDrop((event) => {
+            this._onDrop.fire({
+                event: event.nativeEvent,
+                index: this._tabs.findIndex((x) => x.value === tab),
+            });
+        }), tab.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'tab',
+                panel: this.group.activePanel,
+                api: this.accessor.api,
+                group: this.group,
+                getData: getPanelData,
+            }));
+        }));
+        const value = { value: tab, disposable };
+        this.addTab(value, index);
+    }
+    delete(id) {
+        const index = this.indexOf(id);
+        const tabToRemove = this._tabs.splice(index, 1)[0];
+        const { value, disposable } = tabToRemove;
+        disposable.dispose();
+        value.dispose();
+        value.element.remove();
+    }
+    addTab(tab, index = this._tabs.length) {
+        if (index < 0 || index > this._tabs.length) {
+            throw new Error('invalid location');
+        }
+        this._tabsList.insertBefore(tab.value.element, this._tabsList.children[index]);
+        this._tabs = [
+            ...this._tabs.slice(0, index),
+            tab,
+            ...this._tabs.slice(index),
+        ];
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
+        }
+    }
+    toggleDropdown(options) {
+        const tabs = options.reset
+            ? []
+            : this._tabs
+                .filter((tab) => !isChildEntirelyVisibleWithinParent(tab.value.element, this._tabsList))
+                .map((x) => x.value.panel.id);
+        this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
+    }
+}

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -43,21 +43,21 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private readonly accessor;
     private readonly group;
     private readonly _element;
-    private readonly tabContainer;
+    private readonly tabs;
     private readonly rightActionsContainer;
     private readonly leftActionsContainer;
     private readonly preActionsContainer;
     private readonly voidContainer;
-    private tabs;
-    private selectedIndex;
     private rightActions;
     private leftActions;
     private preActions;
     private _hidden;
+    private dropdownPart;
+    private _overflowTabs;
+    private readonly _dropdownDisposable;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
-    private readonly _onTabDragStart;
-    readonly onTabDragStart: Event<TabDragEvent>;
+    get onTabDragStart(): Event<TabDragEvent>;
     private readonly _onGroupDragStart;
     readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onWillShowOverlay;
@@ -66,21 +66,20 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     get size(): number;
     get hidden(): boolean;
     set hidden(value: boolean);
+    get element(): HTMLElement;
+    constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     show(): void;
     hide(): void;
     setRightActionsElement(element: HTMLElement | undefined): void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
     setPrefixActionsElement(element: HTMLElement | undefined): void;
-    get element(): HTMLElement;
     isActive(tab: Tab): boolean;
     indexOf(id: string): number;
-    constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(_isGroupActive: boolean): void;
     delete(id: string): void;
     setActivePanel(panel: IDockviewPanel): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
     closePanel(panel: IDockviewPanel): void;
-    dispose(): void;
-    private addTab;
     private updateClassnames;
+    private toggleDropdown;
 }

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -1,16 +1,20 @@
-import { CompositeDisposable, } from '../../../lifecycle';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { addDisposableListener, Emitter } from '../../../events';
-import { Tab } from '../tab/tab';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
 import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 import { getPanelData } from '../../../dnd/dataTransfer';
+import { Tabs } from './tabs';
+import { createDropdownElementHandle, } from './tabOverflowControl';
 export class TabsContainer extends CompositeDisposable {
+    get onTabDragStart() {
+        return this.tabs.onTabDragStart;
+    }
     get panels() {
-        return this.tabs.map((_) => _.value.panel.id);
+        return this.tabs.panels;
     }
     get size() {
-        return this.tabs.length;
+        return this.tabs.size;
     }
     get hidden() {
         return this._hidden;
@@ -19,74 +23,19 @@ export class TabsContainer extends CompositeDisposable {
         this._hidden = value;
         this.element.style.display = value ? 'none' : '';
     }
-    show() {
-        if (!this.hidden) {
-            this.element.style.display = '';
-        }
-    }
-    hide() {
-        this._element.style.display = 'none';
-    }
-    setRightActionsElement(element) {
-        if (this.rightActions === element) {
-            return;
-        }
-        if (this.rightActions) {
-            this.rightActions.remove();
-            this.rightActions = undefined;
-        }
-        if (element) {
-            this.rightActionsContainer.appendChild(element);
-            this.rightActions = element;
-        }
-    }
-    setLeftActionsElement(element) {
-        if (this.leftActions === element) {
-            return;
-        }
-        if (this.leftActions) {
-            this.leftActions.remove();
-            this.leftActions = undefined;
-        }
-        if (element) {
-            this.leftActionsContainer.appendChild(element);
-            this.leftActions = element;
-        }
-    }
-    setPrefixActionsElement(element) {
-        if (this.preActions === element) {
-            return;
-        }
-        if (this.preActions) {
-            this.preActions.remove();
-            this.preActions = undefined;
-        }
-        if (element) {
-            this.preActionsContainer.appendChild(element);
-            this.preActions = element;
-        }
-    }
     get element() {
         return this._element;
     }
-    isActive(tab) {
-        return (this.selectedIndex > -1 &&
-            this.tabs[this.selectedIndex].value === tab);
-    }
-    indexOf(id) {
-        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
-    }
     constructor(accessor, group) {
         super();
         this.accessor = accessor;
         this.group = group;
-        this.tabs = [];
-        this.selectedIndex = -1;
         this._hidden = false;
+        this.dropdownPart = null;
+        this._overflowTabs = [];
+        this._dropdownDisposable = new MutableDisposable();
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
-        this._onTabDragStart = new Emitter();
-        this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
         this.onGroupDragStart = this._onGroupDragStart.event;
         this._onWillShowOverlay = new Emitter();
@@ -100,15 +49,21 @@ export class TabsContainer extends CompositeDisposable {
         this.leftActionsContainer.className = 'dv-left-actions-container';
         this.preActionsContainer = document.createElement('div');
         this.preActionsContainer.className = 'dv-pre-actions-container';
-        this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'dv-tabs-container';
+        this.tabs = new Tabs(group, accessor, {
+            showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
+        });
         this.voidContainer = new VoidContainer(this.accessor, this.group);
         this._element.appendChild(this.preActionsContainer);
-        this._element.appendChild(this.tabContainer);
+        this._element.appendChild(this.tabs.element);
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+        this.addDisposables(accessor.onDidOptionsChange(() => {
+            this.tabs.showTabsOverflowControl =
+                !accessor.options.disableTabsOverflowList;
+        }), this.tabs.onOverflowTabsChange((event) => {
+            this.toggleDropdown(event);
+        }), this.tabs, this._onWillShowOverlay, this._onDrop, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
             this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: this.group,
@@ -116,7 +71,7 @@ export class TabsContainer extends CompositeDisposable {
         }), this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
-                index: this.tabs.length,
+                index: this.tabs.size,
             });
         }), this.voidContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
@@ -127,6 +82,9 @@ export class TabsContainer extends CompositeDisposable {
                 getData: getPanelData,
             }));
         }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
@@ -140,117 +98,130 @@ export class TabsContainer extends CompositeDisposable {
                     inDragMode: true,
                 });
             }
-        }), addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const isLeftClick = event.button === 0;
-            if (isLeftClick) {
-                this.accessor.doSetGroupActive(this.group);
-            }
         }));
     }
+    show() {
+        if (!this.hidden) {
+            this.element.style.display = '';
+        }
+    }
+    hide() {
+        this._element.style.display = 'none';
+    }
+    setRightActionsElement(element) {
+        if (this.rightActions === element) {
+            return;
+        }
+        if (this.rightActions) {
+            this.rightActions.remove();
+            this.rightActions = undefined;
+        }
+        if (element) {
+            this.rightActionsContainer.appendChild(element);
+            this.rightActions = element;
+        }
+    }
+    setLeftActionsElement(element) {
+        if (this.leftActions === element) {
+            return;
+        }
+        if (this.leftActions) {
+            this.leftActions.remove();
+            this.leftActions = undefined;
+        }
+        if (element) {
+            this.leftActionsContainer.appendChild(element);
+            this.leftActions = element;
+        }
+    }
+    setPrefixActionsElement(element) {
+        if (this.preActions === element) {
+            return;
+        }
+        if (this.preActions) {
+            this.preActions.remove();
+            this.preActions = undefined;
+        }
+        if (element) {
+            this.preActionsContainer.appendChild(element);
+            this.preActions = element;
+        }
+    }
+    isActive(tab) {
+        return this.tabs.isActive(tab);
+    }
+    indexOf(id) {
+        return this.tabs.indexOf(id);
+    }
     setActive(_isGroupActive) {
         // noop
     }
     delete(id) {
-        const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
-        const tabToRemove = this.tabs.splice(index, 1)[0];
-        if (!tabToRemove) {
-            throw new Error(`dockview: Tab not found`);
-        }
-        const { value, disposable } = tabToRemove;
-        disposable.dispose();
-        value.dispose();
-        value.element.remove();
+        this.tabs.delete(id);
         this.updateClassnames();
     }
     setActivePanel(panel) {
-        this.tabs.forEach((tab) => {
-            const isActivePanel = panel.id === tab.value.panel.id;
-            tab.value.setActive(isActivePanel);
-        });
+        this.tabs.setActivePanel(panel);
     }
-    openPanel(panel, index = this.tabs.length) {
-        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
-            return;
-        }
-        const tab = new Tab(panel, this.accessor, this.group);
-        tab.setContent(panel.view.tab);
-        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
-            this._onTabDragStart.fire({ nativeEvent: event, panel });
-        }), tab.onPointerDown((event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
-                this.size === 1;
-            if (isFloatingGroupsEnabled &&
-                !isFloatingWithOnePanel &&
-                event.shiftKey) {
-                event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tab.panel.id);
-                const { top, left } = tab.element.getBoundingClientRect();
-                const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
-                this.accessor.addFloatingGroup(panel, {
-                    x: left - rootLeft,
-                    y: top - rootTop,
-                    inDragMode: true,
-                });
-                return;
-            }
-            switch (event.button) {
-                case 0: // left click or touch
-                    if (this.group.activePanel !== panel) {
-                        this.group.model.openPanel(panel);
-                    }
-                    break;
-            }
-        }), tab.onDrop((event) => {
-            this._onDrop.fire({
-                event: event.nativeEvent,
-                index: this.tabs.findIndex((x) => x.value === tab),
-            });
-        }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
-                kind: 'tab',
-                panel: this.group.activePanel,
-                api: this.accessor.api,
-                group: this.group,
-                getData: getPanelData,
-            }));
-        }));
-        const value = { value: tab, disposable };
-        this.addTab(value, index);
+    openPanel(panel, index = this.tabs.size) {
+        this.tabs.openPanel(panel, index);
+        this.updateClassnames();
     }
     closePanel(panel) {
         this.delete(panel.id);
     }
-    dispose() {
-        super.dispose();
-        for (const { value, disposable } of this.tabs) {
-            disposable.dispose();
-            value.dispose();
-        }
-        this.tabs = [];
+    updateClassnames() {
+        toggleClass(this._element, 'dv-single-tab', this.size === 1);
     }
-    addTab(tab, index = this.tabs.length) {
-        if (index < 0 || index > this.tabs.length) {
-            throw new Error('invalid location');
+    toggleDropdown(options) {
+        const tabs = options.reset ? [] : options.tabs;
+        this._overflowTabs = tabs;
+        if (this._overflowTabs.length > 0 && this.dropdownPart) {
+            this.dropdownPart.update({ tabs: tabs.length });
+            return;
         }
-        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-        this.tabs = [
-            ...this.tabs.slice(0, index),
-            tab,
-            ...this.tabs.slice(index),
-        ];
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
+        if (this._overflowTabs.length === 0) {
+            this._dropdownDisposable.dispose();
+            return;
         }
-        this.updateClassnames();
-    }
-    updateClassnames() {
-        toggleClass(this._element, 'dv-single-tab', this.size === 1);
+        const root = document.createElement('div');
+        root.className = 'dv-tabs-overflow-dropdown-root';
+        const part = createDropdownElementHandle();
+        part.update({ tabs: tabs.length });
+        this.dropdownPart = part;
+        root.appendChild(part.element);
+        this.rightActionsContainer.prepend(root);
+        this._dropdownDisposable.value = new CompositeDisposable(Disposable.from(() => {
+            var _a, _b;
+            root.remove();
+            (_b = (_a = this.dropdownPart) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.dropdownPart = null;
+        }), addDisposableListener(root, 'pointerdown', (event) => {
+            event.preventDefault();
+        }, { capture: true }), addDisposableListener(root, 'click', (event) => {
+            const el = document.createElement('div');
+            el.style.overflow = 'auto';
+            el.className = 'dv-tabs-overflow-container';
+            for (const tab of this.tabs.tabs.filter((tab) => this._overflowTabs.includes(tab.panel.id))) {
+                const panelObject = this.group.panels.find((panel) => panel === tab.panel);
+                const tabComponent = panelObject.view.createTabRenderer('headerOverflow');
+                const child = tabComponent.element;
+                const wrapper = document.createElement('div');
+                toggleClass(wrapper, 'dv-tab', true);
+                toggleClass(wrapper, 'dv-active-tab', panelObject.api.isActive);
+                toggleClass(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
+                wrapper.addEventListener('mousedown', () => {
+                    this.accessor.popupService.close();
+                    tab.element.scrollIntoView();
+                    tab.panel.api.setActive();
+                });
+                wrapper.appendChild(child);
+                el.appendChild(wrapper);
+            }
+            this.accessor.popupService.openPopover(el, {
+                x: event.clientX,
+                y: event.clientY,
+            });
+        }));
     }
 }

package/dist/esm/dockview/components/titlebar/voidContainer.js

@@ -1,4 +1,3 @@
-import { last } from '../../../array';
 import { getPanelData } from '../../../dnd/dataTransfer';
 import { Droptarget, } from '../../../dnd/droptarget';
 import { GroupDragHandler } from '../../../dnd/groupDragHandler';
@@ -26,19 +25,13 @@ export class VoidContainer extends CompositeDisposable {
         this.dropTraget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
-                var _a;
                 const data = getPanelData();
                 if (data && this.accessor.id === data.viewId) {
-                    if (data.panelId === null &&
-                        data.groupId === this.group.id) {
-                        // don't allow group move to drop on self
-                        return false;
-                    }
-                    // don't show the overlay if the tab being dragged is the last panel of this group
-                    return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
+                    return true;
                 }
                 return group.model.canDisplayOverlay(event, position, 'header_space');
             },
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
         this.addDisposables(handler, handler.onDragStart((event) => {