dockview-core 3.1.1 → 4.0.0

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

@@ -352,7 +352,6 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Total number of panels.
      */
     get totalPanels(): number;
-    get gap(): number;
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -514,7 +513,6 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
             window: Window;
         }) => void;
     }): Promise<boolean>;
-    setGap(gap: number | undefined): void;
     updateOptions(options: Partial<DockviewComponentOptions>): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.

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

@@ -473,9 +473,6 @@ export class DockviewApi {
     get totalPanels() {
         return this.component.totalPanels;
     }
-    get gap() {
-        return this.component.gap;
-    }
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */
@@ -706,9 +703,6 @@ export class DockviewApi {
     addPopoutGroup(item, options) {
         return this.component.addPopoutGroup(item, options);
     }
-    setGap(gap) {
-        this.component.updateOptions({ gap });
-    }
     updateOptions(options) {
         this.component.updateOptions(options);
     }

package/dist/esm/dnd/abstractDragHandler.js

@@ -42,14 +42,16 @@ export class DragHandler extends CompositeDisposable {
                      * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
                      * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
                      * dnd logic. You can see the code at
-                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                 P    * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                      */
                     event.dataTransfer.setData('text/plain', '');
                 }
             }
         }), addDisposableListener(this.el, 'dragend', () => {
             this.pointerEventsDisposable.dispose();
-            this.dataDisposable.dispose();
+            setTimeout(() => {
+                this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
+            }, 0);
         }));
     }
 }

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

@@ -0,0 +1,16 @@
+import { CompositeDisposable } from '../lifecycle';
+import { DropTargetTargetModel } from './droptarget';
+export declare class DropTargetAnchorContainer extends CompositeDisposable {
+    readonly element: HTMLElement;
+    private _model;
+    private _outline;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get model(): DropTargetTargetModel | undefined;
+    constructor(element: HTMLElement, options: {
+        disabled: boolean;
+    });
+    private createContainer;
+    private createAnchor;
+}

package/dist/esm/dnd/dropTargetAnchorContainer.js

@@ -0,0 +1,74 @@
+import { CompositeDisposable, Disposable } from '../lifecycle';
+export class DropTargetAnchorContainer extends CompositeDisposable {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        var _a;
+        if (this.disabled === value) {
+            return;
+        }
+        this._disabled = value;
+        if (value) {
+            (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
+        }
+    }
+    get model() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return {
+            clear: () => {
+                var _a;
+                if (this._model) {
+                    (_a = this._model.root.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._model.root);
+                }
+                this._model = undefined;
+            },
+            exists: () => {
+                return !!this._model;
+            },
+            getElements: (event, outline) => {
+                const changed = this._outline !== outline;
+                this._outline = outline;
+                if (this._model) {
+                    this._model.changed = changed;
+                    return this._model;
+                }
+                const container = this.createContainer();
+                const anchor = this.createAnchor();
+                this._model = { root: container, overlay: anchor, changed };
+                container.appendChild(anchor);
+                this.element.appendChild(container);
+                if ((event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement) {
+                    const targetBox = event.target.getBoundingClientRect();
+                    const box = this.element.getBoundingClientRect();
+                    anchor.style.left = `${targetBox.left - box.left}px`;
+                    anchor.style.top = `${targetBox.top - box.top}px`;
+                }
+                return this._model;
+            },
+        };
+    }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this._disabled = false;
+        this._disabled = options.disabled;
+        this.addDisposables(Disposable.from(() => {
+            var _a;
+            (_a = this.model) === null || _a === void 0 ? void 0 : _a.clear();
+        }));
+    }
+    createContainer() {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-container';
+        return el;
+    }
+    createAnchor() {
+        const el = document.createElement('div');
+        el.className = 'dv-drop-target-anchor';
+        el.style.visibility = 'hidden';
+        return el;
+    }
+}

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

@@ -27,10 +27,22 @@ export type DroptargetOverlayModel = {
     size?: MeasuredValue;
     activationSize?: MeasuredValue;
 };
+export interface DropTargetTargetModel {
+    getElements(event?: DragEvent, outline?: HTMLElement): {
+        root: HTMLElement;
+        overlay: HTMLElement;
+        changed: boolean;
+    };
+    exists(): boolean;
+    clear(): void;
+}
 export interface DroptargetOptions {
     canDisplayOverlay: CanDisplayOverlay;
     acceptedTargetZones: Position[];
     overlayModel?: DroptargetOverlayModel;
+    getOverrideTarget?: () => DropTargetTargetModel | undefined;
+    className?: string;
+    getOverlayOutline?: () => HTMLElement | null;
 }
 export declare class Droptarget extends CompositeDisposable {
     private readonly element;
@@ -45,6 +57,10 @@ export declare class Droptarget extends CompositeDisposable {
     readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     readonly dnd: DragAndDropObserver;
     private static USED_EVENT_ID;
+    private static ACTUAL_TARGET;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     get state(): Position | undefined;
     constructor(element: HTMLElement, options: DroptargetOptions);
     setTargetZones(acceptedTargetZones: Position[]): void;

package/dist/esm/dnd/droptarget.js

@@ -58,6 +58,12 @@ const DEFAULT_SIZE = {
 const SMALL_WIDTH_BOUNDARY = 100;
 const SMALL_HEIGHT_BOUNDARY = 100;
 export class Droptarget extends CompositeDisposable {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
     get state() {
         return this._state;
     }
@@ -69,23 +75,34 @@ export class Droptarget extends CompositeDisposable {
         this.onDrop = this._onDrop.event;
         this._onWillShowOverlay = new Emitter();
         this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._disabled = false;
         // use a set to take advantage of #<set>.has
         this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
         this.dnd = new DragAndDropObserver(this.element, {
-            onDragEnter: () => undefined,
+            onDragEnter: () => {
+                var _a, _b, _c;
+                (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getElements();
+            },
             onDragOver: (e) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                Droptarget.ACTUAL_TARGET = this;
+                const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
                 if (this._acceptedTargetZonesSet.size === 0) {
+                    if (overrideTraget) {
+                        return;
+                    }
                     this.removeDropTarget();
                     return;
                 }
-                const width = this.element.clientWidth;
-                const height = this.element.clientHeight;
+                const target = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
+                const width = target.offsetWidth;
+                const height = target.offsetHeight;
                 if (width === 0 || height === 0) {
                     return; // avoid div!0
                 }
                 const rect = e.currentTarget.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
+                const x = ((_f = e.clientX) !== null && _f !== void 0 ? _f : 0) - rect.left;
+                const y = ((_g = e.clientY) !== null && _g !== void 0 ? _g : 0) - rect.top;
                 const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
                 /**
                  * If the event has already been used by another DropTarget instance
@@ -98,6 +115,9 @@ export class Droptarget extends CompositeDisposable {
                     return;
                 }
                 if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    if (overrideTraget) {
+                        return;
+                    }
                     this.removeDropTarget();
                     return;
                 }
@@ -115,29 +135,59 @@ export class Droptarget extends CompositeDisposable {
                     return;
                 }
                 this.markAsUsed(e);
-                if (!this.targetElement) {
+                if (overrideTraget) {
+                    //
+                }
+                else if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
                     this.targetElement.className = 'dv-drop-target-dropzone';
                     this.overlayElement = document.createElement('div');
                     this.overlayElement.className = 'dv-drop-target-selection';
                     this._state = 'center';
                     this.targetElement.appendChild(this.overlayElement);
-                    this.element.classList.add('dv-drop-target');
-                    this.element.append(this.targetElement);
+                    target.classList.add('dv-drop-target');
+                    target.append(this.targetElement);
+                    // this.overlayElement.style.opacity = '0';
+                    // requestAnimationFrame(() => {
+                    //     if (this.overlayElement) {
+                    //         this.overlayElement.style.opacity = '';
+                    //     }
+                    // });
                 }
                 this.toggleClasses(quadrant, width, height);
                 this._state = quadrant;
             },
             onDragLeave: () => {
+                var _a, _b;
+                const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (target) {
+                    return;
+                }
                 this.removeDropTarget();
             },
-            onDragEnd: () => {
+            onDragEnd: (e) => {
+                var _a, _b;
+                const target = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (target && Droptarget.ACTUAL_TARGET === this) {
+                    if (this._state) {
+                        // only stop the propagation of the event if we are dealing with it
+                        // which is only when the target has state
+                        e.stopPropagation();
+                        this._onDrop.fire({
+                            position: this._state,
+                            nativeEvent: e,
+                        });
+                    }
+                }
                 this.removeDropTarget();
+                target === null || target === void 0 ? void 0 : target.clear();
             },
             onDrop: (e) => {
+                var _a, _b, _c;
                 e.preventDefault();
                 const state = this._state;
                 this.removeDropTarget();
+                (_c = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.clear();
                 if (state) {
                     // only stop the propagation of the event if we are dealing with it
                     // which is only when the target has state
@@ -172,8 +222,9 @@ export class Droptarget extends CompositeDisposable {
         return typeof value === 'boolean' && value;
     }
     toggleClasses(quadrant, width, height) {
-        var _a, _b;
-        if (!this.overlayElement) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        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;
@@ -187,7 +238,7 @@ export class Droptarget extends CompositeDisposable {
         const topClass = !isSmallY && isTop;
         const bottomClass = !isSmallY && isBottom;
         let size = 1;
-        const sizeOptions = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : DEFAULT_SIZE;
+        const sizeOptions = (_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : DEFAULT_SIZE;
         if (sizeOptions.type === 'percentage') {
             size = clamp(sizeOptions.value, 0, 100) / 100;
         }
@@ -199,6 +250,74 @@ export class Droptarget extends CompositeDisposable {
                 size = clamp(0, sizeOptions.value, height) / height;
             }
         }
+        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 elBox = outlineEl.getBoundingClientRect();
+            const ta = target.getElements(undefined, outlineEl);
+            const el = ta.root;
+            const overlay = ta.overlay;
+            const bigbox = el.getBoundingClientRect();
+            const rootTop = elBox.top - bigbox.top;
+            const rootLeft = elBox.left - bigbox.left;
+            const box = {
+                top: rootTop,
+                left: rootLeft,
+                width: width,
+                height: height,
+            };
+            if (rightClass) {
+                box.left = rootLeft + width * (1 - size);
+                box.width = width * size;
+            }
+            else if (leftClass) {
+                box.width = width * size;
+            }
+            else if (topClass) {
+                box.height = height * size;
+            }
+            else if (bottomClass) {
+                box.top = rootTop + height * (1 - size);
+                box.height = height * size;
+            }
+            if (isSmallX && isLeft) {
+                box.width = 4;
+            }
+            if (isSmallX && isRight) {
+                box.left = rootLeft + width - 4;
+                box.width = 4;
+            }
+            const topPx = `${Math.round(box.top)}px`;
+            const leftPx = `${Math.round(box.left)}px`;
+            const widthPx = `${Math.round(box.width)}px`;
+            const heightPx = `${Math.round(box.height)}px`;
+            if (overlay.style.top === topPx &&
+                overlay.style.left === leftPx &&
+                overlay.style.width === widthPx &&
+                overlay.style.height === heightPx) {
+                return;
+            }
+            overlay.style.top = topPx;
+            overlay.style.left = leftPx;
+            overlay.style.width = widthPx;
+            overlay.style.height = heightPx;
+            overlay.style.visibility = 'visible';
+            overlay.className = `dv-drop-target-anchor${this.options.className ? ` ${this.options.className}` : ''}`;
+            toggleClass(overlay, 'dv-drop-target-left', isLeft);
+            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-center', quadrant === 'center');
+            if (ta.changed) {
+                toggleClass(overlay, 'dv-drop-target-anchor-container-changed', true);
+                setTimeout(() => {
+                    toggleClass(overlay, 'dv-drop-target-anchor-container-changed', false);
+                }, 10);
+            }
+            return;
+        }
+        if (!this.overlayElement) {
+            return;
+        }
         const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
         /**
          * You can also achieve the overlay placement using the transform CSS property
@@ -255,12 +374,13 @@ export class Droptarget extends CompositeDisposable {
         return calculateQuadrantAsPixels(overlayType, x, y, width, height, activationSizeOptions.value);
     }
     removeDropTarget() {
+        var _a;
         if (this.targetElement) {
             this._state = undefined;
-            this.element.removeChild(this.targetElement);
+            (_a = this.targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
+            this.targetElement.remove();
             this.targetElement = undefined;
             this.overlayElement = undefined;
-            this.element.classList.remove('dv-drop-target');
         }
     }
 }

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

@@ -1 +1,4 @@
-export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
+export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement, options?: {
+    x?: number;
+    y?: number;
+}): void;

package/dist/esm/dnd/ghost.js

@@ -1,9 +1,10 @@
 import { addClasses, removeClasses } from '../dom';
-export function addGhostImage(dataTransfer, ghostElement) {
+export function addGhostImage(dataTransfer, ghostElement, options) {
+    var _a, _b;
     // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
     addClasses(ghostElement, 'dv-dragged');
     document.body.appendChild(ghostElement);
-    dataTransfer.setDragImage(ghostElement, 0, 0);
+    dataTransfer.setDragImage(ghostElement, (_a = options === null || options === void 0 ? void 0 : options.x) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : 0);
     setTimeout(() => {
         removeClasses(ghostElement, 'dv-dragged');
         ghostElement.remove();

package/dist/esm/dnd/groupDragHandler.js

@@ -42,8 +42,10 @@ export class GroupDragHandler extends DragHandler {
             ghostElement.style.lineHeight = '20px';
             ghostElement.style.borderRadius = '12px';
             ghostElement.style.position = 'absolute';
+            ghostElement.style.pointerEvents = 'none';
+            ghostElement.style.top = '-9999px';
             ghostElement.textContent = `Multiple Panels (${this.group.size})`;
-            addGhostImage(dataTransfer, ghostElement);
+            addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
         }
         return {
             dispose: () => {

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

@@ -20,7 +20,15 @@ export class ContentContainer extends CompositeDisposable {
         this._element.className = 'dv-content-container';
         this._element.tabIndex = -1;
         this.addDisposables(this._onDidFocus, this._onDidBlur);
+        const target = group.dropTargetContainer;
         this.dropTarget = new Droptarget(this.element, {
+            getOverlayOutline: () => {
+                var _a;
+                return ((_a = accessor.options.theme) === null || _a === void 0 ? void 0 : _a.dndPanelOverlay) === 'group'
+                    ? this.element.parentElement
+                    : null;
+            },
+            className: 'dv-drop-target-content',
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked === 'no-drop-target' ||
@@ -34,22 +42,11 @@ export class ContentContainer extends CompositeDisposable {
                     return false;
                 }
                 if (data && data.viewId === this.accessor.id) {
-                    if (data.groupId === this.group.id) {
-                        if (position === 'center') {
-                            // don't allow to drop on self for center position
-                            return false;
-                        }
-                        if (data.panelId === null) {
-                            // don't allow group move to drop anywhere on self
-                            return false;
-                        }
-                    }
-                    const groupHasOnePanelAndIsActiveDragElement = this.group.panels.length === 1 &&
-                        data.groupId === this.group.id;
-                    return !groupHasOnePanelAndIsActiveDragElement;
+                    return true;
                 }
                 return this.group.canDisplayOverlay(event, position, 'content');
             },
+            getOverrideTarget: target ? () => target.model : undefined,
         });
         this.addDisposables(this.dropTarget);
     }

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

@@ -0,0 +1,13 @@
+import { CompositeDisposable } from '../../lifecycle';
+export declare class PopupService extends CompositeDisposable {
+    private readonly root;
+    private readonly _element;
+    private _active;
+    private readonly _activeDisposable;
+    constructor(root: HTMLElement);
+    openPopover(element: HTMLElement, position: {
+        x: number;
+        y: number;
+    }): void;
+    close(): void;
+}

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

@@ -0,0 +1,53 @@
+import { addDisposableWindowListener } from '../../events';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../../lifecycle';
+export class PopupService extends CompositeDisposable {
+    constructor(root) {
+        super();
+        this.root = root;
+        this._active = null;
+        this._activeDisposable = new MutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dv-popover-anchor';
+        this._element.style.position = 'relative';
+        this.root.prepend(this._element);
+        this.addDisposables(Disposable.from(() => {
+            this.close();
+        }), this._activeDisposable);
+    }
+    openPopover(element, position) {
+        this.close();
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'absolute';
+        wrapper.style.zIndex = '99';
+        wrapper.appendChild(element);
+        const anchorBox = this._element.getBoundingClientRect();
+        const offsetX = anchorBox.left;
+        const offsetY = anchorBox.top;
+        wrapper.style.top = `${position.y - offsetY}px`;
+        wrapper.style.left = `${position.x - offsetX}px`;
+        this._element.appendChild(wrapper);
+        this._active = wrapper;
+        this._activeDisposable.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointerdown', (event) => {
+            var _a;
+            const target = event.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            let el = target;
+            while (el && el !== wrapper) {
+                el = (_a = el === null || el === void 0 ? void 0 : el.parentElement) !== null && _a !== void 0 ? _a : null;
+            }
+            if (el) {
+                return; // clicked within popover
+            }
+            this.close();
+        }));
+    }
+    close() {
+        if (this._active) {
+            this._active.remove();
+            this._activeDisposable.dispose();
+            this._active = null;
+        }
+    }
+}

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

@@ -4,6 +4,7 @@ import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../../../d
 import { toggleClass } from '../../../dom';
 import { Droptarget, } from '../../../dnd/droptarget';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
+import { addGhostImage } from '../../../dnd/ghost';
 class TabDragHandler extends DragHandler {
     constructor(element, accessor, group, panel) {
         super(element);
@@ -44,25 +45,32 @@ export class Tab extends CompositeDisposable {
         toggleClass(this.element, 'dv-inactive-tab', true);
         const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.dropTarget = new Droptarget(this._element, {
-            acceptedTargetZones: ['center'],
+            acceptedTargetZones: ['left', 'right'],
+            overlayModel: { activationSize: { value: 50, type: 'percentage' } },
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked) {
                     return false;
                 }
                 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;
-                    }
-                    return this.panel.id !== data.panelId;
+                    return true;
                 }
                 return this.group.model.canDisplayOverlay(event, position, 'tab');
             },
+            getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+            if (event.dataTransfer) {
+                const style = getComputedStyle(this.element);
+                const newNode = this.element.cloneNode(true);
+                Array.from(style).forEach((key) => newNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
+                newNode.style.position = 'absolute';
+                addGhostImage(event.dataTransfer, newNode, {
+                    y: -10,
+                    x: 30,
+                });
+            }
             this._onDragStart.fire(event);
         }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
             this._onPointDown.fire(event);

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

@@ -0,0 +1,8 @@
+export type DropdownElement = {
+    element: HTMLElement;
+    update: (params: {
+        tabs: number;
+    }) => void;
+    dispose?: () => void;
+};
+export declare function createDropdownElementHandle(): DropdownElement;

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

@@ -0,0 +1,16 @@
+import { createChevronRightButton } from '../../../svg';
+export function createDropdownElementHandle() {
+    const el = document.createElement('div');
+    el.className = 'dv-tabs-overflow-dropdown-default';
+    const text = document.createElement('span');
+    text.textContent = ``;
+    const icon = createChevronRightButton();
+    el.appendChild(icon);
+    el.appendChild(text);
+    return {
+        element: el,
+        update: (params) => {
+            text.textContent = `${params.tabs}`;
+        },
+    };
+}