From 9e9ce8a33473216cc419a88fed37db28738ba6e7 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Thu, 30 Jan 2025 13:43:53 +0000
Subject: [PATCH] feat: close tab with middle btn

---
 .../src/dockview/components/tab/defaultTab.ts |  6 ------
 .../components/titlebar/tabsContainer.ts      | 21 ++++++++++++-------
 packages/dockview/src/dockview/defaultTab.tsx | 16 --------------
 3 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
index 80c30be5d..205e4e562 100644
--- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
+++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
@@ -29,12 +29,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
         this._element.appendChild(this._content);
         this._element.appendChild(this.action);
 
-        this.addDisposables(
-            addDisposableListener(this.action, 'pointerdown', (ev) => {
-                ev.preventDefault();
-            })
-        );
-
         this.render();
     }
 
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
index d3bd0568b..f697c4083 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -314,6 +314,10 @@ export class TabsContainer
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
             }),
             tab.onChanged((event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+
                 const isFloatingGroupsEnabled =
                     !this.accessor.options.disableFloatingGroups;
 
@@ -342,14 +346,15 @@ export class TabsContainer
                     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) => {
diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx
index f1586fa83..d2801f40e 100644
--- a/packages/dockview/src/dockview/defaultTab.tsx
+++ b/packages/dockview/src/dockview/defaultTab.tsx
@@ -53,26 +53,10 @@ export const DockviewDefaultTab: React.FunctionComponent<
         e.preventDefault();
     }, []);
 
-    const onClick = React.useCallback(
-        (event: React.MouseEvent<HTMLDivElement>) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-
-            api.setActive();
-
-            if (rest.onClick) {
-                rest.onClick(event);
-            }
-        },
-        [api, rest.onClick]
-    );
-
     return (
         <div
             data-testid="dockview-dv-default-tab"
             {...rest}
-            onClick={onClick}
             className="dv-default-tab"
         >
             <span className="dv-default-tab-content">{title}</span>