dockview 1.4.3 → 1.5.0

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.4.3
+ * @version 1.5.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -2682,6 +2682,7 @@
         constructor(panelId, accessor, group) {
             super();
             this.panelId = panelId;
+            this.accessor = accessor;
             this.group = group;
             this._onChanged = new Emitter();
             this.onChanged = this._onChanged.event;
@@ -2732,7 +2733,7 @@
                 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, exports.DockviewDropTargets.Tab);
@@ -2790,7 +2791,7 @@
                 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;
                     }
@@ -2947,12 +2948,6 @@
         }
     }
 
-    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();
@@ -2971,12 +2966,15 @@
             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,
             });
@@ -2988,7 +2986,7 @@
                         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;
                     }
@@ -2998,7 +2996,7 @@
             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);
@@ -3070,6 +3068,15 @@
             // 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);
@@ -3200,14 +3207,8 @@
         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;
@@ -3263,10 +3264,7 @@
             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, skipSetActive = false) {
             const existingPanel = this._panels.indexOf(panel);
@@ -3283,10 +3281,7 @@
             }
             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;
@@ -3294,10 +3289,7 @@
                 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) {
@@ -3307,7 +3299,6 @@
             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) {
@@ -3344,6 +3335,7 @@
                     nativeEvent: event,
                     target,
                     group: this.accessor.getPanel(this.id),
+                    getData: getPanelData,
                 });
             }
             return false;
@@ -3392,7 +3384,7 @@
         }
     }
 
-    const nextLayoutId = sequentialNumberGenerator();
+    const nextLayoutId$1 = sequentialNumberGenerator();
     function toTarget(direction) {
         switch (direction) {
             case 'left':
@@ -3412,7 +3404,7 @@
         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;
@@ -3872,6 +3864,38 @@
         }
     }
 
+    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();
@@ -3888,8 +3912,9 @@
             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;
@@ -3962,6 +3987,7 @@
         return new Component(id, componentName);
     }
 
+    const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
     class DefaultTab extends CompositeDisposable {
         constructor() {
             super();
@@ -3981,8 +4007,9 @@
             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);
@@ -3998,7 +4025,7 @@
             return this._element;
         }
         get id() {
-            return '__DEFAULT_TAB__';
+            return DEFAULT_TAB_IDENTIFIER;
         }
         update(event) {
             this.params = Object.assign(Object.assign({}, this.params), event.params);
@@ -4315,16 +4342,6 @@
             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;
@@ -4332,9 +4349,6 @@
         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);
@@ -4352,16 +4366,18 @@
             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();
         }
     }
 
@@ -4776,22 +4792,12 @@
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }), view.model.onDidDrop((event) => {
                     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:
-                            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;
-                    }
+                }), 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 });
             }
@@ -4806,7 +4812,7 @@
         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({
@@ -5559,8 +5565,9 @@
     }
 
     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) {
@@ -5572,10 +5579,11 @@
                 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);
@@ -5585,12 +5593,22 @@
             })(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;
+                        }
+                    }
+                    if (this.accessor.options.showDndOverlay) {
+                        return this.accessor.options.showDndOverlay({
+                            nativeEvent: event,
+                            getData: getPaneData,
+                            panel: this,
+                        });
                     }
-                    return data.paneId !== this.id;
+                    return false;
                 },
             });
             this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -5599,8 +5617,10 @@
         }
         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
@@ -5608,7 +5628,8 @@
             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;
@@ -5632,12 +5653,15 @@
     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._expander = document.createElement('div');
+            this._expander.className = 'dockview-pane-header-icon';
             this.element.appendChild(this._expander);
             this.element.appendChild(this._content);
             this.addDisposables(addDisposableListener(this._element, 'click', () => {
@@ -5651,12 +5675,32 @@
         init(params) {
             this.apiRef.api = params.api;
             this._content.textContent = params.title;
-            this._expander.textContent = '▼';
-            toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
-            this.disposable.value = params.api.onDidExpansionChange((e) => {
-                toggleClass(this._expander, 'collapsed', !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) {
             //
         }
@@ -5666,9 +5710,10 @@
         }
     }
 
+    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() {
@@ -5682,6 +5727,7 @@
         constructor(element, options) {
             super();
             this.element = element;
+            this._id = nextLayoutId.next();
             this._disposable = new MutableDisposable();
             this._viewDisposables = new Map();
             this._onDidLayoutfromJSON = new Emitter();
@@ -5708,6 +5754,9 @@
             });
             this.addDisposables(this._disposable);
         }
+        get id() {
+            return this._id;
+        }
         get panels() {
             return this.paneview.getPanes();
         }
@@ -5772,6 +5821,7 @@
                 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;
@@ -5866,6 +5916,7 @@
                             orientation: exports.Orientation.VERTICAL,
                             isExpanded: !!view.expanded,
                             disableDnd: !!this.options.disableDnd,
+                            accessor: this,
                         });
                         this.doAddPanel(panel);
                         queue.push(() => {
@@ -6065,15 +6116,21 @@
             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) {
@@ -6093,6 +6150,10 @@
                 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
@@ -6149,30 +6210,19 @@
             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 {
@@ -6190,11 +6240,10 @@
             // 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();
         }
     }
 
@@ -6224,6 +6273,9 @@
             (_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,
             };
@@ -6245,17 +6297,25 @@
             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({
@@ -6323,6 +6383,80 @@
         }
     }
 
+    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();
@@ -6372,12 +6506,15 @@
             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);
@@ -6454,10 +6591,79 @@
                 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);
@@ -6687,6 +6893,7 @@
                         createComponent,
                     },
                 },
+                showDndOverlay: props.showDndOverlay,
             });
             const api = new PaneviewApi(paneview);
             const { clientWidth, clientHeight } = domRef.current;
@@ -6731,6 +6938,14 @@
                 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';
@@ -6739,6 +6954,7 @@
     exports.ContentContainer = ContentContainer;
     exports.DockviewApi = DockviewApi;
     exports.DockviewComponent = DockviewComponent;
+    exports.DockviewDefaultTab = DockviewDefaultTab;
     exports.DockviewReact = DockviewReact;
     exports.Gridview = Gridview;
     exports.GridviewApi = GridviewApi;
@@ -6755,8 +6971,6 @@
     exports.PaneviewComponent = PaneviewComponent;
     exports.PaneviewPanel = PaneviewPanel;
     exports.PaneviewReact = PaneviewReact;
-    exports.ReactPanelContentPart = ReactPanelContentPart;
-    exports.ReactPanelHeaderPart = ReactPanelHeaderPart;
     exports.ReactPart = ReactPart;
     exports.ReactPartContext = ReactPartContext;
     exports.Splitview = Splitview;