dockview-react 3.0.2 → 3.1.1

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

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 3.0.2
+ * @version 3.1.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -4742,8 +4742,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.accessor = accessor;
             this.group = group;
             this.content = undefined;
-            this._onChanged = new Emitter();
-            this.onChanged = this._onChanged.event;
+            this._onPointDown = new Emitter();
+            this.onPointerDown = this._onPointDown.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
             this._onDragStart = new Emitter();
@@ -4773,13 +4773,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             });
             this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
-            this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+            this.addDisposables(this._onPointDown, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
                 this._onDragStart.fire(event);
             }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
-                if (event.defaultPrevented) {
-                    return;
-                }
-                this._onChanged.fire(event);
+                this._onPointDown.fire(event);
             }), this.dropTarget.onDrop((event) => {
                 this._onDropped.fire(event);
             }), this.dropTarget);
@@ -5057,6 +5054,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();
@@ -5077,7 +5077,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             tab.setContent(panel.view.tab);
             const disposable = new CompositeDisposable(tab.onDragStart((event) => {
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
-            }), tab.onChanged((event) => {
+            }), tab.onPointerDown((event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 const isFloatingWithOnePanel = this.group.api.location.type === 'floating' &&
                     this.size === 1;
@@ -5095,12 +5098,12 @@ 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;
                 }
             }), tab.onDrop((event) => {
                 this._onDrop.fire({
@@ -6050,12 +6053,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) {
@@ -6113,20 +6115,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);
-                    });
-            });
         }
     }
 
@@ -6196,6 +6185,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) {
@@ -6543,9 +6535,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) {
@@ -7827,6 +7816,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({
@@ -10526,8 +10518,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         return title;
     }
     const DockviewDefaultTab = (_a) => {
-        var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
+        var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave"]);
         const title = useTitle(api);
+        const isMiddleMouseButton = React.useRef(false);
         const onClose = React.useCallback((event) => {
             event.preventDefault();
             if (closeActionOverride) {
@@ -10537,21 +10530,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 api.close();
             }
         }, [api, closeActionOverride]);
-        const onPointerDown = React.useCallback((e) => {
-            e.preventDefault();
+        const onBtnPointerDown = React.useCallback((event) => {
+            event.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" }),
+        const _onPointerDown = React.useCallback((event) => {
+            isMiddleMouseButton.current = event.button === 1;
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+        }, [onPointerDown]);
+        const _onPointerUp = React.useCallback((event) => {
+            if (isMiddleMouseButton && event.button === 1 && !hideClose) {
+                isMiddleMouseButton.current = false;
+                onClose(event);
+            }
+            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+        }, [onPointerUp, onClose, hideClose]);
+        const _onPointerLeave = React.useCallback((event) => {
+            isMiddleMouseButton.current = false;
+            onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(event);
+        }, [onPointerLeave]);
+        return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, 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 },
+            !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
                 React.createElement(CloseButton, null)))));
     };