dockview 1.0.1 → 1.1.0

package/dist/esm/groupview/titlebar/tabsContainer.js

@@ -42,7 +42,7 @@ export class TabsContainer extends CompositeDisposable {
         });
         this.addDisposables(this.voidDropTarget.onDrop((event) => {
             this._onDrop.fire({
-                event: event.event,
+                event: event.nativeEvent,
                 index: this.tabs.length,
             });
         }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
@@ -155,16 +155,14 @@ export class TabsContainer extends CompositeDisposable {
             if (!isLeftClick || event.event.defaultPrevented) {
                 return;
             }
-            switch (event.kind) {
-                case MouseEventKind.CLICK:
-                    this.group.model.openPanel(panel, {
-                        skipFocus: alreadyFocused,
-                    });
-                    break;
+            if (event.kind === MouseEventKind.CLICK) {
+                this.group.model.openPanel(panel, {
+                    skipFocus: alreadyFocused,
+                });
             }
         }), tabToAdd.onDrop((event) => {
             this._onDrop.fire({
-                event: event.event,
+                event: event.nativeEvent,
                 index: this.tabs.findIndex((x) => x.value === tabToAdd),
             });
         }));

package/dist/esm/index.d.ts

@@ -21,7 +21,7 @@ export * from './paneview/paneviewPanel';
 export * from './groupview/groupPanel';
 export * from './react';
 export { Position } from './dnd/droptarget';
-export { StateObject, State, FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
+export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
 export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi';
 export { TitleEvent, SuppressClosableEvent, DockviewPanelApi, } from './api/groupPanelApi';
 export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi';

package/dist/esm/lifecycle.js

@@ -14,7 +14,7 @@ export class CompositeDisposable {
         return new CompositeDisposable(...args);
     }
     addDisposables(...args) {
-        args === null || args === void 0 ? void 0 : args.forEach((arg) => this.disposables.push(arg));
+        args.forEach((arg) => this.disposables.push(arg));
     }
     dispose() {
         this.disposables.forEach((arg) => arg.dispose());
@@ -33,6 +33,7 @@ export class MutableDisposable {
     dispose() {
         if (this._disposable) {
             this._disposable.dispose();
+            this._disposable = Disposable.NONE;
         }
     }
 }

package/dist/esm/panel/types.d.ts

@@ -1,4 +1,3 @@
-import { State } from '../api/panelApi';
 import { IDisposable } from '../lifecycle';
 import { LayoutPriority } from '../splitview/core/splitview';
 /**
@@ -9,7 +8,6 @@ export interface Parameters {
 }
 export interface PanelInitParameters {
     params: Parameters;
-    state?: State;
 }
 export interface PanelUpdateEvent<T extends Parameters = Parameters> {
     params: Partial<T>;

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

@@ -1,6 +1,5 @@
 import { PaneTransfer } from '../dnd/dataTransfer';
 import { DroptargetEvent } from '../dnd/droptarget';
-import { Event } from '../events';
 import { Orientation } from '../splitview/core/splitview';
 import { IPaneviewPanel, PaneviewPanel } from './paneviewPanel';
 export interface PaneviewDropEvent2 extends DroptargetEvent {
@@ -11,7 +10,8 @@ export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
     private handler;
     private target;
     private readonly _onDidDrop;
-    readonly onDidDrop: Event<PaneviewDropEvent2>;
+    readonly onDidDrop: import("../events").Event<PaneviewDropEvent2>;
     constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
     private initDragFeatures;
+    private onDrop;
 }

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -5,7 +5,7 @@ import { Emitter } from '../events';
 import { PaneviewPanel, } from './paneviewPanel';
 export class DraggablePaneviewPanel extends PaneviewPanel {
     constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
-        super(id, component, headerComponent, orientation, isExpanded);
+        super(id, component, headerComponent, orientation, isExpanded, true);
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
         if (!disableDnd) {
@@ -39,34 +39,37 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
             },
         });
         this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-            const data = getPaneData();
-            if (!data) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                return;
-            }
-            const containerApi = this.params
-                .containerApi;
-            const panelId = data.paneId;
-            const existingPanel = containerApi.getPanel(panelId);
-            if (!existingPanel) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                return;
-            }
-            const allPanels = containerApi.getPanels();
-            const fromIndex = allPanels.indexOf(existingPanel);
-            let toIndex = containerApi.getPanels().indexOf(this);
-            if (event.position === Position.Left ||
-                event.position === Position.Top) {
-                toIndex = Math.max(0, toIndex - 1);
-            }
-            if (event.position === Position.Right ||
-                event.position === Position.Bottom) {
-                if (fromIndex > toIndex) {
-                    toIndex++;
-                }
-                toIndex = Math.min(allPanels.length - 1, toIndex);
-            }
-            containerApi.movePanel(fromIndex, toIndex);
+            this.onDrop(event);
         }));
     }
+    onDrop(event) {
+        const data = getPaneData();
+        if (!data) {
+            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+            return;
+        }
+        const containerApi = this._params
+            .containerApi;
+        const panelId = data.paneId;
+        const existingPanel = containerApi.getPanel(panelId);
+        if (!existingPanel) {
+            this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+            return;
+        }
+        const allPanels = containerApi.getPanels();
+        const fromIndex = allPanels.indexOf(existingPanel);
+        let toIndex = containerApi.getPanels().indexOf(this);
+        if (event.position === Position.Left ||
+            event.position === Position.Top) {
+            toIndex = Math.max(0, toIndex - 1);
+        }
+        if (event.position === Position.Right ||
+            event.position === Position.Bottom) {
+            if (fromIndex > toIndex) {
+                toIndex++;
+            }
+            toIndex = Math.min(allPanels.length - 1, toIndex);
+        }
+        containerApi.movePanel(fromIndex, toIndex);
+    }
 }

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

@@ -12,6 +12,7 @@ export declare class Paneview extends CompositeDisposable implements IDisposable
     private paneItems;
     private _orientation;
     private animationTimer;
+    private skipAnimation;
     private readonly _onDidChange;
     readonly onDidChange: Event<void>;
     get onDidAddView(): Event<PaneviewPanel>;
@@ -29,7 +30,6 @@ export declare class Paneview extends CompositeDisposable implements IDisposable
     getViewSize(index: number): number;
     getPanes(): PaneviewPanel[];
     removePane(index: number): PaneItem;
-    private skipAnimation;
     moveView(from: number, to: number): void;
     layout(size: number, orthogonalSize: number): void;
     private setupAnimation;

package/dist/esm/paneview/paneview.js

@@ -7,9 +7,9 @@ export class Paneview extends CompositeDisposable {
         var _a;
         super();
         this.paneItems = [];
+        this.skipAnimation = false;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this.skipAnimation = false;
         this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
         this.element = document.createElement('div');
         this.element.className = 'pane-container';
@@ -37,7 +37,7 @@ export class Paneview extends CompositeDisposable {
             this.paneItems.push(paneItem);
             pane.orthogonalSize = this.splitview.orthogonalSize;
         });
-        this.addDisposables(this.splitview.onDidSashEnd(() => {
+        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
             this._onDidChange.fire(undefined);
         }), this.splitview.onDidAddView(() => {
             this._onDidChange.fire();
@@ -109,9 +109,6 @@ export class Paneview extends CompositeDisposable {
         }
     }
     layout(size, orthogonalSize) {
-        // for (const paneItem of this.paneItems) {
-        //     paneItem.pane.orthogonalSize = orthogonalSize;
-        // }
         this.splitview.layout(size, orthogonalSize);
     }
     setupAnimation() {

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

@@ -18,9 +18,6 @@ export interface SerializedPaneviewPanel {
         params?: {
             [index: string]: any;
         };
-        state?: {
-            [index: string]: any;
-        };
     };
     size: number;
     expanded?: boolean;
@@ -63,6 +60,8 @@ export interface IPaneviewComponent extends IDisposable {
     readonly height: number;
     readonly minimumSize: number;
     readonly maximumSize: number;
+    readonly onDidAddView: Event<PaneviewPanel>;
+    readonly onDidRemoveView: Event<PaneviewPanel>;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
     readonly onDidLayoutChange: Event<void>;
     addPanel(options: AddPaneviewCompponentOptions): IDisposable;
@@ -85,8 +84,10 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
-    get onDidAddView(): Event<PaneviewPanel>;
-    get onDidRemoveView(): Event<PaneviewPanel>;
+    private readonly _onDidAddView;
+    readonly onDidAddView: Event<PaneviewPanel>;
+    private readonly _onDidRemoveView;
+    readonly onDidRemoveView: Event<PaneviewPanel>;
     set paneview(value: Paneview);
     get paneview(): Paneview;
     get minimumSize(): number;

package/dist/esm/paneview/paneviewComponent.js

@@ -27,6 +27,11 @@ export class PaneviewComponent extends CompositeDisposable {
         this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddView = new Emitter();
+        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 = {};
@@ -40,17 +45,11 @@ export class PaneviewComponent extends CompositeDisposable {
         });
         this.addDisposables(this._disposable);
     }
-    get onDidAddView() {
-        return this._paneview.onDidAddView;
-    }
-    get onDidRemoveView() {
-        return this._paneview.onDidRemoveView;
-    }
     set paneview(value) {
         this._paneview = value;
-        this._disposable.value = new CompositeDisposable(this.paneview.onDidChange(() => {
+        this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
             this._onDidLayoutChange.fire(undefined);
-        }));
+        }), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
     }
     get paneview() {
         return this._paneview;
@@ -230,6 +229,10 @@ export class PaneviewComponent extends CompositeDisposable {
                         });
                         panel.orientation = this.paneview.orientation;
                     });
+                    setTimeout(() => {
+                        // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                        this._onDidAddView.fire(panel);
+                    }, 0);
                     return { size: view.size, view: panel };
                 }),
             },

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

@@ -39,6 +39,7 @@ export interface IPaneviewPanel extends BasePanelViewExported<PaneviewPanelApiIm
     readonly maximumBodySize: number;
     isExpanded(): boolean;
     setExpanded(isExpanded: boolean): void;
+    headerVisible: boolean;
 }
 export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelApiImpl> implements IPaneview, IPaneviewPanel {
     private readonly headerComponent;
@@ -59,6 +60,7 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     private expandedSize;
     private animationTimer;
     private _orientation;
+    private _headerVisible;
     set orientation(value: Orientation);
     get orientation(): Orientation;
     get minimumSize(): number;
@@ -70,7 +72,9 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     set minimumBodySize(value: number);
     get maximumBodySize(): number;
     set maximumBodySize(value: number);
-    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean);
+    get headerVisible(): boolean;
+    set headerVisible(value: boolean);
+    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, isHeaderVisible: boolean);
     setVisible(isVisible: boolean): void;
     setActive(isActive: boolean): void;
     isExpanded(): boolean;

package/dist/esm/paneview/paneviewPanel.js

@@ -4,7 +4,7 @@ import { addDisposableListener, Emitter } from '../events';
 import { BasePanelView, } from '../gridview/basePanelView';
 import { Orientation } from '../splitview/core/splitview';
 export class PaneviewPanel extends BasePanelView {
-    constructor(id, component, headerComponent, orientation, isExpanded) {
+    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
         super(id, component, new PaneviewPanelApiImpl(id));
         this.headerComponent = headerComponent;
         this._onDidChangeExpansionState = new Emitter({ replay: true });
@@ -20,6 +20,7 @@ export class PaneviewPanel extends BasePanelView {
         this.expandedSize = 0;
         this.api.pane = this; // TODO cannot use 'this' before 'super'
         this._isExpanded = isExpanded;
+        this._headerVisible = isHeaderVisible;
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
         this.element.classList.add('pane');
@@ -87,6 +88,13 @@ export class PaneviewPanel extends BasePanelView {
         this._maximumBodySize =
             typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
     }
+    get headerVisible() {
+        return this._headerVisible;
+    }
+    set headerVisible(value) {
+        this._headerVisible = value;
+        this.header.style.display = value ? '' : 'none';
+    }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
     }
@@ -149,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';
@@ -59,12 +59,16 @@ 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' }
                 : undefined,
         });
+        const disposable = dockview.onDidDrop((event) => {
+            if (props.onDidDrop) {
+                props.onDidDrop(event);
+            }
+        });
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
         dockview.deserializer = new ReactPanelDeserialzier(dockview);
         const { clientWidth, clientHeight } = domRef.current;
@@ -74,6 +78,7 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         }
         dockviewRef.current = dockview;
         return () => {
+            disposable.dispose();
             dockview.dispose();
         };
     }, []);
@@ -85,6 +90,14 @@ export const DockviewReact = React.forwardRef((props, ref) => {
             frameworkComponents: props.components,
         });
     }, [props.components]);
+    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.js

@@ -11,16 +11,14 @@ export class ReactPanelContentPart {
         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._element.className = 'dockview-react-part';
         // this.hostedContainer = new HostedContainer({
         //     id,
         // });
         // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
         // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
         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;
@@ -68,6 +66,8 @@ export class ReactPanelContentPart {
     }
     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.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;

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 {
@@ -27,4 +27,3 @@ export declare class ReactWatermarkPart implements IWatermarkRenderer {
     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;

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/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/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

@@ -51,7 +51,7 @@ export class Splitview {
         this._onDidAddView = new Emitter();
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
-        this.onDidRemoveView = this._onDidAddView.event;
+        this.onDidRemoveView = this._onDidRemoveView.event;
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
         this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {

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

@@ -1,5 +1,5 @@
 import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { LayoutPriority, Orientation, Sizing, Splitview } from './core/splitview';
+import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './core/splitview';
 import { SplitviewComponentOptions } from './core/options';
 import { BaseComponentOptions } from '../panel/types';
 import { Event } from '../events';
@@ -12,9 +12,6 @@ export interface SerializedSplitviewPanelData {
     params?: {
         [index: string]: any;
     };
-    state?: {
-        [index: string]: any;
-    };
 }
 export interface SerializedSplitviewPanel {
     snap?: boolean;
@@ -42,6 +39,8 @@ export interface ISplitviewComponent extends IDisposable {
     readonly width: number;
     readonly length: number;
     readonly orientation: Orientation;
+    readonly onDidAddView: Event<IView>;
+    readonly onDidRemoveView: Event<IView>;
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
     addPanel(options: AddSplitviewComponentOptions): void;
     layout(width: number, height: number): void;
@@ -67,12 +66,16 @@ export declare class SplitviewComponent extends CompositeDisposable implements I
     private _activePanel;
     private panels;
     private _options;
+    private readonly _onDidAddView;
+    readonly onDidAddView: Event<IView>;
+    private readonly _onDidRemoveView;
+    readonly onDidRemoveView: Event<IView>;
+    private readonly _onDidLayoutChange;
+    readonly onDidLayoutChange: Event<void>;
     get options(): SplitviewComponentOptions;
     get orientation(): Orientation;
     get splitview(): Splitview;
     set splitview(value: Splitview);
-    private readonly _onDidLayoutChange;
-    readonly onDidLayoutChange: Event<void>;
     get minimumSize(): number;
     get maximumSize(): number;
     get height(): number;