dockview-react 1.17.2 → 2.1.0

package/dist/dockview-react.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 1.17.2
+ * @version 2.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -324,31 +324,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-        const Component = typeof componentName === 'string'
-            ? components[componentName]
-            : undefined;
-        const FrameworkComponent = typeof componentName === 'string'
-            ? frameworkComponents[componentName]
-            : undefined;
-        if (Component && FrameworkComponent) {
-            throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-        }
-        if (FrameworkComponent) {
-            if (!createFrameworkComponent) {
-                throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-            }
-            return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-        }
-        if (!Component) {
-            if (fallback) {
-                return fallback();
-            }
-            throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-        }
-        return new Component(id, componentName);
-    }
-
     function watchElementResize(element, cb) {
         const observer = new ResizeObserver((entires) => {
             /**
@@ -817,10 +792,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const tmp = this.size;
             this.size = this.orthogonalSize;
             this.orthogonalSize = tmp;
-            removeClasses(this.element, 'horizontal', 'vertical');
+            removeClasses(this.element, 'dv-horizontal', 'dv-vertical');
             this.element.classList.add(this.orientation == exports.Orientation.HORIZONTAL
-                ? 'horizontal'
-                : 'vertical');
+                ? 'dv-horizontal'
+                : 'dv-vertical');
         }
         get minimumSize() {
             return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
@@ -998,11 +973,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         style(styles) {
             if ((styles === null || styles === void 0 ? void 0 : styles.separatorBorder) === 'transparent') {
-                removeClasses(this.element, 'separator-border');
+                removeClasses(this.element, 'dv-separator-border');
                 this.element.style.removeProperty('--dv-separator-border');
             }
             else {
-                addClasses(this.element, 'separator-border');
+                addClasses(this.element, 'dv-separator-border');
                 if (styles === null || styles === void 0 ? void 0 : styles.separatorBorder) {
                     this.element.style.setProperty('--dv-separator-border', styles.separatorBorder);
                 }
@@ -1072,7 +1047,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
             const container = document.createElement('div');
-            container.className = 'view';
+            container.className = 'dv-view';
             container.appendChild(view.element);
             let viewSize;
             if (typeof size === 'number') {
@@ -1104,7 +1079,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.viewItems.length > 1) {
                 //add sash
                 const sash = document.createElement('div');
-                sash.className = 'sash';
+                sash.className = 'dv-sash';
                 const onPointerStart = (event) => {
                     for (const item of this.viewItems) {
                         item.enabled = false;
@@ -1363,7 +1338,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 const offset = i === 0 || visiblePanelsBeforeThisView === 0
                     ? 0
                     : viewLeftOffsets[i - 1] +
-                        (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+                        (visiblePanelsBeforeThisView / sashCount) *
+                            marginReducedSize;
                 if (i < this.viewItems.length - 1) {
                     // calculate sash position
                     const newSize = view.visible
@@ -1474,27 +1450,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         updateSash(sash, state) {
-            toggleClass(sash.container, 'disabled', state === exports.SashState.DISABLED);
-            toggleClass(sash.container, 'enabled', state === exports.SashState.ENABLED);
-            toggleClass(sash.container, 'maximum', state === exports.SashState.MAXIMUM);
-            toggleClass(sash.container, 'minimum', state === exports.SashState.MINIMUM);
+            toggleClass(sash.container, 'dv-disabled', state === exports.SashState.DISABLED);
+            toggleClass(sash.container, 'dv-enabled', state === exports.SashState.ENABLED);
+            toggleClass(sash.container, 'dv-maximum', state === exports.SashState.MAXIMUM);
+            toggleClass(sash.container, 'dv-minimum', state === exports.SashState.MINIMUM);
         }
         createViewContainer() {
             const element = document.createElement('div');
-            element.className = 'view-container';
+            element.className = 'dv-view-container';
             return element;
         }
         createSashContainer() {
             const element = document.createElement('div');
-            element.className = 'sash-container';
+            element.className = 'dv-sash-container';
             return element;
         }
         createContainer() {
             const element = document.createElement('div');
             const orientationClassname = this._orientation === exports.Orientation.HORIZONTAL
-                ? 'horizontal'
-                : 'vertical';
-            element.className = `split-view-container ${orientationClassname}`;
+                ? 'dv-horizontal'
+                : 'dv-vertical';
+            element.className = `dv-split-view-container ${orientationClassname}`;
             return element;
         }
         dispose() {
@@ -1545,7 +1521,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidChange = this._onDidChange.event;
             this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
             this.element = document.createElement('div');
-            this.element.className = 'pane-container';
+            this.element.className = 'dv-pane-container';
             container.appendChild(this.element);
             this.splitview = new Splitview(this.element, {
                 orientation: this._orientation,
@@ -1637,10 +1613,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 clearTimeout(this.animationTimer);
                 this.animationTimer = undefined;
             }
-            addClasses(this.element, 'animated');
+            addClasses(this.element, 'dv-animated');
             this.animationTimer = setTimeout(() => {
                 this.animationTimer = undefined;
-                removeClasses(this.element, 'animated');
+                removeClasses(this.element, 'dv-animated');
             }, 200);
         }
         dispose() {
@@ -1865,7 +1841,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._orthogonalSize = orthogonalSize;
             this._size = size;
             this.element = document.createElement('div');
-            this.element.className = 'branch-node';
+            this.element.className = 'dv-branch-node';
             if (!childDescriptors) {
                 this.splitview = new Splitview(this.element, {
                     orientation: this.orientation,
@@ -2076,7 +2052,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         if (!parentElement) {
             throw new Error('Invalid grid element');
         }
-        if (/\bgrid-view\b/.test(parentElement.className)) {
+        if (/\bdv-grid-view\b/.test(parentElement.className)) {
             return [];
         }
         const index = indexInParent(parentElement);
@@ -2213,6 +2189,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.hasMaximizedView()) {
                 this.exitMaximizedView();
             }
+            serializeBranchNode(this.getView(), this.orientation);
             const hiddenOnMaximize = [];
             function hideAllViewsBut(parent, exclude) {
                 for (let i = 0; i < parent.children.length; i++) {
@@ -2234,7 +2211,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             hideAllViewsBut(this.root, node);
             this._maximizedNode = { leaf: node, hiddenOnMaximize };
-            this._onDidMaximizedNodeChange.fire();
+            this._onDidMaximizedNodeChange.fire({
+                view: node.view,
+                isMaximized: true,
+            });
         }
         exitMaximizedView() {
             if (!this._maximizedNode) {
@@ -2255,24 +2235,51 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             showViewsInReverseOrder(this.root);
+            const tmp = this._maximizedNode.leaf;
             this._maximizedNode = undefined;
-            this._onDidMaximizedNodeChange.fire();
+            this._onDidMaximizedNodeChange.fire({
+                view: tmp.view,
+                isMaximized: false,
+            });
         }
         serialize() {
+            const maximizedView = this.maximizedView();
+            let maxmizedViewLocation;
+            if (maximizedView) {
+                /**
+                 * The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
+                 * which is represented as a branch of indices
+                 */
+                maxmizedViewLocation = getGridLocation(maximizedView.element);
+            }
             if (this.hasMaximizedView()) {
                 /**
-                 * do not persist maximized view state
-                 * firstly exit any maximized views to ensure the correct dimensions are persisted
+                 * the saved layout cannot be in its maxmized state otherwise all of the underlying
+                 * view dimensions will be wrong
+                 *
+                 * To counteract this we temporaily remove the maximized view to compute the serialized output
+                 * of the grid before adding back the maxmized view as to not alter the layout from the users
+                 * perspective when `.toJSON()` is called
                  */
                 this.exitMaximizedView();
             }
             const root = serializeBranchNode(this.getView(), this.orientation);
-            return {
+            const resullt = {
                 root,
                 width: this.width,
                 height: this.height,
                 orientation: this.orientation,
             };
+            if (maxmizedViewLocation) {
+                resullt.maximizedNode = {
+                    location: maxmizedViewLocation,
+                };
+            }
+            if (maximizedView) {
+                // replace any maximzied view that was removed for serialization purposes
+                this.maximizeView(maximizedView);
+            }
+            return resullt;
         }
         dispose() {
             this.disposable.dispose();
@@ -2291,6 +2298,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const orientation = json.orientation;
             const height = orientation === exports.Orientation.VERTICAL ? json.height : json.width;
             this._deserialize(json.root, orientation, deserializer, height);
+            /**
+             * The deserialied layout must be positioned through this.layout(...)
+             * before any maximizedNode can be positioned
+             */
+            this.layout(json.width, json.height);
+            if (json.maximizedNode) {
+                const location = json.maximizedNode.location;
+                const [_, node] = this.getNode(location);
+                if (!(node instanceof LeafNode)) {
+                    return;
+                }
+                this.maximizeView(node.view);
+            }
         }
         _deserialize(root, orientation, deserializer, orthogonalSize) {
             this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
@@ -2424,7 +2444,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidMaximizedNodeChange = new Emitter();
             this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
             this.element = document.createElement('div');
-            this.element.className = 'grid-view';
+            this.element.className = 'dv-grid-view';
             this._locked = locked !== null && locked !== void 0 ? locked : false;
             this._margin = margin !== null && margin !== void 0 ? margin : 0;
             this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
@@ -2715,6 +2735,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidRemove = this._onDidRemove.event;
             this._onDidAdd = new Emitter();
             this.onDidAdd = this._onDidAdd.event;
+            this._onDidMaximizedChange = new Emitter();
+            this.onDidMaximizedChange = this._onDidMaximizedChange.event;
             this._onDidActiveChange = new Emitter();
             this.onDidActiveChange = this._onDidActiveChange.event;
             this._bufferOnDidLayoutChange = new AsapEvent();
@@ -2730,7 +2752,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.gridview.locked = !!options.locked;
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
-            this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+            this.addDisposables(this.gridview.onDidMaximizedNodeChange((event) => {
+                this._onDidMaximizedChange.fire({
+                    panel: event.view,
+                    isMaximized: event.isMaximized,
+                });
+            }), this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
                 this.layout(this.width, this.height, true);
             }), exports.DockviewDisposable.from(() => {
                 var _a;
@@ -2780,9 +2807,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         hasMaximizedGroup() {
             return this.gridview.hasMaximizedView();
         }
-        get onDidMaximizedGroupChange() {
-            return this.gridview.onDidMaximizedNodeChange;
-        }
         doAddGroup(group, location = [0], size) {
             this.gridview.addView(group, size !== null && size !== void 0 ? size : exports.Sizing.Distribute, location);
             this._onDidAdd.fire(group);
@@ -3646,7 +3670,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                          * dnd logic. You can see the code at
                          * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
                          */
-                        event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                        event.dataTransfer.setData('text/plain', '');
                     }
                 }
             }), addDisposableListener(this.el, 'dragend', () => {
@@ -3820,12 +3844,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.markAsUsed(e);
                     if (!this.targetElement) {
                         this.targetElement = document.createElement('div');
-                        this.targetElement.className = 'drop-target-dropzone';
+                        this.targetElement.className = 'dv-drop-target-dropzone';
                         this.overlayElement = document.createElement('div');
-                        this.overlayElement.className = 'drop-target-selection';
+                        this.overlayElement.className = 'dv-drop-target-selection';
                         this._state = 'center';
                         this.targetElement.appendChild(this.overlayElement);
-                        this.element.classList.add('drop-target');
+                        this.element.classList.add('dv-drop-target');
                         this.element.append(this.targetElement);
                     }
                     this.toggleClasses(quadrant, width, height);
@@ -3963,7 +3987,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.element.removeChild(this.targetElement);
                 this.targetElement = undefined;
                 this.overlayElement = undefined;
-                this.element.classList.remove('drop-target');
+                this.element.classList.remove('dv-drop-target');
             }
         }
     }
@@ -4300,7 +4324,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._headerVisible = isHeaderVisible;
             this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
             this._orientation = orientation;
-            this.element.classList.add('pane');
+            this.element.classList.add('dv-pane');
             this.addDisposables(this.api.onWillVisibilityChange((event) => {
                 const { isVisible } = event;
                 const { accessor } = this._params;
@@ -4397,14 +4421,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         renderOnce() {
             this.header = document.createElement('div');
             this.header.tabIndex = 0;
-            this.header.className = 'pane-header';
+            this.header.className = 'dv-pane-header';
             this.header.style.height = `${this.headerSize}px`;
             this.header.style.lineHeight = `${this.headerSize}px`;
             this.header.style.minHeight = `${this.headerSize}px`;
             this.header.style.maxHeight = `${this.headerSize}px`;
             this.element.appendChild(this.header);
             this.body = document.createElement('div');
-            this.body.className = 'pane-body';
+            this.body.className = 'dv-pane-body';
             this.element.appendChild(this.body);
         }
         // TODO slightly hacky by-pass of the component to create a body and header component
@@ -4525,7 +4549,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidBlur = new Emitter();
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
-            this._element.className = 'content-container';
+            this._element.className = 'dv-content-container';
             this._element.tabIndex = -1;
             this.addDisposables(this._onDidFocus, this._onDidBlur);
             this.dropTarget = new Droptarget(this.element, {
@@ -4598,6 +4622,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         referenceContainer: this,
                     });
                     break;
+                default:
+                    throw new Error(`dockview: invalid renderer type '${panel.api.renderer}'`);
             }
             if (doRender) {
                 const focusTracker = trackFocus(container);
@@ -4664,10 +4690,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDragStart = new Emitter();
             this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
-            this._element.className = 'tab';
+            this._element.className = 'dv-tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
-            toggleClass(this.element, 'inactive-tab', true);
+            toggleClass(this.element, 'dv-inactive-tab', true);
             const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
             this.dropTarget = new Droptarget(this._element, {
                 acceptedTargetZones: ['center'],
@@ -4700,8 +4726,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), this.dropTarget);
         }
         setActive(isActive) {
-            toggleClass(this.element, 'active-tab', isActive);
-            toggleClass(this.element, 'inactive-tab', !isActive);
+            toggleClass(this.element, 'dv-active-tab', isActive);
+            toggleClass(this.element, 'dv-inactive-tab', !isActive);
         }
         setContent(part) {
             if (this.content) {
@@ -4789,8 +4815,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDragStart = new Emitter();
             this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
-            this._element.className = 'void-container';
-            this._element.tabIndex = 0;
+            this._element.className = 'dv-void-container';
             this._element.draggable = true;
             this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
                 this.accessor.doSetGroupActive(this.group);
@@ -4909,16 +4934,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onWillShowOverlay = new Emitter();
             this.onWillShowOverlay = this._onWillShowOverlay.event;
             this._element = document.createElement('div');
-            this._element.className = 'tabs-and-actions-container';
+            this._element.className = 'dv-tabs-and-actions-container';
             toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
             this.rightActionsContainer = document.createElement('div');
-            this.rightActionsContainer.className = 'right-actions-container';
+            this.rightActionsContainer.className = 'dv-right-actions-container';
             this.leftActionsContainer = document.createElement('div');
-            this.leftActionsContainer.className = 'left-actions-container';
+            this.leftActionsContainer.className = 'dv-left-actions-container';
             this.preActionsContainer = document.createElement('div');
-            this.preActionsContainer.className = 'pre-actions-container';
+            this.preActionsContainer.className = 'dv-pre-actions-container';
             this.tabContainer = document.createElement('div');
-            this.tabContainer.className = 'tabs-container';
+            this.tabContainer.className = 'dv-tabs-container';
             this.voidContainer = new VoidContainer(this.accessor, this.group);
             this._element.appendChild(this.preActionsContainer);
             this._element.appendChild(this.tabContainer);
@@ -5007,14 +5032,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
         }
         openPanel(panel, index = this.tabs.length) {
-            var _a;
             if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
                 return;
             }
             const tab = new Tab(panel, this.accessor, this.group);
-            if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
-                throw new Error('invalid header component');
-            }
             tab.setContent(panel.view.tab);
             const disposable = new CompositeDisposable(tab.onDragStart((event) => {
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
@@ -5108,6 +5129,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             disableDnd: undefined,
             gap: undefined,
             className: undefined,
+            noPanelsOverlay: undefined,
         };
         return Object.keys(properties);
     })();
@@ -5204,7 +5226,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
     class DockviewGroupPanelModel extends CompositeDisposable {
         get element() {
-            throw new Error('not supported');
+            throw new Error('dockview: not supported');
         }
         get activePanel() {
             return this._activePanel;
@@ -5214,7 +5236,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         set locked(value) {
             this._locked = value;
-            toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
+            toggleClass(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
         }
         get isActive() {
             return this._isGroupActive;
@@ -5285,6 +5307,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._locked = false;
             this._location = { type: 'grid' };
             this.mostRecentlyUsed = [];
+            this._overwriteRenderContainer = null;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
             this._width = 0;
@@ -5315,8 +5338,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this._onUnhandledDragOverEvent = new Emitter();
             this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
-            this._overwriteRenderContainer = null;
-            toggleClass(this.container, 'groupview', true);
+            toggleClass(this.container, 'dv-groupview', true);
             this._api = new DockviewApi(this.accessor);
             this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
             this.contentContainer = new ContentContainer(this.accessor, this);
@@ -5548,7 +5570,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.doClose(panel);
         }
         doClose(panel) {
-            this.accessor.removePanel(panel);
+            const isLast = this.panels.length === 1 && this.accessor.groups.length === 1;
+            this.accessor.removePanel(panel, isLast && this.accessor.options.noPanelsOverlay === 'emptyGroup'
+                ? { removeEmptyGroup: false }
+                : undefined);
         }
         isPanelActive(panel) {
             return this._activePanel === panel;
@@ -5561,8 +5586,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 return;
             }
             this._isGroupActive = isGroupActive;
-            toggleClass(this.container, 'active-group', isGroupActive);
-            toggleClass(this.container, 'inactive-group', !isGroupActive);
+            toggleClass(this.container, 'dv-active-group', isGroupActive);
+            toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
             this.tabsContainer.setActive(this.isActive);
             if (!this._activePanel && this.panels.length > 0) {
                 this.doSetActivePanel(this.panels[0]);
@@ -5654,7 +5679,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateContainer() {
             var _a, _b;
-            toggleClass(this.container, 'empty', this.isEmpty);
             this.panels.forEach((panel) => panel.runEvents());
             if (this.isEmpty && !this.watermark) {
                 const watermark = this.accessor.createWatermarkComponent();
@@ -5668,14 +5692,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.accessor.doSetGroupActive(this.groupPanel);
                     }
                 });
-                this.tabsContainer.hide();
                 this.contentContainer.element.appendChild(this.watermark.element);
             }
             if (!this.isEmpty && this.watermark) {
                 this.watermark.element.remove();
                 (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
                 this.watermark = undefined;
-                this.tabsContainer.show();
             }
         }
         canDisplayOverlay(event, position, target) {
@@ -5795,6 +5817,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._snap;
         }
         get minimumWidth() {
+            /**
+             * defer to protected function to allow subclasses to override easily.
+             * see https://github.com/microsoft/TypeScript/issues/338
+             */
+            return this.__minimumWidth();
+        }
+        get minimumHeight() {
+            /**
+             * defer to protected function to allow subclasses to override easily.
+             * see https://github.com/microsoft/TypeScript/issues/338
+             */
+            return this.__minimumHeight();
+        }
+        get maximumHeight() {
+            /**
+             * defer to protected function to allow subclasses to override easily.
+             * see https://github.com/microsoft/TypeScript/issues/338
+             */
+            return this.__maximumHeight();
+        }
+        get maximumWidth() {
+            /**
+             * defer to protected function to allow subclasses to override easily.
+             * see https://github.com/microsoft/TypeScript/issues/338
+             */
+            return this.__maximumWidth();
+        }
+        __minimumWidth() {
             const width = typeof this._minimumWidth === 'function'
                 ? this._minimumWidth()
                 : this._minimumWidth;
@@ -5804,7 +5854,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return width;
         }
-        get minimumHeight() {
+        __maximumWidth() {
+            const width = typeof this._maximumWidth === 'function'
+                ? this._maximumWidth()
+                : this._maximumWidth;
+            if (width !== this._evaluatedMaximumWidth) {
+                this._evaluatedMaximumWidth = width;
+                this.updateConstraints();
+            }
+            return width;
+        }
+        __minimumHeight() {
             const height = typeof this._minimumHeight === 'function'
                 ? this._minimumHeight()
                 : this._minimumHeight;
@@ -5814,7 +5874,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return height;
         }
-        get maximumHeight() {
+        __maximumHeight() {
             const height = typeof this._maximumHeight === 'function'
                 ? this._maximumHeight()
                 : this._maximumHeight;
@@ -5824,16 +5884,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return height;
         }
-        get maximumWidth() {
-            const width = typeof this._maximumWidth === 'function'
-                ? this._maximumWidth()
-                : this._maximumWidth;
-            if (width !== this._evaluatedMaximumWidth) {
-                this._evaluatedMaximumWidth = width;
-                this.updateConstraints();
-            }
-            return width;
-        }
         get isActive() {
             return this.api.isActive;
         }
@@ -5984,6 +6034,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     position: options.group
                         ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
                         : 'center',
+                    index: options.index,
                 },
             });
         }
@@ -6035,30 +6086,34 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get minimumWidth() {
             var _a;
             const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
-            return typeof activePanelMinimumWidth === 'number'
-                ? activePanelMinimumWidth
-                : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+            if (typeof activePanelMinimumWidth === 'number') {
+                return activePanelMinimumWidth;
+            }
+            return super.__minimumWidth();
         }
         get minimumHeight() {
             var _a;
             const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
-            return typeof activePanelMinimumHeight === 'number'
-                ? activePanelMinimumHeight
-                : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+            if (typeof activePanelMinimumHeight === 'number') {
+                return activePanelMinimumHeight;
+            }
+            return super.__minimumHeight();
         }
         get maximumWidth() {
             var _a;
             const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
-            return typeof activePanelMaximumWidth === 'number'
-                ? activePanelMaximumWidth
-                : Number.MAX_SAFE_INTEGER;
+            if (typeof activePanelMaximumWidth === 'number') {
+                return activePanelMaximumWidth;
+            }
+            return super.__maximumWidth();
         }
         get maximumHeight() {
             var _a;
             const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
-            return typeof activePanelMaximumHeight === 'number'
-                ? activePanelMaximumHeight
-                : Number.MAX_SAFE_INTEGER;
+            if (typeof activePanelMaximumHeight === 'number') {
+                return activePanelMaximumHeight;
+            }
+            return super.__maximumHeight();
         }
         get panels() {
             return this._model.panels;
@@ -6172,12 +6227,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this.group.api.getWindow();
         }
         moveTo(options) {
-            var _a;
+            var _a, _b;
             this.accessor.moveGroupOrPanel({
                 from: { groupId: this._group.id, panelId: this.panel.id },
                 to: {
-                    group: options.group,
-                    position: (_a = options.position) !== null && _a !== void 0 ? _a : 'center',
+                    group: (_a = options.group) !== null && _a !== void 0 ? _a : this._group,
+                    position: options.group
+                        ? (_b = options.position) !== null && _b !== void 0 ? _b : 'center'
+                        : 'center',
                     index: options.index,
                 },
             });
@@ -6396,7 +6453,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         svg.setAttributeNS(null, 'viewBox', params.viewbox);
         svg.setAttributeNS(null, 'aria-hidden', 'false');
         svg.setAttributeNS(null, 'focusable', 'false');
-        svg.classList.add('dockview-svg');
+        svg.classList.add('dv-svg');
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.setAttributeNS(null, 'd', params.path);
         svg.appendChild(path);
@@ -6567,39 +6624,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor() {
             super();
             this._element = document.createElement('div');
-            this._element.className = 'watermark';
-            const title = document.createElement('div');
-            title.className = 'watermark-title';
-            const emptySpace = document.createElement('span');
-            emptySpace.style.flexGrow = '1';
-            const content = document.createElement('div');
-            content.className = 'watermark-content';
-            this._element.appendChild(title);
-            this._element.appendChild(content);
-            const actionsContainer = document.createElement('div');
-            actionsContainer.className = 'actions-container';
-            const closeAnchor = document.createElement('div');
-            closeAnchor.className = 'close-action';
-            closeAnchor.appendChild(createCloseButton());
-            actionsContainer.appendChild(closeAnchor);
-            title.appendChild(emptySpace);
-            title.appendChild(actionsContainer);
-            this.addDisposables(addDisposableListener(closeAnchor, 'click', (event) => {
-                var _a;
-                event.preventDefault();
-                if (this._group) {
-                    (_a = this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(this._group);
-                }
-            }));
+            this._element.className = 'dv-watermark';
         }
         init(_params) {
-            this._api = _params.containerApi;
-            this._group = _params.group;
-            this.render();
-        }
-        render() {
-            const isOneGroup = !!(this._api && this._api.size <= 1);
-            toggleClass(this.element, 'has-actions', isOneGroup);
+            // noop
         }
     }
 
@@ -6636,6 +6664,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get element() {
             return this._element;
         }
+        get isVisible() {
+            return this._isVisible;
+        }
         constructor(options) {
             super();
             this.options = options;
@@ -6646,6 +6677,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidChangeEnd = this._onDidChangeEnd.event;
             this.addDisposables(this._onDidChange, this._onDidChangeEnd);
             this._element.className = 'dv-resize-container';
+            this._isVisible = true;
             this.setupResize('top');
             this.setupResize('bottom');
             this.setupResize('left');
@@ -6660,6 +6692,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
             arialLevelTracker.push(this._element);
         }
+        setVisible(isVisible) {
+            if (isVisible === this.isVisible) {
+                return;
+            }
+            this._isVisible = isVisible;
+            toggleClass(this.element, 'dv-hidden', !this.isVisible);
+        }
         bringToFront() {
             arialLevelTracker.push(this._element);
         }
@@ -7210,7 +7249,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     window: this._window.value,
                 });
                 this._window.disposable.dispose();
-                this._window.value.close();
                 this._window = null;
                 this._onDidClose.fire();
             }
@@ -7242,7 +7280,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 const disposable = new CompositeDisposable();
                 this._window = { value: externalWindow, disposable };
-                disposable.addDisposables(addDisposableWindowListener(window, 'beforeunload', () => {
+                disposable.addDisposables(exports.DockviewDisposable.from(() => {
+                    externalWindow.close();
+                }), addDisposableWindowListener(window, 'beforeunload', () => {
                     /**
                      * before the main window closes we should close this popup too
                      * to be good citizens
@@ -7259,7 +7299,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     id: this.target,
                     window: externalWindow,
                 });
-                return new Promise((resolve) => {
+                return new Promise((resolve, reject) => {
                     externalWindow.addEventListener('unload', (e) => {
                         // if page fails to load before unloading
                         // this.close();
@@ -7268,21 +7308,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         /**
                          * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
                          */
-                        const externalDocument = externalWindow.document;
-                        externalDocument.title = document.title;
-                        externalDocument.body.appendChild(container);
-                        addStyles(externalDocument, window.document.styleSheets);
-                        /**
-                         * beforeunload must be registered after load for reasons I could not determine
-                         * otherwise the beforeunload event will not fire when the window is closed
-                         */
-                        addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                        try {
+                            const externalDocument = externalWindow.document;
+                            externalDocument.title = document.title;
+                            externalDocument.body.appendChild(container);
+                            addStyles(externalDocument, window.document.styleSheets);
                             /**
-                             * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                             * beforeunload must be registered after load for reasons I could not determine
+                             * otherwise the beforeunload event will not fire when the window is closed
                              */
-                            this.close();
-                        });
-                        resolve(container);
+                            addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                                /**
+                                 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+                                 */
+                                this.close();
+                            });
+                            resolve(container);
+                        }
+                        catch (err) {
+                            // only except this is the DOM isn't setup. e.g. in a in correctly configured test
+                            reject(err);
+                        }
                     });
                 });
             });
@@ -7389,6 +7435,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this._onDidMovePanel = new Emitter();
             this.onDidMovePanel = this._onDidMovePanel.event;
+            this._onDidMaximizedGroupChange = new Emitter();
+            this.onDidMaximizedGroupChange = this._onDidMaximizedGroupChange.event;
             this._floatingGroups = [];
             this._popoutGroups = [];
             this._onDidRemoveGroup = new Emitter();
@@ -7415,6 +7463,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (!this._moving) {
                     this._onDidActiveGroupChange.fire(event);
                 }
+            }), this.onDidMaximizedChange((event) => {
+                this._onDidMaximizedGroupChange.fire({
+                    group: event.panel,
+                    isMaximized: event.isMaximized,
+                });
             }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
@@ -7513,8 +7566,28 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._api = new DockviewApi(this);
             this.updateWatermark();
         }
+        setVisible(panel, visible) {
+            switch (panel.api.location.type) {
+                case 'grid':
+                    super.setVisible(panel, visible);
+                    break;
+                case 'floating': {
+                    const item = this.floatingGroups.find((floatingGroup) => floatingGroup.group === panel);
+                    if (item) {
+                        item.overlay.setVisible(visible);
+                        panel.api._onDidVisibilityChange.fire({
+                            isVisible: visible,
+                        });
+                    }
+                    break;
+                }
+                case 'popout':
+                    console.warn('dockview: You cannot hide a group that is in a popout window');
+                    break;
+            }
+        }
         addPopoutGroup(itemToPopout, options) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             if (itemToPopout instanceof DockviewPanel &&
                 itemToPopout.group.size === 1) {
                 return this.addPopoutGroup(itemToPopout.group, options);
@@ -7535,12 +7608,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             const box = getBox();
             const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
-            if (itemToPopout.api.location.type === 'grid') {
-                itemToPopout.api.setVisible(false);
-            }
             const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
             theme !== null && theme !== void 0 ? theme : '', {
-                url: (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : '/popout.html',
+                url: (_e = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl) !== null && _e !== void 0 ? _e : '/popout.html',
                 left: window.screenX + box.left,
                 top: window.screenY + box.top,
                 width: box.width,
@@ -7554,13 +7624,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return _window
                 .open()
                 .then((popoutContainer) => {
-                var _a;
                 if (_window.isDisposed) {
-                    return;
+                    return false;
                 }
                 if (popoutContainer === null) {
                     popoutWindowDisposable.dispose();
-                    return;
+                    return false;
                 }
                 const gready = document.createElement('div');
                 gready.className = 'dv-overlay-render-container';
@@ -7569,30 +7638,45 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     ? itemToPopout.group
                     : itemToPopout;
                 const referenceLocation = itemToPopout.api.location.type;
-                const group = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) !== null && _a !== void 0 ? _a : this.createGroup({ id: groupId });
-                group.model.renderContainer = overlayRenderContainer;
-                if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup)) {
-                    this._onDidAddGroup.fire(group);
+                /**
+                 * The group that is being added doesn't already exist within the DOM, the most likely occurance
+                 * of this case is when being called from the `fromJSON(...)` method
+                 */
+                const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
+                let group;
+                if (!isGroupAddedToDom) {
+                    group = referenceGroup;
                 }
-                if (itemToPopout instanceof DockviewPanel) {
-                    this.movingLock(() => {
-                        const panel = referenceGroup.model.removePanel(itemToPopout);
-                        group.model.openPanel(panel);
-                    });
+                else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) {
+                    group = options.overridePopoutGroup;
                 }
                 else {
-                    this.movingLock(() => moveGroupWithoutDestroying({
-                        from: referenceGroup,
-                        to: group,
-                    }));
-                    switch (referenceLocation) {
-                        case 'grid':
-                            referenceGroup.api.setVisible(false);
-                            break;
-                        case 'floating':
-                        case 'popout':
-                            this.removeGroup(referenceGroup);
-                            break;
+                    group = this.createGroup({ id: groupId });
+                    this._onDidAddGroup.fire(group);
+                }
+                group.model.renderContainer = overlayRenderContainer;
+                group.layout(_window.window.innerWidth, _window.window.innerHeight);
+                if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) {
+                    if (itemToPopout instanceof DockviewPanel) {
+                        this.movingLock(() => {
+                            const panel = referenceGroup.model.removePanel(itemToPopout);
+                            group.model.openPanel(panel);
+                        });
+                    }
+                    else {
+                        this.movingLock(() => moveGroupWithoutDestroying({
+                            from: referenceGroup,
+                            to: group,
+                        }));
+                        switch (referenceLocation) {
+                            case 'grid':
+                                referenceGroup.api.setVisible(false);
+                                break;
+                            case 'floating':
+                            case 'popout':
+                                this.removeGroup(referenceGroup);
+                                break;
+                        }
                     }
                 }
                 popoutContainer.classList.add('dv-dockview');
@@ -7602,7 +7686,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 group.model.location = {
                     type: 'popout',
                     getWindow: () => _window.window,
+                    popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl,
                 };
+                if (isGroupAddedToDom &&
+                    itemToPopout.api.location.type === 'grid') {
+                    itemToPopout.api.setVisible(false);
+                }
                 this.doSetGroupAndPanelActive(group);
                 popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => {
                     var _a;
@@ -7614,10 +7703,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus();
                 }));
                 let returnedGroup;
+                const isValidReferenceGroup = isGroupAddedToDom &&
+                    referenceGroup &&
+                    this.getPanel(referenceGroup.id);
                 const value = {
                     window: _window,
                     popoutGroup: group,
-                    referenceGroup: this.getPanel(referenceGroup.id)
+                    referenceGroup: isValidReferenceGroup
                         ? referenceGroup.id
                         : undefined,
                     disposable: {
@@ -7634,9 +7726,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                  * window dimensions
                  */
                 addDisposableWindowListener(_window.window, 'resize', () => {
-                    group.layout(window.innerWidth, window.innerHeight);
+                    group.layout(_window.window.innerWidth, _window.window.innerHeight);
                 }), overlayRenderContainer, exports.DockviewDisposable.from(() => {
-                    if (this.getPanel(referenceGroup.id)) {
+                    if (isGroupAddedToDom &&
+                        this.getPanel(referenceGroup.id)) {
                         this.movingLock(() => moveGroupWithoutDestroying({
                             from: group,
                             to: referenceGroup,
@@ -7651,21 +7744,27 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         }
                     }
                     else if (this.getPanel(group.id)) {
-                        const removedGroup = this.doRemoveGroup(group, {
+                        this.doRemoveGroup(group, {
                             skipDispose: true,
                             skipActive: true,
+                            skipPopoutReturn: true,
                         });
+                        const removedGroup = group;
                         removedGroup.model.renderContainer =
                             this.overlayRenderContainer;
                         removedGroup.model.location = { type: 'grid' };
                         returnedGroup = removedGroup;
+                        this.doAddGroup(removedGroup, [0]);
+                        this.doSetGroupAndPanelActive(removedGroup);
                     }
                 }));
                 this._popoutGroups.push(value);
                 this.updateWatermark();
+                return true;
             })
                 .catch((err) => {
                 console.error('dockview: failed to create popout window', err);
+                return false;
             });
         }
         addFloatingGroup(item, options) {
@@ -7769,7 +7868,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                     ? undefined
                     : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
-            const el = group.element.querySelector('.void-container');
+            const el = group.element.querySelector('.dv-void-container');
             if (!el) {
                 throw new Error('failed to find drag handle');
             }
@@ -7961,6 +8060,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     data: group.popoutGroup.toJSON(),
                     gridReferenceGroup: group.referenceGroup,
                     position: group.window.dimensions(),
+                    url: group.popoutGroup.api.location.type === 'popout'
+                        ? group.popoutGroup.api.location.popoutUrl
+                        : undefined,
                 };
             });
             const result = {
@@ -8047,16 +8149,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
                 for (const serializedPopoutGroup of serializedPopoutGroups) {
-                    const { data, position, gridReferenceGroup } = serializedPopoutGroup;
+                    const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                     const group = createGroupFromSerializedState(data);
                     this.addPopoutGroup((_c = (gridReferenceGroup
                         ? this.getPanel(gridReferenceGroup)
                         : undefined)) !== null && _c !== void 0 ? _c : group, {
-                        skipRemoveGroup: true,
                         position: position !== null && position !== void 0 ? position : undefined,
                         overridePopoutGroup: gridReferenceGroup
                             ? group
                             : undefined,
+                        popoutUrl: url,
                     });
                 }
                 for (const floatingGroup of this._floatingGroups) {
@@ -8070,6 +8172,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             catch (err) {
+                console.error('dockview: failed to deserialize layout. Reverting changes', err);
                 /**
                  * Takes all the successfully created groups and remove all of their panels.
                  */
@@ -8137,11 +8240,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 width: options.initialWidth,
                 height: options.initialHeight,
             };
+            let index;
             if (options.position) {
                 if (isPanelOptionsWithPanel(options.position)) {
                     const referencePanel = typeof options.position.referencePanel === 'string'
                         ? this.getGroupPanel(options.position.referencePanel)
                         : options.position.referencePanel;
+                    index = options.position.index;
                     if (!referencePanel) {
                         throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                     }
@@ -8152,6 +8257,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         typeof options.position.referenceGroup === 'string'
                             ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                             : options.position.referenceGroup;
+                    index = options.position.index;
                     if (!referenceGroup) {
                         throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                     }
@@ -8162,6 +8268,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     group.model.openPanel(panel, {
                         skipSetActive: options.inactive,
                         skipSetGroupActive: options.inactive,
+                        index,
                     });
                     if (!options.inactive) {
                         this.doSetGroupAndPanelActive(group);
@@ -8191,6 +8298,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     group.model.openPanel(panel, {
                         skipSetActive: options.inactive,
                         skipSetGroupActive: options.inactive,
+                        index,
                     });
                 }
                 else if (referenceGroup.api.location.type === 'floating' ||
@@ -8199,6 +8307,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     referenceGroup.model.openPanel(panel, {
                         skipSetActive: options.inactive,
                         skipSetGroupActive: options.inactive,
+                        index,
                     });
                     referenceGroup.api.setSize({
                         width: initial === null || initial === void 0 ? void 0 : initial.width,
@@ -8219,6 +8328,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     group.model.openPanel(panel, {
                         skipSetActive: options.inactive,
                         skipSetGroupActive: options.inactive,
+                        index,
                     });
                     if (!options.inactive) {
                         this.doSetGroupAndPanelActive(group);
@@ -8237,6 +8347,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
             }
             else {
@@ -8247,6 +8358,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
@@ -8256,7 +8368,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         removePanel(panel, options = {
             removeEmptyGroup: true,
-            skipDispose: false,
         }) {
             const group = panel.group;
             if (!group) {
@@ -8787,6 +8898,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+        const Component = typeof componentName === 'string'
+            ? components[componentName]
+            : undefined;
+        const FrameworkComponent = typeof componentName === 'string'
+            ? frameworkComponents[componentName]
+            : undefined;
+        if (Component && FrameworkComponent) {
+            throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
+        }
+        if (FrameworkComponent) {
+            if (!createFrameworkComponent) {
+                throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+            }
+            return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+        }
+        if (!Component) {
+            if (fallback) {
+                return fallback();
+            }
+            throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+        }
+        return new Component(id, componentName);
+    }
+
     class GridviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -9335,12 +9471,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._expandedIcon = createExpandMoreButton();
             this._collapsedIcon = createChevronRightButton();
             this.disposable = new MutableDisposable();
-            this.apiRef = { api: null };
+            this.apiRef = {
+                api: null,
+            };
             this._element = document.createElement('div');
-            this.element.className = 'default-header';
+            this.element.className = 'dv-default-header';
             this._content = document.createElement('span');
             this._expander = document.createElement('div');
-            this._expander.className = 'dockview-pane-header-icon';
+            this._expander.className = 'dv-pane-header-icon';
             this.element.appendChild(this._expander);
             this.element.appendChild(this._content);
             this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -10197,22 +10335,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onDidDrop]);
-        React.useEffect(() => {
-            if (!dockviewRef.current) {
-                return () => {
-                    // noop
-                };
-            }
-            const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
-                var _a;
-                if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
-                    event.accept();
-                }
-            });
-            return () => {
-                disposable.dispose();
-            };
-        }, [props.showDndOverlay]);
         React.useEffect(() => {
             if (!dockviewRef.current) {
                 return () => {
@@ -10630,7 +10752,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.GridviewComponent = GridviewComponent;
     exports.GridviewPanel = GridviewPanel;
     exports.GridviewReact = GridviewReact;
-    exports.LocalSelectionTransfer = LocalSelectionTransfer;
     exports.PROPERTY_KEYS = PROPERTY_KEYS;
     exports.PaneFramework = PaneFramework;
     exports.PaneTransfer = PaneTransfer;
@@ -10649,7 +10770,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab;
     exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
-    exports.createComponent = createComponent;
     exports.createDockview = createDockview;
     exports.createGridview = createGridview;
     exports.createPaneview = createPaneview;