dockview 3.0.1 → 3.0.2

package/dist/cjs/dockview/dockview.js

@@ -225,6 +225,6 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
             createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
         });
     }, [props.prefixHeaderActionsComponent]);
-    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.DockviewReact.displayName = 'DockviewComponent';

package/dist/cjs/gridview/gridview.js

@@ -99,6 +99,6 @@ exports.GridviewReact = react_1.default.forwardRef(function (props, ref) {
             },
         });
     }, [props.components]);
-    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.GridviewReact.displayName = 'GridviewComponent';

package/dist/cjs/paneview/paneview.js

@@ -131,6 +131,6 @@ exports.PaneviewReact = react_1.default.forwardRef(function (props, ref) {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.PaneviewReact.displayName = 'PaneviewComponent';

package/dist/cjs/splitview/splitview.js

@@ -99,6 +99,6 @@ exports.SplitviewReact = react_1.default.forwardRef(function (props, ref) {
             },
         });
     }, [props.components]);
-    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.SplitviewReact.displayName = 'SplitviewComponent';

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 3.0.1
+ * @version 3.0.2
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -880,7 +880,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._margin = value;
       }
       constructor(container, options) {
-          var _a;
+          var _a, _b;
           this.container = container;
           this.viewItems = [];
           this.sashes = [];
@@ -978,9 +978,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               //
               return delta;
           };
-          this._orientation = options.orientation;
+          this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
           this.element = this.createContainer();
-          this.margin = (_a = options.margin) !== null && _a !== void 0 ? _a : 0;
+          this.margin = (_b = options.margin) !== null && _b !== void 0 ? _b : 0;
           this.proportionalLayout =
               options.proportionalLayout === undefined
                   ? true
@@ -2799,9 +2799,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       set locked(value) {
           this.gridview.locked = value;
       }
-      constructor(parentElement, options) {
+      constructor(container, options) {
           var _a;
-          super(parentElement, options.disableAutoResizing);
+          super(document.createElement('div'), options.disableAutoResizing);
           this._id = nextLayoutId$1.next();
           this._groups = new Map();
           this._onDidRemove = new Emitter();
@@ -2820,6 +2820,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.element.style.width = '100%';
           this._classNames = new Classnames(this.element);
           this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+          // the container is owned by the third-party, do not modify/delete it
+          container.appendChild(this.element);
           this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
           this.gridview.locked = !!options.locked;
           this.element.appendChild(this.gridview.element);
@@ -7516,9 +7518,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get floatingGroups() {
           return this._floatingGroups;
       }
-      constructor(parentElement, options) {
+      constructor(container, options) {
           var _a;
-          super(parentElement, {
+          super(container, {
               proportionalLayout: true,
               orientation: exports.Orientation.HORIZONTAL,
               styles: options.hideBorders
@@ -7874,6 +7876,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       group.model.renderContainer =
                           this.overlayRenderContainer;
                       returnedGroup = group;
+                      const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
+                      if (alreadyRemoved) {
+                          /**
+                           * If this popout group was explicitly removed then we shouldn't run the additional
+                           * steps. To tell if the running of this disposable is the result of this popout group
+                           * being explicitly removed we can check if this popout group is still referenced in
+                           * the `this._popoutGroups` list.
+                           */
+                          return;
+                      }
                       if (floatingBox) {
                           this.addFloatingGroup(group, {
                               height: floatingBox.height,
@@ -9050,9 +9062,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       set deserializer(value) {
           this._deserializer = value;
       }
-      constructor(parentElement, options) {
+      constructor(container, options) {
           var _a;
-          super(parentElement, {
+          super(container, {
               proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
               orientation: options.orientation,
               styles: options.hideBorders
@@ -9341,9 +9353,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               ? this.splitview.size
               : this.splitview.orthogonalSize;
       }
-      constructor(parentElement, options) {
+      constructor(container, options) {
           var _a;
-          super(parentElement, options.disableAutoResizing);
+          super(document.createElement('div'), options.disableAutoResizing);
           this._splitviewChangeDisposable = new MutableDisposable();
           this._panels = new Map();
           this._onDidLayoutfromJSON = new Emitter();
@@ -9354,8 +9366,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidRemoveView = this._onDidRemoveView.event;
           this._onDidLayoutChange = new Emitter();
           this.onDidLayoutChange = this._onDidLayoutChange.event;
+          this.element.style.height = '100%';
+          this.element.style.width = '100%';
           this._classNames = new Classnames(this.element);
           this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+          // the container is owned by the third-party, do not modify/delete it
+          container.appendChild(this.element);
           this._options = options;
           this.splitview = new Splitview(this.element, options);
           this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
@@ -9665,9 +9681,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get options() {
           return this._options;
       }
-      constructor(parentElement, options) {
+      constructor(container, options) {
           var _a;
-          super(parentElement, options.disableAutoResizing);
+          super(document.createElement('div'), options.disableAutoResizing);
           this._id = nextLayoutId.next();
           this._disposable = new MutableDisposable();
           this._viewDisposables = new Map();
@@ -9683,9 +9699,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidRemoveView = this._onDidRemoveView.event;
           this._onUnhandledDragOverEvent = new Emitter();
           this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+          this.element.style.height = '100%';
+          this.element.style.width = '100%';
           this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView, this._onUnhandledDragOverEvent);
           this._classNames = new Classnames(this.element);
           this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
+          // the container is owned by the third-party, do not modify/delete it
+          container.appendChild(this.element);
           this._options = options;
           this.paneview = new Paneview(this.element, {
               // only allow paneview in the vertical orientation for now
@@ -10505,7 +10525,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
           });
       }, [props.prefixHeaderActionsComponent]);
-      return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+      return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   DockviewReact.displayName = 'DockviewComponent';
 
@@ -10665,7 +10685,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           });
       }, [props.components]);
-      return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+      return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   SplitviewReact.displayName = 'SplitviewComponent';
 
@@ -10748,7 +10768,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           });
       }, [props.components]);
-      return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+      return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   GridviewReact.displayName = 'GridviewComponent';
 
@@ -10880,7 +10900,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               disposable.dispose();
           };
       }, [props.onDidDrop]);
-      return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+      return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   PaneviewReact.displayName = 'PaneviewComponent';