dockview 1.4.1 → 1.5.0

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

@@ -1,4 +1,5 @@
 import { FrameworkFactory } from '../types';
+import { PaneviewDndOverlayEvent } from './paneviewComponent';
 import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
 export interface PaneviewComponentOptions {
     components?: {
@@ -22,4 +23,5 @@ export interface PaneviewComponentOptions {
         body: FrameworkFactory<IPaneBodyPart>;
     };
     disableDnd?: boolean;
+    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
 }

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

@@ -5,6 +5,12 @@ import { PaneviewComponentOptions } from './options';
 import { Paneview } from './paneview';
 import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
 import { DraggablePaneviewPanel, PaneviewDropEvent2 } from './draggablePaneviewPanel';
+import { PaneTransfer } from '../dnd/dataTransfer';
+export interface PaneviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    panel: IPaneviewPanel;
+    getData: () => PaneTransfer | undefined;
+}
 export interface SerializedPaneviewPanel {
     snap?: boolean;
     priority?: LayoutPriority;
@@ -37,6 +43,7 @@ export declare class PaneFramework extends DraggablePaneviewPanel {
         orientation: Orientation;
         isExpanded: boolean;
         disableDnd: boolean;
+        accessor: IPaneviewComponent;
     });
     getBodyComponent(): IPaneBodyPart;
     getHeaderComponent(): IPaneHeaderPart;
@@ -56,11 +63,13 @@ export interface AddPaneviewComponentOptions {
     size?: number;
 }
 export interface IPaneviewComponent extends IDisposable {
+    readonly id: string;
     readonly width: number;
     readonly height: number;
     readonly minimumSize: number;
     readonly maximumSize: number;
     readonly panels: IPaneviewPanel[];
+    readonly options: PaneviewComponentOptions;
     readonly onDidAddView: Event<PaneviewPanel>;
     readonly onDidRemoveView: Event<PaneviewPanel>;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
@@ -75,9 +84,12 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    clear(): void;
 }
 export declare class PaneviewComponent extends CompositeDisposable implements IPaneviewComponent {
     private element;
+    private readonly _id;
+    private _options;
     private _disposable;
     private _viewDisposables;
     private _paneview;
@@ -91,6 +103,7 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    get id(): string;
     get panels(): PaneviewPanel[];
     set paneview(value: Paneview);
     get paneview(): Paneview;
@@ -98,7 +111,6 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     get maximumSize(): number;
     get height(): number;
     get width(): number;
-    private _options;
     get options(): PaneviewComponentOptions;
     constructor(element: HTMLElement, options: PaneviewComponentOptions);
     focus(): void;
@@ -110,6 +122,7 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
     fromJSON(serializedPaneview: SerializedPaneview): void;
+    clear(): void;
     private doAddPanel;
     private doRemovePanel;
     dispose(): void;

package/dist/esm/paneview/paneviewComponent.js

@@ -6,9 +6,11 @@ import { Orientation, Sizing, } from '../splitview/core/splitview';
 import { Paneview } from './paneview';
 import { DraggablePaneviewPanel, } from './draggablePaneviewPanel';
 import { DefaultHeader } from './defaultPaneviewHeader';
+import { sequentialNumberGenerator } from '../math';
+const nextLayoutId = sequentialNumberGenerator();
 export class PaneFramework extends DraggablePaneviewPanel {
     constructor(options) {
-        super(options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
+        super(options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
         this.options = options;
     }
     getBodyComponent() {
@@ -22,6 +24,7 @@ export class PaneviewComponent extends CompositeDisposable {
     constructor(element, options) {
         super();
         this.element = element;
+        this._id = nextLayoutId.next();
         this._disposable = new MutableDisposable();
         this._viewDisposables = new Map();
         this._onDidLayoutfromJSON = new Emitter();
@@ -48,6 +51,9 @@ export class PaneviewComponent extends CompositeDisposable {
         });
         this.addDisposables(this._disposable);
     }
+    get id() {
+        return this._id;
+    }
     get panels() {
         return this.paneview.getPanes();
     }
@@ -112,6 +118,7 @@ export class PaneviewComponent extends CompositeDisposable {
             orientation: Orientation.VERTICAL,
             isExpanded: !!options.isExpanded,
             disableDnd: !!this.options.disableDnd,
+            accessor: this,
         });
         this.doAddPanel(view);
         const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
@@ -170,13 +177,9 @@ export class PaneviewComponent extends CompositeDisposable {
         };
     }
     fromJSON(serializedPaneview) {
+        this.clear();
         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,
             descriptor: {
@@ -210,6 +213,7 @@ export class PaneviewComponent extends CompositeDisposable {
                         orientation: Orientation.VERTICAL,
                         isExpanded: !!view.expanded,
                         disableDnd: !!this.options.disableDnd,
+                        accessor: this,
                     });
                     this.doAddPanel(panel);
                     queue.push(() => {
@@ -235,6 +239,13 @@ export class PaneviewComponent extends CompositeDisposable {
         queue.forEach((f) => f());
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
     doAddPanel(panel) {
         const disposable = panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);

package/dist/esm/react/deserializer.js

@@ -8,17 +8,25 @@ export class ReactPanelDeserialzier {
         this.layout = layout;
     }
     fromJSON(panelData, group) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const panelId = panelData.id;
         const params = panelData.params;
         const title = panelData.title;
         const suppressClosable = panelData.suppressClosable;
         const viewData = panelData.view;
+        let tab;
+        if ((_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id) {
+            tab = createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
+        }
+        else if (this.layout.options.defaultTabComponent) {
+            tab = createComponent(this.layout.options.defaultTabComponent, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
+        }
+        else {
+            tab = new DefaultTab();
+        }
         const view = new DefaultGroupPanelView({
-            content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_a = this.layout.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.content),
-            tab: ((_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id)
-                ? 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(),
+            content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
+            tab,
         });
         const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
         panel.init({

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

@@ -0,0 +1,4 @@
+import { IDockviewPanelHeaderProps } from './dockview';
+import * as React from 'react';
+export declare type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
+export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;

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

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { CloseButton } from '../svg';
+export const DockviewDefaultTab = (_a) => {
+    var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+    const onClose = React.useCallback((event) => {
+        event.stopPropagation();
+        api.close();
+    }, [api]);
+    const onClick = React.useCallback((event) => {
+        api.setActive();
+        if (rest.onClick) {
+            rest.onClick(event);
+        }
+    }, [api, rest.onClick]);
+    const iconClassname = React.useMemo(() => {
+        const cn = ['dockview-react-tab-action'];
+        return cn.join(',');
+    }, [api.suppressClosable]);
+    return (React.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+        React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
+        React.createElement("div", { className: iconClassname, onClick: onClose },
+            React.createElement(CloseButton, null))));
+};

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DockviewDropEvent } from '../../dockview/dockviewComponent';
-import { TabContextMenuEvent } from '../../dockview/options';
+import { DockviewDndOverlayEvent, 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';
+import { IDockviewGroupControlProps } from './groupControlsRenderer';
 export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
@@ -25,9 +25,11 @@ export interface IDockviewReactProps {
     tabHeight?: number;
     onTabContextMenu?: (event: TabContextMenuEvent) => void;
     onDidDrop?: (event: DockviewDropEvent) => void;
-    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     hideBorders?: boolean;
     className?: string;
     disableAutoResizing?: boolean;
+    defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
+    groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
 }
 export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,6 +7,15 @@ import { usePortalsLifecycle } from '../react';
 import { DockviewApi } from '../../api/component.api';
 import { ReactWatermarkPart } from './reactWatermarkPart';
 import { watchElementResize } from '../../dom';
+import { ReactGroupControlsRendererPart, } from './groupControlsRenderer';
+import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
+function createGroupControlElement(component, store) {
+    return component
+        ? (groupPanel) => {
+            return new ReactGroupControlsRendererPart(component, store, groupPanel);
+        }
+        : undefined;
+}
 export const DockviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const dockviewRef = React.useRef();
@@ -56,12 +65,15 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         const dockview = new DockviewComponent(element, {
             frameworkComponentFactory: factory,
             frameworkComponents: props.components,
-            frameworkTabComponents: props.tabComponents,
+            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
             tabHeight: props.tabHeight,
             watermarkFrameworkComponent: props.watermarkComponent,
+            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,
+            showDndOverlay: props.showDndOverlay,
+            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
         });
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
         dockview.deserializer = new ReactPanelDeserialzier(dockview);
@@ -138,6 +150,23 @@ export const DockviewReact = React.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onTabContextMenu]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+        });
+    }, [props.defaultTabComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+        });
+    }, [props.groupControlComponent]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 DockviewReact.displayName = 'DockviewComponent';

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ReactPart, ReactPortalStore } from '../react';
+import { PanelUpdateEvent } from '../../panel/types';
+import { GroupPanel, GroupviewPanelApi } from '../../groupview/groupviewPanel';
+import { DockviewApi } from '../../api/component.api';
+import { IDisposable } from '../../lifecycle';
+import { IDockviewPanel } from '../../groupview/groupPanel';
+export interface IDockviewGroupControlProps {
+    api: GroupviewPanelApi;
+    containerApi: DockviewApi;
+    panels: IDockviewPanel[];
+    activePanel: IDockviewPanel | undefined;
+    isGroupActive: boolean;
+}
+export interface IGroupControlRenderer extends IDisposable {
+    readonly element: HTMLElement;
+    init(params: {
+        containerApi: DockviewApi;
+        api: GroupviewPanelApi;
+    }): void;
+}
+export declare class ReactGroupControlsRendererPart {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _group;
+    private mutableDisposable;
+    private _element;
+    private _part?;
+    get element(): HTMLElement;
+    get part(): ReactPart<IDockviewGroupControlProps> | undefined;
+    get group(): GroupPanel;
+    constructor(component: React.FunctionComponent<IDockviewGroupControlProps>, reactPortalStore: ReactPortalStore, _group: GroupPanel);
+    focus(): void;
+    init(parameters: {
+        containerApi: DockviewApi;
+        api: GroupviewPanelApi;
+    }): void;
+    update(event: PanelUpdateEvent): void;
+    dispose(): void;
+    private updatePanels;
+    private updateActivePanel;
+    private updateGroupActive;
+}

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

@@ -0,0 +1,68 @@
+import { ReactPart } from '../react';
+import { CompositeDisposable, MutableDisposable, } from '../../lifecycle';
+export class ReactGroupControlsRendererPart {
+    constructor(component, reactPortalStore, _group) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._group = _group;
+        this.mutableDisposable = new MutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dockview-react-part';
+    }
+    get element() {
+        return this._element;
+    }
+    get part() {
+        return this._part;
+    }
+    get group() {
+        return this._group;
+    }
+    focus() {
+        // TODO
+    }
+    init(parameters) {
+        this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
+            this.updatePanels();
+        }), this._group.model.onDidRemovePanel(() => {
+            this.updatePanels();
+        }), this._group.model.onDidActivePanelChange(() => {
+            this.updateActivePanel();
+        }), parameters.api.onDidActiveChange(() => {
+            this.updateGroupActive();
+        }));
+        this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+            api: parameters.api,
+            containerApi: parameters.containerApi,
+            panels: this._group.model.panels,
+            activePanel: this._group.model.activePanel,
+            isGroupActive: this._group.api.isActive,
+        });
+    }
+    update(event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    }
+    dispose() {
+        var _a;
+        this.mutableDisposable.dispose();
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+    updatePanels() {
+        this.update({ params: { panels: this._group.model.panels } });
+    }
+    updateActivePanel() {
+        this.update({
+            params: {
+                activePanel: this._group.model.activePanel,
+            },
+        });
+    }
+    updateGroupActive() {
+        this.update({
+            params: {
+                isGroupActive: this._group.api.isActive,
+            },
+        });
+    }
+}

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

@@ -1,37 +1,22 @@
 import * as React from 'react';
-import { IContentRenderer, GroupPanelContentPartInitParameters, ITabRenderer } from '../../groupview/types';
+import { IContentRenderer, GroupPanelContentPartInitParameters } from '../../groupview/types';
 import { ReactPortalStore } from '../react';
 import { IDockviewPanelProps } from '../dockview/dockview';
 import { PanelUpdateEvent } from '../../panel/types';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
-import { DockviewApi } from '../../api/component.api';
 import { GroupPanel } from '../../groupview/groupviewPanel';
 import { Event } from '../../events';
-export interface IGroupPanelActionbarProps {
-    api: DockviewPanelApi;
-    containerApi: DockviewApi;
-}
-export interface ReactContentPartContext {
-    api: DockviewPanelApi;
-    containerApi: DockviewApi;
-    actionsPortalElement: HTMLElement;
-    tabPortalElement: ITabRenderer;
-}
 export declare class ReactPanelContentPart implements IContentRenderer {
     readonly id: string;
     private readonly component;
     private readonly reactPortalStore;
     private _element;
     private part?;
-    private _actionsElement;
-    private actionsPart?;
     private _group;
     private readonly _onDidFocus;
     readonly onDidFocus: Event<void>;
     private readonly _onDidBlur;
     readonly onDidBlur: Event<void>;
     get element(): HTMLElement;
-    get actions(): HTMLElement;
     constructor(id: string, component: React.FunctionComponent<IDockviewPanelProps>, reactPortalStore: ReactPortalStore);
     focus(): void;
     init(parameters: GroupPanelContentPartInitParameters): void;

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

@@ -11,30 +11,19 @@ export class ReactPanelContentPart {
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
-        this._actionsElement = document.createElement('div');
-        this._actionsElement.className = 'dockview-react-part';
     }
     get element() {
         return this._element;
     }
-    get actions() {
-        return this._actionsElement;
-    }
     focus() {
         // TODO
     }
     init(parameters) {
-        const context = {
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            actionsPortalElement: this._actionsElement,
-            tabPortalElement: parameters.tab,
-        };
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
             params: parameters.params,
             api: parameters.api,
             containerApi: parameters.containerApi,
-        }, context);
+        });
     }
     toJSON() {
         return {
@@ -52,10 +41,9 @@ export class ReactPanelContentPart {
         // noop
     }
     dispose() {
-        var _a, _b;
+        var _a;
         this._onDidFocus.dispose();
         this._onDidBlur.dispose();
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
     }
 }

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

@@ -16,6 +16,8 @@ export declare class ReactPanelHeaderPart implements ITabRenderer {
     init(parameters: GroupPanelPartInitParameters): void;
     update(event: PanelUpdateEvent): void;
     toJSON(): {
+        id?: undefined;
+    } | {
         id: string;
     };
     layout(_width: number, _height: number): void;

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

@@ -1,4 +1,5 @@
 import { ReactPart } from '../react';
+import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
 export class ReactPanelHeaderPart {
     constructor(id, component, reactPortalStore) {
         this.id = id;
@@ -25,6 +26,9 @@ export class ReactPanelHeaderPart {
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
     }
     toJSON() {
+        if (this.id === DEFAULT_TAB_IDENTIFIER) {
+            return {};
+        }
         return {
             id: this.id,
         };

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

@@ -1,8 +1,8 @@
 export * from './dockview/dockview';
+export * from './dockview/defaultTab';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
-export * from './dockview/reactContentPart';
-export * from './dockview/reactHeaderPart';
+export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
 export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
 export * from './types';

package/dist/esm/react/index.js

@@ -1,8 +1,7 @@
 export * from './dockview/dockview';
+export * from './dockview/defaultTab';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
-export * from './dockview/reactContentPart';
-export * from './dockview/reactHeaderPart';
 export * from './paneview/paneview';
 export * from './types';
 export * from './react';

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PaneviewPanelApi } from '../../api/paneviewPanelApi';
+import { PaneviewDndOverlayEvent } from '../../paneview/paneviewComponent';
 import { PaneviewApi } from '../../api/component.api';
 import { PanelCollection, PanelParameters } from '../types';
 import { PaneviewDropEvent2 } from '../../paneview/draggablePaneviewPanel';
@@ -23,6 +24,7 @@ export interface IPaneviewReactProps {
     className?: string;
     disableAutoResizing?: boolean;
     disableDnd?: boolean;
+    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     onDidDrop?(event: PaneviewDropEvent): void;
 }
 export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -42,6 +42,7 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
                     createComponent,
                 },
             },
+            showDndOverlay: props.showDndOverlay,
         });
         const api = new PaneviewApi(paneview);
         const { clientWidth, clientHeight } = domRef.current;
@@ -86,6 +87,14 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
+        }
+        paneviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
+        });
+    }, [props.showDndOverlay]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 PaneviewReact.displayName = 'PaneviewComponent';

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

@@ -11,6 +11,7 @@ export declare class ReactPart<P extends object, C extends object = {}> implemen
     private readonly component;
     private readonly parameters;
     private readonly context?;
+    private _initialProps;
     private componentInstance?;
     private ref?;
     private disposed;

package/dist/esm/react/react.js

@@ -41,15 +41,21 @@ export class ReactPart {
         this.component = component;
         this.parameters = parameters;
         this.context = context;
+        this._initialProps = {};
         this.disposed = false;
         this.createPortal();
     }
     update(props) {
-        var _a;
         if (this.disposed) {
             throw new Error('invalid operation: resource is already disposed');
         }
-        (_a = this.componentInstance) === null || _a === void 0 ? void 0 : _a.update(props);
+        if (!this.componentInstance) {
+            // if the component is yet to be mounted store the props
+            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
+        }
+        else {
+            this.componentInstance.update(props);
+        }
     }
     createPortal() {
         if (this.disposed) {
@@ -69,6 +75,10 @@ export class ReactPart {
             componentProps: this.parameters,
             ref: (element) => {
                 this.componentInstance = element;
+                if (Object.keys(this._initialProps).length > 0) {
+                    this.componentInstance.update(this._initialProps);
+                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
+                }
             },
         });
         const node = this.context

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CloseButton: () => JSX.Element;
+export declare const ExpandMore: () => JSX.Element;

package/dist/esm/react/svg.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
+export const ExpandMore = () => {
+    return (React.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+        React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
+};