dockview 1.1.0 → 1.2.0

package/dist/esm/api/component.api.js

@@ -159,9 +159,6 @@ export class GridviewApi {
     get height() {
         return this.component.height;
     }
-    get onGridEvent() {
-        return this.component.onGridEvent;
-    }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
@@ -251,9 +248,6 @@ export class DockviewApi {
     get totalPanels() {
         return this.component.totalPanels;
     }
-    get onGridEvent() {
-        return this.component.onGridEvent;
-    }
     get onDidActiveGroupChange() {
         return this.component.onDidActiveGroupChange;
     }

package/dist/esm/dnd/abstractDragHandler.d.ts

@@ -3,7 +3,7 @@ export declare abstract class DragHandler extends CompositeDisposable {
     private readonly el;
     private readonly disposable;
     private readonly _onDragStart;
-    readonly onDragStart: import("..").Event<void>;
+    readonly onDragStart: import("../events").Event<void>;
     private iframes;
     constructor(el: HTMLElement);
     abstract getData(): IDisposable;

package/dist/esm/dnd/abstractDragHandler.js

@@ -1,7 +1,6 @@
-import { MutableDisposable } from '..';
 import { getElementsByTagName } from '../dom';
 import { addDisposableListener, Emitter } from '../events';
-import { CompositeDisposable } from '../lifecycle';
+import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 export class DragHandler extends CompositeDisposable {
     constructor(el) {
         super();

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

@@ -34,7 +34,7 @@ export interface SerializedDockview {
         tabHeight?: number;
     };
 }
-export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay'>;
+export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
 }
@@ -113,10 +113,12 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
     closeAllGroups(): void;
     fireMouseEvent(event: LayoutMouseEvent): void;
     addPanel(options: AddPanelOptions): IGroupPanel;
-    removePanel(panel: IGroupPanel): void;
+    removePanel(panel: IGroupPanel, options?: {
+        removeEmptyGroup: boolean;
+    }): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options: AddGroupOptions): void;
-    removeGroup(group: GroupviewPanel): void;
+    removeGroup(group: GroupviewPanel, skipActive?: boolean): void;
     moveGroupOrPanel(referenceGroup: GroupviewPanel, groupId: string, itemId: string, target: Position, index?: number): void;
     doSetGroupActive(group: GroupviewPanel | undefined, skipFocus?: boolean): void;
     createGroup(options?: GroupOptions): GroupviewPanel;

package/dist/esm/dockview/dockviewComponent.js

@@ -3,12 +3,12 @@ import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { CompositeDisposable } from '../lifecycle';
-import { Emitter } from '../events';
+import { Event, Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDeserializer } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
-import { BaseGrid, GroupChangeKind, toTarget, } from '../gridview/baseComponentGridview';
+import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { MouseEventKind } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
@@ -39,7 +39,9 @@ export class DockviewComponent extends BaseGrid {
         this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop);
+        this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }));
         this._options = options;
         if (!this.options.components) {
             this.options.components = {};
@@ -173,11 +175,12 @@ export class DockviewComponent extends BaseGrid {
         };
     }
     fromJSON(data) {
+        const groups = Array.from(this._groups.values()).map((_) => _.value);
+        for (const group of groups) {
+            // remove the group will automatically remove the panels
+            this.removeGroup(group, true);
+        }
         this.gridview.clear();
-        this.panels.forEach((panel) => {
-            panel.dispose();
-        });
-        this._groups.clear();
         if (!this.deserializer) {
             throw new Error('invalid deserializer');
         }
@@ -201,7 +204,6 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         this.gridview.layout(this.width, this.height);
-        this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT_FROM_JSON });
         this._onDidLayoutfromJSON.fire();
     }
     closeAllGroups() {
@@ -251,13 +253,13 @@ export class DockviewComponent extends BaseGrid {
         }
         return panel;
     }
-    removePanel(panel) {
+    removePanel(panel, options = { removeEmptyGroup: true }) {
         const group = panel.group;
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel);
-        if (group.model.size === 0) {
+        if (group.model.size === 0 && options.removeEmptyGroup) {
             this.removeGroup(group);
         }
     }
@@ -289,16 +291,14 @@ export class DockviewComponent extends BaseGrid {
             this.doAddGroup(group);
         }
     }
-    removeGroup(group) {
+    removeGroup(group, skipActive = false) {
         const panels = [...group.model.panels]; // reassign since group panels will mutate
-        panels.forEach((panel) => {
-            this.removePanel(panel);
-        });
-        if (this._groups.size === 1) {
-            this._activeGroup = group;
-            return;
+        for (const panel of panels) {
+            this.removePanel(panel, {
+                removeEmptyGroup: false,
+            });
         }
-        super.removeGroup(group);
+        super.doRemoveGroup(group, { skipActive });
     }
     moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
         var _a;
@@ -353,15 +353,11 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     doSetGroupActive(group, skipFocus) {
-        var _a, _b, _c;
+        var _a, _b;
         const isGroupAlreadyFocused = this._activeGroup === group;
         super.doSetGroupActive(group, skipFocus);
         if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-            this._onGridEvent.fire({
-                kind: GroupChangeKind.PANEL_ACTIVE,
-                panel: (_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel,
-            });
-            this._onDidActivePanelChange.fire((_c = this._activeGroup) === null || _c === void 0 ? void 0 : _c.model.activePanel);
+            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
         }
     }
     createGroup(options) {
@@ -392,28 +388,16 @@ export class DockviewComponent extends BaseGrid {
             }), view.model.onDidGroupChange((event) => {
                 switch (event.kind) {
                     case GroupChangeKind2.ADD_PANEL:
-                        this._onGridEvent.fire({
-                            kind: GroupChangeKind.ADD_PANEL,
-                            panel: event.panel,
-                        });
                         if (event.panel) {
                             this._onDidAddPanel.fire(event.panel);
                         }
                         break;
                     case GroupChangeKind2.REMOVE_PANEL:
-                        this._onGridEvent.fire({
-                            kind: GroupChangeKind.REMOVE_PANEL,
-                            panel: event.panel,
-                        });
                         if (event.panel) {
                             this._onDidRemovePanel.fire(event.panel);
                         }
                         break;
                     case GroupChangeKind2.PANEL_ACTIVE:
-                        this._onGridEvent.fire({
-                            kind: GroupChangeKind.PANEL_ACTIVE,
-                            panel: event.panel,
-                        });
                         this._onDidActivePanelChange.fire(event.panel);
                         break;
                 }

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

@@ -15,6 +15,7 @@ export declare class DockviewGroupPanel extends CompositeDisposable implements I
     private _view?;
     private _title;
     private _suppressClosable;
+    get params(): any;
     get title(): string;
     get suppressClosable(): boolean;
     get group(): GroupviewPanel | undefined;

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -16,6 +16,10 @@ export class DockviewGroupPanel extends CompositeDisposable {
             this.update({ params: { title } });
         }));
     }
+    get params() {
+        var _a;
+        return (_a = this._params) === null || _a === void 0 ? void 0 : _a.params;
+    }
     get title() {
         return this._title;
     }

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -1,29 +1,14 @@
-import { Emitter, Event } from '../events';
+import { Event, TickDelayedEvent } from '../events';
 import { Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable, IValueDisposable } from '../lifecycle';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
-import { IGroupPanel } from '../groupview/groupPanel';
-export declare enum GroupChangeKind {
-    ADD_PANEL = "ADD_PANEL",
-    REMOVE_PANEL = "REMOVE_PANEL",
-    PANEL_ACTIVE = "PANEL_ACTIVE",
-    GROUP_ACTIVE = "GROUP_ACTIVE",
-    ADD_GROUP = "ADD_GROUP",
-    REMOVE_GROUP = "REMOVE_GROUP",
-    LAYOUT_FROM_JSON = "LAYOUT_FROM_JSON",
-    LAYOUT = "LAYOUT"
-}
-export interface GroupChangeEvent {
-    readonly kind: GroupChangeKind;
-    readonly panel?: IGroupPanel;
-}
 export declare type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
 export declare function toTarget(direction: Direction): Position;
 export interface BaseGridOptions {
-    readonly proportionalLayout?: boolean;
+    readonly proportionalLayout: boolean;
     readonly orientation: Orientation;
     readonly styles?: ISplitviewStyles;
 }
@@ -43,7 +28,6 @@ export interface IBaseGrid<T extends IGridPanelView> {
     readonly activeGroup: T | undefined;
     readonly size: number;
     readonly groups: T[];
-    readonly onGridEvent: Event<GroupChangeEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidRemoveGroup: Event<T>;
     readonly onDidAddGroup: Event<T>;
@@ -62,8 +46,6 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     protected readonly _groups: Map<string, IValueDisposable<T>>;
     protected readonly gridview: Gridview;
     protected _activeGroup: T | undefined;
-    protected readonly _onGridEvent: Emitter<GroupChangeEvent>;
-    readonly onGridEvent: Event<GroupChangeEvent>;
     private _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidRemoveGroup;
@@ -72,6 +54,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     readonly onDidAddGroup: Event<T>;
     private readonly _onDidActiveGroupChange;
     readonly onDidActiveGroupChange: Event<T | undefined>;
+    protected readonly _bufferOnDidLayoutChange: TickDelayedEvent;
     get id(): string;
     get element(): HTMLElement;
     get size(): number;

package/dist/esm/gridview/baseComponentGridview.js

@@ -1,22 +1,9 @@
-import { Emitter, TickDelayedEvent } from '../events';
+import { Emitter, Event, TickDelayedEvent } from '../events';
 import { getGridLocation, Gridview } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable } from '../lifecycle';
 import { sequentialNumberGenerator } from '../math';
 import { Sizing, } from '../splitview/core/splitview';
-export var GroupChangeKind;
-(function (GroupChangeKind) {
-    GroupChangeKind["ADD_PANEL"] = "ADD_PANEL";
-    GroupChangeKind["REMOVE_PANEL"] = "REMOVE_PANEL";
-    GroupChangeKind["PANEL_ACTIVE"] = "PANEL_ACTIVE";
-    //
-    GroupChangeKind["GROUP_ACTIVE"] = "GROUP_ACTIVE";
-    GroupChangeKind["ADD_GROUP"] = "ADD_GROUP";
-    GroupChangeKind["REMOVE_GROUP"] = "REMOVE_GROUP";
-    //
-    GroupChangeKind["LAYOUT_FROM_JSON"] = "LAYOUT_FROM_JSON";
-    GroupChangeKind["LAYOUT"] = "LAYOUT";
-})(GroupChangeKind || (GroupChangeKind = {}));
 const nextLayoutId = sequentialNumberGenerator();
 export function toTarget(direction) {
     switch (direction) {
@@ -39,9 +26,6 @@ export class BaseGrid extends CompositeDisposable {
         this._element = _element;
         this._id = nextLayoutId.next();
         this._groups = new Map();
-        //
-        this._onGridEvent = new Emitter();
-        this.onGridEvent = this._onGridEvent.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._onDidRemoveGroup = new Emitter();
@@ -50,30 +34,18 @@ export class BaseGrid extends CompositeDisposable {
         this.onDidAddGroup = this._onDidAddGroup.event;
         this._onDidActiveGroupChange = new Emitter();
         this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
+        this._bufferOnDidLayoutChange = new TickDelayedEvent();
         this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
         this.addDisposables(this.gridview.onDidChange(() => {
-            this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
+            this._onDidLayoutChange.fire();
         }));
-        this.addDisposables((() => {
-            const tickDelayedEvent = new TickDelayedEvent();
-            return new CompositeDisposable(this.onGridEvent((event) => {
-                if ([
-                    GroupChangeKind.ADD_GROUP,
-                    GroupChangeKind.REMOVE_GROUP,
-                    GroupChangeKind.ADD_PANEL,
-                    GroupChangeKind.REMOVE_PANEL,
-                    GroupChangeKind.GROUP_ACTIVE,
-                    GroupChangeKind.PANEL_ACTIVE,
-                    GroupChangeKind.LAYOUT,
-                ].includes(event.kind)) {
-                    tickDelayedEvent.fire();
-                }
-            }), tickDelayedEvent.onEvent(() => {
-                this._onDidLayoutChange.fire();
-            }), tickDelayedEvent);
-        })());
+        this.addDisposables(Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+            this._bufferOnDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange.onEvent(() => {
+            this._onDidLayoutChange.fire();
+        }), this._bufferOnDidLayoutChange);
     }
     get id() {
         return this._id;
@@ -110,14 +82,13 @@ export class BaseGrid extends CompositeDisposable {
     }
     setVisible(panel, visible) {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-        this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
+        this._onDidLayoutChange.fire();
     }
     isVisible(panel) {
         return this.gridview.isViewVisible(getGridLocation(panel.element));
     }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);
-        this._onGridEvent.fire({ kind: GroupChangeKind.ADD_GROUP });
         this._onDidAddGroup.fire(group);
         this.doSetGroupActive(group);
     }
@@ -131,7 +102,6 @@ export class BaseGrid extends CompositeDisposable {
             item.disposable.dispose();
             this._groups.delete(group.id);
         }
-        this._onGridEvent.fire({ kind: GroupChangeKind.REMOVE_GROUP });
         this._onDidRemoveGroup.fire(group);
         if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
             const groups = Array.from(this._groups.values());
@@ -160,9 +130,6 @@ export class BaseGrid extends CompositeDisposable {
             }
         }
         this._activeGroup = group;
-        this._onGridEvent.fire({
-            kind: GroupChangeKind.GROUP_ACTIVE,
-        });
         this._onDidActiveGroupChange.fire(group);
     }
     removeGroup(group) {
@@ -219,7 +186,6 @@ export class BaseGrid extends CompositeDisposable {
     }
     dispose() {
         super.dispose();
-        this._onGridEvent.dispose();
         this._onDidActiveGroupChange.dispose();
         this._onDidAddGroup.dispose();
         this._onDidRemoveGroup.dispose();

package/dist/esm/gridview/branchNode.js

@@ -40,7 +40,7 @@ export class BranchNode extends CompositeDisposable {
                             : true,
                     };
                 }),
-                size: this.orthogonalSize,
+                size: this.size,
             };
             this.children = childDescriptors.map((c) => c.node);
             this.splitview = new Splitview(this.element, {

package/dist/esm/gridview/gridview.js

@@ -149,6 +149,7 @@ export class Gridview {
         this.disposable.dispose();
         this._onDidChange.dispose();
         this.root.dispose();
+        this.element.remove();
     }
     clear() {
         const orientation = this.root.orientation;

package/dist/esm/gridview/gridviewComponent.js

@@ -2,7 +2,7 @@ import { getRelativeLocation, getGridLocation, } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
 import { CompositeDisposable } from '../lifecycle';
-import { BaseGrid, GroupChangeKind, toTarget, } from './baseComponentGridview';
+import { BaseGrid, toTarget, } from './baseComponentGridview';
 import { GridviewApi } from '../api/component.api';
 import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
@@ -122,7 +122,6 @@ export class GridviewComponent extends BaseGrid {
                 this.doSetGroupActive(panel);
             }
         }
-        this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT_FROM_JSON });
         this._onDidLayoutfromJSON.fire();
     }
     movePanel(panel, options) {

package/dist/esm/groupview/groupPanel.d.ts

@@ -18,6 +18,7 @@ export interface IGroupPanel extends IDisposable, IPanel {
     readonly api: DockviewPanelApi;
     readonly title: string;
     readonly suppressClosable: boolean;
+    readonly params: Record<string, any> | undefined;
     updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void;
     init(params: IGroupPanelInitParameters): void;
     toJSON(): GroupviewPanelState;

package/dist/esm/index.d.ts

@@ -1,5 +1,3 @@
-export * from './events';
-export * from './lifecycle';
 export * from './dnd/dataTransfer';
 export * from './api/component.api';
 export * from './splitview/core/splitview';
@@ -20,6 +18,8 @@ export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './groupview/groupPanel';
 export * from './react';
+export { Event } from './events';
+export { IDisposable } from './lifecycle';
 export { Position } from './dnd/droptarget';
 export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
 export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi';

package/dist/esm/index.js

@@ -1,5 +1,3 @@
-export * from './events';
-export * from './lifecycle';
 export * from './dnd/dataTransfer';
 export * from './api/component.api';
 export * from './splitview/core/splitview';
@@ -20,4 +18,5 @@ export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './groupview/groupPanel';
 export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
+export { Event } from './events';
 export { Position } from './dnd/droptarget';

package/dist/esm/paneview/paneview.js

@@ -127,7 +127,6 @@ export class Paneview extends CompositeDisposable {
     }
     dispose() {
         super.dispose();
-        this.splitview.dispose();
         if (this.animationTimer) {
             clearTimeout(this.animationTimer);
             this.animationTimer = undefined;
@@ -136,6 +135,7 @@ export class Paneview extends CompositeDisposable {
             paneItem.disposable.dispose();
         });
         this.paneItems = [];
+        this.splitview.dispose();
         this.element.remove();
     }
 }

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -111,4 +111,5 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     resizeToFit(): void;
     toJSON(): SerializedPaneview;
     fromJSON(serializedPaneview: SerializedPaneview, deferComponentLayout?: boolean): void;
+    dispose(): void;
 }

package/dist/esm/paneview/paneviewComponent.js

@@ -247,4 +247,8 @@ export class PaneviewComponent extends CompositeDisposable {
             queue.forEach((f) => f());
         }
     }
+    dispose() {
+        super.dispose();
+        this.paneview.dispose();
+    }
 }

package/dist/esm/react/dockview/dockview.js

@@ -80,6 +80,7 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         return () => {
             disposable.dispose();
             dockview.dispose();
+            element.remove();
         };
     }, []);
     React.useEffect(() => {
@@ -90,6 +91,14 @@ export const DockviewReact = React.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            watermarkFrameworkComponent: props.watermarkComponent,
+        });
+    }, [props.watermarkComponent]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;

package/dist/esm/react/gridview/gridview.js

@@ -28,7 +28,9 @@ export const GridviewReact = React.forwardRef((props, ref) => {
         var _a;
         const element = document.createElement('div');
         const gridview = new GridviewComponent(element, {
-            proportionalLayout: !!props.proportionalLayout,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
             orientation: props.orientation,
             frameworkComponents: props.components,
             frameworkComponentFactory: {
@@ -51,6 +53,7 @@ export const GridviewReact = React.forwardRef((props, ref) => {
         gridviewRef.current = gridview;
         return () => {
             gridview.dispose();
+            element.remove();
         };
     }, []);
     React.useEffect(() => {

package/dist/esm/react/splitview/splitview.js

@@ -35,7 +35,9 @@ export const SplitviewReact = React.forwardRef((props, ref) => {
                     });
                 },
             },
-            proportionalLayout: props.proportionalLayout,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,

package/dist/esm/splitview/core/splitview.js

@@ -678,12 +678,12 @@ export class Splitview {
         this._onDidSashEnd.dispose();
         this._onDidAddView.dispose();
         this._onDidRemoveView.dispose();
-        this.element.remove();
         for (let i = 0; i < this.element.children.length; i++) {
             if (this.element.children.item(i) === this.element) {
                 this.element.removeChild(this.element);
                 break;
             }
         }
+        this.element.remove();
     }
 }

package/dist/esm/splitview/splitviewComponent.js

@@ -244,6 +244,7 @@ export class SplitviewComponent extends CompositeDisposable {
             value.dispose();
         });
         this.panels.clear();
+        this.splitview.dispose();
         super.dispose();
     }
 }

package/dist/styles/dockview.css

@@ -115,25 +115,26 @@
 }
 .drop-target > .drop-target-dropzone > .drop-target-selection {
   position: relative;
-  pointer-events: none;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   background-color: var(--dv-drag-over-background-color);
   transition-duration: 0.15s;
   transition-timing-function: ease-out;
+  will-change: transform;
+  pointer-events: none;
 }
-.drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {
-  width: 50%;
+.drop-target > .drop-target-dropzone > .drop-target-selection.left {
+  transform: translateX(-25%) scaleX(50%);
 }
 .drop-target > .drop-target-dropzone > .drop-target-selection.right {
-  transform: translate(100%, 0%);
+  transform: translateX(25%) scaleX(50%);
 }
-.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
-  transform: translate(0%, 100%);
+.drop-target > .drop-target-dropzone > .drop-target-selection.top {
+  transform: translateY(-25%) scaleY(50%);
 }
-.drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
-  height: 50%;
+.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
+  transform: translateY(25%) scaleY(50%);
 }
 .drop-target > .drop-target-dropzone > .drop-target-selection.small-top {
   border-top: 1px solid var(--dv-drag-over-border-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -55,23 +55,23 @@
   "author": "https://github.com/mathuo",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/react": "^12.1.3",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@testing-library/react": "^13.1.0",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "cross-env": "^7.0.3",
-    "postcss": "^8.4.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "postcss": "^8.4.12",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.68.0",
+    "rollup": "^2.70.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typedoc": "^0.22.12"
+    "typedoc": "^0.22.15"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "1816476fbbd7c1ec674f20d0df4f443f36124660"
+  "gitHead": "2dc0c4ab219a5b2188b9d98e032d9b987561bf4d"
 }