dockview 1.1.0 → 1.3.1

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.1.0
+ * @version 1.3.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -31,6 +31,76 @@
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
+    class TransferObject {
+        constructor() {
+            //
+        }
+    }
+    class PanelTransfer extends TransferObject {
+        constructor(viewId, groupId, panelId) {
+            super();
+            this.viewId = viewId;
+            this.groupId = groupId;
+            this.panelId = panelId;
+        }
+    }
+    class PaneTransfer extends TransferObject {
+        constructor(viewId, paneId) {
+            super();
+            this.viewId = viewId;
+            this.paneId = paneId;
+        }
+    }
+    /**
+     * A singleton to store transfer data during drag & drop operations that are only valid within the application.
+     */
+    class LocalSelectionTransfer {
+        constructor() {
+            // protect against external instantiation
+        }
+        static getInstance() {
+            return LocalSelectionTransfer.INSTANCE;
+        }
+        hasData(proto) {
+            return proto && proto === this.proto;
+        }
+        clearData(proto) {
+            if (this.hasData(proto)) {
+                this.proto = undefined;
+                this.data = undefined;
+            }
+        }
+        getData(proto) {
+            if (this.hasData(proto)) {
+                return this.data;
+            }
+            return undefined;
+        }
+        setData(data, proto) {
+            if (proto) {
+                this.data = data;
+                this.proto = proto;
+            }
+        }
+    }
+    LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
+    function getPanelData() {
+        const panelTransfer = LocalSelectionTransfer.getInstance();
+        const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
+        if (!isPanelEvent) {
+            return undefined;
+        }
+        return panelTransfer.getData(PanelTransfer.prototype)[0];
+    }
+    function getPaneData() {
+        const paneTransfer = LocalSelectionTransfer.getInstance();
+        const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
+        if (!isPanelEvent) {
+            return undefined;
+        }
+        return paneTransfer.getData(PaneTransfer.prototype)[0];
+    }
+
     exports.Event = void 0;
     (function (Event) {
         Event.any = (...children) => {
@@ -120,116 +190,6 @@
         }
     }
 
-    exports.Disposable = void 0;
-    (function (Disposable) {
-        Disposable.NONE = {
-            dispose: () => {
-                // noop
-            },
-        };
-    })(exports.Disposable || (exports.Disposable = {}));
-    class CompositeDisposable {
-        constructor(...args) {
-            this.disposables = args;
-        }
-        static from(...args) {
-            return new CompositeDisposable(...args);
-        }
-        addDisposables(...args) {
-            args.forEach((arg) => this.disposables.push(arg));
-        }
-        dispose() {
-            this.disposables.forEach((arg) => arg.dispose());
-        }
-    }
-    class MutableDisposable {
-        constructor() {
-            this._disposable = exports.Disposable.NONE;
-        }
-        set value(disposable) {
-            if (this._disposable) {
-                this._disposable.dispose();
-            }
-            this._disposable = disposable;
-        }
-        dispose() {
-            if (this._disposable) {
-                this._disposable.dispose();
-                this._disposable = exports.Disposable.NONE;
-            }
-        }
-    }
-
-    class TransferObject {
-        constructor() {
-            //
-        }
-    }
-    class PanelTransfer extends TransferObject {
-        constructor(viewId, groupId, panelId) {
-            super();
-            this.viewId = viewId;
-            this.groupId = groupId;
-            this.panelId = panelId;
-        }
-    }
-    class PaneTransfer extends TransferObject {
-        constructor(viewId, paneId) {
-            super();
-            this.viewId = viewId;
-            this.paneId = paneId;
-        }
-    }
-    /**
-     * A singleton to store transfer data during drag & drop operations that are only valid within the application.
-     */
-    class LocalSelectionTransfer {
-        constructor() {
-            // protect against external instantiation
-        }
-        static getInstance() {
-            return LocalSelectionTransfer.INSTANCE;
-        }
-        hasData(proto) {
-            return proto && proto === this.proto;
-        }
-        clearData(proto) {
-            if (this.hasData(proto)) {
-                this.proto = undefined;
-                this.data = undefined;
-            }
-        }
-        getData(proto) {
-            if (this.hasData(proto)) {
-                return this.data;
-            }
-            return undefined;
-        }
-        setData(data, proto) {
-            if (proto) {
-                this.data = data;
-                this.proto = proto;
-            }
-        }
-    }
-    LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
-    function getPanelData() {
-        const panelTransfer = LocalSelectionTransfer.getInstance();
-        const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
-        if (!isPanelEvent) {
-            return undefined;
-        }
-        return panelTransfer.getData(PanelTransfer.prototype)[0];
-    }
-    function getPaneData() {
-        const paneTransfer = LocalSelectionTransfer.getInstance();
-        const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
-        if (!isPanelEvent) {
-            return undefined;
-        }
-        return paneTransfer.getData(PaneTransfer.prototype)[0];
-    }
-
     class SplitviewApi {
         constructor(component) {
             this.component = component;
@@ -252,6 +212,9 @@
         get orientation() {
             return this.component.orientation;
         }
+        get onDidLayoutFromJSON() {
+            return this.component.onDidLayoutFromJSON;
+        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -294,8 +257,8 @@
         movePanel(from, to) {
             this.component.movePanel(from, to);
         }
-        fromJSON(data, deferComponentLayout) {
-            this.component.fromJSON(data, deferComponentLayout);
+        fromJSON(data) {
+            this.component.fromJSON(data);
         }
         toJSON() {
             return this.component.toJSON();
@@ -320,6 +283,9 @@
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidLayoutFromJSON() {
+            return this.component.onDidLayoutFromJSON;
+        }
         get onDidAddView() {
             return this.component.onDidAddView;
         }
@@ -356,13 +322,13 @@
             this.component.layout(width, height);
         }
         addPanel(options) {
-            return this.component.addPanel(options);
+            this.component.addPanel(options);
         }
         resizeToFit() {
             this.component.resizeToFit();
         }
-        fromJSON(data, deferComponentLayout) {
-            this.component.fromJSON(data, deferComponentLayout);
+        fromJSON(data) {
+            this.component.fromJSON(data);
         }
         toJSON() {
             return this.component.toJSON();
@@ -390,9 +356,6 @@
         get height() {
             return this.component.height;
         }
-        get onGridEvent() {
-            return this.component.onGridEvent;
-        }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
@@ -447,8 +410,8 @@
         setActive(panel) {
             this.component.setActive(panel);
         }
-        fromJSON(data, deferComponentLayout) {
-            return this.component.fromJSON(data, deferComponentLayout);
+        fromJSON(data) {
+            return this.component.fromJSON(data);
         }
         toJSON() {
             return this.component.toJSON();
@@ -482,9 +445,6 @@
         get totalPanels() {
             return this.component.totalPanels;
         }
-        get onGridEvent() {
-            return this.component.onGridEvent;
-        }
         get onDidActiveGroupChange() {
             return this.component.onDidActiveGroupChange;
         }
@@ -503,7 +463,7 @@
         get onDidRemovePanel() {
             return this.component.onDidRemovePanel;
         }
-        get onDidLayoutfromJSON() {
+        get onDidLayoutFromJSON() {
             return this.component.onDidLayoutfromJSON;
         }
         get onDidLayoutChange() {
@@ -568,6 +528,46 @@
         }
     }
 
+    var Disposable;
+    (function (Disposable) {
+        Disposable.NONE = {
+            dispose: () => {
+                // noop
+            },
+        };
+    })(Disposable || (Disposable = {}));
+    class CompositeDisposable {
+        constructor(...args) {
+            this.disposables = args;
+        }
+        static from(...args) {
+            return new CompositeDisposable(...args);
+        }
+        addDisposables(...args) {
+            args.forEach((arg) => this.disposables.push(arg));
+        }
+        dispose() {
+            this.disposables.forEach((arg) => arg.dispose());
+        }
+    }
+    class MutableDisposable {
+        constructor() {
+            this._disposable = Disposable.NONE;
+        }
+        set value(disposable) {
+            if (this._disposable) {
+                this._disposable.dispose();
+            }
+            this._disposable = disposable;
+        }
+        dispose() {
+            if (this._disposable) {
+                this._disposable.dispose();
+                this._disposable = Disposable.NONE;
+            }
+        }
+    }
+
     function watchElementResize(element, cb) {
         const observer = new ResizeObserver((entires) => {
             const firstEntry = entires[0];
@@ -1513,13 +1513,13 @@
             this._onDidSashEnd.dispose();
             this._onDidAddView.dispose();
             this._onDidRemoveView.dispose();
-            this.element.remove();
             for (let i = 0; i < this.element.children.length; i++) {
                 if (this.element.children.item(i) === this.element) {
                     this.element.removeChild(this.element);
                     break;
                 }
             }
+            this.element.remove();
         }
     }
 
@@ -1542,7 +1542,7 @@
             });
             // if we've added views from the descriptor we need to
             // add the panes to our Pane array and setup animation
-            this.getPanes().forEach((pane, index) => {
+            this.getPanes().forEach((pane) => {
                 const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
                     this.setupAnimation();
                     this._onDidChange.fire(undefined);
@@ -1610,17 +1610,20 @@
         getPanes() {
             return this.splitview.getViews();
         }
-        removePane(index) {
+        removePane(index, options = { skipDispose: false }) {
             const paneItem = this.paneItems.splice(index, 1)[0];
             this.splitview.removeView(index);
-            paneItem.disposable.dispose();
+            if (!options.skipDispose) {
+                paneItem.disposable.dispose();
+                paneItem.pane.dispose();
+            }
             return paneItem;
         }
         moveView(from, to) {
             if (from === to) {
                 return;
             }
-            const view = this.removePane(from);
+            const view = this.removePane(from, { skipDispose: true });
             this.skipAnimation = true;
             try {
                 this.addPane(view.pane, view.pane.size, to, false);
@@ -1648,15 +1651,16 @@
         }
         dispose() {
             super.dispose();
-            this.splitview.dispose();
             if (this.animationTimer) {
                 clearTimeout(this.animationTimer);
                 this.animationTimer = undefined;
             }
             this.paneItems.forEach((paneItem) => {
                 paneItem.disposable.dispose();
+                paneItem.pane.dispose();
             });
             this.paneItems = [];
+            this.splitview.dispose();
             this.element.remove();
         }
     }
@@ -1720,7 +1724,7 @@
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
             this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
-                onDragEnter: (e) => undefined,
+                onDragEnter: () => undefined,
                 onDragOver: (e) => {
                     if (isBooleanValue(this.options.canDisplayOverlay)) {
                         if (!this.options.canDisplayOverlay) {
@@ -1761,10 +1765,10 @@
                     this.toggleClasses(quadrant, isSmallX, isSmallY);
                     this.setState(quadrant);
                 },
-                onDragLeave: (e) => {
+                onDragLeave: () => {
                     this.removeDropTarget();
                 },
-                onDragEnd: (e) => {
+                onDragEnd: () => {
                     this.removeDropTarget();
                 },
                 onDrop: (e) => {
@@ -1975,7 +1979,7 @@
             this.children = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this._childrenDisposable = exports.Disposable.NONE;
+            this._childrenDisposable = Disposable.NONE;
             this._orthogonalSize = orthogonalSize;
             this._size = size;
             this.element = document.createElement('div');
@@ -2000,7 +2004,7 @@
                                 : true,
                         };
                     }),
-                    size: this.orthogonalSize,
+                    size: this.size,
                 };
                 this.children = childDescriptors.map((c) => c.node);
                 this.splitview = new Splitview(this.element, {
@@ -2161,7 +2165,7 @@
         }
         setupChildrenEvents() {
             this._childrenDisposable.dispose();
-            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+            this._childrenDisposable = exports.Event.any(...this.children.map((c) => c.onDidChange))(() => {
                 /**
                  * indicate a change has occured to allows any re-rendering but don't bubble
                  * event because that was specific to this branch
@@ -2321,6 +2325,7 @@
             this.disposable.dispose();
             this._onDidChange.dispose();
             this.root.dispose();
+            this.element.remove();
         }
         clear() {
             const orientation = this.root.orientation;
@@ -2523,7 +2528,7 @@
             const [parentIndex, ...__] = [...rest].reverse();
             const isSiblingVisible = parent.isChildVisible(0);
             parent.removeChild(0, sizing);
-            const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
+            const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
             grandParent.removeChild(parentIndex, sizing);
             if (sibling instanceof BranchNode) {
                 sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
@@ -2622,7 +2627,7 @@
             }
             this.disposable.value = disposable;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         closePanel() {
@@ -2670,7 +2675,7 @@
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
                 }
-            }), addDisposableListener(this.el, 'dragend', (ev) => {
+            }), addDisposableListener(this.el, 'dragend', () => {
                 for (const iframe of this.iframes) {
                     iframe.style.pointerEvents = 'auto';
                 }
@@ -3037,6 +3042,9 @@
         get maximumWidth() {
             return Number.MAX_SAFE_INTEGER;
         }
+        get hasWatermark() {
+            return !!(this.watermark && this.container.contains(this.watermark.element));
+        }
         initialize() {
             var _a, _b;
             if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
@@ -3115,10 +3123,10 @@
         containsPanel(panel) {
             return this.panels.includes(panel);
         }
-        init(params) {
+        init(_params) {
             //noop
         }
-        update(params) {
+        update(_params) {
             //noop
         }
         focus() {
@@ -3341,29 +3349,18 @@
             }
         }
         dispose() {
+            var _a;
+            super.dispose();
+            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose();
             for (const panel of this.panels) {
                 panel.dispose();
             }
-            super.dispose();
             this.dropTarget.dispose();
             this.tabsContainer.dispose();
             this.contentContainer.dispose();
         }
     }
 
-    exports.GroupChangeKind = void 0;
-    (function (GroupChangeKind) {
-        GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
-        GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
-        GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-        //
-        GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
-        GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
-        GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
-        //
-        GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
-        GroupChangeKind["LAYOUT"] = "LAYOUT";
-    })(exports.GroupChangeKind || (exports.GroupChangeKind = {}));
     const nextLayoutId = sequentialNumberGenerator();
     function toTarget(direction) {
         switch (direction) {
@@ -3386,9 +3383,6 @@
             this._element = _element;
             this._id = nextLayoutId.next();
             this._groups = new Map();
-            //
-            this._onGridEvent = new Emitter();
-            this.onGridEvent = this._onGridEvent.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidRemoveGroup = new Emitter();
@@ -3397,30 +3391,18 @@
             this.onDidAddGroup = this._onDidAddGroup.event;
             this._onDidActiveGroupChange = new Emitter();
             this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+            this._bufferOnDidLayoutChange = new TickDelayedEvent();
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
-                this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+                this._onDidLayoutChange.fire();
             }));
-            this.addDisposables((() => {
-                const tickDelayedEvent = new TickDelayedEvent();
-                return new CompositeDisposable(this.onGridEvent((event) => {
-                    if ([
-                        exports.GroupChangeKind.ADD_GROUP,
-                        exports.GroupChangeKind.REMOVE_GROUP,
-                        exports.GroupChangeKind.ADD_PANEL,
-                        exports.GroupChangeKind.REMOVE_PANEL,
-                        exports.GroupChangeKind.GROUP_ACTIVE,
-                        exports.GroupChangeKind.PANEL_ACTIVE,
-                        exports.GroupChangeKind.LAYOUT,
-                    ].includes(event.kind)) {
-                        tickDelayedEvent.fire();
-                    }
-                }), tickDelayedEvent.onEvent(() => {
-                    this._onDidLayoutChange.fire();
-                }), tickDelayedEvent);
-            })());
+            this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange.onEvent(() => {
+                this._onDidLayoutChange.fire();
+            }), this._bufferOnDidLayoutChange);
         }
         get id() {
             return this._id;
@@ -3457,14 +3439,13 @@
         }
         setVisible(panel, visible) {
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
+            this._onDidLayoutChange.fire();
         }
         isVisible(panel) {
             return this.gridview.isViewVisible(getGridLocation(panel.element));
         }
         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);
         }
@@ -3476,9 +3457,9 @@
             const view = this.gridview.remove(group, exports.Sizing.Distribute);
             if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
                 item.disposable.dispose();
+                item.value.dispose();
                 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());
@@ -3507,9 +3488,6 @@
                 }
             }
             this._activeGroup = group;
-            this._onGridEvent.fire({
-                kind: exports.GroupChangeKind.GROUP_ACTIVE,
-            });
             this._onDidActiveGroupChange.fire(group);
         }
         removeGroup(group) {
@@ -3566,11 +3544,13 @@
         }
         dispose() {
             super.dispose();
-            this._onGridEvent.dispose();
             this._onDidActiveGroupChange.dispose();
             this._onDidAddGroup.dispose();
             this._onDidRemoveGroup.dispose();
             this._onDidLayoutChange.dispose();
+            for (const group of this.groups) {
+                group.dispose();
+            }
             this.gridview.dispose();
         }
     }
@@ -3748,6 +3728,10 @@
                 this.update({ params: { title } });
             }));
         }
+        get params() {
+            var _a;
+            return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+        }
         get title() {
             return this._title;
         }
@@ -3896,7 +3880,7 @@
         get id() {
             return 'watermark';
         }
-        update(event) {
+        update(_event) {
             // noop
         }
         focus() {
@@ -3905,17 +3889,17 @@
         toJSON() {
             return {};
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         init(params) {
             this.params = params;
-            this.addDisposables(this.params.containerApi.onDidLayoutChange((event) => {
+            this.addDisposables(this.params.containerApi.onDidLayoutChange(() => {
                 this.render();
             }));
             this.render();
         }
-        updateParentGroup(group, visible) {
+        updateParentGroup(group, _visible) {
             this.group = group;
             this.render();
         }
@@ -4090,7 +4074,7 @@
             this._isGroupActive = group.isActive;
             this.render();
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
         }
         render() {
@@ -4164,8 +4148,10 @@
             };
         }
         dispose() {
+            var _a;
             super.dispose();
             this.api.dispose();
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
@@ -4424,7 +4410,9 @@
             this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
+            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }));
             this._options = options;
             if (!this.options.components) {
                 this.options.components = {};
@@ -4558,11 +4546,12 @@
             };
         }
         fromJSON(data) {
+            const groups = Array.from(this._groups.values()).map((_) => _.value);
+            for (const group of groups) {
+                // remove the group will automatically remove the panels
+                this.removeGroup(group, true);
+            }
             this.gridview.clear();
-            this.panels.forEach((panel) => {
-                panel.dispose();
-            });
-            this._groups.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
             }
@@ -4586,7 +4575,6 @@
                 }
             }
             this.gridview.layout(this.width, this.height);
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
             this._onDidLayoutfromJSON.fire();
         }
         closeAllGroups() {
@@ -4608,7 +4596,10 @@
         }
         addPanel(options) {
             var _a, _b;
-            const panel = this._addPanel(options);
+            if (this.panels.find((_) => _.id === options.id)) {
+                throw new Error(`panel with id ${options.id} already exists`);
+            }
+            const panel = this.createPanel(options);
             let referenceGroup;
             if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
                 const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -4636,13 +4627,20 @@
             }
             return panel;
         }
-        removePanel(panel) {
+        removePanel(panel, options = {
+            removeEmptyGroup: true,
+            skipDispose: false,
+        }) {
             const group = panel.group;
             if (!group) {
                 throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
             }
             group.model.removePanel(panel);
-            if (group.model.size === 0) {
+            panel.dispose();
+            const retainGroupForWatermark = this.size === 1;
+            if (!retainGroupForWatermark &&
+                group.model.size === 0 &&
+                options.removeEmptyGroup) {
                 this.removeGroup(group);
             }
         }
@@ -4674,16 +4672,15 @@
                 this.doAddGroup(group);
             }
         }
-        removeGroup(group) {
+        removeGroup(group, skipActive = false) {
             const panels = [...group.model.panels]; // reassign since group panels will mutate
-            panels.forEach((panel) => {
-                this.removePanel(panel);
-            });
-            if (this._groups.size === 1) {
-                this._activeGroup = group;
-                return;
+            for (const panel of panels) {
+                this.removePanel(panel, {
+                    removeEmptyGroup: false,
+                    skipDispose: false,
+                });
             }
-            super.removeGroup(group);
+            super.doRemoveGroup(group, { skipActive });
         }
         moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
             var _a;
@@ -4738,15 +4735,11 @@
             }
         }
         doSetGroupActive(group, skipFocus) {
-            var _a, _b, _c;
+            var _a, _b;
             const isGroupAlreadyFocused = this._activeGroup === group;
             super.doSetGroupActive(group, skipFocus);
             if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-                this._onGridEvent.fire({
-                    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);
+                this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
             }
         }
         createGroup(options) {
@@ -4768,6 +4761,7 @@
                 }
             }
             const view = new GroupviewPanel(this, id, options);
+            view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
             if (!this._groups.has(view.id)) {
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
@@ -4777,28 +4771,16 @@
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
-                            this._onGridEvent.fire({
-                                kind: exports.GroupChangeKind.ADD_PANEL,
-                                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;
                     }
@@ -4813,7 +4795,7 @@
             }
             return view;
         }
-        _addPanel(options) {
+        createPanel(options) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
                 tab: this.createTabComponent(options.id, options.tabComponent),
@@ -4914,7 +4896,7 @@
             this.gridview.setViewVisible(getGridLocation(panel.element), visible);
         }
         setActive(panel) {
-            this._groups.forEach((value, key) => {
+            this._groups.forEach((value, _key) => {
                 value.value.setActive(panel === value.value);
             });
         }
@@ -4925,10 +4907,14 @@
             var _a;
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        fromJSON(serializedGridview, deferComponentLayout) {
+        fromJSON(serializedGridview) {
             const { grid, activePanel } = serializedGridview;
+            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+            for (const group of groups) {
+                group.disposable.dispose();
+                this.doRemoveGroup(group.value, { skipActive: true });
+            }
             this.gridview.clear();
-            this._groups.clear();
             const queue = [];
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
@@ -4955,21 +4941,13 @@
                 },
             });
             this.layout(this.width, this.height, true);
-            if (deferComponentLayout) {
-                setTimeout(() => {
-                    queue.forEach((f) => f());
-                }, 0);
-            }
-            else {
-                queue.forEach((f) => f());
-            }
+            queue.forEach((f) => f());
             if (typeof activePanel === 'string') {
                 const panel = this.getPanel(activePanel);
                 if (panel) {
                     this.doSetGroupActive(panel);
                 }
             }
-            this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT_FROM_JSON });
             this._onDidLayoutfromJSON.fire();
         }
         movePanel(panel, options) {
@@ -5026,7 +5004,6 @@
             });
             this.registerPanel(view);
             this.doAddGroup(view, relativeLocation, options.size);
-            return { api: view.api };
         }
         registerPanel(panel) {
             const disposable = new CompositeDisposable(panel.api.onDidFocusChange((event) => {
@@ -5077,11 +5054,6 @@
         }
         removeGroup(group) {
             super.removeGroup(group);
-            const panel = this._groups.get(group.id);
-            if (panel) {
-                panel.disposable.dispose();
-                this._groups.delete(group.id);
-            }
         }
         dispose() {
             super.dispose();
@@ -5098,6 +5070,8 @@
             this.element = element;
             this._disposable = new MutableDisposable();
             this.panels = new Map();
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
             this._onDidAddView = new Emitter();
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
@@ -5112,7 +5086,7 @@
                 options.frameworkComponents = {};
             }
             this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
+            this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
         }
         get options() {
             return this._options;
@@ -5188,7 +5162,11 @@
         }
         removePanel(panel, sizing) {
             const disposable = this.panels.get(panel.id);
-            disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
+            if (!disposable) {
+                throw new Error(`unknown splitview panel ${panel.id}`);
+            }
+            disposable.disposable.dispose();
+            disposable.value.dispose();
             this.panels.delete(panel.id);
             const index = this.getPanels().findIndex((_) => _ === panel);
             this.splitview.removeView(index, sizing);
@@ -5247,7 +5225,7 @@
                 }
                 this.setActive(view, true);
             });
-            this.panels.set(view.id, disposable);
+            this.panels.set(view.id, { disposable, value: view });
         }
         toJSON() {
             var _a;
@@ -5269,8 +5247,13 @@
                 orientation: this.splitview.orientation,
             };
         }
-        fromJSON(serializedSplitview, deferComponentLayout = false) {
+        fromJSON(serializedSplitview) {
             const { views, orientation, size, activeView } = serializedSplitview;
+            for (const [_, value] of this.panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
+            this.panels.clear();
             this.splitview.dispose();
             const queue = [];
             this.splitview = new Splitview(this.element, {
@@ -5310,26 +5293,22 @@
                 },
             });
             this.layout(this.width, this.height);
-            if (deferComponentLayout) {
-                setTimeout(() => {
-                    queue.forEach((f) => f());
-                }, 0);
-            }
-            else {
-                queue.forEach((f) => f());
-            }
+            queue.forEach((f) => f());
             if (typeof activeView === 'string') {
                 const panel = this.getPanel(activeView);
                 if (panel) {
                     this.setActive(panel);
                 }
             }
+            this._onDidLayoutfromJSON.fire();
         }
         dispose() {
-            Array.from(this.panels.values()).forEach((value) => {
-                value.dispose();
-            });
+            for (const [_, value] of this.panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
             this.panels.clear();
+            this.splitview.dispose();
             super.dispose();
         }
     }
@@ -5598,7 +5577,7 @@
             })(this.header);
             this.target = new Droptarget(this.element, {
                 validOverlays: 'vertical',
-                canDisplayOverlay: (event) => {
+                canDisplayOverlay: () => {
                     const data = getPaneData();
                     if (!data) {
                         return true;
@@ -5669,7 +5648,7 @@
                 this._expander.textContent = e.isExpanded ? '<' : '>';
             });
         }
-        update(params) {
+        update(_params) {
             //
         }
         dispose() {
@@ -5695,6 +5674,9 @@
             super();
             this.element = element;
             this._disposable = new MutableDisposable();
+            this._viewDisposables = new Map();
+            this._onDidLayoutfromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidDrop = new Emitter();
@@ -5703,7 +5685,7 @@
             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.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
             this._options = options;
             if (!options.components) {
                 options.components = {};
@@ -5779,9 +5761,7 @@
                 isExpanded: !!options.isExpanded,
                 disableDnd: !!this.options.disableDnd,
             });
-            const disposable = new CompositeDisposable(view.onDidDrop((event) => {
-                this._onDidDrop.fire(event);
-            }));
+            this.doAddPanel(view);
             const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
             const index = typeof options.index === 'number' ? options.index : undefined;
             view.init({
@@ -5794,7 +5774,7 @@
             });
             this.paneview.addPane(view, size, index);
             view.orientation = this.paneview.orientation;
-            return disposable;
+            return view;
         }
         getPanels() {
             return this.paneview.getPanes();
@@ -5803,6 +5783,7 @@
             const views = this.getPanels();
             const index = views.findIndex((_) => _ === panel);
             this.paneview.removePane(index);
+            this.doRemovePanel(panel);
         }
         movePanel(from, to) {
             this.paneview.moveView(from, to);
@@ -5849,9 +5830,13 @@
                 size: this.paneview.size,
             };
         }
-        fromJSON(serializedPaneview, deferComponentLayout) {
+        fromJSON(serializedPaneview) {
             const { views, size } = serializedPaneview;
             const queue = [];
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
             this.paneview.dispose();
             this.paneview = new Paneview(this.element, {
                 orientation: exports.Orientation.VERTICAL,
@@ -5887,9 +5872,7 @@
                             isExpanded: !!view.expanded,
                             disableDnd: !!this.options.disableDnd,
                         });
-                        panel.onDidDrop((event) => {
-                            this._onDidDrop.fire(event);
-                        });
+                        this.doAddPanel(panel);
                         queue.push(() => {
                             panel.init({
                                 params: data.params || {},
@@ -5910,14 +5893,29 @@
                 },
             });
             this.layout(this.width, this.height);
-            if (deferComponentLayout) {
-                setTimeout(() => {
-                    queue.forEach((f) => f());
-                }, 0);
+            queue.forEach((f) => f());
+            this._onDidLayoutfromJSON.fire();
+        }
+        doAddPanel(panel) {
+            const disposable = panel.onDidDrop((event) => {
+                this._onDidDrop.fire(event);
+            });
+            this._viewDisposables.set(panel.id, disposable);
+        }
+        doRemovePanel(panel) {
+            const disposable = this._viewDisposables.get(panel.id);
+            if (disposable) {
+                disposable.dispose();
+                this._viewDisposables.delete(panel.id);
             }
-            else {
-                queue.forEach((f) => f());
+        }
+        dispose() {
+            super.dispose();
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
             }
+            this._viewDisposables.clear();
+            this.paneview.dispose();
         }
     }
 
@@ -6145,18 +6143,12 @@
             this.id = id;
             this.component = component;
             this.reactPortalStore = reactPortalStore;
-            // private hostedContainer: HostedContainer;
             this._onDidFocus = new Emitter();
             this.onDidFocus = this._onDidFocus.event;
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
             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.className = 'dockview-react-part';
         }
@@ -6191,15 +6183,11 @@
             var _a;
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(group, _isPanelVisible) {
             this._group = group;
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop
-            // this.hostedContainer.layout(
-            //     this.element
-            //     // { width, height }
-            // );
         }
         close() {
             return Promise.resolve(true);
@@ -6209,7 +6197,6 @@
             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();
         }
     }
@@ -6244,10 +6231,10 @@
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(_group, _isPanelVisible) {
             // noop - retrieval from api
         }
         dispose() {
@@ -6326,10 +6313,10 @@
                 id: this.id,
             };
         }
-        layout(width, height) {
+        layout(_width, _height) {
             // noop - retrieval from api
         }
-        updateParentGroup(group, isPanelVisible) {
+        updateParentGroup(group, _isPanelVisible) {
             // noop - retrieval from api
             this._groupRef.value = group;
         }
@@ -6363,21 +6350,21 @@
             var _a;
             const factory = {
                 content: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactPanelContentPart(componentId, component, {
                             addPortal,
                         });
                     },
                 },
                 tab: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactPanelHeaderPart(componentId, component, {
                             addPortal,
                         });
                     },
                 },
                 watermark: {
-                    createComponent: (id, componentId, component) => {
+                    createComponent: (_id, componentId, component) => {
                         return new ReactWatermarkPart(componentId, component, {
                             addPortal,
                         });
@@ -6396,11 +6383,6 @@
                     ? { 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;
@@ -6410,10 +6392,25 @@
             }
             dockviewRef.current = dockview;
             return () => {
-                disposable.dispose();
                 dockview.dispose();
+                element.remove();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return () => {
+                    // noop
+                };
+            }
+            const disposable = dockviewRef.current.onDidDrop((event) => {
+                if (props.onDidDrop) {
+                    props.onDidDrop(event);
+                }
+            });
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.onDidDrop]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6422,6 +6419,14 @@
                 frameworkComponents: props.components,
             });
         }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                watermarkFrameworkComponent: props.watermarkComponent,
+            });
+        }, [props.watermarkComponent]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6557,7 +6562,9 @@
                         });
                     },
                 },
-                proportionalLayout: props.proportionalLayout,
+                proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                    ? props.proportionalLayout
+                    : true,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
@@ -6625,7 +6632,9 @@
             var _a;
             const element = document.createElement('div');
             const gridview = new GridviewComponent(element, {
-                proportionalLayout: !!props.proportionalLayout,
+                proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                    ? props.proportionalLayout
+                    : true,
                 orientation: props.orientation,
                 frameworkComponents: props.components,
                 frameworkComponentFactory: {
@@ -6648,6 +6657,7 @@
             gridviewRef.current = gridview;
             return () => {
                 gridview.dispose();
+                element.remove();
             };
         }, []);
         React__namespace.useEffect(() => {
@@ -6718,7 +6728,7 @@
             };
         }, [props.disableAutoResizing]);
         React__namespace.useEffect(() => {
-            const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
+            const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
                 addPortal,
             });
             const paneview = new PaneviewComponent(domRef.current, {
@@ -6784,13 +6794,11 @@
     PaneviewReact.displayName = 'PaneviewComponent';
 
     exports.BaseGrid = BaseGrid;
-    exports.CompositeDisposable = CompositeDisposable;
     exports.ContentContainer = ContentContainer;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
     exports.DockviewComponents = DockviewComponents;
     exports.DockviewReact = DockviewReact;
-    exports.Emitter = Emitter;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
     exports.GridviewComponent = GridviewComponent;
@@ -6798,7 +6806,6 @@
     exports.GridviewReact = GridviewReact;
     exports.Groupview = Groupview;
     exports.LocalSelectionTransfer = LocalSelectionTransfer;
-    exports.MutableDisposable = MutableDisposable;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
     exports.PanelTransfer = PanelTransfer;
@@ -6817,9 +6824,6 @@
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab$1;
-    exports.TickDelayedEvent = TickDelayedEvent;
-    exports.addDisposableListener = addDisposableListener;
-    exports.addDisposableWindowListener = addDisposableWindowListener;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;