dockview-react 3.0.1 → 3.1.0

package/dist/dockview-react.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 3.0.1
+ * @version 3.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -850,7 +850,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 = [];
@@ -948,9 +948,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
@@ -2769,9 +2769,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();
@@ -2790,6 +2790,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);
@@ -5055,6 +5057,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         delete(id) {
             const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
             const tabToRemove = this.tabs.splice(index, 1)[0];
+            if (!tabToRemove) {
+                throw new Error(`dockview: Tab not found`);
+            }
             const { value, disposable } = tabToRemove;
             disposable.dispose();
             value.dispose();
@@ -5076,6 +5081,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const disposable = new CompositeDisposable(tab.onDragStart((event) => {
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
             }), tab.onChanged((event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
                     this.size === 1;
@@ -5093,12 +5101,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     });
                     return;
                 }
-                const isLeftClick = event.button === 0;
-                if (!isLeftClick || event.defaultPrevented) {
-                    return;
-                }
-                if (this.group.activePanel !== panel) {
-                    this.group.model.openPanel(panel);
+                switch (event.button) {
+                    case 0: // left click or touch
+                        if (this.group.activePanel !== panel) {
+                            this.group.model.openPanel(panel);
+                        }
+                        break;
+                    case 1: // middle click
+                        panel.api.close();
+                        break;
                 }
             }), tab.onDrop((event) => {
                 this._onDrop.fire({
@@ -6048,12 +6059,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(id, accessor) {
             super(id, '__dockviewgroup__');
             this.accessor = accessor;
-            this._mutableDisposable = new MutableDisposable();
             this._onDidLocationChange = new Emitter();
             this.onDidLocationChange = this._onDidLocationChange.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._mutableDisposable);
+            this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange);
         }
         close() {
             if (!this._group) {
@@ -6111,20 +6121,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         initialize(group) {
-            /**
-             * TODO: Annoying initialization order caveat, find a better way to initialize and avoid needing null checks
-             *
-             * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
-             * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
-             * finished ensuring the `model` is defined.
-             */
             this._group = group;
-            queueMicrotask(() => {
-                this._mutableDisposable.value =
-                    this._group.model.onDidActivePanelChange((event) => {
-                        this._onDidActivePanelChange.fire(event);
-                    });
-            });
         }
     }
 
@@ -6194,6 +6191,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }, new DockviewGroupPanelApiImpl(id, accessor));
             this.api.initialize(this); // cannot use 'this' after after 'super' call
             this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
+            this.addDisposables(this.model.onDidActivePanelChange((event) => {
+                this.api._onDidActivePanelChange.fire(event);
+            }));
         }
         focus() {
             if (!this.api.isActive) {
@@ -6541,9 +6541,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.action.appendChild(createCloseButton());
             this._element.appendChild(this._content);
             this._element.appendChild(this.action);
-            this.addDisposables(addDisposableListener(this.action, 'pointerdown', (ev) => {
-                ev.preventDefault();
-            }));
             this.render();
         }
         init(params) {
@@ -7486,9 +7483,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
@@ -7825,6 +7822,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 addDisposableWindowListener(_window.window, 'resize', () => {
                     group.layout(_window.window.innerWidth, _window.window.innerHeight);
                 }), overlayRenderContainer, exports.DockviewDisposable.from(() => {
+                    if (this.isDisposed) {
+                        return; // cleanup may run after instance is disposed
+                    }
                     if (isGroupAddedToDom &&
                         this.getPanel(referenceGroup.id)) {
                         this.movingLock(() => moveGroupWithoutDestroying({
@@ -7844,6 +7844,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,
@@ -9020,9 +9030,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
@@ -9311,9 +9321,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();
@@ -9324,8 +9334,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);
@@ -9635,9 +9649,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();
@@ -9653,9 +9667,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
@@ -10475,7 +10493,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';
 
@@ -10520,16 +10538,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         const onPointerDown = React.useCallback((e) => {
             e.preventDefault();
         }, []);
-        const onClick = React.useCallback((event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            api.setActive();
-            if (rest.onClick) {
-                rest.onClick(event);
-            }
-        }, [api, rest.onClick]);
-        return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
+        return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { className: "dv-default-tab" }),
             React.createElement("span", { className: "dv-default-tab-content" }, title),
             !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onPointerDown, onClick: onClose },
                 React.createElement(CloseButton, null)))));
@@ -10612,7 +10621,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';
 
@@ -10695,7 +10704,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';
 
@@ -10827,7 +10836,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';