dockview 1.7.2 → 1.7.4

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.2
+ * @version 1.7.4
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -141,9 +141,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 = [];
@@ -151,11 +191,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: () => {
@@ -163,23 +204,45 @@ 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 {
@@ -232,13 +295,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;
       }
   }
@@ -328,6 +391,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 = () => {
@@ -372,11 +436,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) {
@@ -605,7 +664,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;
@@ -624,12 +683,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;
@@ -653,7 +712,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;
@@ -667,12 +726,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) {
@@ -687,34 +746,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);
@@ -776,7 +835,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();
           }
       }
@@ -793,18 +852,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);
@@ -812,33 +871,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;
@@ -846,7 +905,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);
@@ -864,24 +923,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 = [
@@ -896,27 +956,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,
@@ -927,7 +989,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,
@@ -948,7 +1010,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) {
@@ -988,7 +1050,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;
@@ -998,17 +1060,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();
@@ -1023,10 +1085,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) {
@@ -1042,14 +1104,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);
               }
           }
@@ -1057,18 +1119,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);
           }
@@ -1079,7 +1141,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;
@@ -1088,16 +1150,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) {
@@ -1109,7 +1171,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`;
@@ -1128,7 +1190,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;
               }
@@ -1138,7 +1200,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;
@@ -1151,10 +1213,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))
@@ -1166,19 +1228,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)) {
@@ -1238,6 +1300,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   break;
               }
           }
+          for (const viewItem of this.viewItems) {
+              viewItem.dispose();
+          }
           this.element.remove();
       }
   }
@@ -1672,7 +1737,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);
@@ -1694,10 +1759,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();
       }
   }
 
@@ -1927,7 +1992,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(
               /**
@@ -2034,7 +2100,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);
@@ -2060,30 +2127,36 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (!(node instanceof LeafNode)) {
               throw new Error('Invalid location');
           }
-          parent.removeChild(index, sizing);
+          const view = node.view;
+          node.dispose(); // dispose of node
+          const child = parent.removeChild(index, sizing);
+          child.dispose();
           if (parent.children.length === 0) {
-              return node.view;
+              return view;
           }
           if (parent.children.length > 1) {
-              return node.view;
+              return view;
           }
           const sibling = parent.children[0];
           if (pathToParent.length === 0) {
               // parent is root
               if (sibling instanceof LeafNode) {
-                  return node.view;
+                  return view;
               }
               // we must promote sibling to be the new root
-              parent.removeChild(0, sizing);
+              const child = parent.removeChild(0, sizing);
+              child.dispose();
               this.root = sibling;
-              return node.view;
+              return view;
           }
           const [grandParent, ..._] = [...pathToParent].reverse();
           const [parentIndex, ...__] = [...rest].reverse();
           const isSiblingVisible = parent.isChildVisible(0);
-          parent.removeChild(0, sizing);
+          const childNode = parent.removeChild(0, sizing);
+          childNode.dispose();
           const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-          grandParent.removeChild(parentIndex, sizing);
+          const parentNode = grandParent.removeChild(parentIndex, sizing);
+          parentNode.dispose();
           if (sibling instanceof BranchNode) {
               sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
               for (let i = 0; i < sibling.children.length; i++) {
@@ -2101,7 +2174,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           for (let i = 0; i < sizes.length; i++) {
               grandParent.resizeChild(i, sizes[i]);
           }
-          return node.view;
+          return view;
       }
       layout(width, height) {
           const [size, orthogonalSize] = this.root.orientation === exports.Orientation.HORIZONTAL
@@ -2596,6 +2669,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       dispose() {
           this.removeDropTarget();
+          super.dispose();
       }
       toggleClasses(quadrant, width, height) {
           var _a, _b, _c, _d;
@@ -2773,8 +2847,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()));
               }
@@ -2817,6 +2891,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDragStart = new Emitter();
           this.onDragStart = this._onDragStart.event;
           this.iframes = [];
+          this.addDisposables(this._onDragStart);
           this.configure();
       }
       configure() {
@@ -2867,13 +2942,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();
@@ -2886,9 +2960,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       },
                   };
               }
-              dispose() {
-                  //
-              }
           })(this._element));
           this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
               if (event.defaultPrevented) {
@@ -2923,7 +2994,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);
@@ -2938,7 +3009,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       dispose() {
           super.dispose();
-          this.droptarget.dispose();
       }
   }
 
@@ -2984,9 +3054,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           };
       }
-      dispose() {
-          //
-      }
   }
 
   class VoidContainer extends CompositeDisposable {
@@ -3142,6 +3209,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) {
@@ -3185,9 +3253,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 = [];
       }
   }
@@ -3285,7 +3354,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);
@@ -3293,7 +3362,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;
@@ -3727,8 +3796,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();
@@ -3831,7 +3899,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();
@@ -3840,6 +3907,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               group.dispose();
           }
           this.gridview.dispose();
+          super.dispose();
       }
   }
 
@@ -3903,7 +3971,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;
@@ -3912,14 +3980,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,
               });
           });
       }
@@ -4014,12 +4080,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();
@@ -4040,7 +4106,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() {
@@ -4054,9 +4131,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();
       }
   }
 
@@ -4435,7 +4512,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);
@@ -4464,7 +4541,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 });
@@ -4621,7 +4698,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);
@@ -4643,7 +4720,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.id = id;
           this.containerApi = containerApi;
           this.view = view;
-          this._title = '';
           this._group = group;
           this.api = new DockviewPanelApiImpl(this, this._group);
           this.addDisposables(this.api.onActiveChange(() => {
@@ -4656,8 +4732,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       init(params) {
           this._params = params.params;
-          this.setTitle(params.title);
           this.view.init(Object.assign(Object.assign({}, params), { api: this.api, containerApi: this.containerApi }));
+          this.setTitle(params.title);
       }
       focus() {
           this.api._onFocusEvent.fire();
@@ -4674,11 +4750,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           };
       }
       setTitle(title) {
-          var _a, _b;
-          const didTitleChange = title !== ((_a = this._params) === null || _a === void 0 ? void 0 : _a.title);
+          const didTitleChange = title !== this.title;
           if (didTitleChange) {
               this._title = title;
-              (_b = this.view) === null || _b === void 0 ? void 0 : _b.update({
+              this.view.update({
                   params: {
                       params: this._params,
                       title: this.title,
@@ -4688,14 +4763,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       update(event) {
-          var _a;
-          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: this.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];
+              }
           }
-          (_a = this.view) === null || _a === void 0 ? void 0 : _a.update({
+          // update the view with the updated props
+          this.view.update({
               params: {
                   params: this._params,
                   title: this.title,
@@ -5070,7 +5150,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');
@@ -5078,7 +5158,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();
       }
@@ -5402,31 +5482,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);
@@ -5444,18 +5526,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);
               }
@@ -5549,11 +5631,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();
       }
   }
 
@@ -5811,7 +5893,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)));
       }
@@ -5833,7 +5915,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;
@@ -5851,7 +5933,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' &&
@@ -5889,15 +5971,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]);
@@ -5944,7 +6026,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;
@@ -6017,20 +6099,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();
       }
   }