dockview-core 4.12.0 → 4.13.1

package/dist/esm/api/component.api.d.ts

@@ -16,7 +16,7 @@ import { PaneviewDidDropEvent } from '../paneview/draggablePaneviewPanel';
 import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 import { Box } from '../types';
 import { DockviewDidDropEvent, DockviewWillDropEvent } from '../dockview/dockviewGroupPanelModel';
-import { WillShowOverlayLocationEvent } from '../dockview/events';
+import { DockviewWillShowOverlayLocationEvent } from '../dockview/events';
 import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from '../paneview/options';
 import { SplitviewComponentOptions } from '../splitview/options';
 import { GridviewComponentOptions } from '../gridview/options';
@@ -403,7 +403,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
      * the any subsequent drop event.
      */
-    get onWillShowOverlay(): Event<WillShowOverlayLocationEvent>;
+    get onWillShowOverlay(): Event<DockviewWillShowOverlayLocationEvent>;
     /**
      * Invoked before a group is dragged.
      *

package/dist/esm/api/dockviewGroupPanelApi.d.ts

@@ -3,7 +3,7 @@ import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
-import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
+import { GridviewPanelApi, GridviewPanelApiImpl, SizeEvent } from './gridviewPanelApi';
 export interface DockviewGroupMoveParams {
     group?: DockviewGroupPanel;
     position?: Position;
@@ -36,12 +36,14 @@ export interface DockviewGroupPanelFloatingChangeEvent {
 export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private readonly accessor;
     private _group;
+    private _pendingSize;
     readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly _onDidActivePanelChange: Emitter<DockviewGroupChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
+    setSize(event: SizeEvent): void;
     close(): void;
     getWindow(): Window;
     moveTo(options: DockviewGroupMoveParams): void;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -16,7 +16,19 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         this.onDidLocationChange = this._onDidLocationChange.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange);
+        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._onDidVisibilityChange.event((event) => {
+            // When becoming visible, apply any pending size change
+            if (event.isVisible && this._pendingSize) {
+                super.setSize(this._pendingSize);
+                this._pendingSize = undefined;
+            }
+        }));
+    }
+    setSize(event) {
+        // Always store the requested size
+        this._pendingSize = Object.assign({}, event);
+        // Apply the size change immediately
+        super.setSize(event);
     }
     close() {
         if (!this._group) {

package/dist/esm/dockview/components/titlebar/tabs.d.ts

@@ -2,7 +2,7 @@ import { Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { WillShowOverlayLocationEvent } from '../../events';
+import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { Tab } from '../tab/tab';
 import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
@@ -20,7 +20,7 @@ export declare class Tabs extends CompositeDisposable {
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
     private readonly _onWillShowOverlay;
-    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     private readonly _onOverflowTabsChange;
     readonly onOverflowTabsChange: Event<{
         tabs: string[];

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -3,7 +3,7 @@ import { isChildEntirelyVisibleWithinParent, OverflowObserver, } from '../../../
 import { addDisposableListener, Emitter } from '../../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../lifecycle';
 import { Scrollbar } from '../../../scrollbar';
-import { WillShowOverlayLocationEvent } from '../../events';
+import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { Tab } from '../tab/tab';
 export class Tabs extends CompositeDisposable {
     get showTabsOverflowControl() {
@@ -145,7 +145,7 @@ export class Tabs extends CompositeDisposable {
                 index: this._tabs.findIndex((x) => x.value === tab),
             });
         }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'tab',
                 panel: this.group.activePanel,
                 api: this.accessor.api,

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -4,7 +4,7 @@ import { Tab } from '../tab/tab';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
-import { WillShowOverlayLocationEvent } from '../../events';
+import { DockviewWillShowOverlayLocationEvent } from '../../events';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
@@ -24,7 +24,7 @@ export interface ITabsContainer extends IDisposable {
     readonly onDrop: Event<TabDropIndexEvent>;
     readonly onTabDragStart: Event<TabDragEvent>;
     readonly onGroupDragStart: Event<GroupDragEvent>;
-    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     hidden: boolean;
     delete(id: string): void;
     indexOf(id: string): number;
@@ -62,7 +62,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private readonly _onGroupDragStart;
     readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onWillShowOverlay;
-    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     get panels(): string[];
     get size(): number;
     get hidden(): boolean;

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -2,7 +2,7 @@ import { CompositeDisposable, Disposable, MutableDisposable, } from '../../../li
 import { addDisposableListener, Emitter } from '../../../events';
 import { VoidContainer } from './voidContainer';
 import { findRelativeZIndexParent, toggleClass } from '../../../dom';
-import { WillShowOverlayLocationEvent } from '../../events';
+import { DockviewWillShowOverlayLocationEvent } from '../../events';
 import { getPanelData } from '../../../dnd/dataTransfer';
 import { Tabs } from './tabs';
 import { createDropdownElementHandle, } from './tabOverflowControl';
@@ -74,7 +74,7 @@ export class TabsContainer extends CompositeDisposable {
                 index: this.tabs.size,
             });
         }), this.voidContainer.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'header_space',
                 panel: this.group.activePanel,
                 api: this.accessor.api,

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -8,7 +8,7 @@ import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
 import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent } from './dockviewGroupPanelModel';
-import { WillShowOverlayLocationEvent } from './events';
+import { DockviewWillShowOverlayLocationEvent } from './events';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { Parameters } from '../panel/types';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
@@ -129,7 +129,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly orientation: Orientation;
     readonly onDidDrop: Event<DockviewDidDropEvent>;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
-    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     readonly onDidRemovePanel: Event<IDockviewPanel>;
     readonly onDidAddPanel: Event<IDockviewPanel>;
     readonly onDidLayoutFromJSON: Event<void>;
@@ -199,7 +199,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _onWillDrop;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     private readonly _onWillShowOverlay;
-    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     private readonly _onUnhandledDragOverEvent;
     readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     private readonly _onDidRemovePanel;
@@ -292,6 +292,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
         skipPopoutReturn?: boolean;
     } | undefined): DockviewGroupPanel;
     private _moving;
+    private _updatePositionsFrameId;
+    private debouncedUpdateAllPositions;
     movingLock<T>(func: () => T): T;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
     moveGroup(options: MoveGroupOptions): void;

package/dist/esm/dockview/dockviewComponent.js

@@ -12,7 +12,7 @@ import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
 import { DockviewDidDropEvent, DockviewWillDropEvent, } from './dockviewGroupPanelModel';
-import { WillShowOverlayLocationEvent } from './events';
+import { DockviewWillShowOverlayLocationEvent } from './events';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
@@ -184,7 +184,14 @@ export class DockviewComponent extends BaseGrid {
         if (options.debug) {
             this.addDisposables(new StrictEventsSequencing(this));
         }
-        this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidMovePanel.event(() => {
+            /**
+             * Update overlay positions after DOM layout completes to prevent 0×0 dimensions.
+             * With defaultRenderer="always" this results in panel content not showing after move operations.
+             * Debounced to avoid multiple calls when moving groups with multiple panels.
+             */
+            this.debouncedUpdateAllPositions();
+        }), this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.updateWatermark();
         }), this.onDidAdd((event) => {
             if (!this._moving) {
@@ -221,7 +228,7 @@ export class DockviewComponent extends BaseGrid {
                 // option only available when no panels in primary grid
                 return;
             }
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'edge',
                 panel: undefined,
                 api: this._api,
@@ -1052,9 +1059,7 @@ export class DockviewComponent extends BaseGrid {
         }
         this.updateWatermark();
         // Force position updates for always visible panels after DOM layout is complete
-        requestAnimationFrame(() => {
-            this.overlayRenderContainer.updateAllPositions();
-        });
+        this.debouncedUpdateAllPositions();
         this._onDidLayoutFromJSON.fire();
     }
     clear() {
@@ -1390,6 +1395,15 @@ export class DockviewComponent extends BaseGrid {
         }
         return re;
     }
+    debouncedUpdateAllPositions() {
+        if (this._updatePositionsFrameId !== undefined) {
+            cancelAnimationFrame(this._updatePositionsFrameId);
+        }
+        this._updatePositionsFrameId = requestAnimationFrame(() => {
+            this._updatePositionsFrameId = undefined;
+            this.overlayRenderContainer.updateAllPositions();
+        });
+    }
     movingLock(func) {
         const isMoving = this._moving;
         try {
@@ -1700,6 +1714,7 @@ export class DockviewComponent extends BaseGrid {
         from.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
         });
+        this.debouncedUpdateAllPositions();
         // Ensure group becomes active after move
         if (options.skipSetActive === false) {
             // Only activate when explicitly requested (skipSetActive: false)

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -3,7 +3,7 @@ import { PanelTransfer } from '../dnd/dataTransfer';
 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from './dockviewComponent';
 import { DockviewEvent, Event } from '../events';
-import { DockviewGroupDropLocation, WillShowOverlayLocationEvent } from './events';
+import { DockviewGroupDropLocation, DockviewWillShowOverlayLocationEvent } from './events';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
 import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../panel/types';
@@ -155,7 +155,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private readonly _onWillDrop;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     private readonly _onWillShowOverlay;
-    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    readonly onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onGroupDragStart;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -2,7 +2,7 @@ import { DockviewApi } from '../api/component.api';
 import { getPanelData } from '../dnd/dataTransfer';
 import { isAncestor, toggleClass } from '../dom';
 import { addDisposableListener, DockviewEvent, Emitter, } from '../events';
-import { WillShowOverlayLocationEvent } from './events';
+import { DockviewWillShowOverlayLocationEvent } from './events';
 import { CompositeDisposable } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
@@ -177,7 +177,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }), this.tabsContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(event);
         }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+            this._onWillShowOverlay.fire(new DockviewWillShowOverlayLocationEvent(event, {
                 kind: 'content',
                 panel: this.activePanel,
                 api: this._api,

package/dist/esm/dockview/events.d.ts

@@ -5,16 +5,16 @@ import { IDockviewPanel } from './dockviewPanel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewEvent } from '../events';
 export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content' | 'edge';
-export interface WillShowOverlayLocationEventOptions {
+export interface DockviewWillShowOverlayLocationEventOptions {
     readonly kind: DockviewGroupDropLocation;
     readonly panel: IDockviewPanel | undefined;
     readonly api: DockviewApi;
     readonly group: DockviewGroupPanel | undefined;
     getData: () => PanelTransfer | undefined;
 }
-export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
+export declare class DockviewWillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
-    readonly options: WillShowOverlayLocationEventOptions;
+    readonly options: DockviewWillShowOverlayLocationEventOptions;
     get kind(): DockviewGroupDropLocation;
     get nativeEvent(): DragEvent;
     get position(): Position;
@@ -24,5 +24,5 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     get group(): DockviewGroupPanel | undefined;
     preventDefault(): void;
     getData(): PanelTransfer | undefined;
-    constructor(event: WillShowOverlayEvent, options: WillShowOverlayLocationEventOptions);
+    constructor(event: WillShowOverlayEvent, options: DockviewWillShowOverlayLocationEventOptions);
 }

package/dist/esm/dockview/events.js

@@ -1,4 +1,4 @@
-export class WillShowOverlayLocationEvent {
+export class DockviewWillShowOverlayLocationEvent {
     get kind() {
         return this.options.kind;
     }

package/dist/esm/index.d.ts

@@ -16,7 +16,8 @@ export * from './gridview/baseComponentGridview';
 export { DraggablePaneviewPanel, PaneviewDidDropEvent as PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
-export * from './dockview/dockviewGroupPanelModel';
+export { DockviewGroupPanelModel, DockviewDidDropEvent, DockviewWillDropEvent, DockviewGroupChangeEvent, } from './dockview/dockviewGroupPanelModel';
+export { DockviewWillShowOverlayLocationEvent } from './dockview/events';
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';

package/dist/esm/index.js

@@ -16,7 +16,8 @@ export * from './gridview/baseComponentGridview';
 export { DraggablePaneviewPanel, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
-export * from './dockview/dockviewGroupPanelModel';
+export { DockviewGroupPanelModel, DockviewDidDropEvent, DockviewWillDropEvent, } from './dockview/dockviewGroupPanelModel';
+export { DockviewWillShowOverlayLocationEvent } from './dockview/events';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
 export * from './dockview/options';

package/dist/esm/overlay/overlay.js

@@ -1,5 +1,5 @@
 import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
-import { Emitter, addDisposableListener, } from '../events';
+import { Emitter, addDisposableListener } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { clamp } from '../math';
 class AriaLevelTracker {
@@ -267,13 +267,16 @@ export class Overlay extends CompositeDisposable {
                 let right = undefined;
                 let width = undefined;
                 const moveTop = () => {
-                    top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                    // When dragging top handle, constrain top position to prevent oversizing
+                    const maxTop = startPosition.originalY +
                         startPosition.originalHeight >
                         containerRect.height
-                        ? this.getMinimumHeight(containerRect.height)
+                        ? Math.max(0, containerRect.height -
+                            Overlay.MINIMUM_HEIGHT)
                         : Math.max(0, startPosition.originalY +
                             startPosition.originalHeight -
-                            Overlay.MINIMUM_HEIGHT));
+                            Overlay.MINIMUM_HEIGHT);
+                    top = clamp(y, 0, maxTop);
                     height =
                         startPosition.originalY +
                             startPosition.originalHeight -
@@ -284,22 +287,27 @@ export class Overlay extends CompositeDisposable {
                     top =
                         startPosition.originalY -
                             startPosition.originalHeight;
-                    height = clamp(y - top, top < 0 &&
-                        typeof this.options
-                            .minimumInViewportHeight === 'number'
+                    // When dragging bottom handle, constrain height to container height
+                    const minHeight = top < 0 &&
+                        typeof this.options.minimumInViewportHeight ===
+                            'number'
                         ? -top +
                             this.options.minimumInViewportHeight
-                        : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                        : Overlay.MINIMUM_HEIGHT;
+                    const maxHeight = containerRect.height - Math.max(0, top);
+                    height = clamp(y - top, minHeight, maxHeight);
                     bottom = containerRect.height - top - height;
                 };
                 const moveLeft = () => {
-                    left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                    const maxLeft = startPosition.originalX +
                         startPosition.originalWidth >
                         containerRect.width
-                        ? this.getMinimumWidth(containerRect.width)
+                        ? Math.max(0, containerRect.width -
+                            Overlay.MINIMUM_WIDTH) // Prevent extending beyong right edge
                         : Math.max(0, startPosition.originalX +
                             startPosition.originalWidth -
-                            Overlay.MINIMUM_WIDTH));
+                            Overlay.MINIMUM_WIDTH);
+                    left = clamp(x, 0, maxLeft); // min is 0 (Not -Infinity) to prevent dragging beyond left edge
                     width =
                         startPosition.originalX +
                             startPosition.originalWidth -
@@ -310,12 +318,15 @@ export class Overlay extends CompositeDisposable {
                     left =
                         startPosition.originalX -
                             startPosition.originalWidth;
-                    width = clamp(x - left, left < 0 &&
-                        typeof this.options
-                            .minimumInViewportWidth === 'number'
+                    // When dragging right handle, constrain width to container width
+                    const minWidth = left < 0 &&
+                        typeof this.options.minimumInViewportWidth ===
+                            'number'
                         ? -left +
                             this.options.minimumInViewportWidth
-                        : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                        : Overlay.MINIMUM_WIDTH;
+                    const maxWidth = containerRect.width - Math.max(0, left);
+                    width = clamp(x - left, minWidth, maxWidth);
                     right = containerRect.width - left - width;
                 };
                 switch (direction) {

package/dist/esm/splitview/splitview.js

@@ -427,11 +427,13 @@ export class Splitview {
                     document.removeEventListener('pointermove', onPointerMove);
                     document.removeEventListener('pointerup', end);
                     document.removeEventListener('pointercancel', end);
+                    document.removeEventListener('contextmenu', end);
                     this._onDidSashEnd.fire(undefined);
                 };
                 document.addEventListener('pointermove', onPointerMove);
                 document.addEventListener('pointerup', end);
                 document.addEventListener('pointercancel', end);
+                document.addEventListener('contextmenu', end);
             };
             sash.addEventListener('pointerdown', onPointerStart);
             const sashItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "4.12.0",
+  "version": "4.13.1",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",