dockview 1.9.1 → 1.10.0

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.9.1
+ * @version 1.10.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -138,6 +138,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();
@@ -181,6 +192,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 = [];
@@ -303,8 +317,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 {
@@ -788,6 +806,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 = [];
@@ -798,6 +823,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();
@@ -1725,7 +1751,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;
@@ -1770,6 +1802,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({});
           }));
@@ -1903,7 +1936,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];
@@ -2039,31 +2072,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 {
@@ -2072,18 +2131,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);
@@ -2092,13 +2154,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();
           }
@@ -2113,14 +2175,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;
@@ -2141,8 +2203,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);
@@ -2175,7 +2237,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
@@ -2243,15 +2305,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);
@@ -2302,7 +2365,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);
@@ -2929,6 +2992,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get onDidDrop() {
           return this.component.onDidDrop;
       }
+      /**
+       * 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;
+      }
+      /**
+       *
+       */
+      get onWillShowOverlay() {
+          return this.component.onWillShowOverlay;
+      }
       /**
        * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
        */
@@ -3064,17 +3142,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);
       }
   }
 
@@ -3128,6 +3206,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':
@@ -3180,6 +3270,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, {
@@ -3208,6 +3300,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();
@@ -3250,7 +3355,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);
@@ -3303,25 +3408,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);
@@ -3389,14 +3513,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;
@@ -3424,7 +3540,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) {
@@ -3442,7 +3558,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, 'panel');
               },
           });
           this.addDisposables(this.dropTarget);
@@ -3467,7 +3583,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);
@@ -3479,7 +3595,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,
                   });
@@ -3510,12 +3626,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           // noop
       }
       closePanel() {
+          var _a;
           if (this.panel) {
-              if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
-                  this._element.removeChild(this.panel.view.content.element);
+              if (this.panel.api.renderer === 'onlyWhenVisibile') {
+                  (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
               }
-              this.panel = undefined;
           }
+          this.panel = undefined;
       }
       dispose() {
           this.disposable.dispose();
@@ -3623,7 +3740,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) {
@@ -3638,9 +3755,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) => {
@@ -3648,9 +3766,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);
@@ -3697,7 +3815,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;
@@ -3749,7 +3867,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;
@@ -3763,14 +3881,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, 'panel');
               },
           });
+          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);
       }
   }
 
@@ -3858,19 +3977,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');
@@ -3885,7 +3996,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,
@@ -3895,11 +4014,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();
@@ -3962,9 +4085,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) {
@@ -3978,20 +4101,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);
@@ -4009,6 +4132,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');
@@ -4054,7 +4231,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',
@@ -4090,7 +4267,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;
@@ -4101,6 +4278,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();
@@ -4111,46 +4292,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);
@@ -4160,7 +4364,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);
@@ -4170,7 +4374,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);
@@ -4250,34 +4454,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;
@@ -4285,7 +4500,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) {
@@ -4311,12 +4526,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;
@@ -4327,11 +4538,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;
@@ -4342,17 +4548,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) {
@@ -4367,13 +4578,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) {
@@ -4385,12 +4596,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) {
@@ -4402,11 +4618,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;
@@ -4439,10 +4655,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) {
@@ -4475,12 +4713,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() {
@@ -4488,6 +4728,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();
           }
@@ -4509,15 +4750,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) {
                   /**
@@ -4605,25 +4838,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();
@@ -4638,6 +4884,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;
@@ -4648,13 +4895,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)) {
@@ -4666,8 +4912,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);
@@ -4678,25 +4924,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);
@@ -4741,9 +4980,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();
@@ -4753,11 +4992,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;
       }
@@ -4767,6 +5010,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get isVisible() {
           return this._isVisible;
       }
+      get isHidden() {
+          return this._isHidden;
+      }
       get width() {
           return this._width;
       }
@@ -4779,38 +5025,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._isFocused = false;
           this._isActive = false;
           this._isVisible = true;
+          this._isHidden = false;
           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._onDidHiddenChange = new Emitter();
+          this.onDidHiddenChange = this._onDidHiddenChange.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) => {
@@ -4819,10 +5053,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               this._isActive = event.isActive;
           }), this.onDidVisibilityChange((event) => {
               this._isVisible = event.isVisible;
+          }), this.onDidHiddenChange((event) => {
+              this._isHidden = event.isHidden;
           }), 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._onDidHiddenChange, this._onUpdateParameters);
       }
       initialize(panel) {
           this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
@@ -4831,8 +5067,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               });
           });
       }
-      setVisible(isVisible) {
-          this._onVisibilityChange.fire({ isVisible });
+      setHidden(isHidden) {
+          this._onDidHiddenChange.fire({ isHidden });
       }
       setActive() {
           this._onActiveChange.fire();
@@ -4840,9 +5076,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       updateParameters(parameters) {
           this._onUpdateParameters.fire(parameters);
       }
-      dispose() {
-          super.dispose();
-      }
   }
 
   class SplitviewPanelApiImpl extends PanelApiImpl {
@@ -4930,7 +5163,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;
@@ -5259,9 +5497,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;
@@ -5354,13 +5590,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) => {
-              const { isVisible } = event;
+          this.addDisposables(this.api.onDidHiddenChange((event) => {
+              const { isHidden } = event;
               const { accessor } = this._params;
-              accessor.setVisible(this, isVisible);
+              accessor.setVisible(this, !isHidden);
           }), 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') {
@@ -5443,6 +5679,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) {
@@ -5450,14 +5697,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;
           }
@@ -5514,6 +5770,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();
       }
@@ -5559,6 +5821,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;
       }
@@ -5570,15 +5835,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       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();
+          if (this._group !== value) {
+              this._group = value;
+              this._onDidGroupChange.fire({});
+              let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state
+              this.groupEventsDisposable.value = new CompositeDisposable(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,
+                      });
+                  }
+              }));
+              // if (this.isGroupActive !== isOldGroupActive) {
+              //     this._onDidActiveGroupChange.fire({
+              //         isActive: this.isGroupActive,
+              //     });
+              // }
+              this._onDidLocationChange.fire({
+                  location: this.group.api.location,
               });
-              if (this.isGroupActive !== isOldGroupActive) {
-                  this._onDidActiveGroupChange.fire();
-              }
           }
       }
       get group() {
@@ -5596,14 +5880,26 @@ 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.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);
@@ -5664,7 +5960,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 {
@@ -5721,20 +6024,40 @@ 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,
+              });
+          }
+      }
+      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) {
-          // the obtain the correct dimensions of the content panel we must deduct the tab height
+          // TODO: Can we somehow do height without header height or indicate what the header height is?
           this.api._onDidDimensionChange.fire({
               width,
               height: height,
@@ -5856,8 +6179,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);
       }
@@ -5865,25 +6186,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;
@@ -6316,117 +6620,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 };
 
@@ -6440,11 +6633,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) {
@@ -6484,7 +6679,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) {
@@ -6530,8 +6725,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) {
@@ -6552,11 +6750,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++) {
@@ -6607,6 +6958,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);
@@ -6617,6 +6969,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();
@@ -6625,15 +6981,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();
@@ -6644,7 +7021,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;
@@ -6690,7 +7067,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,
                       });
                   }
@@ -6701,86 +7078,249 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           });
           this.addDisposables(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: 'content',
+              });
+              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.setHidden(true);
+          }
+          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.setHidden(true);
+                          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.isHidden) {
+                          referenceGroup.api.setHidden(false);
+                      }
+                      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;
@@ -6790,16 +7330,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) {
@@ -6830,12 +7370,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) {
@@ -6925,8 +7468,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;
@@ -6987,7 +7530,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(),
               };
           });
@@ -7005,7 +7549,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');
@@ -7044,7 +7588,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,
                       });
                   }
@@ -7074,11 +7618,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) {
@@ -7125,12 +7674,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 });
@@ -7138,9 +7688,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() {
@@ -7181,6 +7728,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;
               }
           }
@@ -7192,6 +7740,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
@@ -7199,16 +7748,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);
@@ -7216,10 +7765,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
@@ -7227,16 +7778,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;
       }
@@ -7248,13 +7799,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() {
@@ -7267,7 +7820,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.isHidden).length === 0) {
               if (!this.watermark) {
                   this.watermark = this.createWatermarkComponent();
                   this.watermark.init({
@@ -7287,7 +7840,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       addGroup(options) {
           var _a;
-          const group = this.createGroup();
+          const group = this.createGroup(options);
           if (options) {
               let referenceGroup;
               if (isGroupOptionsWithPanel(options)) {
@@ -7313,36 +7866,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)) {
@@ -7354,60 +7913,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)) {
@@ -7415,78 +8038,123 @@ 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) {
               options = {};
@@ -7503,7 +8171,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);
@@ -7511,20 +8179,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;
       }
@@ -7577,7 +8273,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 = {};
           }
@@ -7752,6 +8461,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) {
@@ -8437,10 +9147,10 @@ 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) => {
-              const { isVisible } = event;
+          this.addDisposables(this._onDidChange, this.api.onDidHiddenChange((event) => {
+              const { isHidden } = event;
               const { accessor } = this._params;
-              accessor.setVisible(this, isVisible);
+              accessor.setVisible(this, !isHidden);
           }), this.api.onActiveChange(() => {
               const { accessor } = this._params;
               accessor.setActive(this);
@@ -8562,13 +9272,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
@@ -8620,9 +9330,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 {
@@ -8882,6 +9596,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);
@@ -8893,6 +9609,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 () => {
@@ -8908,6 +9638,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;
@@ -9150,7 +9895,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),
           });
       }
   }
@@ -9333,12 +10080,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;
@@ -9362,6 +10111,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;
@@ -9376,7 +10126,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;