dockview 1.10.1 → 1.11.0

package/dist/dockview.amd.noStyle.js

@@ -1,31 +1,11 @@
 /**
  * dockview
- * @version 1.10.1
+ * @version 1.11.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
 define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) { 'use strict';
 
-    function _interopNamespaceDefault(e) {
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n.default = e;
-        return Object.freeze(n);
-    }
-
-    var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-    var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
-
     class TransferObject {
     }
     class PanelTransfer extends TransferObject {
@@ -4255,6 +4235,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._width = 0;
             this._height = 0;
             this._panels = [];
+            this._panelDisposables = new Map();
             this._onMove = new Emitter();
             this.onMove = this._onMove.event;
             this._onDidDrop = new Emitter();
@@ -4269,6 +4250,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onGroupDragStart = this._onGroupDragStart.event;
             this._onDidAddPanel = new Emitter();
             this.onDidAddPanel = this._onDidAddPanel.event;
+            this._onDidPanelTitleChange = new Emitter();
+            this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+            this._onDidPanelParametersChange = new Emitter();
+            this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
             this._onDidRemovePanel = new Emitter();
             this.onDidRemovePanel = this._onDidRemovePanel.event;
             this._onDidActivePanelChange = new Emitter();
@@ -4557,6 +4542,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.mostRecentlyUsed.includes(panel)) {
                 this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
             }
+            const disposable = this._panelDisposables.get(panel.id);
+            if (disposable) {
+                disposable.dispose();
+                this._panelDisposables.delete(panel.id);
+            }
             this._onDidRemovePanel.fire({ panel });
         }
         doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
@@ -4574,6 +4564,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.updateMru(panel);
             this.panels.splice(index, 0, panel);
+            this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
             this._onDidAddPanel.fire({ panel });
         }
         doSetActivePanel(panel) {
@@ -4997,14 +4988,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get height() {
             return this._height;
         }
-        constructor(id) {
+        constructor(id, component) {
             super();
             this.id = id;
+            this.component = component;
             this._isFocused = false;
             this._isActive = false;
             this._isVisible = true;
             this._width = 0;
             this._height = 0;
+            this._parameters = {};
             this.panelUpdatesDisposable = new MutableDisposable();
             this._onDidDimensionChange = new Emitter();
             this.onDidDimensionsChange = this._onDidDimensionChange.event;
@@ -5022,8 +5015,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidActiveChange = this._onDidActiveChange.event;
             this._onActiveChange = new Emitter();
             this.onActiveChange = this._onActiveChange.event;
-            this._onUpdateParameters = new Emitter();
-            this.onUpdateParameters = this._onUpdateParameters.event;
+            this._onDidParametersChange = new Emitter();
+            this.onDidParametersChange = this._onDidParametersChange.event;
             this.addDisposables(this.onDidFocusChange((event) => {
                 this._isFocused = event.isFocused;
             }), this.onDidActiveChange((event) => {
@@ -5033,10 +5026,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), this.onDidDimensionsChange((event) => {
                 this._width = event.width;
                 this._height = event.height;
-            }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onWillVisibilityChange, this._onUpdateParameters);
+            }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+        }
+        getParameters() {
+            return this._parameters;
         }
         initialize(panel) {
-            this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+            this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
+                this._parameters = parameters;
                 panel.update({
                     params: parameters,
                 });
@@ -5049,14 +5046,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onActiveChange.fire();
         }
         updateParameters(parameters) {
-            this._onUpdateParameters.fire(parameters);
+            this._onDidParametersChange.fire(parameters);
         }
     }
 
     class SplitviewPanelApiImpl extends PanelApiImpl {
         //
-        constructor(id) {
-            super(id);
+        constructor(id, component) {
+            super(id, component);
             this._onDidConstraintsChangeInternal = new Emitter();
             this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
             //
@@ -5081,8 +5078,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         set pane(pane) {
             this._pane = pane;
         }
-        constructor(id) {
-            super(id);
+        constructor(id, component) {
+            super(id, component);
             this._onDidExpansionChange = new Emitter({
                 replay: true,
             });
@@ -5241,7 +5238,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.header.style.display = value ? '' : 'none';
         }
         constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-            super(id, component, new PaneviewPanelApiImpl(id));
+            super(id, component, new PaneviewPanelApiImpl(id, component));
             this.headerComponent = headerComponent;
             this._onDidChangeExpansionState = new Emitter({ replay: true });
             this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
@@ -5472,8 +5469,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     class GridviewPanelApiImpl extends PanelApiImpl {
-        constructor(id, panel) {
-            super(id);
+        constructor(id, component, panel) {
+            super(id, component);
             this._onDidConstraintsChangeInternal = new Emitter();
             this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
             this._onDidConstraintsChange = new Emitter();
@@ -5544,7 +5541,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this.api.isActive;
         }
         constructor(id, component, options, api) {
-            super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
+            super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
             this._evaluatedMinimumWidth = 0;
             this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
             this._evaluatedMinimumHeight = 0;
@@ -5652,7 +5649,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._group.model.location;
         }
         constructor(id, accessor) {
-            super(id);
+            super(id, '__dockviewgroup__');
             this.accessor = accessor;
             this._onDidLocationChange = new Emitter();
             this.onDidLocationChange = this._onDidLocationChange.event;
@@ -5826,8 +5823,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get group() {
             return this._group;
         }
-        constructor(panel, group, accessor) {
-            super(panel.id);
+        get tabComponent() {
+            return this._tabComponent;
+        }
+        constructor(panel, group, accessor, component, tabComponent) {
+            super(panel.id, component);
             this.panel = panel;
             this.accessor = accessor;
             this._onDidTitleChange = new Emitter();
@@ -5841,6 +5841,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidLocationChange = new Emitter();
             this.onDidLocationChange = this._onDidLocationChange.event;
             this.groupEventsDisposable = new MutableDisposable();
+            this._tabComponent = tabComponent;
             this.initialize(panel);
             this._group = group;
             this.setupGroupEventListeners();
@@ -5923,7 +5924,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             var _a;
             return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
         }
-        constructor(id, accessor, containerApi, group, view, options) {
+        constructor(id, component, tabComponent, accessor, containerApi, group, view, options) {
             super();
             this.id = id;
             this.accessor = accessor;
@@ -5931,7 +5932,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.view = view;
             this._renderer = options.renderer;
             this._group = group;
-            this.api = new DockviewPanelApiImpl(this, this._group, accessor);
+            this.api = new DockviewPanelApiImpl(this, this._group, accessor, component, tabComponent);
             this.addDisposables(this.api.onActiveChange(() => {
                 accessor.setActivePanel(this);
             }), this.api.onDidSizeChange((event) => {
@@ -6099,27 +6100,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             //
             this.params = {};
             this._element = document.createElement('div');
-            this._element.className = 'default-tab';
+            this._element.className = 'dv-default-tab';
             //
             this._content = document.createElement('div');
-            this._content.className = 'tab-content';
-            //
-            this._actionContainer = document.createElement('div');
-            this._actionContainer.className = 'action-container';
-            //
-            this._list = document.createElement('ul');
-            this._list.className = 'tab-list';
-            //
+            this._content.className = 'dv-default-tab-content';
             this.action = document.createElement('div');
-            this.action.className = 'tab-action';
+            this.action.className = 'dv-default-tab-action';
             this.action.appendChild(createCloseButton());
             //
             this._element.appendChild(this._content);
-            this._element.appendChild(this._actionContainer);
-            this._actionContainer.appendChild(this._list);
-            this._list.appendChild(this.action);
+            this._element.appendChild(this.action);
             //
-            this.addDisposables(addDisposableListener(this._actionContainer, 'mousedown', (ev) => {
+            this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
                 ev.preventDefault();
             }));
             this.render();
@@ -6226,7 +6218,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
                 : panelData.tabComponent;
             const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
-            const panel = new DockviewPanel(panelId, this.accessor, new DockviewApi(this.accessor), group, view, {
+            const panel = new DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new DockviewApi(this.accessor), group, view, {
                 renderer: panelData.renderer,
             });
             panel.init({
@@ -8213,6 +8205,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     if (this._onDidActivePanelChange.value !== event.panel) {
                         this._onDidActivePanelChange.fire(event.panel);
                     }
+                }), exports.DockviewEvent.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
+                    this._bufferOnDidLayoutChange.fire();
                 }));
                 this._groups.set(view.id, { value: view, disposable });
             }
@@ -8225,7 +8219,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const contentComponent = options.component;
             const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
             const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-            const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
+            const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
             panel.init({
                 title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
                 params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
@@ -9140,7 +9134,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._snap;
         }
         constructor(id, componentName) {
-            super(id, componentName, new SplitviewPanelApiImpl(id));
+            super(id, componentName, new SplitviewPanelApiImpl(id, componentName));
             this._evaluatedMinimumSize = 0;
             this._evaluatedMaximumSize = Number.POSITIVE_INFINITY;
             this._minimumSize = 0;
@@ -9220,9 +9214,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
      * component
      */
     const ReactComponentBridge = (props, ref) => {
-        const [_, triggerRender] = React__namespace.useState();
-        const _props = React__namespace.useRef(props.componentProps);
-        React__namespace.useImperativeHandle(ref, () => ({
+        const [_, triggerRender] = React.useState();
+        const _props = React.useRef(props.componentProps);
+        React.useImperativeHandle(ref, () => ({
             update: (componentProps) => {
                 _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
                 /**
@@ -9234,7 +9228,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 triggerRender(Date.now());
             },
         }), []);
-        return React__namespace.createElement(props.component, _props.current);
+        return React.createElement(props.component, _props.current);
     };
     ReactComponentBridge.displayName = 'DockviewReactJsBridge';
     /**
@@ -9246,7 +9240,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         let value = 1;
         return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
     })();
-    const ReactPartContext = React__namespace.createContext({});
+    const ReactPartContext = React.createContext({});
     class ReactPart {
         constructor(parent, portalStore, component, parameters, context) {
             this.parent = parent;
@@ -9282,7 +9276,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                  */
                 throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
             }
-            const bridgeComponent = React__namespace.createElement(React__namespace.forwardRef(ReactComponentBridge), {
+            const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
                 component: this
                     .component,
                 componentProps: this.parameters,
@@ -9295,9 +9289,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             });
             const node = this.context
-                ? React__namespace.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+                ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
                 : bridgeComponent;
-            const portal = ReactDOM__namespace.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+            const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
             this.ref = {
                 portal,
                 disposable: this.portalStore.addPortal(portal),
@@ -9315,9 +9309,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
      * portal array
      */
     const usePortalsLifecycle = () => {
-        const [portals, setPortals] = React__namespace.useState([]);
-        React__namespace.useDebugValue(`Portal count: ${portals.length}`);
-        const addPortal = React__namespace.useCallback((portal) => {
+        const [portals, setPortals] = React.useState([]);
+        React.useDebugValue(`Portal count: ${portals.length}`);
+        const addPortal = React.useCallback((portal) => {
             setPortals((existingPortals) => [...existingPortals, portal]);
             let disposed = false;
             return {
@@ -9355,6 +9349,8 @@ 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._element.style.height = '100%';
+            this._element.style.width = '100%';
         }
         focus() {
             // TODO
@@ -9391,6 +9387,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.reactPortalStore = reactPortalStore;
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
+            this._element.style.height = '100%';
+            this._element.style.width = '100%';
         }
         focus() {
             //noop
@@ -9425,6 +9423,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.reactPortalStore = reactPortalStore;
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
+            this._element.style.height = '100%';
+            this._element.style.width = '100%';
         }
         init(parameters) {
             this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
@@ -9476,6 +9476,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.mutableDisposable = new MutableDisposable();
             this._element = document.createElement('div');
             this._element.className = 'dockview-react-part';
+            this._element.style.height = '100%';
+            this._element.style.width = '100%';
         }
         focus() {
             // TODO
@@ -9535,12 +9537,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             : undefined;
     }
     const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
-    const DockviewReact = React__namespace.forwardRef((props, ref) => {
-        const domRef = React__namespace.useRef(null);
-        const dockviewRef = React__namespace.useRef();
+    const DockviewReact = React.forwardRef((props, ref) => {
+        const domRef = React.useRef(null);
+        const dockviewRef = React.useRef();
         const [portals, addPortal] = usePortalsLifecycle();
-        React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-        React__namespace.useEffect(() => {
+        React.useImperativeHandle(ref, () => domRef.current, []);
+        React.useEffect(() => {
             var _a;
             if (!domRef.current) {
                 return () => {
@@ -9611,13 +9613,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 dockview.dispose();
             };
         }, []);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
             dockviewRef.current.locked = !!props.locked;
         }, [props.locked]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9625,7 +9627,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disableDnd: props.disableDnd,
             });
         }, [props.disableDnd]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return () => {
                     // noop
@@ -9640,7 +9642,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onDidDrop]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return () => {
                     // noop
@@ -9655,7 +9657,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onWillDrop]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9663,7 +9665,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9671,7 +9673,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 floatingGroupBounds: props.floatingGroupBounds,
             });
         }, [props.floatingGroupBounds]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9679,7 +9681,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 watermarkFrameworkComponent: props.watermarkComponent,
             });
         }, [props.watermarkComponent]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9687,7 +9689,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 showDndOverlay: props.showDndOverlay,
             });
         }, [props.showDndOverlay]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9695,7 +9697,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkTabComponents: props.tabComponents,
             });
         }, [props.tabComponents]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9703,7 +9705,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disableFloatingGroups: props.disableFloatingGroups,
             });
         }, [props.disableFloatingGroups]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             var _a;
             if (!dockviewRef.current) {
                 return;
@@ -9720,7 +9722,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkTabComponents,
             });
         }, [props.defaultTabComponent]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9728,7 +9730,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
             });
         }, [props.rightHeaderActionsComponent]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9736,7 +9738,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
             });
         }, [props.leftHeaderActionsComponent]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9744,7 +9746,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 rootOverlayModel: props.rootOverlayModel,
             });
         }, [props.rootOverlayModel]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
             }
@@ -9752,7 +9754,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
             });
         }, [props.prefixHeaderActionsComponent]);
-        return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+        return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     DockviewReact.displayName = 'DockviewComponent';
 
@@ -9790,12 +9792,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    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 CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+        React.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, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
-        const onClose = React__namespace.useCallback((event) => {
+        const onClose = React.useCallback((event) => {
             event.preventDefault();
             if (closeActionOverride) {
                 closeActionOverride();
@@ -9804,10 +9806,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 api.close();
             }
         }, [api, closeActionOverride]);
-        const onMouseDown = React__namespace.useCallback((e) => {
+        const onMouseDown = React.useCallback((e) => {
             e.preventDefault();
         }, []);
-        const onClick = React__namespace.useCallback((event) => {
+        const onClick = React.useCallback((event) => {
             if (event.defaultPrevented) {
                 return;
             }
@@ -9816,10 +9818,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 rest.onClick(event);
             }
         }, [api, rest.onClick]);
-        return (React__namespace.createElement("div", Object.assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
-            React__namespace.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-            !hideClose && (React__namespace.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
-                React__namespace.createElement(CloseButton, null)))));
+        return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
+            React.createElement("span", { className: "dv-default-tab-content" }, api.title),
+            !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
+                React.createElement(CloseButton, null)))));
     };
 
     class ReactPanelView extends SplitviewPanel {
@@ -9838,12 +9840,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    const SplitviewReact = React__namespace.forwardRef((props, ref) => {
-        const domRef = React__namespace.useRef(null);
-        const splitviewRef = React__namespace.useRef();
+    const SplitviewReact = React.forwardRef((props, ref) => {
+        const domRef = React.useRef(null);
+        const splitviewRef = React.useRef();
         const [portals, addPortal] = usePortalsLifecycle();
-        React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-        React__namespace.useEffect(() => {
+        React.useImperativeHandle(ref, () => domRef.current, []);
+        React.useEffect(() => {
             var _a;
             const splitview = new SplitviewComponent({
                 parentElement: domRef.current,
@@ -9874,7 +9876,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 splitview.dispose();
             };
         }, []);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!splitviewRef.current) {
                 return;
             }
@@ -9882,7 +9884,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
-        return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+        return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     SplitviewReact.displayName = 'SplitviewComponent';
 
@@ -9904,12 +9906,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    const GridviewReact = React__namespace.forwardRef((props, ref) => {
-        const domRef = React__namespace.useRef(null);
-        const gridviewRef = React__namespace.useRef();
+    const GridviewReact = React.forwardRef((props, ref) => {
+        const domRef = React.useRef(null);
+        const gridviewRef = React.useRef();
         const [portals, addPortal] = usePortalsLifecycle();
-        React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-        React__namespace.useEffect(() => {
+        React.useImperativeHandle(ref, () => domRef.current, []);
+        React.useEffect(() => {
             var _a;
             if (!domRef.current) {
                 return () => {
@@ -9945,7 +9947,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 gridview.dispose();
             };
         }, []);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!gridviewRef.current) {
                 return;
             }
@@ -9953,7 +9955,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
-        return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+        return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     GridviewReact.displayName = 'GridviewComponent';
 
@@ -9992,12 +9994,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    const PaneviewReact = React__namespace.forwardRef((props, ref) => {
-        const domRef = React__namespace.useRef(null);
-        const paneviewRef = React__namespace.useRef();
+    const PaneviewReact = React.forwardRef((props, ref) => {
+        const domRef = React.useRef(null);
+        const paneviewRef = React.useRef();
         const [portals, addPortal] = usePortalsLifecycle();
-        React__namespace.useImperativeHandle(ref, () => domRef.current, []);
-        React__namespace.useEffect(() => {
+        React.useImperativeHandle(ref, () => domRef.current, []);
+        React.useEffect(() => {
             const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
                 addPortal,
             });
@@ -10030,7 +10032,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 paneview.dispose();
             };
         }, []);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!paneviewRef.current) {
                 return;
             }
@@ -10038,7 +10040,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!paneviewRef.current) {
                 return;
             }
@@ -10046,7 +10048,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 headerframeworkComponents: props.headerComponents,
             });
         }, [props.headerComponents]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!paneviewRef.current) {
                 return () => {
                     //
@@ -10062,7 +10064,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 disposable.dispose();
             };
         }, [props.onDidDrop]);
-        React__namespace.useEffect(() => {
+        React.useEffect(() => {
             if (!paneviewRef.current) {
                 return;
             }
@@ -10070,7 +10072,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 showDndOverlay: props.showDndOverlay,
             });
         }, [props.showDndOverlay]);
-        return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+        return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     PaneviewReact.displayName = 'PaneviewComponent';