dockview-core 4.13.0 → 5.0.0

package/dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -2,6 +2,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewHeaderPosition } from '../dockview/options';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl, SizeEvent } from './gridviewPanelApi';
 export interface DockviewGroupMoveParams {
@@ -25,6 +26,8 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      */
     getWindow(): Window;
     moveTo(options: DockviewGroupMoveParams): void;
+    setHeaderPosition(position: DockviewHeaderPosition): void;
+    getHeaderPosition(): DockviewHeaderPosition;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -46,6 +49,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     setSize(event: SizeEvent): void;
     close(): void;
     getWindow(): Window;
+    setHeaderPosition(position: DockviewHeaderPosition): void;
+    getHeaderPosition(): DockviewHeaderPosition;
     moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -1,6 +1,6 @@
 import { positionToDirection } from '../dnd/droptarget';
 import { Emitter } from '../events';
-import { GridviewPanelApiImpl } from './gridviewPanelApi';
+import { GridviewPanelApiImpl, } from './gridviewPanelApi';
 const NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized';
 export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     get location() {
@@ -41,6 +41,18 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             ? this.location.getWindow()
             : window;
     }
+    setHeaderPosition(position) {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        this._group.model.headerPosition = position;
+    }
+    getHeaderPosition() {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this._group.model.headerPosition;
+    }
     moveTo(options) {
         var _a, _b, _c, _d;
         if (!this._group) {
@@ -55,7 +67,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             to: {
                 group,
                 position: options.group
-                    ? (_d = options.position) !== null && _d !== void 0 ? _d : 'center'
+                    ? ((_d = options.position) !== null && _d !== void 0 ? _d : 'center')
                     : 'center',
                 index: options.index,
             },

package/dist/esm/api/dockviewPanelApi.js

@@ -62,7 +62,7 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
             to: {
                 group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
                 position: options.group
-                    ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                    ? ((_b = options.position) !== null && _b !== void 0 ? _b : 'center')
                     : 'center',
                 index: options.index,
             },

package/dist/esm/constants.js

@@ -1,3 +1,8 @@
 export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
+export const DEFAULT_FLOATING_GROUP_POSITION = {
+    left: 100,
+    top: 100,
+    width: 300,
+    height: 300,
+};
 export const DESERIALIZATION_POPOUT_DELAY_MS = 100;

package/dist/esm/dnd/abstractDragHandler.js

@@ -21,7 +21,9 @@ export class DragHandler extends CompositeDisposable {
     }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (event.defaultPrevented || this.isCancelled(event) || this.disabled) {
+            if (event.defaultPrevented ||
+                this.isCancelled(event) ||
+                this.disabled) {
                 event.preventDefault();
                 return;
             }

package/dist/esm/dnd/droptarget.js

@@ -40,10 +40,10 @@ function checkBoundsChanged(element, bounds) {
     const widthPx = `${Math.round(width)}px`;
     const heightPx = `${Math.round(height)}px`;
     // Check if position or size changed (back to traditional method)
-    return element.style.top !== topPx ||
+    return (element.style.top !== topPx ||
         element.style.left !== leftPx ||
         element.style.width !== widthPx ||
-        element.style.height !== heightPx;
+        element.style.height !== heightPx);
 }
 export class WillShowOverlayEvent extends DockviewEvent {
     get nativeEvent() {

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

@@ -43,6 +43,8 @@ export class PopupService extends CompositeDisposable {
                 return; // clicked within popover
             }
             this.close();
+        }), addDisposableListener(window, 'resize', () => {
+            this.close();
         }));
         requestAnimationFrame(() => {
             shiftAbsoluteElementIntoView(wrapper, this.root);

package/dist/esm/dockview/components/titlebar/tabs.d.ts

@@ -4,6 +4,7 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewHeaderDirection } from '../../options';
 import { Tab } from '../tab/tab';
 import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
 export declare class Tabs extends CompositeDisposable {
@@ -12,9 +13,11 @@ export declare class Tabs extends CompositeDisposable {
     private readonly _element;
     private readonly _tabsList;
     private readonly _observerDisposable;
+    private readonly _scrollbar;
     private _tabs;
     private selectedIndex;
     private _showTabsOverflowControl;
+    private _direction;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onDrop;
@@ -32,6 +35,8 @@ export declare class Tabs extends CompositeDisposable {
     get panels(): string[];
     get size(): number;
     get tabs(): Tab[];
+    get direction(): DockviewHeaderDirection;
+    set direction(value: DockviewHeaderDirection);
     constructor(group: DockviewGroupPanel, accessor: DockviewComponent, options: {
         showTabsOverflowControl: boolean;
     });

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -1,5 +1,5 @@
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { isChildEntirelyVisibleWithinParent, OverflowObserver, } from '../../../dom';
+import { addClasses, isChildEntirelyVisibleWithinParent, OverflowObserver, removeClasses, } from '../../../dom';
 import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Scrollbar } from '../../../scrollbar';
@@ -36,14 +36,36 @@ export class Tabs extends CompositeDisposable {
     get tabs() {
         return this._tabs.map((_) => _.value);
     }
+    get direction() {
+        return this._direction;
+    }
+    set direction(value) {
+        if (this._direction === value) {
+            return;
+        }
+        this._direction = value;
+        if (this._scrollbar) {
+            this._scrollbar.orientation = value;
+        }
+        removeClasses(this._tabsList, 'dv-horizontal', 'dv-vertical');
+        if (value === 'vertical') {
+            addClasses(this._tabsList, 'dv-tabs-container-vertical', 'dv-vertical');
+        }
+        else {
+            removeClasses(this._tabsList, 'dv-tabs-container-vertical');
+            addClasses(this._tabsList, 'dv-horizontal');
+        }
+    }
     constructor(group, accessor, options) {
         super();
         this.group = group;
         this.accessor = accessor;
         this._observerDisposable = new MutableDisposable();
+        this._scrollbar = null;
         this._tabs = [];
         this.selectedIndex = -1;
         this._showTabsOverflowControl = false;
+        this._direction = 'horizontal';
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onDrop = new Emitter();
@@ -53,15 +75,16 @@ export class Tabs extends CompositeDisposable {
         this._onOverflowTabsChange = new Emitter();
         this.onOverflowTabsChange = this._onOverflowTabsChange.event;
         this._tabsList = document.createElement('div');
-        this._tabsList.className = 'dv-tabs-container dv-horizontal';
+        this._tabsList.className = 'dv-tabs-container';
         this.showTabsOverflowControl = options.showTabsOverflowControl;
         if (accessor.options.scrollbars === 'native') {
             this._element = this._tabsList;
         }
         else {
-            const scrollbar = new Scrollbar(this._tabsList);
-            this._element = scrollbar.element;
-            this.addDisposables(scrollbar);
+            this._scrollbar = new Scrollbar(this._tabsList);
+            this._scrollbar.orientation = this.direction;
+            this._element = this._scrollbar.element;
+            this.addDisposables(this._scrollbar);
         }
         this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -5,6 +5,7 @@ import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
+import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
@@ -26,6 +27,7 @@ export interface ITabsContainer extends IDisposable {
     readonly onGroupDragStart: Event<GroupDragEvent>;
     readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     hidden: boolean;
+    direction: DockviewHeaderDirection;
     delete(id: string): void;
     indexOf(id: string): number;
     setActive(isGroupActive: boolean): void;
@@ -53,6 +55,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private leftActions;
     private preActions;
     private _hidden;
+    private _direction;
     private dropdownPart;
     private _overflowTabs;
     private readonly _dropdownDisposable;
@@ -67,6 +70,8 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     get size(): number;
     get hidden(): boolean;
     set hidden(value: boolean);
+    get direction(): DockviewHeaderDirection;
+    set direction(value: DockviewHeaderDirection);
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     show(): void;

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -1,7 +1,7 @@
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { addDisposableListener, Emitter } from '../../../events';
 import { VoidContainer } from './voidContainer';
-import { findRelativeZIndexParent, toggleClass } from '../../../dom';
+import { addClasses, findRelativeZIndexParent, removeClasses, toggleClass, } from '../../../dom';
 import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { getPanelData } from '../../../dnd/dataTransfer';
 import { Tabs } from './tabs';
@@ -23,6 +23,22 @@ export class TabsContainer extends CompositeDisposable {
         this._hidden = value;
         this.element.style.display = value ? 'none' : '';
     }
+    get direction() {
+        return this._direction;
+    }
+    set direction(value) {
+        this._direction = value;
+        if (value === 'vertical') {
+            addClasses(this._element, 'dv-groupview-header-vertical');
+            addClasses(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+            this.tabs.direction = value;
+        }
+        else {
+            removeClasses(this._element, 'dv-groupview-header-vertical');
+            removeClasses(this.rightActionsContainer, 'dv-right-actions-container-vertical');
+            this.tabs.direction = value;
+        }
+    }
     get element() {
         return this._element;
     }
@@ -31,6 +47,7 @@ export class TabsContainer extends CompositeDisposable {
         this.accessor = accessor;
         this.group = group;
         this._hidden = false;
+        this._direction = 'horizontal';
         this.dropdownPart = null;
         this._overflowTabs = [];
         this._dropdownDisposable = new MutableDisposable();

package/dist/esm/dockview/deserializer.js

@@ -13,7 +13,7 @@ export class DefaultDockviewDeserialzier {
         const viewData = panelData.view;
         const contentComponent = viewData
             ? viewData.content.id
-            : (_a = panelData.contentComponent) !== null && _a !== void 0 ? _a : 'unknown';
+            : ((_a = panelData.contentComponent) !== null && _a !== void 0 ? _a : 'unknown');
         const tabComponent = viewData
             ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
             : panelData.tabComponent;

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

@@ -3,7 +3,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { Event, Emitter } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
-import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions } from './options';
+import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions, DockviewHeaderPosition } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
@@ -238,6 +238,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
+    get defaultHeaderPosition(): DockviewHeaderPosition;
     get api(): DockviewApi;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     /**
@@ -292,6 +293,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
         skipPopoutReturn?: boolean;
     } | undefined): DockviewGroupPanel;
     private _moving;
+    private _updatePositionsFrameId;
+    private debouncedUpdateAllPositions;
     movingLock<T>(func: () => T): T;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
     moveGroup(options: MoveGroupOptions): void;

package/dist/esm/dockview/dockviewComponent.js

@@ -68,6 +68,10 @@ export class DockviewComponent extends BaseGrid {
         var _a;
         return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
     }
+    get defaultHeaderPosition() {
+        var _a;
+        return (_a = this.options.defaultHeaderPosition) !== null && _a !== void 0 ? _a : 'top';
+    }
     get api() {
         return this._api;
     }
@@ -184,7 +188,14 @@ export class DockviewComponent extends BaseGrid {
         if (options.debug) {
             this.addDisposables(new StrictEventsSequencing(this));
         }
-        this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidMovePanel.event(() => {
+            /**
+             * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
+             * With defaultRenderer="always" this results in panel content not showing after move operations.
+             * Debounced to avoid multiple calls when moving groups with multiple panels.
+             */
+            this.debouncedUpdateAllPositions();
+        }), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.updateWatermark();
         }), this.onDidAdd((event) => {
             if (!this._moving) {
@@ -630,9 +641,9 @@ export class DockviewComponent extends BaseGrid {
         const anchoredBox = getAnchoredBox();
         const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                : ((_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE), minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
+                : ((_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
         const el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('dockview: failed to find drag handle');
@@ -747,6 +758,13 @@ export class DockviewComponent extends BaseGrid {
         if ('theme' in options) {
             this.updateTheme();
         }
+        if ('createRightHeaderActionComponent' in options ||
+            'createLeftHeaderActionComponent' in options ||
+            'createPrefixHeaderActionComponent' in options) {
+            for (const group of this.groups) {
+                group.model.updateHeaderActions();
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -903,7 +921,7 @@ export class DockviewComponent extends BaseGrid {
             const width = this.width;
             const height = this.height;
             const createGroupFromSerializedState = (data) => {
-                const { id, locked, hideHeader, views, activeView } = data;
+                const { id, locked, hideHeader, headerPosition, views, activeView, } = data;
                 if (typeof id !== 'string') {
                     throw new Error('dockview: group id must be of type string');
                 }
@@ -911,6 +929,7 @@ export class DockviewComponent extends BaseGrid {
                     id,
                     locked: !!locked,
                     hideHeader: !!hideHeader,
+                    headerPosition,
                 });
                 this._onDidAddGroup.fire(group);
                 const createdPanels = [];
@@ -1052,9 +1071,7 @@ export class DockviewComponent extends BaseGrid {
         }
         this.updateWatermark();
         // Force position updates for always visible panels after DOM layout is complete
-        requestAnimationFrame(() => {
-            this.overlayRenderContainer.updateAllPositions();
-        });
+        this.debouncedUpdateAllPositions();
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -1390,6 +1407,15 @@ export class DockviewComponent extends BaseGrid {
         }
         return re;
     }
+    debouncedUpdateAllPositions() {
+        if (this._updatePositionsFrameId !== undefined) {
+            cancelAnimationFrame(this._updatePositionsFrameId);
+        }
+        this._updatePositionsFrameId = requestAnimationFrame(() => {
+            this._updatePositionsFrameId = undefined;
+            this.overlayRenderContainer.updateAllPositions();
+        });
+    }
     movingLock(func) {
         const isMoving = this._moving;
         try {
@@ -1460,13 +1486,6 @@ export class DockviewComponent extends BaseGrid {
                 panel: removedPanel,
                 from: sourceGroup,
             });
-            /**
-            * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
-            * With defaultRenderer="always" this results in panel content not showing after move operations.
-            */
-            requestAnimationFrame(() => {
-                this.overlayRenderContainer.updateAllPositions();
-            });
         }
         else {
             /**
@@ -1707,6 +1726,7 @@ export class DockviewComponent extends BaseGrid {
         from.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
         });
+        this.debouncedUpdateAllPositions();
         // Ensure group becomes active after move
         if (options.skipSetActive === false) {
             // Only activate when explicitly requested (skipSetActive: false)

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -1,7 +1,6 @@
 import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel';
-import { GridviewPanel } from '../gridview/gridviewPanel';
+import { GridviewPanel, } from '../gridview/gridviewPanel';
 import { DockviewGroupPanelApiImpl, } from '../api/dockviewGroupPanelApi';
-// GridConstraintChangeEvent2 is not exported, so we'll type it manually
 const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 export class DockviewGroupPanel extends GridviewPanel {
@@ -92,24 +91,28 @@ export class DockviewGroupPanel extends GridviewPanel {
             // Track explicitly set constraints to override panel constraints
             // Extract numeric values from functions or values
             if (event.minimumWidth !== undefined) {
-                this._explicitConstraints.minimumWidth = typeof event.minimumWidth === 'function'
-                    ? event.minimumWidth()
-                    : event.minimumWidth;
+                this._explicitConstraints.minimumWidth =
+                    typeof event.minimumWidth === 'function'
+                        ? event.minimumWidth()
+                        : event.minimumWidth;
             }
             if (event.minimumHeight !== undefined) {
-                this._explicitConstraints.minimumHeight = typeof event.minimumHeight === 'function'
-                    ? event.minimumHeight()
-                    : event.minimumHeight;
+                this._explicitConstraints.minimumHeight =
+                    typeof event.minimumHeight === 'function'
+                        ? event.minimumHeight()
+                        : event.minimumHeight;
             }
             if (event.maximumWidth !== undefined) {
-                this._explicitConstraints.maximumWidth = typeof event.maximumWidth === 'function'
-                    ? event.maximumWidth()
-                    : event.maximumWidth;
+                this._explicitConstraints.maximumWidth =
+                    typeof event.maximumWidth === 'function'
+                        ? event.maximumWidth()
+                        : event.maximumWidth;
             }
             if (event.maximumHeight !== undefined) {
-                this._explicitConstraints.maximumHeight = typeof event.maximumHeight === 'function'
-                    ? event.maximumHeight()
-                    : event.maximumHeight;
+                this._explicitConstraints.maximumHeight =
+                    typeof event.maximumHeight === 'function'
+                        ? event.maximumHeight()
+                        : event.maximumHeight;
             }
         }));
     }

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

@@ -10,7 +10,7 @@ import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../pa
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
-import { DockviewDndOverlayEvent } from './options';
+import { DockviewDndOverlayEvent, DockviewHeaderDirection, DockviewHeaderPosition } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 import { Contraints } from '../gridview/gridviewPanel';
@@ -24,6 +24,7 @@ interface GroupMoveEvent {
 interface CoreGroupOptions {
     locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
+    headerPosition?: 'top' | 'bottom' | 'left' | 'right';
     skipSetActive?: boolean;
     constraints?: Partial<Contraints>;
     initialWidth?: number;
@@ -74,6 +75,7 @@ export declare class DockviewWillDropEvent extends DockviewDidDropEvent {
 }
 export interface IHeader {
     hidden: boolean;
+    direction: DockviewHeaderDirection;
 }
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
 export interface IDockviewGroupPanelModel extends IPanel {
@@ -90,6 +92,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: DockviewGroupPanelLocked;
+    headerPosition: DockviewHeaderPosition;
     setActive(isActive: boolean): void;
     initialize(): void;
     isPanelActive: (panel: IDockviewPanel) => boolean;
@@ -138,6 +141,10 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _rightHeaderActions;
     private _leftHeaderActions;
     private _prefixHeaderActions;
+    private readonly _rightHeaderActionsDisposable;
+    private readonly _leftHeaderActionsDisposable;
+    private readonly _prefixHeaderActionsDisposable;
+    private _headerPosition;
     private _location;
     private mostRecentlyUsed;
     private _overwriteRenderContainer;
@@ -184,6 +191,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     get hasWatermark(): boolean;
     get header(): IHeader;
     get isContentFocused(): boolean;
+    get headerPosition(): DockviewHeaderPosition;
+    set headerPosition(value: DockviewHeaderPosition);
     get location(): DockviewGroupLocation;
     set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
@@ -193,6 +202,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     set dropTargetContainer(value: DropTargetAnchorContainer | null);
     get dropTargetContainer(): DropTargetAnchorContainer | null;
     initialize(): void;
+    updateHeaderActions(): void;
     rerender(panel: IDockviewPanel): void;
     indexOf(panel: IDockviewPanel): number;
     toJSON(): GroupPanelViewState;