dockview 3.1.0 → 3.1.1

package/dist/cjs/dockview/defaultTab.js

@@ -57,8 +57,9 @@ function useTitle(api) {
     return title;
 }
 var DockviewDefaultTab = function (_a) {
-    var api = _a.api, _containerApi = _a.containerApi, _params = _a.params, hideClose = _a.hideClose, closeActionOverride = _a.closeActionOverride, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
+    var api = _a.api, _containerApi = _a.containerApi, _params = _a.params, hideClose = _a.hideClose, closeActionOverride = _a.closeActionOverride, onPointerDown = _a.onPointerDown, onPointerUp = _a.onPointerUp, onPointerLeave = _a.onPointerLeave, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave"]);
     var title = useTitle(api);
+    var isMiddleMouseButton = react_1.default.useRef(false);
     var onClose = react_1.default.useCallback(function (event) {
         event.preventDefault();
         if (closeActionOverride) {
@@ -68,12 +69,27 @@ var DockviewDefaultTab = function (_a) {
             api.close();
         }
     }, [api, closeActionOverride]);
-    var onPointerDown = react_1.default.useCallback(function (e) {
-        e.preventDefault();
+    var onBtnPointerDown = react_1.default.useCallback(function (event) {
+        event.preventDefault();
     }, []);
-    return (react_1.default.createElement("div", __assign({ "data-testid": "dockview-dv-default-tab" }, rest, { className: "dv-default-tab" }),
+    var _onPointerDown = react_1.default.useCallback(function (event) {
+        isMiddleMouseButton.current = event.button === 1;
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }, [onPointerDown]);
+    var _onPointerUp = react_1.default.useCallback(function (event) {
+        if (isMiddleMouseButton && event.button === 1 && !hideClose) {
+            isMiddleMouseButton.current = false;
+            onClose(event);
+        }
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }, [onPointerUp, onClose, hideClose]);
+    var _onPointerLeave = react_1.default.useCallback(function (event) {
+        isMiddleMouseButton.current = false;
+        onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(event);
+    }, [onPointerLeave]);
+    return (react_1.default.createElement("div", __assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
         react_1.default.createElement("span", { className: "dv-default-tab-content" }, title),
-        !hideClose && (react_1.default.createElement("div", { className: "dv-default-tab-action", onPointerDown: onPointerDown, onClick: onClose },
+        !hideClose && (react_1.default.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
             react_1.default.createElement(svg_1.CloseButton, null)))));
 };
 exports.DockviewDefaultTab = DockviewDefaultTab;

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 3.1.0
+ * @version 3.1.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -4772,8 +4772,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();
@@ -4803,13 +4803,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);
@@ -5110,7 +5107,7 @@ 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;
               }
@@ -5137,9 +5134,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           this.group.model.openPanel(panel);
                       }
                       break;
-                  case 1: // middle click
-                      panel.api.close();
-                      break;
               }
           }), tab.onDrop((event) => {
               this._onDrop.fire({
@@ -10577,8 +10571,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) {
@@ -10588,12 +10583,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();
       }, []);
-      return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { 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)))));
   };