dockview-core 5.1.0 → 6.0.0

package/dist/esm/api/component.api.d.ts

@@ -16,10 +16,14 @@ import { PaneviewDidDropEvent } from '../paneview/draggablePaneviewPanel';
 import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 import { Box } from '../types';
 import { DockviewDidDropEvent, DockviewWillDropEvent } from '../dockview/dockviewGroupPanelModel';
-import { DockviewWillShowOverlayLocationEvent } from '../dockview/events';
+import { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, DockviewTabGroupCollapsedChangeEvent, DockviewTabGroupPanelChangeEvent } from '../dockview/events';
+import { ITabGroup } from '../dockview/tabGroup';
+import { DockviewTabGroupColorEntry } from '../dockview/tabGroupAccent';
 import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from '../paneview/options';
 import { SplitviewComponentOptions } from '../splitview/options';
 import { GridviewComponentOptions } from '../gridview/options';
+import { EdgeGroupPosition, EdgeGroupOptions } from '../dockview/dockviewShell';
+import { DockviewGroupPanelApi } from './dockviewGroupPanelApi';
 export interface CommonApi<T = any> {
     readonly height: number;
     readonly width: number;
@@ -315,6 +319,9 @@ export declare class GridviewApi implements CommonApi<SerializedGridviewComponen
      */
     dispose(): void;
 }
+export interface DockviewGetTabGroupsOptions {
+    groupId: string;
+}
 export declare class DockviewApi implements CommonApi<SerializedDockview> {
     private readonly component;
     /**
@@ -349,6 +356,13 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Total number of groups.
      */
     get size(): number;
+    /**
+     * The active tab-group color palette. Reflects the configured
+     * `tabGroupColors` option, or the built-in defaults when unset.
+     * Useful for custom chip renderers that want to roll their own
+     * picker UI.
+     */
+    get tabGroupColors(): readonly DockviewTabGroupColorEntry[];
     /**
      * Total number of panels.
      */
@@ -421,6 +435,30 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     get onDidPopoutGroupSizeChange(): Event<PopoutGroupChangeSizeEvent>;
     get onDidPopoutGroupPositionChange(): Event<PopoutGroupChangePositionEvent>;
     get onDidOpenPopoutWindowFail(): Event<void>;
+    /**
+     * Invoked when a tab group is created in any group.
+     */
+    get onDidCreateTabGroup(): Event<DockviewTabGroupChangeEvent>;
+    /**
+     * Invoked when a tab group is destroyed in any group.
+     */
+    get onDidDestroyTabGroup(): Event<DockviewTabGroupChangeEvent>;
+    /**
+     * Invoked when a panel is added to a tab group.
+     */
+    get onDidAddPanelToTabGroup(): Event<DockviewTabGroupPanelChangeEvent>;
+    /**
+     * Invoked when a panel is removed from a tab group.
+     */
+    get onDidRemovePanelFromTabGroup(): Event<DockviewTabGroupPanelChangeEvent>;
+    /**
+     * Invoked when a tab group's properties (label, color) change.
+     */
+    get onDidTabGroupChange(): Event<DockviewTabGroupChangeEvent>;
+    /**
+     * Invoked when a tab group is collapsed or expanded.
+     */
+    get onDidTabGroupCollapsedChange(): Event<DockviewTabGroupCollapsedChangeEvent>;
     /**
      * All panel objects.
      */
@@ -519,7 +557,61 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             window: Window;
         }) => void;
     }): Promise<boolean>;
+    /**
+     * Add an edge group at the given position. Returns the group panel API
+     * for the newly created group. Throws if a group already exists there.
+     */
+    addEdgeGroup(position: EdgeGroupPosition, options: EdgeGroupOptions): DockviewGroupPanelApi;
+    /**
+     * Get the group panel API for an edge group at the given position.
+     * Returns `undefined` if no edge group is configured at that position.
+     */
+    getEdgeGroup(position: EdgeGroupPosition): DockviewGroupPanelApi | undefined;
+    /**
+     * Set the visibility of an edge group.
+     */
+    setEdgeGroupVisible(position: EdgeGroupPosition, visible: boolean): void;
+    /**
+     * Check whether an edge group is currently visible.
+     */
+    isEdgeGroupVisible(position: EdgeGroupPosition): boolean;
+    /**
+     * Remove an edge group and reclaim its slot in the layout.
+     * All panels inside the group are disposed. Throws if no group exists at position.
+     */
+    removeEdgeGroup(position: EdgeGroupPosition): void;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
+    private _getGroupModel;
+    createTabGroup(options: {
+        groupId: string;
+        label?: string;
+        color?: string;
+        componentParams?: Record<string, unknown>;
+    }): ITabGroup;
+    dissolveTabGroup(options: {
+        groupId: string;
+        tabGroupId: string;
+    }): void;
+    addPanelToTabGroup(options: {
+        groupId: string;
+        tabGroupId: string;
+        panelId: string;
+        index?: number;
+    }): void;
+    removePanelFromTabGroup(options: {
+        groupId: string;
+        panelId: string;
+    }): void;
+    getTabGroups(options: DockviewGetTabGroupsOptions): readonly ITabGroup[];
+    getTabGroupForPanel(options: {
+        groupId: string;
+        panelId: string;
+    }): ITabGroup | undefined;
+    moveTabGroup(options: {
+        groupId: string;
+        tabGroupId: string;
+        index: number;
+    }): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */

package/dist/esm/api/component.api.js

@@ -467,6 +467,15 @@ export class DockviewApi {
     get size() {
         return this.component.size;
     }
+    /**
+     * The active tab-group color palette. Reflects the configured
+     * `tabGroupColors` option, or the built-in defaults when unset.
+     * Useful for custom chip renderers that want to roll their own
+     * picker UI.
+     */
+    get tabGroupColors() {
+        return this.component.tabGroupColorPalette.entries();
+    }
     /**
      * Total number of panels.
      */
@@ -577,6 +586,42 @@ export class DockviewApi {
     get onDidOpenPopoutWindowFail() {
         return this.component.onDidOpenPopoutWindowFail;
     }
+    /**
+     * Invoked when a tab group is created in any group.
+     */
+    get onDidCreateTabGroup() {
+        return this.component.onDidCreateTabGroup;
+    }
+    /**
+     * Invoked when a tab group is destroyed in any group.
+     */
+    get onDidDestroyTabGroup() {
+        return this.component.onDidDestroyTabGroup;
+    }
+    /**
+     * Invoked when a panel is added to a tab group.
+     */
+    get onDidAddPanelToTabGroup() {
+        return this.component.onDidAddPanelToTabGroup;
+    }
+    /**
+     * Invoked when a panel is removed from a tab group.
+     */
+    get onDidRemovePanelFromTabGroup() {
+        return this.component.onDidRemovePanelFromTabGroup;
+    }
+    /**
+     * Invoked when a tab group's properties (label, color) change.
+     */
+    get onDidTabGroupChange() {
+        return this.component.onDidTabGroupChange;
+    }
+    /**
+     * Invoked when a tab group is collapsed or expanded.
+     */
+    get onDidTabGroupCollapsedChange() {
+        return this.component.onDidTabGroupCollapsedChange;
+    }
     /**
      * All panel objects.
      */
@@ -712,9 +757,82 @@ export class DockviewApi {
     addPopoutGroup(item, options) {
         return this.component.addPopoutGroup(item, options);
     }
+    /**
+     * Add an edge group at the given position. Returns the group panel API
+     * for the newly created group. Throws if a group already exists there.
+     */
+    addEdgeGroup(position, options) {
+        return this.component.addEdgeGroup(position, options);
+    }
+    /**
+     * Get the group panel API for an edge group at the given position.
+     * Returns `undefined` if no edge group is configured at that position.
+     */
+    getEdgeGroup(position) {
+        return this.component.getEdgeGroup(position);
+    }
+    /**
+     * Set the visibility of an edge group.
+     */
+    setEdgeGroupVisible(position, visible) {
+        this.component.setEdgeGroupVisible(position, visible);
+    }
+    /**
+     * Check whether an edge group is currently visible.
+     */
+    isEdgeGroupVisible(position) {
+        return this.component.isEdgeGroupVisible(position);
+    }
+    /**
+     * Remove an edge group and reclaim its slot in the layout.
+     * All panels inside the group are disposed. Throws if no group exists at position.
+     */
+    removeEdgeGroup(position) {
+        this.component.removeEdgeGroup(position);
+    }
     updateOptions(options) {
         this.component.updateOptions(options);
     }
+    // === Tab Group API ===
+    _getGroupModel(groupId) {
+        const group = this.component.getPanel(groupId);
+        if (!group) {
+            throw new Error(`dockview: group '${groupId}' not found`);
+        }
+        return group.model;
+    }
+    createTabGroup(options) {
+        const model = this._getGroupModel(options.groupId);
+        return model.createTabGroup({
+            label: options.label,
+            color: options.color,
+            componentParams: options.componentParams,
+        });
+    }
+    dissolveTabGroup(options) {
+        const model = this._getGroupModel(options.groupId);
+        model.dissolveTabGroup(options.tabGroupId);
+    }
+    addPanelToTabGroup(options) {
+        const model = this._getGroupModel(options.groupId);
+        model.addPanelToTabGroup(options.tabGroupId, options.panelId, options.index);
+    }
+    removePanelFromTabGroup(options) {
+        const model = this._getGroupModel(options.groupId);
+        model.removePanelFromTabGroup(options.panelId);
+    }
+    getTabGroups(options) {
+        const model = this._getGroupModel(options.groupId);
+        return model.getTabGroups();
+    }
+    getTabGroupForPanel(options) {
+        const model = this._getGroupModel(options.groupId);
+        return model.getTabGroupForPanel(options.panelId);
+    }
+    moveTabGroup(options) {
+        const model = this._getGroupModel(options.groupId);
+        model.moveTabGroup(options.tabGroupId, options.index);
+    }
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */

package/dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -17,9 +17,17 @@ export interface DockviewGroupMoveParams {
      */
     skipSetActive?: boolean;
 }
+export interface DockviewGroupPanelCollapsedChangeEvent {
+    readonly isCollapsed: boolean;
+}
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    /**
+     * Fired when an edge group's collapsed state changes.
+     * Never fires for non-edge groups.
+     */
+    readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     readonly location: DockviewGroupLocation;
     /**
      * If you require the Window object
@@ -32,6 +40,19 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
     isMaximized(): boolean;
     exitMaximized(): void;
     close(): void;
+    /**
+     * Collapse this group (edge groups only). No-op for non-edge groups.
+     */
+    collapse(): void;
+    /**
+     * Expand this group (edge groups only). No-op for non-edge groups.
+     */
+    expand(): void;
+    /**
+     * Returns true if this edge group is currently collapsed.
+     * Always returns false for non-edge groups.
+     */
+    isCollapsed(): boolean;
 }
 export interface DockviewGroupPanelFloatingChangeEvent {
     readonly location: DockviewGroupLocation;
@@ -44,6 +65,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly _onDidActivePanelChange: Emitter<DockviewGroupChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    readonly _onDidCollapsedChange: Emitter<DockviewGroupPanelCollapsedChangeEvent>;
+    readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
     setSize(event: SizeEvent): void;
@@ -55,5 +78,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
+    collapse(): void;
+    expand(): void;
+    isCollapsed(): boolean;
     initialize(group: DockviewGroupPanel): void;
 }

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -16,7 +16,9 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidLocationChange = this._onDidLocationChange.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidVisibilityChange.event((event) => {
+        this._onDidCollapsedChange = new Emitter();
+        this.onDidCollapsedChange = this._onDidCollapsedChange.event;
+        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidCollapsedChange, this._onDidVisibilityChange.event((event) => {
             // When becoming visible, apply any pending size change
             if (event.isVisible && this._pendingSize) {
                 super.setSize(this._pendingSize);
@@ -98,6 +100,24 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             this.accessor.exitMaximizedGroup();
         }
     }
+    collapse() {
+        if (!this._group) {
+            return;
+        }
+        this.accessor.setEdgeGroupCollapsed(this._group, true);
+    }
+    expand() {
+        if (!this._group) {
+            return;
+        }
+        this.accessor.setEdgeGroupCollapsed(this._group, false);
+    }
+    isCollapsed() {
+        if (!this._group) {
+            return false;
+        }
+        return this.accessor.isEdgeGroupCollapsed(this._group);
+    }
     initialize(group) {
         this._group = group;
     }

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

@@ -4,7 +4,8 @@ export declare class PanelTransfer extends TransferObject {
     readonly viewId: string;
     readonly groupId: string;
     readonly panelId: string | null;
-    constructor(viewId: string, groupId: string, panelId: string | null);
+    readonly tabGroupId?: string | undefined;
+    constructor(viewId: string, groupId: string, panelId: string | null, tabGroupId?: string | undefined);
 }
 export declare class PaneTransfer extends TransferObject {
     readonly viewId: string;

package/dist/esm/dnd/dataTransfer.js

@@ -1,11 +1,12 @@
 class TransferObject {
 }
 export class PanelTransfer extends TransferObject {
-    constructor(viewId, groupId, panelId) {
+    constructor(viewId, groupId, panelId, tabGroupId) {
         super();
         this.viewId = viewId;
         this.groupId = groupId;
         this.panelId = panelId;
+        this.tabGroupId = tabGroupId;
     }
 }
 export class PaneTransfer extends TransferObject {

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

@@ -26,6 +26,18 @@ export type MeasuredValue = {
 export type DroptargetOverlayModel = {
     size?: MeasuredValue;
     activationSize?: MeasuredValue;
+    /**
+     * Override the width threshold (in pixels) below which the overlay switches
+     * to a thin-border indicator instead of a half-width highlight. Set to 0 to
+     * always show the half-width overlay regardless of element size.
+     */
+    smallWidthBoundary?: number;
+    /**
+     * Override the height threshold (in pixels) below which the overlay switches
+     * to a thin-border indicator instead of a half-height highlight. Set to 0 to
+     * always show the half-height overlay regardless of element size.
+     */
+    smallHeightBoundary?: number;
 };
 export interface DropTargetTargetModel {
     getElements(event?: DragEvent, outline?: HTMLElement): {

package/dist/esm/dnd/droptarget.js

@@ -264,13 +264,15 @@ export class Droptarget extends CompositeDisposable {
         return typeof value === 'boolean' && value;
     }
     toggleClasses(quadrant, width, height) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
         if (!target && !this.overlayElement) {
             return;
         }
-        const isSmallX = width < SMALL_WIDTH_BOUNDARY;
-        const isSmallY = height < SMALL_HEIGHT_BOUNDARY;
+        const smallWidthBoundary = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.smallWidthBoundary) !== null && _d !== void 0 ? _d : SMALL_WIDTH_BOUNDARY;
+        const smallHeightBoundary = (_f = (_e = this.options.overlayModel) === null || _e === void 0 ? void 0 : _e.smallHeightBoundary) !== null && _f !== void 0 ? _f : SMALL_HEIGHT_BOUNDARY;
+        const isSmallX = width < smallWidthBoundary;
+        const isSmallY = height < smallHeightBoundary;
         const isLeft = quadrant === 'left';
         const isRight = quadrant === 'right';
         const isTop = quadrant === 'top';
@@ -280,7 +282,7 @@ export class Droptarget extends CompositeDisposable {
         const topClass = !isSmallY && isTop;
         const bottomClass = !isSmallY && isBottom;
         let size = 1;
-        const sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
+        const sizeOptions = (_h = (_g = this.options.overlayModel) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : DEFAULT_SIZE;
         if (sizeOptions.type === 'percentage') {
             size = clamp(sizeOptions.value, 0, 100) / 100;
         }
@@ -293,7 +295,7 @@ export class Droptarget extends CompositeDisposable {
             }
         }
         if (target) {
-            const outlineEl = (_g = (_f = (_e = this.options).getOverlayOutline) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : this.element;
+            const outlineEl = (_l = (_k = (_j = this.options).getOverlayOutline) === null || _k === void 0 ? void 0 : _k.call(_j)) !== null && _l !== void 0 ? _l : this.element;
             const elBox = outlineEl.getBoundingClientRect();
             const ta = target.getElements(undefined, outlineEl);
             const el = ta.root;
@@ -328,6 +330,13 @@ export class Droptarget extends CompositeDisposable {
                 box.left = rootLeft + width - 4;
                 box.width = 4;
             }
+            if (isSmallY && isTop) {
+                box.height = 4;
+            }
+            if (isSmallY && isBottom) {
+                box.top = rootTop + height - 4;
+                box.height = 4;
+            }
             // Use GPU-optimized bounds checking and setting
             if (!checkBoundsChanged(overlay, box)) {
                 return;
@@ -338,6 +347,8 @@ export class Droptarget extends CompositeDisposable {
             toggleClass(overlay, 'dv-drop-target-right', isRight);
             toggleClass(overlay, 'dv-drop-target-top', isTop);
             toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
+            toggleClass(overlay, 'dv-drop-target-anchor-line', (isSmallX && (isLeft || isRight)) ||
+                (isSmallY && (isTop || isBottom)));
             toggleClass(overlay, 'dv-drop-target-center', quadrant === 'center');
             if (ta.changed) {
                 toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
@@ -384,9 +395,26 @@ export class Droptarget extends CompositeDisposable {
             box.top = `${100 * (1 - size)}%`;
             box.height = `${100 * size}%`;
         }
+        if (isSmallX && isLeft) {
+            box.width = '4px';
+        }
+        if (isSmallX && isRight) {
+            box.left = `${width - 4}px`;
+            box.width = '4px';
+        }
+        if (isSmallY && isTop) {
+            box.height = '4px';
+        }
+        if (isSmallY && isBottom) {
+            box.top = `${height - 4}px`;
+            box.height = '4px';
+        }
         setGPUOptimizedBoundsFromStrings(this.overlayElement, box);
+        const isLine = (isSmallX && (isLeft || isRight)) ||
+            (isSmallY && (isTop || isBottom));
         toggleClass(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         toggleClass(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
+        toggleClass(this.overlayElement, 'dv-drop-target-selection-line', isLine);
         toggleClass(this.overlayElement, 'dv-drop-target-left', isLeft);
         toggleClass(this.overlayElement, 'dv-drop-target-right', isRight);
         toggleClass(this.overlayElement, 'dv-drop-target-top', isTop);

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

@@ -57,6 +57,7 @@ export class ContentContainer extends CompositeDisposable {
         this.element.style.display = 'none';
     }
     renderPanel(panel, options = { asActive: true }) {
+        var _a, _b, _c, _d;
         const doRender = options.asActive ||
             (this.panel && this.group.isPanelActive(this.panel));
         if (this.panel &&
@@ -65,6 +66,7 @@ export class ContentContainer extends CompositeDisposable {
              * If the currently attached panel is mounted directly to the content then remove it
              */
             this._element.removeChild(this.panel.view.content.element);
+            (_b = (_a = this.panel.view.content).onHide) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
         this.panel = panel;
         let container;
@@ -74,6 +76,7 @@ export class ContentContainer extends CompositeDisposable {
                 if (this.panel) {
                     if (doRender) {
                         this._element.appendChild(this.panel.view.content.element);
+                        (_d = (_c = this.panel.view.content).onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
                     }
                 }
                 container = this._element;
@@ -108,10 +111,11 @@ export class ContentContainer extends CompositeDisposable {
         // noop
     }
     closePanel() {
-        var _a;
+        var _a, _b, _c;
         if (this.panel) {
             if (this.panel.api.renderer === 'onlyWhenVisible') {
                 (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
+                (_c = (_b = this.panel.view.content).onHide) === null || _c === void 0 ? void 0 : _c.call(_b);
             }
         }
         this.panel = undefined;

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

@@ -1,10 +1,17 @@
 import { CompositeDisposable } from '../../lifecycle';
 export declare class PopupService extends CompositeDisposable {
-    private readonly root;
     private readonly _element;
     private _active;
     private readonly _activeDisposable;
-    constructor(root: HTMLElement);
+    private _root;
+    private readonly _window;
+    constructor(root: HTMLElement, win?: Window);
+    /**
+     * Move the popup anchor into a new root element. Call this when a shell
+     * wraps the dockview component so that edge-group overflow dropdowns
+     * position correctly relative to the full layout area.
+     */
+    updateRoot(newRoot: HTMLElement): void;
     openPopover(element: HTMLElement, position: {
         x: number;
         y: number;

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

@@ -2,23 +2,33 @@ import { shiftAbsoluteElementIntoView } from '../../dom';
 import { addDisposableListener } from '../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../lifecycle';
 export class PopupService extends CompositeDisposable {
-    constructor(root) {
+    constructor(root, win = window) {
         super();
-        this.root = root;
         this._active = null;
         this._activeDisposable = new MutableDisposable();
-        this._element = document.createElement('div');
+        this._root = root;
+        this._window = win;
+        this._element = win.document.createElement('div');
         this._element.className = 'dv-popover-anchor';
         this._element.style.position = 'relative';
-        this.root.prepend(this._element);
+        this._root.prepend(this._element);
         this.addDisposables(Disposable.from(() => {
             this.close();
         }), this._activeDisposable);
     }
+    /**
+     * Move the popup anchor into a new root element. Call this when a shell
+     * wraps the dockview component so that edge-group overflow dropdowns
+     * position correctly relative to the full layout area.
+     */
+    updateRoot(newRoot) {
+        newRoot.prepend(this._element);
+        this._root = newRoot;
+    }
     openPopover(element, position) {
         var _a;
         this.close();
-        const wrapper = document.createElement('div');
+        const wrapper = this._window.document.createElement('div');
         wrapper.style.position = 'absolute';
         wrapper.style.zIndex = (_a = position.zIndex) !== null && _a !== void 0 ? _a : 'var(--dv-overlay-z-index)';
         wrapper.appendChild(element);
@@ -29,7 +39,7 @@ export class PopupService extends CompositeDisposable {
         wrapper.style.left = `${position.x - offsetX}px`;
         this._element.appendChild(wrapper);
         this._active = wrapper;
-        this._activeDisposable.value = new CompositeDisposable(addDisposableListener(window, 'pointerdown', (event) => {
+        this._activeDisposable.value = new CompositeDisposable(addDisposableListener(this._window, 'pointerdown', (event) => {
             var _a;
             const target = event.target;
             if (!(target instanceof HTMLElement)) {
@@ -43,11 +53,15 @@ export class PopupService extends CompositeDisposable {
                 return; // clicked within popover
             }
             this.close();
-        }), addDisposableListener(window, 'resize', () => {
+        }), addDisposableListener(this._window, 'keydown', (event) => {
+            if (event.key === 'Escape' || event.key === 'Enter') {
+                this.close();
+            }
+        }), addDisposableListener(this._window, 'resize', () => {
             this.close();
         }));
-        requestAnimationFrame(() => {
-            shiftAbsoluteElementIntoView(wrapper, this.root);
+        this._window.requestAnimationFrame(() => {
+            shiftAbsoluteElementIntoView(wrapper, this._root);
         });
     }
     close() {

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

@@ -5,6 +5,7 @@ import { ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewHeaderDirection } from '../../options';
 export declare class Tab extends CompositeDisposable {
     readonly panel: IDockviewPanel;
     private readonly accessor;
@@ -13,17 +14,23 @@ export declare class Tab extends CompositeDisposable {
     private readonly dropTarget;
     private content;
     private readonly dragHandler;
+    private _direction;
     private readonly _onPointDown;
     readonly onPointerDown: Event<MouseEvent>;
+    private readonly _onTabClick;
+    readonly onTabClick: Event<MouseEvent>;
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    private readonly _onDragEnd;
+    readonly onDragEnd: Event<DragEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;
+    private _buildOverlayModel;
+    setDirection(direction: DockviewHeaderDirection): void;
     updateDragAndDropState(): void;
-    dispose(): void;
 }