dockview-core 4.13.1 → 5.1.0

package/dist/cjs/dockview/dockviewComponent.js

@@ -374,6 +374,14 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewComponent.prototype, "defaultHeaderPosition", {
+        get: function () {
+            var _a;
+            return (_a = this.options.defaultHeaderPosition) !== null && _a !== void 0 ? _a : 'top';
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewComponent.prototype, "api", {
         get: function () {
             return this._api;
@@ -777,9 +785,9 @@ var DockviewComponent = /** @class */ (function (_super) {
         var anchoredBox = getAnchoredBox();
         var overlay = new overlay_1.Overlay(__assign(__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 : constants_1.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 : constants_1.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 : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
+                : ((_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE) }));
         var el = group.element.querySelector('.dv-void-container');
         if (!el) {
             throw new Error('dockview: failed to find drag handle');
@@ -860,13 +868,13 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.updateOptions = function (options) {
-        var e_3, _a;
-        var _b, _c;
+        var e_3, _a, e_4, _b;
+        var _c, _d;
         _super.prototype.updateOptions.call(this, options);
         if ('floatingGroupBounds' in options) {
             try {
-                for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
-                    var group = _e.value;
+                for (var _e = __values(this._floatingGroups), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var group = _f.value;
                     switch (options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
@@ -880,9 +888,9 @@ var DockviewComponent = /** @class */ (function (_super) {
                             break;
                         default:
                             group.overlay.minimumInViewportHeight =
-                                (_b = options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
+                                (_c = options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumHeightWithinViewport;
                             group.overlay.minimumInViewportWidth =
-                                (_c = options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
+                                (_d = options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport;
                     }
                     group.overlay.setBounds();
                 }
@@ -890,7 +898,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
@@ -905,10 +913,27 @@ var DockviewComponent = /** @class */ (function (_super) {
         if ('theme' in options) {
             this.updateTheme();
         }
+        if ('createRightHeaderActionComponent' in options ||
+            'createLeftHeaderActionComponent' in options ||
+            'createPrefixHeaderActionComponent' in options) {
+            try {
+                for (var _g = __values(this.groups), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var group = _h.value;
+                    group.model.updateHeaderActions();
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_4, _a;
+        var e_5, _a;
         _super.prototype.layout.call(this, width, height, forceResize);
         if (this._floatingGroups) {
             try {
@@ -918,17 +943,17 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floating.overlay.setBounds();
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_5) throw e_5.error; }
             }
         }
     };
     DockviewComponent.prototype.updateDragAndDropState = function () {
-        var e_5, _a;
+        var e_6, _a;
         try {
             // Update draggable state for all tabs and void containers
             for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -936,12 +961,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.model.updateDragAndDropState();
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
     };
     DockviewComponent.prototype.focus = function () {
@@ -1038,7 +1063,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data, options) {
-        var e_6, _a, e_7, _b, e_8, _c, e_9, _d, e_10, _e, e_11, _f, e_12, _g;
+        var e_7, _a, e_8, _b, e_9, _c, e_10, _d, e_11, _e, e_12, _f, e_13, _g;
         var _this = this;
         var _h, _j;
         var existingPanels = new Map();
@@ -1061,12 +1086,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
                     if (_l && !_l.done && (_a = _k.return)) _a.call(_k);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_7) throw e_7.error; }
             }
             this.movingLock(function () {
                 Array.from(existingPanels.values()).forEach(function (panel) {
@@ -1097,8 +1122,8 @@ var DockviewComponent = /** @class */ (function (_super) {
             var width = this.width;
             var height = this.height;
             var createGroupFromSerializedState_1 = function (data) {
-                var e_13, _a;
-                var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
+                var e_14, _a;
+                var id = data.id, locked = data.locked, hideHeader = data.hideHeader, headerPosition = data.headerPosition, views = data.views, activeView = data.activeView;
                 if (typeof id !== 'string') {
                     throw new Error('dockview: group id must be of type string');
                 }
@@ -1106,6 +1131,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     id: id,
                     locked: !!locked,
                     hideHeader: !!hideHeader,
+                    headerPosition: headerPosition,
                 });
                 _this._onDidAddGroup.fire(group);
                 var createdPanels = [];
@@ -1134,12 +1160,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         _loop_1(child);
                     }
                 }
-                catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                catch (e_14_1) { e_14 = { error: e_14_1 }; }
                 finally {
                     try {
                         if (views_1_1 && !views_1_1.done && (_a = views_1.return)) _a.call(views_1);
                     }
-                    finally { if (e_13) throw e_13.error; }
+                    finally { if (e_14) throw e_14.error; }
                 }
                 var _loop_2 = function (i) {
                     var panel = createdPanels[i];
@@ -1192,12 +1218,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
                     if (serializedFloatingGroups_1_1 && !serializedFloatingGroups_1_1.done && (_b = serializedFloatingGroups_1.return)) _b.call(serializedFloatingGroups_1);
                 }
-                finally { if (e_7) throw e_7.error; }
+                finally { if (e_8) throw e_8.error; }
             }
             var serializedPopoutGroups = (_j = data.popoutGroups) !== null && _j !== void 0 ? _j : [];
             // Create a promise that resolves when all popout groups are created
@@ -1232,12 +1258,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floatingGroup.overlay.setBounds();
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
             finally {
                 try {
                     if (_o && !_o.done && (_c = _m.return)) _c.call(_m);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_9) throw e_9.error; }
             }
             if (typeof activeGroup === 'string') {
                 var panel = this.getPanel(activeGroup);
@@ -1255,7 +1281,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
                     var group = _q.value;
                     try {
-                        for (var _r = (e_10 = void 0, __values(group.panels)), _s = _r.next(); !_s.done; _s = _r.next()) {
+                        for (var _r = (e_11 = void 0, __values(group.panels)), _s = _r.next(); !_s.done; _s = _r.next()) {
                             var panel = _s.value;
                             this.removePanel(panel, {
                                 removeEmptyGroup: false,
@@ -1263,21 +1289,21 @@ var DockviewComponent = /** @class */ (function (_super) {
                             });
                         }
                     }
-                    catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                    catch (e_11_1) { e_11 = { error: e_11_1 }; }
                     finally {
                         try {
                             if (_s && !_s.done && (_e = _r.return)) _e.call(_r);
                         }
-                        finally { if (e_10) throw e_10.error; }
+                        finally { if (e_11) throw e_11.error; }
                     }
                 }
             }
-            catch (e_9_1) { e_9 = { error: e_9_1 }; }
+            catch (e_10_1) { e_10 = { error: e_10_1 }; }
             finally {
                 try {
                     if (_q && !_q.done && (_d = _p.return)) _d.call(_p);
                 }
-                finally { if (e_9) throw e_9.error; }
+                finally { if (e_10) throw e_10.error; }
             }
             try {
                 /**
@@ -1291,12 +1317,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     this._onDidRemoveGroup.fire(group);
                 }
             }
-            catch (e_11_1) { e_11 = { error: e_11_1 }; }
+            catch (e_12_1) { e_12 = { error: e_12_1 }; }
             finally {
                 try {
                     if (_u && !_u.done && (_f = _t.return)) _f.call(_t);
                 }
-                finally { if (e_11) throw e_11.error; }
+                finally { if (e_12) throw e_12.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
@@ -1305,12 +1331,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     floatingGroup.dispose();
                 }
             }
-            catch (e_12_1) { e_12 = { error: e_12_1 }; }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
             finally {
                 try {
                     if (_w && !_w.done && (_g = _v.return)) _g.call(_v);
                 }
-                finally { if (e_12) throw e_12.error; }
+                finally { if (e_13) throw e_13.error; }
             }
             // fires clean-up events and clears the underlying HTML gridview.
             this.clear();
@@ -1327,7 +1353,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutFromJSON.fire();
     };
     DockviewComponent.prototype.clear = function () {
-        var e_14, _a;
+        var e_15, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
         try {
@@ -1337,12 +1363,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.removeGroup(group, { skipActive: true });
             }
         }
-        catch (e_14_1) { e_14 = { error: e_14_1 }; }
+        catch (e_15_1) { e_15 = { error: e_15_1 }; }
         finally {
             try {
                 if (groups_1_1 && !groups_1_1.done && (_a = groups_1.return)) _a.call(groups_1);
             }
-            finally { if (e_14) throw e_14.error; }
+            finally { if (e_15) throw e_15.error; }
         }
         if (hasActiveGroup) {
             this.doSetGroupAndPanelActive(undefined);
@@ -1350,7 +1376,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.gridview.clear();
     };
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_15, _a;
+        var e_16, _a;
         try {
             for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var entry = _c.value;
@@ -1358,12 +1384,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 group.value.model.closeAllPanels();
             }
         }
-        catch (e_15_1) { e_15 = { error: e_15_1 }; }
+        catch (e_16_1) { e_16 = { error: e_16_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_15) throw e_15.error; }
+            finally { if (e_16) throw e_16.error; }
         }
     };
     DockviewComponent.prototype.addPanel = function (options) {
@@ -1614,7 +1640,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         this.doRemoveGroup(group, options);
     };
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var e_16, _a;
+        var e_17, _a;
         var _b;
         var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
@@ -1627,12 +1653,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                     });
                 }
             }
-            catch (e_16_1) { e_16 = { error: e_16_1 }; }
+            catch (e_17_1) { e_17 = { error: e_17_1 }; }
             finally {
                 try {
                     if (panels_1_1 && !panels_1_1.done && (_a = panels_1.return)) _a.call(panels_1);
                 }
-                finally { if (e_16) throw e_16.error; }
+                finally { if (e_17) throw e_17.error; }
             }
         }
         var activePanel = this.activePanel;
@@ -1898,7 +1924,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 this.doRemoveGroup(from, { skipActive: true });
             }
             this.movingLock(function () {
-                var e_17, _a;
+                var e_18, _a;
                 try {
                     for (var panels_3 = __values(panels_2), panels_3_1 = panels_3.next(); !panels_3_1.done; panels_3_1 = panels_3.next()) {
                         var panel = panels_3_1.value;
@@ -1908,12 +1934,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                catch (e_17_1) { e_17 = { error: e_17_1 }; }
+                catch (e_18_1) { e_18 = { error: e_18_1 }; }
                 finally {
                     try {
                         if (panels_3_1 && !panels_3_1.done && (_a = panels_3.return)) _a.call(panels_3);
                     }
-                    finally { if (e_17) throw e_17.error; }
+                    finally { if (e_18) throw e_18.error; }
                 }
             });
             // Ensure group becomes active after move

package/dist/cjs/dockview/dockviewGroupPanel.js

@@ -19,7 +19,6 @@ exports.DockviewGroupPanel = void 0;
 var dockviewGroupPanelModel_1 = require("./dockviewGroupPanelModel");
 var gridviewPanel_1 = require("../gridview/gridviewPanel");
 var dockviewGroupPanelApi_1 = require("../api/dockviewGroupPanelApi");
-// GridConstraintChangeEvent2 is not exported, so we'll type it manually
 var MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 var MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 var DockviewGroupPanel = /** @class */ (function (_super) {
@@ -42,24 +41,28 @@ var DockviewGroupPanel = /** @class */ (function (_super) {
             // 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;
             }
         }));
         return _this;

package/dist/cjs/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;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -129,7 +129,7 @@ exports.DockviewWillDropEvent = DockviewWillDropEvent;
 var DockviewGroupPanelModel = /** @class */ (function (_super) {
     __extends(DockviewGroupPanelModel, _super);
     function DockviewGroupPanelModel(container, accessor, id, options, groupPanel) {
-        var _a;
+        var _a, _b;
         var _this = _super.call(this) || this;
         _this.container = container;
         _this.accessor = accessor;
@@ -138,6 +138,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.groupPanel = groupPanel;
         _this._isGroupActive = false;
         _this._locked = false;
+        _this._rightHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
+        _this._leftHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
+        _this._prefixHeaderActionsDisposable = new lifecycle_1.MutableDisposable();
         _this._location = { type: 'grid' };
         _this.mostRecentlyUsed = [];
         _this._overwriteRenderContainer = null;
@@ -179,7 +182,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         container.append(_this.tabsContainer.element, _this.contentContainer.element);
         _this.header.hidden = !!options.hideHeader;
         _this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this.tabsContainer.onTabDragStart(function (event) {
+        _this.headerPosition =
+            (_b = options.headerPosition) !== null && _b !== void 0 ? _b : accessor.defaultHeaderPosition;
+        _this.addDisposables(_this._onTabDragStart, _this._onGroupDragStart, _this._onWillShowOverlay, _this._rightHeaderActionsDisposable, _this._leftHeaderActionsDisposable, _this._prefixHeaderActionsDisposable, _this.tabsContainer.onTabDragStart(function (event) {
             _this._onTabDragStart.fire(event);
         }), _this.tabsContainer.onGroupDragStart(function (event) {
             _this._onGroupDragStart.fire(event);
@@ -281,6 +286,33 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "headerPosition", {
+        get: function () {
+            var _a;
+            return (_a = this._headerPosition) !== null && _a !== void 0 ? _a : 'top';
+        },
+        set: function (value) {
+            var _a;
+            this._headerPosition = value;
+            (0, dom_1.removeClasses)(this.container, 'dv-groupview-header-top', 'dv-groupview-header-bottom', 'dv-groupview-header-left', 'dv-groupview-header-right');
+            (0, dom_1.addClasses)(this.container, "dv-groupview-header-".concat(value));
+            var direction = value === 'top' || value === 'bottom' ? 'horizontal' : 'vertical';
+            this.tabsContainer.direction = direction;
+            this.header.direction = direction;
+            // resize the active panel to fit the new header direction
+            // if not, the panel will overflow the tabs container
+            if ((_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.layout) {
+                this._activePanel.layout(this._width, this._height);
+            }
+            if (this._leftHeaderActions ||
+                this._rightHeaderActions ||
+                this._prefixHeaderActions) {
+                this.updateHeaderActions();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewGroupPanelModel.prototype, "location", {
         get: function () {
             return this._location;
@@ -364,10 +396,13 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         // correctly initialized
         this.setActive(this.isActive, true);
         this.updateContainer();
+        this.updateHeaderActions();
+    };
+    DockviewGroupPanelModel.prototype.updateHeaderActions = function () {
         if (this.accessor.options.createRightHeaderActionComponent) {
             this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._rightHeaderActions);
+            this._rightHeaderActionsDisposable.value = this._rightHeaderActions;
             this._rightHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -375,10 +410,15 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
         }
+        else {
+            this._rightHeaderActions = undefined;
+            this._rightHeaderActionsDisposable.dispose();
+            this.tabsContainer.setRightActionsElement(undefined);
+        }
         if (this.accessor.options.createLeftHeaderActionComponent) {
             this._leftHeaderActions =
                 this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._leftHeaderActions);
+            this._leftHeaderActionsDisposable.value = this._leftHeaderActions;
             this._leftHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -386,10 +426,16 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
+        else {
+            this._leftHeaderActions = undefined;
+            this._leftHeaderActionsDisposable.dispose();
+            this.tabsContainer.setLeftActionsElement(undefined);
+        }
         if (this.accessor.options.createPrefixHeaderActionComponent) {
             this._prefixHeaderActions =
                 this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
-            this.addDisposables(this._prefixHeaderActions);
+            this._prefixHeaderActionsDisposable.value =
+                this._prefixHeaderActions;
             this._prefixHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
@@ -397,6 +443,11 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
+        else {
+            this._prefixHeaderActions = undefined;
+            this._prefixHeaderActionsDisposable.dispose();
+            this.tabsContainer.setPrefixActionsElement(undefined);
+        }
     };
     DockviewGroupPanelModel.prototype.rerender = function (panel) {
         this.contentContainer.renderPanel(panel, { asActive: false });
@@ -417,6 +468,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (this.header.hidden) {
             result.hideHeader = true;
         }
+        if (this.headerPosition !== 'top') {
+            result.headerPosition = this.headerPosition;
+        }
         return result;
     };
     DockviewGroupPanelModel.prototype.moveToNext = function (options) {
@@ -631,6 +685,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         if (!options.skipSetActive) {
             this.contentContainer.openPanel(panel);
         }
+        else if (panel.api.renderer === 'always') {
+            this.contentContainer.renderPanel(panel, { asActive: false });
+        }
         if (hasExistingPanel) {
             // TODO - need to ensure ordering hasn't changed and if it has need to re-order this.panels
             return;

package/dist/cjs/dockview/framework.d.ts

@@ -4,6 +4,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelParameters } from '../framwork';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
+import { DockviewHeaderPosition } from './options';
 export interface IGroupPanelBaseProps<T extends {
     [index: string]: any;
 } = any> extends PanelParameters<T> {
@@ -26,6 +27,7 @@ export interface IDockviewHeaderActionsProps {
     activePanel: IDockviewPanel | undefined;
     isGroupActive: boolean;
     group: DockviewGroupPanel;
+    headerPosition: DockviewHeaderPosition;
 }
 export interface IGroupHeaderProps {
     api: DockviewGroupPanelApi;

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

@@ -29,6 +29,8 @@ export interface ViewFactoryData {
     content: string;
     tab?: string;
 }
+export type DockviewHeaderPosition = 'top' | 'bottom' | 'left' | 'right';
+export type DockviewHeaderDirection = 'horizontal' | 'vertical';
 export interface DockviewOptions {
     /**
      * Disable the auto-resizing which is controlled through a `ResizeObserver`.
@@ -44,6 +46,7 @@ export interface DockviewOptions {
     };
     popoutUrl?: string;
     defaultRenderer?: DockviewPanelRenderer;
+    defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
     dndEdges?: false | DroptargetOverlayModel;
     /**