dockview 1.4.3 → 1.5.0

package/dist/esm/dockview/components/tab/defaultTab.d.ts

@@ -2,6 +2,7 @@ import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../../groupview/types';
 import { PanelUpdateEvent } from '../../../panel/types';
 import { GroupPanel } from '../../../groupview/groupviewPanel';
+export declare const DEFAULT_TAB_IDENTIFIER = "__default__tab__";
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
     private _element;
     private _isPanelVisible;

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -1,5 +1,7 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { addDisposableListener } from '../../../events';
+import { createCloseButton } from '../../../svg';
+export const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
 export class DefaultTab extends CompositeDisposable {
     constructor() {
         super();
@@ -19,8 +21,9 @@ export class DefaultTab extends CompositeDisposable {
         this._list = document.createElement('ul');
         this._list.className = 'tab-list';
         //
-        this.action = document.createElement('a');
+        this.action = document.createElement('div');
         this.action.className = 'tab-action';
+        this.action.appendChild(createCloseButton());
         //
         this._element.appendChild(this._content);
         this._element.appendChild(this._actionContainer);
@@ -36,7 +39,7 @@ export class DefaultTab extends CompositeDisposable {
         return this._element;
     }
     get id() {
-        return '__DEFAULT_TAB__';
+        return DEFAULT_TAB_IDENTIFIER;
     }
     update(event) {
         this.params = Object.assign(Object.assign({}, this.params), event.params);

package/dist/esm/dockview/components/watermark/watermark.js

@@ -2,6 +2,7 @@ import { ActionContainer } from '../../../actionbar/actionsContainer';
 import { addDisposableListener } from '../../../events';
 import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
+import { createCloseButton } from '../../../svg';
 export class Watermark extends CompositeDisposable {
     constructor() {
         super();
@@ -18,8 +19,9 @@ export class Watermark extends CompositeDisposable {
         const actions = new ActionContainer();
         title.appendChild(emptySpace);
         title.appendChild(actions.element);
-        const closeAnchor = document.createElement('a');
+        const closeAnchor = document.createElement('div');
         closeAnchor.className = 'close-action';
+        closeAnchor.appendChild(createCloseButton());
         actions.add(closeAnchor);
         this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
             var _a;

package/dist/esm/dockview/defaultGroupPanelView.d.ts

@@ -1,11 +1,10 @@
-import { GroupPanelPartInitParameters, IActionsRenderer, IContentRenderer, ITabRenderer } from '../groupview/types';
+import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
 import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
 export interface IGroupPanelView extends IDisposable {
     readonly content: IContentRenderer;
     readonly tab?: ITabRenderer;
-    readonly actions?: IActionsRenderer;
     update(event: GroupPanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
@@ -15,14 +14,11 @@ export interface IGroupPanelView extends IDisposable {
 export declare class DefaultGroupPanelView implements IGroupPanelView {
     private readonly _content;
     private readonly _tab;
-    private readonly _actions;
     get content(): IContentRenderer;
     get tab(): ITabRenderer;
-    get actions(): IActionsRenderer | undefined;
     constructor(renderers: {
         content: IContentRenderer;
         tab?: ITabRenderer;
-        actions?: IActionsRenderer;
     });
     init(params: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -4,16 +4,6 @@ export class DefaultGroupPanelView {
         var _a;
         this._content = renderers.content;
         this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-        this._actions =
-            renderers.actions ||
-                (this.content.actions
-                    ? {
-                        element: this.content.actions,
-                        dispose: () => {
-                            //
-                        },
-                    }
-                    : undefined);
     }
     get content() {
         return this._content;
@@ -21,9 +11,6 @@ export class DefaultGroupPanelView {
     get tab() {
         return this._tab;
     }
-    get actions() {
-        return this._actions;
-    }
     init(params) {
         this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
         this.tab.init(params);
@@ -41,15 +28,17 @@ export class DefaultGroupPanelView {
         this.tab.update(event);
     }
     toJSON() {
+        let tab = this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
+        if (tab && Object.keys(tab).length === 0) {
+            tab = undefined;
+        }
         return {
             content: this.content.toJSON(),
-            tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
+            tab,
         };
     }
     dispose() {
-        var _a;
         this.content.dispose();
         this.tab.dispose();
-        (_a = this.actions) === null || _a === void 0 ? void 0 : _a.dispose();
     }
 }

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -34,7 +34,7 @@ export interface SerializedDockview {
         tabHeight?: number;
     };
 }
-export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent'>;
+export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createGroupControlElement'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
     group: GroupPanel;

package/dist/esm/dockview/dockviewComponent.js

@@ -12,7 +12,6 @@ import { DockviewApi } from '../api/component.api';
 import { MouseEventKind } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
 import { DefaultTab } from './components/tab/defaultTab';
-import { GroupChangeKind2, } from '../groupview/groupview';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { DefaultGroupPanelView } from './defaultGroupPanelView';
 const nextGroupId = sequentialNumberGenerator();
@@ -426,22 +425,12 @@ export class DockviewComponent extends BaseGrid {
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
             }), view.model.onDidDrop((event) => {
                 this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
-            }), view.model.onDidGroupChange((event) => {
-                switch (event.kind) {
-                    case GroupChangeKind2.ADD_PANEL:
-                        if (event.panel) {
-                            this._onDidAddPanel.fire(event.panel);
-                        }
-                        break;
-                    case GroupChangeKind2.REMOVE_PANEL:
-                        if (event.panel) {
-                            this._onDidRemovePanel.fire(event.panel);
-                        }
-                        break;
-                    case GroupChangeKind2.PANEL_ACTIVE:
-                        this._onDidActivePanelChange.fire(event.panel);
-                        break;
-                }
+            }), view.model.onDidAddPanel((event) => {
+                this._onDidAddPanel.fire(event.panel);
+            }), view.model.onDidRemovePanel((event) => {
+                this._onDidRemovePanel.fire(event.panel);
+            }), view.model.onDidActivePanelChange((event) => {
+                this._onDidActivePanelChange.fire(event.panel);
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
@@ -456,7 +445,7 @@ export class DockviewComponent extends BaseGrid {
     createPanel(options, group) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
-            tab: this.createTabComponent(options.id, options.tabComponent),
+            tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
         });
         const panel = new DockviewGroupPanel(options.id, this, this._api, group);
         panel.init({

package/dist/esm/dockview/options.d.ts

@@ -7,6 +7,8 @@ import { GroupPanel } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
 import { DockviewDropTargets } from '../groupview/dnd';
+import { PanelTransfer } from '../dnd/dataTransfer';
+import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;
     tab: FrameworkFactory<ITabRenderer>;
@@ -43,6 +45,7 @@ export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
     target: DockviewDropTargets;
     group: GroupPanel;
+    getData: () => PanelTransfer | undefined;
 }
 export interface DockviewComponentOptions extends DockviewRenderFunctions {
     watermarkComponent?: WatermarkConstructor;
@@ -51,7 +54,9 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     tabHeight?: number;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
+    defaultTabComponent?: string;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
+    createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
 }
 export interface PanelOptions {
     component: string;

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

@@ -9,11 +9,6 @@ import { PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { IDockviewPanel } from './groupPanel';
 import { GroupPanel } from './groupviewPanel';
 import { DockviewDropTargets } from './dnd';
-export declare enum GroupChangeKind2 {
-    ADD_PANEL = "ADD_PANEL",
-    REMOVE_PANEL = "REMOVE_PANEL",
-    PANEL_ACTIVE = "PANEL_ACTIVE"
-}
 export interface DndService {
     canDisplayOverlay(group: IGroupview, event: DragEvent, target: DockviewDropTargets): boolean;
     onDrop(group: IGroupview, event: DragEvent, position: Position, index?: number): void;
@@ -49,14 +44,13 @@ export interface GroupPanelViewState extends CoreGroupOptions {
     id: string;
 }
 export interface GroupviewChangeEvent {
-    readonly kind: GroupChangeKind2;
-    readonly panel?: IDockviewPanel;
+    readonly panel: IDockviewPanel;
 }
 export interface GroupviewDropEvent {
-    nativeEvent: DragEvent;
-    position: Position;
+    readonly nativeEvent: DragEvent;
+    readonly position: Position;
+    readonly index?: number;
     getData(): PanelTransfer | undefined;
-    index?: number;
 }
 export interface IHeader {
     hidden: boolean;
@@ -70,7 +64,9 @@ export interface IGroupview extends IDisposable, IGridPanelView {
     readonly header: IHeader;
     readonly isContentFocused: boolean;
     readonly onDidDrop: Event<GroupviewDropEvent>;
-    readonly onDidGroupChange: Event<GroupviewChangeEvent>;
+    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: boolean;
     isPanelActive: (panel: IDockviewPanel) => boolean;
@@ -102,10 +98,11 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     private readonly tabsContainer;
     private readonly contentContainer;
     private readonly dropTarget;
-    private _activePanel?;
+    private _activePanel;
     private watermark?;
     private _isGroupActive;
     private _locked;
+    private _control;
     private mostRecentlyUsed;
     private readonly _onDidChange;
     readonly onDidChange: Event<IViewSize | undefined>;
@@ -114,10 +111,14 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     private _panels;
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
-    private readonly _onDidGroupChange;
-    readonly onDidGroupChange: Event<GroupviewChangeEvent>;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<GroupviewDropEvent>;
+    private readonly _onDidAddPanel;
+    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    private readonly _onDidRemovePanel;
+    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
     get element(): HTMLElement;
     get activePanel(): IDockviewPanel | undefined;
     get locked(): boolean;
@@ -160,7 +161,7 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     closePanel(panel: IDockviewPanel): void;
     private doClose;
     isPanelActive(panel: IDockviewPanel): boolean;
-    updateActions(): void;
+    updateActions(element: HTMLElement | undefined): void;
     setActive(isGroupActive: boolean, skipFocus?: boolean, force?: boolean): void;
     layout(width: number, height: number): void;
     private _removePanel;

package/dist/esm/groupview/groupview.js

@@ -7,12 +7,6 @@ import { CompositeDisposable } from '../lifecycle';
 import { ContentContainer } from './panel/content';
 import { TabsContainer } from './titlebar/tabsContainer';
 import { DockviewDropTargets } from './dnd';
-export var GroupChangeKind2;
-(function (GroupChangeKind2) {
-    GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
-    GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
-    GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-})(GroupChangeKind2 || (GroupChangeKind2 = {}));
 export class Groupview extends CompositeDisposable {
     constructor(container, accessor, id, options, parent) {
         super();
@@ -31,12 +25,15 @@ export class Groupview extends CompositeDisposable {
         this._panels = [];
         this._onMove = new Emitter();
         this.onMove = this._onMove.event;
-        this._onDidGroupChange = new Emitter();
-        this.onDidGroupChange = this._onDidGroupChange.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddPanel = new Emitter();
+        this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidRemovePanel = new Emitter();
+        this.onDidRemovePanel = this._onDidRemovePanel.event;
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this.container.classList.add('groupview');
-        this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
         this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
             tabHeight: options.tabHeight,
         });
@@ -48,7 +45,7 @@ export class Groupview extends CompositeDisposable {
                     return false;
                 }
                 const data = getPanelData();
-                if (data) {
+                if (data && data.viewId === this.accessor.id) {
                     const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
@@ -58,7 +55,7 @@ export class Groupview extends CompositeDisposable {
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = !!options.locked;
-        this.addDisposables(this._onMove, this._onDidGroupChange, this.tabsContainer.onDrop((event) => {
+        this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
             this.handleDropEvent(event.event, Position.Center, event.index);
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.parent, true);
@@ -130,6 +127,15 @@ export class Groupview extends CompositeDisposable {
         // correctly initialized
         this.setActive(this.isActive, true, true);
         this.updateContainer();
+        if (this.accessor.options.createGroupControlElement) {
+            this._control = this.accessor.options.createGroupControlElement(this.parent);
+            this.addDisposables(this._control);
+            this._control.init({
+                containerApi: new DockviewApi(this.accessor),
+                api: this.parent.api,
+            });
+            this.tabsContainer.setActionElement(this._control.element);
+        }
     }
     indexOf(panel) {
         return this.tabsContainer.indexOf(panel.id);
@@ -260,14 +266,8 @@ export class Groupview extends CompositeDisposable {
     isPanelActive(panel) {
         return this._activePanel === panel;
     }
-    updateActions() {
-        var _a, _b;
-        if (this.isActive && ((_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.actions)) {
-            this.tabsContainer.setActionElement(this._activePanel.view.actions.element);
-        }
-        else {
-            this.tabsContainer.setActionElement(undefined);
-        }
+    updateActions(element) {
+        this.tabsContainer.setActionElement(element);
     }
     setActive(isGroupActive, skipFocus = false, force = false) {
         var _a, _b;
@@ -323,10 +323,7 @@ export class Groupview extends CompositeDisposable {
         if (this.mostRecentlyUsed.includes(panel)) {
             this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
         }
-        this._onDidGroupChange.fire({
-            kind: GroupChangeKind2.REMOVE_PANEL,
-            panel,
-        });
+        this._onDidRemovePanel.fire({ panel });
     }
     doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
         const existingPanel = this._panels.indexOf(panel);
@@ -343,10 +340,7 @@ export class Groupview extends CompositeDisposable {
         }
         this.updateMru(panel);
         this.panels.splice(index, 0, panel);
-        this._onDidGroupChange.fire({
-            kind: GroupChangeKind2.ADD_PANEL,
-            panel,
-        });
+        this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
         this._activePanel = panel;
@@ -354,10 +348,7 @@ export class Groupview extends CompositeDisposable {
             this.tabsContainer.setActivePanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
-            this._onDidGroupChange.fire({
-                kind: GroupChangeKind2.PANEL_ACTIVE,
-                panel,
-            });
+            this._onDidActivePanelChange.fire({ panel });
         }
     }
     updateMru(panel) {
@@ -367,7 +358,6 @@ export class Groupview extends CompositeDisposable {
         this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
     }
     updateContainer() {
-        this.updateActions();
         toggleClass(this.container, 'empty', this.isEmpty);
         this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
         if (this.isEmpty && !this.watermark) {
@@ -404,6 +394,7 @@ export class Groupview extends CompositeDisposable {
                 nativeEvent: event,
                 target,
                 group: this.accessor.getPanel(this.id),
+                getData: getPanelData,
             });
         }
         return false;

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

@@ -25,6 +25,7 @@ export interface ITab {
 }
 export declare class Tab extends CompositeDisposable implements ITab {
     readonly panelId: string;
+    private readonly accessor;
     private readonly group;
     private readonly _element;
     private readonly droptarget;

package/dist/esm/groupview/tab.js

@@ -14,6 +14,7 @@ export class Tab extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
+        this.accessor = accessor;
         this.group = group;
         this._onChanged = new Emitter();
         this.onChanged = this._onChanged.event;
@@ -64,7 +65,7 @@ export class Tab extends CompositeDisposable {
             validOverlays: 'none',
             canDisplayOverlay: (event) => {
                 const data = getPanelData();
-                if (data) {
+                if (data && this.accessor.id === data.viewId) {
                     return this.panelId !== data.panelId;
                 }
                 return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);

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

@@ -33,7 +33,7 @@ export class TabsContainer extends CompositeDisposable {
             canDisplayOverlay: (event) => {
                 var _a;
                 const data = getPanelData();
-                if (data) {
+                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;
                 }

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

@@ -1,4 +1,3 @@
-import { IDisposable } from '../lifecycle';
 import { IDockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewPanelApi } from '../api/groupPanelApi';
 import { PanelInitParameters, IPanel } from '../panel/types';
@@ -32,9 +31,6 @@ export interface ITabRenderer extends IPanel {
     init(parameters: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
 }
-export interface IActionsRenderer extends IDisposable {
-    readonly element: HTMLElement;
-}
 export interface IContentRenderer extends IPanel {
     readonly element: HTMLElement;
     readonly actions?: HTMLElement;

package/dist/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
+export { PaneviewComponentOptions } from './paneview/options';
 export * from './gridview/gridviewPanel';
 export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';

package/dist/esm/paneview/defaultPaneviewHeader.d.ts

@@ -3,6 +3,8 @@ import { CompositeDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
 import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
 export declare class DefaultHeader extends CompositeDisposable implements IPaneHeaderPart {
+    private readonly _expandedIcon;
+    private readonly _collapsedIcon;
     private readonly disposable;
     private readonly _element;
     private readonly _content;
@@ -13,6 +15,7 @@ export declare class DefaultHeader extends CompositeDisposable implements IPaneH
     init(params: PanePanelInitParameter & {
         api: PaneviewPanelApiImpl;
     }): void;
+    private updateIcon;
     update(_params: PanelUpdateEvent): void;
     dispose(): void;
 }

package/dist/esm/paneview/defaultPaneviewHeader.js

@@ -1,15 +1,19 @@
 import { addDisposableListener } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { toggleClass } from '../dom';
+import { createChevronRightButton, createExpandMoreButton } from '../svg';
 export class DefaultHeader extends CompositeDisposable {
     constructor() {
         super();
+        this._expandedIcon = createExpandMoreButton();
+        this._collapsedIcon = createChevronRightButton();
         this.disposable = new MutableDisposable();
         this.apiRef = { api: null };
         this._element = document.createElement('div');
         this.element.className = 'default-header';
         this._content = document.createElement('span');
-        this._expander = document.createElement('a');
+        this._expander = document.createElement('div');
+        this._expander.className = 'dockview-pane-header-icon';
         this.element.appendChild(this._expander);
         this.element.appendChild(this._content);
         this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -23,12 +27,32 @@ export class DefaultHeader extends CompositeDisposable {
     init(params) {
         this.apiRef.api = params.api;
         this._content.textContent = params.title;
-        this._expander.textContent = '▼';
-        toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
-        this.disposable.value = params.api.onDidExpansionChange((e) => {
-            toggleClass(this._expander, 'collapsed', !e.isExpanded);
+        this.updateIcon();
+        this.disposable.value = params.api.onDidExpansionChange(() => {
+            this.updateIcon();
         });
     }
+    updateIcon() {
+        var _a;
+        const isExpanded = !!((_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.isExpanded);
+        toggleClass(this._expander, 'collapsed', !isExpanded);
+        if (isExpanded) {
+            if (this._expander.contains(this._collapsedIcon)) {
+                this._collapsedIcon.remove();
+            }
+            if (!this._expander.contains(this._expandedIcon)) {
+                this._expander.appendChild(this._expandedIcon);
+            }
+        }
+        else {
+            if (this._expander.contains(this._expandedIcon)) {
+                this._expandedIcon.remove();
+            }
+            if (!this._expander.contains(this._collapsedIcon)) {
+                this._expander.appendChild(this._collapsedIcon);
+            }
+        }
+    }
     update(_params) {
         //
     }

package/dist/esm/paneview/draggablePaneviewPanel.d.ts

@@ -1,17 +1,19 @@
 import { PaneTransfer } from '../dnd/dataTransfer';
 import { DroptargetEvent } from '../dnd/droptarget';
 import { Orientation } from '../splitview/core/splitview';
+import { IPaneviewComponent } from './paneviewComponent';
 import { IPaneviewPanel, PaneviewPanel } from './paneviewPanel';
 export interface PaneviewDropEvent2 extends DroptargetEvent {
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
 }
 export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
+    private readonly accessor;
     private handler;
     private target;
     private readonly _onDidDrop;
     readonly onDidDrop: import("../events").Event<PaneviewDropEvent2>;
-    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
+    constructor(accessor: IPaneviewComponent, id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
     private initDragFeatures;
     private onDrop;
 }