dockview-react 1.15.2 → 1.16.0

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

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 1.15.2
+ * @version 1.16.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -531,6 +531,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     function addTestId(element, id) {
         element.setAttribute('data-testid', id);
     }
+    function disableIframePointEvents() {
+        const iframes = [
+            ...getElementsByTagName('iframe'),
+            ...getElementsByTagName('webview'),
+        ];
+        const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
+        for (const iframe of iframes) {
+            original.set(iframe, iframe.style.pointerEvents);
+            iframe.style.pointerEvents = 'none';
+        }
+        return {
+            release: () => {
+                var _a;
+                for (const iframe of iframes) {
+                    iframe.style.pointerEvents = (_a = original.get(iframe)) !== null && _a !== void 0 ? _a : 'auto';
+                }
+                iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
+            },
+        };
+    }
 
     function tail(arr) {
         if (arr.length === 0) {
@@ -1053,13 +1073,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     for (const item of this.viewItems) {
                         item.enabled = false;
                     }
-                    const iframes = [
-                        ...getElementsByTagName('iframe'),
-                        ...getElementsByTagName('webview'),
-                    ];
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'none';
-                    }
+                    const iframes = disableIframePointEvents();
                     const start = this._orientation === exports.Orientation.HORIZONTAL
                         ? event.clientX
                         : event.clientY;
@@ -1121,9 +1135,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         for (const item of this.viewItems) {
                             item.enabled = true;
                         }
-                        for (const iframe of iframes) {
-                            iframe.style.pointerEvents = 'auto';
-                        }
+                        iframes.release();
                         this.saveProportions();
                         document.removeEventListener('pointermove', onPointerMove);
                         document.removeEventListener('pointerup', end);
@@ -1290,29 +1302,47 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (this.viewItems.length === 0) {
                 return;
             }
-            const sashCount = this.viewItems.length - 1;
-            const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+            const visibleViewItems = this.viewItems.filter((i) => i.visible);
+            const sashCount = Math.max(0, visibleViewItems.length - 1);
+            const marginReducedSize = (this.margin * sashCount) / Math.max(1, visibleViewItems.length);
             let totalLeftOffset = 0;
             const viewLeftOffsets = [];
-            for (let i = 0; i < this.viewItems.length - 1; i++) {
-                totalLeftOffset += this.viewItems[i].size;
-                viewLeftOffsets.push(totalLeftOffset);
-                const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
-                if (this._orientation === exports.Orientation.HORIZONTAL) {
-                    this.sashes[i].container.style.left = `${offset}px`;
-                    this.sashes[i].container.style.top = `0px`;
+            const sashWidth = 4; // hardcoded in css
+            const runningVisiblePanelCount = this.viewItems.reduce((arr, viewItem, i) => {
+                const flag = viewItem.visible ? 1 : 0;
+                if (i === 0) {
+                    arr.push(flag);
                 }
-                if (this._orientation === exports.Orientation.VERTICAL) {
-                    this.sashes[i].container.style.left = `0px`;
-                    this.sashes[i].container.style.top = `${offset}px`;
+                else {
+                    arr.push(arr[i - 1] + flag);
                 }
-            }
+                return arr;
+            }, []);
+            // calculate both view and cash positions
             this.viewItems.forEach((view, i) => {
-                const size = view.size - marginReducedSize;
-                const offset = i === 0
+                totalLeftOffset += this.viewItems[i].size;
+                viewLeftOffsets.push(totalLeftOffset);
+                const size = view.visible ? view.size - marginReducedSize : 0;
+                const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1);
+                const offset = i === 0 || visiblePanelsBeforeThisView === 0
                     ? 0
                     : viewLeftOffsets[i - 1] +
-                        (i / sashCount) * marginReducedSize;
+                        (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+                if (i < this.viewItems.length - 1) {
+                    // calculate sash position
+                    const newSize = view.visible
+                        ? offset + size - sashWidth / 2 + this.margin / 2
+                        : offset;
+                    if (this._orientation === exports.Orientation.HORIZONTAL) {
+                        this.sashes[i].container.style.left = `${newSize}px`;
+                        this.sashes[i].container.style.top = `0px`;
+                    }
+                    if (this._orientation === exports.Orientation.VERTICAL) {
+                        this.sashes[i].container.style.left = `0px`;
+                        this.sashes[i].container.style.top = `${newSize}px`;
+                    }
+                }
+                // calculate view position
                 if (this._orientation === exports.Orientation.HORIZONTAL) {
                     view.container.style.width = `${size}px`;
                     view.container.style.left = `${offset}px`;
@@ -2656,6 +2686,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
             this.element.style.height = '100%';
             this.element.style.width = '100%';
+            if (typeof options.className === 'string') {
+                this.element.classList.add(options.className);
+            }
             options.parentElement.appendChild(this.element);
             this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
             this.gridview.locked = !!options.locked;
@@ -2859,12 +2892,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         constructor(component) {
             this.component = component;
         }
-        /**
-         * Update configuratable options.
-         */
-        updateOptions(options) {
-            this.component.updateOptions(options);
-        }
         /**
          * Removes an existing panel and optionally provide a `Sizing` method
          * for the subsequent resize.
@@ -2918,6 +2945,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         clear() {
             this.component.clear();
         }
+        /**
+         * Update configuratable options.
+         */
+        updateOptions(options) {
+            this.component.updateOptions(options);
+        }
+        /**
+         * Release resources and teardown component. Do not call when using framework versions of dockview.
+         */
+        dispose() {
+            this.component.dispose();
+        }
     }
     class PaneviewApi {
         /**
@@ -3045,6 +3084,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         clear() {
             this.component.clear();
         }
+        /**
+         * Update configuratable options.
+         */
+        updateOptions(options) {
+            this.component.updateOptions(options);
+        }
+        /**
+         * Release resources and teardown component. Do not call when using framework versions of dockview.
+         */
+        dispose() {
+            this.component.dispose();
+        }
     }
     class GridviewApi {
         /**
@@ -3185,6 +3236,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         clear() {
             this.component.clear();
         }
+        updateOptions(options) {
+            this.component.updateOptions(options);
+        }
+        /**
+         * Release resources and teardown component. Do not call when using framework versions of dockview.
+         */
+        dispose() {
+            this.component.dispose();
+        }
     }
     class DockviewApi {
         /**
@@ -3477,6 +3537,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         setGap(gap) {
             this.component.updateOptions({ gap });
         }
+        updateOptions(options) {
+            this.component.updateOptions(options);
+        }
+        /**
+         * Release resources and teardown component. Do not call when using framework versions of dockview.
+         */
+        dispose() {
+            this.component.dispose();
+        }
     }
 
     class DragHandler extends CompositeDisposable {
@@ -3499,20 +3568,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     event.preventDefault();
                     return;
                 }
-                const iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
+                const iframes = disableIframePointEvents();
                 this.pointerEventsDisposable.value = {
                     dispose: () => {
-                        for (const iframe of iframes) {
-                            iframe.style.pointerEvents = 'auto';
-                        }
+                        iframes.release();
                     },
                 };
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
                 this.dataDisposable.value = this.getData(event);
@@ -4676,7 +4737,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element.className = 'void-container';
             this._element.tabIndex = 0;
             this._element.draggable = true;
-            this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
+            this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
                 this.accessor.doSetGroupActive(this.group);
             }));
             const handler = new GroupDragHandler(this._element, accessor, group);
@@ -4991,6 +5052,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             locked: undefined,
             disableDnd: undefined,
             gap: undefined,
+            className: undefined,
         };
         return Object.keys(properties);
     })();
@@ -5546,7 +5608,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     group: this.groupPanel,
                 });
                 this.watermark = watermark;
-                addDisposableListener(this.watermark.element, 'click', () => {
+                addDisposableListener(this.watermark.element, 'pointerdown', () => {
                     if (!this.isActive) {
                         this.accessor.doSetGroupActive(this.groupPanel);
                     }
@@ -6111,7 +6173,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 // forward the resize event to the group since if you want to resize a panel
                 // you are actually just resizing the panels parent which is the group
                 this.group.api.setSize(event);
-            }), this.api.onDidRendererChange((event) => {
+            }), this.api.onDidRendererChange(() => {
                 this.group.model.rerender(this);
             }));
         }
@@ -6447,17 +6509,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    const bringElementToFront = (() => {
-        let previous = null;
-        function pushToTop(element) {
-            if (previous !== element && previous !== null) {
-                toggleClass(previous, 'dv-bring-to-front', false);
+    const DEFAULT_OVERLAY_Z_INDEX = 999;
+    class AriaLevelTracker {
+        constructor() {
+            this._orderedList = [];
+        }
+        push(element) {
+            this._orderedList = [
+                ...this._orderedList.filter((item) => item !== element),
+                element,
+            ];
+            this.update();
+        }
+        destroy(element) {
+            this._orderedList = this._orderedList.filter((item) => item !== element);
+            this.update();
+        }
+        update() {
+            for (let i = 0; i < this._orderedList.length; i++) {
+                this._orderedList[i].setAttribute('aria-level', `${i}`);
+                this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`;
             }
-            toggleClass(element, 'dv-bring-to-front', true);
-            previous = element;
         }
-        return pushToTop;
-    })();
+    }
+    const arialLevelTracker = new AriaLevelTracker();
     class Overlay extends CompositeDisposable {
         set minimumInViewportWidth(value) {
             this.options.minimumInViewportWidth = value;
@@ -6465,6 +6540,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         set minimumInViewportHeight(value) {
             this.options.minimumInViewportHeight = value;
         }
+        get element() {
+            return this._element;
+        }
         constructor(options) {
             super();
             this.options = options;
@@ -6487,6 +6565,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.options.container.appendChild(this._element);
             // if input bad resize within acceptable boundaries
             this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
+            arialLevelTracker.push(this._element);
+        }
+        bringToFront() {
+            arialLevelTracker.push(this._element);
         }
         setBounds(bounds = {}) {
             if (typeof bounds.height === 'number') {
@@ -6574,18 +6656,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const move = new MutableDisposable();
             const track = () => {
                 let offset = null;
-                const iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
+                const iframes = disableIframePointEvents();
                 move.value = new CompositeDisposable({
                     dispose: () => {
-                        for (const iframe of iframes) {
-                            iframe.style.pointerEvents = 'auto';
-                        }
+                        iframes.release();
                     },
                 }, addDisposableWindowListener(window, 'mousemove', (e) => {
                     const containerRect = this.options.container.getBoundingClientRect();
@@ -6654,9 +6728,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     track();
                 }
             }), addDisposableListener(this.options.content, 'mousedown', () => {
-                bringElementToFront(this._element);
+                arialLevelTracker.push(this._element);
             }, true));
-            bringElementToFront(this._element);
             if (options.inDragMode) {
                 track();
             }
@@ -6669,13 +6742,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
                 e.preventDefault();
                 let startPosition = null;
-                const iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
+                const iframes = disableIframePointEvents();
                 move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
                     const containerRect = this.options.container.getBoundingClientRect();
                     const overlayRect = this._element.getBoundingClientRect();
@@ -6798,9 +6865,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.setBounds(bounds);
                 }), {
                     dispose: () => {
-                        for (const iframe of iframes) {
-                            iframe.style.pointerEvents = 'auto';
-                        }
+                        iframes.release();
                     },
                 }, addDisposableWindowListener(window, 'mouseup', () => {
                     move.dispose();
@@ -6821,6 +6886,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return 0;
         }
         dispose() {
+            arialLevelTracker.destroy(this._element);
             this._element.remove();
             super.dispose();
         }
@@ -6849,9 +6915,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         return element;
     }
     class OverlayRenderContainer extends CompositeDisposable {
-        constructor(element) {
+        constructor(element, accessor) {
             super();
             this.element = element;
+            this.accessor = accessor;
             this.map = {};
             this._disposed = false;
             this.addDisposables(exports.DockviewDisposable.from(() => {
@@ -6907,7 +6974,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 focusContainer.style.display = panel.api.isVisible ? '' : 'none';
             };
-            const disposable = new CompositeDisposable(
+            const observerDisposable = new MutableDisposable();
+            const correctLayerPosition = () => {
+                if (panel.api.location.type === 'floating') {
+                    queueMicrotask(() => {
+                        const floatingGroup = this.accessor.floatingGroups.find((group) => group.group === panel.api.group);
+                        if (!floatingGroup) {
+                            return;
+                        }
+                        const element = floatingGroup.overlay.element;
+                        const update = () => {
+                            const level = Number(element.getAttribute('aria-level'));
+                            focusContainer.style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1}`;
+                        };
+                        const observer = new MutationObserver(() => {
+                            update();
+                        });
+                        observerDisposable.value = exports.DockviewDisposable.from(() => observer.disconnect());
+                        observer.observe(element, {
+                            attributeFilter: ['aria-level'],
+                            attributes: true,
+                        });
+                        update();
+                    });
+                }
+                else {
+                    focusContainer.style.zIndex = ''; // reset the z-index, perhaps CSS will take over here
+                }
+            };
+            const disposable = new CompositeDisposable(observerDisposable, 
             /**
              * since container is positioned absoutely we must explicitly forward
              * the dnd events for the expect behaviours to continue to occur in terms of dnd
@@ -6931,7 +7026,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 onDragOver: (e) => {
                     referenceContainer.dropTarget.dnd.onDragOver(e);
                 },
-            }), panel.api.onDidVisibilityChange((event) => {
+            }), panel.api.onDidVisibilityChange(() => {
                 /**
                  * Control the visibility of the content, however even when not visible (display: none)
                  * the content is still maintained within the DOM hence DOM specific attributes
@@ -6943,6 +7038,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     return;
                 }
                 resize();
+            }), panel.api.onDidLocationChange(() => {
+                correctLayerPosition();
             }));
             this.map[panel.api.id].destroy = exports.DockviewDisposable.from(() => {
                 var _a;
@@ -6951,6 +7048,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
             });
+            correctLayerPosition();
             queueMicrotask(() => {
                 if (this.isDisposed) {
                     return;
@@ -7176,7 +7274,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get gap() {
             return this.gridview.margin;
         }
-        constructor(options) {
+        get floatingGroups() {
+            return this._floatingGroups;
+        }
+        constructor(parentElement, options) {
             var _a;
             super({
                 proportionalLayout: true,
@@ -7184,10 +7285,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 styles: options.hideBorders
                     ? { separatorBorder: 'transparent' }
                     : undefined,
-                parentElement: options.parentElement,
+                parentElement: parentElement,
                 disableAutoResizing: options.disableAutoResizing,
                 locked: options.locked,
                 margin: options.gap,
+                className: options.className,
             });
             this.nextGroupId = sequentialNumberGenerator();
             this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -7223,10 +7325,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidActiveGroupChange = new Emitter();
             this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
             this._moving = false;
-            const gready = document.createElement('div');
-            gready.className = 'dv-overlay-render-container';
-            this.gridview.element.appendChild(gready);
-            this.overlayRenderContainer = new OverlayRenderContainer(gready);
+            // const gready = document.createElement('div');
+            // gready.className = 'dv-overlay-render-container';
+            // this.gridview.element.appendChild(gready);
+            this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
             toggleClass(this.gridview.element, 'dv-dockview', true);
             toggleClass(this.element, 'dv-debug', !!options.debug);
             this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
@@ -7392,7 +7494,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 const gready = document.createElement('div');
                 gready.className = 'dv-overlay-render-container';
-                const overlayRenderContainer = new OverlayRenderContainer(gready);
+                const overlayRenderContainer = new OverlayRenderContainer(gready, this);
                 const referenceGroup = itemToPopout instanceof DockviewPanel
                     ? itemToPopout.group
                     : itemToPopout;
@@ -7541,7 +7643,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 }
             }
-            group.model.location = { type: 'floating' };
             function getAnchoredBox() {
                 if (options === null || options === void 0 ? void 0 : options.position) {
                     const result = {};
@@ -7608,10 +7709,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     : false,
             });
             const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
-            const disposable = watchElementResize(group.element, (entry) => {
+            const disposable = new CompositeDisposable(group.api.onDidActiveChange((event) => {
+                if (event.isActive) {
+                    overlay.bringToFront();
+                }
+            }), watchElementResize(group.element, (entry) => {
                 const { width, height } = entry.contentRect;
                 group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
-            });
+            }));
             floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
                 // this is either a resize or a move
                 // to inform the panels .layout(...) the group with it's current size
@@ -7627,12 +7732,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), {
                 dispose: () => {
                     disposable.dispose();
-                    group.model.location = { type: 'grid' };
                     remove(this._floatingGroups, floatingGroupPanel);
+                    group.model.location = { type: 'grid' };
                     this.updateWatermark();
                 },
             });
             this._floatingGroups.push(floatingGroupPanel);
+            group.model.location = { type: 'floating' };
             if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
                 this.doSetGroupAndPanelActive(group);
             }
@@ -7872,6 +7978,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const group = createGroupFromSerializedState(data);
                     this.addFloatingGroup(group, {
                         position: position,
+                        width: position.width,
+                        height: position.height,
                         skipRemoveGroup: true,
                         inDragMode: false,
                     });
@@ -8212,6 +8320,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this._groups.delete(group.id);
                         this._onDidRemoveGroup.fire(group);
                     }
+                    remove(this._popoutGroups, selectedGroup);
                     const removedGroup = selectedGroup.disposable.dispose();
                     if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
                         this.doAddGroup(removedGroup, [0]);
@@ -8323,6 +8432,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             return;
                         }
                     }
+                    if (sourceGroup.api.location.type === 'popout') {
+                        /**
+                         * the source group is a popout group with a single panel
+                         *
+                         * 1. remove the panel from the group without triggering any events
+                         * 2. remove the popout group
+                         * 3. create a new group at the requested location and add that panel
+                         */
+                        const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
+                        const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
+                            skipSetActive: true,
+                            skipSetActiveGroup: true,
+                        }));
+                        this.doRemoveGroup(sourceGroup, { skipActive: true });
+                        const newGroup = this.createGroupAtLocation(targetLocation);
+                        this.movingLock(() => newGroup.model.openPanel(removedPanel, {
+                            skipSetActive: true,
+                        }));
+                        this.doSetGroupAndPanelActive(newGroup);
+                        this._onDidMovePanel.fire({
+                            panel: this.getGroupPanel(sourceItemId),
+                            from: sourceGroup,
+                        });
+                        return;
+                    }
                     // source group will become empty so delete the group
                     const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
                         skipActive: true,
@@ -8554,13 +8688,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         set deserializer(value) {
             this._deserializer = value;
         }
-        constructor(options) {
+        constructor(parentElement, options) {
             super({
-                parentElement: options.parentElement,
+                parentElement: parentElement,
                 proportionalLayout: options.proportionalLayout,
                 orientation: options.orientation,
                 styles: options.styles,
                 disableAutoResizing: options.disableAutoResizing,
+                className: options.className,
             });
             this._onDidLayoutfromJSON = new Emitter();
             this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
@@ -8852,8 +8987,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 ? this.splitview.size
                 : this.splitview.orthogonalSize;
         }
-        constructor(options) {
-            super(options.parentElement, options.disableAutoResizing);
+        constructor(parentElement, options) {
+            super(parentElement, options.disableAutoResizing);
             this._splitviewChangeDisposable = new MutableDisposable();
             this._panels = new Map();
             this._onDidLayoutfromJSON = new Emitter();
@@ -8864,6 +8999,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidRemoveView = this._onDidRemoveView.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
+            if (typeof options.className === 'string') {
+                this.element.classList.add(options.className);
+            }
             this._options = options;
             if (!options.components) {
                 options.components = {};
@@ -9176,8 +9314,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get options() {
             return this._options;
         }
-        constructor(options) {
-            super(options.parentElement, options.disableAutoResizing);
+        constructor(parentElement, options) {
+            super(parentElement, options.disableAutoResizing);
             this._id = nextLayoutId.next();
             this._disposable = new MutableDisposable();
             this._viewDisposables = new Map();
@@ -9191,6 +9329,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
             this.onDidRemoveView = this._onDidRemoveView.event;
+            if (typeof options.className === 'string') {
+                this.element.classList.add(options.className);
+            }
             this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
             this._options = options;
             if (!options.components) {
@@ -9506,6 +9647,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    function createDockview(element, options) {
+        const component = new DockviewComponent(element, options);
+        return component.api;
+    }
+    function createSplitview(element, options) {
+        const component = new SplitviewComponent(element, options);
+        return new SplitviewApi(component);
+    }
+    function createGridview(element, options) {
+        const component = new GridviewComponent(element, options);
+        return new GridviewApi(component);
+    }
+    function createPaneview(element, options) {
+        const component = new PaneviewComponent(element, options);
+        return new PaneviewApi(component);
+    }
+
     /**
      * This component is intended to interface between vanilla-js and React hence we need to be
      * creative in how we update props.
@@ -9885,20 +10043,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         });
                     }
                     : undefined,
-                parentElement: domRef.current,
                 defaultTabComponent: props.defaultTabComponent
                     ? DEFAULT_REACT_TAB
                     : undefined,
             };
-            const dockview = new DockviewComponent(Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
+            const api = createDockview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
             const { clientWidth, clientHeight } = domRef.current;
-            dockview.layout(clientWidth, clientHeight);
+            api.layout(clientWidth, clientHeight);
             if (props.onReady) {
-                props.onReady({ api: new DockviewApi(dockview) });
+                props.onReady({ api });
             }
-            dockviewRef.current = dockview;
+            dockviewRef.current = api;
             return () => {
-                dockview.dispose();
+                api.dispose();
             };
         }, []);
         React.useEffect(() => {
@@ -10101,8 +10258,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         React.useImperativeHandle(ref, () => domRef.current, []);
         React.useEffect(() => {
             var _a;
-            const splitview = new SplitviewComponent({
-                parentElement: domRef.current,
+            const api = createSplitview(domRef.current, {
                 disableAutoResizing: props.disableAutoResizing,
                 orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.HORIZONTAL,
                 frameworkComponents: props.components,
@@ -10121,13 +10277,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     : undefined,
             });
             const { clientWidth, clientHeight } = domRef.current;
-            splitview.layout(clientWidth, clientHeight);
+            api.layout(clientWidth, clientHeight);
             if (props.onReady) {
-                props.onReady({ api: new SplitviewApi(splitview) });
+                props.onReady({ api });
             }
-            splitviewRef.current = splitview;
+            splitviewRef.current = api;
             return () => {
-                splitview.dispose();
+                api.dispose();
             };
         }, []);
         React.useEffect(() => {
@@ -10172,8 +10328,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     // noop
                 };
             }
-            const gridview = new GridviewComponent({
-                parentElement: domRef.current,
+            const api = createGridview(domRef.current, {
                 disableAutoResizing: props.disableAutoResizing,
                 proportionalLayout: typeof props.proportionalLayout === 'boolean'
                     ? props.proportionalLayout
@@ -10192,13 +10347,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     : undefined,
             });
             const { clientWidth, clientHeight } = domRef.current;
-            gridview.layout(clientWidth, clientHeight);
+            api.layout(clientWidth, clientHeight);
             if (props.onReady) {
-                props.onReady({ api: new GridviewApi(gridview) });
+                props.onReady({ api });
             }
-            gridviewRef.current = gridview;
+            gridviewRef.current = api;
             return () => {
-                gridview.dispose();
+                api.dispose();
             };
         }, []);
         React.useEffect(() => {
@@ -10257,8 +10412,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
                 addPortal,
             });
-            const paneview = new PaneviewComponent({
-                parentElement: domRef.current,
+            const api = createPaneview(domRef.current, {
                 disableAutoResizing: props.disableAutoResizing,
                 frameworkComponents: props.components,
                 components: {},
@@ -10275,15 +10429,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
                 showDndOverlay: props.showDndOverlay,
             });
-            const api = new PaneviewApi(paneview);
             const { clientWidth, clientHeight } = domRef.current;
-            paneview.layout(clientWidth, clientHeight);
+            api.layout(clientWidth, clientHeight);
             if (props.onReady) {
                 props.onReady({ api });
             }
-            paneviewRef.current = paneview;
+            paneviewRef.current = api;
             return () => {
-                paneview.dispose();
+                api.dispose();
             };
         }, []);
         React.useEffect(() => {
@@ -10308,10 +10461,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     //
                 };
             }
-            const paneview = paneviewRef.current;
-            const disposable = paneview.onDidDrop((event) => {
+            const api = paneviewRef.current;
+            const disposable = api.onDidDrop((event) => {
                 if (props.onDidDrop) {
-                    props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
+                    props.onDidDrop(Object.assign(Object.assign({}, event), { api }));
                 }
             });
             return () => {
@@ -10373,6 +10526,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.Tab = Tab;
     exports.WillShowOverlayLocationEvent = WillShowOverlayLocationEvent;
     exports.createComponent = createComponent;
+    exports.createDockview = createDockview;
+    exports.createGridview = createGridview;
+    exports.createPaneview = createPaneview;
+    exports.createSplitview = createSplitview;
     exports.directionToPosition = directionToPosition;
     exports.getDirectionOrientation = getDirectionOrientation;
     exports.getGridLocation = getGridLocation;