dockview 1.7.5 → 1.8.0

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.5
+ * @version 1.8.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -293,6 +293,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+        const Component = typeof componentName === 'string'
+            ? components[componentName]
+            : undefined;
+        const FrameworkComponent = typeof componentName === 'string'
+            ? frameworkComponents[componentName]
+            : undefined;
+        if (Component && FrameworkComponent) {
+            throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
+        }
+        if (FrameworkComponent) {
+            if (!createFrameworkComponent) {
+                throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+            }
+            return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+        }
+        if (!Component) {
+            if (fallback) {
+                return fallback();
+            }
+            throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+        }
+        return new Component(id, componentName);
+    }
+
     function watchElementResize(element, cb) {
         const observer = new ResizeObserver((entires) => {
             /**
@@ -406,31 +431,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         refreshState() {
             this._refreshStateHandler();
         }
-    }
-
-    function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-        const Component = typeof componentName === 'string'
-            ? components[componentName]
-            : undefined;
-        const FrameworkComponent = typeof componentName === 'string'
-            ? frameworkComponents[componentName]
-            : undefined;
-        if (Component && FrameworkComponent) {
-            throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-        }
-        if (FrameworkComponent) {
-            if (!createFrameworkComponent) {
-                throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-            }
-            return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-        }
-        if (!Component) {
-            if (fallback) {
-                return fallback();
-            }
-            throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-        }
-        return new Component(id, componentName);
+    }
+    // quasi: apparently, but not really; seemingly
+    const QUASI_PREVENT_DEFAULT_KEY = 'dv-quasiPreventDefault';
+    // mark an event directly for other listeners to check
+    function quasiPreventDefault(event) {
+        event[QUASI_PREVENT_DEFAULT_KEY] = true;
+    }
+    // check if this event has been marked
+    function quasiDefaultPrevented(event) {
+        return event[QUASI_PREVENT_DEFAULT_KEY];
     }
 
     function tail(arr) {
@@ -481,6 +491,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         return -1;
+    }
+    function remove(array, value) {
+        const index = array.findIndex((t) => t === value);
+        if (index > -1) {
+            array.splice(index, 1);
+            return true;
+        }
+        return false;
     }
 
     const clamp = (value, min, max) => {
@@ -910,7 +928,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 //add sash
                 const sash = document.createElement('div');
                 sash.className = 'sash';
-                const onStart = (event) => {
+                const onPointerStart = (event) => {
                     for (const item of this.viewItems) {
                         item.enabled = false;
                     }
@@ -969,11 +987,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             size: snappedViewItem.size,
                         };
                     }
-                    //
-                    const mousemove = (mousemoveEvent) => {
+                    const onPointerMove = (event) => {
                         const current = this._orientation === exports.Orientation.HORIZONTAL
-                            ? mousemoveEvent.clientX
-                            : mousemoveEvent.clientY;
+                            ? event.clientX
+                            : event.clientY;
                         const delta = current - start;
                         this.resize(sashIndex, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
                         this.distributeEmptySpace();
@@ -987,18 +1004,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             iframe.style.pointerEvents = 'auto';
                         }
                         this.saveProportions();
-                        document.removeEventListener('mousemove', mousemove);
-                        document.removeEventListener('mouseup', end);
+                        document.removeEventListener('pointermove', onPointerMove);
+                        document.removeEventListener('pointerup', end);
+                        document.removeEventListener('pointercancel', end);
                         this._onDidSashEnd.fire(undefined);
                     };
-                    document.addEventListener('mousemove', mousemove);
-                    document.addEventListener('mouseup', end);
+                    document.addEventListener('pointermove', onPointerMove);
+                    document.addEventListener('pointerup', end);
+                    document.addEventListener('pointercancel', end);
                 };
-                sash.addEventListener('mousedown', onStart);
+                sash.addEventListener('pointerdown', onPointerStart);
                 const sashItem = {
                     container: sash,
                     disposable: () => {
-                        sash.removeEventListener('mousedown', onStart);
+                        sash.removeEventListener('pointerdown', onPointerStart);
                         this.sashContainer.removeChild(sash);
                     },
                 };
@@ -1622,7 +1641,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                                 : true,
                         };
                     }),
-                    size: this.size,
+                    size: this.orthogonalSize,
                 };
                 this.children = childDescriptors.map((c) => c.node);
                 this.splitview = new Splitview(this.element, {
@@ -1685,7 +1704,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         layout(size, orthogonalSize) {
             this._size = orthogonalSize;
             this._orthogonalSize = size;
-            this.splitview.layout(this.size, this.orthogonalSize);
+            this.splitview.layout(orthogonalSize, size);
         }
         addChild(node, size, index, skipLayout) {
             if (index < 0 || index > this.children.length) {
@@ -1910,9 +1929,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._deserialize(json.root, orientation, deserializer, height);
         }
         _deserialize(root, orientation, deserializer, orthogonalSize) {
-            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
+            this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
         }
-        _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
+        _deserializeNode(node, orientation, deserializer, orthogonalSize) {
             let result;
             if (node.type === 'branch') {
                 const serializedChildren = node.data;
@@ -1922,9 +1941,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         visible: serializedChild.visible,
                     };
                 });
-                // HORIZONTAL => height=orthogonalsize width=size
-                // VERTICAL => height=size width=orthogonalsize
-                result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
+                result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
+                orthogonalSize, // <- size - flips at each depth
+                children);
             }
             else {
                 result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -1957,7 +1976,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const oldRoot = this.root;
             oldRoot.element.remove();
             this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
-            if (oldRoot.children.length === 1) {
+            if (oldRoot.children.length === 0) ;
+            else if (oldRoot.children.length === 1) {
                 // can remove one level of redundant branching if there is only a single child
                 const childReference = oldRoot.children[0];
                 const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
@@ -2091,52 +2111,70 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!(parent instanceof BranchNode)) {
                 throw new Error('Invalid location');
             }
-            const node = parent.children[index];
-            if (!(node instanceof LeafNode)) {
+            const nodeToRemove = parent.children[index];
+            if (!(nodeToRemove instanceof LeafNode)) {
                 throw new Error('Invalid location');
             }
             parent.removeChild(index, sizing);
-            if (parent.children.length === 0) {
-                return node.view;
-            }
-            if (parent.children.length > 1) {
-                return node.view;
-            }
+            nodeToRemove.dispose();
+            if (parent.children.length !== 1) {
+                return nodeToRemove.view;
+            }
+            // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+            // more efficiently spaced by replacing the parent BranchNode with the child.
+            // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+            // is a BranchNode too we should spread it's children into the grandparent.
+            // refer to the remaining child as the sibling
             const sibling = parent.children[0];
             if (pathToParent.length === 0) {
-                // parent is root
+                // if the parent is root
                 if (sibling instanceof LeafNode) {
-                    return node.view;
+                    // if the sibling is a leaf node no action is required
+                    return nodeToRemove.view;
                 }
-                // we must promote sibling to be the new root
+                // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+                // which is a branch node we can just set this branch node to be the new root node
+                // for good housekeeping we'll removing the sibling from it's existing tree
                 parent.removeChild(0, sizing);
+                // and set that sibling node to be root
                 this.root = sibling;
-                return node.view;
+                return nodeToRemove.view;
             }
+            // otherwise the parent is apart of a large sub-tree
             const [grandParent, ..._] = [...pathToParent].reverse();
             const [parentIndex, ...__] = [...rest].reverse();
             const isSiblingVisible = parent.isChildVisible(0);
+            // either way we need to remove the sibling from it's existing tree
             parent.removeChild(0, sizing);
+            // note the sizes of all of the grandparents children
             const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-            grandParent.removeChild(parentIndex, sizing);
+            // remove the parent from the grandparent since we are moving the sibling to take the parents place
+            // this parent is no longer used and can be disposed of
+            grandParent.removeChild(parentIndex, sizing).dispose();
             if (sibling instanceof BranchNode) {
+                // replace the parent with the siblings children
                 sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+                // and add those siblings to the grandparent
                 for (let i = 0; i < sibling.children.length; i++) {
                     const child = sibling.children[i];
                     grandParent.addChild(child, child.size, parentIndex + i);
                 }
             }
             else {
+                // otherwise create a new leaf node and add that to the grandparent
                 const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
                 const siblingSizing = isSiblingVisible
                     ? sibling.orthogonalSize
                     : exports.Sizing.Invisible(sibling.orthogonalSize);
                 grandParent.addChild(newSibling, siblingSizing, parentIndex);
             }
+            // the containing node of the sibling is no longer required and can be disposed of
+            sibling.dispose();
+            // resize everything
             for (let i = 0; i < sizes.length; i++) {
                 grandParent.resizeChild(i, sizes[i]);
             }
-            return node.view;
+            return nodeToRemove.view;
         }
         layout(width, height) {
             const [size, orthogonalSize] = this.root.orientation === exports.Orientation.HORIZONTAL
@@ -2455,6 +2493,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         addPanel(options) {
             return this.component.addPanel(options);
         }
+        removePanel(panel) {
+            this.component.removePanel(panel);
+        }
         addGroup(options) {
             return this.component.addGroup(options);
         }
@@ -2473,6 +2514,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         getGroup(id) {
             return this.component.getPanel(id);
         }
+        addFloatingGroup(item, coord) {
+            return this.component.addFloatingGroup(item, coord);
+        }
         fromJSON(data) {
             this.component.fromJSON(data);
         }
@@ -2565,10 +2609,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
             // use a set to take advantage of #<set>.has
-            const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
+            this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
             this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
                 onDragEnter: () => undefined,
                 onDragOver: (e) => {
+                    if (this._acceptedTargetZonesSet.size === 0) {
+                        this.removeDropTarget();
+                        return;
+                    }
                     const width = this.element.clientWidth;
                     const height = this.element.clientHeight;
                     if (width === 0 || height === 0) {
@@ -2577,20 +2625,28 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const rect = e.currentTarget.getBoundingClientRect();
                     const x = e.clientX - rect.left;
                     const y = e.clientY - rect.top;
-                    const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
-                    if (quadrant === null) {
+                    const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
+                    /**
+                     * If the event has already been used by another DropTarget instance
+                     * then don't show a second drop target, only one target should be
+                     * active at any one time
+                     */
+                    if (this.isAlreadyUsed(e) || quadrant === null) {
                         // no drop target should be displayed
                         this.removeDropTarget();
                         return;
                     }
                     if (typeof this.options.canDisplayOverlay === 'boolean') {
                         if (!this.options.canDisplayOverlay) {
+                            this.removeDropTarget();
                             return;
                         }
                     }
                     else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                        this.removeDropTarget();
                         return;
                     }
+                    this.markAsUsed(e);
                     if (!this.targetElement) {
                         this.targetElement = document.createElement('div');
                         this.targetElement.className = 'drop-target-dropzone';
@@ -2601,12 +2657,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.element.classList.add('drop-target');
                         this.element.append(this.targetElement);
                     }
-                    if (this.options.acceptedTargetZones.length === 0) {
-                        return;
-                    }
-                    if (!this.targetElement || !this.overlayElement) {
-                        return;
-                    }
                     this.toggleClasses(quadrant, width, height);
                     this.setState(quadrant);
                 },
@@ -2629,10 +2679,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 },
             }));
         }
+        setTargetZones(acceptedTargetZones) {
+            this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+        }
         dispose() {
             this.removeDropTarget();
             super.dispose();
         }
+        /**
+         * Add a property to the event object for other potential listeners to check
+         */
+        markAsUsed(event) {
+            event[Droptarget.USED_EVENT_ID] = true;
+        }
+        /**
+         * Check is the event has already been used by another instance od DropTarget
+         */
+        isAlreadyUsed(event) {
+            const value = event[Droptarget.USED_EVENT_ID];
+            return typeof value === 'boolean' && value;
+        }
         toggleClasses(quadrant, width, height) {
             var _a, _b, _c, _d;
             if (!this.overlayElement) {
@@ -2727,6 +2793,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
     }
+    Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
     function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
         const xp = (100 * x) / width;
         const yp = (100 * y) / height;
@@ -2856,8 +2923,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
             this.configure();
         }
+        isCancelled(_event) {
+            return false;
+        }
         configure() {
             this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+                if (this.isCancelled(event)) {
+                    event.preventDefault();
+                    return;
+                }
                 const iframes = [
                     ...getElementsByTagName('iframe'),
                     ...getElementsByTagName('webview'),
@@ -2931,13 +3005,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 if (event.defaultPrevented) {
                     return;
                 }
-                /**
-                 * TODO: alternative to stopPropagation
-                 *
-                 * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
-                 * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
-                 */
-                event.stopPropagation();
                 this._onChanged.fire(event);
             }));
             this.droptarget = new Droptarget(this._element, {
@@ -2995,6 +3062,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.accessorId = accessorId;
             this.group = group;
             this.panelTransfer = LocalSelectionTransfer.getInstance();
+            this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+                if (e.shiftKey) {
+                    /**
+                     * You cannot call e.preventDefault() because that will prevent drag events from firing
+                     * but we also need to stop any group overlay drag events from occuring
+                     * Use a custom event marker that can be checked by the overlay drag events
+                     */
+                    quasiPreventDefault(e);
+                }
+            }, true));
+        }
+        isCancelled(_event) {
+            if (this.group.api.isFloating && !_event.shiftKey) {
+                return true;
+            }
+            return false;
         }
         getData(dataTransfer) {
             this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
@@ -3085,17 +3168,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         hide() {
             this._element.style.display = 'none';
         }
-        setActionElement(element) {
-            if (this.actions === element) {
+        setRightActionsElement(element) {
+            if (this.rightActions === element) {
+                return;
+            }
+            if (this.rightActions) {
+                this.rightActions.remove();
+                this.rightActions = undefined;
+            }
+            if (element) {
+                this.rightActionsContainer.appendChild(element);
+                this.rightActions = element;
+            }
+        }
+        setLeftActionsElement(element) {
+            if (this.leftActions === element) {
                 return;
             }
-            if (this.actions) {
-                this.actions.remove();
-                this.actions = undefined;
+            if (this.leftActions) {
+                this.leftActions.remove();
+                this.leftActions = undefined;
             }
             if (element) {
-                this.actionContainer.appendChild(element);
-                this.actions = element;
+                this.leftActionsContainer.appendChild(element);
+                this.leftActions = element;
             }
         }
         get element() {
@@ -3130,19 +3226,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     toggleClass(this._element, 'dv-single-tab', this.size === 1);
                 }
             }));
-            this.actionContainer = document.createElement('div');
-            this.actionContainer.className = 'action-container';
+            this.rightActionsContainer = document.createElement('div');
+            this.rightActionsContainer.className = 'right-actions-container';
+            this.leftActionsContainer = document.createElement('div');
+            this.leftActionsContainer.className = 'left-actions-container';
             this.tabContainer = document.createElement('div');
             this.tabContainer.className = 'tabs-container';
             this.voidContainer = new VoidContainer(this.accessor, this.group);
             this._element.appendChild(this.tabContainer);
+            this._element.appendChild(this.leftActionsContainer);
             this._element.appendChild(this.voidContainer.element);
-            this._element.appendChild(this.actionContainer);
+            this._element.appendChild(this.rightActionsContainer);
             this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
                 this._onDrop.fire({
                     event: event.nativeEvent,
                     index: this.tabs.length,
                 });
+            }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+                const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+                if (isFloatingGroupsEnabled &&
+                    event.shiftKey &&
+                    !this.group.api.isFloating) {
+                    event.preventDefault();
+                    const { top, left } = this.element.getBoundingClientRect();
+                    const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                    this.accessor.addFloatingGroup(this.group, {
+                        x: left - rootLeft + 20,
+                        y: top - rootTop + 20,
+                    }, { inDragMode: true });
+                }
             }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
                     return;
@@ -3196,6 +3308,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             tabToAdd.setContent(panel.view.tab);
             const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
                 var _a;
+                const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+                const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+                if (isFloatingGroupsEnabled &&
+                    !isFloatingWithOnePanel &&
+                    event.shiftKey) {
+                    event.preventDefault();
+                    const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
+                    const { top, left } = tabToAdd.element.getBoundingClientRect();
+                    const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                    this.accessor.addFloatingGroup(panel, {
+                        x: left - rootLeft,
+                        y: top - rootTop,
+                    }, { inDragMode: true });
+                    return;
+                }
                 const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
                     this.group.model.isContentFocused;
                 const isLeftClick = event.button === 0;
@@ -3265,6 +3392,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return isAncestor(document.activeElement, this.contentContainer.element);
         }
+        get isFloating() {
+            return this._isFloating;
+        }
+        set isFloating(value) {
+            this._isFloating = value;
+            this.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
+            toggleClass(this.container, 'dv-groupview-floating', value);
+            this.groupPanel.api._onDidFloatingStateChange.fire({
+                isFloating: this.isFloating,
+            });
+        }
         constructor(container, accessor, id, options, groupPanel) {
             super();
             this.container = container;
@@ -3274,6 +3412,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.groupPanel = groupPanel;
             this._isGroupActive = false;
             this._locked = false;
+            this._isFloating = false;
             this.mostRecentlyUsed = [];
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
@@ -3290,7 +3429,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidRemovePanel = this._onDidRemovePanel.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.container.classList.add('groupview');
+            toggleClass(this.container, 'groupview', true);
             this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
             this.contentContainer = new ContentContainer();
             this.dropTarget = new Droptarget(this.contentContainer.element, {
@@ -3300,6 +3439,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         return false;
                     }
                     const data = getPanelData();
+                    if (!data && event.shiftKey && !this.isFloating) {
+                        return false;
+                    }
                     if (data && data.viewId === this.accessor.id) {
                         if (data.groupId === this.id) {
                             if (position === 'center') {
@@ -3344,14 +3486,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             // correctly initialized
             this.setActive(this.isActive, true, true);
             this.updateContainer();
-            if (this.accessor.options.createGroupControlElement) {
-                this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
-                this.addDisposables(this._control);
-                this._control.init({
+            if (this.accessor.options.createRightHeaderActionsElement) {
+                this._rightHeaderActions =
+                    this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
+                this.addDisposables(this._rightHeaderActions);
+                this._rightHeaderActions.init({
+                    containerApi: new DockviewApi(this.accessor),
+                    api: this.groupPanel.api,
+                });
+                this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
+            }
+            if (this.accessor.options.createLeftHeaderActionsElement) {
+                this._leftHeaderActions =
+                    this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
+                this.addDisposables(this._leftHeaderActions);
+                this._leftHeaderActions.init({
                     containerApi: new DockviewApi(this.accessor),
                     api: this.groupPanel.api,
                 });
-                this.tabsContainer.setActionElement(this._control.element);
+                this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
             }
         }
         indexOf(panel) {
@@ -3484,7 +3637,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._activePanel === panel;
         }
         updateActions(element) {
-            this.tabsContainer.setActionElement(element);
+            this.tabsContainer.setRightActionsElement(element);
         }
         setActive(isGroupActive, skipFocus = false, force = false) {
             var _a, _b, _c, _d;
@@ -3656,9 +3809,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         dispose() {
-            var _a, _b;
+            var _a, _b, _c;
             super.dispose();
-            (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
+            (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
             for (const panel of this.panels) {
                 panel.dispose();
             }
@@ -4452,8 +4606,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get isActive() {
             return this.api.isActive;
         }
-        constructor(id, component, options) {
-            super(id, component, new GridviewPanelApiImpl(id));
+        constructor(id, component, options, api) {
+            super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
             this._evaluatedMinimumWidth = 0;
             this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
             this._evaluatedMinimumHeight = 0;
@@ -4551,6 +4705,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+        get isFloating() {
+            if (!this._group) {
+                throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+            }
+            return this._group.model.isFloating;
+        }
+        constructor(id, accessor) {
+            super(id);
+            this.accessor = accessor;
+            this._onDidFloatingStateChange = new Emitter();
+            this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
+            this.addDisposables(this._onDidFloatingStateChange);
+        }
+        moveTo(options) {
+            var _a;
+            if (!this._group) {
+                throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+            }
+            this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
+        }
+        initialize(group) {
+            this._group = group;
+        }
+    }
+
     class DockviewGroupPanel extends GridviewPanel {
         get panels() {
             return this._model.panels;
@@ -4577,7 +4757,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             super(id, 'groupview_default', {
                 minimumHeight: 100,
                 minimumWidth: 100,
-            });
+            }, new DockviewGroupPanelApiImpl(id, accessor));
+            this.api.initialize(this); // cannot use 'this' after after 'super' call
             this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
         }
         initialize() {
@@ -4595,7 +4776,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             return this._model;
         }
         toJSON() {
-            // TODO fix typing
             return this.model.toJSON();
         }
     }
@@ -4649,9 +4829,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get group() {
             return this._group;
         }
-        constructor(panel, group) {
+        constructor(panel, group, accessor) {
             super(panel.id);
             this.panel = panel;
+            this.accessor = accessor;
             this._onDidTitleChange = new Emitter();
             this.onDidTitleChange = this._onDidTitleChange.event;
             this._onDidActiveGroupChange = new Emitter();
@@ -4663,6 +4844,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._group = group;
             this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
         }
+        moveTo(options) {
+            var _a;
+            this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index);
+        }
         setTitle(title) {
             this.panel.setTitle(title);
         }
@@ -4687,7 +4872,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.containerApi = containerApi;
             this.view = view;
             this._group = group;
-            this.api = new DockviewPanelApiImpl(this, this._group);
+            this.api = new DockviewPanelApiImpl(this, this._group, accessor);
             this.addDisposables(this.api.onActiveChange(() => {
                 accessor.setActivePanel(this);
             }), this.api.onDidSizeChange((event) => {
@@ -5028,6 +5213,296 @@ 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);
+            }
+            toggleClass(element, 'dv-bring-to-front', true);
+            previous = element;
+        }
+        return pushToTop;
+    })();
+    class Overlay extends CompositeDisposable {
+        constructor(options) {
+            super();
+            this.options = options;
+            this._element = document.createElement('div');
+            this._onDidChange = new Emitter();
+            this.onDidChange = this._onDidChange.event;
+            this._onDidChangeEnd = new Emitter();
+            this.onDidChangeEnd = this._onDidChangeEnd.event;
+            this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+            this._element.className = 'dv-resize-container';
+            this.setupResize('top');
+            this.setupResize('bottom');
+            this.setupResize('left');
+            this.setupResize('right');
+            this.setupResize('topleft');
+            this.setupResize('topright');
+            this.setupResize('bottomleft');
+            this.setupResize('bottomright');
+            this._element.appendChild(this.options.content);
+            this.options.container.appendChild(this._element);
+            // if input bad resize within acceptable boundaries
+            this.setBounds({
+                height: this.options.height,
+                width: this.options.width,
+                top: this.options.top,
+                left: this.options.left,
+            });
+        }
+        setBounds(bounds = {}) {
+            if (typeof bounds.height === 'number') {
+                this._element.style.height = `${bounds.height}px`;
+            }
+            if (typeof bounds.width === 'number') {
+                this._element.style.width = `${bounds.width}px`;
+            }
+            if (typeof bounds.top === 'number') {
+                this._element.style.top = `${bounds.top}px`;
+            }
+            if (typeof bounds.left === 'number') {
+                this._element.style.left = `${bounds.left}px`;
+            }
+            const containerRect = this.options.container.getBoundingClientRect();
+            const overlayRect = this._element.getBoundingClientRect();
+            // region: ensure bounds within allowable limits
+            // a minimum width of minimumViewportWidth must be inside the viewport
+            const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+            // a minimum height of minimumViewportHeight must be inside the viewport
+            const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+            const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+            const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+            this._element.style.left = `${left}px`;
+            this._element.style.top = `${top}px`;
+            this._onDidChange.fire();
+        }
+        toJSON() {
+            const container = this.options.container.getBoundingClientRect();
+            const element = this._element.getBoundingClientRect();
+            return {
+                top: element.top - container.top,
+                left: element.left - container.left,
+                width: element.width,
+                height: element.height,
+            };
+        }
+        setupDrag(dragTarget, options = { inDragMode: false }) {
+            const move = new MutableDisposable();
+            const track = () => {
+                let offset = null;
+                const iframes = [
+                    ...getElementsByTagName('iframe'),
+                    ...getElementsByTagName('webview'),
+                ];
+                for (const iframe of iframes) {
+                    iframe.style.pointerEvents = 'none';
+                }
+                move.value = new CompositeDisposable({
+                    dispose: () => {
+                        for (const iframe of iframes) {
+                            iframe.style.pointerEvents = 'auto';
+                        }
+                    },
+                }, addDisposableWindowListener(window, 'mousemove', (e) => {
+                    const containerRect = this.options.container.getBoundingClientRect();
+                    const x = e.clientX - containerRect.left;
+                    const y = e.clientY - containerRect.top;
+                    toggleClass(this._element, 'dv-resize-container-dragging', true);
+                    const overlayRect = this._element.getBoundingClientRect();
+                    if (offset === null) {
+                        offset = {
+                            x: e.clientX - overlayRect.left,
+                            y: e.clientY - overlayRect.top,
+                        };
+                    }
+                    const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+                    const yOffset = Math.max(0, overlayRect.height -
+                        this.options.minimumInViewportHeight);
+                    const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                    const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                    this.setBounds({ top, left });
+                }), addDisposableWindowListener(window, 'mouseup', () => {
+                    toggleClass(this._element, 'dv-resize-container-dragging', false);
+                    move.dispose();
+                    this._onDidChangeEnd.fire();
+                }));
+            };
+            this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+                if (event.defaultPrevented) {
+                    event.preventDefault();
+                    return;
+                }
+                // if somebody has marked this event then treat as a defaultPrevented
+                // without actually calling event.preventDefault()
+                if (quasiDefaultPrevented(event)) {
+                    return;
+                }
+                track();
+            }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                // if somebody has marked this event then treat as a defaultPrevented
+                // without actually calling event.preventDefault()
+                if (quasiDefaultPrevented(event)) {
+                    return;
+                }
+                if (event.shiftKey) {
+                    track();
+                }
+            }), addDisposableListener(this.options.content, 'mousedown', () => {
+                bringElementToFront(this._element);
+            }, true));
+            bringElementToFront(this._element);
+            if (options.inDragMode) {
+                track();
+            }
+        }
+        setupResize(direction) {
+            const resizeHandleElement = document.createElement('div');
+            resizeHandleElement.className = `dv-resize-handle-${direction}`;
+            this._element.appendChild(resizeHandleElement);
+            const move = new MutableDisposable();
+            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';
+                }
+                move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+                    const containerRect = this.options.container.getBoundingClientRect();
+                    const overlayRect = this._element.getBoundingClientRect();
+                    const y = e.clientY - containerRect.top;
+                    const x = e.clientX - containerRect.left;
+                    if (startPosition === null) {
+                        // record the initial dimensions since as all subsequence moves are relative to this
+                        startPosition = {
+                            originalY: y,
+                            originalHeight: overlayRect.height,
+                            originalX: x,
+                            originalWidth: overlayRect.width,
+                        };
+                    }
+                    let top = undefined;
+                    let height = undefined;
+                    let left = undefined;
+                    let width = undefined;
+                    const minimumInViewportHeight = this.options.minimumInViewportHeight;
+                    const minimumInViewportWidth = this.options.minimumInViewportWidth;
+                    function moveTop() {
+                        top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                            startPosition.originalHeight >
+                            containerRect.height
+                            ? containerRect.height -
+                                minimumInViewportHeight
+                            : Math.max(0, startPosition.originalY +
+                                startPosition.originalHeight -
+                                Overlay.MINIMUM_HEIGHT));
+                        height =
+                            startPosition.originalY +
+                                startPosition.originalHeight -
+                                top;
+                    }
+                    function moveBottom() {
+                        top =
+                            startPosition.originalY -
+                                startPosition.originalHeight;
+                        height = clamp(y - top, top < 0
+                            ? -top + minimumInViewportHeight
+                            : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                    }
+                    function moveLeft() {
+                        left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                            startPosition.originalWidth >
+                            containerRect.width
+                            ? containerRect.width -
+                                minimumInViewportWidth
+                            : Math.max(0, startPosition.originalX +
+                                startPosition.originalWidth -
+                                Overlay.MINIMUM_WIDTH));
+                        width =
+                            startPosition.originalX +
+                                startPosition.originalWidth -
+                                left;
+                    }
+                    function moveRight() {
+                        left =
+                            startPosition.originalX -
+                                startPosition.originalWidth;
+                        width = clamp(x - left, left < 0
+                            ? -left + minimumInViewportWidth
+                            : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                    }
+                    switch (direction) {
+                        case 'top':
+                            moveTop();
+                            break;
+                        case 'bottom':
+                            moveBottom();
+                            break;
+                        case 'left':
+                            moveLeft();
+                            break;
+                        case 'right':
+                            moveRight();
+                            break;
+                        case 'topleft':
+                            moveTop();
+                            moveLeft();
+                            break;
+                        case 'topright':
+                            moveTop();
+                            moveRight();
+                            break;
+                        case 'bottomleft':
+                            moveBottom();
+                            moveLeft();
+                            break;
+                        case 'bottomright':
+                            moveBottom();
+                            moveRight();
+                            break;
+                    }
+                    this.setBounds({ height, width, top, left });
+                }), {
+                    dispose: () => {
+                        for (const iframe of iframes) {
+                            iframe.style.pointerEvents = 'auto';
+                        }
+                    },
+                }, addDisposableWindowListener(window, 'mouseup', () => {
+                    move.dispose();
+                    this._onDidChangeEnd.fire();
+                }));
+            }));
+        }
+        dispose() {
+            this._element.remove();
+            super.dispose();
+        }
+    }
+    Overlay.MINIMUM_HEIGHT = 20;
+    Overlay.MINIMUM_WIDTH = 20;
+
+    class DockviewFloatingGroupPanel extends CompositeDisposable {
+        constructor(group, overlay) {
+            super();
+            this.group = group;
+            this.overlay = overlay;
+            this.addDisposables(overlay);
+        }
+        position(bounds) {
+            this.overlay.setBounds(bounds);
+        }
+    }
+
     class DockviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -5068,7 +5543,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-            this.element.classList.add('dv-dockview');
+            this.floatingGroups = [];
+            toggleClass(this.gridview.element, 'dv-dockview', true);
             this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
@@ -5098,6 +5574,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         if (data.viewId !== this.id) {
                             return false;
                         }
+                        if (position === 'center') {
+                            // center drop target is only allowed if there are no panels in the grid
+                            // floating panels are allowed
+                            return this.gridview.length === 0;
+                        }
                         return true;
                     }
                     if (this.options.showDndOverlay) {
@@ -5110,7 +5591,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                     return false;
                 },
-                acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+                acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
                 overlayModel: {
                     activationSize: { type: 'pixels', value: 10 },
                     size: { type: 'pixels', value: 20 },
@@ -5128,6 +5609,75 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._api = new DockviewApi(this);
             this.updateWatermark();
         }
+        addFloatingGroup(item, coord, options) {
+            var _a, _b;
+            let group;
+            if (item instanceof DockviewPanel) {
+                group = this.createGroup();
+                this.removePanel(item, {
+                    removeEmptyGroup: true,
+                    skipDispose: true,
+                });
+                group.model.openPanel(item);
+            }
+            else {
+                group = item;
+                const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                    options.skipRemoveGroup;
+                if (!skip) {
+                    this.doRemoveGroup(item, { skipDispose: true });
+                }
+            }
+            group.model.isFloating = true;
+            const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+            const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+            const overlay = new Overlay({
+                container: this.gridview.element,
+                content: group.element,
+                height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+                width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
+                left: overlayLeft,
+                top: overlayTop,
+                minimumInViewportWidth: 100,
+                minimumInViewportHeight: 100,
+            });
+            const el = group.element.querySelector('.void-container');
+            if (!el) {
+                throw new Error('failed to find drag handle');
+            }
+            overlay.setupDrag(el, {
+                inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                    ? options.inDragMode
+                    : false,
+            });
+            const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
+            const disposable = 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
+                // don't care about resize since the above watcher handles that
+                group.layout(group.height, group.width);
+            }), overlay.onDidChangeEnd(() => {
+                this._bufferOnDidLayoutChange.fire();
+            }), group.onDidChange((event) => {
+                overlay.setBounds({
+                    height: event === null || event === void 0 ? void 0 : event.height,
+                    width: event === null || event === void 0 ? void 0 : event.width,
+                });
+            }), {
+                dispose: () => {
+                    disposable.dispose();
+                    group.model.isFloating = false;
+                    remove(this.floatingGroups, floatingGroupPanel);
+                    this.updateWatermark();
+                },
+            });
+            this.floatingGroups.push(floatingGroupPanel);
+            this.updateWatermark();
+        }
         orthogonalize(position) {
             switch (position) {
                 case 'top':
@@ -5150,6 +5700,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             switch (position) {
                 case 'top':
                 case 'left':
+                case 'center':
                     return this.createGroupAtLocation([0]); // insert into first position
                 case 'bottom':
                 case 'right':
@@ -5167,6 +5718,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.layout(this.gridview.width, this.gridview.height, true);
         }
+        layout(width, height, forceResize) {
+            super.layout(width, height, forceResize);
+            if (this.floatingGroups) {
+                for (const floating of this.floatingGroups) {
+                    // ensure floting groups stay within visible boundaries
+                    floating.overlay.setBounds();
+                }
+            }
+        }
         focus() {
             var _a;
             (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -5229,51 +5789,81 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 collection[panel.id] = panel.toJSON();
                 return collection;
             }, {});
-            return {
+            const floats = this.floatingGroups.map((floatingGroup) => {
+                return {
+                    data: floatingGroup.group.toJSON(),
+                    position: floatingGroup.overlay.toJSON(),
+                };
+            });
+            const result = {
                 grid: data,
                 panels,
                 activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
             };
+            if (floats.length > 0) {
+                result.floatingGroups = floats;
+            }
+            return result;
         }
         fromJSON(data) {
+            var _a;
             this.clear();
             const { grid, panels, activeGroup } = data;
             if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
                 throw new Error('root must be of type branch');
             }
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
+            const createGroupFromSerializedState = (data) => {
+                const { id, locked, hideHeader, views, activeView } = data;
+                const group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                this._onDidAddGroup.fire(group);
+                for (const child of views) {
+                    const panel = this._deserializer.fromJSON(panels[child], group);
+                    const isActive = typeof activeView === 'string' && activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true,
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true,
+                    });
+                }
+                return group;
+            };
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
-                    const { id, locked, hideHeader, views, activeView } = node.data;
-                    const group = this.createGroup({
-                        id,
-                        locked: !!locked,
-                        hideHeader: !!hideHeader,
-                    });
-                    this._onDidAddGroup.fire(group);
-                    for (const child of views) {
-                        const panel = this._deserializer.fromJSON(panels[child], group);
-                        const isActive = typeof activeView === 'string' &&
-                            activeView === panel.id;
-                        group.model.openPanel(panel, {
-                            skipSetPanelActive: !isActive,
-                            skipSetGroupActive: true,
-                        });
-                    }
-                    if (!group.activePanel && group.panels.length > 0) {
-                        group.model.openPanel(group.panels[group.panels.length - 1], {
-                            skipSetGroupActive: true,
-                        });
-                    }
-                    return group;
+                    return createGroupFromSerializedState(node.data);
                 },
             });
+            this.layout(width, height, true);
+            const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+            for (const serializedFloatingGroup of serializedFloatingGroups) {
+                const { data, position } = serializedFloatingGroup;
+                const group = createGroupFromSerializedState(data);
+                this.addFloatingGroup(group, {
+                    x: position.left,
+                    y: position.top,
+                    height: position.height,
+                    width: position.width,
+                }, { skipRemoveGroup: true, inDragMode: false });
+            }
+            for (const floatingGroup of this.floatingGroups) {
+                floatingGroup.overlay.setBounds();
+            }
             if (typeof activeGroup === 'string') {
                 const panel = this.getPanel(activeGroup);
                 if (panel) {
                     this.doSetGroupActive(panel);
                 }
             }
-            this.gridview.layout(this.width, this.height);
             this._onDidLayoutFromJSON.fire();
         }
         clear() {
@@ -5282,7 +5872,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const hasActivePanel = !!this.activePanel;
             for (const group of groups) {
                 // remove the group will automatically remove the panels
-                this.removeGroup(group, true);
+                this.removeGroup(group, { skipActive: true });
             }
             if (hasActiveGroup) {
                 this.doSetGroupActive(undefined);
@@ -5304,6 +5894,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 throw new Error(`panel with id ${options.id} already exists`);
             }
             let referenceGroup;
+            if (options.position && options.floating) {
+                throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+            }
             if (options.position) {
                 if (isPanelOptionsWithPanel(options.position)) {
                     const referencePanel = typeof options.position.referencePanel === 'string'
@@ -5336,7 +5929,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             let panel;
             if (referenceGroup) {
                 const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-                if (target === 'center') {
+                if (options.floating) {
+                    const group = this.createGroup();
+                    panel = this.createPanel(options, group);
+                    group.model.openPanel(panel);
+                    const o = typeof options.floating === 'object' &&
+                        options.floating !== null
+                        ? options.floating
+                        : {};
+                    this.addFloatingGroup(group, o, {
+                        inDragMode: false,
+                        skipRemoveGroup: true,
+                    });
+                }
+                else if (referenceGroup.api.isFloating || target === 'center') {
                     panel = this.createPanel(options, referenceGroup);
                     referenceGroup.model.openPanel(panel);
                 }
@@ -5348,6 +5954,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     group.model.openPanel(panel);
                 }
             }
+            else if (options.floating) {
+                const group = this.createGroup();
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
+                const o = typeof options.floating === 'object' &&
+                    options.floating !== null
+                    ? options.floating
+                    : {};
+                this.addFloatingGroup(group, o, {
+                    inDragMode: false,
+                    skipRemoveGroup: true,
+                });
+            }
             else {
                 const group = this.createGroupAtLocation();
                 panel = this.createPanel(options, group);
@@ -5364,7 +5983,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
             }
             group.model.removePanel(panel);
-            panel.dispose();
+            if (!options.skipDispose) {
+                panel.dispose();
+            }
             if (group.size === 0 && options.removeEmptyGroup) {
                 this.removeGroup(group);
             }
@@ -5379,7 +6000,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         updateWatermark() {
             var _a, _b;
-            if (this.groups.length === 0) {
+            if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
                 if (!this.watermark) {
                     this.watermark = this.createWatermarkComponent();
                     this.watermark.init({
@@ -5388,7 +6009,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const watermarkContainer = document.createElement('div');
                     watermarkContainer.className = 'dv-watermark-container';
                     watermarkContainer.appendChild(this.watermark.element);
-                    this.element.appendChild(watermarkContainer);
+                    this.gridview.element.appendChild(watermarkContainer);
                 }
             }
             else if (this.watermark) {
@@ -5438,15 +6059,28 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 return group;
             }
         }
-        removeGroup(group, skipActive = false) {
+        removeGroup(group, options) {
+            var _a;
             const panels = [...group.panels]; // reassign since group panels will mutate
             for (const panel of panels) {
                 this.removePanel(panel, {
                     removeEmptyGroup: false,
-                    skipDispose: false,
+                    skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
                 });
             }
-            super.doRemoveGroup(group, { skipActive });
+            this.doRemoveGroup(group, options);
+        }
+        doRemoveGroup(group, options) {
+            const floatingGroup = this.floatingGroups.find((_) => _.group === group);
+            if (floatingGroup) {
+                if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                    floatingGroup.group.dispose();
+                    this._groups.delete(group.id);
+                }
+                floatingGroup.dispose();
+                return floatingGroup.group;
+            }
+            return super.doRemoveGroup(group, options);
         }
         moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
             var _a;
@@ -5477,25 +6111,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 if (sourceGroup && sourceGroup.size < 2) {
                     const [targetParentLocation, to] = tail(targetLocation);
-                    const sourceLocation = getGridLocation(sourceGroup.element);
-                    const [sourceParentLocation, from] = tail(sourceLocation);
-                    if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                        // special case when 'swapping' two views within same grid location
-                        // if a group has one tab - we are essentially moving the 'group'
-                        // which is equivalent to swapping two views in this case
-                        this.gridview.moveView(sourceParentLocation, from, to);
-                    }
-                    else {
-                        // source group will become empty so delete the group
-                        const targetGroup = this.doRemoveGroup(sourceGroup, {
-                            skipActive: true,
-                            skipDispose: true,
-                        });
-                        // after deleting the group we need to re-evaulate the ref location
-                        const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-                        const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                        this.doAddGroup(targetGroup, location);
+                    const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
+                    if (!isFloating) {
+                        const sourceLocation = getGridLocation(sourceGroup.element);
+                        const [sourceParentLocation, from] = tail(sourceLocation);
+                        if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                            // special case when 'swapping' two views within same grid location
+                            // if a group has one tab - we are essentially moving the 'group'
+                            // which is equivalent to swapping two views in this case
+                            this.gridview.moveView(sourceParentLocation, from, to);
+                        }
                     }
+                    // source group will become empty so delete the group
+                    const targetGroup = this.doRemoveGroup(sourceGroup, {
+                        skipActive: true,
+                        skipDispose: true,
+                    });
+                    // after deleting the group we need to re-evaulate the ref location
+                    const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                    this.doAddGroup(targetGroup, location);
                 }
                 else {
                     const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
@@ -5524,7 +6159,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 }
                 else {
-                    this.gridview.removeView(getGridLocation(sourceGroup.element));
+                    const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
+                    if (floatingGroup) {
+                        floatingGroup.dispose();
+                    }
+                    else {
+                        this.gridview.removeView(getGridLocation(sourceGroup.element));
+                    }
                     const referenceLocation = getGridLocation(referenceGroup.element);
                     const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
                     this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
@@ -5679,6 +6320,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.clear();
             const { grid, activePanel } = serializedGridview;
             const queue = [];
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
                     const { data } = node;
@@ -5704,7 +6348,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     return view;
                 },
             });
-            this.layout(this.width, this.height, true);
+            this.layout(width, height, true);
             queue.forEach((f) => f());
             if (typeof activePanel === 'string') {
                 const panel = this.getPanel(activePanel);
@@ -6018,6 +6662,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.clear();
             const { views, orientation, size, activeView } = serializedSplitview;
             const queue = [];
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
             this.splitview = new Splitview(this.element, {
                 orientation,
                 proportionalLayout: this.options.proportionalLayout,
@@ -6054,7 +6701,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }),
                 },
             });
-            this.layout(this.width, this.height);
+            this.layout(width, height);
             queue.forEach((f) => f());
             if (typeof activeView === 'string') {
                 const panel = this.getPanel(activeView);
@@ -6321,6 +6968,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.clear();
             const { views, size } = serializedPaneview;
             const queue = [];
+            // take note of the existing dimensions
+            const width = this.width;
+            const height = this.height;
             this.paneview = new Paneview(this.element, {
                 orientation: exports.Orientation.VERTICAL,
                 descriptor: {
@@ -6376,7 +7026,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }),
                 },
             });
-            this.layout(this.width, this.height);
+            this.layout(width, height);
             queue.forEach((f) => f());
             this._onDidLayoutfromJSON.fire();
         }
@@ -6759,7 +7409,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    class ReactGroupControlsRendererPart {
+    class ReactHeaderActionsRendererPart {
         get element() {
             return this._element;
         }
@@ -6796,6 +7446,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 panels: this._group.model.panels,
                 activePanel: this._group.model.activePanel,
                 isGroupActive: this._group.api.isActive,
+                group: this._group,
             });
         }
         update(event) {
@@ -6829,7 +7480,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     function createGroupControlElement(component, store) {
         return component
             ? (groupPanel) => {
-                return new ReactGroupControlsRendererPart(component, store, groupPanel);
+                return new ReactHeaderActionsRendererPart(component, store, groupPanel);
             }
             : undefined;
     }
@@ -6886,8 +7537,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     ? { separatorBorder: 'transparent' }
                     : undefined,
                 showDndOverlay: props.showDndOverlay,
-                createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+                createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+                createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
                 singleTabMode: props.singleTabMode,
+                disableFloatingGroups: props.disableFloatingGroups,
             });
             const { clientWidth, clientHeight } = domRef.current;
             dockview.layout(clientWidth, clientHeight);
@@ -6946,6 +7599,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkTabComponents: props.tabComponents,
             });
         }, [props.tabComponents]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                disableFloatingGroups: props.disableFloatingGroups,
+            });
+        }, [props.disableFloatingGroups]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -6967,9 +7628,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 return;
             }
             dockviewRef.current.updateOptions({
-                createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+                createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+            });
+        }, [props.rightHeaderActionsComponent]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
             });
-        }, [props.groupControlComponent]);
+        }, [props.leftHeaderActionsComponent]);
         return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     DockviewReact.displayName = 'DockviewComponent';
@@ -6988,6 +7657,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol */
+
 
     function __rest(s, e) {
         var t = {};
@@ -6999,7 +7670,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     t[p[i]] = s[p[i]];
             }
         return t;
-    }
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        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" })));
@@ -7327,6 +8003,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.positionToDirection = positionToDirection;
     exports.toTarget = toTarget;
     exports.usePortalsLifecycle = usePortalsLifecycle;
-    exports.watchElementResize = watchElementResize;
 
 }));
+//# sourceMappingURL=dockview.amd.noStyle.js.map