dockview 1.9.2 → 1.10.1

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.2
+ * @version 1.10.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -119,6 +119,17 @@ var Event;
         };
     };
 })(Event || (Event = {}));
+class DockviewEvent {
+    constructor() {
+        this._defaultPrevented = false;
+    }
+    get defaultPrevented() {
+        return this._defaultPrevented;
+    }
+    preventDefault() {
+        this._defaultPrevented = true;
+    }
+}
 class LeakageMonitor {
     constructor() {
         this.events = new Map();
@@ -162,6 +173,9 @@ class Emitter {
         }
         Emitter.ENABLE_TRACKING = isEnabled;
     }
+    get value() {
+        return this._last;
+    }
     constructor(options) {
         this.options = options;
         this._listeners = [];
@@ -284,8 +298,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 {
@@ -769,6 +787,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 = [];
@@ -779,6 +804,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();
@@ -1453,6 +1479,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();
@@ -1706,7 +1735,13 @@ class BranchNode extends CompositeDisposable {
         }
         return 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;
@@ -1751,6 +1786,7 @@ class BranchNode extends CompositeDisposable {
                 styles,
             });
         }
+        this.disabled = disabled;
         this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire({});
         }));
@@ -1884,7 +1920,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];
@@ -2020,31 +2056,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 {
@@ -2053,18 +2115,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);
@@ -2073,13 +2138,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();
         }
@@ -2094,14 +2159,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;
@@ -2122,8 +2187,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);
@@ -2156,7 +2221,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
@@ -2224,15 +2289,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);
@@ -2283,7 +2349,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);
@@ -2911,13 +2977,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;
@@ -3045,17 +3134,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);
     }
 }
 
@@ -3109,6 +3198,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':
@@ -3161,6 +3262,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, {
@@ -3189,6 +3292,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();
@@ -3231,7 +3347,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);
@@ -3284,25 +3400,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);
@@ -3370,14 +3505,6 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     return 'center';
 }
 
-var DockviewDropTargets;
-(function (DockviewDropTargets) {
-    DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-    DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-    DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-    DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-})(DockviewDropTargets || (DockviewDropTargets = {}));
-
 class ContentContainer extends CompositeDisposable {
     get element() {
         return this._element;
@@ -3405,7 +3532,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) {
@@ -3423,7 +3550,7 @@ class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         this.addDisposables(this.dropTarget);
@@ -3448,7 +3575,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);
@@ -3460,7 +3587,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,
                 });
@@ -3491,9 +3618,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;
@@ -3604,7 +3732,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) {
@@ -3619,9 +3747,10 @@ class Tab extends CompositeDisposable {
                     }
                     return this.panel.id !== data.panelId;
                 }
-                return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
+                return this.group.model.canDisplayOverlay(event, position, 'tab');
             },
         });
+        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
             this._onDragStart.fire(event);
         }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
@@ -3629,9 +3758,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);
@@ -3678,7 +3807,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;
@@ -3730,7 +3859,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;
@@ -3744,14 +3873,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, 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);
     }
 }
 
@@ -3839,19 +3969,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');
@@ -3866,7 +3988,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,
@@ -3876,11 +4006,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();
@@ -3943,9 +4077,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) {
@@ -3959,20 +4093,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);
@@ -3990,6 +4124,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');
@@ -4035,7 +4223,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',
@@ -4071,7 +4259,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;
@@ -4082,6 +4270,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();
@@ -4092,46 +4284,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);
@@ -4141,7 +4356,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);
@@ -4151,7 +4366,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);
@@ -4231,35 +4446,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;
@@ -4267,7 +4492,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) {
@@ -4293,12 +4518,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;
@@ -4309,11 +4530,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;
@@ -4324,17 +4540,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) {
@@ -4349,13 +4570,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) {
@@ -4367,12 +4588,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) {
@@ -4384,11 +4610,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;
@@ -4421,10 +4647,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) {
@@ -4457,12 +4705,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() {
@@ -4470,6 +4720,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();
         }
@@ -4491,15 +4742,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) {
                 /**
@@ -4587,25 +4830,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();
-        }), Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+        }), Event.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), this._bufferOnDidLayoutChange.onEvent(() => {
             this._onDidLayoutChange.fire();
@@ -4620,6 +4876,7 @@ class BaseGrid extends Resizable {
     }
     maximizeGroup(panel) {
         this.gridview.maximizeView(panel);
+        this.doSetGroupActive(panel);
     }
     isMaximizedGroup(panel) {
         return this.gridview.maximizedView() === panel;
@@ -4630,13 +4887,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 : Sizing.Distribute, location);
-        this._onDidAddGroup.fire(group);
-        this.doSetGroupActive(group);
+        this._onDidAdd.fire(group);
     }
     doRemoveGroup(group, options) {
         if (!this._groups.has(group.id)) {
@@ -4648,8 +4904,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);
@@ -4660,25 +4916,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);
@@ -4723,9 +4972,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();
@@ -4735,11 +4984,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;
     }
@@ -4764,35 +5017,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) => {
@@ -4804,7 +5044,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) => {
@@ -4814,7 +5054,7 @@ class PanelApiImpl extends CompositeDisposable {
         });
     }
     setVisible(isVisible) {
-        this._onVisibilityChange.fire({ isVisible });
+        this._onWillVisibilityChange.fire({ isVisible });
     }
     setActive() {
         this._onActiveChange.fire();
@@ -4822,9 +5062,6 @@ class PanelApiImpl extends CompositeDisposable {
     updateParameters(parameters) {
         this._onUpdateParameters.fire(parameters);
     }
-    dispose() {
-        super.dispose();
-    }
 }
 
 class SplitviewPanelApiImpl extends PanelApiImpl {
@@ -4912,7 +5149,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;
@@ -5030,7 +5272,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);
@@ -5241,9 +5487,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;
@@ -5336,13 +5580,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') {
@@ -5425,6 +5669,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) {
@@ -5432,14 +5687,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;
         }
@@ -5496,6 +5760,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();
     }
@@ -5541,6 +5811,9 @@ function isGroupOptionsWithGroup(data) {
 }
 
 class DockviewPanelApiImpl extends GridviewPanelApiImpl {
+    get location() {
+        return this.group.api.location;
+    }
     get title() {
         return this.panel.title;
     }
@@ -5551,16 +5824,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() {
@@ -5578,14 +5849,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);
@@ -5605,6 +5889,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 {
@@ -5646,7 +5959,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 {
@@ -5703,24 +6023,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() {
@@ -5838,8 +6178,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);
     }
@@ -5847,25 +6185,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;
@@ -6298,117 +6619,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 };
 
@@ -6422,11 +6632,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) {
@@ -6466,7 +6678,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) {
@@ -6512,8 +6724,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) {
@@ -6534,11 +6749,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++) {
@@ -6589,6 +6957,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);
@@ -6599,6 +6968,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();
@@ -6607,15 +6980,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, Event.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);
+            }
+        }), Event.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -6626,7 +7020,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;
@@ -6672,7 +7066,7 @@ class DockviewComponent extends BaseGrid {
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: getPanelData,
                     });
                 }
@@ -6681,88 +7075,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;
@@ -6772,16 +7337,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) {
@@ -6812,12 +7377,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) {
@@ -6907,8 +7475,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;
@@ -6969,7 +7537,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(),
             };
         });
@@ -6987,7 +7556,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');
@@ -7026,7 +7595,7 @@ class DockviewComponent extends BaseGrid {
                     const isActive = typeof activeView === 'string' &&
                         activeView === panel.id;
                     group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
+                        skipSetActive: !isActive,
                         skipSetGroupActive: true,
                     });
                 }
@@ -7056,11 +7625,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) {
@@ -7107,12 +7681,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 });
@@ -7120,9 +7695,6 @@ class DockviewComponent extends BaseGrid {
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
         }
-        if (hasActivePanel) {
-            this._onDidActivePanelChange.fire(undefined);
-        }
         this.gridview.clear();
     }
     closeAllGroups() {
@@ -7163,6 +7735,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;
             }
         }
@@ -7174,6 +7747,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
@@ -7181,16 +7755,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);
@@ -7198,10 +7772,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
@@ -7209,16 +7785,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;
     }
@@ -7230,13 +7806,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() {
@@ -7249,7 +7827,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({
@@ -7295,36 +7873,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)) {
@@ -7336,60 +7920,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)) {
@@ -7397,77 +8045,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, Sizing.Distribute, dropLocation);
             }
+            const referenceLocation = getGridLocation(to.element);
+            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            this.gridview.addView(from, 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) {
@@ -7485,7 +8178,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);
@@ -7493,20 +8186,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;
     }
@@ -7559,7 +8280,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 = {};
         }
@@ -7734,6 +8468,7 @@ class GridviewComponent extends BaseGrid {
         });
         this.registerPanel(view);
         this.doAddGroup(view, relativeLocation, options.size);
+        this.doSetGroupActive(view);
         return view;
     }
     registerPanel(panel) {
@@ -7875,19 +8610,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) {
@@ -8186,6 +8921,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
     }
@@ -8232,6 +8971,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;
@@ -8331,6 +9071,7 @@ class PaneviewComponent extends Resizable {
                             title: data.title,
                             isExpanded: !!view.expanded,
                             containerApi: new PaneviewApi(this),
+                            accessor: this,
                         });
                         panel.orientation = this.paneview.orientation;
                     });
@@ -8419,7 +9160,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);
@@ -8544,13 +9285,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.createElement(React.forwardRef(ReactComponentBridge), {
             component: this
@@ -8602,9 +9343,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 {
@@ -8864,6 +9609,8 @@ const DockviewReact = React.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);
@@ -8875,6 +9622,20 @@ const DockviewReact = React.forwardRef((props, ref) => {
             dockview.dispose();
         };
     }, []);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.locked = !!props.locked;
+    }, [props.locked]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            disableDnd: props.disableDnd,
+        });
+    }, [props.disableDnd]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return () => {
@@ -8890,6 +9651,21 @@ const DockviewReact = React.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const disposable = dockviewRef.current.onWillDrop((event) => {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -9132,7 +9908,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),
         });
     }
 }
@@ -9307,5 +10085,5 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 });
 PaneviewReact.displayName = 'PaneviewComponent';
 
-export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDropTargets, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactElement, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
+export { BaseGrid, ContentContainer, DefaultDockviewDeserialzier, DefaultTab, DockviewApi, DockviewComponent, CompositeDisposable as DockviewCompositeDisposable, DockviewDefaultTab, DockviewDidDropEvent, Emitter as DockviewEmitter, Event as DockviewEvent, DockviewGroupPanel, DockviewGroupPanelModel, MutableDisposable as DockviewMutableDisposable, DockviewPanel, DockviewReact, DockviewWillDropEvent, DraggablePaneviewPanel, Gridview, GridviewApi, GridviewComponent, GridviewPanel, GridviewReact, LayoutPriority, LocalSelectionTransfer, Orientation, PaneFramework, PaneTransfer, PanelTransfer, Paneview, PaneviewApi, PaneviewComponent, PaneviewPanel, PaneviewReact, ReactPart, ReactPartContext, SashState, Sizing, Splitview, SplitviewApi, SplitviewComponent, SplitviewPanel, SplitviewReact, Tab, WillShowOverlayLocationEvent, createComponent, directionToPosition, getDirectionOrientation, getGridLocation, getLocationOrientation, getPaneData, getPanelData, getRelativeLocation, indexInParent, isGridBranchNode, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, isReactComponent, orthogonal, positionToDirection, toTarget, usePortalsLifecycle };
 //# sourceMappingURL=dockview.esm.js.map