dockview 1.4.1 → 1.5.0

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.1
+ * @version 1.5.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2294,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) {
@@ -2361,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) {
@@ -2387,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,6 +2438,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         toJSON() {
             return this.component.toJSON();
         }
+        clear() {
+            this.component.clear();
+        }
     }
     class DockviewApi {
         constructor(component) {
@@ -2480,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;
@@ -2542,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 {
@@ -2615,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) {
@@ -2666,6 +2678,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
+            this.accessor = accessor;
             this.group = group;
             this._onChanged = new Emitter();
             this.onChanged = this._onChanged.event;
@@ -2676,6 +2689,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);
@@ -2715,10 +2729,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 validOverlays: 'none',
                 canDisplayOverlay: (event) => {
                     const data = getPanelData();
-                    if (data) {
+                    if (data && this.accessor.id === data.viewId) {
                         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) => {
@@ -2752,7 +2766,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;
@@ -2774,11 +2787,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 canDisplayOverlay: (event) => {
                     var _a;
                     const data = getPanelData();
-                    if (data) {
+                    if (data && this.accessor.id === data.viewId) {
                         // 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) => {
@@ -2856,8 +2869,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) {
@@ -2918,7 +2931,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);
@@ -2932,12 +2944,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    exports.GroupChangeKind2 = void 0;
-    (function (GroupChangeKind2) {
-        GroupChangeKind2["ADD_PANEL"] = "ADD_PANEL";
-        GroupChangeKind2["REMOVE_PANEL"] = "REMOVE_PANEL";
-        GroupChangeKind2["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-    })(exports.GroupChangeKind2 || (exports.GroupChangeKind2 = {}));
     class Groupview extends CompositeDisposable {
         constructor(container, accessor, id, options, parent) {
             super();
@@ -2956,12 +2962,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._panels = [];
             this._onMove = new Emitter();
             this.onMove = this._onMove.event;
-            this._onDidGroupChange = new Emitter();
-            this.onDidGroupChange = this._onDidGroupChange.event;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
+            this._onDidAddPanel = new Emitter();
+            this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidRemovePanel = new Emitter();
+            this.onDidRemovePanel = this._onDidRemovePanel.event;
+            this._onDidActivePanelChange = new Emitter();
+            this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this.container.classList.add('groupview');
-            this.addDisposables(this._onMove, this._onDidGroupChange, this._onDidChange, this._onDidDrop);
             this.tabsContainer = new TabsContainer(this.accessor, this.parent, {
                 tabHeight: options.tabHeight,
             });
@@ -2973,17 +2982,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         return false;
                     }
                     const data = getPanelData();
-                    if (data) {
+                    if (data && data.viewId === this.accessor.id) {
                         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);
             this.header.hidden = !!options.hideHeader;
             this.locked = !!options.locked;
-            this.addDisposables(this._onMove, this._onDidGroupChange, this.tabsContainer.onDrop((event) => {
+            this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
                 this.handleDropEvent(event.event, exports.Position.Center, event.index);
             }), this.contentContainer.onDidFocus(() => {
                 this.accessor.doSetGroupActive(this.parent, true);
@@ -3055,6 +3064,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             // correctly initialized
             this.setActive(this.isActive, true, true);
             this.updateContainer();
+            if (this.accessor.options.createGroupControlElement) {
+                this._control = this.accessor.options.createGroupControlElement(this.parent);
+                this.addDisposables(this._control);
+                this._control.init({
+                    containerApi: new DockviewApi(this.accessor),
+                    api: this.parent.api,
+                });
+                this.tabsContainer.setActionElement(this._control.element);
+            }
         }
         indexOf(panel) {
             return this.tabsContainer.indexOf(panel.id);
@@ -3135,16 +3153,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();
@@ -3180,14 +3203,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         isPanelActive(panel) {
             return this._activePanel === panel;
         }
-        updateActions() {
-            var _a, _b;
-            if (this.isActive && ((_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.actions)) {
-                this.tabsContainer.setActionElement(this._activePanel.view.actions.element);
-            }
-            else {
-                this.tabsContainer.setActionElement(undefined);
-            }
+        updateActions(element) {
+            this.tabsContainer.setActionElement(element);
         }
         setActive(isGroupActive, skipFocus = false, force = false) {
             var _a, _b;
@@ -3243,16 +3260,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.mostRecentlyUsed.includes(panel)) {
                 this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
             }
-            this._onDidGroupChange.fire({
-                kind: exports.GroupChangeKind2.REMOVE_PANEL,
-                panel,
-            });
+            this._onDidRemovePanel.fire({ 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) {
@@ -3261,10 +3277,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.updateMru(panel);
             this.panels.splice(index, 0, panel);
-            this._onDidGroupChange.fire({
-                kind: exports.GroupChangeKind2.ADD_PANEL,
-                panel,
-            });
+            this._onDidAddPanel.fire({ panel });
         }
         doSetActivePanel(panel) {
             this._activePanel = panel;
@@ -3272,10 +3285,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.tabsContainer.setActivePanel(panel);
                 panel.layout(this._width, this._height);
                 this.updateMru(panel);
-                this._onDidGroupChange.fire({
-                    kind: exports.GroupChangeKind2.PANEL_ACTIVE,
-                    panel,
-                });
+                this._onDidActivePanelChange.fire({ panel });
             }
         }
         updateMru(panel) {
@@ -3285,7 +3295,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.mostRecentlyUsed = [panel, ...this.mostRecentlyUsed];
         }
         updateContainer() {
-            this.updateActions();
             toggleClass(this.container, 'empty', this.isEmpty);
             this.panels.forEach((panel) => panel.updateParentGroup(this.parent, this.isActive));
             if (this.isEmpty && !this.watermark) {
@@ -3318,7 +3327,12 @@ 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),
+                    getData: getPanelData,
+                });
             }
             return false;
         }
@@ -3366,7 +3380,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    const nextLayoutId = sequentialNumberGenerator();
+    const nextLayoutId$1 = sequentialNumberGenerator();
     function toTarget(direction) {
         switch (direction) {
             case 'left':
@@ -3386,7 +3400,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(_element, options) {
             super();
             this._element = _element;
-            this._id = nextLayoutId.next();
+            this._id = nextLayoutId$1.next();
             this._groups = new Map();
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
@@ -3401,7 +3415,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();
@@ -3846,6 +3860,38 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    const createSvgElementFromPath = (params) => {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttributeNS(null, 'height', params.height);
+        svg.setAttributeNS(null, 'width', params.width);
+        svg.setAttributeNS(null, 'viewBox', params.viewbox);
+        svg.setAttributeNS(null, 'aria-hidden', 'false');
+        svg.setAttributeNS(null, 'focusable', 'false');
+        svg.classList.add('dockview-svg');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttributeNS(null, 'd', params.path);
+        svg.appendChild(path);
+        return svg;
+    };
+    const createCloseButton = () => createSvgElementFromPath({
+        width: '11',
+        height: '11',
+        viewbox: '0 0 28 28',
+        path: 'M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z',
+    });
+    const createExpandMoreButton = () => createSvgElementFromPath({
+        width: '11',
+        height: '11',
+        viewbox: '0 0 24 15',
+        path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
+    });
+    const createChevronRightButton = () => createSvgElementFromPath({
+        width: '11',
+        height: '11',
+        viewbox: '0 0 15 25',
+        path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
+    });
+
     class Watermark extends CompositeDisposable {
         constructor() {
             super();
@@ -3862,8 +3908,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const actions = new ActionContainer();
             title.appendChild(emptySpace);
             title.appendChild(actions.element);
-            const closeAnchor = document.createElement('a');
+            const closeAnchor = document.createElement('div');
             closeAnchor.className = 'close-action';
+            closeAnchor.appendChild(createCloseButton());
             actions.add(closeAnchor);
             this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
                 var _a;
@@ -3911,34 +3958,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]
@@ -3964,6 +3983,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         return new Component(id, componentName);
     }
 
+    const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
     class DefaultTab extends CompositeDisposable {
         constructor() {
             super();
@@ -3983,8 +4003,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._list = document.createElement('ul');
             this._list.className = 'tab-list';
             //
-            this.action = document.createElement('a');
+            this.action = document.createElement('div');
             this.action.className = 'tab-action';
+            this.action.appendChild(createCloseButton());
             //
             this._element.appendChild(this._content);
             this._element.appendChild(this._actionContainer);
@@ -4000,7 +4021,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._element;
         }
         get id() {
-            return '__DEFAULT_TAB__';
+            return DEFAULT_TAB_IDENTIFIER;
         }
         update(event) {
             this.params = Object.assign(Object.assign({}, this.params), event.params);
@@ -4317,16 +4338,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             this._content = renderers.content;
             this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-            this._actions =
-                renderers.actions ||
-                    (this.content.actions
-                        ? {
-                            element: this.content.actions,
-                            dispose: () => {
-                                //
-                            },
-                        }
-                        : undefined);
         }
         get content() {
             return this._content;
@@ -4334,9 +4345,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get tab() {
             return this._tab;
         }
-        get actions() {
-            return this._actions;
-        }
         init(params) {
             this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
             this.tab.init(params);
@@ -4354,16 +4362,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.tab.update(event);
         }
         toJSON() {
+            let tab = this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
+            if (tab && Object.keys(tab).length === 0) {
+                tab = undefined;
+            }
             return {
                 content: this.content.toJSON(),
-                tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
+                tab,
             };
         }
         dispose() {
-            var _a;
             this.content.dispose();
             this.tab.dispose();
-            (_a = this.actions) === null || _a === void 0 ? void 0 : _a.dispose();
         }
     }
 
@@ -4375,9 +4385,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();
@@ -4386,11 +4393,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;
@@ -4445,7 +4452,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;
@@ -4523,12 +4530,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');
             }
@@ -4539,12 +4541,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) {
@@ -4552,7 +4573,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()) {
@@ -4750,23 +4787,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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 }));
-                }), view.model.onDidGroupChange((event) => {
-                    switch (event.kind) {
-                        case exports.GroupChangeKind2.ADD_PANEL:
-                            if (event.panel) {
-                                this._onDidAddPanel.fire(event.panel);
-                            }
-                            break;
-                        case exports.GroupChangeKind2.REMOVE_PANEL:
-                            if (event.panel) {
-                                this._onDidRemovePanel.fire(event.panel);
-                            }
-                            break;
-                        case exports.GroupChangeKind2.PANEL_ACTIVE:
-                            this._onDidActivePanelChange.fire(event.panel);
-                            break;
-                    }
+                    this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+                }), view.model.onDidAddPanel((event) => {
+                    this._onDidAddPanel.fire(event.panel);
+                }), view.model.onDidRemovePanel((event) => {
+                    this._onDidRemovePanel.fire(event.panel);
+                }), view.model.onDidActivePanelChange((event) => {
+                    this._onDidActivePanelChange.fire(event.panel);
                 }));
                 this._groups.set(view.id, { value: view, disposable });
             }
@@ -4781,7 +4808,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         createPanel(options, group) {
             const view = new DefaultGroupPanelView({
                 content: this.createContentComponent(options.id, options.component),
-                tab: this.createTabComponent(options.id, options.tabComponent),
+                tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
             });
             const panel = new DockviewGroupPanel(options.id, this, this._api, group);
             panel.init({
@@ -4814,7 +4841,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();
         }
     }
 
@@ -4852,7 +4879,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;
@@ -4888,13 +4915,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             (_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) => {
@@ -4916,6 +4938,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         accessor: this,
                         isVisible: node.visible,
                     }));
+                    this._onDidAddGroup.fire(view);
                     this.registerPanel(view);
                     return view;
                 },
@@ -4930,6 +4953,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;
@@ -5220,13 +5255,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,
@@ -5274,6 +5304,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();
@@ -5523,8 +5561,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     class DraggablePaneviewPanel extends PaneviewPanel {
-        constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
+        constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
             super(id, component, headerComponent, orientation, isExpanded, true);
+            this.accessor = accessor;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
             if (!disableDnd) {
@@ -5536,10 +5575,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 return;
             }
             const id = this.id;
+            const accessorId = this.accessor.id;
             this.header.draggable = true;
             this.handler = new (class PaneDragHandler extends DragHandler {
                 getData() {
-                    LocalSelectionTransfer.getInstance().setData([new PaneTransfer('paneview', id)], PaneTransfer.prototype);
+                    LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                     return {
                         dispose: () => {
                             LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
@@ -5549,12 +5589,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             })(this.header);
             this.target = new Droptarget(this.element, {
                 validOverlays: 'vertical',
-                canDisplayOverlay: () => {
+                canDisplayOverlay: (event) => {
                     const data = getPaneData();
-                    if (!data) {
-                        return true;
+                    if (data) {
+                        if (data.paneId !== this.id &&
+                            data.viewId === this.accessor.id) {
+                            return true;
+                        }
                     }
-                    return data.paneId !== this.id;
+                    if (this.accessor.options.showDndOverlay) {
+                        return this.accessor.options.showDndOverlay({
+                            nativeEvent: event,
+                            getData: getPaneData,
+                            panel: this,
+                        });
+                    }
+                    return false;
                 },
             });
             this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -5563,8 +5613,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         onDrop(event) {
             const data = getPaneData();
-            if (!data) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+            if (!data || data.viewId !== this.accessor.id) {
+                // if there is no local drag event for this panel
+                // or if the drag event was creating by another Paneview instance
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
                 return;
             }
             const containerApi = this._params
@@ -5572,7 +5624,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const panelId = data.paneId;
             const existingPanel = containerApi.getPanel(panelId);
             if (!existingPanel) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                // if the panel doesn't exist
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: getPaneData }));
                 return;
             }
             const allPanels = containerApi.panels;
@@ -5596,15 +5649,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     class DefaultHeader extends CompositeDisposable {
         constructor() {
             super();
+            this._expandedIcon = createExpandMoreButton();
+            this._collapsedIcon = createChevronRightButton();
             this.disposable = new MutableDisposable();
             this.apiRef = { api: null };
             this._element = document.createElement('div');
             this.element.className = 'default-header';
             this._content = document.createElement('span');
-            this._expander = document.createElement('a');
-            this.element.appendChild(this._content);
+            this._expander = document.createElement('div');
+            this._expander.className = 'dockview-pane-header-icon';
             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);
             }));
@@ -5615,11 +5671,32 @@ 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.disposable.value = params.api.onDidExpansionChange((e) => {
-                this._expander.textContent = e.isExpanded ? '<' : '>';
+            this.updateIcon();
+            this.disposable.value = params.api.onDidExpansionChange(() => {
+                this.updateIcon();
             });
         }
+        updateIcon() {
+            var _a;
+            const isExpanded = !!((_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.isExpanded);
+            toggleClass(this._expander, 'collapsed', !isExpanded);
+            if (isExpanded) {
+                if (this._expander.contains(this._collapsedIcon)) {
+                    this._collapsedIcon.remove();
+                }
+                if (!this._expander.contains(this._expandedIcon)) {
+                    this._expander.appendChild(this._expandedIcon);
+                }
+            }
+            else {
+                if (this._expander.contains(this._expandedIcon)) {
+                    this._expandedIcon.remove();
+                }
+                if (!this._expander.contains(this._collapsedIcon)) {
+                    this._expander.appendChild(this._collapsedIcon);
+                }
+            }
+        }
         update(_params) {
             //
         }
@@ -5629,9 +5706,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    const nextLayoutId = sequentialNumberGenerator();
     class PaneFramework extends DraggablePaneviewPanel {
         constructor(options) {
-            super(options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
+            super(options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
             this.options = options;
         }
         getBodyComponent() {
@@ -5645,6 +5723,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(element, options) {
             super();
             this.element = element;
+            this._id = nextLayoutId.next();
             this._disposable = new MutableDisposable();
             this._viewDisposables = new Map();
             this._onDidLayoutfromJSON = new Emitter();
@@ -5671,6 +5750,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             this.addDisposables(this._disposable);
         }
+        get id() {
+            return this._id;
+        }
         get panels() {
             return this.paneview.getPanes();
         }
@@ -5735,6 +5817,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 orientation: exports.Orientation.VERTICAL,
                 isExpanded: !!options.isExpanded,
                 disableDnd: !!this.options.disableDnd,
+                accessor: this,
             });
             this.doAddPanel(view);
             const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
@@ -5793,13 +5876,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: {
@@ -5833,6 +5912,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             orientation: exports.Orientation.VERTICAL,
                             isExpanded: !!view.expanded,
                             disableDnd: !!this.options.disableDnd,
+                            accessor: this,
                         });
                         this.doAddPanel(panel);
                         queue.push(() => {
@@ -5858,6 +5938,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);
@@ -6025,15 +6112,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.component = component;
             this.parameters = parameters;
             this.context = context;
+            this._initialProps = {};
             this.disposed = false;
             this.createPortal();
         }
         update(props) {
-            var _a;
             if (this.disposed) {
                 throw new Error('invalid operation: resource is already disposed');
             }
-            (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
+            if (!this.componentInstance) {
+                // if the component is yet to be mounted store the props
+                this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
+            }
+            else {
+                this.componentInstance.update(props);
+            }
         }
         createPortal() {
             if (this.disposed) {
@@ -6053,6 +6146,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 componentProps: this.parameters,
                 ref: (element) => {
                     this.componentInstance = element;
+                    if (Object.keys(this._initialProps).length > 0) {
+                        this.componentInstance.update(this._initialProps);
+                        this._initialProps = {}; // don't keep a reference to the users object once no longer required
+                    }
                 },
             });
             const node = this.context
@@ -6109,30 +6206,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidBlur = this._onDidBlur.event;
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
-            this._actionsElement = document.createElement('div');
-            this._actionsElement.className = 'dockview-react-part';
         }
         get element() {
             return this._element;
         }
-        get actions() {
-            return this._actionsElement;
-        }
         focus() {
             // TODO
         }
         init(parameters) {
-            const context = {
-                api: parameters.api,
-                containerApi: parameters.containerApi,
-                actionsPortalElement: this._actionsElement,
-                tabPortalElement: parameters.tab,
-            };
             this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
                 params: parameters.params,
                 api: parameters.api,
                 containerApi: parameters.containerApi,
-            }, context);
+            });
         }
         toJSON() {
             return {
@@ -6150,11 +6236,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             // noop
         }
         dispose() {
-            var _a, _b;
+            var _a;
             this._onDidFocus.dispose();
             this._onDidBlur.dispose();
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-            (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
         }
     }
 
@@ -6184,6 +6269,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
         }
         toJSON() {
+            if (this.id === DEFAULT_TAB_IDENTIFIER) {
+                return {};
+            }
             return {
                 id: this.id,
             };
@@ -6205,17 +6293,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.layout = layout;
         }
         fromJSON(panelData, group) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const panelId = panelData.id;
             const params = panelData.params;
             const title = panelData.title;
             const suppressClosable = panelData.suppressClosable;
             const viewData = panelData.view;
+            let tab;
+            if ((_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id) {
+                tab = createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
+            }
+            else if (this.layout.options.defaultTabComponent) {
+                tab = createComponent(this.layout.options.defaultTabComponent, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
+            }
+            else {
+                tab = new DefaultTab();
+            }
             const view = new DefaultGroupPanelView({
-                content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_a = this.layout.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content),
-                tab: ((_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id)
-                    ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
-                    : new DefaultTab(),
+                content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
+                tab,
             });
             const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
             panel.init({
@@ -6283,6 +6379,80 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    class ReactGroupControlsRendererPart {
+        constructor(component, reactPortalStore, _group) {
+            this.component = component;
+            this.reactPortalStore = reactPortalStore;
+            this._group = _group;
+            this.mutableDisposable = new MutableDisposable();
+            this._element = document.createElement('div');
+            this._element.className = 'dockview-react-part';
+        }
+        get element() {
+            return this._element;
+        }
+        get part() {
+            return this._part;
+        }
+        get group() {
+            return this._group;
+        }
+        focus() {
+            // TODO
+        }
+        init(parameters) {
+            this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
+                this.updatePanels();
+            }), this._group.model.onDidRemovePanel(() => {
+                this.updatePanels();
+            }), this._group.model.onDidActivePanelChange(() => {
+                this.updateActivePanel();
+            }), parameters.api.onDidActiveChange(() => {
+                this.updateGroupActive();
+            }));
+            this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+                api: parameters.api,
+                containerApi: parameters.containerApi,
+                panels: this._group.model.panels,
+                activePanel: this._group.model.activePanel,
+                isGroupActive: this._group.api.isActive,
+            });
+        }
+        update(event) {
+            var _a;
+            (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+        }
+        dispose() {
+            var _a;
+            this.mutableDisposable.dispose();
+            (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
+        }
+        updatePanels() {
+            this.update({ params: { panels: this._group.model.panels } });
+        }
+        updateActivePanel() {
+            this.update({
+                params: {
+                    activePanel: this._group.model.activePanel,
+                },
+            });
+        }
+        updateGroupActive() {
+            this.update({
+                params: {
+                    isGroupActive: this._group.api.isActive,
+                },
+            });
+        }
+    }
+
+    function createGroupControlElement(component, store) {
+        return component
+            ? (groupPanel) => {
+                return new ReactGroupControlsRendererPart(component, store, groupPanel);
+            }
+            : undefined;
+    }
     const DockviewReact = React__namespace.forwardRef((props, ref) => {
         const domRef = React__namespace.useRef(null);
         const dockviewRef = React__namespace.useRef();
@@ -6332,12 +6502,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const dockview = new DockviewComponent(element, {
                 frameworkComponentFactory: factory,
                 frameworkComponents: props.components,
-                frameworkTabComponents: props.tabComponents,
+                frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
                 tabHeight: props.tabHeight,
                 watermarkFrameworkComponent: props.watermarkComponent,
+                defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
+                showDndOverlay: props.showDndOverlay,
+                createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
             });
             (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
             dockview.deserializer = new ReactPanelDeserialzier(dockview);
@@ -6414,10 +6587,79 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onTabContextMenu]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+                frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+            });
+        }, [props.defaultTabComponent]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+            });
+        }, [props.groupControlComponent]);
         return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     DockviewReact.displayName = 'DockviewComponent';
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    const CloseButton = () => (React__namespace.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+        React__namespace.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
+
+    const DockviewDefaultTab = (_a) => {
+        var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+        const onClose = React__namespace.useCallback((event) => {
+            event.stopPropagation();
+            api.close();
+        }, [api]);
+        const onClick = React__namespace.useCallback((event) => {
+            api.setActive();
+            if (rest.onClick) {
+                rest.onClick(event);
+            }
+        }, [api, rest.onClick]);
+        const iconClassname = React__namespace.useMemo(() => {
+            const cn = ['dockview-react-tab-action'];
+            return cn.join(',');
+        }, [api.suppressClosable]);
+        return (React__namespace.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+            React__namespace.createElement("span", { className: "dockview-react-tab-title" }, api.title),
+            React__namespace.createElement("div", { className: iconClassname, onClick: onClose },
+                React__namespace.createElement(CloseButton, null))));
+    };
+
     class ReactPanelView extends SplitviewPanel {
         constructor(id, component, reactComponent, reactPortalStore) {
             super(id, component);
@@ -6647,6 +6889,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         createComponent,
                     },
                 },
+                showDndOverlay: props.showDndOverlay,
             });
             const api = new PaneviewApi(paneview);
             const { clientWidth, clientHeight } = domRef.current;
@@ -6691,6 +6934,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onDidDrop]);
+        React__namespace.useEffect(() => {
+            if (!paneviewRef.current) {
+                return;
+            }
+            paneviewRef.current.updateOptions({
+                showDndOverlay: props.showDndOverlay,
+            });
+        }, [props.showDndOverlay]);
         return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     PaneviewReact.displayName = 'PaneviewComponent';
@@ -6699,6 +6950,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.ContentContainer = ContentContainer;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
+    exports.DockviewDefaultTab = DockviewDefaultTab;
     exports.DockviewReact = DockviewReact;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
@@ -6715,8 +6967,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.PaneviewComponent = PaneviewComponent;
     exports.PaneviewPanel = PaneviewPanel;
     exports.PaneviewReact = PaneviewReact;
-    exports.ReactPanelContentPart = ReactPanelContentPart;
-    exports.ReactPanelHeaderPart = ReactPanelHeaderPart;
     exports.ReactPart = ReactPart;
     exports.ReactPartContext = ReactPartContext;
     exports.Splitview = Splitview;