refactor: single tab mode

packages/dockview/src/api/panelApi.ts

@@ -57,10 +57,7 @@ export interface PanelApi {
 /**
  * A core api implementation that should be used across all panel-like objects
  */
-export abstract class PanelApiImpl
+export class PanelApiImpl extends CompositeDisposable implements PanelApi {
-    extends CompositeDisposable
-    implements PanelApi
-{
     private _isFocused = false;
     private _isActive = false;
     private _isVisible = true;

packages/dockview/src/dockview/options.ts

@@ -68,6 +68,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     defaultTabComponent?: string;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
+    singleTabMode?: 'fullwidth' | 'default';
 }
 
 export interface PanelOptions {

packages/dockview/src/groupview/groupview.ts

@@ -234,9 +234,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
 
         this.container.classList.add('groupview');
 
-        this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel, {
+        this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
-            tabHeight: options.tabHeight,
-        });
 
         this.contentContainer = new ContentContainer();
 

packages/dockview/src/groupview/titlebar/tabsContainer.scss

@@ -10,9 +10,7 @@
         display: none;
     }
 
-    &.single-panel {
+    &.dv-single-tab.dv-full-width-single-tab {
-      background-color: red !important;
-
       .tabs-container {
           flex-grow: 1;
 

packages/dockview/src/groupview/titlebar/tabsContainer.ts

@@ -135,8 +135,7 @@ export class TabsContainer
 
     constructor(
         private readonly accessor: DockviewComponent,
-        private readonly group: GroupPanel,
+        private readonly group: GroupPanel
-        readonly options: { tabHeight?: number }
     ) {
         super();
 
@@ -145,17 +144,31 @@ export class TabsContainer
         this._element = document.createElement('div');
         this._element.className = 'tabs-and-actions-container';
 
-        this.height = options.tabHeight;
+        this.height = accessor.options.tabHeight;
+
+        toggleClass(
+            this._element,
+            'dv-full-width-single-tab',
+            this.accessor.options.singleTabMode === 'fullwidth'
+        );
 
         this.addDisposables(
             this.accessor.onDidAddPanel((e) => {
                 if (e.api.group === this.group) {
-                    toggleClass(this._element, 'single-panel', this.size === 1);
+                    toggleClass(
+                        this._element,
+                        'dv-single-tab',
+                        this.size === 1
+                    );
                 }
             }),
             this.accessor.onDidRemovePanel((e) => {
                 if (e.api.group === this.group) {
-                    toggleClass(this._element, 'single-panel', this.size === 1);
+                    toggleClass(
+                        this._element,
+                        'dv-single-tab',
+                        this.size === 1
+                    );
                 }
             })
         );

packages/dockview/src/react/dockview/dockview.tsx

@@ -69,6 +69,7 @@ export interface IDockviewReactProps {
     disableAutoResizing?: boolean;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
     groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
+    singleTabMode?: 'fullwidth' | 'default';
 }
 
 export const DockviewReact = React.forwardRef(
@@ -161,6 +162,7 @@ export const DockviewReact = React.forwardRef(
                     props.groupControlComponent,
                     { addPortal }
                 ),
+                singleTabMode: props.singleTabMode,
             });
 
             domRef.current?.appendChild(dockview.element);