dockview 1.8.1 → 1.8.3

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.1
+ * @version 1.8.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dockview-react-tab-action {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dockview-react-tab-action:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dockview-react-tab-action {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}";
+var css_248z = "@import \"dockview-core/dist/styles/dockview.css\";\n.tab .dockview-react-tab {\n  display: flex;\n  padding: 0px 8px;\n  align-items: center;\n  height: 100%;\n}\n.tab .dockview-react-tab .dockview-react-tab-title {\n  padding: 0px 8px;\n  flex-grow: 1;\n}\n.tab .dockview-react-tab .dv-react-tab-close-btn {\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.tab .dockview-react-tab .dv-react-tab-close-btn:hover {\n  border-radius: 2px;\n  background-color: var(--dv-icon-hover-background-color);\n}\n.tab.inactive-tab:not(:hover) .dv-react-tab-close-btn {\n  visibility: hidden;\n}\n.dockview-react-part {\n  height: 100%;\n  width: 100%;\n}";
 styleInject(css_248z);
 
 class TransferObject {
@@ -271,9 +271,6 @@ class CompositeDisposable {
     get isDisposed() {
         return this._isDisposed;
     }
-    static from(...args) {
-        return new CompositeDisposable(...args);
-    }
     constructor(...args) {
         this._isDisposed = false;
         this._disposables = args;
@@ -2477,6 +2474,12 @@ class DockviewApi {
     get onDidDrop() {
         return this.component.onDidDrop;
     }
+    get onWillDragGroup() {
+        return this.component.onWillDragGroup;
+    }
+    get onWillDragPanel() {
+        return this.component.onWillDragPanel;
+    }
     get panels() {
         return this.component.panels;
     }
@@ -2939,7 +2942,7 @@ class DragHandler extends CompositeDisposable {
     }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            if (this.isCancelled(event)) {
+            if (event.defaultPrevented || this.isCancelled(event)) {
                 event.preventDefault();
                 return;
             }
@@ -2959,19 +2962,23 @@ class DragHandler extends CompositeDisposable {
             }
             this.el.classList.add('dv-dragged');
             setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-            this.dataDisposable.value = this.getData(event.dataTransfer);
+            this.dataDisposable.value = this.getData(event);
+            this._onDragStart.fire(event);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
-                /**
-                 * Although this is not used by dockview many third party dnd libraries will check
-                 * dataTransfer.types to determine valid drag events.
-                 *
-                 * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                 * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                 * dnd logic. You can see the code at
-                 * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                 */
-                event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                const hasData = event.dataTransfer.items.length > 0;
+                if (!hasData) {
+                    /**
+                     * Although this is not used by dockview many third party dnd libraries will check
+                     * dataTransfer.types to determine valid drag events.
+                     *
+                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                     * dnd logic. You can see the code at
+                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                     */
+                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                }
             }
         }), addDisposableListener(this.el, 'dragend', () => {
             this.pointerEventsDisposable.dispose();
@@ -2980,44 +2987,45 @@ class DragHandler extends CompositeDisposable {
     }
 }
 
+class TabDragHandler extends DragHandler {
+    constructor(element, accessor, group, panel) {
+        super(element);
+        this.accessor = accessor;
+        this.group = group;
+        this.panel = panel;
+        this.panelTransfer = LocalSelectionTransfer.getInstance();
+    }
+    getData(event) {
+        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+        return {
+            dispose: () => {
+                this.panelTransfer.clearData(PanelTransfer.prototype);
+            },
+        };
+    }
+}
 class Tab extends CompositeDisposable {
     get element() {
         return this._element;
     }
-    constructor(panelId, accessor, group) {
+    constructor(panel, accessor, group) {
         super();
-        this.panelId = panelId;
+        this.panel = panel;
         this.accessor = accessor;
         this.group = group;
+        this.content = undefined;
         this._onChanged = new Emitter();
         this.onChanged = this._onChanged.event;
         this._onDropped = new Emitter();
         this.onDrop = this._onDropped.event;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
         toggleClass(this.element, 'inactive-tab', true);
-        this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
-            constructor() {
-                super(...arguments);
-                this.panelTransfer = LocalSelectionTransfer.getInstance();
-            }
-            getData() {
-                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
-                return {
-                    dispose: () => {
-                        this.panelTransfer.clearData(PanelTransfer.prototype);
-                    },
-                };
-            }
-        })(this._element));
-        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            this._onChanged.fire(event);
-        }));
+        const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
         this.droptarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
@@ -3031,12 +3039,19 @@ class Tab extends CompositeDisposable {
                         // don't allow group move to drop on self
                         return false;
                     }
-                    return this.panelId !== data.panelId;
+                    return this.panel.id !== data.panelId;
                 }
                 return this.group.model.canDisplayOverlay(event, position, DockviewDropTargets.Tab);
             },
         });
-        this.addDisposables(this.droptarget.onDrop((event) => {
+        this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            this._onChanged.fire(event);
+        }), this.droptarget.onDrop((event) => {
             this._onDropped.fire(event);
         }), this.droptarget);
     }
@@ -3068,9 +3083,9 @@ function addGhostImage(dataTransfer, ghostElement) {
 }
 
 class GroupDragHandler extends DragHandler {
-    constructor(element, accessorId, group) {
+    constructor(element, accessor, group) {
         super(element);
-        this.accessorId = accessorId;
+        this.accessor = accessor;
         this.group = group;
         this.panelTransfer = LocalSelectionTransfer.getInstance();
         this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
@@ -3090,8 +3105,9 @@ class GroupDragHandler extends DragHandler {
         }
         return false;
     }
-    getData(dataTransfer) {
-        this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+    getData(dragEvent) {
+        const dataTransfer = dragEvent.dataTransfer;
+        this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
         const style = window.getComputedStyle(this.el);
         const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
         const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
@@ -3126,14 +3142,16 @@ class VoidContainer extends CompositeDisposable {
         this.group = group;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
+        this._onDragStart = new Emitter();
+        this.onDragStart = this._onDragStart.event;
         this._element = document.createElement('div');
         this._element.className = 'void-container';
         this._element.tabIndex = 0;
         this._element.draggable = true;
-        this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+        this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
             this.accessor.doSetGroupActive(this.group);
         }));
-        const handler = new GroupDragHandler(this._element, accessor.id, group);
+        const handler = new GroupDragHandler(this._element, accessor, group);
         this.voidDropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
@@ -3151,7 +3169,9 @@ class VoidContainer extends CompositeDisposable {
                 return group.model.canDisplayOverlay(event, position, DockviewDropTargets.Panel);
             },
         });
-        this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+        this.addDisposables(handler, handler.onDragStart((event) => {
+            this._onDragStart.fire(event);
+        }), this.voidDropTarget.onDrop((event) => {
             this._onDrop.fire(event);
         }), this.voidDropTarget);
     }
@@ -3159,7 +3179,7 @@ class VoidContainer extends CompositeDisposable {
 
 class TabsContainer extends CompositeDisposable {
     get panels() {
-        return this.tabs.map((_) => _.value.panelId);
+        return this.tabs.map((_) => _.value.panel.id);
     }
     get size() {
         return this.tabs.length;
@@ -3213,7 +3233,7 @@ class TabsContainer extends CompositeDisposable {
             this.tabs[this.selectedIndex].value === tab);
     }
     indexOf(id) {
-        return this.tabs.findIndex((tab) => tab.value.panelId === id);
+        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
     }
     constructor(accessor, group) {
         super();
@@ -3224,7 +3244,11 @@ class TabsContainer extends CompositeDisposable {
         this._hidden = false;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
-        this.addDisposables(this._onDrop);
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
+        this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
         this._element = document.createElement('div');
         this._element.className = 'tabs-and-actions-container';
         toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
@@ -3248,7 +3272,12 @@ class TabsContainer extends CompositeDisposable {
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+        this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+            this._onGroupDragStart.fire({
+                nativeEvent: event,
+                group: this.group,
+            });
+        }), this.voidContainer.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
                 index: this.tabs.length,
@@ -3294,7 +3323,7 @@ class TabsContainer extends CompositeDisposable {
         }
     }
     delete(id) {
-        const index = this.tabs.findIndex((tab) => tab.value.panelId === id);
+        const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         const tabToRemove = this.tabs.splice(index, 1)[0];
         const { value, disposable } = tabToRemove;
         disposable.dispose();
@@ -3303,21 +3332,23 @@ class TabsContainer extends CompositeDisposable {
     }
     setActivePanel(panel) {
         this.tabs.forEach((tab) => {
-            const isActivePanel = panel.id === tab.value.panelId;
+            const isActivePanel = panel.id === tab.value.panel.id;
             tab.value.setActive(isActivePanel);
         });
     }
     openPanel(panel, index = this.tabs.length) {
         var _a;
-        if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
+        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
             return;
         }
-        const tabToAdd = new Tab(panel.id, this.accessor, this.group);
+        const tab = new Tab(panel, this.accessor, this.group);
         if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
             throw new Error('invalid header component');
         }
-        tabToAdd.setContent(panel.view.tab);
-        const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
+        tab.setContent(panel.view.tab);
+        const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+            this._onTabDragStart.fire({ nativeEvent: event, panel });
+        }), tab.onChanged((event) => {
             var _a;
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
@@ -3325,8 +3356,8 @@ class TabsContainer extends CompositeDisposable {
                 !isFloatingWithOnePanel &&
                 event.shiftKey) {
                 event.preventDefault();
-                const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
-                const { top, left } = tabToAdd.element.getBoundingClientRect();
+                const panel = this.accessor.getGroupPanel(tab.panel.id);
+                const { top, left } = tab.element.getBoundingClientRect();
                 const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
                 this.accessor.addFloatingGroup(panel, {
                     x: left - rootLeft,
@@ -3343,13 +3374,13 @@ class TabsContainer extends CompositeDisposable {
             this.group.model.openPanel(panel, {
                 skipFocus: alreadyFocused,
             });
-        }), tabToAdd.onDrop((event) => {
+        }), tab.onDrop((event) => {
             this._onDrop.fire({
                 event: event.nativeEvent,
-                index: this.tabs.findIndex((x) => x.value === tabToAdd),
+                index: this.tabs.findIndex((x) => x.value === tab),
             });
         }));
-        const value = { value: tabToAdd, disposable };
+        const value = { value: tab, disposable };
         this.addTab(value, index);
     }
     closePanel(panel) {
@@ -3377,7 +3408,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
     }
     set locked(value) {
         this._locked = value;
-        toggleClass(this.container, 'locked-groupview', value);
+        toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
     }
     get isActive() {
         return this._isGroupActive;
@@ -3434,6 +3465,10 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onTabDragStart = new Emitter();
+        this.onTabDragStart = this._onTabDragStart.event;
+        this._onGroupDragStart = new Emitter();
+        this.onGroupDragStart = this._onGroupDragStart.event;
         this._onDidAddPanel = new Emitter();
         this.onDidAddPanel = this._onDidAddPanel.event;
         this._onDidRemovePanel = new Emitter();
@@ -3446,7 +3481,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         this.dropTarget = new Droptarget(this.contentContainer.element, {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             canDisplayOverlay: (event, position) => {
-                if (this.locked && position === 'center') {
+                if (this.locked === 'no-drop-target' ||
+                    (this.locked && position === 'center')) {
                     return false;
                 }
                 const data = getPanelData();
@@ -3472,8 +3508,12 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         });
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
-        this.locked = !!options.locked;
-        this.addDisposables(this.tabsContainer.onDrop((event) => {
+        this.locked = options.locked || false;
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+            this._onTabDragStart.fire(event);
+        }), this.tabsContainer.onGroupDragStart((event) => {
+            this._onGroupDragStart.fire(event);
+        }), this.tabsContainer.onDrop((event) => {
             this.handleDropEvent(event.event, 'center', event.index);
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3528,8 +3568,8 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
             id: this.id,
         };
-        if (this.locked) {
-            result.locked = true;
+        if (this.locked !== false) {
+            result.locked = this.locked;
         }
         if (this.header.hidden) {
             result.hideHeader = true;
@@ -3779,6 +3819,9 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         return false;
     }
     handleDropEvent(event, position, index) {
+        if (this.locked === 'no-drop-target') {
+            return;
+        }
         const data = getPanelData();
         if (data && data.viewId === this.accessor.id) {
             if (data.panelId === null) {
@@ -5236,6 +5279,12 @@ const bringElementToFront = (() => {
     return pushToTop;
 })();
 class Overlay extends CompositeDisposable {
+    set minimumInViewportWidth(value) {
+        this.options.minimumInViewportWidth = value;
+    }
+    set minimumInViewportHeight(value) {
+        this.options.minimumInViewportHeight = value;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -5281,9 +5330,11 @@ class Overlay extends CompositeDisposable {
         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);
+        const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
         // a minimum height of minimumViewportHeight must be inside the viewport
-        const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+        const yOffset = typeof this.options.minimumInViewportHeight === 'number'
+            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+            : 0;
         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`;
@@ -5329,9 +5380,10 @@ class Overlay extends CompositeDisposable {
                         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 xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
+                const yOffset = Math.max(0, this.options.minimumInViewportHeight
+                    ? this.getMinimumHeight(overlayRect.height)
+                    : 0);
                 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 });
@@ -5405,14 +5457,11 @@ class Overlay extends CompositeDisposable {
                 let height = undefined;
                 let left = undefined;
                 let width = undefined;
-                const minimumInViewportHeight = this.options.minimumInViewportHeight;
-                const minimumInViewportWidth = this.options.minimumInViewportWidth;
-                function moveTop() {
+                const moveTop = () => {
                     top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? containerRect.height -
-                            minimumInViewportHeight
+                        ? this.getMinimumHeight(containerRect.height)
                         : Math.max(0, startPosition.originalY +
                             startPosition.originalHeight -
                             Overlay.MINIMUM_HEIGHT));
@@ -5420,21 +5469,23 @@ class Overlay extends CompositeDisposable {
                         startPosition.originalY +
                             startPosition.originalHeight -
                             top;
-                }
-                function moveBottom() {
+                };
+                const moveBottom = () => {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = clamp(y - top, top < 0
-                        ? -top + minimumInViewportHeight
+                    height = clamp(y - top, top < 0 &&
+                        typeof this.options
+                            .minimumInViewportHeight === 'number'
+                        ? -top +
+                            this.options.minimumInViewportHeight
                         : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                }
-                function moveLeft() {
+                };
+                const moveLeft = () => {
                     left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? containerRect.width -
-                            minimumInViewportWidth
+                        ? this.getMinimumWidth(containerRect.width)
                         : Math.max(0, startPosition.originalX +
                             startPosition.originalWidth -
                             Overlay.MINIMUM_WIDTH));
@@ -5442,15 +5493,18 @@ class Overlay extends CompositeDisposable {
                         startPosition.originalX +
                             startPosition.originalWidth -
                             left;
-                }
-                function moveRight() {
+                };
+                const moveRight = () => {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = clamp(x - left, left < 0
-                        ? -left + minimumInViewportWidth
+                    width = clamp(x - left, left < 0 &&
+                        typeof this.options
+                            .minimumInViewportWidth === 'number'
+                        ? -left +
+                            this.options.minimumInViewportWidth
                         : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                }
+                };
                 switch (direction) {
                     case 'top':
                         moveTop();
@@ -5494,6 +5548,18 @@ class Overlay extends CompositeDisposable {
             }));
         }));
     }
+    getMinimumWidth(width) {
+        if (typeof this.options.minimumInViewportWidth === 'number') {
+            return width - this.options.minimumInViewportWidth;
+        }
+        return 0;
+    }
+    getMinimumHeight(height) {
+        if (typeof this.options.minimumInViewportHeight === 'number') {
+            return height - this.options.minimumInViewportHeight;
+        }
+        return height;
+    }
     dispose() {
         this._element.remove();
         super.dispose();
@@ -5514,6 +5580,7 @@ class DockviewFloatingGroupPanel extends CompositeDisposable {
     }
 }
 
+const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
 class DockviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -5544,6 +5611,10 @@ class DockviewComponent extends BaseGrid {
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
         this.watermark = null;
+        this._onWillDragPanel = new Emitter();
+        this.onWillDragPanel = this._onWillDragPanel.event;
+        this._onWillDragGroup = new Emitter();
+        this.onWillDragGroup = this._onWillDragGroup.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
         this._onDidRemovePanel = new Emitter();
@@ -5556,7 +5627,7 @@ class DockviewComponent extends BaseGrid {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this.floatingGroups = [];
         toggleClass(this.gridview.element, 'dv-dockview', true);
-        this.addDisposables(this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+        this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, Event.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
             this.updateWatermark();
         }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
@@ -5593,7 +5664,7 @@ class DockviewComponent extends BaseGrid {
                     return true;
                 }
                 if (this.options.showDndOverlay) {
-                    if (position === 'center') {
+                    if (position === 'center' && this.gridview.length !== 0) {
                         /**
                          * for external events only show the four-corner drag overlays, disable
                          * the center position so that external drag events can fall through to the group
@@ -5629,7 +5700,7 @@ class DockviewComponent extends BaseGrid {
         this.updateWatermark();
     }
     addFloatingGroup(item, coord, options) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         let group;
         if (item instanceof DockviewPanel) {
             group = this.createGroup();
@@ -5657,8 +5728,12 @@ class DockviewComponent extends BaseGrid {
             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,
+            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+            minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                ? undefined
+                : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
         });
         const el = group.element.querySelector('.void-container');
         if (!el) {
@@ -5729,12 +5804,37 @@ class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
+        var _a, _b;
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
+        const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+            options.floatingGroupBounds !== this.options.floatingGroupBounds;
         this._options = Object.assign(Object.assign({}, this.options), options);
         if (hasOrientationChanged) {
             this.gridview.orientation = options.orientation;
         }
+        if (hasFloatingGroupOptionsChanged) {
+            for (const group of this.floatingGroups) {
+                switch (this.options.floatingGroupBounds) {
+                    case 'boundedWithinViewport':
+                        group.overlay.minimumInViewportHeight = undefined;
+                        group.overlay.minimumInViewportWidth = undefined;
+                        break;
+                    case undefined:
+                        group.overlay.minimumInViewportHeight =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        group.overlay.minimumInViewportWidth =
+                            DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                        break;
+                    default:
+                        group.overlay.minimumInViewportHeight =
+                            (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                        group.overlay.minimumInViewportWidth =
+                            (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                }
+                group.overlay.setBounds({});
+            }
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -6217,7 +6317,11 @@ class DockviewComponent extends BaseGrid {
         const view = new DockviewGroupPanel(this, id, options);
         view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
         if (!this._groups.has(view.id)) {
-            const disposable = new CompositeDisposable(view.model.onMove((event) => {
+            const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
+                this._onWillDragPanel.fire(event);
+            }), view.model.onGroupDragStart((event) => {
+                this._onWillDragGroup.fire(event);
+            }), view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
             }), view.model.onDidDrop((event) => {
@@ -6256,13 +6360,6 @@ class DockviewComponent extends BaseGrid {
         var _a;
         return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
     }
-    dispose() {
-        this._onDidActivePanelChange.dispose();
-        this._onDidAddPanel.dispose();
-        this._onDidRemovePanel.dispose();
-        this._onDidLayoutFromJSON.dispose();
-        super.dispose();
-    }
 }
 
 class GridviewComponent extends BaseGrid {
@@ -7560,6 +7657,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
             createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
             singleTabMode: props.singleTabMode,
             disableFloatingGroups: props.disableFloatingGroups,
+            floatingGroupBounds: props.floatingGroupBounds,
         });
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
@@ -7594,6 +7692,14 @@ const DockviewReact = React.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            floatingGroupBounds: props.floatingGroupBounds,
+        });
+    }, [props.floatingGroupBounds]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -7700,25 +7806,32 @@ const CloseButton = () => (React.createElement("svg", { height: "11", width: "11
     React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
 
 const DockviewDefaultTab = (_a) => {
-    var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+    var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
     const onClose = React.useCallback((event) => {
-        event.stopPropagation();
-        api.close();
-    }, [api]);
+        event.preventDefault();
+        if (closeActionOverride) {
+            closeActionOverride();
+        }
+        else {
+            api.close();
+        }
+    }, [api, closeActionOverride]);
+    const onMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+    }, []);
     const onClick = React.useCallback((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
         api.setActive();
         if (rest.onClick) {
             rest.onClick(event);
         }
     }, [api, rest.onClick]);
-    const iconClassname = React.useMemo(() => {
-        const cn = ['dockview-react-tab-action'];
-        return cn.join(',');
-    }, []);
-    return (React.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+    return (React.createElement("div", Object.assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
         React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-        React.createElement("div", { className: iconClassname, onClick: onClose },
-            React.createElement(CloseButton, null))));
+        !hideClose && (React.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
+            React.createElement(CloseButton, null)))));
 };
 
 class ReactPanelView extends SplitviewPanel {