dockview-react 3.0.1 → 3.0.2

package/dist/dockview-react.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 3.0.1
+ * @version 3.0.2
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -883,7 +883,7 @@ class Splitview {
         this._margin = value;
     }
     constructor(container, options) {
-        var _a;
+        var _a, _b;
         this.container = container;
         this.viewItems = [];
         this.sashes = [];
@@ -981,9 +981,9 @@ class Splitview {
             //
             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
@@ -2802,9 +2802,9 @@ class BaseGrid extends Resizable {
     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();
@@ -2823,6 +2823,8 @@ class BaseGrid extends Resizable {
         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);
@@ -7519,9 +7521,9 @@ class DockviewComponent extends BaseGrid {
     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
@@ -7877,6 +7879,16 @@ class DockviewComponent extends BaseGrid {
                     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,
@@ -9053,9 +9065,9 @@ class GridviewComponent extends BaseGrid {
     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
@@ -9344,9 +9356,9 @@ class SplitviewComponent extends Resizable {
             ? 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();
@@ -9357,8 +9369,12 @@ class SplitviewComponent extends Resizable {
         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);
@@ -9668,9 +9684,9 @@ class PaneviewComponent extends Resizable {
     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();
@@ -9686,9 +9702,13 @@ class PaneviewComponent extends Resizable {
         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
@@ -10508,7 +10528,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
             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';
 
@@ -10645,7 +10665,7 @@ const SplitviewReact = React.forwardRef((props, ref) => {
             },
         });
     }, [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';
 
@@ -10728,7 +10748,7 @@ const GridviewReact = React.forwardRef((props, ref) => {
             },
         });
     }, [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';
 
@@ -10860,7 +10880,7 @@ const PaneviewReact = React.forwardRef((props, ref) => {
             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';