dockview 1.8.1 → 1.8.3

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.1
+ * @version 1.8.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -260,9 +260,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get isDisposed() {
             return this._isDisposed;
         }
-        static from(...args) {
-            return new CompositeDisposable(...args);
-        }
         constructor(...args) {
             this._isDisposed = false;
             this._disposables = args;
@@ -2466,6 +2463,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onDidDrop() {
             return this.component.onDidDrop;
         }
+        get onWillDragGroup() {
+            return this.component.onWillDragGroup;
+        }
+        get onWillDragPanel() {
+            return this.component.onWillDragPanel;
+        }
         get panels() {
             return this.component.panels;
         }
@@ -2928,7 +2931,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         configure() {
             this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                if (this.isCancelled(event)) {
+                if (event.defaultPrevented || this.isCancelled(event)) {
                     event.preventDefault();
                     return;
                 }
@@ -2948,19 +2951,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 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();
@@ -2969,44 +2976,45 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    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) => {
@@ -3020,12 +3028,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             // 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, exports.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);
         }
@@ -3057,9 +3072,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     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) => {
@@ -3079,8 +3094,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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');
@@ -3115,14 +3131,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) => {
@@ -3140,7 +3158,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     return group.model.canDisplayOverlay(event, position, exports.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);
         }
@@ -3148,7 +3168,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
     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;
@@ -3202,7 +3222,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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();
@@ -3213,7 +3233,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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');
@@ -3237,7 +3261,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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,
@@ -3283,7 +3312,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         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();
@@ -3292,21 +3321,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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;
@@ -3314,8 +3345,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     !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,
@@ -3332,13 +3363,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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) {
@@ -3366,7 +3397,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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;
@@ -3423,6 +3454,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -3435,7 +3470,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -3461,8 +3497,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             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);
@@ -3517,8 +3557,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -3768,6 +3808,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -5225,6 +5268,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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;
@@ -5270,9 +5319,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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`;
@@ -5318,9 +5369,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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 });
@@ -5394,14 +5446,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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));
@@ -5409,21 +5458,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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));
@@ -5431,15 +5482,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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();
@@ -5483,6 +5537,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }));
             }));
         }
+        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();
@@ -5503,6 +5569,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
+    const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
     class DockviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -5533,6 +5600,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -5545,7 +5616,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this.floatingGroups = [];
             toggleClass(this.gridview.element, 'dv-dockview', true);
-            this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
@@ -5582,7 +5653,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         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
@@ -5618,7 +5689,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -5646,8 +5717,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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) {
@@ -5718,12 +5793,37 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         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) {
@@ -6206,7 +6306,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) => {
@@ -6245,13 +6349,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 {
@@ -7549,6 +7646,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
                 singleTabMode: props.singleTabMode,
                 disableFloatingGroups: props.disableFloatingGroups,
+                floatingGroupBounds: props.floatingGroupBounds,
             });
             const { clientWidth, clientHeight } = domRef.current;
             dockview.layout(clientWidth, clientHeight);
@@ -7583,6 +7681,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 frameworkComponents: props.components,
             });
         }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                floatingGroupBounds: props.floatingGroupBounds,
+            });
+        }, [props.floatingGroupBounds]);
         React__namespace.useEffect(() => {
             if (!dockviewRef.current) {
                 return;
@@ -7689,25 +7795,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         React__namespace.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
 
     const DockviewDefaultTab = (_a) => {
-        var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+        var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
         const onClose = React__namespace.useCallback((event) => {
-            event.stopPropagation();
-            api.close();
-        }, [api]);
+            event.preventDefault();
+            if (closeActionOverride) {
+                closeActionOverride();
+            }
+            else {
+                api.close();
+            }
+        }, [api, closeActionOverride]);
+        const onMouseDown = React__namespace.useCallback((e) => {
+            e.preventDefault();
+        }, []);
         const onClick = React__namespace.useCallback((event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
             api.setActive();
             if (rest.onClick) {
                 rest.onClick(event);
             }
         }, [api, rest.onClick]);
-        const iconClassname = React__namespace.useMemo(() => {
-            const cn = ['dockview-react-tab-action'];
-            return cn.join(',');
-        }, []);
-        return (React__namespace.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+        return (React__namespace.createElement("div", Object.assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
             React__namespace.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-            React__namespace.createElement("div", { className: iconClassname, onClick: onClose },
-                React__namespace.createElement(CloseButton, null))));
+            !hideClose && (React__namespace.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
+                React__namespace.createElement(CloseButton, null)))));
     };
 
     class ReactPanelView extends SplitviewPanel {