dockview 1.0.2 → 1.2.0

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

@@ -10,33 +10,30 @@ export declare enum MouseEventKind {
     CONTEXT_MENU = "CONTEXT_MENU"
 }
 export interface LayoutMouseEvent {
-    kind: MouseEventKind;
-    event: MouseEvent;
-    panel?: IGroupPanel;
-    tab?: boolean;
+    readonly kind: MouseEventKind;
+    readonly event: MouseEvent;
+    readonly panel?: IGroupPanel;
+    readonly tab?: boolean;
 }
 export interface ITab {
-    panelId: string;
-    element: HTMLElement;
+    readonly panelId: string;
+    readonly element: HTMLElement;
     setContent: (element: ITabRenderer) => void;
     onChanged: Event<LayoutMouseEvent>;
     onDrop: Event<DroptargetEvent>;
     setActive(isActive: boolean): void;
 }
 export declare class Tab extends CompositeDisposable implements ITab {
-    panelId: string;
-    private readonly accessor;
-    private group;
-    private _element;
-    private droptarget;
+    readonly panelId: string;
+    private readonly group;
+    private readonly _element;
+    private readonly droptarget;
     private content?;
     private readonly _onChanged;
     readonly onChanged: Event<LayoutMouseEvent>;
     private readonly _onDropped;
     readonly onDrop: Event<DroptargetEvent>;
-    private readonly panelTransfer;
     get element(): HTMLElement;
-    private iframes;
     constructor(panelId: string, accessor: IDockviewComponent, group: GroupviewPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;

package/dist/esm/groupview/tab.js

@@ -1,9 +1,10 @@
 import { addDisposableListener, Emitter } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { getPanelData, LocalSelectionTransfer, PanelTransfer, } from '../dnd/dataTransfer';
-import { getElementsByTagName, toggleClass } from '../dom';
+import { toggleClass } from '../dom';
 import { Droptarget } from '../dnd/droptarget';
 import { DockviewDropTargets } from './dnd';
+import { DragHandler } from '../dnd/abstractDragHandler';
 export var MouseEventKind;
 (function (MouseEventKind) {
     MouseEventKind["CLICK"] = "CLICK";
@@ -13,42 +14,34 @@ export class Tab extends CompositeDisposable {
     constructor(panelId, accessor, group) {
         super();
         this.panelId = panelId;
-        this.accessor = accessor;
         this.group = group;
         this._onChanged = new Emitter();
         this.onChanged = this._onChanged.event;
         this._onDropped = new Emitter();
         this.onDrop = this._onDropped.event;
-        this.panelTransfer = LocalSelectionTransfer.getInstance();
-        this.iframes = [];
         this.addDisposables(this._onChanged, this._onDropped);
         this._element = document.createElement('div');
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
-        this.addDisposables(addDisposableListener(this._element, 'dragstart', (event) => {
-            this.iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'none';
+        this.addDisposables(new (class Handler extends DragHandler {
+            constructor() {
+                super(...arguments);
+                this.panelTransfer = LocalSelectionTransfer.getInstance();
             }
-            this.element.classList.add('dragged');
-            setTimeout(() => this.element.classList.remove('dragged'), 0);
-            this.panelTransfer.setData([
-                new PanelTransfer(this.accessor.id, this.group.id, this.panelId),
-            ], PanelTransfer.prototype);
-            if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = 'move';
+            getData() {
+                this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
+                return {
+                    dispose: () => {
+                        this.panelTransfer.clearData(PanelTransfer.prototype);
+                    },
+                };
             }
-        }), addDisposableListener(this._element, 'dragend', (ev) => {
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'auto';
+            dispose() {
+                //
             }
-            this.iframes = [];
-            this.panelTransfer.clearData(PanelTransfer.prototype);
-        }), addDisposableListener(this._element, 'mousedown', (event) => {
+        })(this._element));
+        this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }

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

@@ -155,12 +155,10 @@ 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({

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,8 +18,10 @@ 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 { 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/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/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.js

@@ -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();
@@ -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

@@ -18,9 +18,6 @@ export interface SerializedPaneviewPanel {
         params?: {
             [index: string]: any;
         };
-        state?: {
-            [index: string]: any;
-        };
     };
     size: number;
     expanded?: boolean;
@@ -87,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;
@@ -112,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

@@ -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 };
                 }),
             },
@@ -244,4 +247,8 @@ export class PaneviewComponent extends CompositeDisposable {
             queue.forEach((f) => f());
         }
     }
+    dispose() {
+        super.dispose();
+        this.paneview.dispose();
+    }
 }

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,7 +78,9 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         }
         dockviewRef.current = dockview;
         return () => {
+            disposable.dispose();
             dockview.dispose();
+            element.remove();
         };
     }, []);
     React.useEffect(() => {
@@ -85,6 +91,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.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;