dockview-core - npm Package Compare versions

Comparing version 0.0.0-experimental-a2a4e68-20231225 to 0.0.0-experimental-b78a7a6-20240108

dist/cjs/api/component.api.d.ts

@@ -17,2 +17,3 @@ import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
+import { Box } from '../types';
 export interface CommonApi<T = any> {
@@ -456,3 +457,14 @@ readonly height: number;
     moveToPrevious(options?: MovementOptions): void;
+    maximizeGroup(panel: IDockviewPanel): void;
+    hasMaximizedGroup(): boolean;
+    exitMaxmizedGroup(): void;
+    get onDidMaxmizedGroupChange(): Event<void>;
+    /**
+     * Add a popout group in a new Window
+     */
+    addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: {
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
 }
 //# sourceMappingURL=component.api.d.ts.map

dist/cjs/api/component.api.js

@@ -893,2 +893,24 @@ "use strict";
     };
+    DockviewApi.prototype.maximizeGroup = function (panel) {
+        this.component.maximizeGroup(panel.group);
+    };
+    DockviewApi.prototype.hasMaximizedGroup = function () {
+        return this.component.hasMaximizedGroup();
+    };
+    DockviewApi.prototype.exitMaxmizedGroup = function () {
+        this.component.exitMaximizedGroup();
+    };
+    Object.defineProperty(DockviewApi.prototype, "onDidMaxmizedGroupChange", {
+        get: function () {
+            return this.component.onDidMaxmizedGroupChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Add a popout group in a new Window
+     */
+    DockviewApi.prototype.addPopoutGroup = function (item, options) {
+        this.component.addPopoutGroup(item, options);
+    };
     return DockviewApi;
@@ -895,0 +917,0 @@ }());

dist/cjs/api/dockviewGroupPanelApi.d.ts

 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
-    readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>;
-    readonly isFloating: boolean;
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly location: DockviewGroupLocation;
     moveTo(options: {
-        group: DockviewGroupPanel;
+        group?: DockviewGroupPanel;
         position?: Position;
     }): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
 }
 export interface DockviewGroupPanelFloatingChangeEvent {
-    readonly isFloating: boolean;
+    readonly location: DockviewGroupLocation;
 }
@@ -20,12 +24,15 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private _group;
-    readonly _onDidFloatingStateChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
-    readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>;
-    get isFloating(): boolean;
+    readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
     moveTo(options: {
-        group: DockviewGroupPanel;
+        group?: DockviewGroupPanel;
         position?: Position;
     }): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
     initialize(group: DockviewGroupPanel): void;
 }
 //# sourceMappingURL=dockviewGroupPanelApi.d.ts.map

dist/cjs/api/dockviewGroupPanelApi.js

@@ -19,4 +19,7 @@ "use strict";
 exports.DockviewGroupPanelApiImpl = void 0;
+var droptarget_1 = require("../dnd/droptarget");
 var events_1 = require("../events");
 var gridviewPanelApi_1 = require("./gridviewPanelApi");
+// TODO find a better way to initialize and avoid needing null checks
+var NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
 var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
@@ -27,13 +30,13 @@ __extends(DockviewGroupPanelApiImpl, _super);
         _this.accessor = accessor;
-        _this._onDidFloatingStateChange = new events_1.Emitter();
-        _this.onDidFloatingStateChange = _this._onDidFloatingStateChange.event;
-        _this.addDisposables(_this._onDidFloatingStateChange);
+        _this._onDidLocationChange = new events_1.Emitter();
+        _this.onDidLocationChange = _this._onDidLocationChange.event;
+        _this.addDisposables(_this._onDidLocationChange);
         return _this;
     }
-    Object.defineProperty(DockviewGroupPanelApiImpl.prototype, "isFloating", {
+    Object.defineProperty(DockviewGroupPanelApiImpl.prototype, "location", {
         get: function () {
             if (!this._group) {
-                throw new Error("DockviewGroupPanelApiImpl not initialized");
+                throw new Error(NOT_INITIALIZED_MESSAGE);
             }
-            return this._group.model.isFloating;
+            return this._group.model.location;
         },
@@ -44,8 +47,35 @@ enumerable: false,
     DockviewGroupPanelApiImpl.prototype.moveTo = function (options) {
-        var _a;
+        var _a, _b, _c;
         if (!this._group) {
-            throw new Error("DockviewGroupPanelApiImpl not initialized");
+            throw new Error(NOT_INITIALIZED_MESSAGE);
         }
-        this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
+        var group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
+            direction: (0, droptarget_1.positionToDirection)((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+        });
+        this.accessor.moveGroupOrPanel(group, this._group.id, undefined, options.group ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' : 'center');
     };
+    DockviewGroupPanelApiImpl.prototype.maximize = function () {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        if (this.location !== 'grid') {
+            // only grid groups can be maximized
+            return;
+        }
+        this.accessor.maximizeGroup(this._group);
+    };
+    DockviewGroupPanelApiImpl.prototype.isMaximized = function () {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this.accessor.isMaximizedGroup(this._group);
+    };
+    DockviewGroupPanelApiImpl.prototype.exitMaximized = function () {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        if (this.isMaximized()) {
+            this.accessor.exitMaximizedGroup();
+        }
+    };
     DockviewGroupPanelApiImpl.prototype.initialize = function (group) {
@@ -52,0 +82,0 @@ this._group = group;

dist/cjs/api/dockviewPanelApi.d.ts

@@ -7,3 +7,3 @@ import { Emitter, Event } from '../events';
 import { Position } from '../dnd/droptarget';
-import { DockviewPanelRenderer } from '../dockview/components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export interface TitleEvent {
@@ -31,2 +31,5 @@ readonly title: string;
     }): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
 }
@@ -60,3 +63,6 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi {
     close(): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
 }
 //# sourceMappingURL=dockviewPanelApi.d.ts.map

dist/cjs/api/dockviewPanelApi.js

@@ -51,4 +51,3 @@ "use strict";
         get: function () {
-            var _a;
-            return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+            return this.group.isActive;
         },
@@ -99,2 +98,11 @@ enumerable: false,
     };
+    DockviewPanelApiImpl.prototype.maximize = function () {
+        this.group.api.maximize();
+    };
+    DockviewPanelApiImpl.prototype.isMaximized = function () {
+        return this.group.api.isMaximized();
+    };
+    DockviewPanelApiImpl.prototype.exitMaximized = function () {
+        this.group.api.exitMaximized();
+    };
     return DockviewPanelApiImpl;
@@ -101,0 +109,0 @@ }(gridviewPanelApi_1.GridviewPanelApiImpl));

dist/cjs/dnd/groupDragHandler.js

@@ -44,3 +44,3 @@ "use strict";
     GroupDragHandler.prototype.isCancelled = function (_event) {
-        if (this.group.api.isFloating && !_event.shiftKey) {
+        if (this.group.api.location === 'floating' && !_event.shiftKey) {
             return true;
@@ -47,0 +47,0 @@ }

dist/cjs/dnd/overlay.d.ts

 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
+import { Box } from '../types';
 export declare class Overlay extends CompositeDisposable {
@@ -14,7 +15,3 @@ private readonly options;
     set minimumInViewportHeight(value: number | undefined);
-    constructor(options: {
-        height: number;
-        width: number;
-        left: number;
-        top: number;
+    constructor(options: Box & {
         container: HTMLElement;
@@ -25,14 +22,4 @@ content: HTMLElement;
     });
-    setBounds(bounds?: Partial<{
-        height: number;
-        width: number;
-        top: number;
-        left: number;
-    }>): void;
-    toJSON(): {
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    };
+    setBounds(bounds?: Partial<Box>): void;
+    toJSON(): Box;
     setupDrag(dragTarget: HTMLElement, options?: {
@@ -39,0 +26,0 @@ inDragMode: boolean;

dist/cjs/dockview/components/greadyRenderContainer.d.ts

 import { Droptarget } from '../../dnd/droptarget';
 import { CompositeDisposable } from '../../lifecycle';
 import { IDockviewPanel } from '../dockviewPanel';
-export type DockviewPanelRenderer = 'destructive' | 'gready';
+export type DockviewPanelRenderer = 'onlyWhenVisibile' | 'always';
 export interface IRenderable {
@@ -6,0 +6,0 @@ readonly element: HTMLElement;

dist/cjs/dockview/components/greadyRenderContainer.js

@@ -106,3 +106,3 @@ "use strict";
             focusContainer.style.height = "".concat(box.height, "px");
-            (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.isFloating);
+            (0, dom_1.toggleClass)(focusContainer, 'dv-render-overlay-float', panel.group.api.location === 'floating');
         };
@@ -109,0 +109,0 @@ var disposable = new lifecycle_1.CompositeDisposable(

dist/cjs/dockview/components/panel/content.js

@@ -40,7 +40,2 @@ "use strict";
         _this.addDisposables(_this._onDidFocus, _this._onDidBlur);
-        // for hosted containers
-        // 1) register a drop target on the host
-        // 2) register window dragStart events to disable pointer events
-        // 3) register dragEnd events
-        // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
         _this.dropTarget = new droptarget_1.Droptarget(_this.element, {
@@ -54,3 +49,5 @@ acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
                 var data = (0, dataTransfer_1.getPanelData)();
-                if (!data && event.shiftKey && !_this.group.isFloating) {
+                if (!data &&
+                    event.shiftKey &&
+                    _this.group.location !== 'floating') {
                     return false;
@@ -97,4 +94,4 @@ }
         switch (panel.api.renderer) {
-            case 'destructive':
-                this.accessor.greadyRenderContainer.remove(panel);
+            case 'onlyWhenVisibile':
+                this.accessor.overlayRenderContainer.remove(panel);
                 if (isActive) {
@@ -107,3 +104,3 @@ if (this.panel) {
                 break;
-            case 'gready':
+            case 'always':
                 if (panel.view.content.element.parentElement === this._element) {
@@ -113,3 +110,3 @@ this._element.removeChild(panel.view.content.element);
                 container =
-                    this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this);
+                    this.accessor.overlayRenderContainer.setReferenceContentContainer(panel, this);
                 break;
@@ -148,7 +145,7 @@ }
         switch (renderer) {
-            case 'gready':
+            case 'always':
                 container =
-                    this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this);
+                    this.accessor.overlayRenderContainer.setReferenceContentContainer(panel, this);
                 break;
-            case 'destructive':
+            case 'onlyWhenVisibile':
                 this._element.appendChild(this.panel.view.content.element);
@@ -176,3 +173,3 @@ container = this._element;
         if (this.panel) {
-            if (this.accessor.options.defaultRenderer === 'destructive') {
+            if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
                 this._element.removeChild(this.panel.view.content.element);
@@ -179,0 +176,0 @@ }

dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -116,3 +116,3 @@ "use strict";
                 event.shiftKey &&
-                !_this.group.api.isFloating) {
+                _this.group.api.location !== 'floating') {
                 event.preventDefault();
@@ -270,3 +270,3 @@ var _a = _this.element.getBoundingClientRect(), top_1 = _a.top, left = _a.left;
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
-            var isFloatingWithOnePanel = _this.group.api.isFloating && _this.size === 1;
+            var isFloatingWithOnePanel = _this.group.api.location === 'floating' && _this.size === 1;
             if (isFloatingGroupsEnabled &&
@@ -273,0 +273,0 @@ !isFloatingWithOnePanel &&

dist/cjs/dockview/dockviewComponent.d.ts

@@ -13,5 +13,5 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { Parameters } from '../panel/types';
-import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
-import { GreadyRenderContainer, DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { Box } from '../types';
+import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer';
 export interface PanelReference {
@@ -27,9 +27,8 @@ update: (event: {
     data: GroupPanelViewState;
-    position: {
-        height: number;
-        width: number;
-        left: number;
-        top: number;
-    };
+    position: Box;
 }
+export interface SerializedPopoutGroup {
+    data: GroupPanelViewState;
+    position: Box | null;
+}
 export interface SerializedDockview {
@@ -45,2 +44,3 @@ grid: {
     floatingGroups?: SerializedFloatingGroup[];
+    popoutGroups?: SerializedPopoutGroup[];
 }
@@ -56,3 +56,2 @@ export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
     readonly panels: IDockviewPanel[];
-    readonly floatingGroups: IDockviewFloatingGroupPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
@@ -87,2 +86,6 @@ readonly orientation: Orientation;
     }): void;
+    addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: {
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
 }
@@ -95,3 +98,3 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private watermark;
-    readonly greadyRenderContainer: GreadyRenderContainer;
+    readonly overlayRenderContainer: OverlayRenderContainer;
     private readonly _onWillDragPanel;
@@ -111,3 +114,4 @@ readonly onWillDragPanel: Event<TabDragEvent>;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
-    readonly floatingGroups: DockviewFloatingGroupPanel[];
+    private readonly _floatingGroups;
+    private readonly _popoutGroups;
     get orientation(): Orientation;
@@ -120,2 +124,7 @@ get totalPanels(): number;
     constructor(options: DockviewComponentOptions);
+    addPopoutGroup(item: DockviewPanel | DockviewGroupPanel, options?: {
+        skipRemoveGroup?: boolean;
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: {
@@ -122,0 +131,0 @@ x?: number;

dist/cjs/dockview/dockviewComponent.js

@@ -28,13 +28,2 @@ "use strict";
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 var __read = (this && this.__read) || function (o, n) {
@@ -65,2 +54,13 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -89,4 +89,26 @@ exports.DockviewComponent = void 0;
 var dockviewFloatingGroupPanel_1 = require("./dockviewFloatingGroupPanel");
-var greadyRenderContainer_1 = require("./components/greadyRenderContainer");
-var DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+var dockviewPopoutGroupPanel_1 = require("./dockviewPopoutGroupPanel");
+var constants_1 = require("../constants");
+var overlayRenderContainer_1 = require("../overlayRenderContainer");
+function getTheme(element) {
+    function toClassList(element) {
+        var list = [];
+        for (var i = 0; i < element.classList.length; i++) {
+            list.push(element.classList.item(i));
+        }
+        return list;
+    }
+    var theme = undefined;
+    var parent = element;
+    while (parent !== null) {
+        theme = toClassList(parent).find(function (cls) {
+            return cls.startsWith('dockview-theme-');
+        });
+        if (typeof theme === 'string') {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    return theme;
+}
 function typeValidate3(data, path) {
@@ -180,13 +202,44 @@ if (typeof data.id !== 'string') {
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
-        _this.floatingGroups = [];
+        _this._floatingGroups = [];
+        _this._popoutGroups = [];
         var gready = document.createElement('div');
-        gready.className = 'dv-gready-render-container';
+        gready.className = 'dv-overlay-render-container';
         _this.gridview.element.appendChild(gready);
-        _this.greadyRenderContainer = new greadyRenderContainer_1.GreadyRenderContainer(gready);
+        _this.overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(gready);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.toggleClass)(_this.element, 'dv-debug', !!options.debug);
-        _this.addDisposables(_this.greadyRenderContainer, _this._onWillDragPanel, _this._onWillDragGroup, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
+        _this.addDisposables(_this.overlayRenderContainer, _this._onWillDragPanel, _this._onWillDragGroup, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, events_1.Event.any(_this.onDidAddGroup, _this.onDidRemoveGroup)(function () {
             _this.updateWatermark();
         }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidActivePanelChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
+        }), lifecycle_1.Disposable.from(function () {
+            var e_1, _a, e_2, _b;
+            try {
+                // iterate over a copy of the array since .dispose() mutates the original array
+                for (var _c = __values(__spreadArray([], __read(_this._floatingGroups), false)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var group = _d.value;
+                    group.dispose();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            try {
+                // iterate over a copy of the array since .dispose() mutates the original array
+                for (var _e = __values(__spreadArray([], __read(_this._popoutGroups), false)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var group = _f.value;
+                    group.dispose();
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
         }));
@@ -304,3 +357,3 @@ _this._options = options;
             var _a;
-            return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'destructive';
+            return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
         },
@@ -310,2 +363,49 @@ enumerable: false,
     });
+    DockviewComponent.prototype.addPopoutGroup = function (item, options) {
+        var _this = this;
+        var _a;
+        var group;
+        var box = options === null || options === void 0 ? void 0 : options.position;
+        if (item instanceof dockviewPanel_1.DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+            if (!box) {
+                box = this.element.getBoundingClientRect();
+            }
+        }
+        else {
+            group = item;
+            if (!box) {
+                box = group.element.getBoundingClientRect();
+            }
+            var skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        var theme = getTheme(this.gridview.element);
+        var popoutWindow = new dockviewPopoutGroupPanel_1.DockviewPopoutGroupPanel(group, {
+            className: theme !== null && theme !== void 0 ? theme : '',
+            popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
+            box: {
+                left: box.left,
+                top: box.top,
+                width: box.width,
+                height: box.height,
+            },
+        });
+        popoutWindow.addDisposables({
+            dispose: function () {
+                (0, array_1.remove)(_this._popoutGroups, popoutWindow);
+            },
+        }, popoutWindow.window.onDidClose(function () {
+            _this.doAddGroup(group, [0]);
+        }));
+        this._popoutGroups.push(popoutWindow);
+    };
     DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
@@ -331,5 +431,9 @@ var _this = this;
         }
-        group.model.isFloating = true;
-        var overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
-        var overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        group.model.location = 'floating';
+        var overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
+            ? Math.max(coord.x, 0)
+            : constants_1.DEFAULT_FLOATING_GROUP_POSITION.left;
+        var overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
+            ? Math.max(coord.y, 0)
+            : constants_1.DEFAULT_FLOATING_GROUP_POSITION.top;
         var overlay = new overlay_1.Overlay({
@@ -344,6 +448,6 @@ container: this.gridview.element,
                 ? undefined
-                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
             minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
-                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
@@ -379,8 +483,8 @@ var el = group.element.querySelector('.void-container');
                 disposable.dispose();
-                group.model.isFloating = false;
-                (0, array_1.remove)(_this.floatingGroups, floatingGroupPanel);
+                group.model.location = 'grid';
+                (0, array_1.remove)(_this._floatingGroups, floatingGroupPanel);
                 _this.updateWatermark();
             },
         });
-        this.floatingGroups.push(floatingGroupPanel);
+        this._floatingGroups.push(floatingGroupPanel);
         this.updateWatermark();
@@ -422,3 +526,3 @@ };
     DockviewComponent.prototype.updateOptions = function (options) {
-        var e_1, _a;
+        var e_3, _a;
         var _b, _c;
@@ -435,3 +539,3 @@ var hasOrientationChanged = typeof options.orientation === 'string' &&
             try {
-                for (var _d = __values(this.floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
                     var group = _e.value;
@@ -445,5 +549,5 @@ switch (this.options.floatingGroupBounds) {
                             group.overlay.minimumInViewportHeight =
-                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
                             group.overlay.minimumInViewportWidth =
-                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                                constants_1.DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
                             break;
@@ -459,3 +563,3 @@ default:
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
@@ -465,3 +569,3 @@ try {
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_3) throw e_3.error; }
             }
@@ -472,7 +576,7 @@ }
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
-        var e_2, _a;
+        var e_4, _a;
         _super.prototype.layout.call(this, width, height, forceResize);
-        if (this.floatingGroups) {
+        if (this._floatingGroups) {
             try {
-                for (var _b = __values(this.floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(this._floatingGroups), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var floating = _c.value;
@@ -483,3 +587,3 @@ // ensure floting groups stay within visible boundaries
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
@@ -489,3 +593,3 @@ try {
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_4) throw e_4.error; }
             }
@@ -558,8 +662,14 @@ }
         }, {});
-        var floats = this.floatingGroups.map(function (floatingGroup) {
+        var floats = this._floatingGroups.map(function (group) {
             return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
+                data: group.group.toJSON(),
+                position: group.overlay.toJSON(),
             };
         });
+        var popoutGroups = this._popoutGroups.map(function (group) {
+            return {
+                data: group.group.toJSON(),
+                position: group.window.dimensions(),
+            };
+        });
         var result = {
@@ -573,8 +683,11 @@ grid: data,
         }
+        if (popoutGroups.length > 0) {
+            result.popoutGroups = popoutGroups;
+        }
         return result;
     };
     DockviewComponent.prototype.fromJSON = function (data) {
-        var e_3, _a, e_4, _b, e_5, _c, e_6, _d, e_7, _e, e_8, _f;
+        var e_5, _a, e_6, _b, e_7, _c, e_8, _d, e_9, _e, e_10, _f, e_11, _g;
         var _this = this;
-        var _g;
+        var _h, _j;
         this.clear();
@@ -593,3 +706,3 @@ if (typeof data !== 'object' || data === null) {
             var createGroupFromSerializedState_1 = function (data) {
-                var e_9, _a;
+                var e_12, _a;
                 var id = data.id, locked = data.locked, hideHeader = data.hideHeader, views = data.views, activeView = data.activeView;
@@ -617,3 +730,3 @@ if (typeof id !== 'string') {
                 }
-                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                catch (e_12_1) { e_12 = { error: e_12_1 }; }
                 finally {
@@ -623,3 +736,3 @@ try {
                     }
-                    finally { if (e_9) throw e_9.error; }
+                    finally { if (e_12) throw e_12.error; }
                 }
@@ -649,3 +762,3 @@ _this._onDidAddGroup.fire(group);
             this.layout(width, height, true);
-            var serializedFloatingGroups = (_g = data.floatingGroups) !== null && _g !== void 0 ? _g : [];
+            var serializedFloatingGroups = (_h = data.floatingGroups) !== null && _h !== void 0 ? _h : [];
             try {
@@ -664,3 +777,3 @@ for (var serializedFloatingGroups_1 = __values(serializedFloatingGroups), serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next(); !serializedFloatingGroups_1_1.done; serializedFloatingGroups_1_1 = serializedFloatingGroups_1.next()) {
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
@@ -670,16 +783,35 @@ try {
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_5) throw e_5.error; }
             }
+            var serializedPopoutGroups = (_j = data.popoutGroups) !== null && _j !== void 0 ? _j : [];
             try {
-                for (var _h = __values(this.floatingGroups), _j = _h.next(); !_j.done; _j = _h.next()) {
-                    var floatingGroup = _j.value;
+                for (var serializedPopoutGroups_1 = __values(serializedPopoutGroups), serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next(); !serializedPopoutGroups_1_1.done; serializedPopoutGroups_1_1 = serializedPopoutGroups_1.next()) {
+                    var serializedPopoutGroup = serializedPopoutGroups_1_1.value;
+                    var data_2 = serializedPopoutGroup.data, position = serializedPopoutGroup.position;
+                    var group = createGroupFromSerializedState_1(data_2);
+                    this.addPopoutGroup(group, {
+                        skipRemoveGroup: true,
+                        position: position !== null && position !== void 0 ? position : undefined,
+                    });
+                }
+            }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            finally {
+                try {
+                    if (serializedPopoutGroups_1_1 && !serializedPopoutGroups_1_1.done && (_b = serializedPopoutGroups_1.return)) _b.call(serializedPopoutGroups_1);
+                }
+                finally { if (e_6) throw e_6.error; }
+            }
+            try {
+                for (var _k = __values(this._floatingGroups), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var floatingGroup = _l.value;
                     floatingGroup.overlay.setBounds();
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
-                    if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
+                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_7) throw e_7.error; }
             }
@@ -698,7 +830,7 @@ if (typeof activeGroup === 'string') {
                  */
-                for (var _k = __values(this.groups), _l = _k.next(); !_l.done; _l = _k.next()) {
-                    var group = _l.value;
+                for (var _m = __values(this.groups), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var group = _o.value;
                     try {
-                        for (var _m = (e_6 = void 0, __values(group.panels)), _o = _m.next(); !_o.done; _o = _m.next()) {
-                            var panel = _o.value;
+                        for (var _p = (e_9 = void 0, __values(group.panels)), _q = _p.next(); !_q.done; _q = _p.next()) {
+                            var panel = _q.value;
                             this.removePanel(panel, {
@@ -710,17 +842,17 @@ removeEmptyGroup: false,
                     }
-                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                    catch (e_9_1) { e_9 = { error: e_9_1 }; }
                     finally {
                         try {
-                            if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
+                            if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
                         }
-                        finally { if (e_6) throw e_6.error; }
+                        finally { if (e_9) throw e_9.error; }
                     }
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
             finally {
                 try {
-                    if (_l && !_l.done && (_c = _k.return)) _c.call(_k);
+                    if (_o && !_o.done && (_d = _m.return)) _d.call(_m);
                 }
-                finally { if (e_5) throw e_5.error; }
+                finally { if (e_8) throw e_8.error; }
             }
@@ -732,4 +864,4 @@ try {
                  */
-                for (var _p = __values(this.groups), _q = _p.next(); !_q.done; _q = _p.next()) {
-                    var group = _q.value;
+                for (var _r = __values(this.groups), _s = _r.next(); !_s.done; _s = _r.next()) {
+                    var group = _s.value;
                     group.dispose();
@@ -740,22 +872,22 @@ this._groups.delete(group.id);
             }
-            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+            catch (e_10_1) { e_10 = { error: e_10_1 }; }
             finally {
                 try {
-                    if (_q && !_q.done && (_e = _p.return)) _e.call(_p);
+                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
                 }
-                finally { if (e_7) throw e_7.error; }
+                finally { if (e_10) throw e_10.error; }
             }
             try {
                 // iterate over a reassigned array since original array will be modified
-                for (var _r = __values(__spreadArray([], __read(this.floatingGroups), false)), _s = _r.next(); !_s.done; _s = _r.next()) {
-                    var floatingGroup = _s.value;
+                for (var _t = __values(__spreadArray([], __read(this._floatingGroups), false)), _u = _t.next(); !_u.done; _u = _t.next()) {
+                    var floatingGroup = _u.value;
                     floatingGroup.dispose();
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_11_1) { e_11 = { error: e_11_1 }; }
             finally {
                 try {
-                    if (_s && !_s.done && (_f = _r.return)) _f.call(_r);
+                    if (_u && !_u.done && (_g = _t.return)) _g.call(_t);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_11) throw e_11.error; }
             }
@@ -774,3 +906,3 @@ // fires clean-up events and clears the underlying HTML gridview.
     DockviewComponent.prototype.clear = function () {
-        var e_10, _a;
+        var e_13, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
@@ -786,3 +918,3 @@ var hasActiveGroup = !!this.activeGroup;
         }
-        catch (e_10_1) { e_10 = { error: e_10_1 }; }
+        catch (e_13_1) { e_13 = { error: e_13_1 }; }
         finally {
@@ -792,3 +924,3 @@ try {
             }
-            finally { if (e_10) throw e_10.error; }
+            finally { if (e_13) throw e_13.error; }
         }
@@ -804,3 +936,3 @@ if (hasActiveGroup) {
     DockviewComponent.prototype.closeAllGroups = function () {
-        var e_11, _a;
+        var e_14, _a;
         try {
@@ -813,3 +945,3 @@ for (var _b = __values(this._groups.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
         }
-        catch (e_11_1) { e_11 = { error: e_11_1 }; }
+        catch (e_14_1) { e_14 = { error: e_14_1 }; }
         finally {
@@ -819,3 +951,3 @@ try {
             }
-            finally { if (e_11) throw e_11.error; }
+            finally { if (e_14) throw e_14.error; }
         }
@@ -879,3 +1011,4 @@ };
             }
-            else if (referenceGroup.api.isFloating || target === 'center') {
+            else if (referenceGroup.api.location === 'floating' ||
+                target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
@@ -925,3 +1058,3 @@ referenceGroup.model.openPanel(panel);
         if (!options.skipDispose) {
-            this.greadyRenderContainer.remove(panel);
+            this.overlayRenderContainer.remove(panel);
             panel.dispose();
@@ -943,3 +1076,3 @@ }
         var _a, _b;
-        if (this.groups.filter(function (x) { return !x.api.isFloating; }).length === 0) {
+        if (this.groups.filter(function (x) { return x.api.location === 'grid'; }).length === 0) {
             if (!this.watermark) {
@@ -1004,3 +1137,3 @@ this.watermark = this.createWatermarkComponent();
     DockviewComponent.prototype.removeGroup = function (group, options) {
-        var e_12, _a;
+        var e_15, _a;
         var _b;
@@ -1017,3 +1150,3 @@ var panels = __spreadArray([], __read(group.panels), false); // reassign since group panels will mutate
         }
-        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+        catch (e_15_1) { e_15 = { error: e_15_1 }; }
         finally {
@@ -1023,3 +1156,3 @@ try {
             }
-            finally { if (e_12) throw e_12.error; }
+            finally { if (e_15) throw e_15.error; }
         }
@@ -1033,15 +1166,36 @@ var activePanel = this.activePanel;
     DockviewComponent.prototype.doRemoveGroup = function (group, options) {
-        var floatingGroup = this.floatingGroups.find(function (_) { return _.group === group; });
-        if (floatingGroup) {
-            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                floatingGroup.group.dispose();
-                this._groups.delete(group.id);
-                this._onDidRemoveGroup.fire(group);
+        if (group.api.location === 'floating') {
+            var floatingGroup = this._floatingGroups.find(function (_) { return _.group === group; });
+            if (floatingGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    floatingGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                (0, array_1.remove)(this._floatingGroups, floatingGroup);
+                floatingGroup.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                    var groups = Array.from(this._groups.values());
+                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                }
+                return floatingGroup.group;
             }
-            floatingGroup.dispose();
-            if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-                var groups = Array.from(this._groups.values());
-                this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+            throw new Error('failed to find floating group');
+        }
+        if (group.api.location === 'popout') {
+            var selectedGroup = this._popoutGroups.find(function (_) { return _.group === group; });
+            if (selectedGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    selectedGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                selectedGroup.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                    var groups = Array.from(this._groups.values());
+                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                }
+                return selectedGroup.group;
             }
-            return floatingGroup.group;
+            throw new Error('failed to find popout group');
         }
@@ -1078,4 +1232,3 @@ return _super.prototype.doRemoveGroup.call(this, group, options);
                 var _d = __read((0, array_1.tail)(targetLocation), 2), targetParentLocation = _d[0], to = _d[1];
-                var isFloating = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
-                if (!isFloating) {
+                if (sourceGroup.api.location === 'grid') {
                     var sourceLocation = (0, gridview_1.getGridLocation)(sourceGroup.element);
@@ -1112,3 +1265,3 @@ var _e = __read((0, array_1.tail)(sourceLocation), 2), sourceParentLocation = _e[0], from = _e[1];
     DockviewComponent.prototype.moveGroup = function (sourceGroup, referenceGroup, target) {
-        var e_13, _a;
+        var e_16, _a;
         if (sourceGroup) {
@@ -1131,3 +1284,3 @@ if (!target || target === 'center') {
                 }
-                catch (e_13_1) { e_13 = { error: e_13_1 }; }
+                catch (e_16_1) { e_16 = { error: e_16_1 }; }
                 finally {
@@ -1137,13 +1290,26 @@ try {
                     }
-                    finally { if (e_13) throw e_13.error; }
+                    finally { if (e_16) throw e_16.error; }
                 }
             }
             else {
-                var floatingGroup = this.floatingGroups.find(function (x) { return x.group === sourceGroup; });
-                if (floatingGroup) {
-                    floatingGroup.dispose();
+                switch (sourceGroup.api.location) {
+                    case 'grid':
+                        this.gridview.removeView((0, gridview_1.getGridLocation)(sourceGroup.element));
+                        break;
+                    case 'floating': {
+                        var selectedFloatingGroup = this._floatingGroups.find(function (x) { return x.group === sourceGroup; });
+                        if (!selectedFloatingGroup) {
+                            throw new Error('failed to find floating group');
+                        }
+                        selectedFloatingGroup.dispose();
+                        break;
+                    }
+                    case 'popout': {
+                        var selectedPopoutGroup = this._popoutGroups.find(function (x) { return x.group === sourceGroup; });
+                        if (!selectedPopoutGroup) {
+                            throw new Error('failed to find popout group');
+                        }
+                        selectedPopoutGroup.dispose();
+                    }
                 }
-                else {
-                    this.gridview.removeView((0, gridview_1.getGridLocation)(sourceGroup.element));
-                }
                 var referenceLocation = (0, gridview_1.getGridLocation)(referenceGroup.element);
@@ -1150,0 +1316,0 @@ var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);

dist/cjs/dockview/dockviewGroupPanel.js

@@ -26,4 +26,4 @@ "use strict";
         var _this = _super.call(this, id, 'groupview_default', {
-            minimumHeight: 100,
-            minimumWidth: 100,
+            minimumHeight: 0,
+            minimumWidth: 0,
         }, new dockviewGroupPanelApi_1.DockviewGroupPanelApiImpl(id, accessor)) || this;
@@ -30,0 +30,0 @@ _this.api.initialize(_this); // cannot use 'this' after after 'super' call

dist/cjs/dockview/dockviewGroupPanelModel.d.ts

@@ -95,2 +95,3 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 }
+export type DockviewGroupLocation = 'grid' | 'floating' | 'popout';
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
@@ -108,6 +109,6 @@ private readonly container;
     private _locked;
-    private _isFloating;
     private _rightHeaderActions;
     private _leftHeaderActions;
     private _prefixHeaderActions;
+    private _location;
     private mostRecentlyUsed;
@@ -144,4 +145,4 @@ private readonly _onDidChange;
     get isContentFocused(): boolean;
-    get isFloating(): boolean;
-    set isFloating(value: boolean);
+    get location(): DockviewGroupLocation;
+    set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
@@ -148,0 +149,0 @@ initialize(): void;

dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -74,3 +74,3 @@ "use strict";
         _this._locked = false;
-        _this._isFloating = false;
+        _this._location = 'grid';
         _this.mostRecentlyUsed = [];
@@ -194,12 +194,34 @@ _this._onDidChange = new events_1.Emitter();
     });
-    Object.defineProperty(DockviewGroupPanelModel.prototype, "isFloating", {
+    Object.defineProperty(DockviewGroupPanelModel.prototype, "location", {
         get: function () {
-            return this._isFloating;
+            return this._location;
         },
         set: function (value) {
-            this._isFloating = value;
-            this.contentContainer.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
-            (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', value);
-            this.groupPanel.api._onDidFloatingStateChange.fire({
-                isFloating: this.isFloating,
+            this._location = value;
+            (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', false);
+            (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', false);
+            switch (value) {
+                case 'grid':
+                    this.contentContainer.dropTarget.setTargetZones([
+                        'top',
+                        'bottom',
+                        'left',
+                        'right',
+                        'center',
+                    ]);
+                    break;
+                case 'floating':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    this.contentContainer.dropTarget.setTargetZones(value
+                        ? ['center']
+                        : ['top', 'bottom', 'left', 'right', 'center']);
+                    (0, dom_1.toggleClass)(this.container, 'dv-groupview-floating', true);
+                    break;
+                case 'popout':
+                    this.contentContainer.dropTarget.setTargetZones(['center']);
+                    (0, dom_1.toggleClass)(this.container, 'dv-groupview-popout', true);
+                    break;
+            }
+            this.groupPanel.api._onDidLocationChange.fire({
+                location: this.location,
             });
@@ -601,3 +623,2 @@ },
         }
-        // this.dropTarget.dispose();
         this.tabsContainer.dispose();
@@ -604,0 +625,0 @@ this.contentContainer.dispose();

dist/cjs/dockview/dockviewPanel.d.ts

@@ -9,3 +9,3 @@ import { DockviewApi } from '../api/component.api';
 import { DockviewComponent } from './dockviewComponent';
-import { DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export interface IDockviewPanel extends IDisposable, IPanel {
@@ -12,0 +12,0 @@ readonly view: IDockviewPanelModel;

dist/cjs/dockview/options.d.ts

@@ -14,3 +14,3 @@ import { DockviewApi } from '../api/component.api';
 import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
-import { DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export interface IHeaderActionsRenderer extends IDisposable {
@@ -77,2 +77,3 @@ readonly element: HTMLElement;
     };
+    popoutUrl?: string;
     defaultRenderer?: DockviewPanelRenderer;
@@ -79,0 +80,0 @@ debug?: boolean;

dist/cjs/dockview/types.d.ts

@@ -8,3 +8,3 @@ import { IDockviewComponent } from './dockviewComponent';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
-import { DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export declare enum DockviewDropTargets {
@@ -11,0 +11,0 @@ Tab = 0,

dist/cjs/dom.d.ts

@@ -17,2 +17,3 @@ import { Event as DockviewEvent } from './events';
 export declare function quasiDefaultPrevented(event: Event): boolean;
+export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void;
 export declare function getDomNodePagePosition(domNode: Element): {
@@ -19,0 +20,0 @@ left: number;

dist/cjs/dom.js

@@ -29,3 +29,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDomNodePagePosition = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0;
+exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0;
 var events_1 = require("./events");
@@ -199,2 +199,50 @@ var lifecycle_1 = require("./lifecycle");
 exports.quasiDefaultPrevented = quasiDefaultPrevented;
+function addStyles(document, styleSheetList) {
+    var e_3, _a, e_4, _b;
+    var styleSheets = Array.from(styleSheetList);
+    try {
+        for (var styleSheets_1 = __values(styleSheets), styleSheets_1_1 = styleSheets_1.next(); !styleSheets_1_1.done; styleSheets_1_1 = styleSheets_1.next()) {
+            var styleSheet = styleSheets_1_1.value;
+            if (styleSheet.href) {
+                var link = document.createElement('link');
+                link.href = styleSheet.href;
+                link.type = styleSheet.type;
+                link.rel = 'stylesheet';
+                document.head.appendChild(link);
+            }
+            var cssTexts = [];
+            try {
+                if (styleSheet.cssRules) {
+                    cssTexts = Array.from(styleSheet.cssRules).map(function (rule) { return rule.cssText; });
+                }
+            }
+            catch (err) {
+                // security errors (lack of permissions), ignore
+            }
+            try {
+                for (var cssTexts_1 = (e_4 = void 0, __values(cssTexts)), cssTexts_1_1 = cssTexts_1.next(); !cssTexts_1_1.done; cssTexts_1_1 = cssTexts_1.next()) {
+                    var rule = cssTexts_1_1.value;
+                    var style = document.createElement('style');
+                    style.appendChild(document.createTextNode(rule));
+                    document.head.appendChild(style);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (cssTexts_1_1 && !cssTexts_1_1.done && (_b = cssTexts_1.return)) _b.call(cssTexts_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (styleSheets_1_1 && !styleSheets_1_1.done && (_a = styleSheets_1.return)) _a.call(styleSheets_1);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+}
+exports.addStyles = addStyles;
 function getDomNodePagePosition(domNode) {
@@ -201,0 +249,0 @@ var _a = domNode.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;

dist/cjs/gridview/baseComponentGridview.d.ts

@@ -45,2 +45,7 @@ import { Emitter, Event, TickDelayedEvent } from '../events';
     isVisible(panel: T): boolean;
+    maximizeGroup(panel: T): void;
+    isMaximizedGroup(panel: T): boolean;
+    exitMaximizedGroup(): void;
+    hasMaximizedGroup(): boolean;
+    readonly onDidMaxmizedGroupChange: Event<void>;
 }
@@ -77,2 +82,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> {
     isVisible(panel: T): boolean;
+    maximizeGroup(panel: T): void;
+    isMaximizedGroup(panel: T): boolean;
+    exitMaximizedGroup(): void;
+    hasMaximizedGroup(): boolean;
+    get onDidMaxmizedGroupChange(): Event<void>;
     protected doAddGroup(group: T, location?: number[], size?: number): void;
@@ -79,0 +89,0 @@ protected doRemoveGroup(group: T, options?: {

dist/cjs/gridview/baseComponentGridview.js

@@ -156,2 +156,21 @@ "use strict";
     };
+    BaseGrid.prototype.maximizeGroup = function (panel) {
+        this.gridview.maximizeView(panel);
+    };
+    BaseGrid.prototype.isMaximizedGroup = function (panel) {
+        return this.gridview.maximizedView() === panel;
+    };
+    BaseGrid.prototype.exitMaximizedGroup = function () {
+        this.gridview.exitMaximizedView();
+    };
+    BaseGrid.prototype.hasMaximizedGroup = function () {
+        return this.gridview.hasMaximizedView();
+    };
+    Object.defineProperty(BaseGrid.prototype, "onDidMaxmizedGroupChange", {
+        get: function () {
+            return this.gridview.onDidMaxmizedNodeChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
     BaseGrid.prototype.doAddGroup = function (group, location, size) {
@@ -158,0 +177,0 @@ if (location === void 0) { location = [0]; }

dist/cjs/gridview/branchNode.d.ts

@@ -21,2 +21,4 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';
     }>;
+    private readonly _onDidVisibilityChange;
+    readonly onDidVisibilityChange: Event<boolean>;
     get width(): number;
@@ -23,0 +25,0 @@ get height(): number;

dist/cjs/gridview/branchNode.js

@@ -74,2 +74,4 @@ "use strict";
         _this.onDidChange = _this._onDidChange.event;
+        _this._onDidVisibilityChange = new events_1.Emitter();
+        _this.onDidVisibilityChange = _this._onDidVisibilityChange.event;
         _this._orthogonalSize = orthogonalSize;
@@ -109,3 +111,3 @@ _this._size = size;
         }
-        _this.addDisposables(_this._onDidChange, _this.splitview.onDidSashEnd(function () {
+        _this.addDisposables(_this._onDidChange, _this._onDidVisibilityChange, _this.splitview.onDidSashEnd(function () {
             _this._onDidChange.fire({});
@@ -136,5 +138,10 @@ }));
         get: function () {
+            var _this = this;
             return this.children.length === 0
                 ? 0
-                : Math.max.apply(Math, __spreadArray([], __read(this.children.map(function (c) { return c.minimumOrthogonalSize; })), false));
+                : Math.max.apply(Math, __spreadArray([], __read(this.children.map(function (c, index) {
+                    return _this.splitview.isViewVisible(index)
+                        ? c.minimumOrthogonalSize
+                        : 0;
+                })), false));
         },
@@ -146,3 +153,8 @@ enumerable: false,
         get: function () {
-            return Math.min.apply(Math, __spreadArray([], __read(this.children.map(function (c) { return c.maximumOrthogonalSize; })), false));
+            var _this = this;
+            return Math.min.apply(Math, __spreadArray([], __read(this.children.map(function (c, index) {
+                return _this.splitview.isViewVisible(index)
+                    ? c.maximumOrthogonalSize
+                    : Number.POSITIVE_INFINITY;
+            })), false));
         },
@@ -266,3 +278,11 @@ enumerable: false,
         }
+        var wereAllChildrenHidden = this.splitview.contentSize === 0;
         this.splitview.setViewVisible(index, visible);
+        var areAllChildrenHidden = this.splitview.contentSize === 0;
+        // If all children are hidden then the parent should hide the entire splitview
+        // If the entire splitview is hidden then the parent should show the splitview when a child is shown
+        if ((visible && wereAllChildrenHidden) ||
+            (!visible && areAllChildrenHidden)) {
+            this._onDidVisibilityChange.fire(visible);
+        }
     };
@@ -332,9 +352,16 @@ BranchNode.prototype.moveChild = function (from, to) {
         this._childrenDisposable.dispose();
-        this._childrenDisposable = events_1.Event.any.apply(events_1.Event, __spreadArray([], __read(this.children.map(function (c) { return c.onDidChange; })), false))(function (e) {
-            /**
-             * indicate a change has occured to allows any re-rendering but don't bubble
-             * event because that was specific to this branch
-             */
-            _this._onDidChange.fire({ size: e.orthogonalSize });
-        });
+        this._childrenDisposable = new (lifecycle_1.CompositeDisposable.bind.apply(lifecycle_1.CompositeDisposable, __spreadArray([void 0, events_1.Event.any.apply(events_1.Event, __spreadArray([], __read(this.children.map(function (c) { return c.onDidChange; })), false))(function (e) {
+                /**
+                 * indicate a change has occured to allows any re-rendering but don't bubble
+                 * event because that was specific to this branch
+                 */
+                _this._onDidChange.fire({ size: e.orthogonalSize });
+            })], __read(this.children.map(function (c, i) {
+            if (c instanceof BranchNode) {
+                return c.onDidVisibilityChange(function (visible) {
+                    _this.setChildVisible(i, visible);
+                });
+            }
+            return lifecycle_1.Disposable.NONE;
+        })), false)))();
     };
@@ -341,0 +368,0 @@ BranchNode.prototype.dispose = function () {

dist/cjs/gridview/gridview.d.ts

@@ -88,5 +88,6 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
     readonly styles: ISplitviewStyles | undefined;
+    readonly element: HTMLElement;
     private _root;
-    readonly element: HTMLElement;
-    private disposable;
+    private _maximizedNode;
+    private readonly disposable;
     private readonly _onDidChange;
@@ -97,2 +98,4 @@ readonly onDidChange: Event<{
     }>;
+    private readonly _onDidMaxmizedNodeChange;
+    readonly onDidMaxmizedNodeChange: Event<void>;
     get length(): number;
@@ -107,2 +110,6 @@ get orientation(): Orientation;
     get maximumHeight(): number;
+    maximizedView(): IGridView | undefined;
+    hasMaximizedView(): boolean;
+    maximizeView(view: IGridView): void;
+    exitMaximizedView(): void;
     serialize(): SerializedGridview<any>;
@@ -109,0 +116,0 @@ dispose(): void;

dist/cjs/gridview/gridview.js

@@ -168,5 +168,8 @@ "use strict";
         this.styles = styles;
+        this._maximizedNode = undefined;
         this.disposable = new lifecycle_1.MutableDisposable();
         this._onDidChange = new events_1.Emitter();
         this.onDidChange = this._onDidChange.event;
+        this._onDidMaxmizedNodeChange = new events_1.Emitter();
+        this.onDidMaxmizedNodeChange = this._onDidMaxmizedNodeChange.event;
         this.element = document.createElement('div');
@@ -240,2 +243,57 @@ this.element.className = 'grid-view';
     });
+    Gridview.prototype.maximizedView = function () {
+        var _a;
+        return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+    };
+    Gridview.prototype.hasMaximizedView = function () {
+        return this._maximizedNode !== undefined;
+    };
+    Gridview.prototype.maximizeView = function (view) {
+        var location = getGridLocation(view.element);
+        var _a = __read(this.getNode(location), 2), _ = _a[0], node = _a[1];
+        if (!(node instanceof leafNode_1.LeafNode)) {
+            return;
+        }
+        if (this._maximizedNode === node) {
+            return;
+        }
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
+        function hideAllViewsBut(parent, exclude) {
+            for (var i = 0; i < parent.children.length; i++) {
+                var child = parent.children[i];
+                if (child instanceof leafNode_1.LeafNode) {
+                    if (child !== exclude) {
+                        parent.setChildVisible(i, false);
+                    }
+                }
+                else {
+                    hideAllViewsBut(child, exclude);
+                }
+            }
+        }
+        hideAllViewsBut(this.root, node);
+        this._maximizedNode = node;
+        this._onDidMaxmizedNodeChange.fire();
+    };
+    Gridview.prototype.exitMaximizedView = function () {
+        if (!this._maximizedNode) {
+            return;
+        }
+        function showViewsInReverseOrder(parent) {
+            for (var index = parent.children.length - 1; index >= 0; index--) {
+                var child = parent.children[index];
+                if (child instanceof leafNode_1.LeafNode) {
+                    parent.setChildVisible(index, true);
+                }
+                else {
+                    showViewsInReverseOrder(child);
+                }
+            }
+        }
+        showViewsInReverseOrder(this.root);
+        this._maximizedNode = undefined;
+        this._onDidMaxmizedNodeChange.fire();
+    };
     Gridview.prototype.serialize = function () {
@@ -253,2 +311,3 @@ var root = serializeBranchNode(this.getView(), this.orientation);
         this._onDidChange.dispose();
+        this._onDidMaxmizedNodeChange.dispose();
         this.root.dispose();
@@ -397,2 +456,5 @@ this.element.remove();
     Gridview.prototype.setViewVisible = function (location, visible) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
@@ -406,2 +468,5 @@ var _b = __read(this.getNode(rest), 2), parent = _b[1];
     Gridview.prototype.moveView = function (parentLocation, from, to) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         var _a = __read(this.getNode(parentLocation), 2), parent = _a[1];
@@ -414,2 +479,5 @@ if (!(parent instanceof branchNode_1.BranchNode)) {
     Gridview.prototype.addView = function (view, size, location) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
@@ -447,2 +515,5 @@ var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1];
     Gridview.prototype.removeView = function (location, sizing) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
@@ -449,0 +520,0 @@ var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1];

dist/cjs/gridview/leafNode.js

@@ -12,4 +12,4 @@ "use strict";
     function LeafNode(view, orientation, orthogonalSize, size) {
+        if (size === void 0) { size = 0; }
         var _this = this;
-        if (size === void 0) { size = 0; }
         this.view = view;
@@ -157,3 +157,2 @@ this.orientation = orientation;
             this.view.setVisible(visible);
-            this._onDidChange.fire({});
         }
@@ -160,0 +159,0 @@ };

dist/cjs/index.d.ts

@@ -35,3 +35,3 @@ export * from './dnd/dataTransfer';
 export * from './dockview/types';
-export { DockviewPanelRenderer } from './dockview/components/greadyRenderContainer';
+export { DockviewPanelRenderer } from './overlayRenderContainer';
 export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget';
@@ -38,0 +38,0 @@ export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';

dist/cjs/lifecycle.d.ts

@@ -10,2 +10,3 @@ export interface IDisposable {
     const NONE: IDisposable;
+    function from(func: () => void): IDisposable;
 }
@@ -12,0 +13,0 @@ export declare class CompositeDisposable {

dist/cjs/lifecycle.js

@@ -11,2 +11,10 @@ "use strict";
     };
+    function from(func) {
+        return {
+            dispose: function () {
+                func();
+            },
+        };
+    }
+    Disposable.from = from;
 })(Disposable || (exports.Disposable = Disposable = {}));
@@ -13,0 +21,0 @@ var CompositeDisposable = /** @class */ (function () {

dist/cjs/splitview/splitview.d.ts

@@ -23,4 +23,4 @@ import { Event } from '../events';
 export declare enum LayoutPriority {
-    Low = "low",
-    High = "high",
+    Low = "low",// view is offered space last
+    High = "high",// view is offered space first
     Normal = "normal"
@@ -78,3 +78,3 @@ }
     private _orthogonalSize;
-    private contentSize;
+    private _contentSize;
     private _proportions;
@@ -90,2 +90,3 @@ private proportionalLayout;
     readonly onDidRemoveView: Event<IView>;
+    get contentSize(): number;
     get size(): number;
@@ -96,3 +97,3 @@ set size(value: number);
     get length(): number;
-    get proportions(): number[] | undefined;
+    get proportions(): (number | undefined)[] | undefined;
     get orientation(): Orientation;
@@ -99,0 +100,0 @@ set orientation(value: Orientation);

dist/cjs/splitview/splitview.js

@@ -87,3 +87,3 @@ "use strict";
         this._orthogonalSize = 0;
-        this.contentSize = 0;
+        this._contentSize = 0;
         this._proportions = undefined;
@@ -231,6 +231,13 @@ this._startSnappingEnabled = true;
             // Initialize content size and proportions for first layout
-            this.contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0);
+            this._contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0);
             this.saveProportions();
         }
     }
+    Object.defineProperty(Splitview.prototype, "contentSize", {
+        get: function () {
+            return this._contentSize;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Splitview.prototype, "size", {
@@ -675,3 +682,3 @@ get: function () {
         var _this = this;
-        var previousSize = Math.max(this.size, this.contentSize);
+        var previousSize = Math.max(this.size, this._contentSize);
         this.size = size;
@@ -686,6 +693,20 @@ this.orthogonalSize = orthogonalSize;
         else {
+            var total = 0;
             for (var i = 0; i < this.viewItems.length; i++) {
                 var item = this.viewItems[i];
-                item.size = (0, math_1.clamp)(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
+                var proportion = this.proportions[i];
+                if (typeof proportion === 'number') {
+                    total += proportion;
+                }
+                else {
+                    size -= item.size;
+                }
             }
+            for (var i = 0; i < this.viewItems.length; i++) {
+                var item = this.viewItems[i];
+                var proportion = this.proportions[i];
+                if (typeof proportion === 'number' && total > 0) {
+                    item.size = (0, math_1.clamp)(Math.round((proportion * size) / total), item.minimumSize, item.maximumSize);
+                }
+            }
         }
@@ -749,4 +770,6 @@ this.distributeEmptySpace();
         var _this = this;
-        if (this.proportionalLayout && this.contentSize > 0) {
-            this._proportions = this.viewItems.map(function (i) { return i.size / _this.contentSize; });
+        if (this.proportionalLayout && this._contentSize > 0) {
+            this._proportions = this.viewItems.map(function (i) {
+                return i.visible ? i.size / _this._contentSize : undefined;
+            });
         }
@@ -756,3 +779,3 @@ };
         var _this = this;
-        this.contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0);
+        this._contentSize = this.viewItems.reduce(function (r, i) { return r + i.size; }, 0);
         var sum = 0;
@@ -872,3 +895,3 @@ var x = [];
                     collapsesDown[index] &&
-                    (position < this.contentSize || this.endSnappingEnabled)) {
+                    (position < this._contentSize || this.endSnappingEnabled)) {
                     this.updateSash(sash, SashState.MAXIMUM);
@@ -875,0 +898,0 @@ }

dist/cjs/types.d.ts

 export type FunctionOrValue<T> = (() => T) | T;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export interface Box {
+    left: number;
+    top: number;
+    height: number;
+    width: number;
+}
 //# sourceMappingURL=types.d.ts.map

dist/esm/api/component.api.d.ts

@@ -17,2 +17,3 @@ import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
+import { Box } from '../types';
 export interface CommonApi<T = any> {
@@ -456,3 +457,14 @@ readonly height: number;
     moveToPrevious(options?: MovementOptions): void;
+    maximizeGroup(panel: IDockviewPanel): void;
+    hasMaximizedGroup(): boolean;
+    exitMaxmizedGroup(): void;
+    get onDidMaxmizedGroupChange(): Event<void>;
+    /**
+     * Add a popout group in a new Window
+     */
+    addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: {
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
 }
 //# sourceMappingURL=component.api.d.ts.map

dist/esm/api/component.api.js

@@ -638,3 +638,21 @@ import { Emitter } from '../events';
     }
+    maximizeGroup(panel) {
+        this.component.maximizeGroup(panel.group);
+    }
+    hasMaximizedGroup() {
+        return this.component.hasMaximizedGroup();
+    }
+    exitMaxmizedGroup() {
+        this.component.exitMaximizedGroup();
+    }
+    get onDidMaxmizedGroupChange() {
+        return this.component.onDidMaxmizedGroupChange;
+    }
+    /**
+     * Add a popout group in a new Window
+     */
+    addPopoutGroup(item, options) {
+        this.component.addPopoutGroup(item, options);
+    }
 }
 //# sourceMappingURL=component.api.js.map

dist/esm/api/dockviewGroupPanelApi.d.ts

 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
-    readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>;
-    readonly isFloating: boolean;
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly location: DockviewGroupLocation;
     moveTo(options: {
-        group: DockviewGroupPanel;
+        group?: DockviewGroupPanel;
         position?: Position;
     }): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
 }
 export interface DockviewGroupPanelFloatingChangeEvent {
-    readonly isFloating: boolean;
+    readonly location: DockviewGroupLocation;
 }
@@ -20,12 +24,15 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private _group;
-    readonly _onDidFloatingStateChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
-    readonly onDidFloatingStateChange: Event<DockviewGroupPanelFloatingChangeEvent>;
-    get isFloating(): boolean;
+    readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
+    readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
     moveTo(options: {
-        group: DockviewGroupPanel;
+        group?: DockviewGroupPanel;
         position?: Position;
     }): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
     initialize(group: DockviewGroupPanel): void;
 }
 //# sourceMappingURL=dockviewGroupPanelApi.d.ts.map

dist/esm/api/dockviewGroupPanelApi.js

@@ -0,9 +1,12 @@
+import { positionToDirection } from '../dnd/droptarget';
 import { Emitter } from '../events';
 import { GridviewPanelApiImpl } from './gridviewPanelApi';
+// TODO find a better way to initialize and avoid needing null checks
+const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
 export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
-    get isFloating() {
+    get location() {
         if (!this._group) {
-            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+            throw new Error(NOT_INITIALIZED_MESSAGE);
         }
-        return this._group.model.isFloating;
+        return this._group.model.location;
     }
@@ -13,13 +16,40 @@ constructor(id, accessor) {
         this.accessor = accessor;
-        this._onDidFloatingStateChange = new Emitter();
-        this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
-        this.addDisposables(this._onDidFloatingStateChange);
+        this._onDidLocationChange = new Emitter();
+        this.onDidLocationChange = this._onDidLocationChange.event;
+        this.addDisposables(this._onDidLocationChange);
     }
     moveTo(options) {
-        var _a;
+        var _a, _b, _c;
         if (!this._group) {
-            throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+            throw new Error(NOT_INITIALIZED_MESSAGE);
         }
-        this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
+        const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
+            direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
+        });
+        this.accessor.moveGroupOrPanel(group, this._group.id, undefined, options.group ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center' : 'center');
     }
+    maximize() {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        if (this.location !== 'grid') {
+            // only grid groups can be maximized
+            return;
+        }
+        this.accessor.maximizeGroup(this._group);
+    }
+    isMaximized() {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this.accessor.isMaximizedGroup(this._group);
+    }
+    exitMaximized() {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        if (this.isMaximized()) {
+            this.accessor.exitMaximizedGroup();
+        }
+    }
     initialize(group) {
@@ -26,0 +56,0 @@ this._group = group;

dist/esm/api/dockviewPanelApi.d.ts

@@ -7,3 +7,3 @@ import { Emitter, Event } from '../events';
 import { Position } from '../dnd/droptarget';
-import { DockviewPanelRenderer } from '../dockview/components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export interface TitleEvent {
@@ -31,2 +31,5 @@ readonly title: string;
     }): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
 }
@@ -60,3 +63,6 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implements DockviewPanelApi {
     close(): void;
+    maximize(): void;
+    isMaximized(): boolean;
+    exitMaximized(): void;
 }
 //# sourceMappingURL=dockviewPanelApi.d.ts.map

dist/esm/api/dockviewPanelApi.js

@@ -9,4 +9,3 @@ import { Emitter } from '../events';
     get isGroupActive() {
-        var _a;
-        return !!((_a = this.group) === null || _a === void 0 ? void 0 : _a.isActive);
+        return this.group.isActive;
     }
@@ -62,3 +61,12 @@ get renderer() {
     }
+    maximize() {
+        this.group.api.maximize();
+    }
+    isMaximized() {
+        return this.group.api.isMaximized();
+    }
+    exitMaximized() {
+        this.group.api.exitMaximized();
+    }
 }
 //# sourceMappingURL=dockviewPanelApi.js.map

dist/esm/dnd/groupDragHandler.js

@@ -24,3 +24,3 @@ import { quasiPreventDefault } from '../dom';
     isCancelled(_event) {
-        if (this.group.api.isFloating && !_event.shiftKey) {
+        if (this.group.api.location === 'floating' && !_event.shiftKey) {
             return true;
@@ -27,0 +27,0 @@ }

dist/esm/dnd/overlay.d.ts

 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
+import { Box } from '../types';
 export declare class Overlay extends CompositeDisposable {
@@ -14,7 +15,3 @@ private readonly options;
     set minimumInViewportHeight(value: number | undefined);
-    constructor(options: {
-        height: number;
-        width: number;
-        left: number;
-        top: number;
+    constructor(options: Box & {
         container: HTMLElement;
@@ -25,14 +22,4 @@ content: HTMLElement;
     });
-    setBounds(bounds?: Partial<{
-        height: number;
-        width: number;
-        top: number;
-        left: number;
-    }>): void;
-    toJSON(): {
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    };
+    setBounds(bounds?: Partial<Box>): void;
+    toJSON(): Box;
     setupDrag(dragTarget: HTMLElement, options?: {
@@ -39,0 +26,0 @@ inDragMode: boolean;

dist/esm/dockview/components/greadyRenderContainer.d.ts

 import { Droptarget } from '../../dnd/droptarget';
 import { CompositeDisposable } from '../../lifecycle';
 import { IDockviewPanel } from '../dockviewPanel';
-export type DockviewPanelRenderer = 'destructive' | 'gready';
+export type DockviewPanelRenderer = 'onlyWhenVisibile' | 'always';
 export interface IRenderable {
@@ -6,0 +6,0 @@ readonly element: HTMLElement;

dist/esm/dockview/components/greadyRenderContainer.js

@@ -59,3 +59,3 @@ import { DragAndDropObserver } from '../../dnd/dnd';
             focusContainer.style.height = `${box.height}px`;
-            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.isFloating);
+            toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location === 'floating');
         };
@@ -62,0 +62,0 @@ const disposable = new CompositeDisposable(

dist/esm/dockview/components/panel/content.js

@@ -24,7 +24,2 @@ import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
         this.addDisposables(this._onDidFocus, this._onDidBlur);
-        // for hosted containers
-        // 1) register a drop target on the host
-        // 2) register window dragStart events to disable pointer events
-        // 3) register dragEnd events
-        // 4) register mouseMove events (if no buttons are present we take this as a dragEnd event)
         this.dropTarget = new Droptarget(this.element, {
@@ -38,3 +33,5 @@ acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
                 const data = getPanelData();
-                if (!data && event.shiftKey && !this.group.isFloating) {
+                if (!data &&
+                    event.shiftKey &&
+                    this.group.location !== 'floating') {
                     return false;
@@ -72,4 +69,4 @@ }
         switch (panel.api.renderer) {
-            case 'destructive':
-                this.accessor.greadyRenderContainer.remove(panel);
+            case 'onlyWhenVisibile':
+                this.accessor.overlayRenderContainer.remove(panel);
                 if (isActive) {
@@ -82,3 +79,3 @@ if (this.panel) {
                 break;
-            case 'gready':
+            case 'always':
                 if (panel.view.content.element.parentElement === this._element) {
@@ -88,3 +85,3 @@ this._element.removeChild(panel.view.content.element);
                 container =
-                    this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this);
+                    this.accessor.overlayRenderContainer.setReferenceContentContainer(panel, this);
                 break;
@@ -122,7 +119,7 @@ }
         switch (renderer) {
-            case 'gready':
+            case 'always':
                 container =
-                    this.accessor.greadyRenderContainer.setReferenceContentContainer(panel, this);
+                    this.accessor.overlayRenderContainer.setReferenceContentContainer(panel, this);
                 break;
-            case 'destructive':
+            case 'onlyWhenVisibile':
                 this._element.appendChild(this.panel.view.content.element);
@@ -150,3 +147,3 @@ container = this._element;
         if (this.panel) {
-            if (this.accessor.options.defaultRenderer === 'destructive') {
+            if (this.accessor.options.defaultRenderer === 'onlyWhenVisibile') {
                 this._element.removeChild(this.panel.view.content.element);
@@ -153,0 +150,0 @@ }

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

@@ -131,3 +131,3 @@ import { CompositeDisposable, } from '../../../lifecycle';
                 event.shiftKey &&
-                !this.group.api.isFloating) {
+                this.group.api.location !== 'floating') {
                 event.preventDefault();
@@ -197,3 +197,3 @@ const { top, left } = this.element.getBoundingClientRect();
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
-            const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+            const isFloatingWithOnePanel = this.group.api.location === 'floating' && this.size === 1;
             if (isFloatingGroupsEnabled &&
@@ -200,0 +200,0 @@ !isFloatingWithOnePanel &&

dist/esm/dockview/dockviewComponent.d.ts

@@ -13,5 +13,5 @@ import { SerializedGridObject } from '../gridview/gridview';
 import { Parameters } from '../panel/types';
-import { DockviewFloatingGroupPanel, IDockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
-import { GreadyRenderContainer, DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { Box } from '../types';
+import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer';
 export interface PanelReference {
@@ -27,9 +27,8 @@ update: (event: {
     data: GroupPanelViewState;
-    position: {
-        height: number;
-        width: number;
-        left: number;
-        top: number;
-    };
+    position: Box;
 }
+export interface SerializedPopoutGroup {
+    data: GroupPanelViewState;
+    position: Box | null;
+}
 export interface SerializedDockview {
@@ -45,2 +44,3 @@ grid: {
     floatingGroups?: SerializedFloatingGroup[];
+    popoutGroups?: SerializedPopoutGroup[];
 }
@@ -56,3 +56,2 @@ export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds'>;
     readonly panels: IDockviewPanel[];
-    readonly floatingGroups: IDockviewFloatingGroupPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
@@ -87,2 +86,6 @@ readonly orientation: Orientation;
     }): void;
+    addPopoutGroup(item: IDockviewPanel | DockviewGroupPanel, options?: {
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
 }
@@ -95,3 +98,3 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> implements IDockviewComponent {
     private watermark;
-    readonly greadyRenderContainer: GreadyRenderContainer;
+    readonly overlayRenderContainer: OverlayRenderContainer;
     private readonly _onWillDragPanel;
@@ -111,3 +114,4 @@ readonly onWillDragPanel: Event<TabDragEvent>;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
-    readonly floatingGroups: DockviewFloatingGroupPanel[];
+    private readonly _floatingGroups;
+    private readonly _popoutGroups;
     get orientation(): Orientation;
@@ -120,2 +124,7 @@ get totalPanels(): number;
     constructor(options: DockviewComponentOptions);
+    addPopoutGroup(item: DockviewPanel | DockviewGroupPanel, options?: {
+        skipRemoveGroup?: boolean;
+        position?: Box;
+        popoutUrl?: string;
+    }): void;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, coord?: {
@@ -122,0 +131,0 @@ x?: number;

dist/esm/dockview/dockviewComponent.js

@@ -5,3 +5,3 @@ import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
 import { DockviewPanel } from './dockviewPanel';
-import { CompositeDisposable } from '../lifecycle';
+import { CompositeDisposable, Disposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
@@ -22,5 +22,25 @@ import { Watermark } from './components/watermark/watermark';
 import { toggleClass, watchElementResize } from '../dom';
-import { DockviewFloatingGroupPanel, } from './dockviewFloatingGroupPanel';
-import { GreadyRenderContainer, } from './components/greadyRenderContainer';
-const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
+import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
+import { DockviewPopoutGroupPanel } from './dockviewPopoutGroupPanel';
+import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
+import { OverlayRenderContainer, } from '../overlayRenderContainer';
+function getTheme(element) {
+    function toClassList(element) {
+        const list = [];
+        for (let i = 0; i < element.classList.length; i++) {
+            list.push(element.classList.item(i));
+        }
+        return list;
+    }
+    let theme = undefined;
+    let parent = element;
+    while (parent !== null) {
+        theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
+        if (typeof theme === 'string') {
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    return theme;
+}
 function typeValidate3(data, path) {
@@ -108,3 +128,3 @@ if (typeof data.id !== 'string') {
         var _a;
-        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'destructive';
+        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
     }
@@ -137,13 +157,23 @@ constructor(options) {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.floatingGroups = [];
+        this._floatingGroups = [];
+        this._popoutGroups = [];
         const gready = document.createElement('div');
-        gready.className = 'dv-gready-render-container';
+        gready.className = 'dv-overlay-render-container';
         this.gridview.element.appendChild(gready);
-        this.greadyRenderContainer = new GreadyRenderContainer(gready);
+        this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
-        this.addDisposables(this.greadyRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
+        }), Disposable.from(() => {
+            // iterate over a copy of the array since .dispose() mutates the original array
+            for (const group of [...this._floatingGroups]) {
+                group.dispose();
+            }
+            // iterate over a copy of the array since .dispose() mutates the original array
+            for (const group of [...this._popoutGroups]) {
+                group.dispose();
+            }
         }));
@@ -218,2 +248,48 @@ this._options = options;
     }
+    addPopoutGroup(item, options) {
+        var _a;
+        let group;
+        let box = options === null || options === void 0 ? void 0 : options.position;
+        if (item instanceof DockviewPanel) {
+            group = this.createGroup();
+            this.removePanel(item, {
+                removeEmptyGroup: true,
+                skipDispose: true,
+            });
+            group.model.openPanel(item);
+            if (!box) {
+                box = this.element.getBoundingClientRect();
+            }
+        }
+        else {
+            group = item;
+            if (!box) {
+                box = group.element.getBoundingClientRect();
+            }
+            const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                options.skipRemoveGroup;
+            if (!skip) {
+                this.doRemoveGroup(item, { skipDispose: true });
+            }
+        }
+        const theme = getTheme(this.gridview.element);
+        const popoutWindow = new DockviewPopoutGroupPanel(group, {
+            className: theme !== null && theme !== void 0 ? theme : '',
+            popoutUrl: (_a = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _a !== void 0 ? _a : '/popout.html',
+            box: {
+                left: box.left,
+                top: box.top,
+                width: box.width,
+                height: box.height,
+            },
+        });
+        popoutWindow.addDisposables({
+            dispose: () => {
+                remove(this._popoutGroups, popoutWindow);
+            },
+        }, popoutWindow.window.onDidClose(() => {
+            this.doAddGroup(group, [0]);
+        }));
+        this._popoutGroups.push(popoutWindow);
+    }
     addFloatingGroup(item, coord, options) {
@@ -238,5 +314,9 @@ var _a, _b, _c, _d, _e, _f;
         }
-        group.model.isFloating = true;
-        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
-        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+        group.model.location = 'floating';
+        const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
+            ? Math.max(coord.x, 0)
+            : DEFAULT_FLOATING_GROUP_POSITION.left;
+        const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
+            ? Math.max(coord.y, 0)
+            : DEFAULT_FLOATING_GROUP_POSITION.top;
         const overlay = new Overlay({
@@ -285,8 +365,8 @@ container: this.gridview.element,
                 disposable.dispose();
-                group.model.isFloating = false;
-                remove(this.floatingGroups, floatingGroupPanel);
+                group.model.location = 'grid';
+                remove(this._floatingGroups, floatingGroupPanel);
                 this.updateWatermark();
             },
         });
-        this.floatingGroups.push(floatingGroupPanel);
+        this._floatingGroups.push(floatingGroupPanel);
         this.updateWatermark();
@@ -338,3 +418,3 @@ }
         if (hasFloatingGroupOptionsChanged) {
-            for (const group of this.floatingGroups) {
+            for (const group of this._floatingGroups) {
                 switch (this.options.floatingGroupBounds) {
@@ -364,4 +444,4 @@ case 'boundedWithinViewport':
         super.layout(width, height, forceResize);
-        if (this.floatingGroups) {
-            for (const floating of this.floatingGroups) {
+        if (this._floatingGroups) {
+            for (const floating of this._floatingGroups) {
                 // ensure floting groups stay within visible boundaries
@@ -434,8 +514,14 @@ floating.overlay.setBounds();
         }, {});
-        const floats = this.floatingGroups.map((floatingGroup) => {
+        const floats = this._floatingGroups.map((group) => {
             return {
-                data: floatingGroup.group.toJSON(),
-                position: floatingGroup.overlay.toJSON(),
+                data: group.group.toJSON(),
+                position: group.overlay.toJSON(),
             };
         });
+        const popoutGroups = this._popoutGroups.map((group) => {
+            return {
+                data: group.group.toJSON(),
+                position: group.window.dimensions(),
+            };
+        });
         const result = {
@@ -449,6 +535,9 @@ grid: data,
         }
+        if (popoutGroups.length > 0) {
+            result.popoutGroups = popoutGroups;
+        }
         return result;
     }
     fromJSON(data) {
-        var _a;
+        var _a, _b;
         this.clear();
@@ -520,3 +609,12 @@ if (typeof data !== 'object' || data === null) {
             }
-            for (const floatingGroup of this.floatingGroups) {
+            const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
+            for (const serializedPopoutGroup of serializedPopoutGroups) {
+                const { data, position } = serializedPopoutGroup;
+                const group = createGroupFromSerializedState(data);
+                this.addPopoutGroup(group, {
+                    skipRemoveGroup: true,
+                    position: position !== null && position !== void 0 ? position : undefined,
+                });
+            }
+            for (const floatingGroup of this._floatingGroups) {
                 floatingGroup.overlay.setBounds();
@@ -553,3 +651,3 @@ }
             // iterate over a reassigned array since original array will be modified
-            for (const floatingGroup of [...this.floatingGroups]) {
+            for (const floatingGroup of [...this._floatingGroups]) {
                 floatingGroup.dispose();
@@ -646,3 +744,4 @@ }
             }
-            else if (referenceGroup.api.isFloating || target === 'center') {
+            else if (referenceGroup.api.location === 'floating' ||
+                target === 'center') {
                 panel = this.createPanel(options, referenceGroup);
@@ -691,3 +790,3 @@ referenceGroup.model.openPanel(panel);
         if (!options.skipDispose) {
-            this.greadyRenderContainer.remove(panel);
+            this.overlayRenderContainer.remove(panel);
             panel.dispose();
@@ -709,3 +808,3 @@ }
         var _a, _b;
-        if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
+        if (this.groups.filter((x) => x.api.location === 'grid').length === 0) {
             if (!this.watermark) {
@@ -785,15 +884,36 @@ this.watermark = this.createWatermarkComponent();
     doRemoveGroup(group, options) {
-        const floatingGroup = this.floatingGroups.find((_) => _.group === group);
-        if (floatingGroup) {
-            if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
-                floatingGroup.group.dispose();
-                this._groups.delete(group.id);
-                this._onDidRemoveGroup.fire(group);
+        if (group.api.location === 'floating') {
+            const floatingGroup = this._floatingGroups.find((_) => _.group === group);
+            if (floatingGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    floatingGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                remove(this._floatingGroups, floatingGroup);
+                floatingGroup.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                    const groups = Array.from(this._groups.values());
+                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                }
+                return floatingGroup.group;
             }
-            floatingGroup.dispose();
-            if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-                const groups = Array.from(this._groups.values());
-                this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+            throw new Error('failed to find floating group');
+        }
+        if (group.api.location === 'popout') {
+            const selectedGroup = this._popoutGroups.find((_) => _.group === group);
+            if (selectedGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    selectedGroup.group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                selectedGroup.dispose();
+                if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
+                    const groups = Array.from(this._groups.values());
+                    this.doSetGroupActive(groups.length > 0 ? groups[0].value : undefined);
+                }
+                return selectedGroup.group;
             }
-            return floatingGroup.group;
+            throw new Error('failed to find popout group');
         }
@@ -830,4 +950,3 @@ return super.doRemoveGroup(group, options);
                 const [targetParentLocation, to] = tail(targetLocation);
-                const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
-                if (!isFloating) {
+                if (sourceGroup.api.location === 'grid') {
                     const sourceLocation = getGridLocation(sourceGroup.element);
@@ -878,9 +997,22 @@ const [sourceParentLocation, from] = tail(sourceLocation);
             else {
-                const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
-                if (floatingGroup) {
-                    floatingGroup.dispose();
+                switch (sourceGroup.api.location) {
+                    case 'grid':
+                        this.gridview.removeView(getGridLocation(sourceGroup.element));
+                        break;
+                    case 'floating': {
+                        const selectedFloatingGroup = this._floatingGroups.find((x) => x.group === sourceGroup);
+                        if (!selectedFloatingGroup) {
+                            throw new Error('failed to find floating group');
+                        }
+                        selectedFloatingGroup.dispose();
+                        break;
+                    }
+                    case 'popout': {
+                        const selectedPopoutGroup = this._popoutGroups.find((x) => x.group === sourceGroup);
+                        if (!selectedPopoutGroup) {
+                            throw new Error('failed to find popout group');
+                        }
+                        selectedPopoutGroup.dispose();
+                    }
                 }
-                else {
-                    this.gridview.removeView(getGridLocation(sourceGroup.element));
-                }
                 const referenceLocation = getGridLocation(referenceGroup.element);
@@ -887,0 +1019,0 @@ const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);

dist/esm/dockview/dockviewGroupPanel.js

@@ -28,4 +28,4 @@ import { DockviewGroupPanelModel, } from './dockviewGroupPanelModel';
         super(id, 'groupview_default', {
-            minimumHeight: 100,
-            minimumWidth: 100,
+            minimumHeight: 0,
+            minimumWidth: 0,
         }, new DockviewGroupPanelApiImpl(id, accessor));
@@ -32,0 +32,0 @@ this.api.initialize(this); // cannot use 'this' after after 'super' call

dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -95,2 +95,3 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 }
+export type DockviewGroupLocation = 'grid' | 'floating' | 'popout';
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
@@ -108,6 +109,6 @@ private readonly container;
     private _locked;
-    private _isFloating;
     private _rightHeaderActions;
     private _leftHeaderActions;
     private _prefixHeaderActions;
+    private _location;
     private mostRecentlyUsed;
@@ -144,4 +145,4 @@ private readonly _onDidChange;
     get isContentFocused(): boolean;
-    get isFloating(): boolean;
-    set isFloating(value: boolean);
+    get location(): DockviewGroupLocation;
+    set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
@@ -148,0 +149,0 @@ initialize(): void;

dist/esm/dockview/dockviewGroupPanelModel.js

@@ -46,11 +46,33 @@ import { DockviewApi } from '../api/component.api';
     }
-    get isFloating() {
-        return this._isFloating;
+    get location() {
+        return this._location;
     }
-    set isFloating(value) {
-        this._isFloating = value;
-        this.contentContainer.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
-        toggleClass(this.container, 'dv-groupview-floating', value);
-        this.groupPanel.api._onDidFloatingStateChange.fire({
-            isFloating: this.isFloating,
+    set location(value) {
+        this._location = value;
+        toggleClass(this.container, 'dv-groupview-floating', false);
+        toggleClass(this.container, 'dv-groupview-popout', false);
+        switch (value) {
+            case 'grid':
+                this.contentContainer.dropTarget.setTargetZones([
+                    'top',
+                    'bottom',
+                    'left',
+                    'right',
+                    'center',
+                ]);
+                break;
+            case 'floating':
+                this.contentContainer.dropTarget.setTargetZones(['center']);
+                this.contentContainer.dropTarget.setTargetZones(value
+                    ? ['center']
+                    : ['top', 'bottom', 'left', 'right', 'center']);
+                toggleClass(this.container, 'dv-groupview-floating', true);
+                break;
+            case 'popout':
+                this.contentContainer.dropTarget.setTargetZones(['center']);
+                toggleClass(this.container, 'dv-groupview-popout', true);
+                break;
+        }
+        this.groupPanel.api._onDidLocationChange.fire({
+            location: this.location,
         });
@@ -68,3 +90,3 @@ }
         this._locked = false;
-        this._isFloating = false;
+        this._location = 'grid';
         this.mostRecentlyUsed = [];
@@ -470,3 +492,2 @@ this._onDidChange = new Emitter();
         }
-        // this.dropTarget.dispose();
         this.tabsContainer.dispose();
@@ -473,0 +494,0 @@ this.contentContainer.dispose();

dist/esm/dockview/dockviewPanel.d.ts

@@ -9,3 +9,3 @@ import { DockviewApi } from '../api/component.api';
 import { DockviewComponent } from './dockviewComponent';
-import { DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export interface IDockviewPanel extends IDisposable, IPanel {
@@ -12,0 +12,0 @@ readonly view: IDockviewPanelModel;

dist/esm/dockview/options.d.ts

@@ -14,3 +14,3 @@ import { DockviewApi } from '../api/component.api';
 import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
-import { DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export interface IHeaderActionsRenderer extends IDisposable {
@@ -77,2 +77,3 @@ readonly element: HTMLElement;
     };
+    popoutUrl?: string;
     defaultRenderer?: DockviewPanelRenderer;
@@ -79,0 +80,0 @@ debug?: boolean;

dist/esm/dockview/types.d.ts

@@ -8,3 +8,3 @@ import { IDockviewComponent } from './dockviewComponent';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
-import { DockviewPanelRenderer } from './components/greadyRenderContainer';
+import { DockviewPanelRenderer } from '../overlayRenderContainer';
 export declare enum DockviewDropTargets {
@@ -11,0 +11,0 @@ Tab = 0,

dist/esm/dom.d.ts

@@ -17,2 +17,3 @@ import { Event as DockviewEvent } from './events';
 export declare function quasiDefaultPrevented(event: Event): boolean;
+export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void;
 export declare function getDomNodePagePosition(domNode: Element): {
@@ -19,0 +20,0 @@ left: number;

dist/esm/dom.js

@@ -127,2 +127,28 @@ import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events';
 }
+export function addStyles(document, styleSheetList) {
+    const styleSheets = Array.from(styleSheetList);
+    for (const styleSheet of styleSheets) {
+        if (styleSheet.href) {
+            const link = document.createElement('link');
+            link.href = styleSheet.href;
+            link.type = styleSheet.type;
+            link.rel = 'stylesheet';
+            document.head.appendChild(link);
+        }
+        let cssTexts = [];
+        try {
+            if (styleSheet.cssRules) {
+                cssTexts = Array.from(styleSheet.cssRules).map((rule) => rule.cssText);
+            }
+        }
+        catch (err) {
+            // security errors (lack of permissions), ignore
+        }
+        for (const rule of cssTexts) {
+            const style = document.createElement('style');
+            style.appendChild(document.createTextNode(rule));
+            document.head.appendChild(style);
+        }
+    }
+}
 export function getDomNodePagePosition(domNode) {
@@ -129,0 +155,0 @@ const { left, top, width, height } = domNode.getBoundingClientRect();

dist/esm/gridview/baseComponentGridview.d.ts

@@ -45,2 +45,7 @@ import { Emitter, Event, TickDelayedEvent } from '../events';
     isVisible(panel: T): boolean;
+    maximizeGroup(panel: T): void;
+    isMaximizedGroup(panel: T): boolean;
+    exitMaximizedGroup(): void;
+    hasMaximizedGroup(): boolean;
+    readonly onDidMaxmizedGroupChange: Event<void>;
 }
@@ -77,2 +82,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizable implements IBaseGrid<T> {
     isVisible(panel: T): boolean;
+    maximizeGroup(panel: T): void;
+    isMaximizedGroup(panel: T): boolean;
+    exitMaximizedGroup(): void;
+    hasMaximizedGroup(): boolean;
+    get onDidMaxmizedGroupChange(): Event<void>;
     protected doAddGroup(group: T, location?: number[], size?: number): void;
@@ -79,0 +89,0 @@ protected doRemoveGroup(group: T, options?: {

dist/esm/gridview/baseComponentGridview.js

@@ -84,2 +84,17 @@ import { Emitter, Event, TickDelayedEvent } from '../events';
     }
+    maximizeGroup(panel) {
+        this.gridview.maximizeView(panel);
+    }
+    isMaximizedGroup(panel) {
+        return this.gridview.maximizedView() === panel;
+    }
+    exitMaximizedGroup() {
+        this.gridview.exitMaximizedView();
+    }
+    hasMaximizedGroup() {
+        return this.gridview.hasMaximizedView();
+    }
+    get onDidMaxmizedGroupChange() {
+        return this.gridview.onDidMaxmizedNodeChange;
+    }
     doAddGroup(group, location = [0], size) {
@@ -86,0 +101,0 @@ this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);

dist/esm/gridview/branchNode.d.ts

@@ -21,2 +21,4 @@ import { IView, Orientation, Sizing, LayoutPriority, ISplitviewStyles } from '../splitview/splitview';
     }>;
+    private readonly _onDidVisibilityChange;
+    readonly onDidVisibilityChange: Event<boolean>;
     get width(): number;
@@ -23,0 +25,0 @@ get height(): number;

dist/esm/gridview/branchNode.js

@@ -23,6 +23,10 @@ /*---------------------------------------------------------------------------------------------
             ? 0
-            : Math.max(...this.children.map((c) => c.minimumOrthogonalSize));
+            : Math.max(...this.children.map((c, index) => this.splitview.isViewVisible(index)
+                ? c.minimumOrthogonalSize
+                : 0));
     }
     get maximumSize() {
-        return Math.min(...this.children.map((c) => c.maximumOrthogonalSize));
+        return Math.min(...this.children.map((c, index) => this.splitview.isViewVisible(index)
+            ? c.maximumOrthogonalSize
+            : Number.POSITIVE_INFINITY));
     }
@@ -85,2 +89,4 @@ get minimumOrthogonalSize() {
         this.onDidChange = this._onDidChange.event;
+        this._onDidVisibilityChange = new Emitter();
+        this.onDidVisibilityChange = this._onDidVisibilityChange.event;
         this._orthogonalSize = orthogonalSize;
@@ -120,3 +126,3 @@ this._size = size;
         }
-        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
+        this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire({});
@@ -144,3 +150,11 @@ }));
         }
+        const wereAllChildrenHidden = this.splitview.contentSize === 0;
         this.splitview.setViewVisible(index, visible);
+        const areAllChildrenHidden = this.splitview.contentSize === 0;
+        // If all children are hidden then the parent should hide the entire splitview
+        // If the entire splitview is hidden then the parent should show the splitview when a child is shown
+        if ((visible && wereAllChildrenHidden) ||
+            (!visible && areAllChildrenHidden)) {
+            this._onDidVisibilityChange.fire(visible);
+        }
     }
@@ -209,3 +223,3 @@ moveChild(from, to) {
         this._childrenDisposable.dispose();
-        this._childrenDisposable = Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+        this._childrenDisposable = new CompositeDisposable(Event.any(...this.children.map((c) => c.onDidChange))((e) => {
             /**
@@ -216,3 +230,10 @@ * indicate a change has occured to allows any re-rendering but don't bubble
             this._onDidChange.fire({ size: e.orthogonalSize });
-        });
+        }), ...this.children.map((c, i) => {
+            if (c instanceof BranchNode) {
+                return c.onDidVisibilityChange((visible) => {
+                    this.setChildVisible(i, visible);
+                });
+            }
+            return Disposable.NONE;
+        }));
     }
@@ -219,0 +240,0 @@ dispose() {

dist/esm/gridview/gridview.d.ts

@@ -88,5 +88,6 @@ import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
     readonly styles: ISplitviewStyles | undefined;
+    readonly element: HTMLElement;
     private _root;
-    readonly element: HTMLElement;
-    private disposable;
+    private _maximizedNode;
+    private readonly disposable;
     private readonly _onDidChange;
@@ -97,2 +98,4 @@ readonly onDidChange: Event<{
     }>;
+    private readonly _onDidMaxmizedNodeChange;
+    readonly onDidMaxmizedNodeChange: Event<void>;
     get length(): number;
@@ -107,2 +110,6 @@ get orientation(): Orientation;
     get maximumHeight(): number;
+    maximizedView(): IGridView | undefined;
+    hasMaximizedView(): boolean;
+    maximizeView(view: IGridView): void;
+    exitMaximizedView(): void;
     serialize(): SerializedGridview<any>;
@@ -109,0 +116,0 @@ dispose(): void;

dist/esm/gridview/gridview.js

@@ -158,2 +158,57 @@ /*---------------------------------------------------------------------------------------------
     }
+    maximizedView() {
+        var _a;
+        return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.view;
+    }
+    hasMaximizedView() {
+        return this._maximizedNode !== undefined;
+    }
+    maximizeView(view) {
+        const location = getGridLocation(view.element);
+        const [_, node] = this.getNode(location);
+        if (!(node instanceof LeafNode)) {
+            return;
+        }
+        if (this._maximizedNode === node) {
+            return;
+        }
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
+        function hideAllViewsBut(parent, exclude) {
+            for (let i = 0; i < parent.children.length; i++) {
+                const child = parent.children[i];
+                if (child instanceof LeafNode) {
+                    if (child !== exclude) {
+                        parent.setChildVisible(i, false);
+                    }
+                }
+                else {
+                    hideAllViewsBut(child, exclude);
+                }
+            }
+        }
+        hideAllViewsBut(this.root, node);
+        this._maximizedNode = node;
+        this._onDidMaxmizedNodeChange.fire();
+    }
+    exitMaximizedView() {
+        if (!this._maximizedNode) {
+            return;
+        }
+        function showViewsInReverseOrder(parent) {
+            for (let index = parent.children.length - 1; index >= 0; index--) {
+                const child = parent.children[index];
+                if (child instanceof LeafNode) {
+                    parent.setChildVisible(index, true);
+                }
+                else {
+                    showViewsInReverseOrder(child);
+                }
+            }
+        }
+        showViewsInReverseOrder(this.root);
+        this._maximizedNode = undefined;
+        this._onDidMaxmizedNodeChange.fire();
+    }
     serialize() {
@@ -171,2 +226,3 @@ const root = serializeBranchNode(this.getView(), this.orientation);
         this._onDidChange.dispose();
+        this._onDidMaxmizedNodeChange.dispose();
         this.root.dispose();
@@ -301,5 +357,8 @@ this.element.remove();
         this.styles = styles;
+        this._maximizedNode = undefined;
         this.disposable = new MutableDisposable();
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
+        this._onDidMaxmizedNodeChange = new Emitter();
+        this.onDidMaxmizedNodeChange = this._onDidMaxmizedNodeChange.event;
         this.element = document.createElement('div');
@@ -318,2 +377,5 @@ this.element.className = 'grid-view';
     setViewVisible(location, visible) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         const [rest, index] = tail(location);
@@ -327,2 +389,5 @@ const [, parent] = this.getNode(rest);
     moveView(parentLocation, from, to) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         const [, parent] = this.getNode(parentLocation);
@@ -335,2 +400,5 @@ if (!(parent instanceof BranchNode)) {
     addView(view, size, location) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         const [rest, index] = tail(location);
@@ -368,2 +436,5 @@ const [pathToParent, parent] = this.getNode(rest);
     removeView(location, sizing) {
+        if (this.hasMaximizedView()) {
+            this.exitMaximizedView();
+        }
         const [rest, index] = tail(location);
@@ -370,0 +441,0 @@ const [pathToParent, parent] = this.getNode(rest);

dist/esm/gridview/leafNode.js

@@ -91,3 +91,2 @@ /*---------------------------------------------------------------------------------------------
             this.view.setVisible(visible);
-            this._onDidChange.fire({});
         }
@@ -94,0 +93,0 @@ }

dist/esm/index.d.ts

@@ -35,3 +35,3 @@ export * from './dnd/dataTransfer';
 export * from './dockview/types';
-export { DockviewPanelRenderer } from './dockview/components/greadyRenderContainer';
+export { DockviewPanelRenderer } from './overlayRenderContainer';
 export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget';
@@ -38,0 +38,0 @@ export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';

dist/esm/lifecycle.d.ts

@@ -10,2 +10,3 @@ export interface IDisposable {
     const NONE: IDisposable;
+    function from(func: () => void): IDisposable;
 }
@@ -12,0 +13,0 @@ export declare class CompositeDisposable {

dist/esm/lifecycle.js

@@ -8,2 +8,10 @@ export var Disposable;
     };
+    function from(func) {
+        return {
+            dispose: () => {
+                func();
+            },
+        };
+    }
+    Disposable.from = from;
 })(Disposable || (Disposable = {}));
@@ -10,0 +18,0 @@ export class CompositeDisposable {

dist/esm/splitview/splitview.d.ts

@@ -23,4 +23,4 @@ import { Event } from '../events';
 export declare enum LayoutPriority {
-    Low = "low",
-    High = "high",
+    Low = "low",// view is offered space last
+    High = "high",// view is offered space first
     Normal = "normal"
@@ -78,3 +78,3 @@ }
     private _orthogonalSize;
-    private contentSize;
+    private _contentSize;
     private _proportions;
@@ -90,2 +90,3 @@ private proportionalLayout;
     readonly onDidRemoveView: Event<IView>;
+    get contentSize(): number;
     get size(): number;
@@ -96,3 +97,3 @@ set size(value: number);
     get length(): number;
-    get proportions(): number[] | undefined;
+    get proportions(): (number | undefined)[] | undefined;
     get orientation(): Orientation;
@@ -99,0 +100,0 @@ set orientation(value: Orientation);

dist/esm/splitview/splitview.js

@@ -41,2 +41,5 @@ /*---------------------------------------------------------------------------------------------
 export class Splitview {
+    get contentSize() {
+        return this._contentSize;
+    }
     get size() {
@@ -107,3 +110,3 @@ return this._size;
         this._orthogonalSize = 0;
-        this.contentSize = 0;
+        this._contentSize = 0;
         this._proportions = undefined;
@@ -227,3 +230,3 @@ this._startSnappingEnabled = true;
             // Initialize content size and proportions for first layout
-            this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+            this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
             this.saveProportions();
@@ -502,3 +505,3 @@ }
     layout(size, orthogonalSize) {
-        const previousSize = Math.max(this.size, this.contentSize);
+        const previousSize = Math.max(this.size, this._contentSize);
         this.size = size;
@@ -513,6 +516,20 @@ this.orthogonalSize = orthogonalSize;
         else {
+            let total = 0;
             for (let i = 0; i < this.viewItems.length; i++) {
                 const item = this.viewItems[i];
-                item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
+                const proportion = this.proportions[i];
+                if (typeof proportion === 'number') {
+                    total += proportion;
+                }
+                else {
+                    size -= item.size;
+                }
             }
+            for (let i = 0; i < this.viewItems.length; i++) {
+                const item = this.viewItems[i];
+                const proportion = this.proportions[i];
+                if (typeof proportion === 'number' && total > 0) {
+                    item.size = clamp(Math.round((proportion * size) / total), item.minimumSize, item.maximumSize);
+                }
+            }
         }
@@ -553,8 +570,8 @@ this.distributeEmptySpace();
     saveProportions() {
-        if (this.proportionalLayout && this.contentSize > 0) {
-            this._proportions = this.viewItems.map((i) => i.size / this.contentSize);
+        if (this.proportionalLayout && this._contentSize > 0) {
+            this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
         }
     }
     layoutViews() {
-        this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+        this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
         let sum = 0;
@@ -653,3 +670,3 @@ const x = [];
                     collapsesDown[index] &&
-                    (position < this.contentSize || this.endSnappingEnabled)) {
+                    (position < this._contentSize || this.endSnappingEnabled)) {
                     this.updateSash(sash, SashState.MAXIMUM);
@@ -656,0 +673,0 @@ }

dist/esm/types.d.ts

 export type FunctionOrValue<T> = (() => T) | T;
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export interface Box {
+    left: number;
+    top: number;
+    height: number;
+    width: number;
+}
 //# sourceMappingURL=types.d.ts.map

package.json

 {
     "name": "dockview-core",
-    "version": "0.0.0-experimental-a2a4e68-20231225",
+    "version": "0.0.0-experimental-b78a7a6-20240108",
     "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

7664391

increased by5.74%

Number of package files

545

increased by6.24%

Lines of code

82561

increased by6.03%

No dependency changes