dockview 1.0.1 → 1.1.0

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.1
+ * @version 1.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -57,7 +57,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
                         listener(this._last);
                     }
-                    this._listeners.length === 0;
                     this._listeners.push(listener);
                     return {
                         dispose: () => {
@@ -73,9 +72,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         fire(e) {
             this._last = e;
-            this._listeners.forEach((listener) => {
+            for (const listener of this._listeners) {
                 listener(e);
-            });
+            }
         }
         dispose() {
             this._listeners = [];
@@ -97,6 +96,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 element.removeEventListener(type, listener);
             },
         };
+    }
+    class TickDelayedEvent {
+        constructor() {
+            this._onFired = new Emitter();
+            this.onEvent = this._onFired.event;
+        }
+        fire() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+            this.timer = setTimeout(() => {
+                this._onFired.fire();
+                clearTimeout(this.timer);
+            });
+        }
+        dispose() {
+            this._onFired.dispose();
+        }
     }
 
     exports.Disposable = void 0;
@@ -115,7 +132,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return new CompositeDisposable(...args);
         }
         addDisposables(...args) {
-            args === null || args === void 0 ? void 0 : args.forEach((arg) => this.disposables.push(arg));
+            args.forEach((arg) => this.disposables.push(arg));
         }
         dispose() {
             this.disposables.forEach((arg) => arg.dispose());
@@ -134,20 +151,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         dispose() {
             if (this._disposable) {
                 this._disposable.dispose();
+                this._disposable = exports.Disposable.NONE;
             }
         }
     }
 
-    function tryParseJSON(text, reviver) {
-        try {
-            return JSON.parse(text, reviver);
-        }
-        catch (err) {
-            console.warn('failed to parse JSON');
-            return undefined;
-        }
-    }
-
     class TransferObject {
         constructor() {
             //
@@ -168,45 +176,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.paneId = paneId;
         }
     }
-    const DATA_KEY = 'splitview/transfer';
-    const isPanelTransferEvent = (event) => {
-        if (!event.dataTransfer) {
-            return false;
-        }
-        return event.dataTransfer.types.includes(DATA_KEY);
-    };
-    exports.DragType = void 0;
-    (function (DragType) {
-        DragType["DOCKVIEW_TAB"] = "dockview_tab";
-        DragType["EXTERNAL"] = "external_group_drag";
-    })(exports.DragType || (exports.DragType = {}));
-    /**
-     * Determine whether this data belong to that of an event that was started by
-     * dragging a tab component
-     */
-    const isTabDragEvent = (data) => {
-        return data.type === exports.DragType.DOCKVIEW_TAB;
-    };
-    /**
-     * Determine whether this data belong to that of an event that was started by
-     * a custom drag-enable component
-     */
-    const isCustomDragEvent = (data) => {
-        return data.type === exports.DragType.EXTERNAL;
-    };
-    const extractData = (event) => {
-        if (!event.dataTransfer) {
-            return null;
-        }
-        const data = tryParseJSON(event.dataTransfer.getData(DATA_KEY));
-        if (!data) {
-            console.warn(`[dragEvent] ${DATA_KEY} data is missing`);
-        }
-        if (typeof data.type !== 'string') {
-            console.warn(`[dragEvent] invalid type ${data.type}`);
-        }
-        return data;
-    };
     /**
      * A singleton to store transfer data during drag & drop operations that are only valid within the application.
      */
@@ -276,11 +245,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get length() {
             return this.component.length;
         }
+        get orientation() {
+            return this.component.orientation;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
-        get orientation() {
-            return this.component.orientation;
+        get onDidAddView() {
+            return this.component.onDidAddView;
+        }
+        get onDidRemoveView() {
+            return this.component.onDidRemoveView;
         }
         updateOptions(options) {
             this.component.updateOptions(options);
@@ -326,21 +301,38 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(component) {
             this.component = component;
         }
-        get width() {
-            return this.component.width;
-        }
-        get height() {
-            return this.component.height;
-        }
         get minimumSize() {
             return this.component.minimumSize;
         }
         get maximumSize() {
             return this.component.maximumSize;
         }
+        get height() {
+            return this.component.height;
+        }
+        get width() {
+            return this.component.width;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddView() {
+            return this.component.onDidAddView;
+        }
+        get onDidRemoveView() {
+            return this.component.onDidRemoveView;
+        }
+        get onDidDrop() {
+            const emitter = new Emitter();
+            const disposable = this.component.onDidDrop((e) => {
+                emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
+            });
+            emitter.dispose = () => {
+                disposable.dispose();
+                emitter.dispose();
+            };
+            return emitter.event;
+        }
         getPanels() {
             return this.component.getPanels();
         }
@@ -376,12 +368,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(component) {
             this.component = component;
         }
-        get width() {
-            return this.component.width;
-        }
-        get height() {
-            return this.component.height;
-        }
         get minimumHeight() {
             return this.component.minimumHeight;
         }
@@ -394,12 +380,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get maximumWidth() {
             return this.component.maximumWidth;
         }
+        get width() {
+            return this.component.width;
+        }
+        get height() {
+            return this.component.height;
+        }
         get onGridEvent() {
             return this.component.onGridEvent;
         }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddGroup() {
+            return this.component.onDidAddGroup;
+        }
+        get onDidRemoveGroup() {
+            return this.component.onDidRemoveGroup;
+        }
+        get onDidActiveGroupChange() {
+            return this.component.onDidActiveGroupChange;
+        }
+        get onDidLayoutFromJSON() {
+            return this.component.onDidLayoutFromJSON;
+        }
         get panels() {
             return this.component.groups;
         }
@@ -477,6 +481,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onGridEvent() {
             return this.component.onGridEvent;
         }
+        get onDidActiveGroupChange() {
+            return this.component.onDidActiveGroupChange;
+        }
+        get onDidAddGroup() {
+            return this.component.onDidAddGroup;
+        }
+        get onDidRemoveGroup() {
+            return this.component.onDidRemoveGroup;
+        }
+        get onDidActivePanelChange() {
+            return this.component.onDidActivePanelChange;
+        }
+        get onDidAddPanel() {
+            return this.component.onDidAddPanel;
+        }
+        get onDidRemovePanel() {
+            return this.component.onDidRemovePanel;
+        }
+        get onDidLayoutfromJSON() {
+            return this.component.onDidLayoutfromJSON;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -504,18 +529,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getPanel(id) {
             return this.component.getGroupPanel(id);
         }
-        setActivePanel(panel) {
-            this.component.setActivePanel(panel);
-        }
         layout(width, height, force = false) {
             this.component.layout(width, height, force);
         }
         addPanel(options) {
             return this.component.addPanel(options);
         }
-        removePanel(panel) {
-            this.component.removePanel(panel);
-        }
         addEmptyGroup(options) {
             this.component.addEmptyGroup(options);
         }
@@ -863,7 +882,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidAddView = new Emitter();
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
-            this.onDidRemoveView = this._onDidAddView.event;
+            this.onDidRemoveView = this._onDidRemoveView.event;
             this._startSnappingEnabled = true;
             this._endSnappingEnabled = true;
             this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
@@ -1505,9 +1524,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             super();
             this.paneItems = [];
+            this.skipAnimation = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.skipAnimation = false;
             this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
             this.element = document.createElement('div');
             this.element.className = 'pane-container';
@@ -1535,7 +1554,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.paneItems.push(paneItem);
                 pane.orthogonalSize = this.splitview.orthogonalSize;
             });
-            this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire(undefined);
             }), this.splitview.onDidAddView(() => {
                 this._onDidChange.fire();
@@ -1607,9 +1626,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         layout(size, orthogonalSize) {
-            // for (const paneItem of this.paneItems) {
-            //     paneItem.pane.orthogonalSize = orthogonalSize;
-            // }
             this.splitview.layout(size, orthogonalSize);
         }
         setupAnimation() {
@@ -1699,7 +1715,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.options = options;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
-            this.addDisposables(new DragAndDropObserver(this.element, {
+            this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
                 onDragEnter: (e) => undefined,
                 onDragOver: (e) => {
                     if (isBooleanValue(this.options.canDisplayOverlay)) {
@@ -1735,51 +1751,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const y = e.offsetY;
                     const xp = (100 * x) / width;
                     const yp = (100 * y) / height;
-                    let isRight = false;
-                    let isLeft = false;
-                    let isTop = false;
-                    let isBottom = false;
-                    switch (this.options.validOverlays) {
-                        case 'all':
-                            isRight = xp > 80;
-                            isLeft = xp < 20;
-                            isTop = !isRight && !isLeft && yp < 20;
-                            isBottom = !isRight && !isLeft && yp > 80;
-                            break;
-                        case 'vertical':
-                            isTop = yp < 50;
-                            isBottom = yp >= 50;
-                            break;
-                        case 'horizontal':
-                            isLeft = xp < 50;
-                            isRight = xp >= 50;
-                            break;
-                    }
+                    const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                     const isSmallX = width < 100;
                     const isSmallY = height < 100;
-                    toggleClass(this.overlay, 'right', !isSmallX && isRight);
-                    toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-                    toggleClass(this.overlay, 'top', !isSmallY && isTop);
-                    toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
-                    toggleClass(this.overlay, 'small-right', isSmallX && isRight);
-                    toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-                    toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-                    toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
-                    if (isRight) {
-                        this._state = exports.Position.Right;
-                    }
-                    else if (isLeft) {
-                        this._state = exports.Position.Left;
-                    }
-                    else if (isTop) {
-                        this._state = exports.Position.Top;
-                    }
-                    else if (isBottom) {
-                        this._state = exports.Position.Bottom;
-                    }
-                    else {
-                        this._state = exports.Position.Center;
-                    }
+                    this.toggleClasses(quadrant, isSmallX, isSmallY);
+                    this.setState(quadrant);
                 },
                 onDragLeave: (e) => {
                     this.removeDropTarget();
@@ -1793,7 +1769,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const state = this._state;
                     this.removeDropTarget();
                     if (state) {
-                        this._onDrop.fire({ position: state, event: e });
+                        this._onDrop.fire({ position: state, nativeEvent: e });
                     }
                 },
             }));
@@ -1808,9 +1784,73 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.options.canDisplayOverlay = value;
         }
         dispose() {
-            this._onDrop.dispose();
             this.removeDropTarget();
         }
+        toggleClasses(quadrant, isSmallX, isSmallY) {
+            if (!this.overlay) {
+                return;
+            }
+            const isLeft = quadrant === 'left';
+            const isRight = quadrant === 'right';
+            const isTop = quadrant === 'top';
+            const isBottom = quadrant === 'bottom';
+            toggleClass(this.overlay, 'right', !isSmallX && isRight);
+            toggleClass(this.overlay, 'left', !isSmallX && isLeft);
+            toggleClass(this.overlay, 'top', !isSmallY && isTop);
+            toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+            toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+            toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+            toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+            toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+        }
+        setState(quadrant) {
+            switch (quadrant) {
+                case 'top':
+                    this._state = exports.Position.Top;
+                    break;
+                case 'left':
+                    this._state = exports.Position.Left;
+                    break;
+                case 'bottom':
+                    this._state = exports.Position.Bottom;
+                    break;
+                case 'right':
+                    this._state = exports.Position.Right;
+                    break;
+                default:
+                    this._state = exports.Position.Center;
+                    break;
+            }
+        }
+        calculateQuadrant(overlayType, xp, yp) {
+            switch (overlayType) {
+                case 'all':
+                    if (xp < 20) {
+                        return 'left';
+                    }
+                    if (xp > 80) {
+                        return 'right';
+                    }
+                    if (yp < 20) {
+                        return 'top';
+                    }
+                    if (yp > 80) {
+                        return 'bottom';
+                    }
+                    break;
+                case 'vertical':
+                    if (yp < 50) {
+                        return 'top';
+                    }
+                    return 'bottom';
+                case 'horizontal':
+                    if (xp < 50) {
+                        return 'left';
+                    }
+                    return 'right';
+            }
+            return null;
+        }
         removeDropTarget() {
             if (this.target) {
                 this._state = undefined;
@@ -1913,6 +1953,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.view.layout(this.width, this.height);
         }
         dispose() {
+            this._onDidChange.dispose();
             this._disposable.dispose();
         }
     }
@@ -1964,7 +2005,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     proportionalLayout,
                 });
             }
-            this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
                 this._onDidChange.fire(undefined);
             }));
             this.setupChildrenEvents();
@@ -2136,6 +2177,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
      * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
      * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
      *--------------------------------------------------------------------------------------------*/
+    function findLeaf(candiateNode, last) {
+        if (candiateNode instanceof LeafNode) {
+            return candiateNode;
+        }
+        if (candiateNode instanceof BranchNode) {
+            return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
+        }
+        throw new Error('invalid node');
+    }
     function flipNode(node, size, orthogonalSize) {
         if (node instanceof BranchNode) {
             const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
@@ -2274,13 +2324,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         deserialize(json, deserializer) {
             const orientation = json.orientation;
-            const height = json.height;
+            const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
             this._deserialize(json.root, orientation, deserializer, height);
         }
         _deserialize(root, orientation, deserializer, orthogonalSize) {
-            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
+            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
         }
-        _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+        _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
             let result;
             if (node.type === 'branch') {
                 const serializedChildren = node.data;
@@ -2290,7 +2340,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         visible: serializedChild.visible,
                     };
                 });
-                result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, orthogonalSize, children);
+                // HORIZONTAL => height=orthogonalsize width=size
+                // VERTICAL => height=size width=orthogonalsize
+                result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
             }
             else {
                 result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -2351,15 +2403,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!(node instanceof LeafNode)) {
                 throw new Error('invalid location');
             }
-            const findLeaf = (candiateNode, last) => {
-                if (candiateNode instanceof LeafNode) {
-                    return candiateNode;
-                }
-                if (candiateNode instanceof BranchNode) {
-                    return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-                }
-                throw new Error('invalid node');
-            };
             for (let i = path.length - 1; i > -1; i--) {
                 const n = path[i];
                 const l = location[i] || 0;
@@ -2456,15 +2499,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             parent.removeChild(index, sizing);
             if (parent.children.length === 0) {
-                // throw new Error('Invalid grid state');
                 return node.view;
             }
             if (parent.children.length > 1) {
                 return node.view;
             }
+            const sibling = parent.children[0];
             if (pathToParent.length === 0) {
                 // parent is root
-                const sibling = parent.children[0];
                 if (sibling instanceof LeafNode) {
                     return node.view;
                 }
@@ -2475,7 +2517,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             const [grandParent, ..._] = [...pathToParent].reverse();
             const [parentIndex, ...__] = [...rest].reverse();
-            const sibling = parent.children[0];
             const isSiblingVisible = parent.isChildVisible(0);
             parent.removeChild(0, sizing);
             const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
@@ -2522,31 +2563,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __awaiter(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 ContentContainer extends CompositeDisposable {
         constructor() {
             super();
@@ -2558,6 +2574,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element = document.createElement('div');
             this._element.className = 'content-container';
             this._element.tabIndex = -1;
+            this.addDisposables(this._onDidFocus, this._onDidBlur);
             // for hosted containers
             // 1) register a drop target on the host
             // 2) register window dragStart events to disable pointer events
@@ -2624,6 +2641,41 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
     })(DockviewDropTargets || (DockviewDropTargets = {}));
 
+    class DragHandler extends CompositeDisposable {
+        constructor(el) {
+            super();
+            this.el = el;
+            this.disposable = new MutableDisposable();
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
+            this.iframes = [];
+            this.configure();
+        }
+        configure() {
+            this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+                this.iframes = [
+                    ...getElementsByTagName('iframe'),
+                    ...getElementsByTagName('webview'),
+                ];
+                for (const iframe of this.iframes) {
+                    iframe.style.pointerEvents = 'none';
+                }
+                this.el.classList.add('dragged');
+                setTimeout(() => this.el.classList.remove('dragged'), 0);
+                this.disposable.value = this.getData();
+                if (event.dataTransfer) {
+                    event.dataTransfer.effectAllowed = 'move';
+                }
+            }), addDisposableListener(this.el, 'dragend', (ev) => {
+                for (const iframe of this.iframes) {
+                    iframe.style.pointerEvents = 'auto';
+                }
+                this.iframes = [];
+                this.disposable.dispose();
+            }));
+        }
+    }
+
     exports.MouseEventKind = void 0;
     (function (MouseEventKind) {
         MouseEventKind["CLICK"] = "CLICK";
@@ -2633,42 +2685,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
-            this.accessor = accessor;
             this.group = group;
             this._onChanged = new Emitter();
             this.onChanged = this._onChanged.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
-            this.panelTransfer = LocalSelectionTransfer.getInstance();
-            this.iframes = [];
             this.addDisposables(this._onChanged, this._onDropped);
             this._element = document.createElement('div');
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
-            this.addDisposables(addDisposableListener(this._element, 'dragstart', (event) => {
-                this.iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
+            this.addDisposables(new (class Handler extends DragHandler {
+                constructor() {
+                    super(...arguments);
+                    this.panelTransfer = LocalSelectionTransfer.getInstance();
                 }
-                this.element.classList.add('dragged');
-                setTimeout(() => this.element.classList.remove('dragged'), 0);
-                this.panelTransfer.setData([
-                    new PanelTransfer(this.accessor.id, this.group.id, this.panelId),
-                ], PanelTransfer.prototype);
-                if (event.dataTransfer) {
-                    event.dataTransfer.effectAllowed = 'move';
+                getData() {
+                    this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                    return {
+                        dispose: () => {
+                            this.panelTransfer.clearData(PanelTransfer.prototype);
+                        },
+                    };
                 }
-            }), addDisposableListener(this._element, 'dragend', (ev) => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
+                dispose() {
+                    //
                 }
-                this.iframes = [];
-                this.panelTransfer.clearData(PanelTransfer.prototype);
-            }), addDisposableListener(this._element, 'mousedown', (event) => {
+            })(this._element));
+            this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -2757,7 +2801,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.addDisposables(this.voidDropTarget.onDrop((event) => {
                 this._onDrop.fire({
-                    event: event.event,
+                    event: event.nativeEvent,
                     index: this.tabs.length,
                 });
             }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
@@ -2870,16 +2914,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (!isLeftClick || event.event.defaultPrevented) {
                     return;
                 }
-                switch (event.kind) {
-                    case exports.MouseEventKind.CLICK:
-                        this.group.model.openPanel(panel, {
-                            skipFocus: alreadyFocused,
-                        });
-                        break;
+                if (event.kind === exports.MouseEventKind.CLICK) {
+                    this.group.model.openPanel(panel, {
+                        skipFocus: alreadyFocused,
+                    });
                 }
             }), tabToAdd.onDrop((event) => {
                 this._onDrop.fire({
-                    event: event.event,
+                    event: event.nativeEvent,
                     index: this.tabs.findIndex((x) => x.value === tabToAdd),
                 });
             }));
@@ -2904,7 +2946,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
         GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
         GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-        GroupChangeKind2["GROUP_ACTIVE"] = "GROUP_ACTIVE";
     })(exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
     class Groupview extends CompositeDisposable {
         constructor(container, accessor, id, options, parent) {
@@ -2925,15 +2966,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onMove = this._onMove.event;
             this._onDidGroupChange = new Emitter();
             this.onDidGroupChange = this._onDidGroupChange.event;
-            this.closePanel = (panel) => __awaiter(this, void 0, void 0, function* () {
-                if (panel.close && !(yield panel.close())) {
-                    return false;
-                }
-                this.doClose(panel);
-                return true;
-            });
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
             this.container.classList.add('groupview');
-            this.addDisposables(this._onMove, this._onDidGroupChange);
+            this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
             this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
                 tabHeight: options.tabHeight,
             });
@@ -2955,9 +2991,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), this.contentContainer.onDidFocus(() => {
                 this.accessor.doSetGroupActive(this.parent, true);
             }), this.contentContainer.onDidBlur(() => {
-                // this._activePanel?.api._ondid
+                // noop
             }), this.dropTarget.onDrop((event) => {
-                this.handleDropEvent(event.event, event.position);
+                this.handleDropEvent(event.nativeEvent, event.position);
             }));
         }
         get element() {
@@ -3090,6 +3126,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.index > this.panels.length) {
                 options.index = this.panels.length;
             }
+            // ensure the group is updated before we fire any events
+            panel.updateParentGroup(this.parent, true);
             if (this._activePanel === panel) {
                 this.accessor.doSetGroupActive(this.parent);
                 return;
@@ -3110,43 +3148,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._removePanel(panelToRemove);
         }
         closeAllPanels() {
-            var _a;
-            return __awaiter(this, void 0, void 0, function* () {
-                const index = this._activePanel
-                    ? this.panels.indexOf(this._activePanel)
-                    : -1;
-                if (this._activePanel && index > -1) {
-                    if (this.panels.indexOf(this._activePanel) < 0) {
-                        console.warn('active panel not tracked');
-                    }
-                    const canClose = !((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.close) || (yield this._activePanel.close());
-                    if (!canClose) {
-                        return false;
-                    }
-                }
-                for (let i = 0; i < this.panels.length; i++) {
-                    if (i === index) {
-                        continue;
-                    }
-                    const panel = this.panels[i];
-                    this.openPanel(panel);
-                    if (panel.close) {
-                        const canClose = yield panel.close();
-                        if (!canClose) {
-                            return false;
-                        }
-                    }
-                }
-                if (this.panels.length > 0) {
-                    // take a copy since we will be edting the array as we iterate through
-                    const arrPanelCpy = [...this.panels];
-                    yield Promise.all(arrPanelCpy.map((p) => this.doClose(p)));
+            if (this.panels.length > 0) {
+                // take a copy since we will be edting the array as we iterate through
+                const arrPanelCpy = [...this.panels];
+                for (const panel of arrPanelCpy) {
+                    this.doClose(panel);
                 }
-                else {
-                    this.accessor.removeGroup(this.parent);
-                }
-                return true;
-            });
+            }
+            else {
+                this.accessor.removeGroup(this.parent);
+            }
+        }
+        closePanel(panel) {
+            this.doClose(panel);
         }
         doClose(panel) {
             this.accessor.removePanel(panel);
@@ -3289,8 +3303,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.tabsContainer.show();
             }
         }
-        canDisplayOverlay(dragOverEvent, target) {
+        canDisplayOverlay(event, target) {
             // custom overlay handler
+            if (this.accessor.options.showDndOverlay) {
+                return this.accessor.options.showDndOverlay(event, target);
+            }
             return false;
         }
         handleDropEvent(event, position, index) {
@@ -3315,6 +3332,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     index,
                 });
             }
+            else {
+                this._onDidDrop.fire({ nativeEvent: event, position, index });
+            }
         }
         dispose() {
             for (const panel of this.panels) {
@@ -3367,19 +3387,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onGridEvent = this._onGridEvent.event;
             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.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
             this.element.appendChild(this.gridview.element);
-            // TODO for some reason this is required before anything will layout correctly
-            this.layout(0, 0, true);
+            this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
                 this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
             }));
             this.addDisposables((() => {
-                /**
-                 * TODO Fix this relatively ugly 'merge and delay'
-                 */
-                let timer;
-                return this.onGridEvent((event) => {
+                const tickDelayedEvent = new TickDelayedEvent();
+                return new CompositeDisposable(this.onGridEvent((event) => {
                     if ([
                         exports.GroupChangeKind.ADD_GROUP,
                         exports.GroupChangeKind.REMOVE_GROUP,
@@ -3389,15 +3411,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         exports.GroupChangeKind.PANEL_ACTIVE,
                         exports.GroupChangeKind.LAYOUT,
                     ].includes(event.kind)) {
-                        if (timer) {
-                            clearTimeout(timer);
-                        }
-                        timer = setTimeout(() => {
-                            this._onDidLayoutChange.fire();
-                            clearTimeout(timer);
-                        });
+                        tickDelayedEvent.fire();
                     }
-                });
+                }), tickDelayedEvent.onEvent(() => {
+                    this._onDidLayoutChange.fire();
+                }), tickDelayedEvent);
             })());
         }
         get id() {
@@ -3443,6 +3461,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.ADD_GROUP });
+            this._onDidAddGroup.fire(group);
             this.doSetGroupActive(group);
         }
         doRemoveGroup(group, options) {
@@ -3456,6 +3475,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this._groups.delete(group.id);
             }
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.REMOVE_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);
@@ -3486,6 +3506,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onGridEvent.fire({
                 kind: exports.GroupChangeKind.GROUP_ACTIVE,
             });
+            this._onDidActiveGroupChange.fire(group);
         }
         removeGroup(group) {
             this.doRemoveGroup(group);
@@ -3542,6 +3563,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         dispose() {
             super.dispose();
             this._onGridEvent.dispose();
+            this._onDidActiveGroupChange.dispose();
+            this._onDidAddGroup.dispose();
+            this._onDidRemoveGroup.dispose();
+            this._onDidLayoutChange.dispose();
             this.gridview.dispose();
         }
     }
@@ -3553,15 +3578,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(id) {
             super();
             this.id = id;
-            this._state = {};
             this._isFocused = false;
             this._isActive = false;
             this._isVisible = true;
             this._width = 0;
             this._height = 0;
-            this._onDidStateChange = new Emitter();
-            this.onDidStateChange = this._onDidStateChange.event;
-            //
             this._onDidPanelDimensionChange = new Emitter({
                 replay: true,
             });
@@ -3590,7 +3611,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onActiveChange = new Emitter();
             this.onActiveChange = this._onActiveChange.event;
-            this.addDisposables(this._onDidStateChange, this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this.onDidFocusChange((event) => {
+            this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
                 this._isActive = event.isActive;
@@ -3623,21 +3644,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         setActive() {
             this._onActiveChange.fire();
         }
-        setState(key, value) {
-            if (typeof key === 'object') {
-                this._state = key;
-            }
-            else if (typeof value !== undefined) {
-                this._state[key] = value;
-            }
-            this._onDidStateChange.fire(undefined);
-        }
-        getState() {
-            return this._state;
-        }
-        getStateKey(key) {
-            return this._state[key];
-        }
         dispose() {
             super.dispose();
         }
@@ -3657,6 +3663,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
+            this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -3670,19 +3677,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(panel, group) {
             super(panel.id);
             this.panel = panel;
-            this._onDidDirtyChange = new Emitter();
-            this.onDidDirtyChange = this._onDidDirtyChange.event;
             this._onDidTitleChange = new Emitter();
             this.onDidTitleChange = this._onDidTitleChange.event;
             this._titleChanged = new Emitter();
             this.titleChanged = this._titleChanged.event;
             this._suppressClosableChanged = new Emitter();
             this.suppressClosableChanged = this._suppressClosableChanged.event;
-            this._group = group;
-            this.addDisposables(this._onDidDirtyChange);
-        }
-        get tryClose() {
-            return this._interceptor;
+            this._onDidActiveGroupChange = new Emitter();
+            this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._onDidGroupChange = new Emitter();
+            this.onDidGroupChange = this._onDidGroupChange.event;
+            this.disposable = new MutableDisposable();
+            this.group = group;
+            this.addDisposables(this.disposable, this._onDidTitleChange, this._titleChanged, this._suppressClosableChanged, this._onDidGroupChange, this._onDidActiveGroupChange);
         }
         get title() {
             return this.panel.title;
@@ -3695,7 +3702,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
         }
         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.isGroupActive !== isOldGroupActive) {
+                    this._onDidActiveGroupChange.fire();
+                }
+            }
         }
         get group() {
             return this._group;
@@ -3709,16 +3726,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return this.group.model.closePanel(this.panel);
         }
-        interceptOnCloseAction(interceptor) {
-            this._interceptor = interceptor;
-        }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class DockviewGroupPanel extends CompositeDisposable {
-        constructor(id, containerApi) {
+        constructor(id, accessor, containerApi) {
             super();
             this.id = id;
             this.containerApi = containerApi;
@@ -3726,9 +3737,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._suppressClosable = false;
             this._title = '';
             this.api = new DockviewPanelApiImpl(this, this._group);
-            this.onDidStateChange = this.api.onDidStateChange;
             this.addDisposables(this.api.onActiveChange(() => {
-                this.containerApi.setActivePanel(this);
+                accessor.setActivePanel(this);
             }), this.api.onDidTitleChange((event) => {
                 const title = event.title;
                 this.update({ params: { title } });
@@ -3752,32 +3762,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._view = params.view;
             this.setTitle(params.title);
             this.setSuppressClosable(params.suppressClosable || false);
-            if (params.state) {
-                this.api.setState(params.state);
-            }
             (_a = this.view) === null || _a === void 0 ? void 0 : _a.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
         }
         focus() {
             this.api._onFocusEvent.fire();
         }
-        setDirty(isDirty) {
-            this.api._onDidDirtyChange.fire(isDirty);
-        }
-        close() {
-            if (this.api.tryClose) {
-                return this.api.tryClose();
-            }
-            return Promise.resolve(true);
-        }
         toJSON() {
-            const state = this.api.getState();
             return {
                 id: this.id,
                 view: this.view.toJSON(),
                 params: Object.keys(this._params || {}).length > 0
                     ? this._params
                     : undefined,
-                state: state && Object.keys(state).length > 0 ? state : undefined,
                 suppressClosable: this.suppressClosable || undefined,
                 title: this.title,
             };
@@ -3822,18 +3818,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             this._group = group;
             this.api.group = group;
-            this.mutableDisposable.value = this._group.model.onDidGroupChange((ev) => {
-                var _a;
-                if (ev.kind === exports.GroupChangeKind2.GROUP_ACTIVE) {
-                    const isVisible = !!((_a = this._group) === null || _a === void 0 ? void 0 : _a.model.isPanelActive(this));
-                    this.api._onDidActiveChange.fire({
-                        isActive: isGroupActive && isVisible,
-                    });
-                    this.api._onDidVisibilityChange.fire({
-                        isVisible,
-                    });
-                }
-            });
             const isPanelVisible = this._group.model.isPanelActive(this);
             this.api._onDidActiveChange.fire({
                 isActive: isGroupActive && isPanelVisible,
@@ -3943,15 +3927,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    function debounce(cb, wait) {
-        let timeout;
-        const callable = (...args) => {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => cb(...args), wait);
-        };
-        return callable;
-    }
-
     class DefaultDeserializer {
         constructor(layout, panelDeserializer) {
             this.layout = layout;
@@ -4052,9 +4027,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._isGroupActive = false;
             //
             this.params = {};
-            //
-            this.isDirtyDisposable = new MutableDisposable();
-            this.addDisposables(this.isDirtyDisposable);
             this._element = document.createElement('div');
             this._element.className = 'default-tab';
             //
@@ -4099,10 +4071,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         init(params) {
             this.params = params;
             this._content.textContent = params.title;
-            this.isDirtyDisposable.value = this.params.api.onDidDirtyChange((event) => {
-                const isDirty = event;
-                toggleClass(this.action, 'dirty', isDirty);
-            });
             if (!this.params.suppressClosable) {
                 addDisposableListener(this.action, 'click', (ev) => {
                     ev.preventDefault(); //
@@ -4156,6 +4124,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get height() {
             return this._height;
         }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         focus() {
             this.api._onFocusEvent.fire();
         }
@@ -4164,29 +4136,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._height = height;
             this.api._onDidPanelDimensionChange.fire({ width, height });
             if (this.part) {
-                if (this.params) {
-                    this.part.update(this.params.params);
+                if (this._params) {
+                    this.part.update(this._params.params);
                 }
             }
         }
         init(parameters) {
-            this.params = parameters;
+            this._params = parameters;
             this.part = this.getComponent();
         }
         update(event) {
             var _a, _b;
-            this.params = Object.assign(Object.assign({}, this.params), { params: Object.assign(Object.assign({}, (_a = this.params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
-            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this.params.params });
+            this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+            (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
         }
         toJSON() {
             var _a, _b;
-            const state = this.api.getState();
-            const params = (_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
+            const params = (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {};
             return {
                 id: this.id,
                 component: this.component,
                 params: Object.keys(params).length > 0 ? params : undefined,
-                state: Object.keys(state).length === 0 ? undefined : state,
             };
         }
         dispose() {
@@ -4209,12 +4179,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this.api.onVisibilityChange((event) => {
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params;
+                const { containerApi } = this._params;
                 containerApi.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this.params;
+                const { containerApi } = this._params;
                 containerApi.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumWidth === 'number' ||
@@ -4329,9 +4299,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const minimum = (value) => (value <= 0 ? undefined : value);
             return Object.assign(Object.assign({}, state), { minimumHeight: minimum(this.minimumHeight), maximumHeight: maximum(this.maximumHeight), minimumWidth: minimum(this.minimumWidth), maximumWidth: maximum(this.maximumWidth), snap: this.snap, priority: this.priority });
         }
-        dispose() {
-            super.dispose();
-        }
     }
 
     class GroupviewPanel extends GridviewPanel {
@@ -4403,7 +4370,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.tab.init(params);
         }
         updateParentGroup(group, isPanelVisible) {
-            // TODO
+            var _a;
+            this._content.updateParentGroup(group, isPanelVisible);
+            (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
         }
         layout(width, height) {
             this.content.layout(width, height);
@@ -4436,15 +4405,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: options.orientation || exports.Orientation.HORIZONTAL,
                 styles: options.styles,
             });
-            this._panels = new Map();
-            this.dirtyPanels = new Set();
-            this.debouncedDeque = debounce(this.syncConfigs.bind(this), 5000);
             // events
             this._onTabInteractionEvent = new Emitter();
             this.onTabInteractionEvent = this._onTabInteractionEvent.event;
             this._onTabContextMenu = new Emitter();
             this.onTabContextMenu = this._onTabContextMenu.event;
-            this.panelState = {};
+            this._onDidDrop = new Emitter();
+            this.onDidDrop = this._onDidDrop.event;
+            this._onDidRemovePanel = new Emitter();
+            this.onDidRemovePanel = this._onDidRemovePanel.event;
+            this._onDidAddPanel = new Emitter();
+            this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -4465,10 +4441,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._api = new DockviewApi(this);
         }
         get totalPanels() {
-            return this._panels.size;
+            return this.panels.length;
         }
         get panels() {
-            return Array.from(this._panels.values()).map((_) => _.value);
+            return this.groups.flatMap((group) => group.model.panels);
         }
         get deserializer() {
             return this._deserializer;
@@ -4498,10 +4474,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.options.orientation !== options.orientation;
-            // TODO support style update
-            // const hasStylesChanged =
-            //     typeof options.styles === 'object' &&
-            //     this.options.styles !== options.styles;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4513,8 +4485,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
         }
         getGroupPanel(id) {
-            var _a;
-            return (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.value;
+            return this.panels.find((panel) => panel.id === id);
         }
         setActivePanel(panel) {
             if (!panel.group) {
@@ -4563,24 +4534,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.doSetGroupActive(next);
             }
         }
-        registerPanel(panel) {
-            if (this._panels.has(panel.id)) {
-                throw new Error(`panel ${panel.id} already exists`);
-            }
-            const disposable = new CompositeDisposable(panel.onDidStateChange(() => this.addDirtyPanel(panel)));
-            this._panels.set(panel.id, { value: panel, disposable });
-        }
-        unregisterPanel(panel) {
-            if (!this._panels.has(panel.id)) {
-                throw new Error(`panel ${panel.id} doesn't exist`);
-            }
-            const item = this._panels.get(panel.id);
-            if (item) {
-                item.disposable.dispose();
-                item.value.dispose();
-            }
-            this._panels.delete(panel.id);
-        }
         /**
          * Serialize the current state of the layout
          *
@@ -4588,12 +4541,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
          */
         toJSON() {
             var _a;
-            this.syncConfigs();
             const data = this.gridview.serialize();
-            const panels = Array.from(this._panels.values()).reduce((collection, panel) => {
-                if (!this.panelState[panel.value.id]) {
-                    collection[panel.value.id] = panel.value.toJSON();
-                }
+            const panels = this.panels.reduce((collection, panel) => {
+                collection[panel.id] = panel.toJSON();
                 return collection;
             }, {});
             return {
@@ -4605,11 +4555,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         fromJSON(data) {
             this.gridview.clear();
-            this._panels.forEach((panel) => {
-                panel.disposable.dispose();
-                panel.value.dispose();
+            this.panels.forEach((panel) => {
+                panel.dispose();
             });
-            this._panels.clear();
             this._groups.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
@@ -4624,9 +4572,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.gridview.deserialize(grid, new DefaultDeserializer(this, {
                 createPanel: (id) => {
                     const panelData = panels[id];
-                    const panel = this.deserializer.fromJSON(panelData);
-                    this.registerPanel(panel);
-                    return panel;
+                    return this.deserializer.fromJSON(panelData);
                 },
             }));
             if (typeof activeGroup === 'string') {
@@ -4637,30 +4583,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.gridview.layout(this.width, this.height);
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+            this._onDidLayoutfromJSON.fire();
         }
         closeAllGroups() {
-            return __awaiter(this, void 0, void 0, function* () {
-                for (const entry of this._groups.entries()) {
-                    const [_, group] = entry;
-                    const didCloseAll = yield group.value.model.closeAllPanels();
-                    if (!didCloseAll) {
-                        return false;
-                    }
-                }
-                return true;
-            });
+            for (const entry of this._groups.entries()) {
+                const [_, group] = entry;
+                group.value.model.closeAllPanels();
+            }
         }
         fireMouseEvent(event) {
-            switch (event.kind) {
-                case exports.MouseEventKind.CONTEXT_MENU:
-                    if (event.tab && event.panel) {
-                        this._onTabContextMenu.fire({
-                            event: event.event,
-                            api: this._api,
-                            panel: event.panel,
-                        });
-                    }
-                    break;
+            if (event.kind === exports.MouseEventKind.CONTEXT_MENU) {
+                if (event.tab && event.panel) {
+                    this._onTabContextMenu.fire({
+                        event: event.event,
+                        api: this._api,
+                        panel: event.panel,
+                    });
+                }
             }
         }
         addPanel(options) {
@@ -4694,7 +4633,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return panel;
         }
         removePanel(panel) {
-            this.unregisterPanel(panel);
             const group = panel.group;
             if (!group) {
                 throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
@@ -4713,10 +4651,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
         }
         addEmptyGroup(options) {
-            var _a;
             const group = this.createGroup();
             if (options) {
-                const referencePanel = (_a = this._panels.get(options.referencePanel)) === null || _a === void 0 ? void 0 : _a.value;
+                const referencePanel = this.panels.find((panel) => panel.id === options.referencePanel);
                 if (!referencePanel) {
                     throw new Error(`reference panel ${options.referencePanel} does not exist`);
                 }
@@ -4745,13 +4682,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             super.removeGroup(group);
         }
         moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
-            var _a, _b, _c;
+            var _a;
             const sourceGroup = groupId
                 ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
                 : undefined;
             if (!target || target === exports.Position.Center) {
                 const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    ((_b = this._panels.get(itemId)) === null || _b === void 0 ? void 0 : _b.value);
+                    this.panels.find((panel) => panel.id === itemId);
                 if (!groupItem) {
                     throw new Error(`No panel with id ${itemId}`);
                 }
@@ -4787,7 +4724,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 else {
                     const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                        ((_c = this._panels.get(itemId)) === null || _c === void 0 ? void 0 : _c.value);
+                        this.panels.find((panel) => panel.id === itemId);
                     if (!groupItem) {
                         throw new Error(`No panel with id ${itemId}`);
                     }
@@ -4797,7 +4734,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         doSetGroupActive(group, skipFocus) {
-            var _a, _b;
+            var _a, _b, _c;
             const isGroupAlreadyFocused = this._activeGroup === group;
             super.doSetGroupActive(group, skipFocus);
             if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
@@ -4805,6 +4742,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     kind: exports.GroupChangeKind.PANEL_ACTIVE,
                     panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
                 });
+                this._onDidActivePanelChange.fire((_c = this._activeGroup) === null || _c === void 0 ? void 0 : _c.model.activePanel);
             }
         }
         createGroup(options) {
@@ -4830,6 +4768,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
+                }), view.model.onDidDrop((event) => {
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
@@ -4837,24 +4777,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 kind: exports.GroupChangeKind.ADD_PANEL,
                                 panel: event.panel,
                             });
-                            break;
-                        case exports.GroupChangeKind2.GROUP_ACTIVE:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.GROUP_ACTIVE,
-                                panel: event.panel,
-                            });
+                            if (event.panel) {
+                                this._onDidAddPanel.fire(event.panel);
+                            }
                             break;
                         case exports.GroupChangeKind2.REMOVE_PANEL:
                             this._onGridEvent.fire({
                                 kind: exports.GroupChangeKind.REMOVE_PANEL,
                                 panel: event.panel,
                             });
+                            if (event.panel) {
+                                this._onDidRemovePanel.fire(event.panel);
+                            }
                             break;
                         case exports.GroupChangeKind2.PANEL_ACTIVE:
                             this._onGridEvent.fire({
                                 kind: exports.GroupChangeKind.PANEL_ACTIVE,
                                 panel: event.panel,
                             });
+                            this._onDidActivePanelChange.fire(event.panel);
                             break;
                     }
                 }));
@@ -4868,44 +4809,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return view;
         }
-        dispose() {
-            super.dispose();
-            this._onGridEvent.dispose();
-        }
-        /**
-         * Ensure the local copy of the layout state is up-to-date
-         */
-        syncConfigs() {
-            const dirtyPanels = Array.from(this.dirtyPanels);
-            if (dirtyPanels.length === 0) ;
-            this.dirtyPanels.clear();
-            const partialPanelState = dirtyPanels
-                .map((panel) => this._panels.get(panel.id))
-                .filter((_) => !!_)
-                .reduce((collection, panel) => {
-                collection[panel.value.id] = panel.value.toJSON();
-                return collection;
-            }, {});
-            this.panelState = Object.assign(Object.assign({}, this.panelState), partialPanelState);
-            dirtyPanels
-                .filter((p) => this._panels.has(p.id))
-                .forEach((panel) => {
-                panel.setDirty(false);
-            });
-        }
         _addPanel(options) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent),
             });
-            const panel = new DockviewGroupPanel(options.id, this._api);
+            const panel = new DockviewGroupPanel(options.id, this, this._api);
             panel.init({
                 view,
                 title: options.title || options.id,
                 suppressClosable: options === null || options === void 0 ? void 0 : options.suppressClosable,
                 params: (options === null || options === void 0 ? void 0 : options.params) || {},
             });
-            this.registerPanel(panel);
             return panel;
         }
         createContentComponent(id, componentName) {
@@ -4925,10 +4840,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
-        addDirtyPanel(panel) {
-            this.dirtyPanels.add(panel);
-            panel.setDirty(true);
-            this.debouncedDeque();
+        dispose() {
+            super.dispose();
+            this._onDidActivePanelChange.dispose();
+            this._onDidAddPanel.dispose();
+            this._onDidRemovePanel.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
@@ -4939,6 +4856,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: options.orientation,
                 styles: options.styles,
             });
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -5047,6 +4966,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
+            this._onDidLayoutfromJSON.fire();
         }
         movePanel(panel, options) {
             var _a;
@@ -5161,6 +5081,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             super.dispose();
+            this._onDidLayoutfromJSON.dispose();
         }
     }
 
@@ -5173,6 +5094,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.element = element;
             this._disposable = new MutableDisposable();
             this.panels = new Map();
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._options = options;
@@ -5183,7 +5108,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.frameworkComponents = {};
             }
             this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable);
+            this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
         }
         get options() {
             return this._options;
@@ -5198,7 +5123,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._splitview = value;
             this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
                 this._onDidLayoutChange.fire(undefined);
-            }));
+            }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
         }
         get minimumSize() {
             return this.splitview.minimumSize;
@@ -5372,6 +5297,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         });
                         panel.orientation = orientation;
                         this.doAddView(panel);
+                        setTimeout(() => {
+                            // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                            this._onDidAddView.fire(panel);
+                        }, 0);
                         return { size: view.size, view: panel };
                     }),
                 },
@@ -5401,41 +5330,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    class DragHandler extends CompositeDisposable {
-        constructor(el) {
-            super();
-            this.el = el;
-            this.iframes = [];
-            this._onDragStart = new Emitter();
-            this.onDragStart = this._onDragStart.event;
-            this.configure();
-        }
-        configure() {
-            this.addDisposables(addDisposableListener(this.el, 'dragstart', (event) => {
-                var _a;
-                this.iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
-                this.el.classList.add('dragged');
-                setTimeout(() => this.el.classList.remove('dragged'), 0);
-                (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                this.disposable = this.getData();
-            }), addDisposableListener(this.el, 'dragend', (ev) => {
-                var _a;
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
-                (_a = this.disposable) === null || _a === void 0 ? void 0 : _a.dispose();
-                this.disposable = undefined;
-            }));
-        }
-    }
-
     class SplitviewPanelApiImpl extends PanelApiImpl {
         //
         constructor(id) {
@@ -5450,6 +5344,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onDidSizeChange = new Emitter();
             this.onDidSizeChange = this._onDidSizeChange.event;
+            this.addDisposables(this._onDidConstraintsChangeInternal, this._onDidConstraintsChange, this._onDidSizeChange);
         }
         setConstraints(value) {
             this._onDidConstraintsChangeInternal.fire(value);
@@ -5457,11 +5352,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         setSize(event) {
             this._onDidSizeChange.fire(event);
         }
-        dispose() {
-            super.dispose();
-            this._onDidConstraintsChange.dispose();
-            this._onDidSizeChange.dispose();
-        }
     }
 
     class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
@@ -5475,6 +5365,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onMouseEnter = this._onMouseEnter.event;
             this._onMouseLeave = new Emitter({});
             this.onMouseLeave = this._onMouseLeave.event;
+            this.addDisposables(this._onDidExpansionChange, this._onMouseEnter, this._onMouseLeave);
         }
         set pane(pane) {
             this._pane = pane;
@@ -5490,7 +5381,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     class PaneviewPanel extends BasePanelView {
-        constructor(id, component, headerComponent, orientation, isExpanded) {
+        constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
             super(id, component, new PaneviewPanelApiImpl(id));
             this.headerComponent = headerComponent;
             this._onDidChangeExpansionState = new Emitter({ replay: true });
@@ -5506,6 +5397,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.expandedSize = 0;
             this.api.pane = this; // TODO cannot use 'this' before 'super'
             this._isExpanded = isExpanded;
+            this._headerVisible = isHeaderVisible;
             this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
             this._orientation = orientation;
             this.element.classList.add('pane');
@@ -5573,6 +5465,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._maximumBodySize =
                 typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
         }
+        get headerVisible() {
+            return this._headerVisible;
+        }
+        set headerVisible(value) {
+            this._headerVisible = value;
+            this.header.style.display = value ? '' : 'none';
+        }
         setVisible(isVisible) {
             this.api._onDidVisibilityChange.fire({ isVisible });
         }
@@ -5635,7 +5534,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         toJSON() {
-            const params = this.params;
+            const params = this._params;
             return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
         }
         renderOnce() {
@@ -5670,7 +5569,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
     class DraggablePaneviewPanel extends PaneviewPanel {
         constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
-            super(id, component, headerComponent, orientation, isExpanded);
+            super(id, component, headerComponent, orientation, isExpanded, true);
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
             if (!disableDnd) {
@@ -5704,36 +5603,39 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             });
             this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-                const data = getPaneData();
-                if (!data) {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                    return;
-                }
-                const containerApi = this.params
-                    .containerApi;
-                const panelId = data.paneId;
-                const existingPanel = containerApi.getPanel(panelId);
-                if (!existingPanel) {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                    return;
-                }
-                const allPanels = containerApi.getPanels();
-                const fromIndex = allPanels.indexOf(existingPanel);
-                let toIndex = containerApi.getPanels().indexOf(this);
-                if (event.position === exports.Position.Left ||
-                    event.position === exports.Position.Top) {
-                    toIndex = Math.max(0, toIndex - 1);
-                }
-                if (event.position === exports.Position.Right ||
-                    event.position === exports.Position.Bottom) {
-                    if (fromIndex > toIndex) {
-                        toIndex++;
-                    }
-                    toIndex = Math.min(allPanels.length - 1, toIndex);
-                }
-                containerApi.movePanel(fromIndex, toIndex);
+                this.onDrop(event);
             }));
         }
+        onDrop(event) {
+            const data = getPaneData();
+            if (!data) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const containerApi = this._params
+                .containerApi;
+            const panelId = data.paneId;
+            const existingPanel = containerApi.getPanel(panelId);
+            if (!existingPanel) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const allPanels = containerApi.getPanels();
+            const fromIndex = allPanels.indexOf(existingPanel);
+            let toIndex = containerApi.getPanels().indexOf(this);
+            if (event.position === exports.Position.Left ||
+                event.position === exports.Position.Top) {
+                toIndex = Math.max(0, toIndex - 1);
+            }
+            if (event.position === exports.Position.Right ||
+                event.position === exports.Position.Bottom) {
+                if (fromIndex > toIndex) {
+                    toIndex++;
+                }
+                toIndex = Math.min(allPanels.length - 1, toIndex);
+            }
+            containerApi.movePanel(fromIndex, toIndex);
+        }
     }
 
     class DefaultHeader extends CompositeDisposable {
@@ -5793,6 +5695,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
+            this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
             this._options = options;
             if (!options.components) {
                 options.components = {};
@@ -5806,17 +5713,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.addDisposables(this._disposable);
         }
-        get onDidAddView() {
-            return this._paneview.onDidAddView;
-        }
-        get onDidRemoveView() {
-            return this._paneview.onDidRemoveView;
-        }
         set paneview(value) {
             this._paneview = value;
-            this._disposable.value = new CompositeDisposable(this.paneview.onDidChange(() => {
+            this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
                 this._onDidLayoutChange.fire(undefined);
-            }));
+            }), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
         }
         get paneview() {
             return this._paneview;
@@ -5996,6 +5897,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             });
                             panel.orientation = this.paneview.orientation;
                         });
+                        setTimeout(() => {
+                            // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                            this._onDidAddView.fire(panel);
+                        }, 0);
                         return { size: view.size, view: panel };
                     }),
                 },
@@ -6022,12 +5927,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._snap = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.addDisposables(this.api.onVisibilityChange((event) => {
+            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params;
+                const { containerApi } = this
+                    ._params;
                 containerApi.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this.params;
+                const { containerApi } = this
+                    ._params;
                 containerApi.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumSize === 'number' ||
@@ -6170,14 +6077,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.disposed) {
                 throw new Error('invalid operation: resource is already disposed');
             }
-            // TODO use a better check for isReactFunctionalComponent
             if (typeof this.component !== 'function') {
                 /**
                  * 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.
                  */
-                throw new Error('invalid operation: only functional components are supported');
+                throw new Error('Invalid Operation. dockview only supports React Functional Components.');
             }
             const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
                 component: this
@@ -6241,16 +6147,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
+            this._element.className = 'dockview-react-part';
             // this.hostedContainer = new HostedContainer({
             //     id,
             // });
             // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
             // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
             this._actionsElement = document.createElement('div');
-            this._actionsElement.style.height = '100%';
-            this._actionsElement.style.width = '100%';
+            this._actionsElement.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6298,6 +6202,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             var _a, _b;
+            this._onDidFocus.dispose();
+            this._onDidBlur.dispose();
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
             // this.hostedContainer?.dispose();
             (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
@@ -6310,6 +6216,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.component = component;
             this.reactPortalStore = reactPortalStore;
             this._element = document.createElement('div');
+            this._element.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6354,7 +6261,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const panelId = panelData.id;
             const params = panelData.params;
             const title = panelData.title;
-            const state = panelData.state;
             const suppressClosable = panelData.suppressClosable;
             const viewData = panelData.view;
             const view = new DefaultGroupPanelView({
@@ -6363,13 +6269,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
                     : new DefaultTab(),
             });
-            const panel = new DockviewGroupPanel(panelId, new DockviewApi(this.layout));
+            const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout));
             panel.init({
                 view,
                 title,
                 suppressClosable,
                 params: params || {},
-                state: state || {},
             });
             return panel;
         }
@@ -6384,8 +6289,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 value: undefined,
             };
             this._element = document.createElement('div');
-            this._element.style.height = '100%';
-            this._element.style.width = '100%';
+            this._element.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
@@ -6483,12 +6387,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkTabComponents: props.tabComponents,
                 tabHeight: props.tabHeight,
                 debug: props.debug,
-                enableExternalDragEvents: props.enableExternalDragEvents,
                 watermarkFrameworkComponent: props.watermarkComponent,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
             });
+            const disposable = dockview.onDidDrop((event) => {
+                if (props.onDidDrop) {
+                    props.onDidDrop(event);
+                }
+            });
             (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
             dockview.deserializer = new ReactPanelDeserialzier(dockview);
             const { clientWidth, clientHeight } = domRef.current;
@@ -6498,6 +6406,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             dockviewRef.current = dockview;
             return () => {
+                disposable.dispose();
                 dockview.dispose();
             };
         }, []);
@@ -6509,6 +6418,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                showDndOverlay: props.showDndOverlay,
+            });
+        }, [props.showDndOverlay]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6597,9 +6514,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getComponent() {
             var _a;
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-                params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+                params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this.params
+                containerApi: this._params
                     .containerApi,
             });
         }
@@ -6672,9 +6589,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getComponent() {
             var _a;
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-                params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+                params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this.params
+                containerApi: this._params
                     .containerApi,
             });
         }
@@ -6865,7 +6782,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.BaseGrid = BaseGrid;
     exports.CompositeDisposable = CompositeDisposable;
     exports.ContentContainer = ContentContainer;
-    exports.DATA_KEY = DATA_KEY;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
     exports.DockviewComponents = DockviewComponents;
@@ -6897,9 +6813,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab$1;
+    exports.TickDelayedEvent = TickDelayedEvent;
     exports.addDisposableListener = addDisposableListener;
     exports.addDisposableWindowListener = addDisposableWindowListener;
-    exports.extractData = extractData;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;
@@ -6907,11 +6823,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.getPanelData = getPanelData;
     exports.getRelativeLocation = getRelativeLocation;
     exports.indexInParent = indexInParent;
-    exports.isCustomDragEvent = isCustomDragEvent;
     exports.isGridBranchNode = isGridBranchNode;
-    exports.isPanelTransferEvent = isPanelTransferEvent;
     exports.isReactElement = isReactElement;
-    exports.isTabDragEvent = isTabDragEvent;
     exports.orthogonal = orthogonal;
     exports.toTarget = toTarget;
     exports.usePortalsLifecycle = usePortalsLifecycle;