dockview 1.9.2 → 1.10.1

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.2
+ * @version 1.10.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -108,6 +108,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         };
     })(exports.DockviewEvent || (exports.DockviewEvent = {}));
+    class DockviewEvent {
+        constructor() {
+            this._defaultPrevented = false;
+        }
+        get defaultPrevented() {
+            return this._defaultPrevented;
+        }
+        preventDefault() {
+            this._defaultPrevented = true;
+        }
+    }
     class LeakageMonitor {
         constructor() {
             this.events = new Map();
@@ -151,6 +162,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             Emitter.ENABLE_TRACKING = isEnabled;
         }
+        get value() {
+            return this._last;
+        }
         constructor(options) {
             this.options = options;
             this._listeners = [];
@@ -273,8 +287,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 {
@@ -758,6 +776,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 = [];
@@ -768,6 +793,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -1442,6 +1468,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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();
@@ -1695,7 +1724,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return exports.LayoutPriority.Normal;
         }
-        constructor(orientation, proportionalLayout, styles, size, orthogonalSize, childDescriptors) {
+        get disabled() {
+            return this.splitview.disabled;
+        }
+        set disabled(value) {
+            this.splitview.disabled = value;
+        }
+        constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
             super();
             this.orientation = orientation;
             this.proportionalLayout = proportionalLayout;
@@ -1740,6 +1775,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     styles,
                 });
             }
+            this.disabled = disabled;
             this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire({});
             }));
@@ -1873,7 +1909,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
     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];
@@ -2009,31 +2045,57 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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 {
@@ -2042,18 +2104,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             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);
@@ -2062,13 +2127,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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();
             }
@@ -2083,14 +2148,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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;
@@ -2111,8 +2176,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     };
                 });
                 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);
@@ -2145,7 +2210,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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
@@ -2213,15 +2278,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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);
@@ -2272,7 +2338,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 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);
@@ -2900,13 +2966,36 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -3034,17 +3123,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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);
         }
     }
 
@@ -3098,6 +3187,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    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':
@@ -3150,6 +3251,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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, {
@@ -3178,6 +3281,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         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();
@@ -3220,7 +3336,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 },
             });
-            this.addDisposables(this._onDrop, this.dnd);
+            this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
         }
         setTargetZones(acceptedTargetZones) {
             this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
@@ -3273,25 +3389,44 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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);
@@ -3359,14 +3494,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         return 'center';
     }
 
-    exports.DockviewDropTargets = void 0;
-    (function (DockviewDropTargets) {
-        DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
-        DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
-        DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-        DockviewDropTargets[DockviewDropTargets["Edge"] = 3] = "Edge";
-    })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
-
     class ContentContainer extends CompositeDisposable {
         get element() {
             return this._element;
@@ -3394,7 +3521,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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) {
@@ -3412,7 +3539,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             data.groupId === this.group.id;
                         return !groupHasOnePanelAndIsActiveDragElement;
                     }
-                    return this.group.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                    return this.group.canDisplayOverlay(event, position, 'content');
                 },
             });
             this.addDisposables(this.dropTarget);
@@ -3437,7 +3564,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -3449,7 +3576,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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,
                     });
@@ -3480,9 +3607,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             // 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;
@@ -3593,7 +3721,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -3608,9 +3736,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         }
                         return this.panel.id !== data.panelId;
                     }
-                    return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
+                    return this.group.model.canDisplayOverlay(event, position, 'tab');
                 },
             });
+            this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
             this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
                 this._onDragStart.fire(event);
             }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
@@ -3618,9 +3747,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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);
@@ -3667,7 +3796,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }, true));
         }
         isCancelled(_event) {
-            if (this.group.api.location === 'floating' && !_event.shiftKey) {
+            if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
                 return true;
             }
             return false;
@@ -3719,7 +3848,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -3733,14 +3862,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         // don't show the overlay if the tab being dragged is the last panel of this group
                         return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                     }
-                    return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
+                    return group.model.canDisplayOverlay(event, position, 'header_space');
                 },
             });
+            this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
             this.addDisposables(handler, handler.onDragStart((event) => {
                 this._onDragStart.fire(event);
-            }), this.voidDropTarget.onDrop((event) => {
+            }), this.dropTraget.onDrop((event) => {
                 this._onDrop.fire(event);
-            }), this.voidDropTarget);
+            }), this.dropTraget);
         }
     }
 
@@ -3828,19 +3958,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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');
@@ -3855,7 +3977,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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,
@@ -3865,11 +3995,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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();
@@ -3932,9 +4066,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -3948,20 +4082,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }, { 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);
@@ -3979,6 +4113,60 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    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');
@@ -4024,7 +4212,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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',
@@ -4060,7 +4248,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -4071,6 +4259,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -4081,46 +4273,69 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -4130,7 +4345,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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);
@@ -4140,7 +4355,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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);
@@ -4220,35 +4435,45 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //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;
@@ -4256,7 +4481,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!panelToRemove) {
                 throw new Error('invalid operation');
             }
-            return this._removePanel(panelToRemove);
+            return this._removePanel(panelToRemove, options);
         }
         closeAllPanels() {
             if (this.panels.length > 0) {
@@ -4282,12 +4507,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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;
@@ -4298,11 +4519,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -4313,17 +4529,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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) {
@@ -4338,13 +4559,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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) {
@@ -4356,12 +4577,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -4373,11 +4599,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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;
@@ -4410,10 +4636,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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) {
@@ -4446,12 +4694,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 });
             }
             else {
-                this._onDidDrop.fire({
+                this._onDidDrop.fire(new DockviewDidDropEvent({
                     nativeEvent: event,
                     position,
-                    index,
+                    panel,
                     getData: () => getPanelData(),
-                });
+                    group: this.groupPanel,
+                    api: this._api,
+                }));
             }
         }
         dispose() {
@@ -4459,6 +4709,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
             }
@@ -4480,15 +4731,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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) {
                     /**
@@ -4576,25 +4819,38 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get activeGroup() {
             return this._activeGroup;
         }
+        get locked() {
+            return this.gridview.locked;
+        }
+        set locked(value) {
+            this.gridview.locked = value;
+        }
         constructor(options) {
-            super(options.parentElement, options.disableAutoResizing);
+            super(document.createElement('div'), options.disableAutoResizing);
             this._id = nextLayoutId$1.next();
             this._groups = new Map();
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
-            this._onDidRemoveGroup = new Emitter();
-            this.onDidRemoveGroup = this._onDidRemoveGroup.event;
-            this._onDidAddGroup = new Emitter();
-            this.onDidAddGroup = this._onDidAddGroup.event;
-            this._onDidActiveGroupChange = new Emitter();
-            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._onDidRemove = new Emitter();
+            this.onDidRemove = this._onDidRemove.event;
+            this._onDidAdd = new Emitter();
+            this.onDidAdd = this._onDidAdd.event;
+            this._onDidActiveChange = new Emitter();
+            this.onDidActiveChange = this._onDidActiveChange.event;
             this._bufferOnDidLayoutChange = new TickDelayedEvent();
+            this.element.style.height = '100%';
+            this.element.style.width = '100%';
+            options.parentElement.appendChild(this.element);
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+            this.gridview.locked = !!options.locked;
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
-            this.addDisposables(this.gridview.onDidChange(() => {
+            this.addDisposables(Disposable.from(() => {
+                var _a;
+                (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
+            }), this.gridview.onDidChange(() => {
                 this._bufferOnDidLayoutChange.fire();
-            }), exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+            }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }), this._bufferOnDidLayoutChange.onEvent(() => {
                 this._onDidLayoutChange.fire();
@@ -4609,6 +4865,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         maximizeGroup(panel) {
             this.gridview.maximizeView(panel);
+            this.doSetGroupActive(panel);
         }
         isMaximizedGroup(panel) {
             return this.gridview.maximizedView() === panel;
@@ -4619,13 +4876,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         hasMaximizedGroup() {
             return this.gridview.hasMaximizedView();
         }
-        get onDidMaxmizedGroupChange() {
-            return this.gridview.onDidMaxmizedNodeChange;
+        get onDidMaximizedGroupChange() {
+            return this.gridview.onDidMaximizedNodeChange;
         }
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
-            this._onDidAddGroup.fire(group);
-            this.doSetGroupActive(group);
+            this._onDidAdd.fire(group);
         }
         doRemoveGroup(group, options) {
             if (!this._groups.has(group.id)) {
@@ -4637,8 +4893,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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);
@@ -4649,25 +4905,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -4712,9 +4961,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -4724,11 +4973,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    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;
         }
@@ -4753,35 +5006,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) => {
@@ -4793,7 +5033,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), 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) => {
@@ -4803,7 +5043,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
         }
         setVisible(isVisible) {
-            this._onVisibilityChange.fire({ isVisible });
+            this._onWillVisibilityChange.fire({ isVisible });
         }
         setActive() {
             this._onActiveChange.fire();
@@ -4811,9 +5051,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         updateParameters(parameters) {
             this._onUpdateParameters.fire(parameters);
         }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class SplitviewPanelApiImpl extends PanelApiImpl {
@@ -4901,7 +5138,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), 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;
@@ -5019,7 +5261,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -5230,9 +5476,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -5325,13 +5569,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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') {
@@ -5414,6 +5658,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -5421,14 +5676,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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;
             }
@@ -5485,6 +5749,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
         }
@@ -5530,6 +5800,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     class DockviewPanelApiImpl extends GridviewPanelApiImpl {
+        get location() {
+            return this.group.api.location;
+        }
         get title() {
             return this.panel.title;
         }
@@ -5540,16 +5813,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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() {
@@ -5567,14 +5838,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -5594,6 +5878,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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 {
@@ -5635,7 +5948,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 {
@@ -5692,24 +6012,44 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             });
         }
-        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() {
@@ -5827,8 +6167,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
         }
@@ -5836,25 +6174,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -6287,117 +6608,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    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 };
 
@@ -6411,11 +6621,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -6455,7 +6667,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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) {
@@ -6501,8 +6713,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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) {
@@ -6523,11 +6738,164 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    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++) {
@@ -6578,6 +6946,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 styles: options.styles,
                 parentElement: options.parentElement,
                 disableAutoResizing: options.disableAutoResizing,
+                locked: options.locked,
             });
             this.nextGroupId = sequentialNumberGenerator();
             this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -6588,6 +6957,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -6596,15 +6969,36 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this._onDidMovePanel = new Emitter();
             this._floatingGroups = [];
             this._popoutGroups = [];
+            this._ignoreEvents = 0;
+            this._onDidRemoveGroup = new Emitter();
+            this.onDidRemoveGroup = this._onDidRemoveGroup.event;
+            this._onDidAddGroup = new Emitter();
+            this.onDidAddGroup = this._onDidAddGroup.event;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._moving = false;
             const gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
             this.gridview.element.appendChild(gready);
             this.overlayRenderContainer = new OverlayRenderContainer(gready);
             toggleClass(this.gridview.element, 'dv-dockview', true);
             toggleClass(this.element, 'dv-debug', !!options.debug);
-            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this.onDidAdd((event) => {
+                if (!this._moving) {
+                    this._onDidAddGroup.fire(event);
+                }
+            }), this.onDidRemove((event) => {
+                if (!this._moving) {
+                    this._onDidRemoveGroup.fire(event);
+                }
+            }), this.onDidActiveChange((event) => {
+                if (!this._moving) {
+                    this._onDidActiveGroupChange.fire(event);
+                }
+            }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
@@ -6615,7 +7009,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 // 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;
@@ -6661,7 +7055,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         return this.options.showDndOverlay({
                             nativeEvent: event,
                             position: position,
-                            target: exports.DockviewDropTargets.Edge,
+                            target: 'edge',
                             getData: getPanelData,
                         });
                     }
@@ -6670,88 +7064,259 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -6761,16 +7326,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -6801,12 +7366,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), {
                 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) {
@@ -6896,8 +7464,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -6958,7 +7526,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             const popoutGroups = this._popoutGroups.map((group) => {
                 return {
-                    data: group.group.toJSON(),
+                    data: group.popoutGroup.toJSON(),
+                    gridReferenceGroup: group.referenceGroup,
                     position: group.window.dimensions(),
                 };
             });
@@ -6976,7 +7545,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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');
@@ -7015,7 +7584,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         const isActive = typeof activeView === 'string' &&
                             activeView === panel.id;
                         group.model.openPanel(panel, {
-                            skipSetPanelActive: !isActive,
+                            skipSetActive: !isActive,
                             skipSetGroupActive: true,
                         });
                     }
@@ -7045,11 +7614,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 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) {
@@ -7096,12 +7670,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                  */
                 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 });
@@ -7109,9 +7684,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (hasActiveGroup) {
                 this.doSetGroupAndPanelActive(undefined);
             }
-            if (hasActivePanel) {
-                this._onDidActivePanelChange.fire(undefined);
-            }
             this.gridview.clear();
         }
         closeAllGroups() {
@@ -7152,6 +7724,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const group = this.orthogonalize(directionToPosition(options.position.direction));
                     const panel = this.createPanel(options, group);
                     group.model.openPanel(panel);
+                    this.doSetGroupAndPanelActive(group);
                     return panel;
                 }
             }
@@ -7163,6 +7736,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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
@@ -7170,16 +7744,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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);
@@ -7187,10 +7761,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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
@@ -7198,16 +7774,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
         }
@@ -7219,13 +7795,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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() {
@@ -7238,7 +7816,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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({
@@ -7284,36 +7862,42 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 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)) {
@@ -7325,60 +7909,124 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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)) {
@@ -7386,77 +8034,122 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             // if a group has one tab - we are essentially moving the 'group'
                             // which is equivalent to swapping two views in this case
                             this.gridview.moveView(sourceParentLocation, from, to);
+                            return;
                         }
                     }
                     // source group will become empty so delete the group
-                    const targetGroup = this.doRemoveGroup(sourceGroup, {
+                    const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                         skipActive: true,
                         skipDispose: true,
-                    });
+                    }));
                     // after deleting the group we need to re-evaulate the ref location
                     const updatedReferenceLocation = getGridLocation(destinationGroup.element);
                     const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                    this.doAddGroup(targetGroup, location);
+                    this.movingLock(() => this.doAddGroup(targetGroup, location));
+                    this.doSetGroupAndPanelActive(targetGroup);
                 }
                 else {
-                    const groupItem = (_c = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) !== null && _c !== void 0 ? _c : this.panels.find((panel) => panel.id === sourceItemId);
-                    if (!groupItem) {
+                    /**
+                     * The group we are removing from has many panels, we need to remove the panels we are moving,
+                     * create a new group, add the panels to that new group and add the new group in an appropiate position
+                     */
+                    const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
+                        skipSetActive: false,
+                        skipSetActiveGroup: true,
+                    }));
+                    if (!removedPanel) {
                         throw new Error(`No panel with id ${sourceItemId}`);
                     }
                     const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                     const group = this.createGroupAtLocation(dropLocation);
-                    group.model.openPanel(groupItem);
+                    this.movingLock(() => group.model.openPanel(removedPanel, {
+                        skipSetGroupActive: true,
+                    }));
+                    this.doSetGroupAndPanelActive(group);
                 }
             }
         }
-        moveGroup(sourceGroup, referenceGroup, target) {
-            if (sourceGroup) {
-                if (!target || target === 'center') {
-                    const activePanel = sourceGroup.activePanel;
-                    const panels = [...sourceGroup.panels].map((p) => sourceGroup.model.removePanel(p.id));
-                    if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
-                        this.doRemoveGroup(sourceGroup);
-                    }
+        moveGroup(options) {
+            const from = options.from.group;
+            const to = options.to.group;
+            const target = options.to.position;
+            if (target === 'center') {
+                const activePanel = from.activePanel;
+                const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
+                    skipSetActive: true,
+                })));
+                if ((from === null || from === void 0 ? void 0 : from.model.size) === 0) {
+                    this.doRemoveGroup(from, { skipActive: true });
+                }
+                this.movingLock(() => {
                     for (const panel of panels) {
-                        referenceGroup.model.openPanel(panel, {
-                            skipSetPanelActive: panel !== activePanel,
+                        to.model.openPanel(panel, {
+                            skipSetActive: panel !== activePanel,
+                            skipSetGroupActive: true,
                         });
                     }
-                }
-                else {
-                    switch (sourceGroup.api.location) {
-                        case 'grid':
-                            this.gridview.removeView(getGridLocation(sourceGroup.element));
-                            break;
-                        case 'floating': {
-                            const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
-                            if (!selectedFloatingGroup) {
-                                throw new Error('failed to find floating group');
-                            }
-                            selectedFloatingGroup.dispose();
-                            break;
+                });
+                this.doSetGroupAndPanelActive(to);
+                panels.forEach((panel) => {
+                    this._onDidMovePanel.fire({ panel });
+                });
+            }
+            else {
+                switch (from.api.location.type) {
+                    case 'grid':
+                        this.gridview.removeView(getGridLocation(from.element));
+                        break;
+                    case 'floating': {
+                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === from);
+                        if (!selectedFloatingGroup) {
+                            throw new Error('failed to find floating group');
                         }
-                        case 'popout': {
-                            const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
-                            if (!selectedPopoutGroup) {
-                                throw new Error('failed to find popout group');
-                            }
-                            selectedPopoutGroup.dispose();
+                        selectedFloatingGroup.dispose();
+                        break;
+                    }
+                    case 'popout': {
+                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.popoutGroup === from);
+                        if (!selectedPopoutGroup) {
+                            throw new Error('failed to find popout group');
                         }
+                        selectedPopoutGroup.disposable.dispose();
                     }
-                    const referenceLocation = getGridLocation(referenceGroup.element);
-                    const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                    this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
                 }
+                const referenceLocation = getGridLocation(to.element);
+                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
+                from.panels.forEach((panel) => {
+                    this._onDidMovePanel.fire({ panel });
+                });
             }
         }
-        doSetGroupAndPanelActive(group, skipFocus) {
-            var _a, _b;
+        doSetGroupActive(group) {
+            super.doSetGroupActive(group);
+            const activePanel = this.activePanel;
+            if (!this._moving &&
+                activePanel !== this._onDidActivePanelChange.value) {
+                this._onDidActivePanelChange.fire(activePanel);
+            }
+        }
+        doSetGroupAndPanelActive(group) {
+            super.doSetGroupActive(group);
             const activePanel = this.activePanel;
-            super.doSetGroupActive(group, skipFocus);
-            if (((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel) !== activePanel) {
-                this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
+            if (group &&
+                this.hasMaximizedGroup() &&
+                !this.isMaximizedGroup(group)) {
+                this.exitMaximizedGroup();
+            }
+            if (!this._moving &&
+                activePanel !== this._onDidActivePanelChange.value) {
+                this._onDidActivePanelChange.fire(activePanel);
+            }
+        }
+        getNextGroupId() {
+            let id = this.nextGroupId.next();
+            while (this._groups.has(id)) {
+                id = this.nextGroupId.next();
             }
+            return id;
         }
         createGroup(options) {
             if (!options) {
@@ -7474,7 +8167,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             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);
@@ -7482,20 +8175,48 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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;
         }
@@ -7548,7 +8269,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             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 = {};
             }
@@ -7723,6 +8457,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.registerPanel(view);
             this.doAddGroup(view, relativeLocation, options.size);
+            this.doSetGroupActive(view);
             return view;
         }
         registerPanel(panel) {
@@ -7864,19 +8599,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -8175,6 +8910,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.addDisposables(this._disposable);
         }
+        setVisible(panel, visible) {
+            const index = this.panels.indexOf(panel);
+            this.paneview.setViewVisible(index, visible);
+        }
         focus() {
             //noop
         }
@@ -8221,6 +8960,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 isExpanded: options.isExpanded,
                 title: options.title,
                 containerApi: new PaneviewApi(this),
+                accessor: this,
             });
             this.paneview.addPane(view, size, index);
             view.orientation = this.paneview.orientation;
@@ -8320,6 +9060,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 title: data.title,
                                 isExpanded: !!view.expanded,
                                 containerApi: new PaneviewApi(this),
+                                accessor: this,
                             });
                             panel.orientation = this.paneview.orientation;
                         });
@@ -8408,7 +9149,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -8533,13 +9274,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.disposed) {
                 throw new Error('invalid operation: resource is already disposed');
             }
-            if (typeof this.component !== 'function') {
+            if (!isReactComponent(this.component)) {
                 /**
                  * we know this isn't a React.FunctionComponent so throw an error here.
-                 * if we do not intercept this the React library will throw a very obsure error
-                 * for the same reason, at least at this point we will emit a sensible stacktrace.
+                 * if we do not intercept then React library will throw a very obsure error
+                 * for the same reason... at least at this point we will emit a sensible stacktrace.
                  */
-                throw new Error('Invalid Operation. dockview only supports React Functional Components.');
+                throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
             }
             const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
                 component: this
@@ -8591,9 +9332,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }, []);
         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 {
@@ -8853,6 +9598,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 defaultRenderer: props.defaultRenderer,
                 debug: props.debug,
                 rootOverlayModel: props.rootOverlayModel,
+                locked: props.locked,
+                disableDnd: props.disableDnd,
             });
             const { clientWidth, clientHeight } = domRef.current;
             dockview.layout(clientWidth, clientHeight);
@@ -8864,6 +9611,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 dockview.dispose();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.locked = !!props.locked;
+        }, [props.locked]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                disableDnd: props.disableDnd,
+            });
+        }, [props.disableDnd]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return () => {
@@ -8879,6 +9640,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onDidDrop]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return () => {
+                    // noop
+                };
+            }
+            const disposable = dockviewRef.current.onWillDrop((event) => {
+                if (props.onWillDrop) {
+                    props.onWillDrop(event);
+                }
+            });
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.onWillDrop]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -9121,7 +9897,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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),
             });
         }
     }
@@ -9304,12 +10082,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.DockviewComponent = DockviewComponent;
     exports.DockviewCompositeDisposable = CompositeDisposable;
     exports.DockviewDefaultTab = DockviewDefaultTab;
+    exports.DockviewDidDropEvent = DockviewDidDropEvent;
     exports.DockviewEmitter = Emitter;
     exports.DockviewGroupPanel = DockviewGroupPanel;
     exports.DockviewGroupPanelModel = DockviewGroupPanelModel;
     exports.DockviewMutableDisposable = MutableDisposable;
     exports.DockviewPanel = DockviewPanel;
     exports.DockviewReact = DockviewReact;
+    exports.DockviewWillDropEvent = DockviewWillDropEvent;
     exports.DraggablePaneviewPanel = DraggablePaneviewPanel;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
@@ -9333,6 +10113,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab;
+    exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
     exports.createComponent = createComponent;
     exports.directionToPosition = directionToPosition;
     exports.getDirectionOrientation = getDirectionOrientation;
@@ -9347,7 +10128,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
     exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
     exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
-    exports.isReactElement = isReactElement;
+    exports.isReactComponent = isReactComponent;
     exports.orthogonal = orthogonal;
     exports.positionToDirection = positionToDirection;
     exports.toTarget = toTarget;