dockview-core 1.9.2 → 1.10.1

package/dist/esm/dnd/droptarget.d.ts

@@ -1,13 +1,22 @@
-import { Event } from '../events';
+import { DockviewEvent, Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { Direction } from '../gridview/baseComponentGridview';
-export declare function directionToPosition(direction: Direction): Position;
-export declare function positionToDirection(position: Position): Direction;
 export interface DroptargetEvent {
     readonly position: Position;
     readonly nativeEvent: DragEvent;
 }
+export declare class WillShowOverlayEvent extends DockviewEvent implements DroptargetEvent {
+    private readonly options;
+    get nativeEvent(): DragEvent;
+    get position(): Position;
+    constructor(options: {
+        nativeEvent: DragEvent;
+        position: Position;
+    });
+}
+export declare function directionToPosition(direction: Direction): Position;
+export declare function positionToDirection(position: Position): Direction;
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
 export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
 export type MeasuredValue = {
@@ -18,6 +27,11 @@ export type DroptargetOverlayModel = {
     size?: MeasuredValue;
     activationSize?: MeasuredValue;
 };
+export interface DroptargetOptions {
+    canDisplayOverlay: CanDisplayOverlay;
+    acceptedTargetZones: Position[];
+    overlayModel?: DroptargetOverlayModel;
+}
 export declare class Droptarget extends CompositeDisposable {
     private readonly element;
     private readonly options;
@@ -27,14 +41,12 @@ export declare class Droptarget extends CompositeDisposable {
     private _acceptedTargetZonesSet;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     readonly dnd: DragAndDropObserver;
     private static USED_EVENT_ID;
     get state(): Position | undefined;
-    constructor(element: HTMLElement, options: {
-        canDisplayOverlay: CanDisplayOverlay;
-        acceptedTargetZones: Position[];
-        overlayModel?: DroptargetOverlayModel;
-    });
+    constructor(element: HTMLElement, options: DroptargetOptions);
     setTargetZones(acceptedTargetZones: Position[]): void;
     setOverlayModel(model: DroptargetOverlayModel): void;
     dispose(): void;
@@ -52,4 +64,3 @@ export declare class Droptarget extends CompositeDisposable {
 }
 export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
 export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
-//# sourceMappingURL=droptarget.d.ts.map

package/dist/esm/dnd/droptarget.js

@@ -1,8 +1,20 @@
 import { toggleClass } from '../dom';
-import { Emitter } from '../events';
+import { DockviewEvent, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { clamp } from '../math';
+export class WillShowOverlayEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
+    }
+    get position() {
+        return this.options.position;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+}
 export function directionToPosition(direction) {
     switch (direction) {
         case 'above':
@@ -55,6 +67,8 @@ export class Droptarget extends CompositeDisposable {
         this.options = options;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         // use a set to take advantage of #<set>.has
         this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.dnd = new DragAndDropObserver(this.element, {
@@ -83,6 +97,19 @@ export class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
+                const willShowOverlayEvent = new WillShowOverlayEvent({
+                    nativeEvent: e,
+                    position: quadrant,
+                });
+                /**
+                 * Provide an opportunity to prevent the overlay appearing and in turn
+                 * any dnd behaviours
+                 */
+                this._onWillShowOverlay.fire(willShowOverlayEvent);
+                if (willShowOverlayEvent.defaultPrevented) {
+                    this.removeDropTarget();
+                    return;
+                }
                 if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
                         this.removeDropTarget();
@@ -125,7 +152,7 @@ export class Droptarget extends CompositeDisposable {
                 }
             },
         });
-        this.addDisposables(this._onDrop, this.dnd);
+        this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
     }
     setTargetZones(acceptedTargetZones) {
         this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
@@ -178,25 +205,44 @@ export class Droptarget extends CompositeDisposable {
                 size = clamp(0, sizeOptions.value, height) / height;
             }
         }
-        const translate = (1 - size) / 2;
-        const scale = size;
-        let transform;
+        const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
+        /**
+         * You can also achieve the overlay placement using the transform CSS property
+         * to translate and scale the element however this has the undesired effect of
+         * 'skewing' the element. Comment left here for anybody that ever revisits this.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+         *
+         * right
+         * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * left
+         * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * top
+         * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
+         *
+         * bottom
+         * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
+         */
         if (rightClass) {
-            transform = `translateX(${100 * translate}%) scaleX(${scale})`;
+            box.left = `${100 * (1 - size)}%`;
+            box.width = `${100 * size}%`;
         }
         else if (leftClass) {
-            transform = `translateX(-${100 * translate}%) scaleX(${scale})`;
+            box.width = `${100 * size}%`;
         }
         else if (topClass) {
-            transform = `translateY(-${100 * translate}%) scaleY(${scale})`;
+            box.height = `${100 * size}%`;
         }
         else if (bottomClass) {
-            transform = `translateY(${100 * translate}%) scaleY(${scale})`;
-        }
-        else {
-            transform = '';
+            box.top = `${100 * (1 - size)}%`;
+            box.height = `${100 * size}%`;
         }
-        this.overlayElement.style.transform = transform;
+        this.overlayElement.style.top = box.top;
+        this.overlayElement.style.left = box.left;
+        this.overlayElement.style.width = box.width;
+        this.overlayElement.style.height = box.height;
         toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
@@ -263,4 +309,3 @@ export function calculateQuadrantAsPixels(overlayType, x, y, width, height, thre
     }
     return 'center';
 }
-//# sourceMappingURL=droptarget.js.map

package/dist/esm/dnd/ghost.d.ts

@@ -1,2 +1 @@
 export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
-//# sourceMappingURL=ghost.d.ts.map

package/dist/esm/dnd/ghost.js

@@ -9,4 +9,3 @@ export function addGhostImage(dataTransfer, ghostElement) {
         ghostElement.remove();
     }, 0);
 }
-//# sourceMappingURL=ghost.js.map

package/dist/esm/dnd/groupDragHandler.d.ts

@@ -10,4 +10,3 @@ export declare class GroupDragHandler extends DragHandler {
     isCancelled(_event: DragEvent): boolean;
     getData(dragEvent: DragEvent): IDisposable;
 }
-//# sourceMappingURL=groupDragHandler.d.ts.map

package/dist/esm/dnd/groupDragHandler.js

@@ -21,7 +21,7 @@ export class GroupDragHandler extends DragHandler {
         }, true));
     }
     isCancelled(_event) {
-        if (this.group.api.location === 'floating' && !_event.shiftKey) {
+        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
             return true;
         }
         return false;
@@ -52,4 +52,3 @@ export class GroupDragHandler extends DragHandler {
         };
     }
 }
-//# sourceMappingURL=groupDragHandler.js.map

package/dist/esm/dnd/overlay.d.ts

@@ -28,4 +28,3 @@ export declare class Overlay extends CompositeDisposable {
     private getMinimumHeight;
     dispose(): void;
 }
-//# sourceMappingURL=overlay.d.ts.map

package/dist/esm/dnd/overlay.js

@@ -302,4 +302,3 @@ export class Overlay extends CompositeDisposable {
 }
 Overlay.MINIMUM_HEIGHT = 20;
 Overlay.MINIMUM_WIDTH = 20;
-//# sourceMappingURL=overlay.js.map

package/dist/esm/dockview/components/panel/content.d.ts

@@ -41,4 +41,3 @@ export declare class ContentContainer extends CompositeDisposable implements ICo
     closePanel(): void;
     dispose(): void;
 }
-//# sourceMappingURL=content.d.ts.map

package/dist/esm/dockview/components/panel/content.js

@@ -3,7 +3,6 @@ import { Emitter } from '../../../events';
 import { trackFocus } from '../../../dom';
 import { Droptarget } from '../../../dnd/droptarget';
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { DockviewDropTargets } from '../../types';
 export class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
@@ -31,7 +30,7 @@ export class ContentContainer extends CompositeDisposable {
                 const data = getPanelData();
                 if (!data &&
                     event.shiftKey &&
-                    this.group.location !== 'floating') {
+                    this.group.location.type !== 'floating') {
                     return false;
                 }
                 if (data && data.viewId === this.accessor.id) {
@@ -49,7 +48,7 @@ export class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         this.addDisposables(this.dropTarget);
@@ -74,7 +73,7 @@ export class ContentContainer extends CompositeDisposable {
         let container;
         switch (panel.api.renderer) {
             case 'onlyWhenVisibile':
-                this.accessor.overlayRenderContainer.detatch(panel);
+                this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
                         this._element.appendChild(this.panel.view.content.element);
@@ -86,7 +85,7 @@ export class ContentContainer extends CompositeDisposable {
                 if (panel.view.content.element.parentElement === this._element) {
                     this._element.removeChild(panel.view.content.element);
                 }
-                container = this.accessor.overlayRenderContainer.attach({
+                container = this.group.renderContainer.attach({
                     panel,
                     referenceContainer: this,
                 });
@@ -117,9 +116,10 @@ export class ContentContainer extends CompositeDisposable {
         // noop
     }
     closePanel() {
+        var _a;
         if (this.panel) {
             if (this.panel.api.renderer === 'onlyWhenVisibile') {
-                this._element.removeChild(this.panel.view.content.element);
+                (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
             }
         }
         this.panel = undefined;
@@ -129,4 +129,3 @@ export class ContentContainer extends CompositeDisposable {
         super.dispose();
     }
 }
-//# sourceMappingURL=content.js.map

package/dist/esm/dockview/components/tab/defaultTab.d.ts

@@ -19,4 +19,3 @@ export declare class DefaultTab extends CompositeDisposable implements ITabRende
     layout(_width: number, _height: number): void;
     private render;
 }
-//# sourceMappingURL=defaultTab.d.ts.map

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -65,4 +65,3 @@ export class DefaultTab extends CompositeDisposable {
         }
     }
 }
-//# sourceMappingURL=defaultTab.js.map

package/dist/esm/dockview/components/tab/tab.d.ts

@@ -1,24 +1,16 @@
 import { Event } from '../../../events';
-import { CompositeDisposable, IDisposable } from '../../../lifecycle';
+import { CompositeDisposable } from '../../../lifecycle';
 import { DockviewComponent } from '../../dockviewComponent';
 import { ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { DroptargetEvent } from '../../../dnd/droptarget';
+import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget';
 import { IDockviewPanel } from '../../dockviewPanel';
-export interface ITab extends IDisposable {
-    readonly panel: IDockviewPanel;
-    readonly element: HTMLElement;
-    setContent: (element: ITabRenderer) => void;
-    onChanged: Event<MouseEvent>;
-    onDrop: Event<DroptargetEvent>;
-    setActive(isActive: boolean): void;
-}
-export declare class Tab extends CompositeDisposable implements ITab {
+export declare class Tab extends CompositeDisposable {
     readonly panel: IDockviewPanel;
     private readonly accessor;
     private readonly group;
     private readonly _element;
-    private readonly droptarget;
+    private readonly dropTarget;
     private content;
     private readonly _onChanged;
     readonly onChanged: Event<MouseEvent>;
@@ -26,10 +18,10 @@ export declare class Tab extends CompositeDisposable implements ITab {
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;
     dispose(): void;
 }
-//# sourceMappingURL=tab.d.ts.map

package/dist/esm/dockview/components/tab/tab.js

@@ -2,8 +2,7 @@ import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../dnd/dataTransfer';
 import { toggleClass } from '../../../dom';
-import { DockviewDropTargets } from '../../types';
-import { Droptarget } from '../../../dnd/droptarget';
+import { Droptarget, } from '../../../dnd/droptarget';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
 class TabDragHandler extends DragHandler {
     constructor(element, accessor, group, panel) {
@@ -44,7 +43,7 @@ export class Tab extends CompositeDisposable {
         this._element.draggable = true;
         toggleClass(this.element, 'inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
-        this.droptarget = new Droptarget(this._element, {
+        this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked) {
@@ -59,9 +58,10 @@ export class Tab extends CompositeDisposable {
                     }
                     return this.panel.id !== data.panelId;
                 }
-                return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
+                return this.group.model.canDisplayOverlay(event, position, 'tab');
             },
         });
+        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
             this._onDragStart.fire(event);
         }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
@@ -69,9 +69,9 @@ export class Tab extends CompositeDisposable {
                 return;
             }
             this._onChanged.fire(event);
-        }), this.droptarget.onDrop((event) => {
+        }), this.dropTarget.onDrop((event) => {
             this._onDropped.fire(event);
-        }), this.droptarget);
+        }), this.dropTarget);
     }
     setActive(isActive) {
         toggleClass(this.element, 'active-tab', isActive);
@@ -88,4 +88,3 @@ export class Tab extends CompositeDisposable {
         super.dispose();
     }
 }
-//# sourceMappingURL=tab.js.map

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

@@ -1,9 +1,10 @@
 import { IDisposable, CompositeDisposable } from '../../../lifecycle';
 import { Event } from '../../../events';
-import { ITab } from '../tab/tab';
-import { DockviewComponent } from '../../dockviewComponent';
+import { Tab } from '../tab/tab';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewComponent } from '../../dockviewComponent';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
@@ -20,17 +21,18 @@ export interface ITabsContainer extends IDisposable {
     readonly element: HTMLElement;
     readonly panels: string[];
     readonly size: number;
+    readonly onDrop: Event<TabDropIndexEvent>;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     hidden: boolean;
-    delete: (id: string) => void;
-    indexOf: (id: string) => number;
-    onDrop: Event<TabDropIndexEvent>;
-    onTabDragStart: Event<TabDragEvent>;
-    onGroupDragStart: Event<GroupDragEvent>;
-    setActive: (isGroupActive: boolean) => void;
-    setActivePanel: (panel: IDockviewPanel) => void;
-    isActive: (tab: ITab) => boolean;
-    closePanel: (panel: IDockviewPanel) => void;
-    openPanel: (panel: IDockviewPanel, index?: number) => void;
+    delete(id: string): void;
+    indexOf(id: string): number;
+    setActive(isGroupActive: boolean): void;
+    setActivePanel(panel: IDockviewPanel): void;
+    isActive(tab: Tab): boolean;
+    closePanel(panel: IDockviewPanel): void;
+    openPanel(panel: IDockviewPanel, index?: number): void;
     setRightActionsElement(element: HTMLElement | undefined): void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
     setPrefixActionsElement(element: HTMLElement | undefined): void;
@@ -58,6 +60,8 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onGroupDragStart;
     readonly onGroupDragStart: Event<GroupDragEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     get panels(): string[];
     get size(): number;
     get hidden(): boolean;
@@ -68,7 +72,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     setLeftActionsElement(element: HTMLElement | undefined): void;
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     get element(): HTMLElement;
-    isActive(tab: ITab): boolean;
+    isActive(tab: Tab): boolean;
     indexOf(id: string): number;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(_isGroupActive: boolean): void;
@@ -79,4 +83,3 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     closePanel(panel: IDockviewPanel): void;
     dispose(): void;
 }
-//# sourceMappingURL=tabsContainer.d.ts.map

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

@@ -3,6 +3,7 @@ import { addDisposableListener, Emitter } from '../../../events';
 import { Tab } from '../tab/tab';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
+import { WillShowOverlayLocationEvent, } from '../../dockviewGroupPanelModel';
 export class TabsContainer extends CompositeDisposable {
     get panels() {
         return this.tabs.map((_) => _.value.panel.id);
@@ -87,19 +88,11 @@ export class TabsContainer extends CompositeDisposable {
         this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
         this.onGroupDragStart = this._onGroupDragStart.event;
-        this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._element = document.createElement('div');
         this._element.className = 'tabs-and-actions-container';
         toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
-        this.addDisposables(this.accessor.onDidAddPanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }), this.accessor.onDidRemovePanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }));
         this.rightActionsContainer = document.createElement('div');
         this.rightActionsContainer.className = 'right-actions-container';
         this.leftActionsContainer = document.createElement('div');
@@ -114,7 +107,15 @@ export class TabsContainer extends CompositeDisposable {
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+        this.addDisposables(this.accessor.onDidAddPanel((e) => {
+            if (e.api.group === this.group) {
+                toggleClass(this._element, 'dv-single-tab', this.size === 1);
+            }
+        }), this.accessor.onDidRemovePanel((e) => {
+            if (e.api.group === this.group) {
+                toggleClass(this._element, 'dv-single-tab', this.size === 1);
+            }
+        }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
             this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: this.group,
@@ -124,11 +125,15 @@ export class TabsContainer extends CompositeDisposable {
                 event: event.nativeEvent,
                 index: this.tabs.length,
             });
+        }), this.voidContainer.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'header_space',
+            }));
         }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
-                this.group.api.location !== 'floating') {
+                this.group.api.location.type !== 'floating') {
                 event.preventDefault();
                 const { top, left } = this.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
@@ -191,9 +196,9 @@ export class TabsContainer extends CompositeDisposable {
         const disposable = new CompositeDisposable(tab.onDragStart((event) => {
             this._onTabDragStart.fire({ nativeEvent: event, panel });
         }), tab.onChanged((event) => {
-            var _a;
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.location === 'floating' && this.size === 1;
+            const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
+                this.size === 1;
             if (isFloatingGroupsEnabled &&
                 !isFloatingWithOnePanel &&
                 event.shiftKey) {
@@ -207,20 +212,20 @@ export class TabsContainer extends CompositeDisposable {
                 }, { inDragMode: true });
                 return;
             }
-            const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
-                this.group.model.isContentFocused;
             const isLeftClick = event.button === 0;
             if (!isLeftClick || event.defaultPrevented) {
                 return;
             }
-            this.group.model.openPanel(panel, {
-                skipFocus: alreadyFocused,
-            });
+            if (this.group.activePanel !== panel) {
+                this.group.model.openPanel(panel);
+            }
         }), 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' }));
         }));
         const value = { value: tab, disposable };
         this.addTab(value, index);
@@ -237,4 +242,3 @@ export class TabsContainer extends CompositeDisposable {
         this.tabs = [];
     }
 }
-//# sourceMappingURL=tabsContainer.js.map

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

@@ -1,4 +1,4 @@
-import { DroptargetEvent } from '../../../dnd/droptarget';
+import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget';
 import { DockviewComponent } from '../../dockviewComponent';
 import { Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
@@ -7,12 +7,12 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly accessor;
     private readonly group;
     private readonly _element;
-    private readonly voidDropTarget;
+    private readonly dropTraget;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
 }
-//# sourceMappingURL=voidContainer.d.ts.map

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

@@ -1,10 +1,9 @@
 import { last } from '../../../array';
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { Droptarget } from '../../../dnd/droptarget';
+import { Droptarget, } from '../../../dnd/droptarget';
 import { GroupDragHandler } from '../../../dnd/groupDragHandler';
 import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
-import { DockviewDropTargets } from '../../types';
 export class VoidContainer extends CompositeDisposable {
     get element() {
         return this._element;
@@ -25,7 +24,7 @@ export class VoidContainer extends CompositeDisposable {
             this.accessor.doSetGroupActive(this.group);
         }));
         const handler = new GroupDragHandler(this._element, accessor, group);
-        this.voidDropTarget = new Droptarget(this._element, {
+        this.dropTraget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 var _a;
@@ -39,14 +38,14 @@ export class VoidContainer extends CompositeDisposable {
                     // 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 group.model.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
+                return group.model.canDisplayOverlay(event, position, 'header_space');
             },
         });
+        this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
         this.addDisposables(handler, handler.onDragStart((event) => {
             this._onDragStart.fire(event);
-        }), this.voidDropTarget.onDrop((event) => {
+        }), this.dropTraget.onDrop((event) => {
             this._onDrop.fire(event);
-        }), this.voidDropTarget);
+        }), this.dropTraget);
     }
 }
-//# sourceMappingURL=voidContainer.js.map

package/dist/esm/dockview/components/watermark/watermark.d.ts

@@ -16,4 +16,3 @@ export declare class Watermark extends CompositeDisposable implements IWatermark
     dispose(): void;
     private render;
 }
-//# sourceMappingURL=watermark.d.ts.map

package/dist/esm/dockview/components/watermark/watermark.js

@@ -59,4 +59,3 @@ export class Watermark extends CompositeDisposable {
         toggleClass(this.element, 'has-actions', isOneGroup);
     }
 }
-//# sourceMappingURL=watermark.js.map

package/dist/esm/dockview/deserializer.d.ts

@@ -10,4 +10,3 @@ export declare class DefaultDockviewDeserialzier implements IPanelDeserializer {
     constructor(accessor: DockviewComponent);
     fromJSON(panelData: GroupviewPanelState, group: DockviewGroupPanel): IDockviewPanel;
 }
-//# sourceMappingURL=deserializer.d.ts.map

package/dist/esm/dockview/deserializer.js

@@ -28,4 +28,3 @@ export class DefaultDockviewDeserialzier {
         return panel;
     }
 }
-//# sourceMappingURL=deserializer.js.map