dockview 1.8.1 → 1.8.3

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.8.1
+ * @version 1.8.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -57,7 +57,7 @@
     }
   }
 
-  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 {
@@ -294,9 +294,6 @@
       get isDisposed() {
           return this._isDisposed;
       }
-      static from(...args) {
-          return new CompositeDisposable(...args);
-      }
       constructor(...args) {
           this._isDisposed = false;
           this._disposables = args;
@@ -2500,6 +2497,12 @@
       get onDidDrop() {
           return this.component.onDidDrop;
       }
+      get onWillDragGroup() {
+          return this.component.onWillDragGroup;
+      }
+      get onWillDragPanel() {
+          return this.component.onWillDragPanel;
+      }
       get panels() {
           return this.component.panels;
       }
@@ -2962,7 +2965,7 @@
       }
       configure() {
           this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-              if (this.isCancelled(event)) {
+              if (event.defaultPrevented || this.isCancelled(event)) {
                   event.preventDefault();
                   return;
               }
@@ -2982,19 +2985,23 @@
               }
               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();
@@ -3003,44 +3010,45 @@
       }
   }
 
+  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) => {
@@ -3054,12 +3062,19 @@
                           // 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);
       }
@@ -3091,9 +3106,9 @@
   }
 
   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) => {
@@ -3113,8 +3128,9 @@
           }
           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');
@@ -3149,14 +3165,16 @@
           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) => {
@@ -3174,7 +3192,9 @@
                   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);
       }
@@ -3182,7 +3202,7 @@
 
   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;
@@ -3236,7 +3256,7 @@
               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();
@@ -3247,7 +3267,11 @@
           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');
@@ -3271,7 +3295,12 @@
           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,
@@ -3317,7 +3346,7 @@
           }
       }
       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();
@@ -3326,21 +3355,23 @@
       }
       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;
@@ -3348,8 +3379,8 @@
                   !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,
@@ -3366,13 +3397,13 @@
               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) {
@@ -3400,7 +3431,7 @@
       }
       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;
@@ -3457,6 +3488,10 @@
           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();
@@ -3469,7 +3504,8 @@
           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();
@@ -3495,8 +3531,12 @@
           });
           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);
@@ -3551,8 +3591,8 @@
               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;
@@ -3802,6 +3842,9 @@
           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) {
@@ -5259,6 +5302,12 @@
       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;
@@ -5304,9 +5353,11 @@
           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`;
@@ -5352,9 +5403,10 @@
                           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 });
@@ -5428,14 +5480,11 @@
                   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));
@@ -5443,21 +5492,23 @@
                           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));
@@ -5465,15 +5516,18 @@
                           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();
@@ -5517,6 +5571,18 @@
               }));
           }));
       }
+      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();
@@ -5537,6 +5603,7 @@
       }
   }
 
+  const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
   class DockviewComponent extends BaseGrid {
       get orientation() {
           return this.gridview.orientation;
@@ -5567,6 +5634,10 @@
           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();
@@ -5579,7 +5650,7 @@
           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();
@@ -5616,7 +5687,7 @@
                       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
@@ -5652,7 +5723,7 @@
           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();
@@ -5680,8 +5751,12 @@
               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) {
@@ -5752,12 +5827,37 @@
           }
       }
       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) {
@@ -6240,7 +6340,11 @@
           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) => {
@@ -6279,13 +6383,6 @@
           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 {
@@ -7583,6 +7680,7 @@
               createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
               singleTabMode: props.singleTabMode,
               disableFloatingGroups: props.disableFloatingGroups,
+              floatingGroupBounds: props.floatingGroupBounds,
           });
           const { clientWidth, clientHeight } = domRef.current;
           dockview.layout(clientWidth, clientHeight);
@@ -7617,6 +7715,14 @@
               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;
@@ -7723,25 +7829,32 @@
       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 {