dockview 1.4.0 → 1.4.3

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.0
+ * @version 1.4.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2273,18 +2273,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         removePanel(panel, sizing) {
             this.component.removePanel(panel, sizing);
         }
-        setVisible(panel, isVisible) {
-            this.component.setVisible(panel, isVisible);
-        }
         focus() {
             this.component.focus();
         }
         getPanel(id) {
             return this.component.getPanel(id);
         }
-        setActive(panel) {
-            this.component.setActive(panel);
-        }
         layout(width, height) {
             return this.component.layout(width, height);
         }
@@ -2300,6 +2294,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class PaneviewApi {
         constructor(component) {
@@ -2367,6 +2364,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class GridviewApi {
         constructor(component) {
@@ -2393,13 +2393,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
-        get onDidAddGroup() {
+        get onDidAddPanel() {
             return this.component.onDidAddGroup;
         }
-        get onDidRemoveGroup() {
+        get onDidRemovePanel() {
             return this.component.onDidRemoveGroup;
         }
-        get onDidActiveGroupChange() {
+        get onDidActivePanelChange() {
             return this.component.onDidActiveGroupChange;
         }
         get onDidLayoutFromJSON() {
@@ -2432,21 +2432,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getPanel(id) {
             return this.component.getPanel(id);
         }
-        toggleVisibility(panel) {
-            this.component.toggleVisibility(panel);
-        }
-        setVisible(panel, visible) {
-            this.component.setVisible(panel, visible);
-        }
-        setActive(panel) {
-            this.component.setActive(panel);
-        }
         fromJSON(data) {
             return this.component.fromJSON(data);
         }
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class DockviewApi {
         constructor(component) {
@@ -2495,7 +2489,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this.component.onDidRemovePanel;
         }
         get onDidLayoutFromJSON() {
-            return this.component.onDidLayoutfromJSON;
+            return this.component.onDidLayoutFromJSON;
         }
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
@@ -2557,6 +2551,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
 
     class ContentContainer extends CompositeDisposable {
@@ -2630,12 +2627,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    var DockviewDropTargets;
+    exports.DockviewDropTargets = void 0;
     (function (DockviewDropTargets) {
         DockviewDropTargets[DockviewDropTargets["Tab"] = 0] = "Tab";
         DockviewDropTargets[DockviewDropTargets["Panel"] = 1] = "Panel";
         DockviewDropTargets[DockviewDropTargets["TabContainer"] = 2] = "TabContainer";
-    })(DockviewDropTargets || (DockviewDropTargets = {}));
+    })(exports.DockviewDropTargets || (exports.DockviewDropTargets = {}));
 
     class DragHandler extends CompositeDisposable {
         constructor(el) {
@@ -2677,7 +2674,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         MouseEventKind["CLICK"] = "CLICK";
         MouseEventKind["CONTEXT_MENU"] = "CONTEXT_MENU";
     })(exports.MouseEventKind || (exports.MouseEventKind = {}));
-    class Tab$1 extends CompositeDisposable {
+    class Tab extends CompositeDisposable {
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
@@ -2691,6 +2688,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
+            toggleClass(this.element, 'inactive-tab', true);
             this.addDisposables(new (class Handler extends DragHandler {
                 constructor() {
                     super(...arguments);
@@ -2733,7 +2731,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     if (data) {
                         return this.panelId !== data.panelId;
                     }
-                    return this.group.model.canDisplayOverlay(event, DockviewDropTargets.Tab);
+                    return this.group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Tab);
                 },
             });
             this.addDisposables(this.droptarget.onDrop((event) => {
@@ -2767,7 +2765,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.group = group;
             this.tabs = [];
             this.selectedIndex = -1;
-            this.active = false;
             this._hidden = false;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
@@ -2793,7 +2790,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         // don't show the overlay if the tab being dragged is the last panel of this group
                         return ((_a = last(this.tabs)) === null || _a === void 0 ? void 0 : _a.value.panelId) !== data.panelId;
                     }
-                    return group.model.canDisplayOverlay(event, DockviewDropTargets.Panel);
+                    return group.model.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
                 },
             });
             this.addDisposables(this.voidDropTarget.onDrop((event) => {
@@ -2871,8 +2868,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         indexOf(id) {
             return this.tabs.findIndex((tab) => tab.value.panelId === id);
         }
-        setActive(isGroupActive) {
-            this.active = isGroupActive;
+        setActive(_isGroupActive) {
+            // noop
         }
         addTab(tab, index = this.tabs.length) {
             if (index < 0 || index > this.tabs.length) {
@@ -2906,7 +2903,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
                 return;
             }
-            const tabToAdd = new Tab$1(panel.id, this.accessor, this.group);
+            const tabToAdd = new Tab(panel.id, this.accessor, this.group);
             if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
                 throw new Error('invalid header component');
             }
@@ -2933,7 +2930,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }));
             const value = { value: tabToAdd, disposable };
             this.addTab(value, index);
-            this.activePanel = panel;
         }
         closePanel(panel) {
             this.delete(panel.id);
@@ -2992,7 +2988,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         const groupHasOnePanelAndIsActiveDragElement = this._panels.length === 1 && data.groupId === this.id;
                         return !groupHasOnePanelAndIsActiveDragElement;
                     }
-                    return this.canDisplayOverlay(event, DockviewDropTargets.Panel);
+                    return this.canDisplayOverlay(event, exports.DockviewDropTargets.Panel);
                 },
             });
             container.append(this.tabsContainer.element, this.contentContainer.element);
@@ -3150,16 +3146,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 options.index > this.panels.length) {
                 options.index = this.panels.length;
             }
-            const skipSetActive = !!options.skipSetActive;
+            const skipSetPanelActive = !!options.skipSetPanelActive;
+            const skipSetGroupActive = !!options.skipSetGroupActive;
             // ensure the group is updated before we fire any events
             panel.updateParentGroup(this.parent, true);
-            if (!skipSetActive && this._activePanel === panel) {
-                this.accessor.doSetGroupActive(this.parent);
+            if (this._activePanel === panel) {
+                if (!skipSetGroupActive) {
+                    this.accessor.doSetGroupActive(this.parent);
+                }
                 return;
             }
-            this.doAddPanel(panel, options.index);
-            if (!skipSetActive) {
+            this.doAddPanel(panel, options.index, skipSetPanelActive);
+            if (!skipSetPanelActive) {
                 this.doSetActivePanel(panel);
+            }
+            if (!skipSetGroupActive) {
                 this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
             }
             this.updateContainer();
@@ -3263,11 +3264,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 panel,
             });
         }
-        doAddPanel(panel, index = this.panels.length) {
+        doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
             const existingPanel = this._panels.indexOf(panel);
             const hasExistingPanel = existingPanel > -1;
             this.tabsContainer.openPanel(panel, index);
-            this.contentContainer.openPanel(panel);
+            if (!skipSetActive) {
+                this.contentContainer.openPanel(panel);
+            }
             this.tabsContainer.show();
             this.contentContainer.show();
             if (hasExistingPanel) {
@@ -3333,7 +3336,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         canDisplayOverlay(event, target) {
             // custom overlay handler
             if (this.accessor.options.showDndOverlay) {
-                return this.accessor.options.showDndOverlay(event, target);
+                return this.accessor.options.showDndOverlay({
+                    nativeEvent: event,
+                    target,
+                    group: this.accessor.getPanel(this.id),
+                });
             }
             return false;
         }
@@ -3416,7 +3423,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
             this.addDisposables(this.gridview.onDidChange(() => {
-                this._onDidLayoutChange.fire();
+                this._bufferOnDidLayoutChange.fire();
             }));
             this.addDisposables(exports.Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
@@ -3577,10 +3584,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._isVisible = true;
             this._width = 0;
             this._height = 0;
-            this._onDidPanelDimensionChange = new Emitter({
+            this._onDidDimensionChange = new Emitter({
                 replay: true,
             });
-            this.onDidDimensionsChange = this._onDidPanelDimensionChange.event;
+            this.onDidDimensionsChange = this._onDidDimensionChange.event;
             //
             this._onDidChangeFocus = new Emitter({
                 replay: true,
@@ -3605,7 +3612,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this._onActiveChange = new Emitter();
             this.onActiveChange = this._onActiveChange.event;
-            this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+            this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
                 this._isActive = event.isActive;
@@ -3829,7 +3836,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         layout(width, height) {
             var _a;
             // the obtain the correct dimensions of the content panel we must deduct the tab height
-            this.api._onDidPanelDimensionChange.fire({
+            this.api._onDidDimensionChange.fire({
                 width,
                 height: height - (this.group.model.header.height || 0),
             });
@@ -3926,34 +3933,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    class DefaultDeserializer {
-        constructor(layout, panelDeserializer) {
-            this.layout = layout;
-            this.panelDeserializer = panelDeserializer;
-        }
-        fromJSON(node) {
-            const data = node.data;
-            const children = data.views;
-            const active = data.activeView;
-            const group = this.layout.createGroup({
-                id: data.id,
-                locked: !!data.locked,
-                hideHeader: !!data.hideHeader,
-            });
-            for (const child of children) {
-                const panel = this.panelDeserializer.createPanel(child, group);
-                const isActive = typeof active === 'string' && active === panel.id;
-                group.model.openPanel(panel, {
-                    skipSetActive: !isActive,
-                });
-            }
-            if (!group.activePanel && group.panels.length > 0) {
-                group.model.openPanel(group.panels[group.panels.length - 1]);
-            }
-            return group;
-        }
-    }
-
     function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
         const Component = typeof componentName === 'string'
             ? components[componentName]
@@ -3979,53 +3958,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         return new Component(id, componentName);
     }
 
-    class WrappedTab {
-        constructor(renderer) {
-            this.renderer = renderer;
-            this._element = document.createElement('element');
-            this.show();
-        }
-        get innerRenderer() {
-            return this.renderer;
-        }
-        get element() {
-            return this._element;
-        }
-        get id() {
-            return this.renderer.id;
-        }
-        show() {
-            if (!this.renderer.element.parentElement) {
-                this._element.appendChild(this.renderer.element);
-            }
-        }
-        hide() {
-            if (this.renderer.element.parentElement) {
-                this.renderer.element.remove();
-            }
-        }
-        layout(width, height) {
-            this.renderer.layout(width, height);
-        }
-        update(event) {
-            this.renderer.update(event);
-        }
-        toJSON() {
-            return this.renderer.toJSON();
-        }
-        focus() {
-            this.renderer.focus();
-        }
-        init(parameters) {
-            this.renderer.init(parameters);
-        }
-        updateParentGroup(group, isPanelVisible) {
-            this.renderer.updateParentGroup(group, isPanelVisible);
-        }
-        dispose() {
-            this.renderer.dispose();
-        }
-    }
     class DefaultTab extends CompositeDisposable {
         constructor() {
             super();
@@ -4088,15 +4020,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         updateParentGroup(group, isPanelVisible) {
+            const changed = this._isPanelVisible !== isPanelVisible ||
+                this._isGroupActive !== group.isActive;
             this._isPanelVisible = isPanelVisible;
             this._isGroupActive = group.isActive;
-            this.render();
+            if (changed) {
+                this.render();
+            }
         }
         layout(_width, _height) {
             // noop
         }
         render() {
-            this._content.textContent = this.params.title;
+            if (this._content.textContent !== this.params.title) {
+                this._content.textContent = this.params.title;
+            }
         }
     }
 
@@ -4140,7 +4078,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         layout(width, height) {
             this._width = width;
             this._height = height;
-            this.api._onDidPanelDimensionChange.fire({ width, height });
+            this.api._onDidDimensionChange.fire({ width, height });
             if (this.part) {
                 if (this._params) {
                     this.part.update(this._params.params);
@@ -4189,11 +4127,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidChange = this._onDidChange.event;
             this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this._params;
-                containerApi.setVisible(this, isVisible);
+                const { accessor } = this._params;
+                accessor.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this._params;
-                containerApi.setActive(this);
+                const { accessor } = this._params;
+                accessor.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumWidth === 'number' ||
                     typeof event.minimumWidth === 'function') {
@@ -4372,7 +4310,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(renderers) {
             var _a;
             this._content = renderers.content;
-            this._tab = new WrappedTab((_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab());
+            this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
             this._actions =
                 renderers.actions ||
                     (this.content.actions
@@ -4412,9 +4350,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return {
                 content: this.content.toJSON(),
-                tab: this.tab.innerRenderer instanceof DefaultTab
-                    ? undefined
-                    : this.tab.toJSON(),
+                tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
             };
         }
         dispose() {
@@ -4433,9 +4369,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: options.orientation || exports.Orientation.HORIZONTAL,
                 styles: options.styles,
             });
-            // events
-            this._onTabInteractionEvent = new Emitter();
-            this.onTabInteractionEvent = this._onTabInteractionEvent.event;
             this._onTabContextMenu = new Emitter();
             this.onTabContextMenu = this._onTabContextMenu.event;
             this._onDidDrop = new Emitter();
@@ -4444,11 +4377,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidRemovePanel = this._onDidRemovePanel.event;
             this._onDidAddPanel = new Emitter();
             this.onDidAddPanel = this._onDidAddPanel.event;
-            this._onDidLayoutfromJSON = new Emitter();
-            this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+            this._onDidLayoutFromJSON = new Emitter();
+            this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            this.addDisposables(this._onTabContextMenu, this._onDidDrop, exports.Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }));
             this._options = options;
@@ -4503,7 +4436,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.options.orientation !== options.orientation;
+                this.gridview.orientation !== options.orientation;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4581,12 +4514,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         fromJSON(data) {
-            const groups = Array.from(this._groups.values()).map((_) => _.value);
-            for (const group of groups) {
-                // remove the group will automatically remove the panels
-                this.removeGroup(group, true);
-            }
-            this.gridview.clear();
+            this.clear();
             if (!this.deserializer) {
                 throw new Error('invalid deserializer');
             }
@@ -4597,12 +4525,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!this.deserializer) {
                 throw new Error('no deserializer provided');
             }
-            this.gridview.deserialize(grid, new DefaultDeserializer(this, {
-                createPanel: (id, group) => {
-                    const panelData = panels[id];
-                    return this.deserializer.fromJSON(panelData, group);
-                },
-            }));
+            this.gridview.deserialize(grid, {
+                fromJSON: (node) => {
+                    const { id, locked, hideHeader, views, activeView } = node.data;
+                    const group = this.createGroup({
+                        id,
+                        locked: !!locked,
+                        hideHeader: !!hideHeader,
+                    });
+                    this._onDidAddGroup.fire(group);
+                    for (const child of views) {
+                        const panel = this.deserializer.fromJSON(panels[child], group);
+                        const isActive = typeof activeView === 'string' && activeView === panel.id;
+                        group.model.openPanel(panel, {
+                            skipSetPanelActive: !isActive,
+                            skipSetGroupActive: true
+                        });
+                    }
+                    if (!group.activePanel && group.panels.length > 0) {
+                        group.model.openPanel(group.panels[group.panels.length - 1], {
+                            skipSetGroupActive: true
+                        });
+                    }
+                    return group;
+                }
+            });
             if (typeof activeGroup === 'string') {
                 const panel = this.getPanel(activeGroup);
                 if (panel) {
@@ -4610,7 +4557,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             this.gridview.layout(this.width, this.height);
-            this._onDidLayoutfromJSON.fire();
+            this._onDidLayoutFromJSON.fire();
+        }
+        clear() {
+            const groups = Array.from(this._groups.values()).map((_) => _.value);
+            const hasActiveGroup = !!this.activeGroup;
+            const hasActivePanel = !!this.activePanel;
+            for (const group of groups) {
+                // remove the group will automatically remove the panels
+                this.removeGroup(group, true);
+            }
+            if (hasActiveGroup) {
+                this.doSetGroupActive(undefined);
+            }
+            if (hasActivePanel) {
+                this._onDidActivePanelChange.fire(undefined);
+            }
+            this.gridview.clear();
         }
         closeAllGroups() {
             for (const entry of this._groups.entries()) {
@@ -4802,13 +4765,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             const view = new GroupPanel(this, id, options);
-            view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
+            view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
             if (!this._groups.has(view.id)) {
                 const disposable = new CompositeDisposable(view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }), view.model.onDidDrop((event) => {
-                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
                 }), view.model.onDidGroupChange((event) => {
                     switch (event.kind) {
                         case exports.GroupChangeKind2.ADD_PANEL:
@@ -4872,7 +4835,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidActivePanelChange.dispose();
             this._onDidAddPanel.dispose();
             this._onDidRemovePanel.dispose();
-            this._onDidLayoutfromJSON.dispose();
+            this._onDidLayoutFromJSON.dispose();
         }
     }
 
@@ -4910,7 +4873,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateOptions(options) {
             const hasOrientationChanged = typeof options.orientation === 'string' &&
-                this.options.orientation !== options.orientation;
+                this.gridview.orientation !== options.orientation;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
@@ -4941,21 +4904,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 value.value.setActive(panel === value.value);
             });
         }
-        toggleVisibility(panel) {
-            this.setVisible(panel, !this.isVisible(panel));
-        }
         focus() {
             var _a;
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
         }
         fromJSON(serializedGridview) {
+            this.clear();
             const { grid, activePanel } = serializedGridview;
-            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-            for (const group of groups) {
-                group.disposable.dispose();
-                this.doRemoveGroup(group.value, { skipActive: true });
-            }
-            this.gridview.clear();
             const queue = [];
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
@@ -4974,9 +4929,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         maximumHeight: data.maximumHeight,
                         priority: data.priority,
                         snap: !!data.snap,
-                        containerApi: new GridviewApi(this),
+                        accessor: this,
                         isVisible: node.visible,
                     }));
+                    this._onDidAddGroup.fire(view);
                     this.registerPanel(view);
                     return view;
                 },
@@ -4991,6 +4947,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this._onDidLayoutfromJSON.fire();
         }
+        clear() {
+            const hasActiveGroup = this.activeGroup;
+            const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+            for (const group of groups) {
+                group.disposable.dispose();
+                this.doRemoveGroup(group.value, { skipActive: true });
+            }
+            if (hasActiveGroup) {
+                this.doSetGroupActive(undefined);
+            }
+            this.gridview.clear();
+        }
         movePanel(panel, options) {
             var _a;
             let relativeLocation;
@@ -5040,7 +5008,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 maximumHeight: options.maximumHeight,
                 priority: options.priority,
                 snap: !!options.snap,
-                containerApi: new GridviewApi(this),
+                accessor: this,
                 isVisible: true,
             });
             this.registerPanel(view);
@@ -5236,7 +5204,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 maximumSize: options.maximumSize,
                 snap: options.snap,
                 priority: options.priority,
-                containerApi: new SplitviewApi(this),
+                accessor: this,
             });
             const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
             const index = typeof options.index === 'number' ? options.index : undefined;
@@ -5281,13 +5249,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         fromJSON(serializedSplitview) {
+            this.clear();
             const { views, orientation, size, activeView } = serializedSplitview;
-            for (const [_, value] of this._panels.entries()) {
-                value.disposable.dispose();
-                value.value.dispose();
-            }
-            this._panels.clear();
-            this.splitview.dispose();
             const queue = [];
             this.splitview = new Splitview(this.element, {
                 orientation,
@@ -5312,7 +5275,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 maximumSize: data.maximumSize,
                                 snap: view.snap,
                                 priority: view.priority,
-                                containerApi: new SplitviewApi(this),
+                                accessor: this,
                             });
                         });
                         panel.orientation = orientation;
@@ -5335,6 +5298,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this._onDidLayoutfromJSON.fire();
         }
+        clear() {
+            for (const [_, value] of this._panels.entries()) {
+                value.disposable.dispose();
+                value.value.dispose();
+            }
+            this._panels.clear();
+            this.splitview.dispose();
+        }
         dispose() {
             for (const [_, value] of this._panels.entries()) {
                 value.disposable.dispose();
@@ -5663,9 +5634,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.element.className = 'default-header';
             this._content = document.createElement('span');
             this._expander = document.createElement('a');
-            this.element.appendChild(this._content);
             this.element.appendChild(this._expander);
-            this.addDisposables(addDisposableListener(this._expander, 'click', () => {
+            this.element.appendChild(this._content);
+            this.addDisposables(addDisposableListener(this._element, 'click', () => {
                 var _a;
                 (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
             }));
@@ -5676,9 +5647,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         init(params) {
             this.apiRef.api = params.api;
             this._content.textContent = params.title;
-            this._expander.textContent = params.api.isExpanded ? '<' : '>';
+            this._expander.textContent = '▼';
+            toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
             this.disposable.value = params.api.onDidExpansionChange((e) => {
-                this._expander.textContent = e.isExpanded ? '<' : '>';
+                toggleClass(this._expander, 'collapsed', !e.isExpanded);
             });
         }
         update(_params) {
@@ -5854,13 +5826,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }
         fromJSON(serializedPaneview) {
+            this.clear();
             const { views, size } = serializedPaneview;
             const queue = [];
-            for (const [_, value] of this._viewDisposables.entries()) {
-                value.dispose();
-            }
-            this._viewDisposables.clear();
-            this.paneview.dispose();
             this.paneview = new Paneview(this.element, {
                 orientation: exports.Orientation.VERTICAL,
                 descriptor: {
@@ -5919,6 +5887,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             queue.forEach((f) => f());
             this._onDidLayoutfromJSON.fire();
         }
+        clear() {
+            for (const [_, value] of this._viewDisposables.entries()) {
+                value.dispose();
+            }
+            this._viewDisposables.clear();
+            this.paneview.dispose();
+        }
         doAddPanel(panel) {
             const disposable = panel.onDidDrop((event) => {
                 this._onDidDrop.fire(event);
@@ -5954,13 +5929,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidChange = this._onDidChange.event;
             this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this
-                    ._params;
-                containerApi.setVisible(this, isVisible);
+                const { accessor } = this._params;
+                accessor.setVisible(this, isVisible);
             }), this.api.onActiveChange(() => {
-                const { containerApi } = this
-                    ._params;
-                containerApi.setActive(this);
+                const { accessor } = this._params;
+                accessor.setActive(this);
             }), this.api.onDidConstraintsChangeInternal((event) => {
                 if (typeof event.minimumSize === 'number' ||
                     typeof event.minimumSize === 'function') {
@@ -6212,9 +6185,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         layout(_width, _height) {
             // noop
         }
-        close() {
-            return Promise.resolve(true);
-        }
         dispose() {
             var _a, _b;
             this._onDidFocus.dispose();
@@ -6484,58 +6454,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     });
     DockviewReact.displayName = 'DockviewComponent';
 
-    const Tab = (props) => {
-        return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-    };
-    const Content = (props) => {
-        return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-    };
-    const Actions = (props) => {
-        return React__namespace.createElement(React__namespace.Fragment, null, props.children);
-    };
-    function isValidComponent(element) {
-        return [Content, Actions, Tab].find((comp) => element.type === comp);
-    }
-    const Panel = (props) => {
-        const context = React__namespace.useContext(ReactPartContext);
-        const sections = React__namespace.useMemo(() => {
-            var _a;
-            const childs = ((_a = React__namespace.Children.map(props.children, (_) => _)) === null || _a === void 0 ? void 0 : _a.filter(isReactElement)) || [];
-            const isInvalid = !!childs.find((_) => !isValidComponent(_));
-            if (isInvalid) {
-                throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
-            }
-            const body = childs.find((_) => _.type === Content);
-            const actions = childs.find((_) => _.type === Actions);
-            const tab = childs.find((_) => _.type === Tab);
-            return { body, actions, tab };
-        }, [props.children]);
-        React__namespace.useEffect(() => {
-            /**
-             * hide or show the default tab behavior based on whether we want to override
-             * with our own React tab.
-             */
-            if (sections.tab) {
-                context.tabPortalElement.hide();
-            }
-            else {
-                context.tabPortalElement.show();
-            }
-        }, [sections.tab]);
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            sections.actions &&
-                ReactDOM__namespace.createPortal(sections.actions, context.actionsPortalElement),
-            sections.tab &&
-                ReactDOM__namespace.createPortal(sections.tab, context.tabPortalElement.element),
-            sections.body || props.children));
-    };
-    const DockviewComponents = {
-        Tab,
-        Content,
-        Actions,
-        Panel,
-    };
-
     class ReactPanelView extends SplitviewPanel {
         constructor(id, component, reactComponent, reactPortalStore) {
             super(id, component);
@@ -6547,8 +6465,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
                 params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this._params
-                    .containerApi,
+                containerApi: new SplitviewApi(this._params.accessor),
             });
         }
     }
@@ -6624,8 +6541,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
                 params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
                 api: this.api,
-                containerApi: this._params
-                    .containerApi,
+                containerApi: new GridviewApi(this._params.accessor),
             });
         }
     }
@@ -6819,7 +6735,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.ContentContainer = ContentContainer;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
-    exports.DockviewComponents = DockviewComponents;
     exports.DockviewReact = DockviewReact;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
@@ -6845,7 +6760,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewComponent = SplitviewComponent;
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
-    exports.Tab = Tab$1;
+    exports.Tab = Tab;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;
     exports.getLocationOrientation = getLocationOrientation;