dockview 1.5.2 → 1.6.0

package/dist/esm/groupview/titlebar/tabsContainer.d.ts

@@ -1,9 +1,9 @@
 import { IDisposable, CompositeDisposable } from '../../lifecycle';
 import { Event } from '../../events';
 import { ITab } from '../tab';
-import { IDockviewPanel } from '../groupPanel';
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import { GroupPanel } from '../groupviewPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 export interface TabDropIndexEvent {
     event: DragEvent;
     readonly index: number;
@@ -28,13 +28,12 @@ export interface ITabsContainer extends IDisposable {
     hide(): void;
 }
 export declare class TabsContainer extends CompositeDisposable implements ITabsContainer {
-    private accessor;
-    private group;
+    private readonly accessor;
+    private readonly group;
     private readonly _element;
     private readonly tabContainer;
-    private readonly voidContainer;
     private readonly actionContainer;
-    private readonly voidDropTarget;
+    private readonly voidContainer;
     private tabs;
     private selectedIndex;
     private actions;
@@ -55,9 +54,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     isActive(tab: ITab): boolean;
     at(index: number): ITab;
     indexOf(id: string): number;
-    constructor(accessor: DockviewComponent, group: GroupPanel, options: {
-        tabHeight?: number;
-    });
+    constructor(accessor: DockviewComponent, group: GroupPanel);
     setActive(_isGroupActive: boolean): void;
     private addTab;
     delete(id: string): void;

package/dist/esm/groupview/titlebar/tabsContainer.js

@@ -1,60 +1,9 @@
 import { CompositeDisposable, } from '../../lifecycle';
 import { addDisposableListener, Emitter } from '../../events';
-import { MouseEventKind, Tab } from '../tab';
-import { last } from '../../array';
-import { getPanelData } from '../../dnd/dataTransfer';
-import { Droptarget } from '../../dnd/droptarget';
-import { DockviewDropTargets } from '../dnd';
+import { Tab } from '../tab';
+import { VoidContainer } from './voidContainer';
+import { toggleClass } from '../../dom';
 export class TabsContainer extends CompositeDisposable {
-    constructor(accessor, group, options) {
-        super();
-        this.accessor = accessor;
-        this.group = group;
-        this.tabs = [];
-        this.selectedIndex = -1;
-        this._hidden = false;
-        this._onDrop = new Emitter();
-        this.onDrop = this._onDrop.event;
-        this.addDisposables(this._onDrop);
-        this._element = document.createElement('div');
-        this._element.className = 'tabs-and-actions-container';
-        this.height = options.tabHeight;
-        this.actionContainer = document.createElement('div');
-        this.actionContainer.className = 'action-container';
-        this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'tabs-container';
-        this.voidContainer = document.createElement('div');
-        this.voidContainer.className = 'void-container';
-        this._element.appendChild(this.tabContainer);
-        this._element.appendChild(this.voidContainer);
-        this._element.appendChild(this.actionContainer);
-        this.voidDropTarget = new Droptarget(this.voidContainer, {
-            validOverlays: 'none',
-            canDisplayOverlay: (event) => {
-                var _a;
-                const data = getPanelData();
-                if (data && this.accessor.id === data.viewId) {
-                    // don't show the overlay if the tab being dragged is the last panel of this group
-                    return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
-                }
-                return group.model.canDisplayOverlay(event, DockviewDropTargets.Panel);
-            },
-        });
-        this.addDisposables(this.voidDropTarget.onDrop((event) => {
-            this._onDrop.fire({
-                event: event.nativeEvent,
-                index: this.tabs.length,
-            });
-        }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const isLeftClick = event.button === 0;
-            if (isLeftClick) {
-                this.accessor.doSetGroupActive(this.group);
-            }
-        }));
-    }
     get panels() {
         return this.tabs.map((_) => _.value.panelId);
     }
@@ -115,6 +64,52 @@ export class TabsContainer extends CompositeDisposable {
     indexOf(id) {
         return this.tabs.findIndex((tab) => tab.value.panelId === id);
     }
+    constructor(accessor, group) {
+        super();
+        this.accessor = accessor;
+        this.group = group;
+        this.tabs = [];
+        this.selectedIndex = -1;
+        this._hidden = false;
+        this._onDrop = new Emitter();
+        this.onDrop = this._onDrop.event;
+        this.addDisposables(this._onDrop);
+        this._element = document.createElement('div');
+        this._element.className = 'tabs-and-actions-container';
+        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, 'dv-single-tab', this.size === 1);
+            }
+        }), this.accessor.onDidRemovePanel((e) => {
+            if (e.api.group === this.group) {
+                toggleClass(this._element, 'dv-single-tab', this.size === 1);
+            }
+        }));
+        this.actionContainer = document.createElement('div');
+        this.actionContainer.className = 'action-container';
+        this.tabContainer = document.createElement('div');
+        this.tabContainer.className = 'tabs-container';
+        this.voidContainer = new VoidContainer(this.accessor, this.group);
+        this._element.appendChild(this.tabContainer);
+        this._element.appendChild(this.voidContainer.element);
+        this._element.appendChild(this.actionContainer);
+        this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+            this._onDrop.fire({
+                event: event.nativeEvent,
+                index: this.tabs.length,
+            });
+        }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            const isLeftClick = event.button === 0;
+            if (isLeftClick) {
+                this.accessor.doSetGroupActive(this.group);
+            }
+        }));
+    }
     setActive(_isGroupActive) {
         // noop
     }
@@ -159,15 +154,13 @@ export class TabsContainer extends CompositeDisposable {
             var _a;
             const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
                 this.group.model.isContentFocused;
-            const isLeftClick = event.event.button === 0;
-            if (!isLeftClick || event.event.defaultPrevented) {
+            const isLeftClick = event.button === 0;
+            if (!isLeftClick || event.defaultPrevented) {
                 return;
             }
-            if (event.kind === MouseEventKind.CLICK) {
-                this.group.model.openPanel(panel, {
-                    skipFocus: alreadyFocused,
-                });
-            }
+            this.group.model.openPanel(panel, {
+                skipFocus: alreadyFocused,
+            });
         }), tabToAdd.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,

package/dist/esm/groupview/titlebar/voidContainer.d.ts

@@ -0,0 +1,15 @@
+import { DroptargetEvent } from '../../dnd/droptarget';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
+import { Event } from '../../events';
+import { CompositeDisposable } from '../../lifecycle';
+import { GroupPanel } from '../groupviewPanel';
+export declare class VoidContainer extends CompositeDisposable {
+    private readonly accessor;
+    private readonly group;
+    private readonly _element;
+    private readonly voidDropTarget;
+    private readonly _onDrop;
+    readonly onDrop: Event<DroptargetEvent>;
+    get element(): HTMLElement;
+    constructor(accessor: DockviewComponent, group: GroupPanel);
+}

package/dist/esm/groupview/titlebar/voidContainer.js

@@ -0,0 +1,47 @@
+import { last } from '../../array';
+import { getPanelData } from '../../dnd/dataTransfer';
+import { Droptarget } from '../../dnd/droptarget';
+import { GroupDragHandler } from '../../dnd/groupDragHandler';
+import { addDisposableListener, Emitter } from '../../events';
+import { CompositeDisposable } from '../../lifecycle';
+import { DockviewDropTargets } from '../dnd';
+export class VoidContainer extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
+    constructor(accessor, group) {
+        super();
+        this.accessor = accessor;
+        this.group = group;
+        this._onDrop = new Emitter();
+        this.onDrop = this._onDrop.event;
+        this._element = document.createElement('div');
+        this._element.className = 'void-container';
+        this._element.tabIndex = 0;
+        this._element.draggable = true;
+        this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+            this.accessor.doSetGroupActive(this.group);
+        }));
+        const handler = new GroupDragHandler(this._element, accessor.id, group);
+        this.voidDropTarget = new Droptarget(this._element, {
+            acceptedTargetZones: ['center'],
+            canDisplayOverlay: (event, position) => {
+                var _a;
+                const data = getPanelData();
+                if (data && this.accessor.id === data.viewId) {
+                    if (data.panelId === null &&
+                        data.groupId === this.group.id) {
+                        // don't allow group move to drop on self
+                        return false;
+                    }
+                    // don't show the overlay if the tab being dragged is the last panel of this group
+                    return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
+                }
+                return group.model.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
+            },
+        });
+        this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+            this._onDrop.fire(event);
+        }), this.voidDropTarget);
+    }
+}

package/dist/esm/groupview/types.d.ts

@@ -1,9 +1,10 @@
 import { IDockviewComponent } from '../dockview/dockviewComponent';
-import { DockviewPanelApi } from '../api/groupPanelApi';
-import { PanelInitParameters, IPanel } from '../panel/types';
+import { DockviewPanelApi } from '../api/dockviewPanelApi';
+import { PanelInitParameters, IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
 import { GroupPanel } from './groupviewPanel';
 import { Event } from '../events';
+import { IGroupPanelView } from '../dockview/defaultGroupPanelView';
 export interface IRenderable {
     id: string;
     element: HTMLElement;
@@ -50,3 +51,18 @@ export interface PanelContentPartConstructor {
 export interface WatermarkConstructor {
     new (): IWatermarkRenderer;
 }
+export interface IGroupPanelInitParameters extends PanelInitParameters, HeaderPartInitParameters {
+    view: IGroupPanelView;
+}
+export type GroupPanelUpdateEvent = PanelUpdateEvent<{
+    params?: Parameters;
+    title?: string;
+}>;
+export interface GroupviewPanelState {
+    id: string;
+    view?: any;
+    title: string;
+    params?: {
+        [key: string]: any;
+    };
+}

package/dist/esm/hostedContainer.js

@@ -1,6 +1,9 @@
 import { trackFocus } from './dom';
 import { Emitter } from './events';
 export class HostedContainer {
+    get element() {
+        return this._element;
+    }
     constructor(options) {
         this.options = options;
         this._onDidFocus = new Emitter();
@@ -36,9 +39,6 @@ export class HostedContainer {
         });
         options.parent.appendChild(this._element);
     }
-    get element() {
-        return this._element;
-    }
     hide() {
         this._element.style.visibility = 'hidden';
     }

package/dist/esm/index.d.ts

@@ -17,14 +17,14 @@ export { PaneviewComponentOptions } from './paneview/options';
 export * from './gridview/gridviewPanel';
 export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
-export * from './groupview/groupPanel';
+export * from './groupview/types';
 export * from './react';
 export { Event } from './events';
 export { IDisposable } from './lifecycle';
-export { Position } from './dnd/droptarget';
+export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget';
 export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
 export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi';
-export { TitleEvent, DockviewPanelApi } from './api/groupPanelApi';
+export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
 export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi';
 export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
 export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';

package/dist/esm/index.js

@@ -16,8 +16,8 @@ export * from './paneview/paneviewComponent';
 export * from './gridview/gridviewPanel';
 export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
-export * from './groupview/groupPanel';
+export * from './groupview/types';
 export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
 export { Event } from './events';
-export { Position } from './dnd/droptarget';
+export { positionToDirection, directionToPosition, } from './dnd/droptarget';
 export { SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';

package/dist/esm/lifecycle.js

@@ -7,12 +7,12 @@ export var Disposable;
     };
 })(Disposable || (Disposable = {}));
 export class CompositeDisposable {
-    constructor(...args) {
-        this.disposables = args;
-    }
     static from(...args) {
         return new CompositeDisposable(...args);
     }
+    constructor(...args) {
+        this.disposables = args;
+    }
     addDisposables(...args) {
         args.forEach((arg) => this.disposables.push(arg));
     }

package/dist/esm/paneview/defaultPaneviewHeader.js

@@ -3,6 +3,9 @@ import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { toggleClass } from '../dom';
 import { createChevronRightButton, createExpandMoreButton } from '../svg';
 export class DefaultHeader extends CompositeDisposable {
+    get element() {
+        return this._element;
+    }
     constructor() {
         super();
         this._expandedIcon = createExpandMoreButton();
@@ -21,9 +24,6 @@ export class DefaultHeader extends CompositeDisposable {
             (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
         }));
     }
-    get element() {
-        return this._element;
-    }
     init(params) {
         this.apiRef.api = params.api;
         this._content.textContent = params.title;

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -1,6 +1,6 @@
 import { DragHandler } from '../dnd/abstractDragHandler';
 import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
-import { Droptarget, Position } from '../dnd/droptarget';
+import { Droptarget } from '../dnd/droptarget';
 import { Emitter } from '../events';
 import { PaneviewPanel, } from './paneviewPanel';
 export class DraggablePaneviewPanel extends PaneviewPanel {
@@ -31,7 +31,10 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
             }
         })(this.header);
         this.target = new Droptarget(this.element, {
-            validOverlays: 'vertical',
+            acceptedTargetZones: ['top', 'bottom'],
+            overlayModel: {
+                activationSize: { type: 'percentage', value: 50 },
+            },
             canDisplayOverlay: (event) => {
                 const data = getPaneData();
                 if (data) {
@@ -74,12 +77,10 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         const allPanels = containerApi.panels;
         const fromIndex = allPanels.indexOf(existingPanel);
         let toIndex = containerApi.panels.indexOf(this);
-        if (event.position === Position.Left ||
-            event.position === Position.Top) {
+        if (event.position === 'left' || event.position === 'top') {
             toIndex = Math.max(0, toIndex - 1);
         }
-        if (event.position === Position.Right ||
-            event.position === Position.Bottom) {
+        if (event.position === 'right' || event.position === 'bottom') {
             if (fromIndex > toIndex) {
                 toIndex++;
             }

package/dist/esm/paneview/paneview.js

@@ -3,6 +3,27 @@ import { CompositeDisposable } from '../lifecycle';
 import { Emitter } from '../events';
 import { addClasses, removeClasses } from '../dom';
 export class Paneview extends CompositeDisposable {
+    get onDidAddView() {
+        return this.splitview.onDidAddView;
+    }
+    get onDidRemoveView() {
+        return this.splitview.onDidRemoveView;
+    }
+    get minimumSize() {
+        return this.splitview.minimumSize;
+    }
+    get maximumSize() {
+        return this.splitview.maximumSize;
+    }
+    get orientation() {
+        return this.splitview.orientation;
+    }
+    get size() {
+        return this.splitview.size;
+    }
+    get orthogonalSize() {
+        return this.splitview.orthogonalSize;
+    }
     constructor(container, options) {
         var _a;
         super();
@@ -45,27 +66,6 @@ export class Paneview extends CompositeDisposable {
             this._onDidChange.fire();
         }));
     }
-    get onDidAddView() {
-        return this.splitview.onDidAddView;
-    }
-    get onDidRemoveView() {
-        return this.splitview.onDidRemoveView;
-    }
-    get minimumSize() {
-        return this.splitview.minimumSize;
-    }
-    get maximumSize() {
-        return this.splitview.maximumSize;
-    }
-    get orientation() {
-        return this.splitview.orientation;
-    }
-    get size() {
-        return this.splitview.size;
-    }
-    get orthogonalSize() {
-        return this.splitview.orthogonalSize;
-    }
     addPane(pane, size, index = this.splitview.length, skipLayout = false) {
         const disposable = pane.onDidChangeExpansionState(() => {
             this.setupAnimation();

package/dist/esm/paneview/paneviewComponent.js

@@ -21,36 +21,6 @@ export class PaneFramework extends DraggablePaneviewPanel {
     }
 }
 export class PaneviewComponent extends CompositeDisposable {
-    constructor(element, options) {
-        super();
-        this.element = element;
-        this._id = nextLayoutId.next();
-        this._disposable = new MutableDisposable();
-        this._viewDisposables = new Map();
-        this._onDidLayoutfromJSON = new Emitter();
-        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
-        this._onDidLayoutChange = new Emitter();
-        this.onDidLayoutChange = this._onDidLayoutChange.event;
-        this._onDidDrop = new Emitter();
-        this.onDidDrop = this._onDidDrop.event;
-        this._onDidAddView = new Emitter();
-        this.onDidAddView = this._onDidAddView.event;
-        this._onDidRemoveView = new Emitter();
-        this.onDidRemoveView = this._onDidRemoveView.event;
-        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
-        this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
-        this.paneview = new Paneview(this.element, {
-            // only allow paneview in the vertical orientation for now
-            orientation: Orientation.VERTICAL,
-        });
-        this.addDisposables(this._disposable);
-    }
     get id() {
         return this._id;
     }
@@ -85,6 +55,36 @@ export class PaneviewComponent extends CompositeDisposable {
     get options() {
         return this._options;
     }
+    constructor(element, options) {
+        super();
+        this.element = element;
+        this._id = nextLayoutId.next();
+        this._disposable = new MutableDisposable();
+        this._viewDisposables = new Map();
+        this._onDidLayoutfromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidLayoutChange = new Emitter();
+        this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddView = new Emitter();
+        this.onDidAddView = this._onDidAddView.event;
+        this._onDidRemoveView = new Emitter();
+        this.onDidRemoveView = this._onDidRemoveView.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+        this._options = options;
+        if (!options.components) {
+            options.components = {};
+        }
+        if (!options.frameworkComponents) {
+            options.frameworkComponents = {};
+        }
+        this.paneview = new Paneview(this.element, {
+            // only allow paneview in the vertical orientation for now
+            orientation: Orientation.VERTICAL,
+        });
+        this.addDisposables(this._disposable);
+    }
     focus() {
         //
     }

package/dist/esm/paneview/paneviewPanel.js

@@ -4,50 +4,6 @@ import { addDisposableListener, Emitter } from '../events';
 import { BasePanelView, } from '../gridview/basePanelView';
 import { Orientation } from '../splitview/core/splitview';
 export class PaneviewPanel extends BasePanelView {
-    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-        super(id, component, new PaneviewPanelApiImpl(id));
-        this.headerComponent = headerComponent;
-        this._onDidChangeExpansionState = new Emitter({ replay: true });
-        this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.headerSize = 22;
-        this._orthogonalSize = 0;
-        this._size = 0;
-        this._minimumBodySize = 100;
-        this._maximumBodySize = Number.POSITIVE_INFINITY;
-        this._isExpanded = false;
-        this.expandedSize = 0;
-        this.api.pane = this; // TODO cannot use 'this' before 'super'
-        this._isExpanded = isExpanded;
-        this._headerVisible = isHeaderVisible;
-        this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
-        this._orientation = orientation;
-        this.element.classList.add('pane');
-        this.addDisposables(this.api.onDidSizeChange((event) => {
-            this._onDidChange.fire({ size: event.size });
-        }), addDisposableListener(this.element, 'mouseenter', (ev) => {
-            this.api._onMouseEnter.fire(ev);
-        }), addDisposableListener(this.element, 'mouseleave', (ev) => {
-            this.api._onMouseLeave.fire(ev);
-        }));
-        this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
-            this.api._onDidExpansionChange.fire({
-                isExpanded: isPanelExpanded,
-            });
-        }), this.api.onDidFocusChange((e) => {
-            if (!this.header) {
-                return;
-            }
-            if (e.isFocused) {
-                addClasses(this.header, 'focused');
-            }
-            else {
-                removeClasses(this.header, 'focused');
-            }
-        }));
-        this.renderOnce();
-    }
     set orientation(value) {
         this._orientation = value;
     }
@@ -95,6 +51,51 @@ export class PaneviewPanel extends BasePanelView {
         this._headerVisible = value;
         this.header.style.display = value ? '' : 'none';
     }
+    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
+        super(id, component, new PaneviewPanelApiImpl(id));
+        this.headerComponent = headerComponent;
+        this._onDidChangeExpansionState = new Emitter({ replay: true });
+        this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this.headerSize = 22;
+        this._orthogonalSize = 0;
+        this._size = 0;
+        this._minimumBodySize = 100;
+        this._maximumBodySize = Number.POSITIVE_INFINITY;
+        this._isExpanded = false;
+        this.expandedSize = 0;
+        this.api.pane = this; // TODO cannot use 'this' before 'super'
+        this.api.initialize(this);
+        this._isExpanded = isExpanded;
+        this._headerVisible = isHeaderVisible;
+        this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
+        this._orientation = orientation;
+        this.element.classList.add('pane');
+        this.addDisposables(this.api.onDidSizeChange((event) => {
+            this._onDidChange.fire({ size: event.size });
+        }), addDisposableListener(this.element, 'mouseenter', (ev) => {
+            this.api._onMouseEnter.fire(ev);
+        }), addDisposableListener(this.element, 'mouseleave', (ev) => {
+            this.api._onMouseLeave.fire(ev);
+        }));
+        this.addDisposables(this._onDidChangeExpansionState, this.onDidChangeExpansionState((isPanelExpanded) => {
+            this.api._onDidExpansionChange.fire({
+                isExpanded: isPanelExpanded,
+            });
+        }), this.api.onDidFocusChange((e) => {
+            if (!this.header) {
+                return;
+            }
+            if (e.isFocused) {
+                addClasses(this.header, 'focused');
+            }
+            else {
+                removeClasses(this.header, 'focused');
+            }
+        }));
+        this.renderOnce();
+    }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
     }

package/dist/esm/react/deserializer.d.ts

@@ -1,5 +1,6 @@
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState } from '../groupview/types';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 import { IPanelDeserializer } from '../dockview/deserializer';
 import { GroupPanel } from '../groupview/groupviewPanel';
 export declare class ReactPanelDeserialzier implements IPanelDeserializer {

package/dist/esm/react/deserializer.js

@@ -1,4 +1,4 @@
-import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { DockviewPanel } from '../dockview/dockviewPanel';
 import { createComponent } from '../panel/componentFactory';
 import { DockviewApi } from '../api/component.api';
 import { DefaultTab } from '../dockview/components/tab/defaultTab';
@@ -27,7 +27,7 @@ export class ReactPanelDeserialzier {
             content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
             tab,
         });
-        const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
+        const panel = new DockviewPanel(panelId, this.layout, new DockviewApi(this.layout), group);
         panel.init({
             view,
             title,

package/dist/esm/react/dockview/defaultTab.d.ts

@@ -1,4 +1,4 @@
 import { IDockviewPanelHeaderProps } from './dockview';
 import * as React from 'react';
-export declare type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
+export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
 export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;