feat: close tab with middle btn

Author: mathuo

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();
     }
 

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) => {

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>