dockview 1.0.3 → 1.3.0

package/dist/esm/paneview/paneviewComponent.js

@@ -23,6 +23,7 @@ export class PaneviewComponent extends CompositeDisposable {
         super();
         this.element = element;
         this._disposable = new MutableDisposable();
+        this._viewDisposables = new Map();
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._onDidDrop = new Emitter();
@@ -31,6 +32,7 @@ export class PaneviewComponent extends CompositeDisposable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -106,9 +108,7 @@ export class PaneviewComponent extends CompositeDisposable {
             isExpanded: !!options.isExpanded,
             disableDnd: !!this.options.disableDnd,
         });
-        const disposable = new CompositeDisposable(view.onDidDrop((event) => {
-            this._onDidDrop.fire(event);
-        }));
+        this.doAddPanel(view);
         const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
         const index = typeof options.index === 'number' ? options.index : undefined;
         view.init({
@@ -121,7 +121,7 @@ export class PaneviewComponent extends CompositeDisposable {
         });
         this.paneview.addPane(view, size, index);
         view.orientation = this.paneview.orientation;
-        return disposable;
+        return view;
     }
     getPanels() {
         return this.paneview.getPanes();
@@ -130,6 +130,7 @@ export class PaneviewComponent extends CompositeDisposable {
         const views = this.getPanels();
         const index = views.findIndex((_) => _ === panel);
         this.paneview.removePane(index);
+        this.doRemovePanel(panel);
     }
     movePanel(from, to) {
         this.paneview.moveView(from, to);
@@ -179,6 +180,10 @@ export class PaneviewComponent extends CompositeDisposable {
     fromJSON(serializedPaneview, deferComponentLayout) {
         const { views, size } = serializedPaneview;
         const queue = [];
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
         this.paneview.dispose();
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
@@ -214,9 +219,7 @@ export class PaneviewComponent extends CompositeDisposable {
                         isExpanded: !!view.expanded,
                         disableDnd: !!this.options.disableDnd,
                     });
-                    panel.onDidDrop((event) => {
-                        this._onDidDrop.fire(event);
-                    });
+                    this.doAddPanel(panel);
                     queue.push(() => {
                         panel.init({
                             params: data.params || {},
@@ -246,4 +249,25 @@ export class PaneviewComponent extends CompositeDisposable {
             queue.forEach((f) => f());
         }
     }
+    doAddPanel(panel) {
+        const disposable = panel.onDidDrop((event) => {
+            this._onDidDrop.fire(event);
+        });
+        this._viewDisposables.set(panel.id, disposable);
+    }
+    doRemovePanel(panel) {
+        const disposable = this._viewDisposables.get(panel.id);
+        if (disposable) {
+            disposable.dispose();
+            this._viewDisposables.delete(panel.id);
+        }
+    }
+    dispose() {
+        super.dispose();
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
 }

package/dist/esm/paneview/paneviewPanel.js

@@ -157,7 +157,7 @@ export class PaneviewPanel extends BasePanelView {
         }
     }
     toJSON() {
-        const params = this.params;
+        const params = this._params;
         return Object.assign(Object.assign({}, super.toJSON()), { headerComponent: this.headerComponent, title: params.title });
     }
     renderOnce() {

package/dist/esm/react/deserializer.js

@@ -12,7 +12,6 @@ export class ReactPanelDeserialzier {
         const panelId = panelData.id;
         const params = panelData.params;
         const title = panelData.title;
-        const state = panelData.state;
         const suppressClosable = panelData.suppressClosable;
         const viewData = panelData.view;
         const view = new DefaultGroupPanelView({
@@ -21,13 +20,12 @@ export class ReactPanelDeserialzier {
                 ? createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab)
                 : new DefaultTab(),
         });
-        const panel = new DockviewGroupPanel(panelId, new DockviewApi(this.layout));
+        const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout));
         panel.init({
             view,
             title,
             suppressClosable,
             params: params || {},
-            state: state || {},
         });
         return panel;
     }

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

@@ -1,32 +1,32 @@
 import * as React from 'react';
+import { DockviewDropEvent } from '../../dockview/dockviewComponent';
 import { TabContextMenuEvent } from '../../dockview/options';
 import { DockviewPanelApi } from '../../api/groupPanelApi';
 import { DockviewApi } from '../../api/component.api';
+import { IWatermarkPanelProps } from './reactWatermarkPart';
 import { PanelCollection, PanelParameters } from '../types';
+import { DockviewDropTargets } from '../../groupview/dnd';
 export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
 }
-export interface IDockviewPanelProps<T extends {
+export declare type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
+export declare type IDockviewPanelProps<T extends {
     [index: string]: any;
-} = any> extends IGroupPanelBaseProps<T> {
-}
+} = any> = IGroupPanelBaseProps<T>;
 export interface DockviewReadyEvent {
     api: DockviewApi;
 }
-export interface IWatermarkPanelProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
-    containerApi: DockviewApi;
-    close(): void;
-}
 export interface IDockviewReactProps {
     components?: PanelCollection<IDockviewPanelProps>;
-    tabComponents?: PanelCollection<IGroupPanelBaseProps>;
+    tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
     onReady?: (event: DockviewReadyEvent) => void;
     debug?: boolean;
     tabHeight?: number;
-    enableExternalDragEvents?: boolean;
     onTabContextMenu?: (event: TabContextMenuEvent) => void;
+    onDidDrop?: (event: DockviewDropEvent) => void;
+    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
     hideBorders?: boolean;
     className?: string;
     disableAutoResizing?: boolean;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewComponent, } from '../../dockview/dockviewComponent';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
 import { ReactPanelDeserialzier } from '../deserializer';
@@ -31,21 +31,21 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         var _a;
         const factory = {
             content: {
-                createComponent: (id, componentId, component) => {
+                createComponent: (_id, componentId, component) => {
                     return new ReactPanelContentPart(componentId, component, {
                         addPortal,
                     });
                 },
             },
             tab: {
-                createComponent: (id, componentId, component) => {
+                createComponent: (_id, componentId, component) => {
                     return new ReactPanelHeaderPart(componentId, component, {
                         addPortal,
                     });
                 },
             },
             watermark: {
-                createComponent: (id, componentId, component) => {
+                createComponent: (_id, componentId, component) => {
                     return new ReactWatermarkPart(componentId, component, {
                         addPortal,
                     });
@@ -59,7 +59,6 @@ export const DockviewReact = React.forwardRef((props, ref) => {
             frameworkTabComponents: props.tabComponents,
             tabHeight: props.tabHeight,
             debug: props.debug,
-            enableExternalDragEvents: props.enableExternalDragEvents,
             watermarkFrameworkComponent: props.watermarkComponent,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
@@ -75,8 +74,24 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         dockviewRef.current = dockview;
         return () => {
             dockview.dispose();
+            element.remove();
         };
     }, []);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const disposable = dockviewRef.current.onDidDrop((event) => {
+            if (props.onDidDrop) {
+                props.onDidDrop(event);
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;
@@ -85,6 +100,22 @@ 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;
+        }
+        dockviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
+        });
+    }, [props.showDndOverlay]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
             return;

package/dist/esm/react/dockview/reactContentPart.d.ts

@@ -40,8 +40,8 @@ export declare class ReactPanelContentPart implements IContentRenderer {
         id: string;
     };
     update(event: PanelUpdateEvent): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
-    layout(width: number, height: number): void;
+    updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void;
+    layout(_width: number, _height: number): void;
     close(): Promise<boolean>;
     dispose(): void;
 }

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

@@ -5,22 +5,14 @@ export class ReactPanelContentPart {
         this.id = id;
         this.component = component;
         this.reactPortalStore = reactPortalStore;
-        // private hostedContainer: HostedContainer;
         this._onDidFocus = new Emitter();
         this.onDidFocus = this._onDidFocus.event;
         this._onDidBlur = new Emitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-        // this.hostedContainer = new HostedContainer({
-        //     id,
-        // });
-        // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
-        // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
+        this._element.className = 'dockview-react-part';
         this._actionsElement = document.createElement('div');
-        this._actionsElement.style.height = '100%';
-        this._actionsElement.style.width = '100%';
+        this._actionsElement.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
@@ -53,23 +45,20 @@ export class ReactPanelContentPart {
         var _a;
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(group, _isPanelVisible) {
         this._group = group;
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop
-        // this.hostedContainer.layout(
-        //     this.element
-        //     // { width, height }
-        // );
     }
     close() {
         return Promise.resolve(true);
     }
     dispose() {
         var _a, _b;
+        this._onDidFocus.dispose();
+        this._onDidBlur.dispose();
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-        // this.hostedContainer?.dispose();
         (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
     }
 }

package/dist/esm/react/dockview/reactHeaderPart.d.ts

@@ -18,7 +18,7 @@ export declare class ReactPanelHeaderPart implements ITabRenderer {
     toJSON(): {
         id: string;
     };
-    layout(width: number, height: number): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
+    layout(_width: number, _height: number): void;
+    updateParentGroup(_group: GroupviewPanel, _isPanelVisible: boolean): void;
     dispose(): void;
 }

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

@@ -5,6 +5,7 @@ export class ReactPanelHeaderPart {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
+        this._element.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
@@ -28,10 +29,10 @@ export class ReactPanelHeaderPart {
             id: this.id,
         };
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(_group, _isPanelVisible) {
         // noop - retrieval from api
     }
     dispose() {

package/dist/esm/react/dockview/reactWatermarkPart.d.ts

@@ -4,7 +4,7 @@ import { GroupviewPanel } from '../../groupview/groupviewPanel';
 import { ReactPortalStore } from '../react';
 import { IGroupPanelBaseProps } from './dockview';
 import { PanelUpdateEvent } from '../../panel/types';
-interface IWatermarkPanelProps extends IGroupPanelBaseProps {
+export interface IWatermarkPanelProps extends IGroupPanelBaseProps {
     close: () => void;
 }
 export declare class ReactWatermarkPart implements IWatermarkRenderer {
@@ -23,8 +23,7 @@ export declare class ReactWatermarkPart implements IWatermarkRenderer {
     toJSON(): {
         id: string;
     };
-    layout(width: number, height: number): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
+    layout(_width: number, _height: number): void;
+    updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void;
     dispose(): void;
 }
-export {};

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

@@ -8,8 +8,7 @@ export class ReactWatermarkPart {
             value: undefined,
         };
         this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
+        this._element.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
@@ -42,10 +41,10 @@ export class ReactWatermarkPart {
             id: this.id,
         };
     }
-    layout(width, height) {
+    layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(group, _isPanelVisible) {
         // noop - retrieval from api
         this._groupRef.value = group;
     }

package/dist/esm/react/dockview/v2/reactContentRenderer.d.ts

@@ -23,8 +23,8 @@ export declare class ReactContentRenderer implements IContentRenderer {
         id: string;
     };
     update(params: PanelUpdateEvent): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
-    layout(width: number, height: number): void;
+    updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void;
+    layout(_width: number, _height: number): void;
     close(): Promise<boolean>;
     dispose(): void;
 }

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

@@ -56,10 +56,10 @@ export class ReactContentRenderer {
         }
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(group, _isPanelVisible) {
         this._group = group;
     }
-    layout(width, height) {
+    layout(_width, _height) {
         this._hostedContainer.layout(this.element);
     }
     close() {

package/dist/esm/react/dockview/v2/webviewContentRenderer.d.ts

@@ -12,7 +12,7 @@ export declare class WebviewContentRenderer implements IContentRenderer {
     init(parameters: GroupPanelPartInitParameters): void;
     toJSON(): {};
     update(params: PanelUpdateEvent): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
-    layout(width: number, height: number): void;
+    updateParentGroup(_group: GroupviewPanel, _isPanelVisible: boolean): void;
+    layout(_width: number, _height: number): void;
     dispose(): void;
 }

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

@@ -24,10 +24,10 @@ export class WebviewContentRenderer {
             this.parameters.params = params.params;
         }
     }
-    updateParentGroup(group, isPanelVisible) {
+    updateParentGroup(_group, _isPanelVisible) {
         //
     }
-    layout(width, height) {
+    layout(_width, _height) {
         this._hostedContainer.layout(this._element);
     }
     dispose() {

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/gridview/view.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { GridviewPanel } from '../../gridview/gridviewPanel';
-import { ReactPart, ReactPortalStore } from '../react';
+import { IFrameworkPart } from '../../panel/types';
+import { ReactPortalStore } from '../react';
 import { IGridviewPanelProps } from './gridview';
 export declare class ReactGridPanelView extends GridviewPanel {
     private readonly reactComponent;
     private readonly reactPortalStore;
     constructor(id: string, component: string, reactComponent: React.FunctionComponent<IGridviewPanelProps>, reactPortalStore: ReactPortalStore);
-    getComponent(): ReactPart<IGridviewPanelProps<any>, {}>;
+    getComponent(): IFrameworkPart;
 }

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

@@ -9,9 +9,9 @@ export class ReactGridPanelView extends GridviewPanel {
     getComponent() {
         var _a;
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this.params
+            containerApi: this._params
                 .containerApi,
         });
     }

package/dist/esm/react/index.d.ts

@@ -4,6 +4,7 @@ export * from './splitview/splitview';
 export * from './gridview/gridview';
 export * from './dockview/reactContentPart';
 export * from './dockview/reactHeaderPart';
+export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
 export * from './types';
 export * from './react';

package/dist/esm/react/paneview/paneview.js

@@ -25,7 +25,7 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
         };
     }, [props.disableAutoResizing]);
     React.useEffect(() => {
-        const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
+        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
             addPortal,
         });
         const paneview = new PaneviewComponent(domRef.current, {

package/dist/esm/react/react.js

@@ -55,14 +55,13 @@ export class ReactPart {
         if (this.disposed) {
             throw new Error('invalid operation: resource is already disposed');
         }
-        // TODO use a better check for isReactFunctionalComponent
         if (typeof this.component !== 'function') {
             /**
              * we know this isn't a React.FunctionComponent so throw an error here.
              * if we do not intercept this the React library will throw a very obsure error
              * for the same reason, at least at this point we will emit a sensible stacktrace.
              */
-            throw new Error('invalid operation: only functional components are supported');
+            throw new Error('Invalid Operation. dockview only supports React Functional Components.');
         }
         const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
             component: this

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/react/splitview/view.js

@@ -9,9 +9,9 @@ export class ReactPanelView extends SplitviewPanel {
     getComponent() {
         var _a;
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this.params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this.params
+            containerApi: this._params
                 .containerApi,
         });
     }

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.d.ts

@@ -12,9 +12,6 @@ export interface SerializedSplitviewPanelData {
     params?: {
         [index: string]: any;
     };
-    state?: {
-        [index: string]: any;
-    };
 }
 export interface SerializedSplitviewPanel {
     snap?: boolean;

package/dist/esm/splitview/splitviewComponent.js

@@ -26,7 +26,7 @@ export class SplitviewComponent extends CompositeDisposable {
             options.frameworkComponents = {};
         }
         this.splitview = new Splitview(this.element, options);
-        this.addDisposables(this._disposable);
+        this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
     }
     get options() {
         return this._options;
@@ -102,7 +102,11 @@ export class SplitviewComponent extends CompositeDisposable {
     }
     removePanel(panel, sizing) {
         const disposable = this.panels.get(panel.id);
-        disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
+        if (!disposable) {
+            throw new Error(`unknown splitview panel ${panel.id}`);
+        }
+        disposable.disposable.dispose();
+        disposable.value.dispose();
         this.panels.delete(panel.id);
         const index = this.getPanels().findIndex((_) => _ === panel);
         this.splitview.removeView(index, sizing);
@@ -161,7 +165,7 @@ export class SplitviewComponent extends CompositeDisposable {
             }
             this.setActive(view, true);
         });
-        this.panels.set(view.id, disposable);
+        this.panels.set(view.id, { disposable, value: view });
     }
     toJSON() {
         var _a;
@@ -185,6 +189,11 @@ export class SplitviewComponent extends CompositeDisposable {
     }
     fromJSON(serializedSplitview, deferComponentLayout = false) {
         const { views, orientation, size, activeView } = serializedSplitview;
+        for (const [_, value] of this.panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this.panels.clear();
         this.splitview.dispose();
         const queue = [];
         this.splitview = new Splitview(this.element, {
@@ -240,10 +249,12 @@ export class SplitviewComponent extends CompositeDisposable {
         }
     }
     dispose() {
-        Array.from(this.panels.values()).forEach((value) => {
-            value.dispose();
-        });
+        for (const [_, value] of this.panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
         this.panels.clear();
+        this.splitview.dispose();
         super.dispose();
     }
 }

package/dist/esm/splitview/splitviewPanel.d.ts

@@ -36,12 +36,7 @@ export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPane
         maximumSize: number | undefined;
         id: string;
         component: string;
-        params?: {
-            [key: string]: any;
-        } | undefined;
-        state?: {
-            [key: string]: any;
-        } | undefined;
+        params?: Record<string, any> | undefined;
     };
     private updateConstraints;
 }