dockview 1.7.3 → 1.7.5

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.3
+ * @version 1.7.5
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -111,9 +111,49 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         };
     })(exports.DockviewEvent || (exports.DockviewEvent = {}));
-    // dumb event emitter with better typings than nodes event emitter
-    // https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
+    class LeakageMonitor {
+        constructor() {
+            this.events = new Map();
+        }
+        get size() {
+            return this.events.size;
+        }
+        add(event, stacktrace) {
+            this.events.set(event, stacktrace);
+        }
+        delete(event) {
+            this.events.delete(event);
+        }
+        clear() {
+            this.events.clear();
+        }
+    }
+    class Stacktrace {
+        static create() {
+            var _a;
+            return new Stacktrace((_a = new Error().stack) !== null && _a !== void 0 ? _a : '');
+        }
+        constructor(value) {
+            this.value = value;
+        }
+        print() {
+            console.warn(this.value);
+        }
+    }
+    class Listener {
+        constructor(callback, stacktrace) {
+            this.callback = callback;
+            this.stacktrace = stacktrace;
+        }
+    }
+    // relatively simple event emitter taken from https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
     class Emitter {
+        static setLeakageMonitorEnabled(isEnabled) {
+            if (isEnabled !== Emitter.ENABLE_TRACKING) {
+                Emitter.MEMORY_LEAK_WATCHER.clear();
+            }
+            Emitter.ENABLE_TRACKING = isEnabled;
+        }
         constructor(options) {
             this.options = options;
             this._listeners = [];
@@ -121,11 +161,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         get event() {
             if (!this._event) {
-                this._event = (listener) => {
+                this._event = (callback) => {
                     var _a;
                     if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
-                        listener(this._last);
+                        callback(this._last);
                     }
+                    const listener = new Listener(callback, Emitter.ENABLE_TRACKING ? Stacktrace.create() : undefined);
                     this._listeners.push(listener);
                     return {
                         dispose: () => {
@@ -133,28 +174,50 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             if (index > -1) {
                                 this._listeners.splice(index, 1);
                             }
+                            else if (Emitter.ENABLE_TRACKING) ;
                         },
                     };
                 };
+                if (Emitter.ENABLE_TRACKING) {
+                    Emitter.MEMORY_LEAK_WATCHER.add(this._event, Stacktrace.create());
+                }
             }
             return this._event;
         }
         fire(e) {
             this._last = e;
             for (const listener of this._listeners) {
-                listener(e);
+                listener.callback(e);
             }
         }
         dispose() {
-            this._listeners = [];
-            this._disposed = true;
+            if (!this._disposed) {
+                this._disposed = true;
+                if (this._listeners.length > 0) {
+                    if (Emitter.ENABLE_TRACKING) {
+                        queueMicrotask(() => {
+                            var _a;
+                            // don't check until stack of execution is completed to allow for out-of-order disposals within the same execution block
+                            for (const listener of this._listeners) {
+                                console.warn((_a = listener.stacktrace) === null || _a === void 0 ? void 0 : _a.print());
+                            }
+                        });
+                    }
+                    this._listeners = [];
+                }
+                if (Emitter.ENABLE_TRACKING && this._event) {
+                    Emitter.MEMORY_LEAK_WATCHER.delete(this._event);
+                }
+            }
         }
     }
+    Emitter.ENABLE_TRACKING = false;
+    Emitter.MEMORY_LEAK_WATCHER = new LeakageMonitor();
     function addDisposableWindowListener(element, type, listener, options) {
         element.addEventListener(type, listener, options);
         return {
             dispose: () => {
-                element.removeEventListener(type, listener);
+                element.removeEventListener(type, listener, options);
             },
         };
     }
@@ -162,7 +225,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         element.addEventListener(type, listener, options);
         return {
             dispose: () => {
-                element.removeEventListener(type, listener);
+                element.removeEventListener(type, listener, options);
             },
         };
     }
@@ -202,13 +265,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         constructor(...args) {
             this._isDisposed = false;
-            this.disposables = args;
+            this._disposables = args;
         }
         addDisposables(...args) {
-            args.forEach((arg) => this.disposables.push(arg));
+            args.forEach((arg) => this._disposables.push(arg));
         }
         dispose() {
-            this.disposables.forEach((arg) => arg.dispose());
+            this._disposables.forEach((arg) => arg.dispose());
             this._isDisposed = true;
         }
     }
@@ -298,6 +361,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidFocus = this._onDidFocus.event;
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
+            this.addDisposables(this._onDidFocus, this._onDidBlur);
             let hasFocus = isAncestor(document.activeElement, element);
             let loosingFocus = false;
             const onFocus = () => {
@@ -342,11 +406,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         refreshState() {
             this._refreshStateHandler();
         }
-        dispose() {
-            super.dispose();
-            this._onDidBlur.dispose();
-            this._onDidFocus.dispose();
-        }
     }
 
     function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
@@ -575,7 +634,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._orthogonalSize = value;
         }
         get length() {
-            return this.views.length;
+            return this.viewItems.length;
         }
         get proportions() {
             return this._proportions ? [...this._proportions] : undefined;
@@ -594,12 +653,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 : 'vertical');
         }
         get minimumSize() {
-            return this.views.reduce((r, item) => r + item.minimumSize, 0);
+            return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
         }
         get maximumSize() {
             return this.length === 0
                 ? Number.POSITIVE_INFINITY
-                : this.views.reduce((r, item) => r + item.maximumSize, 0);
+                : this.viewItems.reduce((r, item) => r + item.maximumSize, 0);
         }
         get startSnappingEnabled() {
             return this._startSnappingEnabled;
@@ -623,7 +682,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         constructor(container, options) {
             this.container = container;
-            this.views = [];
+            this.viewItems = [];
             this.sashes = [];
             this._size = 0;
             this._orthogonalSize = 0;
@@ -637,12 +696,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
             this.onDidRemoveView = this._onDidRemoveView.event;
-            this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
-                if (index < 0 || index > this.views.length) {
+            this.resize = (index, delta, sizes = this.viewItems.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
+                if (index < 0 || index > this.viewItems.length) {
                     return 0;
                 }
                 const upIndexes = range(index, -1);
-                const downIndexes = range(index + 1, this.views.length);
+                const downIndexes = range(index + 1, this.viewItems.length);
                 //
                 if (highPriorityIndexes) {
                     for (const i of highPriorityIndexes) {
@@ -657,34 +716,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 }
                 //
-                const upItems = upIndexes.map((i) => this.views[i]);
+                const upItems = upIndexes.map((i) => this.viewItems[i]);
                 const upSizes = upIndexes.map((i) => sizes[i]);
                 //
-                const downItems = downIndexes.map((i) => this.views[i]);
+                const downItems = downIndexes.map((i) => this.viewItems[i]);
                 const downSizes = downIndexes.map((i) => sizes[i]);
                 //
-                const minDeltaUp = upIndexes.reduce((_, i) => _ + this.views[i].minimumSize - sizes[i], 0);
-                const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.views[i].maximumSize - sizes[i], 0);
+                const minDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].minimumSize - sizes[i], 0);
+                const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].maximumSize - sizes[i], 0);
                 //
                 const maxDeltaDown = downIndexes.length === 0
                     ? Number.POSITIVE_INFINITY
-                    : downIndexes.reduce((_, i) => _ + sizes[i] - this.views[i].minimumSize, 0);
+                    : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].minimumSize, 0);
                 const minDeltaDown = downIndexes.length === 0
                     ? Number.NEGATIVE_INFINITY
-                    : downIndexes.reduce((_, i) => _ + sizes[i] - this.views[i].maximumSize, 0);
+                    : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].maximumSize, 0);
                 //
                 const minDelta = Math.max(minDeltaUp, minDeltaDown);
                 const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
                 //
                 let snapped = false;
                 if (snapBefore) {
-                    const snapView = this.views[snapBefore.index];
+                    const snapView = this.viewItems[snapBefore.index];
                     const visible = delta >= snapBefore.limitDelta;
                     snapped = visible !== snapView.visible;
                     snapView.setVisible(visible, snapBefore.size);
                 }
                 if (!snapped && snapAfter) {
-                    const snapView = this.views[snapAfter.index];
+                    const snapView = this.viewItems[snapAfter.index];
                     const visible = delta < snapAfter.limitDelta;
                     snapped = visible !== snapView.visible;
                     snapView.setVisible(visible, snapAfter.size);
@@ -746,7 +805,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     );
                 });
                 // Initialize content size and proportions for first layout
-                this.contentSize = this.views.reduce((r, i) => r + i.size, 0);
+                this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
                 this.saveProportions();
             }
         }
@@ -763,18 +822,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         isViewVisible(index) {
-            if (index < 0 || index >= this.views.length) {
+            if (index < 0 || index >= this.viewItems.length) {
                 throw new Error('Index out of bounds');
             }
-            const viewItem = this.views[index];
+            const viewItem = this.viewItems[index];
             return viewItem.visible;
         }
         setViewVisible(index, visible) {
-            if (index < 0 || index >= this.views.length) {
+            if (index < 0 || index >= this.viewItems.length) {
                 throw new Error('Index out of bounds');
             }
             toggleClass(this.container, 'visible', visible);
-            const viewItem = this.views[index];
+            const viewItem = this.viewItems[index];
             toggleClass(this.container, 'visible', visible);
             viewItem.setVisible(visible, viewItem.size);
             this.distributeEmptySpace(index);
@@ -782,33 +841,33 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.saveProportions();
         }
         getViewSize(index) {
-            if (index < 0 || index >= this.views.length) {
+            if (index < 0 || index >= this.viewItems.length) {
                 return -1;
             }
-            return this.views[index].size;
+            return this.viewItems[index].size;
         }
         resizeView(index, size) {
-            if (index < 0 || index >= this.views.length) {
+            if (index < 0 || index >= this.viewItems.length) {
                 return;
             }
-            const indexes = range(this.views.length).filter((i) => i !== index);
+            const indexes = range(this.viewItems.length).filter((i) => i !== index);
             const lowPriorityIndexes = [
-                ...indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low),
+                ...indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low),
                 index,
             ];
-            const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
-            const item = this.views[index];
+            const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+            const item = this.viewItems[index];
             size = Math.round(size);
             size = clamp(size, item.minimumSize, Math.min(item.maximumSize, this._size));
             item.size = size;
             this.relayout(lowPriorityIndexes, highPriorityIndexes);
         }
         getViews() {
-            return this.views.map((x) => x.view);
+            return this.viewItems.map((x) => x.view);
         }
         onDidChange(item, size) {
-            const index = this.views.indexOf(item);
-            if (index < 0 || index >= this.views.length) {
+            const index = this.viewItems.indexOf(item);
+            if (index < 0 || index >= this.viewItems.length) {
                 return;
             }
             size = typeof size === 'number' ? size : item.size;
@@ -816,7 +875,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             item.size = size;
             this.relayout([index]);
         }
-        addView(view, size = { type: 'distribute' }, index = this.views.length, skipLayout) {
+        addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
             const container = document.createElement('div');
             container.className = 'view';
             container.appendChild(view.element);
@@ -834,24 +893,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 viewSize = view.minimumSize;
             }
             const disposable = view.onDidChange((newSize) => this.onDidChange(viewItem, newSize.size));
-            const dispose = () => {
-                disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
-                this.viewContainer.removeChild(container);
-            };
-            const viewItem = new ViewItem(container, view, viewSize, { dispose });
-            if (index === this.views.length) {
+            const viewItem = new ViewItem(container, view, viewSize, {
+                dispose: () => {
+                    disposable.dispose();
+                    this.viewContainer.removeChild(container);
+                },
+            });
+            if (index === this.viewItems.length) {
                 this.viewContainer.appendChild(container);
             }
             else {
                 this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
             }
-            this.views.splice(index, 0, viewItem);
-            if (this.views.length > 1) {
+            this.viewItems.splice(index, 0, viewItem);
+            if (this.viewItems.length > 1) {
                 //add sash
                 const sash = document.createElement('div');
                 sash.className = 'sash';
                 const onStart = (event) => {
-                    for (const item of this.views) {
+                    for (const item of this.viewItems) {
                         item.enabled = false;
                     }
                     const iframes = [
@@ -866,27 +926,29 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         : event.clientY;
                     const sashIndex = firstIndex(this.sashes, (s) => s.container === sash);
                     //
-                    const sizes = this.views.map((x) => x.size);
+                    const sizes = this.viewItems.map((x) => x.size);
                     //
                     let snapBefore;
                     let snapAfter;
                     const upIndexes = range(sashIndex, -1);
-                    const downIndexes = range(sashIndex + 1, this.views.length);
-                    const minDeltaUp = upIndexes.reduce((r, i) => r + (this.views[i].minimumSize - sizes[i]), 0);
-                    const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.views[i].viewMaximumSize - sizes[i]), 0);
+                    const downIndexes = range(sashIndex + 1, this.viewItems.length);
+                    const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].minimumSize - sizes[i]), 0);
+                    const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].viewMaximumSize - sizes[i]), 0);
                     const maxDeltaDown = downIndexes.length === 0
                         ? Number.POSITIVE_INFINITY
-                        : downIndexes.reduce((r, i) => r + (sizes[i] - this.views[i].minimumSize), 0);
+                        : downIndexes.reduce((r, i) => r +
+                            (sizes[i] - this.viewItems[i].minimumSize), 0);
                     const minDeltaDown = downIndexes.length === 0
                         ? Number.NEGATIVE_INFINITY
                         : downIndexes.reduce((r, i) => r +
-                            (sizes[i] - this.views[i].viewMaximumSize), 0);
+                            (sizes[i] -
+                                this.viewItems[i].viewMaximumSize), 0);
                     const minDelta = Math.max(minDeltaUp, minDeltaDown);
                     const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
                     const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
                     const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
                     if (typeof snapBeforeIndex === 'number') {
-                        const snappedViewItem = this.views[snapBeforeIndex];
+                        const snappedViewItem = this.viewItems[snapBeforeIndex];
                         const halfSize = Math.floor(snappedViewItem.viewMinimumSize / 2);
                         snapBefore = {
                             index: snapBeforeIndex,
@@ -897,7 +959,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         };
                     }
                     if (typeof snapAfterIndex === 'number') {
-                        const snappedViewItem = this.views[snapAfterIndex];
+                        const snappedViewItem = this.viewItems[snapAfterIndex];
                         const halfSize = Math.floor(snappedViewItem.viewMinimumSize / 2);
                         snapAfter = {
                             index: snapAfterIndex,
@@ -918,7 +980,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.layoutViews();
                     };
                     const end = () => {
-                        for (const item of this.views) {
+                        for (const item of this.viewItems) {
                             item.enabled = true;
                         }
                         for (const iframe of iframes) {
@@ -927,12 +989,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.saveProportions();
                         document.removeEventListener('mousemove', mousemove);
                         document.removeEventListener('mouseup', end);
-                        document.removeEventListener('mouseend', end);
                         this._onDidSashEnd.fire(undefined);
                     };
                     document.addEventListener('mousemove', mousemove);
                     document.addEventListener('mouseup', end);
-                    document.addEventListener('mouseend', end);
                 };
                 sash.addEventListener('mousedown', onStart);
                 const sashItem = {
@@ -958,7 +1018,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         distributeViewSizes() {
             const flexibleViewItems = [];
             let flexibleSize = 0;
-            for (const item of this.views) {
+            for (const item of this.viewItems) {
                 if (item.maximumSize - item.minimumSize > 0) {
                     flexibleViewItems.push(item);
                     flexibleSize += item.size;
@@ -968,17 +1028,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             for (const item of flexibleViewItems) {
                 item.size = clamp(size, item.minimumSize, item.maximumSize);
             }
-            const indexes = range(this.views.length);
-            const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low);
-            const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
+            const indexes = range(this.viewItems.length);
+            const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low);
+            const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
             this.relayout(lowPriorityIndexes, highPriorityIndexes);
         }
         removeView(index, sizing, skipLayout = false) {
             // Remove view
-            const viewItem = this.views.splice(index, 1)[0];
+            const viewItem = this.viewItems.splice(index, 1)[0];
             viewItem.dispose();
             // Remove sash
-            if (this.views.length >= 1) {
+            if (this.viewItems.length >= 1) {
                 const sashIndex = Math.max(index - 1, 0);
                 const sashItem = this.sashes.splice(sashIndex, 1)[0];
                 sashItem.disposable();
@@ -993,10 +1053,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return viewItem.view;
         }
         getViewCachedVisibleSize(index) {
-            if (index < 0 || index >= this.views.length) {
+            if (index < 0 || index >= this.viewItems.length) {
                 throw new Error('Index out of bounds');
             }
-            const viewItem = this.views[index];
+            const viewItem = this.viewItems[index];
             return viewItem.cachedVisibleSize;
         }
         moveView(from, to) {
@@ -1012,14 +1072,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.size = size;
             this.orthogonalSize = orthogonalSize;
             if (!this.proportions) {
-                const indexes = range(this.views.length);
-                const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low);
-                const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
-                this.resize(this.views.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
+                const indexes = range(this.viewItems.length);
+                const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low);
+                const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+                this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
             }
             else {
-                for (let i = 0; i < this.views.length; i++) {
-                    const item = this.views[i];
+                for (let i = 0; i < this.viewItems.length; i++) {
+                    const item = this.viewItems[i];
                     item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
                 }
             }
@@ -1027,18 +1087,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.layoutViews();
         }
         relayout(lowPriorityIndexes, highPriorityIndexes) {
-            const contentSize = this.views.reduce((r, i) => r + i.size, 0);
-            this.resize(this.views.length - 1, this._size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
+            const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+            this.resize(this.viewItems.length - 1, this._size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
             this.distributeEmptySpace();
             this.layoutViews();
             this.saveProportions();
         }
         distributeEmptySpace(lowPriorityIndex) {
-            const contentSize = this.views.reduce((r, i) => r + i.size, 0);
+            const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
             let emptyDelta = this.size - contentSize;
-            const indexes = range(this.views.length - 1, -1);
-            const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low);
-            const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
+            const indexes = range(this.viewItems.length - 1, -1);
+            const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low);
+            const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
             for (const index of highPriorityIndexes) {
                 pushToStart(indexes, index);
             }
@@ -1049,7 +1109,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 pushToEnd(indexes, lowPriorityIndex);
             }
             for (let i = 0; emptyDelta !== 0 && i < indexes.length; i++) {
-                const item = this.views[indexes[i]];
+                const item = this.viewItems[indexes[i]];
                 const size = clamp(item.size + emptyDelta, item.minimumSize, item.maximumSize);
                 const viewDelta = size - item.size;
                 emptyDelta -= viewDelta;
@@ -1058,16 +1118,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         saveProportions() {
             if (this.proportionalLayout && this.contentSize > 0) {
-                this._proportions = this.views.map((i) => i.size / this.contentSize);
+                this._proportions = this.viewItems.map((i) => i.size / this.contentSize);
             }
         }
         layoutViews() {
-            this.contentSize = this.views.reduce((r, i) => r + i.size, 0);
+            this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
             let sum = 0;
             const x = [];
             this.updateSashEnablement();
-            for (let i = 0; i < this.views.length - 1; i++) {
-                sum += this.views[i].size;
+            for (let i = 0; i < this.viewItems.length - 1; i++) {
+                sum += this.viewItems[i].size;
                 x.push(sum);
                 const offset = Math.min(Math.max(0, sum - 2), this.size - 4);
                 if (this._orientation === exports.Orientation.HORIZONTAL) {
@@ -1079,7 +1139,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.sashes[i].container.style.top = `${offset}px`;
                 }
             }
-            this.views.forEach((view, i) => {
+            this.viewItems.forEach((view, i) => {
                 if (this._orientation === exports.Orientation.HORIZONTAL) {
                     view.container.style.width = `${view.size}px`;
                     view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
@@ -1098,7 +1158,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         findFirstSnapIndex(indexes) {
             // visible views first
             for (const index of indexes) {
-                const viewItem = this.views[index];
+                const viewItem = this.viewItems[index];
                 if (!viewItem.visible) {
                     continue;
                 }
@@ -1108,7 +1168,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             // then, hidden views
             for (const index of indexes) {
-                const viewItem = this.views[index];
+                const viewItem = this.viewItems[index];
                 if (viewItem.visible &&
                     viewItem.maximumSize - viewItem.minimumSize > 0) {
                     return undefined;
@@ -1121,10 +1181,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateSashEnablement() {
             let previous = false;
-            const collapsesDown = this.views.map((i) => (previous = i.size - i.minimumSize > 0 || previous));
+            const collapsesDown = this.viewItems.map((i) => (previous = i.size - i.minimumSize > 0 || previous));
             previous = false;
-            const expandsDown = this.views.map((i) => (previous = i.maximumSize - i.size > 0 || previous));
-            const reverseViews = [...this.views].reverse();
+            const expandsDown = this.viewItems.map((i) => (previous = i.maximumSize - i.size > 0 || previous));
+            const reverseViews = [...this.viewItems].reverse();
             previous = false;
             const collapsesUp = reverseViews
                 .map((i) => (previous = i.size - i.minimumSize > 0 || previous))
@@ -1136,19 +1196,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             let position = 0;
             for (let index = 0; index < this.sashes.length; index++) {
                 const sash = this.sashes[index];
-                const viewItem = this.views[index];
+                const viewItem = this.viewItems[index];
                 position += viewItem.size;
                 const min = !(collapsesDown[index] && expandsUp[index + 1]);
                 const max = !(expandsDown[index] && collapsesUp[index + 1]);
                 if (min && max) {
                     const upIndexes = range(index, -1);
-                    const downIndexes = range(index + 1, this.views.length);
+                    const downIndexes = range(index + 1, this.viewItems.length);
                     const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
                     const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
                     const snappedBefore = typeof snapBeforeIndex === 'number' &&
-                        !this.views[snapBeforeIndex].visible;
+                        !this.viewItems[snapBeforeIndex].visible;
                     const snappedAfter = typeof snapAfterIndex === 'number' &&
-                        !this.views[snapAfterIndex].visible;
+                        !this.viewItems[snapAfterIndex].visible;
                     if (snappedBefore &&
                         collapsesUp[index] &&
                         (position > 0 || this.startSnappingEnabled)) {
@@ -1208,6 +1268,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     break;
                 }
             }
+            for (const viewItem of this.viewItems) {
+                viewItem.dispose();
+            }
             this.element.remove();
         }
     }
@@ -1642,7 +1705,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 throw new Error('Invalid index');
             }
             this.splitview.removeView(index, sizing);
-            this._removeChild(index);
+            return this._removeChild(index);
         }
         _addChild(node, index) {
             this.children.splice(index, 0, node);
@@ -1664,10 +1727,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
         }
         dispose() {
-            super.dispose();
             this._childrenDisposable.dispose();
-            this.children.forEach((child) => child.dispose());
             this.splitview.dispose();
+            this.children.forEach((child) => child.dispose());
+            super.dispose();
         }
     }
 
@@ -1897,7 +1960,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (oldRoot.children.length === 1) {
                 // can remove one level of redundant branching if there is only a single child
                 const childReference = oldRoot.children[0];
-                oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+                const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+                child.dispose();
                 oldRoot.dispose();
                 this._root.addChild(
                 /**
@@ -2004,7 +2068,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (typeof newSiblingCachedVisibleSize === 'number') {
                     newSiblingSize = exports.Sizing.Invisible(newSiblingCachedVisibleSize);
                 }
-                grandParent.removeChild(parentIndex);
+                const child = grandParent.removeChild(parentIndex);
+                child.dispose();
                 const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
                 grandParent.addChild(newParent, parent.size, parentIndex);
                 const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
@@ -2566,6 +2631,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             this.removeDropTarget();
+            super.dispose();
         }
         toggleClasses(quadrant, width, height) {
             var _a, _b, _c, _d;
@@ -2743,8 +2809,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.panel.view) {
                 const _onDidFocus = this.panel.view.content.onDidFocus;
                 const _onDidBlur = this.panel.view.content.onDidBlur;
-                const { onDidFocus, onDidBlur } = trackFocus(this._element);
-                disposable.addDisposables(onDidFocus(() => this._onDidFocus.fire()), onDidBlur(() => this._onDidBlur.fire()));
+                const focusTracker = trackFocus(this._element);
+                disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
                 if (_onDidFocus) {
                     disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
                 }
@@ -2783,24 +2849,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(el) {
             super();
             this.el = el;
-            this.disposable = new MutableDisposable();
+            this.dataDisposable = new MutableDisposable();
+            this.pointerEventsDisposable = new MutableDisposable();
             this._onDragStart = new Emitter();
             this.onDragStart = this._onDragStart.event;
-            this.iframes = [];
+            this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
             this.configure();
         }
         configure() {
             this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                this.iframes = [
+                const iframes = [
                     ...getElementsByTagName('iframe'),
                     ...getElementsByTagName('webview'),
                 ];
-                for (const iframe of this.iframes) {
+                this.pointerEventsDisposable.value = {
+                    dispose: () => {
+                        for (const iframe of iframes) {
+                            iframe.style.pointerEvents = 'auto';
+                        }
+                    },
+                };
+                for (const iframe of iframes) {
                     iframe.style.pointerEvents = 'none';
                 }
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-                this.disposable.value = this.getData(event.dataTransfer);
+                this.dataDisposable.value = this.getData(event.dataTransfer);
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
                     /**
@@ -2815,11 +2889,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
                 }
             }), addDisposableListener(this.el, 'dragend', () => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
-                this.disposable.dispose();
+                this.pointerEventsDisposable.dispose();
+                this.dataDisposable.dispose();
             }));
         }
     }
@@ -2837,13 +2908,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onChanged = this._onChanged.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
-            this.addDisposables(this._onChanged, this._onDropped);
             this._element = document.createElement('div');
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
             toggleClass(this.element, 'inactive-tab', true);
-            this.addDisposables(new (class Handler extends DragHandler {
+            this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
                 constructor() {
                     super(...arguments);
                     this.panelTransfer = LocalSelectionTransfer.getInstance();
@@ -2856,9 +2926,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         },
                     };
                 }
-                dispose() {
-                    //
-                }
             })(this._element));
             this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
@@ -2893,7 +2960,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.addDisposables(this.droptarget.onDrop((event) => {
                 this._onDropped.fire(event);
-            }));
+            }), this.droptarget);
         }
         setActive(isActive) {
             toggleClass(this.element, 'active-tab', isActive);
@@ -2908,7 +2975,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             super.dispose();
-            this.droptarget.dispose();
         }
     }
 
@@ -2954,9 +3020,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             };
         }
-        dispose() {
-            //
-        }
     }
 
     class VoidContainer extends CompositeDisposable {
@@ -3112,6 +3175,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const tabToRemove = this.tabs.splice(index, 1)[0];
             const { value, disposable } = tabToRemove;
             disposable.dispose();
+            value.dispose();
             value.element.remove();
         }
         setActivePanel(panel) {
@@ -3155,9 +3219,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             super.dispose();
-            this.tabs.forEach((tab) => {
-                tab.disposable.dispose();
-            });
+            for (const { value, disposable } of this.tabs) {
+                disposable.dispose();
+                value.dispose();
+            }
             this.tabs = [];
         }
     }
@@ -3255,7 +3320,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             container.append(this.tabsContainer.element, this.contentContainer.element);
             this.header.hidden = !!options.hideHeader;
             this.locked = !!options.locked;
-            this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+            this.addDisposables(this.tabsContainer.onDrop((event) => {
                 this.handleDropEvent(event.event, 'center', event.index);
             }), this.contentContainer.onDidFocus(() => {
                 this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3263,7 +3328,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 // noop
             }), this.dropTarget.onDrop((event) => {
                 this.handleDropEvent(event.nativeEvent, event.position);
-            }));
+            }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
         }
         initialize() {
             var _a, _b;
@@ -3697,8 +3762,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
                 this._bufferOnDidLayoutChange.fire();
-            }));
-            this.addDisposables(exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+            }), exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }), this._bufferOnDidLayoutChange.onEvent(() => {
                 this._onDidLayoutChange.fire();
@@ -3801,7 +3865,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.gridview.layout(width, height);
         }
         dispose() {
-            super.dispose();
             this._onDidActiveGroupChange.dispose();
             this._onDidAddGroup.dispose();
             this._onDidRemoveGroup.dispose();
@@ -3810,6 +3873,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 group.dispose();
             }
             this.gridview.dispose();
+            super.dispose();
         }
     }
 
@@ -3873,7 +3937,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onUpdateParameters = new Emitter();
             this.onUpdateParameters = this._onUpdateParameters.event;
-            this.addDisposables(this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters, this.onDidFocusChange((event) => {
+            this.addDisposables(this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
                 this._isActive = event.isActive;
@@ -3882,14 +3946,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), this.onDidDimensionsChange((event) => {
                 this._width = event.width;
                 this._height = event.height;
-            }));
+            }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters);
         }
         initialize(panel) {
             this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
                 panel.update({
-                    params: {
-                        params: parameters,
-                    },
+                    params: parameters,
                 });
             });
         }
@@ -3984,12 +4046,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element.style.height = '100%';
             this._element.style.width = '100%';
             this._element.style.overflow = 'hidden';
-            const { onDidFocus, onDidBlur } = trackFocus(this._element);
-            this.addDisposables(this.api, onDidFocus(() => {
+            const focusTracker = trackFocus(this._element);
+            this.addDisposables(this.api, focusTracker.onDidFocus(() => {
                 this.api._onDidChangeFocus.fire({ isFocused: true });
-            }), onDidBlur(() => {
+            }), focusTracker.onDidBlur(() => {
                 this.api._onDidChangeFocus.fire({ isFocused: false });
-            }));
+            }), focusTracker);
         }
         focus() {
             this.api._onFocusEvent.fire();
@@ -4010,7 +4072,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         update(event) {
             var _a, _b;
+            // merge the new parameters with the existing parameters
             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) });
+            /**
+             * delete new keys that have a value of undefined,
+             * allow values of null
+             */
+            for (const key of Object.keys(event.params)) {
+                if (event.params[key] === undefined) {
+                    delete this._params.params[key];
+                }
+            }
+            // update the view with the updated props
             (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
         }
         toJSON() {
@@ -4024,9 +4097,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         dispose() {
             var _a;
-            super.dispose();
             this.api.dispose();
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+            super.dispose();
         }
     }
 
@@ -4405,7 +4478,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this._maximumHeight = options.maximumHeight;
             }
             this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-            this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+            this.addDisposables(this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
                 const { accessor } = this._params;
                 accessor.setVisible(this, isVisible);
@@ -4434,7 +4507,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     height: event.height,
                     width: event.width,
                 });
-            }));
+            }), this._onDidChange);
         }
         setVisible(isVisible) {
             this.api._onDidVisibilityChange.fire({ isVisible });
@@ -4591,7 +4664,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
         }
         setTitle(title) {
-            this.panel.update({ params: { title } });
+            this.panel.setTitle(title);
         }
         close() {
             this.group.model.closePanel(this.panel);
@@ -4656,12 +4729,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         update(event) {
-            const params = event.params;
-            this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
-            if (params.title !== this.title) {
-                this._title = params.title;
-                this.api._onDidTitleChange.fire({ title: params.title });
+            // merge the new parameters with the existing parameters
+            this._params = Object.assign(Object.assign({}, (this._params || {})), event.params);
+            /**
+             * delete new keys that have a value of undefined,
+             * allow values of null
+             */
+            for (const key of Object.keys(event.params)) {
+                if (event.params[key] === undefined) {
+                    delete this._params[key];
+                }
             }
+            // update the view with the updated props
             this.view.update({
                 params: {
                     params: this._params,
@@ -5037,7 +5116,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     size: { type: 'pixels', value: 20 },
                 },
             });
-            this.addDisposables(dropTarget, dropTarget.onDrop((event) => {
+            this.addDisposables(dropTarget.onDrop((event) => {
                 const data = getPanelData();
                 if (data) {
                     this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
@@ -5045,7 +5124,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 else {
                     this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
                 }
-            }));
+            }), dropTarget);
             this._api = new DockviewApi(this);
             this.updateWatermark();
         }
@@ -5369,31 +5448,33 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             super.doRemoveGroup(group, { skipActive });
         }
-        moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
+        moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
             var _a;
-            const sourceGroup = groupId
-                ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
+            const sourceGroup = sourceGroupId
+                ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
                 : undefined;
-            if (itemId === undefined) {
+            if (sourceItemId === undefined) {
                 if (sourceGroup) {
-                    this.moveGroup(sourceGroup, referenceGroup, target);
+                    this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
                 }
                 return;
             }
-            if (!target || target === 'center') {
-                const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    this.panels.find((panel) => panel.id === itemId);
+            if (!destinationTarget || destinationTarget === 'center') {
+                const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
+                    this.panels.find((panel) => panel.id === sourceItemId);
                 if (!groupItem) {
-                    throw new Error(`No panel with id ${itemId}`);
+                    throw new Error(`No panel with id ${sourceItemId}`);
                 }
                 if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
                     this.doRemoveGroup(sourceGroup);
                 }
-                referenceGroup.model.openPanel(groupItem, { index });
+                destinationGroup.model.openPanel(groupItem, {
+                    index: destinationIndex,
+                });
             }
             else {
-                const referenceLocation = getGridLocation(referenceGroup.element);
-                const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                const referenceLocation = getGridLocation(destinationGroup.element);
+                const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 if (sourceGroup && sourceGroup.size < 2) {
                     const [targetParentLocation, to] = tail(targetLocation);
                     const sourceLocation = getGridLocation(sourceGroup.element);
@@ -5411,18 +5492,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             skipDispose: true,
                         });
                         // after deleting the group we need to re-evaulate the ref location
-                        const updatedReferenceLocation = getGridLocation(referenceGroup.element);
-                        const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
+                        const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                        const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
                         this.doAddGroup(targetGroup, location);
                     }
                 }
                 else {
-                    const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                        this.panels.find((panel) => panel.id === itemId);
+                    const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
+                        this.panels.find((panel) => panel.id === sourceItemId);
                     if (!groupItem) {
-                        throw new Error(`No panel with id ${itemId}`);
+                        throw new Error(`No panel with id ${sourceItemId}`);
                     }
-                    const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                    const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                     const group = this.createGroupAtLocation(dropLocation);
                     group.model.openPanel(groupItem);
                 }
@@ -5516,11 +5597,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
         dispose() {
-            super.dispose();
             this._onDidActivePanelChange.dispose();
             this._onDidAddPanel.dispose();
             this._onDidRemovePanel.dispose();
             this._onDidLayoutFromJSON.dispose();
+            super.dispose();
         }
     }
 
@@ -5778,7 +5859,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         set splitview(value) {
             this._splitview = value;
-            this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
+            this._splitviewChangeDisposable.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)));
         }
@@ -5800,7 +5881,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         constructor(options) {
             super(options.parentElement);
-            this._disposable = new MutableDisposable();
+            this._splitviewChangeDisposable = new MutableDisposable();
             this._panels = new Map();
             this._onDidLayoutfromJSON = new Emitter();
             this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
@@ -5818,7 +5899,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.frameworkComponents = {};
             }
             this.splitview = new Splitview(this.element, options);
-            this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+            this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
@@ -5856,15 +5937,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         removePanel(panel, sizing) {
-            const disposable = this._panels.get(panel.id);
-            if (!disposable) {
+            const item = this._panels.get(panel.id);
+            if (!item) {
                 throw new Error(`unknown splitview panel ${panel.id}`);
             }
-            disposable.disposable.dispose();
-            disposable.value.dispose();
+            item.dispose();
             this._panels.delete(panel.id);
             const index = this.panels.findIndex((_) => _ === panel);
-            this.splitview.removeView(index, sizing);
+            const removedView = this.splitview.removeView(index, sizing);
+            removedView.dispose();
             const panels = this.panels;
             if (panels.length > 0) {
                 this.setActive(panels[panels.length - 1]);
@@ -5911,7 +5992,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 this.setActive(view, true);
             });
-            this._panels.set(view.id, { disposable, value: view });
+            this._panels.set(view.id, disposable);
         }
         toJSON() {
             var _a;
@@ -5984,20 +6065,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidLayoutfromJSON.fire();
         }
         clear() {
-            for (const [_, value] of this._panels.entries()) {
-                value.disposable.dispose();
-                value.value.dispose();
+            for (const disposable of this._panels.values()) {
+                disposable.dispose();
             }
             this._panels.clear();
-            this.splitview.dispose();
+            while (this.splitview.length > 0) {
+                const view = this.splitview.removeView(0, exports.Sizing.Distribute, true);
+                view.dispose();
+            }
         }
         dispose() {
-            for (const [_, value] of this._panels.entries()) {
-                value.disposable.dispose();
-                value.value.dispose();
+            for (const disposable of this._panels.values()) {
+                disposable.dispose();
             }
             this._panels.clear();
+            const views = this.splitview.getViews();
+            this._splitviewChangeDisposable.dispose();
             this.splitview.dispose();
+            for (const view of views) {
+                view.dispose();
+            }
             super.dispose();
         }
     }