dockview 1.9.2 → 1.10.1

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.2
+ * @version 1.10.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -141,6 +141,17 @@ exports.DockviewEvent = void 0;
         };
     };
 })(exports.DockviewEvent || (exports.DockviewEvent = {}));
+class DockviewEvent {
+    constructor() {
+        this._defaultPrevented = false;
+    }
+    get defaultPrevented() {
+        return this._defaultPrevented;
+    }
+    preventDefault() {
+        this._defaultPrevented = true;
+    }
+}
 class LeakageMonitor {
     constructor() {
         this.events = new Map();
@@ -184,6 +195,9 @@ class Emitter {
         }
         Emitter.ENABLE_TRACKING = isEnabled;
     }
+    get value() {
+        return this._last;
+    }
     constructor(options) {
         this.options = options;
         this._listeners = [];
@@ -306,8 +320,12 @@ class CompositeDisposable {
         args.forEach((arg) => this._disposables.push(arg));
     }
     dispose() {
-        this._disposables.forEach((arg) => arg.dispose());
+        if (this._isDisposed) {
+            return;
+        }
         this._isDisposed = true;
+        this._disposables.forEach((arg) => arg.dispose());
+        this._disposables = [];
     }
 }
 class MutableDisposable {
@@ -791,6 +809,13 @@ class Splitview {
         this._endSnappingEnabled = endSnappingEnabled;
         this.updateSashEnablement();
     }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        toggleClass(this.element, 'dv-splitview-disabled', value);
+    }
     constructor(container, options) {
         this.container = container;
         this.viewItems = [];
@@ -801,6 +826,7 @@ class Splitview {
         this._proportions = undefined;
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
+        this._disabled = false;
         this._onDidSashEnd = new Emitter();
         this.onDidSashEnd = this._onDidSashEnd.event;
         this._onDidAddView = new Emitter();
@@ -1475,6 +1501,9 @@ class Paneview extends CompositeDisposable {
             this._onDidChange.fire();
         }));
     }
+    setViewVisible(index, visible) {
+        this.splitview.setViewVisible(index, visible);
+    }
     addPane(pane, size, index = this.splitview.length, skipLayout = false) {
         const disposable = pane.onDidChangeExpansionState(() => {
             this.setupAnimation();
@@ -1728,7 +1757,13 @@ class BranchNode extends CompositeDisposable {
         }
         return exports.LayoutPriority.Normal;
     }
-    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+    get disabled() {
+        return this.splitview.disabled;
+    }
+    set disabled(value) {
+        this.splitview.disabled = value;
+    }
+    constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
         super();
         this.orientation = orientation;
         this.proportionalLayout = proportionalLayout;
@@ -1773,6 +1808,7 @@ class BranchNode extends CompositeDisposable {
                 styles,
             });
         }
+        this.disabled = disabled;
         this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire({});
         }));
@@ -1906,7 +1942,7 @@ function findLeaf(candiateNode, last) {
 }
 function flipNode(node, size, orthogonalSize) {
     if (node instanceof BranchNode) {
-        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
+        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
         let totalSize = 0;
         for (let i = node.children.length - 1; i >= 0; i--) {
             const child = node.children[i];
@@ -2042,31 +2078,57 @@ class Gridview {
     get maximumHeight() {
         return this.root.maximumHeight;
     }
+    get locked() {
+        return this._locked;
+    }
+    set locked(value) {
+        this._locked = value;
+        const branch = [this.root];
+        /**
+         * simple depth-first-search to cover all nodes
+         *
+         * @see https://en.wikipedia.org/wiki/Depth-first_search
+         */
+        while (branch.length > 0) {
+            const node = branch.pop();
+            if (node instanceof BranchNode) {
+                node.disabled = value;
+                branch.push(...node.children);
+            }
+        }
+    }
     maximizedView() {
         var _a;
-        return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+        return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
     }
     hasMaximizedView() {
         return this._maximizedNode !== undefined;
     }
     maximizeView(view) {
+        var _a;
         const location = getGridLocation(view.element);
         const [_, node] = this.getNode(location);
         if (!(node instanceof LeafNode)) {
             return;
         }
-        if (this._maximizedNode === node) {
+        if (((_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf) === node) {
             return;
         }
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
         }
+        const hiddenOnMaximize = [];
         function hideAllViewsBut(parent, exclude) {
             for (let i = 0; i < parent.children.length; i++) {
                 const child = parent.children[i];
                 if (child instanceof LeafNode) {
                     if (child !== exclude) {
-                        parent.setChildVisible(i, false);
+                        if (parent.isChildVisible(i)) {
+                            parent.setChildVisible(i, false);
+                        }
+                        else {
+                            hiddenOnMaximize.push(child);
+                        }
                     }
                 }
                 else {
@@ -2075,18 +2137,21 @@ class Gridview {
             }
         }
         hideAllViewsBut(this.root, node);
-        this._maximizedNode = node;
-        this._onDidMaxmizedNodeChange.fire();
+        this._maximizedNode = { leaf: node, hiddenOnMaximize };
+        this._onDidMaximizedNodeChange.fire();
     }
     exitMaximizedView() {
         if (!this._maximizedNode) {
             return;
         }
+        const hiddenOnMaximize = this._maximizedNode.hiddenOnMaximize;
         function showViewsInReverseOrder(parent) {
             for (let index = parent.children.length - 1; index >= 0; index--) {
                 const child = parent.children[index];
                 if (child instanceof LeafNode) {
-                    parent.setChildVisible(index, true);
+                    if (!hiddenOnMaximize.includes(child)) {
+                        parent.setChildVisible(index, true);
+                    }
                 }
                 else {
                     showViewsInReverseOrder(child);
@@ -2095,13 +2160,13 @@ class Gridview {
         }
         showViewsInReverseOrder(this.root);
         this._maximizedNode = undefined;
-        this._onDidMaxmizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire();
     }
     serialize() {
         if (this.hasMaximizedView()) {
             /**
-             * do not persist maximized view state but we must first exit any maximized views
-             * before serialization to ensure the correct dimensions are persisted
+             * do not persist maximized view state
+             * firstly exit any maximized views to ensure the correct dimensions are persisted
              */
             this.exitMaximizedView();
         }
@@ -2116,14 +2181,14 @@ class Gridview {
     dispose() {
         this.disposable.dispose();
         this._onDidChange.dispose();
-        this._onDidMaxmizedNodeChange.dispose();
+        this._onDidMaximizedNodeChange.dispose();
         this.root.dispose();
         this._maximizedNode = undefined;
         this.element.remove();
     }
     clear() {
         const orientation = this.root.orientation;
-        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize);
+        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
     }
     deserialize(json, deserializer) {
         const orientation = json.orientation;
@@ -2144,8 +2209,8 @@ class Gridview {
                 };
             });
             result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
-            orthogonalSize, // <- size - flips at each depth
-            children);
+            orthogonalSize, // <- size - flips at each depth,
+            this._locked, children);
         }
         else {
             result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2178,7 +2243,7 @@ class Gridview {
         }
         const oldRoot = this.root;
         oldRoot.element.remove();
-        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
+        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
         if (oldRoot.children.length === 0) ;
         else if (oldRoot.children.length === 1) {
             // can remove one level of redundant branching if there is only a single child
@@ -2246,15 +2311,16 @@ class Gridview {
     constructor(proportionalLayout, styles, orientation) {
         this.proportionalLayout = proportionalLayout;
         this.styles = styles;
+        this._locked = false;
         this._maximizedNode = undefined;
         this.disposable = new MutableDisposable();
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this._onDidMaxmizedNodeChange = new Emitter();
-        this.onDidMaxmizedNodeChange = this._onDidMaxmizedNodeChange.event;
+        this._onDidMaximizedNodeChange = new Emitter();
+        this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
         this.element.className = 'grid-view';
-        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
+        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
     }
     isViewVisible(location) {
         const [rest, index] = tail(location);
@@ -2305,7 +2371,7 @@ class Gridview {
             }
             const child = grandParent.removeChild(parentIndex);
             child.dispose();
-            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
+            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
             grandParent.addChild(newParent, parent.size, parentIndex);
             const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
             newParent.addChild(newSibling, newSiblingSize, 0);
@@ -2933,13 +2999,36 @@ class DockviewApi {
         return this.component.onDidDrop;
     }
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and
+     * prevent the event from occuring using the standard `preventDefault()` syntax.
+     *
+     * Preventing certain events may causes unexpected behaviours, use carefully.
+     */
+    get onWillDrop() {
+        return this.component.onWillDrop;
+    }
+    /**
+     * Invoked before an overlay is shown indicating a drop target.
+     *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
+     */
+    get onWillShowOverlay() {
+        return this.component.onWillShowOverlay;
+    }
+    /**
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup() {
         return this.component.onWillDragGroup;
     }
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
@@ -3067,17 +3156,17 @@ class DockviewApi {
     hasMaximizedGroup() {
         return this.component.hasMaximizedGroup();
     }
-    exitMaxmizedGroup() {
+    exitMaximizedGroup() {
         this.component.exitMaximizedGroup();
     }
-    get onDidMaxmizedGroupChange() {
-        return this.component.onDidMaxmizedGroupChange;
+    get onDidMaximizedGroupChange() {
+        return this.component.onDidMaximizedGroupChange;
     }
     /**
      * Add a popout group in a new Window
      */
     addPopoutGroup(item, options) {
-        this.component.addPopoutGroup(item, options);
+        return this.component.addPopoutGroup(item, options);
     }
 }
 
@@ -3131,6 +3220,18 @@ class DragAndDropObserver extends CompositeDisposable {
     }
 }
 
+class WillShowOverlayEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
+    }
+    get position() {
+        return this.options.position;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+}
 function directionToPosition(direction) {
     switch (direction) {
         case 'above':
@@ -3183,6 +3284,8 @@ 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, {
@@ -3211,6 +3314,19 @@ 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();
@@ -3253,7 +3369,7 @@ 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);
@@ -3306,25 +3422,44 @@ 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);
@@ -3392,14 +3527,6 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     return 'center';
 }
 
-exports.DockviewDropTargets = void 0;
-(function (DockviewDropTargets) {
-    DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-    DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-    DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-})(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
-
 class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
@@ -3427,7 +3554,7 @@ 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) {
@@ -3445,7 +3572,7 @@ class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         this.addDisposables(this.dropTarget);
@@ -3470,7 +3597,7 @@ 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);
@@ -3482,7 +3609,7 @@ 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,
                 });
@@ -3513,9 +3640,10 @@ 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;
@@ -3626,7 +3754,7 @@ 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) {
@@ -3641,9 +3769,10 @@ class Tab extends CompositeDisposable {
                     }
                     return this.panel.id !== data.panelId;
                 }
-                return this.group.model.canDisplayOverlay(event, position, exports.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) => {
@@ -3651,9 +3780,9 @@ 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);
@@ -3700,7 +3829,7 @@ 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;
@@ -3752,7 +3881,7 @@ 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;
@@ -3766,14 +3895,15 @@ 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, exports.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);
     }
 }
 
@@ -3861,19 +3991,11 @@ 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');
@@ -3888,7 +4010,15 @@ 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,
@@ -3898,11 +4028,15 @@ 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();
@@ -3965,9 +4099,9 @@ 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) {
@@ -3981,20 +4115,20 @@ 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);
@@ -4012,6 +4146,60 @@ class TabsContainer extends CompositeDisposable {
     }
 }
 
+class DockviewDidDropEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
+    }
+    get position() {
+        return this.options.position;
+    }
+    get panel() {
+        return this.options.panel;
+    }
+    get group() {
+        return this.options.group;
+    }
+    get api() {
+        return this.options.api;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    getData() {
+        return this.options.getData();
+    }
+}
+class DockviewWillDropEvent extends DockviewDidDropEvent {
+    get kind() {
+        return this._kind;
+    }
+    constructor(options) {
+        super(options);
+        this._kind = options.kind;
+    }
+}
+class WillShowOverlayLocationEvent {
+    get kind() {
+        return this._kind;
+    }
+    get nativeEvent() {
+        return this.event.nativeEvent;
+    }
+    get position() {
+        return this.event.position;
+    }
+    get defaultPrevented() {
+        return this.event.defaultPrevented;
+    }
+    preventDefault() {
+        this.event.preventDefault();
+    }
+    constructor(event, options) {
+        this.event = event;
+        this._kind = options.kind;
+    }
+}
 class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
         throw new Error('not supported');
@@ -4057,7 +4245,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._location = value;
         toggleClass(this.container, 'dv-groupview-floating', false);
         toggleClass(this.container, 'dv-groupview-popout', false);
-        switch (value) {
+        switch (value.type) {
             case 'grid':
                 this.contentContainer.dropTarget.setTargetZones([
                     'top',
@@ -4093,7 +4281,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
-        this._location = 'grid';
+        this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
@@ -4104,6 +4292,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
@@ -4114,46 +4306,69 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._overwriteRenderContainer = null;
         toggleClass(this.container, 'groupview', true);
+        this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
             this._onTabDragStart.fire(event);
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
         }), this.tabsContainer.onDrop((event) => {
-            this.handleDropEvent(event.event, 'center', event.index);
+            this.handleDropEvent('header', event.event, 'center', event.index);
         }), this.contentContainer.onDidFocus(() => {
-            this.accessor.doSetGroupActive(this.groupPanel, true);
+            this.accessor.doSetGroupActive(this.groupPanel);
         }), this.contentContainer.onDidBlur(() => {
             // noop
         }), this.contentContainer.dropTarget.onDrop((event) => {
-            this.handleDropEvent(event.nativeEvent, event.position);
-        }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+            this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), this.tabsContainer.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(event);
+        }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'content',
+            }));
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+    }
+    focusContent() {
+        this.contentContainer.element.focus();
+    }
+    set renderContainer(value) {
+        this.panels.forEach((panel) => {
+            this.renderContainer.detatch(panel);
+        });
+        this._overwriteRenderContainer = value;
+        this.panels.forEach((panel) => {
+            this.rerender(panel);
+        });
+    }
+    get renderContainer() {
+        var _a;
+        return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
     }
     initialize() {
-        var _a, _b;
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
+        if (this.options.panels) {
             this.options.panels.forEach((panel) => {
                 this.doAddPanel(panel);
             });
         }
-        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) {
+        if (this.options.activePanel) {
             this.openPanel(this.options.activePanel);
         }
         // must be run after the constructor otherwise this.parent may not be
         // correctly initialized
-        this.setActive(this.isActive, true, true);
+        this.setActive(this.isActive, true);
         this.updateContainer();
         if (this.accessor.options.createRightHeaderActionsElement) {
             this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._rightHeaderActions);
             this._rightHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
@@ -4163,7 +4378,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                 this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._leftHeaderActions);
             this._leftHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
@@ -4173,7 +4388,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
                 this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._prefixHeaderActions);
             this._prefixHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
@@ -4253,35 +4468,45 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         //noop
     }
     focus() {
-        var _a, _b;
-        (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        var _a;
+        (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
     }
     openPanel(panel, options = {}) {
+        /**
+         * set the panel group
+         * add the panel
+         * check if group active
+         * check if panel active
+         */
         if (typeof options.index !== 'number' ||
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
-        const skipSetPanelActive = !!options.skipSetPanelActive;
-        const skipSetGroupActive = !!options.skipSetGroupActive;
+        const skipSetActive = !!options.skipSetActive;
         // ensure the group is updated before we fire any events
-        panel.updateParentGroup(this.groupPanel, true);
+        panel.updateParentGroup(this.groupPanel, {
+            skipSetActive: options.skipSetActive,
+        });
+        this.doAddPanel(panel, options.index, {
+            skipSetActive: skipSetActive,
+        });
         if (this._activePanel === panel) {
-            if (!skipSetGroupActive) {
-                this.accessor.doSetGroupActive(this.groupPanel);
-            }
             this.contentContainer.renderPanel(panel, { asActive: true });
             return;
         }
-        this.doAddPanel(panel, options.index, skipSetPanelActive);
-        if (!skipSetPanelActive) {
+        if (!skipSetActive) {
             this.doSetActivePanel(panel);
         }
-        if (!skipSetGroupActive) {
-            this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
+        if (!options.skipSetGroupActive) {
+            this.accessor.doSetGroupActive(this.groupPanel);
+        }
+        if (!options.skipSetActive) {
+            this.updateContainer();
         }
-        this.updateContainer();
     }
-    removePanel(groupItemOrId) {
+    removePanel(groupItemOrId, options = {
+        skipSetActive: false,
+    }) {
         const id = typeof groupItemOrId === 'string'
             ? groupItemOrId
             : groupItemOrId.id;
@@ -4289,7 +4514,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         if (!panelToRemove) {
             throw new Error('invalid operation');
         }
-        return this._removePanel(panelToRemove);
+        return this._removePanel(panelToRemove, options);
     }
     closeAllPanels() {
         if (this.panels.length > 0) {
@@ -4315,12 +4540,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     updateActions(element) {
         this.tabsContainer.setRightActionsElement(element);
     }
-    setActive(isGroupActive, skipFocus = false, force = false) {
-        var _a, _b, _c, _d;
+    setActive(isGroupActive, force = false) {
         if (!force && this.isActive === isGroupActive) {
-            if (!skipFocus) {
-                (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
             return;
         }
         this._isGroupActive = isGroupActive;
@@ -4331,11 +4552,6 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             this.doSetActivePanel(this.panels[0]);
         }
         this.updateContainer();
-        if (isGroupActive) {
-            if (!skipFocus) {
-                (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-            }
-        }
     }
     layout(width, height) {
         var _a;
@@ -4346,17 +4562,22 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             this._activePanel.layout(this._width, this._height);
         }
     }
-    _removePanel(panel) {
+    _removePanel(panel, options) {
         const isActivePanel = this._activePanel === panel;
         this.doRemovePanel(panel);
         if (isActivePanel && this.panels.length > 0) {
             const nextPanel = this.mostRecentlyUsed[0];
-            this.openPanel(nextPanel);
+            this.openPanel(nextPanel, {
+                skipSetActive: options.skipSetActive,
+                skipSetGroupActive: options.skipSetActiveGroup,
+            });
         }
         if (this._activePanel && this.panels.length === 0) {
             this.doSetActivePanel(undefined);
         }
-        this.updateContainer();
+        if (!options.skipSetActive) {
+            this.updateContainer();
+        }
         return panel;
     }
     doRemovePanel(panel) {
@@ -4371,13 +4592,13 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         this._onDidRemovePanel.fire({ panel });
     }
-    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
+    doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
         this.tabsContainer.show();
         this.contentContainer.show();
         this.tabsContainer.openPanel(panel, index);
-        if (!skipSetActive) {
+        if (!options.skipSetActive) {
             this.contentContainer.openPanel(panel);
         }
         if (hasExistingPanel) {
@@ -4389,12 +4610,17 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
+        if (this._activePanel === panel) {
+            return;
+        }
         this._activePanel = panel;
         if (panel) {
             this.tabsContainer.setActivePanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
-            this._onDidActivePanelChange.fire({ panel });
+            this._onDidActivePanelChange.fire({
+                panel,
+            });
         }
     }
     updateMru(panel) {
@@ -4406,11 +4632,11 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     updateContainer() {
         var _a, _b;
         toggleClass(this.container, 'empty', this.isEmpty);
-        this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
+        this.panels.forEach((panel) => panel.runEvents());
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
             watermark.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 group: this.groupPanel,
             });
             this.watermark = watermark;
@@ -4443,10 +4669,32 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return false;
     }
-    handleDropEvent(event, position, index) {
+    handleDropEvent(type, event, position, index) {
         if (this.locked === 'no-drop-target') {
             return;
         }
+        function getKind() {
+            switch (type) {
+                case 'header':
+                    return typeof index === 'number' ? 'tab' : 'header_space';
+                case 'content':
+                    return 'content';
+            }
+        }
+        const panel = typeof index === 'number' ? this.panels[index] : undefined;
+        const willDropEvent = new DockviewWillDropEvent({
+            nativeEvent: event,
+            position,
+            panel,
+            getData: () => getPanelData(),
+            kind: getKind(),
+            group: this.groupPanel,
+            api: this._api,
+        });
+        this._onWillDrop.fire(willDropEvent);
+        if (willDropEvent.defaultPrevented) {
+            return;
+        }
         const data = getPanelData();
         if (data && data.viewId === this.accessor.id) {
             if (data.panelId === null) {
@@ -4479,12 +4727,14 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             });
         }
         else {
-            this._onDidDrop.fire({
+            this._onDidDrop.fire(new DockviewDidDropEvent({
                 nativeEvent: event,
                 position,
-                index,
+                panel,
                 getData: () => getPanelData(),
-            });
+                group: this.groupPanel,
+                api: this._api,
+            }));
         }
     }
     dispose() {
@@ -4492,6 +4742,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         super.dispose();
         (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
         (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.watermark = undefined;
         for (const panel of this.panels) {
             panel.dispose();
         }
@@ -4513,15 +4764,7 @@ class Resizable extends CompositeDisposable {
     constructor(parentElement, disableResizing = false) {
         super();
         this._disableResizing = disableResizing;
-        if (parentElement) {
-            this._element = parentElement;
-        }
-        else {
-            this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
-            this._element.className = 'dv-resizable-container';
-        }
+        this._element = parentElement;
         this.addDisposables(watchElementResize(this._element, (entry) => {
             if (this.isDisposed) {
                 /**
@@ -4609,25 +4852,38 @@ class BaseGrid extends Resizable {
     get activeGroup() {
         return this._activeGroup;
     }
+    get locked() {
+        return this.gridview.locked;
+    }
+    set locked(value) {
+        this.gridview.locked = value;
+    }
     constructor(options) {
-        super(options.parentElement, options.disableAutoResizing);
+        super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId$1.next();
         this._groups = new Map();
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
-        this._onDidRemoveGroup = new Emitter();
-        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
-        this._onDidAddGroup = new Emitter();
-        this.onDidAddGroup = this._onDidAddGroup.event;
-        this._onDidActiveGroupChange = new Emitter();
-        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._onDidRemove = new Emitter();
+        this.onDidRemove = this._onDidRemove.event;
+        this._onDidAdd = new Emitter();
+        this.onDidAdd = this._onDidAdd.event;
+        this._onDidActiveChange = new Emitter();
+        this.onDidActiveChange = this._onDidActiveChange.event;
         this._bufferOnDidLayoutChange = new TickDelayedEvent();
+        this.element.style.height = '100%';
+        this.element.style.width = '100%';
+        options.parentElement.appendChild(this.element);
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+        this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
-        this.addDisposables(this.gridview.onDidChange(() => {
+        this.addDisposables(Disposable.from(() => {
+            var _a;
+            (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+        }), this.gridview.onDidChange(() => {
             this._bufferOnDidLayoutChange.fire();
-        }), exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+        }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), this._bufferOnDidLayoutChange.onEvent(() => {
             this._onDidLayoutChange.fire();
@@ -4642,6 +4898,7 @@ class BaseGrid extends Resizable {
     }
     maximizeGroup(panel) {
         this.gridview.maximizeView(panel);
+        this.doSetGroupActive(panel);
     }
     isMaximizedGroup(panel) {
         return this.gridview.maximizedView() === panel;
@@ -4652,13 +4909,12 @@ class BaseGrid extends Resizable {
     hasMaximizedGroup() {
         return this.gridview.hasMaximizedView();
     }
-    get onDidMaxmizedGroupChange() {
-        return this.gridview.onDidMaxmizedNodeChange;
+    get onDidMaximizedGroupChange() {
+        return this.gridview.onDidMaximizedNodeChange;
     }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-        this._onDidAddGroup.fire(group);
-        this.doSetGroupActive(group);
+        this._onDidAdd.fire(group);
     }
     doRemoveGroup(group, options) {
         if (!this._groups.has(group.id)) {
@@ -4670,8 +4926,8 @@ class BaseGrid extends Resizable {
             item.disposable.dispose();
             item.value.dispose();
             this._groups.delete(group.id);
+            this._onDidRemove.fire(group);
         }
-        this._onDidRemoveGroup.fire(group);
         if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
             const groups = Array.from(this._groups.values());
             this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
@@ -4682,25 +4938,18 @@ class BaseGrid extends Resizable {
         var _a;
         return (_a = this._groups.get(id)) === null || _a === void 0 ? void 0 : _a.value;
     }
-    doSetGroupActive(group, skipFocus) {
-        var _a, _b, _c;
+    doSetGroupActive(group) {
         if (this._activeGroup === group) {
             return;
         }
         if (this._activeGroup) {
             this._activeGroup.setActive(false);
-            if (!skipFocus) {
-                (_b = (_a = this._activeGroup).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
         }
         if (group) {
             group.setActive(true);
-            if (!skipFocus) {
-                (_c = group.focus) === null || _c === void 0 ? void 0 : _c.call(group);
-            }
         }
         this._activeGroup = group;
-        this._onDidActiveGroupChange.fire(group);
+        this._onDidActiveChange.fire(group);
     }
     removeGroup(group) {
         this.doRemoveGroup(group);
@@ -4745,9 +4994,9 @@ class BaseGrid extends Resizable {
         this.gridview.layout(width, height);
     }
     dispose() {
-        this._onDidActiveGroupChange.dispose();
-        this._onDidAddGroup.dispose();
-        this._onDidRemoveGroup.dispose();
+        this._onDidActiveChange.dispose();
+        this._onDidAdd.dispose();
+        this._onDidRemove.dispose();
         this._onDidLayoutChange.dispose();
         for (const group of this.groups) {
             group.dispose();
@@ -4757,11 +5006,15 @@ class BaseGrid extends Resizable {
     }
 }
 
+class WillFocusEvent extends DockviewEvent {
+    constructor() {
+        super();
+    }
+}
 /**
  * A core api implementation that should be used across all panel-like objects
  */
 class PanelApiImpl extends CompositeDisposable {
-    //
     get isFocused() {
         return this._isFocused;
     }
@@ -4786,35 +5039,22 @@ class PanelApiImpl extends CompositeDisposable {
         this._width = 0;
         this._height = 0;
         this.panelUpdatesDisposable = new MutableDisposable();
-        this._onDidDimensionChange = new Emitter({
-            replay: true,
-        });
+        this._onDidDimensionChange = new Emitter();
         this.onDidDimensionsChange = this._onDidDimensionChange.event;
-        //
-        this._onDidChangeFocus = new Emitter({
-            replay: true,
-        });
+        this._onDidChangeFocus = new Emitter();
         this.onDidFocusChange = this._onDidChangeFocus.event;
         //
-        this._onFocusEvent = new Emitter();
-        this.onFocusEvent = this._onFocusEvent.event;
+        this._onWillFocus = new Emitter();
+        this.onWillFocus = this._onWillFocus.event;
         //
-        this._onDidVisibilityChange = new Emitter({
-            replay: true,
-        });
+        this._onDidVisibilityChange = new Emitter();
         this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-        //
-        this._onVisibilityChange = new Emitter();
-        this.onVisibilityChange = this._onVisibilityChange.event;
-        //
-        this._onDidActiveChange = new Emitter({
-            replay: true,
-        });
+        this._onWillVisibilityChange = new Emitter();
+        this.onWillVisibilityChange = this._onWillVisibilityChange.event;
+        this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
-        //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        //
         this._onUpdateParameters = new Emitter();
         this.onUpdateParameters = this._onUpdateParameters.event;
         this.addDisposables(this.onDidFocusChange((event) => {
@@ -4826,7 +5066,7 @@ class PanelApiImpl extends CompositeDisposable {
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters);
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onWillVisibilityChange, this._onUpdateParameters);
     }
     initialize(panel) {
         this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
@@ -4836,7 +5076,7 @@ class PanelApiImpl extends CompositeDisposable {
         });
     }
     setVisible(isVisible) {
-        this._onVisibilityChange.fire({ isVisible });
+        this._onWillVisibilityChange.fire({ isVisible });
     }
     setActive() {
         this._onActiveChange.fire();
@@ -4844,9 +5084,6 @@ class PanelApiImpl extends CompositeDisposable {
     updateParameters(parameters) {
         this._onUpdateParameters.fire(parameters);
     }
-    dispose() {
-        super.dispose();
-    }
 }
 
 class SplitviewPanelApiImpl extends PanelApiImpl {
@@ -4934,7 +5171,12 @@ class BasePanelView extends CompositeDisposable {
         }), focusTracker);
     }
     focus() {
-        this.api._onFocusEvent.fire();
+        const event = new WillFocusEvent();
+        this.api._onWillFocus.fire(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        this._element.focus();
     }
     layout(width, height) {
         this._width = width;
@@ -5052,7 +5294,11 @@ class PaneviewPanel extends BasePanelView {
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
         this.element.classList.add('pane');
-        this.addDisposables(this.api.onDidSizeChange((event) => {
+        this.addDisposables(this.api.onWillVisibilityChange((event) => {
+            const { isVisible } = event;
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
+        }), this.api.onDidSizeChange((event) => {
             this._onDidChange.fire({ size: event.size });
         }), addDisposableListener(this.element, 'mouseenter', (ev) => {
             this.api._onMouseEnter.fire(ev);
@@ -5263,9 +5509,7 @@ class GridviewPanelApiImpl extends PanelApiImpl {
         super(id);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
-        this._onDidConstraintsChange = new Emitter({
-            replay: true,
-        });
+        this._onDidConstraintsChange = new Emitter();
         this.onDidConstraintsChange = this._onDidConstraintsChange.event;
         this._onDidSizeChange = new Emitter();
         this.onDidSizeChange = this._onDidSizeChange.event;
@@ -5358,13 +5602,13 @@ class GridviewPanel extends BasePanelView {
             this._maximumHeight = options.maximumHeight;
         }
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-        this.addDisposables(this.api.onVisibilityChange((event) => {
+        this.addDisposables(this.api.onWillVisibilityChange((event) => {
             const { isVisible } = event;
             const { accessor } = this._params;
             accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
             const { accessor } = this._params;
-            accessor.setActive(this);
+            accessor.doSetGroupActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumWidth === 'number' ||
                 typeof event.minimumWidth === 'function') {
@@ -5447,6 +5691,17 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidLocationChange = this._onDidLocationChange.event;
         this.addDisposables(this._onDidLocationChange);
     }
+    close() {
+        if (!this._group) {
+            return;
+        }
+        return this.accessor.removeGroup(this._group);
+    }
+    getWindow() {
+        return this.location.type === 'popout'
+            ? this.location.getWindow()
+            : window;
+    }
     moveTo(options) {
         var _a, _b, _c;
         if (!this._group) {
@@ -5454,14 +5709,23 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         }
         const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
             direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+            skipSetActive: true,
+        });
+        this.accessor.moveGroupOrPanel({
+            from: { groupId: this._group.id },
+            to: {
+                group,
+                position: options.group
+                    ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
+                    : 'center',
+            },
         });
-        this.accessor.moveGroupOrPanel(group, this._group.id, undefined, options.group ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' : 'center');
     }
     maximize() {
         if (!this._group) {
             throw new Error(NOT_INITIALIZED_MESSAGE);
         }
-        if (this.location !== 'grid') {
+        if (this.location.type !== 'grid') {
             // only grid groups can be maximized
             return;
         }
@@ -5518,6 +5782,12 @@ class DockviewGroupPanel extends GridviewPanel {
         this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
     }
+    focus() {
+        if (!this.api.isActive) {
+            this.api.setActive();
+        }
+        super.focus();
+    }
     initialize() {
         this._model.initialize();
     }
@@ -5563,6 +5833,9 @@ function isGroupOptionsWithGroup(data) {
 }
 
 class DockviewPanelApiImpl extends GridviewPanelApiImpl {
+    get location() {
+        return this.group.api.location;
+    }
     get title() {
         return this.panel.title;
     }
@@ -5573,16 +5846,14 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.panel.renderer;
     }
     set group(value) {
-        const isOldGroupActive = this.isGroupActive;
-        this._group = value;
-        this._onDidGroupChange.fire();
-        if (this._group) {
-            this.disposable.value = this._group.api.onDidActiveChange(() => {
-                this._onDidActiveGroupChange.fire();
+        const oldGroup = this._group;
+        if (this._group !== value) {
+            this._group = value;
+            this._onDidGroupChange.fire({});
+            this.setupGroupEventListeners(oldGroup);
+            this._onDidLocationChange.fire({
+                location: this.group.api.location,
             });
-            if (this.isGroupActive !== isOldGroupActive) {
-                this._onDidActiveGroupChange.fire();
-            }
         }
     }
     get group() {
@@ -5600,14 +5871,27 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidGroupChange = this._onDidGroupChange.event;
         this._onDidRendererChange = new Emitter();
         this.onDidRendererChange = this._onDidRendererChange.event;
-        this.disposable = new MutableDisposable();
+        this._onDidLocationChange = new Emitter();
+        this.onDidLocationChange = this._onDidLocationChange.event;
+        this.groupEventsDisposable = new MutableDisposable();
         this.initialize(panel);
         this._group = group;
-        this.addDisposables(this.disposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
+        this.setupGroupEventListeners();
+        this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
+    }
+    getWindow() {
+        return this.group.api.getWindow();
     }
     moveTo(options) {
         var _a;
-        this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index);
+        this.accessor.moveGroupOrPanel({
+            from: { groupId: this._group.id, panelId: this.panel.id },
+            to: {
+                group: options.group,
+                position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                index: options.index,
+            },
+        });
     }
     setTitle(title) {
         this.panel.setTitle(title);
@@ -5627,6 +5911,35 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     exitMaximized() {
         this.group.api.exitMaximized();
     }
+    setupGroupEventListeners(previousGroup) {
+        var _a;
+        let _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
+        this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidVisibilityChange((event) => {
+            if (!event.isVisible && this.isVisible) {
+                this._onDidVisibilityChange.fire(event);
+            }
+            else if (event.isVisible &&
+                !this.isVisible &&
+                this.group.model.isPanelActive(this.panel)) {
+                this._onDidVisibilityChange.fire(event);
+            }
+        }), this.group.api.onDidLocationChange((event) => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            this._onDidLocationChange.fire(event);
+        }), this.group.api.onDidActiveChange(() => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            if (_trackGroupActive !== this.isGroupActive) {
+                _trackGroupActive = this.isGroupActive;
+                this._onDidActiveGroupChange.fire({
+                    isActive: this.isGroupActive,
+                });
+            }
+        }));
+    }
 }
 
 class DockviewPanel extends CompositeDisposable {
@@ -5668,7 +5981,14 @@ class DockviewPanel extends CompositeDisposable {
         this.setTitle(params.title);
     }
     focus() {
-        this.api._onFocusEvent.fire();
+        const event = new WillFocusEvent();
+        this.api._onWillFocus.fire(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (!this.api.isActive) {
+            this.api.setActive();
+        }
     }
     toJSON() {
         return {
@@ -5725,24 +6045,44 @@ class DockviewPanel extends CompositeDisposable {
             },
         });
     }
-    updateParentGroup(group, isGroupActive) {
+    updateParentGroup(group, options) {
         this._group = group;
-        this.api.group = group;
+        this.api.group = this._group;
         const isPanelVisible = this._group.model.isPanelActive(this);
-        this.api._onDidActiveChange.fire({
-            isActive: isGroupActive && isPanelVisible,
-        });
-        this.api._onDidVisibilityChange.fire({
-            isVisible: isPanelVisible,
-        });
-        this.view.updateParentGroup(this._group, this._group.model.isPanelActive(this));
+        const isActive = this.group.api.isActive && isPanelVisible;
+        if (!(options === null || options === void 0 ? void 0 : options.skipSetActive)) {
+            if (this.api.isActive !== isActive) {
+                this.api._onDidActiveChange.fire({
+                    isActive: this.group.api.isActive && isPanelVisible,
+                });
+            }
+        }
+        if (this.api.isVisible !== isPanelVisible) {
+            this.api._onDidVisibilityChange.fire({
+                isVisible: isPanelVisible,
+            });
+        }
     }
-    layout(width, height) {
-        // the obtain the correct dimensions of the content panel we must deduct the tab height
-        this.api._onDidDimensionChange.fire({
-            width,
-            height: height,
-        });
+    runEvents() {
+        const isPanelVisible = this._group.model.isPanelActive(this);
+        const isActive = this.group.api.isActive && isPanelVisible;
+        if (this.api.isActive !== isActive) {
+            this.api._onDidActiveChange.fire({
+                isActive: this.group.api.isActive && isPanelVisible,
+            });
+        }
+        if (this.api.isVisible !== isPanelVisible) {
+            this.api._onDidVisibilityChange.fire({
+                isVisible: isPanelVisible,
+            });
+        }
+    }
+    layout(width, height) {
+        // TODO: Can we somehow do height without header height or indicate what the header height is?
+        this.api._onDidDimensionChange.fire({
+            width,
+            height: height,
+        });
         this.view.layout(width, height);
     }
     dispose() {
@@ -5860,8 +6200,6 @@ class DockviewPanelModel {
         this.id = id;
         this.contentComponent = contentComponent;
         this.tabComponent = tabComponent;
-        this._group = null;
-        this._isPanelVisible = null;
         this._content = this.createContentComponent(this.id, contentComponent);
         this._tab = this.createTabComponent(this.id, tabComponent);
     }
@@ -5869,25 +6207,8 @@ class DockviewPanelModel {
         this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
         this.tab.init(params);
     }
-    updateParentGroup(group, isPanelVisible) {
-        if (group !== this._group) {
-            this._group = group;
-            if (this._content.onGroupChange) {
-                this._content.onGroupChange(group);
-            }
-            if (this._tab.onGroupChange) {
-                this._tab.onGroupChange(group);
-            }
-        }
-        if (isPanelVisible !== this._isPanelVisible) {
-            this._isPanelVisible = isPanelVisible;
-            if (this._content.onPanelVisibleChange) {
-                this._content.onPanelVisibleChange(isPanelVisible);
-            }
-            if (this._tab.onPanelVisibleChange) {
-                this._tab.onPanelVisibleChange(isPanelVisible);
-            }
-        }
+    updateParentGroup(_group, _isPanelVisible) {
+        // noop
     }
     layout(width, height) {
         var _a, _b;
@@ -6320,117 +6641,6 @@ class DockviewFloatingGroupPanel extends CompositeDisposable {
     }
 }
 
-class PopoutWindow extends CompositeDisposable {
-    constructor(id, className, options) {
-        super();
-        this.id = id;
-        this.className = className;
-        this.options = options;
-        this._onDidClose = new Emitter();
-        this.onDidClose = this._onDidClose.event;
-        this._window = null;
-        this.addDisposables(this._onDidClose, {
-            dispose: () => {
-                this.close();
-            },
-        });
-    }
-    dimensions() {
-        if (!this._window) {
-            return null;
-        }
-        const left = this._window.value.screenX;
-        const top = this._window.value.screenY;
-        const width = this._window.value.innerWidth;
-        const height = this._window.value.innerHeight;
-        return { top, left, width, height };
-    }
-    close() {
-        if (this._window) {
-            this._window.disposable.dispose();
-            this._window.value.close();
-            this._window = null;
-        }
-    }
-    open(content) {
-        if (this._window) {
-            throw new Error('instance of popout window is already open');
-        }
-        const url = `${this.options.url}`;
-        const features = Object.entries({
-            top: this.options.top,
-            left: this.options.left,
-            width: this.options.width,
-            height: this.options.height,
-        })
-            .map(([key, value]) => `${key}=${value}`)
-            .join(',');
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
-        const externalWindow = window.open(url, this.id, features);
-        if (!externalWindow) {
-            return;
-        }
-        const disposable = new CompositeDisposable();
-        this._window = { value: externalWindow, disposable };
-        const cleanUp = () => {
-            this._onDidClose.fire();
-            this._window = null;
-        };
-        // prevent any default content from loading
-        // externalWindow.document.body.replaceWith(document.createElement('div'));
-        disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
-            cleanUp();
-            this.close();
-        }));
-        externalWindow.addEventListener('load', () => {
-            const externalDocument = externalWindow.document;
-            externalDocument.title = document.title;
-            const div = document.createElement('div');
-            div.classList.add('dv-popout-window');
-            div.style.position = 'absolute';
-            div.style.width = '100%';
-            div.style.height = '100%';
-            div.style.top = '0px';
-            div.style.left = '0px';
-            div.classList.add(this.className);
-            div.appendChild(content);
-            externalDocument.body.replaceChildren(div);
-            externalDocument.body.classList.add(this.className);
-            addStyles(externalDocument, window.document.styleSheets);
-            externalWindow.addEventListener('beforeunload', () => {
-                // TODO: indicate external window is closing
-                cleanUp();
-            });
-        });
-    }
-}
-
-class DockviewPopoutGroupPanel extends CompositeDisposable {
-    constructor(id, group, options) {
-        var _a;
-        super();
-        this.id = id;
-        this.group = group;
-        this.options = options;
-        this.window = new PopoutWindow(id, (_a = options.className) !== null && _a !== void 0 ? _a : '', {
-            url: this.options.popoutUrl,
-            left: this.options.box.left,
-            top: this.options.box.top,
-            width: this.options.box.width,
-            height: this.options.box.height,
-        });
-        group.model.location = 'popout';
-        this.addDisposables(this.window, {
-            dispose: () => {
-                group.model.location = 'grid';
-            },
-        }, this.window.onDidClose(() => {
-            this.dispose();
-        }));
-        this.window.open(group.element);
-    }
-}
-
 const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
 
@@ -6444,11 +6654,13 @@ class OverlayRenderContainer extends CompositeDisposable {
         super();
         this.element = element;
         this.map = {};
+        this._disposed = false;
         this.addDisposables(Disposable.from(() => {
             for (const value of Object.values(this.map)) {
                 value.disposable.dispose();
                 value.destroy.dispose();
             }
+            this._disposed = true;
         }));
     }
     detatch(panel) {
@@ -6488,7 +6700,7 @@ class OverlayRenderContainer extends CompositeDisposable {
             focusContainer.style.top = `${box.top - box2.top}px`;
             focusContainer.style.width = `${box.width}px`;
             focusContainer.style.height = `${box.height}px`;
-            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location === 'floating');
+            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
         };
         const visibilityChanged = () => {
             if (panel.api.isVisible) {
@@ -6534,8 +6746,11 @@ class OverlayRenderContainer extends CompositeDisposable {
             resize();
         }));
         this.map[panel.api.id].destroy = Disposable.from(() => {
-            focusContainer.removeChild(panel.view.content.element);
-            this.element.removeChild(focusContainer);
+            var _a;
+            if (panel.view.content.element.parentElement === focusContainer) {
+                focusContainer.removeChild(panel.view.content.element);
+            }
+            (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
         });
         queueMicrotask(() => {
             if (this.isDisposed) {
@@ -6556,11 +6771,164 @@ class OverlayRenderContainer extends CompositeDisposable {
     }
 }
 
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+class PopoutWindow extends CompositeDisposable {
+    get window() {
+        var _a, _b;
+        return (_b = (_a = this._window) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    }
+    constructor(target, className, options) {
+        super();
+        this.target = target;
+        this.className = className;
+        this.options = options;
+        this._onWillClose = new Emitter();
+        this.onWillClose = this._onWillClose.event;
+        this._onDidClose = new Emitter();
+        this.onDidClose = this._onDidClose.event;
+        this._window = null;
+        this.addDisposables(this._onWillClose, this._onDidClose, {
+            dispose: () => {
+                this.close();
+            },
+        });
+    }
+    dimensions() {
+        if (!this._window) {
+            return null;
+        }
+        const left = this._window.value.screenX;
+        const top = this._window.value.screenY;
+        const width = this._window.value.innerWidth;
+        const height = this._window.value.innerHeight;
+        return { top, left, width, height };
+    }
+    close() {
+        var _a, _b;
+        if (this._window) {
+            this._onWillClose.fire();
+            (_b = (_a = this.options).onWillClose) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                id: this.target,
+                window: this._window.value,
+            });
+            this._window.disposable.dispose();
+            this._window.value.close();
+            this._window = null;
+            this._onDidClose.fire();
+        }
+    }
+    open() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._window) {
+                throw new Error('instance of popout window is already open');
+            }
+            const url = `${this.options.url}`;
+            const features = Object.entries({
+                top: this.options.top,
+                left: this.options.left,
+                width: this.options.width,
+                height: this.options.height,
+            })
+                .map(([key, value]) => `${key}=${value}`)
+                .join(',');
+            /**
+             * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
+             */
+            const externalWindow = window.open(url, this.target, features);
+            if (!externalWindow) {
+                /**
+                 * Popup blocked
+                 */
+                return null;
+            }
+            const disposable = new CompositeDisposable();
+            this._window = { value: externalWindow, disposable };
+            disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
+                /**
+                 * before the main window closes we should close this popup too
+                 * to be good citizens
+                 *
+                 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                 */
+                this.close();
+            }));
+            const container = this.createPopoutWindowContainer();
+            if (this.className) {
+                container.classList.add(this.className);
+            }
+            (_b = (_a = this.options).onDidOpen) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                id: this.target,
+                window: externalWindow,
+            });
+            return new Promise((resolve) => {
+                externalWindow.addEventListener('unload', (e) => {
+                    // if page fails to load before unloading
+                    // this.close();
+                });
+                externalWindow.addEventListener('load', () => {
+                    /**
+                     * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+                     */
+                    const externalDocument = externalWindow.document;
+                    externalDocument.title = document.title;
+                    externalDocument.body.appendChild(container);
+                    addStyles(externalDocument, window.document.styleSheets);
+                    /**
+                     * beforeunload must be registered after load for reasons I could not determine
+                     * otherwise the beforeunload event will not fire when the window is closed
+                     */
+                    addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                        /**
+                         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                         */
+                        this.close();
+                    });
+                    resolve(container);
+                });
+            });
+        });
+    }
+    createPopoutWindowContainer() {
+        const el = document.createElement('div');
+        el.classList.add('dv-popout-window');
+        el.id = 'dv-popout-window';
+        el.style.position = 'absolute';
+        el.style.width = '100%';
+        el.style.height = '100%';
+        el.style.top = '0px';
+        el.style.left = '0px';
+        return el;
+    }
+}
+
 const DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
 };
-function getTheme(element) {
+function moveGroupWithoutDestroying(options) {
+    const activePanel = options.from.activePanel;
+    const panels = [...options.from.panels].map((panel) => {
+        const removedPanel = options.from.model.removePanel(panel);
+        options.from.model.renderContainer.detatch(panel);
+        return removedPanel;
+    });
+    panels.forEach((panel) => {
+        options.to.model.openPanel(panel, {
+            skipSetActive: activePanel !== panel,
+            skipSetGroupActive: true,
+        });
+    });
+}
+function getDockviewTheme(element) {
     function toClassList(element) {
         const list = [];
         for (let i = 0; i < element.classList.length; i++) {
@@ -6611,6 +6979,7 @@ class DockviewComponent extends BaseGrid {
             styles: options.styles,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
+            locked: options.locked,
         });
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -6621,6 +6990,10 @@ class DockviewComponent extends BaseGrid {
         this.onWillDragGroup = this._onWillDragGroup.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
@@ -6629,15 +7002,36 @@ class DockviewComponent extends BaseGrid {
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._onDidMovePanel = new Emitter();
         this._floatingGroups = [];
         this._popoutGroups = [];
+        this._ignoreEvents = 0;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._moving = false;
         const gready = document.createElement('div');
         gready.className = 'dv-overlay-render-container';
         this.gridview.element.appendChild(gready);
         this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+            if (!this._moving) {
+                this._onDidAddGroup.fire(event);
+            }
+        }), this.onDidRemove((event) => {
+            if (!this._moving) {
+                this._onDidRemoveGroup.fire(event);
+            }
+        }), this.onDidActiveChange((event) => {
+            if (!this._moving) {
+                this._onDidActiveGroupChange.fire(event);
+            }
+        }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
         }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -6648,7 +7042,7 @@ class DockviewComponent extends BaseGrid {
             }
             // iterate over a copy of the array since .dispose() mutates the original array
             for (const group of [...this._popoutGroups]) {
-                group.dispose();
+                group.disposable.dispose();
             }
         }));
         this._options = options;
@@ -6694,7 +7088,7 @@ class DockviewComponent extends BaseGrid {
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: exports.DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: getPanelData,
                     });
                 }
@@ -6703,88 +7097,259 @@ class DockviewComponent extends BaseGrid {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        this.addDisposables(this._rootDropTarget.onDrop((event) => {
+        this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+            if (this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), this._rootDropTarget.onDrop((event) => {
             var _a;
+            const willDropEvent = new DockviewWillDropEvent({
+                nativeEvent: event.nativeEvent,
+                position: event.position,
+                panel: undefined,
+                api: this._api,
+                group: undefined,
+                getData: getPanelData,
+                kind: 'edge',
+            });
+            this._onWillDrop.fire(willDropEvent);
+            if (willDropEvent.defaultPrevented) {
+                return;
+            }
             const data = getPanelData();
             if (data) {
-                this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined, 'center');
+                this.moveGroupOrPanel({
+                    from: {
+                        groupId: data.groupId,
+                        panelId: (_a = data.panelId) !== null && _a !== void 0 ? _a : undefined,
+                    },
+                    to: {
+                        group: this.orthogonalize(event.position),
+                        position: 'center',
+                    },
+                });
             }
             else {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
+                this._onDidDrop.fire(new DockviewDidDropEvent({
+                    nativeEvent: event.nativeEvent,
+                    position: event.position,
+                    panel: undefined,
+                    api: this._api,
+                    group: undefined,
+                    getData: getPanelData,
+                }));
             }
         }), this._rootDropTarget);
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
-    addPopoutGroup(item, options) {
-        var _a;
-        let group;
-        let box = options === null || options === void 0 ? void 0 : options.position;
-        if (item instanceof DockviewPanel) {
-            group = this.createGroup();
-            this.removePanel(item, {
-                removeEmptyGroup: true,
-                skipDispose: true,
-            });
-            group.model.openPanel(item);
-            if (!box) {
-                box = this.element.getBoundingClientRect();
+    addPopoutGroup(itemToPopout, options) {
+        var _a, _b, _c;
+        if (itemToPopout instanceof DockviewPanel &&
+            itemToPopout.group.size === 1) {
+            return this.addPopoutGroup(itemToPopout.group);
+        }
+        const theme = getDockviewTheme(this.gridview.element);
+        const element = this.element;
+        function getBox() {
+            if (options === null || options === void 0 ? void 0 : options.position) {
+                return options.position;
+            }
+            if (itemToPopout instanceof DockviewGroupPanel) {
+                return itemToPopout.element.getBoundingClientRect();
+            }
+            if (itemToPopout.group) {
+                return itemToPopout.group.element.getBoundingClientRect();
+            }
+            return element.getBoundingClientRect();
+        }
+        const box = getBox();
+        const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
+        if (itemToPopout.api.location.type === 'grid') {
+            itemToPopout.api.setVisible(false);
+        }
+        const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
+        theme !== null && theme !== void 0 ? theme : '', {
+            url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+            left: window.screenX + box.left,
+            top: window.screenY + box.top,
+            width: box.width,
+            height: box.height,
+            onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
+            onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+        });
+        const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
+            popoutWindowDisposable.dispose();
+        }));
+        return _window
+            .open()
+            .then((popoutContainer) => {
+            var _a;
+            if (_window.isDisposed) {
+                return;
             }
-        }
-        else {
-            group = item;
-            if (!box) {
-                box = group.element.getBoundingClientRect();
+            if (popoutContainer === null) {
+                popoutWindowDisposable.dispose();
+                return;
             }
-            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
-                options.skipRemoveGroup;
-            if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
-            }
-        }
-        const theme = getTheme(this.gridview.element);
-        const popoutWindow = new DockviewPopoutGroupPanel(`${this.id}-${group.id}`, // globally unique within dockview
-        group, {
-            className: theme !== null && theme !== void 0 ? theme : '',
-            popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
-            box: {
-                left: window.screenX + box.left,
-                top: window.screenY + box.top,
-                width: box.width,
-                height: box.height,
-            },
+            const gready = document.createElement('div');
+            gready.className = 'dv-overlay-render-container';
+            const overlayRenderContainer = new OverlayRenderContainer(gready);
+            const referenceGroup = itemToPopout instanceof DockviewPanel
+                ? itemToPopout.group
+                : itemToPopout;
+            const referenceLocation = itemToPopout.api.location.type;
+            const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
+            group.model.renderContainer = overlayRenderContainer;
+            if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
+                this._onDidAddGroup.fire(group);
+            }
+            if (itemToPopout instanceof DockviewPanel) {
+                this.movingLock(() => {
+                    const panel = referenceGroup.model.removePanel(itemToPopout);
+                    group.model.openPanel(panel);
+                });
+            }
+            else {
+                this.movingLock(() => moveGroupWithoutDestroying({
+                    from: referenceGroup,
+                    to: group,
+                }));
+                switch (referenceLocation) {
+                    case 'grid':
+                        referenceGroup.api.setVisible(false);
+                        break;
+                    case 'floating':
+                    case 'popout':
+                        this.removeGroup(referenceGroup);
+                        break;
+                }
+            }
+            popoutContainer.classList.add('dv-dockview');
+            popoutContainer.style.overflow = 'hidden';
+            popoutContainer.appendChild(gready);
+            popoutContainer.appendChild(group.element);
+            group.model.location = {
+                type: 'popout',
+                getWindow: () => _window.window,
+            };
+            this.doSetGroupAndPanelActive(group);
+            popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
+                var _a;
+                if (event.isActive) {
+                    (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }), group.api.onWillFocus(() => {
+                var _a;
+                (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
+            }));
+            let returnedGroup;
+            const value = {
+                window: _window,
+                popoutGroup: group,
+                referenceGroup: this.getPanel(referenceGroup.id)
+                    ? referenceGroup.id
+                    : undefined,
+                disposable: {
+                    dispose: () => {
+                        popoutWindowDisposable.dispose();
+                        return returnedGroup;
+                    },
+                },
+            };
+            popoutWindowDisposable.addDisposables(
+            /**
+             * ResizeObserver seems slow here, I do not know why but we don't need it
+             * since we can reply on the window resize event as we will occupy the full
+             * window dimensions
+             */
+            addDisposableWindowListener(_window.window, 'resize', () => {
+                group.layout(window.innerWidth, window.innerHeight);
+            }), overlayRenderContainer, Disposable.from(() => {
+                if (this.getPanel(referenceGroup.id)) {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: group,
+                        to: referenceGroup,
+                    }));
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
+                    }
+                    if (this.getPanel(group.id)) {
+                        this.doRemoveGroup(group, {
+                            skipPopoutAssociated: true,
+                        });
+                    }
+                }
+                else {
+                    if (this.getPanel(group.id)) {
+                        const removedGroup = this.doRemoveGroup(group, {
+                            skipDispose: true,
+                            skipActive: true,
+                        });
+                        removedGroup.model.renderContainer =
+                            this.overlayRenderContainer;
+                        removedGroup.model.location = { type: 'grid' };
+                        returnedGroup = removedGroup;
+                    }
+                }
+            }));
+            this._popoutGroups.push(value);
+            this.updateWatermark();
+        })
+            .catch((err) => {
+            console.error(err);
         });
-        popoutWindow.addDisposables({
-            dispose: () => {
-                remove(this._popoutGroups, popoutWindow);
-                this.updateWatermark();
-            },
-        }, popoutWindow.window.onDidClose(() => {
-            this.doAddGroup(group, [0]);
-        }));
-        this._popoutGroups.push(popoutWindow);
-        this.updateWatermark();
     }
     addFloatingGroup(item, coord, options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         let group;
         if (item instanceof DockviewPanel) {
             group = this.createGroup();
-            this.removePanel(item, {
+            this._onDidAddGroup.fire(group);
+            this.movingLock(() => this.removePanel(item, {
                 removeEmptyGroup: true,
                 skipDispose: true,
-            });
-            group.model.openPanel(item);
+                skipSetActiveGroup: true,
+            }));
+            group.model.openPanel(item, { skipSetGroupActive: true });
         }
         else {
             group = item;
+            const popoutReferenceGroupId = (_a = this._popoutGroups.find((_) => _.popoutGroup === group)) === null || _a === void 0 ? void 0 : _a.referenceGroup;
+            const popoutReferenceGroup = popoutReferenceGroupId
+                ? this.getPanel(popoutReferenceGroupId)
+                : undefined;
             const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
                 options.skipRemoveGroup;
             if (!skip) {
-                this.doRemoveGroup(item, { skipDispose: true });
+                if (popoutReferenceGroup) {
+                    this.movingLock(() => moveGroupWithoutDestroying({
+                        from: item,
+                        to: popoutReferenceGroup,
+                    }));
+                    this.doRemoveGroup(item, {
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: true,
+                    });
+                    this.doRemoveGroup(popoutReferenceGroup, {
+                        skipDispose: true,
+                    });
+                    group = popoutReferenceGroup;
+                }
+                else {
+                    this.doRemoveGroup(item, {
+                        skipDispose: true,
+                        skipPopoutReturn: true,
+                        skipPopoutAssociated: !!popoutReferenceGroup,
+                    });
+                }
             }
         }
-        group.model.location = 'floating';
+        group.model.location = { type: 'floating' };
         const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
             ? Math.max(coord.x, 0)
             : DEFAULT_FLOATING_GROUP_POSITION.left;
@@ -6794,16 +7359,16 @@ class DockviewComponent extends BaseGrid {
         const overlay = new Overlay({
             container: this.gridview.element,
             content: group.element,
-            height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
-            width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+            height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
+            width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
             left: overlayLeft,
             top: overlayTop,
             minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
             minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
         const el = group.element.querySelector('.void-container');
         if (!el) {
@@ -6834,12 +7399,15 @@ class DockviewComponent extends BaseGrid {
         }), {
             dispose: () => {
                 disposable.dispose();
-                group.model.location = 'grid';
+                group.model.location = { type: 'grid' };
                 remove(this._floatingGroups, floatingGroupPanel);
                 this.updateWatermark();
             },
         });
         this._floatingGroups.push(floatingGroupPanel);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
+            this.doSetGroupAndPanelActive(group);
+        }
         this.updateWatermark();
     }
     orthogonalize(position) {
@@ -6929,8 +7497,8 @@ class DockviewComponent extends BaseGrid {
         return this.panels.find((panel) => panel.id === id);
     }
     setActivePanel(panel) {
-        this.doSetGroupActive(panel.group);
         panel.group.model.openPanel(panel);
+        this.doSetGroupAndPanelActive(panel.group);
     }
     moveToNext(options = {}) {
         var _a;
@@ -6991,7 +7559,8 @@ class DockviewComponent extends BaseGrid {
         });
         const popoutGroups = this._popoutGroups.map((group) => {
             return {
-                data: group.group.toJSON(),
+                data: group.popoutGroup.toJSON(),
+                gridReferenceGroup: group.referenceGroup,
                 position: group.window.dimensions(),
             };
         });
@@ -7009,7 +7578,7 @@ class DockviewComponent extends BaseGrid {
         return result;
     }
     fromJSON(data) {
-        var _a, _b;
+        var _a, _b, _c;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -7048,7 +7617,7 @@ class DockviewComponent extends BaseGrid {
                     const isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
                     group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
+                        skipSetActive: !isActive,
                         skipSetGroupActive: true,
                     });
                 }
@@ -7078,11 +7647,16 @@ class DockviewComponent extends BaseGrid {
             }
             const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
             for (const serializedPopoutGroup of serializedPopoutGroups) {
-                const { data, position } = serializedPopoutGroup;
+                const { data, position, gridReferenceGroup } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
-                this.addPopoutGroup(group, {
+                this.addPopoutGroup((_c = (gridReferenceGroup
+                    ? this.getPanel(gridReferenceGroup)
+                    : undefined)) !== null && _c !== void 0 ? _c : group, {
                     skipRemoveGroup: true,
                     position: position !== null && position !== void 0 ? position : undefined,
+                    overridePopoutGroup: gridReferenceGroup
+                        ? group
+                        : undefined,
                 });
             }
             for (const floatingGroup of this._floatingGroups) {
@@ -7129,12 +7703,13 @@ class DockviewComponent extends BaseGrid {
              */
             throw err;
         }
+        this.updateWatermark();
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
         const groups = Array.from(this._groups.values()).map((_) => _.value);
         const hasActiveGroup = !!this.activeGroup;
-        const hasActivePanel = !!this.activePanel;
+        !!this.activePanel;
         for (const group of groups) {
             // remove the group will automatically remove the panels
             this.removeGroup(group, { skipActive: true });
@@ -7142,9 +7717,6 @@ class DockviewComponent extends BaseGrid {
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
         }
-        if (hasActivePanel) {
-            this._onDidActivePanelChange.fire(undefined);
-        }
         this.gridview.clear();
     }
     closeAllGroups() {
@@ -7185,6 +7757,7 @@ class DockviewComponent extends BaseGrid {
                 const group = this.orthogonalize(directionToPosition(options.position.direction));
                 const panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
                 return panel;
             }
         }
@@ -7196,6 +7769,7 @@ class DockviewComponent extends BaseGrid {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
             if (options.floating) {
                 const group = this.createGroup();
+                this._onDidAddGroup.fire(group);
                 const o = typeof options.floating === 'object' &&
                     options.floating !== null
                     ? options.floating
@@ -7203,16 +7777,16 @@ class DockviewComponent extends BaseGrid {
                 this.addFloatingGroup(group, o, {
                     inDragMode: false,
                     skipRemoveGroup: true,
+                    skipActiveGroup: true,
                 });
-                this._onDidAddGroup.fire(group);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
             }
-            else if (referenceGroup.api.location === 'floating' ||
+            else if (referenceGroup.api.location.type === 'floating' ||
                 target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(referenceGroup);
             }
             else {
                 const location = getGridLocation(referenceGroup.element);
@@ -7220,10 +7794,12 @@ class DockviewComponent extends BaseGrid {
                 const group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel);
+                this.doSetGroupAndPanelActive(group);
             }
         }
         else if (options.floating) {
             const group = this.createGroup();
+            this._onDidAddGroup.fire(group);
             const o = typeof options.floating === 'object' &&
                 options.floating !== null
                 ? options.floating
@@ -7231,16 +7807,16 @@ class DockviewComponent extends BaseGrid {
             this.addFloatingGroup(group, o, {
                 inDragMode: false,
                 skipRemoveGroup: true,
+                skipActiveGroup: true,
             });
-            this._onDidAddGroup.fire(group);
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
-            this.doSetGroupAndPanelActive(group);
         }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
             group.model.openPanel(panel);
+            this.doSetGroupAndPanelActive(group);
         }
         return panel;
     }
@@ -7252,13 +7828,15 @@ class DockviewComponent extends BaseGrid {
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
-        group.model.removePanel(panel);
+        group.model.removePanel(panel, {
+            skipSetActiveGroup: options.skipSetActiveGroup,
+        });
         if (!options.skipDispose) {
-            this.overlayRenderContainer.detatch(panel);
+            panel.group.model.renderContainer.detatch(panel);
             panel.dispose();
         }
         if (group.size === 0 && options.removeEmptyGroup) {
-            this.removeGroup(group);
+            this.removeGroup(group, { skipActive: options.skipSetActiveGroup });
         }
     }
     createWatermarkComponent() {
@@ -7271,7 +7849,7 @@ class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
+        if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -7317,36 +7895,42 @@ class DockviewComponent extends BaseGrid {
             }
             else {
                 const group = this.orthogonalize(directionToPosition(options.direction));
+                if (!options.skipSetActive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
                 return group;
             }
             const target = toTarget(options.direction || 'within');
             const location = getGridLocation(referenceGroup.element);
             const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             this.doAddGroup(group, relativeLocation);
+            if (!options.skipSetActive) {
+                this.doSetGroupAndPanelActive(group);
+            }
             return group;
         }
         else {
             this.doAddGroup(group);
+            this.doSetGroupAndPanelActive(group);
             return group;
         }
     }
     removeGroup(group, options) {
+        this.doRemoveGroup(group, options);
+    }
+    doRemoveGroup(group, options) {
         var _a;
         const panels = [...group.panels]; // reassign since group panels will mutate
-        for (const panel of panels) {
-            this.removePanel(panel, {
-                removeEmptyGroup: false,
-                skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
-            });
+        if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+            for (const panel of panels) {
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                    skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
+                });
+            }
         }
         const activePanel = this.activePanel;
-        this.doRemoveGroup(group, options);
-        if (this.activePanel !== activePanel) {
-            this._onDidActivePanelChange.fire(this.activePanel);
-        }
-    }
-    doRemoveGroup(group, options) {
-        if (group.api.location === 'floating') {
+        if (group.api.location.type === 'floating') {
             const floatingGroup = this._floatingGroups.find((_) => _.group === group);
             if (floatingGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -7358,60 +7942,124 @@ class DockviewComponent extends BaseGrid {
                 floatingGroup.dispose();
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                 }
                 return floatingGroup.group;
             }
             throw new Error('failed to find floating group');
         }
-        if (group.api.location === 'popout') {
-            const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+        if (group.api.location.type === 'popout') {
+            const selectedGroup = this._popoutGroups.find((_) => _.popoutGroup === group);
             if (selectedGroup) {
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                    selectedGroup.group.dispose();
+                    if (!(options === null || options === void 0 ? void 0 : options.skipPopoutAssociated)) {
+                        const refGroup = selectedGroup.referenceGroup
+                            ? this.getPanel(selectedGroup.referenceGroup)
+                            : undefined;
+                        if (refGroup) {
+                            this.removeGroup(refGroup);
+                        }
+                    }
+                    selectedGroup.popoutGroup.dispose();
                     this._groups.delete(group.id);
                     this._onDidRemoveGroup.fire(group);
                 }
-                selectedGroup.dispose();
+                const removedGroup = selectedGroup.disposable.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
+                    this.doAddGroup(removedGroup, [0]);
+                    this.doSetGroupAndPanelActive(removedGroup);
+                }
                 if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
                     const groups = Array.from(this._groups.values());
-                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                    this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : undefined);
                 }
-                return selectedGroup.group;
+                this.updateWatermark();
+                return selectedGroup.popoutGroup;
             }
             throw new Error('failed to find popout group');
         }
-        return super.doRemoveGroup(group, options);
+        const re = super.doRemoveGroup(group, options);
+        if (!(options === null || options === void 0 ? void 0 : options.skipActive)) {
+            if (this.activePanel !== activePanel) {
+                this._onDidActivePanelChange.fire(this.activePanel);
+            }
+        }
+        return re;
     }
-    moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
-        var _a, _b, _c;
+    movingLock(func) {
+        const isMoving = this._moving;
+        try {
+            this._moving = true;
+            return func();
+        }
+        finally {
+            this._moving = isMoving;
+        }
+    }
+    moveGroupOrPanel(options) {
+        var _a;
+        const destinationGroup = options.to.group;
+        const sourceGroupId = options.from.groupId;
+        const sourceItemId = options.from.panelId;
+        const destinationTarget = options.to.position;
+        const destinationIndex = options.to.index;
         const sourceGroup = sourceGroupId
             ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
+        if (!sourceGroup) {
+            throw new Error(`Failed to find group id ${sourceGroupId}`);
+        }
         if (sourceItemId === undefined) {
-            if (sourceGroup) {
-                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
-            }
+            /**
+             * Moving an entire group into another group
+             */
+            this.moveGroup({
+                from: { group: sourceGroup },
+                to: {
+                    group: destinationGroup,
+                    position: destinationTarget,
+                },
+            });
             return;
         }
         if (!destinationTarget || destinationTarget === 'center') {
-            const groupItem = (_b = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _b !== void 0 ? _b : this.panels.find((panel) => panel.id === sourceItemId);
-            if (!groupItem) {
+            /**
+             * Dropping a panel within another group
+             */
+            const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                skipSetActive: false,
+                skipSetActiveGroup: true,
+            }));
+            if (!removedPanel) {
                 throw new Error(`No panel with id ${sourceItemId}`);
             }
-            if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                this.doRemoveGroup(sourceGroup);
+            if (sourceGroup.model.size === 0) {
+                // remove the group and do not set a new group as active
+                this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
-            destinationGroup.model.openPanel(groupItem, {
+            this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
                 index: destinationIndex,
+                skipSetGroupActive: true,
+            }));
+            this.doSetGroupAndPanelActive(destinationGroup);
+            this._onDidMovePanel.fire({
+                panel: removedPanel,
             });
         }
         else {
+            /**
+             * Dropping a panel to the extremities of a group which will place that panel
+             * into an adjacent group
+             */
             const referenceLocation = getGridLocation(destinationGroup.element);
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-            if (sourceGroup && sourceGroup.size < 2) {
+            if (sourceGroup.size < 2) {
+                /**
+                 * If we are moving from a group which only has one panel left we will consider
+                 * moving the group itself rather than moving the panel into a newly created group
+                 */
                 const [targetParentLocation, to] = tail(targetLocation);
-                if (sourceGroup.api.location === 'grid') {
+                if (sourceGroup.api.location.type === 'grid') {
                     const sourceLocation = getGridLocation(sourceGroup.element);
                     const [sourceParentLocation, from] = tail(sourceLocation);
                     if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
@@ -7419,77 +8067,122 @@ class DockviewComponent extends BaseGrid {
                         // if a group has one tab - we are essentially moving the 'group'
                         // which is equivalent to swapping two views in this case
                         this.gridview.moveView(sourceParentLocation, from, to);
+                        return;
                     }
                 }
                 // source group will become empty so delete the group
-                const targetGroup = this.doRemoveGroup(sourceGroup, {
+                const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                     skipActive: true,
                     skipDispose: true,
-                });
+                }));
                 // after deleting the group we need to re-evaulate the ref location
                 const updatedReferenceLocation = getGridLocation(destinationGroup.element);
                 const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                this.doAddGroup(targetGroup, location);
+                this.movingLock(() => this.doAddGroup(targetGroup, location));
+                this.doSetGroupAndPanelActive(targetGroup);
             }
             else {
-                const groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find((panel) => panel.id === sourceItemId);
-                if (!groupItem) {
+                /**
+                 * The group we are removing from has many panels, we need to remove the panels we are moving,
+                 * create a new group, add the panels to that new group and add the new group in an appropiate position
+                 */
+                const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                    skipSetActive: false,
+                    skipSetActiveGroup: true,
+                }));
+                if (!removedPanel) {
                     throw new Error(`No panel with id ${sourceItemId}`);
                 }
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 const group = this.createGroupAtLocation(dropLocation);
-                group.model.openPanel(groupItem);
+                this.movingLock(() => group.model.openPanel(removedPanel, {
+                    skipSetGroupActive: true,
+                }));
+                this.doSetGroupAndPanelActive(group);
             }
         }
     }
-    moveGroup(sourceGroup, referenceGroup, target) {
-        if (sourceGroup) {
-            if (!target || target === 'center') {
-                const activePanel = sourceGroup.activePanel;
-                const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
-                if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                    this.doRemoveGroup(sourceGroup);
-                }
+    moveGroup(options) {
+        const from = options.from.group;
+        const to = options.to.group;
+        const target = options.to.position;
+        if (target === 'center') {
+            const activePanel = from.activePanel;
+            const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
+                skipSetActive: true,
+            })));
+            if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
+                this.doRemoveGroup(from, { skipActive: true });
+            }
+            this.movingLock(() => {
                 for (const panel of panels) {
-                    referenceGroup.model.openPanel(panel, {
-                        skipSetPanelActive: panel !== activePanel,
+                    to.model.openPanel(panel, {
+                        skipSetActive: panel !== activePanel,
+                        skipSetGroupActive: true,
                     });
                 }
-            }
-            else {
-                switch (sourceGroup.api.location) {
-                    case 'grid':
-                        this.gridview.removeView(getGridLocation(sourceGroup.element));
-                        break;
-                    case 'floating': {
-                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
-                        if (!selectedFloatingGroup) {
-                            throw new Error('failed to find floating group');
-                        }
-                        selectedFloatingGroup.dispose();
-                        break;
+            });
+            this.doSetGroupAndPanelActive(to);
+            panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel });
+            });
+        }
+        else {
+            switch (from.api.location.type) {
+                case 'grid':
+                    this.gridview.removeView(getGridLocation(from.element));
+                    break;
+                case 'floating': {
+                    const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
+                    if (!selectedFloatingGroup) {
+                        throw new Error('failed to find floating group');
                     }
-                    case 'popout': {
-                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
-                        if (!selectedPopoutGroup) {
-                            throw new Error('failed to find popout group');
-                        }
-                        selectedPopoutGroup.dispose();
+                    selectedFloatingGroup.dispose();
+                    break;
+                }
+                case 'popout': {
+                    const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
+                    if (!selectedPopoutGroup) {
+                        throw new Error('failed to find popout group');
                     }
+                    selectedPopoutGroup.disposable.dispose();
                 }
-                const referenceLocation = getGridLocation(referenceGroup.element);
-                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
             }
+            const referenceLocation = getGridLocation(to.element);
+            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
+            from.panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel });
+            });
         }
     }
-    doSetGroupAndPanelActive(group, skipFocus) {
-        var _a, _b;
+    doSetGroupActive(group) {
+        super.doSetGroupActive(group);
+        const activePanel = this.activePanel;
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
+        }
+    }
+    doSetGroupAndPanelActive(group) {
+        super.doSetGroupActive(group);
         const activePanel = this.activePanel;
-        super.doSetGroupActive(group, skipFocus);
-        if (((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel) !== activePanel) {
-            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+        if (group &&
+            this.hasMaximizedGroup() &&
+            !this.isMaximizedGroup(group)) {
+            this.exitMaximizedGroup();
+        }
+        if (!this._moving &&
+            activePanel !== this._onDidActivePanelChange.value) {
+            this._onDidActivePanelChange.fire(activePanel);
+        }
+    }
+    getNextGroupId() {
+        let id = this.nextGroupId.next();
+        while (this._groups.has(id)) {
+            id = this.nextGroupId.next();
         }
+        return id;
     }
     createGroup(options) {
         if (!options) {
@@ -7507,7 +8200,7 @@ class DockviewComponent extends BaseGrid {
             }
         }
         const view = new DockviewGroupPanel(this, id, options);
-        view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: this });
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
                 this._onWillDragPanel.fire(event);
@@ -7515,20 +8208,48 @@ class DockviewComponent extends BaseGrid {
                 this._onWillDragGroup.fire(event);
             }), view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
-                this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                this.moveGroupOrPanel({
+                    from: { groupId: groupId, panelId: itemId },
+                    to: {
+                        group: view,
+                        position: target,
+                        index,
+                    },
+                });
             }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+                this._onDidDrop.fire(event);
+            }), view.model.onWillDrop((event) => {
+                this._onWillDrop.fire(event);
+            }), view.model.onWillShowOverlay((event) => {
+                if (this.options.disableDnd) {
+                    event.preventDefault();
+                    return;
+                }
+                this._onWillShowOverlay.fire(event);
             }), view.model.onDidAddPanel((event) => {
+                if (this._moving) {
+                    return;
+                }
                 this._onDidAddPanel.fire(event.panel);
             }), view.model.onDidRemovePanel((event) => {
+                if (this._moving) {
+                    return;
+                }
                 this._onDidRemovePanel.fire(event.panel);
             }), view.model.onDidActivePanelChange((event) => {
-                this._onDidActivePanelChange.fire(event.panel);
+                if (this._moving) {
+                    return;
+                }
+                if (event.panel !== this.activePanel) {
+                    return;
+                }
+                if (this._onDidActivePanelChange.value !== event.panel) {
+                    this._onDidActivePanelChange.fire(event.panel);
+                }
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
-        // TODO: must be called after the above listeners have been setup,
-        // not an ideal pattern
+        // TODO: must be called after the above listeners have been setup, not an ideal pattern
         view.initialize();
         return view;
     }
@@ -7581,7 +8302,20 @@ class GridviewComponent extends BaseGrid {
         });
         this._onDidLayoutfromJSON = new Emitter();
         this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidRemoveGroup = new Emitter();
+        this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+        this._onDidAddGroup = new Emitter();
+        this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidActiveGroupChange = new Emitter();
+        this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._options = options;
+        this.addDisposables(this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+            this._onDidAddGroup.fire(event);
+        }), this.onDidRemove((event) => {
+            this._onDidRemoveGroup.fire(event);
+        }), this.onDidActiveChange((event) => {
+            this._onDidActiveGroupChange.fire(event);
+        }));
         if (!this.options.components) {
             this.options.components = {};
         }
@@ -7756,6 +8490,7 @@ class GridviewComponent extends BaseGrid {
         });
         this.registerPanel(view);
         this.doAddGroup(view, relativeLocation, options.size);
+        this.doSetGroupActive(view);
         return view;
     }
     registerPanel(panel) {
@@ -7897,19 +8632,19 @@ class SplitviewComponent extends Resizable {
         const index = this.panels.indexOf(panel);
         this.splitview.setViewVisible(index, visible);
     }
-    setActive(view, skipFocus) {
-        this._activePanel = view;
+    setActive(panel, skipFocus) {
+        this._activePanel = panel;
         this.panels
-            .filter((v) => v !== view)
+            .filter((v) => v !== panel)
             .forEach((v) => {
             v.api._onDidActiveChange.fire({ isActive: false });
             if (!skipFocus) {
                 v.focus();
             }
         });
-        view.api._onDidActiveChange.fire({ isActive: true });
+        panel.api._onDidActiveChange.fire({ isActive: true });
         if (!skipFocus) {
-            view.focus();
+            panel.focus();
         }
     }
     removePanel(panel, sizing) {
@@ -8208,6 +8943,10 @@ class PaneviewComponent extends Resizable {
         });
         this.addDisposables(this._disposable);
     }
+    setVisible(panel, visible) {
+        const index = this.panels.indexOf(panel);
+        this.paneview.setViewVisible(index, visible);
+    }
     focus() {
         //noop
     }
@@ -8254,6 +8993,7 @@ class PaneviewComponent extends Resizable {
             isExpanded: options.isExpanded,
             title: options.title,
             containerApi: new PaneviewApi(this),
+            accessor: this,
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
@@ -8353,6 +9093,7 @@ class PaneviewComponent extends Resizable {
                             title: data.title,
                             isExpanded: !!view.expanded,
                             containerApi: new PaneviewApi(this),
+                            accessor: this,
                         });
                         panel.orientation = this.paneview.orientation;
                     });
@@ -8441,7 +9182,7 @@ class SplitviewPanel extends BasePanelView {
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this.api.initialize(this);
-        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+        this.addDisposables(this._onDidChange, this.api.onWillVisibilityChange((event) => {
             const { isVisible } = event;
             const { accessor } = this._params;
             accessor.setVisible(this, isVisible);
@@ -8566,13 +9307,13 @@ class ReactPart {
         if (this.disposed) {
             throw new Error('invalid operation: resource is already disposed');
         }
-        if (typeof this.component !== 'function') {
+        if (!isReactComponent(this.component)) {
             /**
              * we know this isn't a React.FunctionComponent so throw an error here.
-             * if we do not intercept this the React library will throw a very obsure error
-             * for the same reason, at least at this point we will emit a sensible stacktrace.
+             * if we do not intercept then React library will throw a very obsure error
+             * for the same reason... at least at this point we will emit a sensible stacktrace.
              */
-            throw new Error('Invalid Operation. dockview only supports React Functional Components.');
+            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
         }
         const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
             component: this
@@ -8624,9 +9365,13 @@ const usePortalsLifecycle = () => {
     }, []);
     return [portals, addPortal];
 };
-// it does the job...
-function isReactElement(element) {
-    return !!(element === null || element === void 0 ? void 0 : element.type);
+function isReactComponent(component) {
+    /**
+     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
+     * so for now we will check in a rather crude fashion...
+     */
+    return (typeof component === 'function' /** Functional Componnts */ ||
+        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
 }
 
 class ReactPanelContentPart {
@@ -8886,6 +9631,8 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             defaultRenderer: props.defaultRenderer,
             debug: props.debug,
             rootOverlayModel: props.rootOverlayModel,
+            locked: props.locked,
+            disableDnd: props.disableDnd,
         });
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
@@ -8897,6 +9644,20 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             dockview.dispose();
         };
     }, []);
+    React__namespace.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.locked = !!props.locked;
+    }, [props.locked]);
+    React__namespace.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            disableDnd: props.disableDnd,
+        });
+    }, [props.disableDnd]);
     React__namespace.useEffect(() => {
         if (!dockviewRef.current) {
             return () => {
@@ -8912,6 +9673,21 @@ const DockviewReact = React__namespace.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
+    React__namespace.useEffect(() => {
+        if (!dockviewRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const disposable = dockviewRef.current.onWillDrop((event) => {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
     React__namespace.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -9154,7 +9930,9 @@ class ReactGridPanelView extends GridviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
             api: this.api,
-            containerApi: new GridviewApi(this._params.accessor),
+            // TODO: fix casting hack
+            containerApi: new GridviewApi(this._params
+                .accessor),
         });
     }
 }
@@ -9337,12 +10115,14 @@ exports.DockviewApi = DockviewApi;
 exports.DockviewComponent = DockviewComponent;
 exports.DockviewCompositeDisposable = CompositeDisposable;
 exports.DockviewDefaultTab = DockviewDefaultTab;
+exports.DockviewDidDropEvent = DockviewDidDropEvent;
 exports.DockviewEmitter = Emitter;
 exports.DockviewGroupPanel = DockviewGroupPanel;
 exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
 exports.DockviewMutableDisposable = MutableDisposable;
 exports.DockviewPanel = DockviewPanel;
 exports.DockviewReact = DockviewReact;
+exports.DockviewWillDropEvent = DockviewWillDropEvent;
 exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
 exports.Gridview = Gridview;
 exports.GridviewApi = GridviewApi;
@@ -9366,6 +10146,7 @@ exports.SplitviewComponent = SplitviewComponent;
 exports.SplitviewPanel = SplitviewPanel;
 exports.SplitviewReact = SplitviewReact;
 exports.Tab = Tab;
+exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
 exports.createComponent = createComponent;
 exports.directionToPosition = directionToPosition;
 exports.getDirectionOrientation = getDirectionOrientation;
@@ -9380,7 +10161,7 @@ exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;
 exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
 exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
 exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
-exports.isReactElement = isReactElement;
+exports.isReactComponent = isReactComponent;
 exports.orthogonal = orthogonal;
 exports.positionToDirection = positionToDirection;
 exports.toTarget = toTarget;