dockview 1.7.0 → 1.7.2

package/dist/esm/gridview/gridview.js

@@ -1,67 +1,55 @@
-import * as React from 'react';
-import { GridviewComponent, Orientation, GridviewApi, watchElementResize, } from 'dockview-core';
-import { ReactGridPanelView } from './view';
-import { usePortalsLifecycle } from '../react';
-export const GridviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const gridviewRef = React.useRef();
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    React.useEffect(() => {
-        if (props.disableAutoResizing) {
-            return () => {
-                //
-            };
-        }
-        const watcher = watchElementResize(domRef.current, (entry) => {
-            var _a;
-            const { width, height } = entry.contentRect;
-            (_a = gridviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-        });
-        return () => {
-            watcher.dispose();
-        };
-    }, [props.disableAutoResizing]);
-    React.useEffect(() => {
-        var _a;
-        const element = document.createElement('div');
-        const gridview = new GridviewComponent(element, {
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            orientation: props.orientation || Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkComponentFactory: {
-                createComponent: (id, componentId, component) => {
-                    return new ReactGridPanelView(id, componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(gridview.element);
-        const { clientWidth, clientHeight } = domRef.current;
-        gridview.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api: new GridviewApi(gridview) });
-        }
-        gridviewRef.current = gridview;
-        return () => {
-            gridview.dispose();
-            element.remove();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!gridviewRef.current) {
-            return;
-        }
-        gridviewRef.current.updateOptions({
-            frameworkComponents: props.components,
-        });
-    }, [props.components]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-GridviewReact.displayName = 'GridviewComponent';
+import * as React from 'react';
+import { GridviewComponent, Orientation, GridviewApi, } from 'dockview-core';
+import { ReactGridPanelView } from './view';
+import { usePortalsLifecycle } from '../react';
+export const GridviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const gridviewRef = React.useRef();
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const gridview = new GridviewComponent({
+            parentElement: domRef.current,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
+            orientation: props.orientation || Orientation.HORIZONTAL,
+            frameworkComponents: props.components,
+            frameworkComponentFactory: {
+                createComponent: (id, componentId, component) => {
+                    return new ReactGridPanelView(id, componentId, component, {
+                        addPortal,
+                    });
+                },
+            },
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+        });
+        const { clientWidth, clientHeight } = domRef.current;
+        gridview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new GridviewApi(gridview) });
+        }
+        gridviewRef.current = gridview;
+        return () => {
+            gridview.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!gridviewRef.current) {
+            return;
+        }
+        gridviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+GridviewReact.displayName = 'GridviewComponent';
+//# sourceMappingURL=gridview.js.map

package/dist/esm/gridview/gridview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridview.js","sourceRoot":"","sources":["../../../src/gridview/gridview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACH,iBAAiB,EAGjB,WAAW,EACX,WAAW,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAuB/C,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,KAA0B,EAAE,GAAuC,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,EAAsB,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,mBAAmB,EAAE,CAAC;IAEnD,KAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACjB,OAAO,GAAG,EAAE;gBACR,OAAO;YACX,CAAC,CAAC;SACL;QAED,MAAM,QAAQ,GAAG,IAAI,iBAAiB,CAAC;YACnC,aAAa,EAAE,MAAM,CAAC,OAAO;YAC7B,kBAAkB,EACd,OAAO,KAAK,CAAC,kBAAkB,KAAK,SAAS;gBACzC,CAAC,CAAC,KAAK,CAAC,kBAAkB;gBAC1B,CAAC,CAAC,IAAI;YACd,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,UAAU;YACxD,mBAAmB,EAAE,KAAK,CAAC,UAAU;YACrC,yBAAyB,EAAE;gBACvB,eAAe,EAAE,CAAC,EAAU,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;oBACpD,OAAO,IAAI,kBAAkB,CACzB,EAAE,EACF,WAAW,EACX,SAAS,EACT;wBACI,SAAS;qBACZ,CACJ,CAAC;gBACN,CAAC;aACJ;YACD,MAAM,EAAE,KAAK,CAAC,WAAW;gBACrB,CAAC,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE;gBACpC,CAAC,CAAC,SAAS;SAClB,CAAC,CAAC;QAEH,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC;QACrD,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAE3C,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;SACrD;QAED,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QAE/B,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,OAAO,EAAE,CAAC;QACvB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACtB,OAAO;SACV;QACD,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC;YAC9B,mBAAmB,EAAE,KAAK,CAAC,UAAU;SACxC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,OAAO,CACH,6BACI,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EACxC,GAAG,EAAE,MAAM,IAEV,OAAO,CACN,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,mBAAmB,CAAC"}

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

@@ -1,10 +1,11 @@
-/// <reference types="react" />
-import { GridviewPanel, IFrameworkPart } from 'dockview-core';
-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(): IFrameworkPart;
-}
+/// <reference types="react" />
+import { GridviewPanel, IFrameworkPart } from 'dockview-core';
+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(): IFrameworkPart;
+}
+//# sourceMappingURL=view.d.ts.map

package/dist/esm/gridview/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/gridview/view.ts"],"names":[],"mappings":";AAAA,OAAO,EAEH,aAAa,EAEb,cAAc,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAa,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBAAa,kBAAmB,SAAQ,aAAa;IAI7C,OAAO,CAAC,QAAQ,CAAC,cAAc;IAC/B,OAAO,CAAC,QAAQ,CAAC,gBAAgB;gBAHjC,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,MAAM,EACA,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,EAC5D,gBAAgB,EAAE,gBAAgB;IAKvD,YAAY,IAAI,cAAc;CAcjC"}

package/dist/esm/gridview/view.js

@@ -1,17 +1,18 @@
-import { GridviewApi, GridviewPanel, } from 'dockview-core';
-import { ReactPart } from '../react';
-export class ReactGridPanelView extends GridviewPanel {
-    constructor(id, component, reactComponent, reactPortalStore) {
-        super(id, component);
-        this.reactComponent = reactComponent;
-        this.reactPortalStore = reactPortalStore;
-    }
-    getComponent() {
-        var _a;
-        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
-            api: this.api,
-            containerApi: new GridviewApi(this._params.accessor),
-        });
-    }
-}
+import { GridviewApi, GridviewPanel, } from 'dockview-core';
+import { ReactPart } from '../react';
+export class ReactGridPanelView extends GridviewPanel {
+    constructor(id, component, reactComponent, reactPortalStore) {
+        super(id, component);
+        this.reactComponent = reactComponent;
+        this.reactPortalStore = reactPortalStore;
+    }
+    getComponent() {
+        var _a;
+        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
+            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            api: this.api,
+            containerApi: new GridviewApi(this._params.accessor),
+        });
+    }
+}
+//# sourceMappingURL=view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../src/gridview/view.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,WAAW,EACX,aAAa,GAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAoB,MAAM,UAAU,CAAC;AAGvD,MAAM,OAAO,kBAAmB,SAAQ,aAAa;IACjD,YACI,EAAU,EACV,SAAiB,EACA,cAA4D,EAC5D,gBAAkC;QAEnD,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;QAHJ,mBAAc,GAAd,cAAc,CAA8C;QAC5D,qBAAgB,GAAhB,gBAAgB,CAAkB;IAGvD,CAAC;IAED,YAAY;;QACR,OAAO,IAAI,SAAS,CAChB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,cAAc,EACnB;YACI,MAAM,EAAE,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,EAAE;YAClC,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,YAAY,EAAE,IAAI,WAAW,CACxB,IAAI,CAAC,OAAkC,CAAC,QAAQ,CACpD;SACJ,CACJ,CAAC;IACN,CAAC;CACJ"}

package/dist/esm/index.d.ts

@@ -1,10 +1,11 @@
-export * from 'dockview-core';
-export * from './dockview/dockview';
-export * from './dockview/defaultTab';
-export * from './splitview/splitview';
-export * from './gridview/gridview';
-export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
-export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
-export * from './paneview/paneview';
-export * from './types';
-export * from './react';
+export * from 'dockview-core';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
+export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
+export * from './paneview/paneview';
+export * from './types';
+export * from './react';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/esm/index.js

@@ -1,8 +1,9 @@
-export * from 'dockview-core';
-export * from './dockview/dockview';
-export * from './dockview/defaultTab';
-export * from './splitview/splitview';
-export * from './gridview/gridview';
-export * from './paneview/paneview';
-export * from './types';
-export * from './react';
+export * from 'dockview-core';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export * from './paneview/paneview';
+export * from './types';
+export * from './react';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

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

@@ -1,24 +1,25 @@
-import * as React from 'react';
-import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
-export interface PaneviewReadyEvent {
-    api: PaneviewApi;
-}
-export interface IPaneviewPanelProps<T extends {
-    [index: string]: any;
-} = any> extends PanelParameters<T> {
-    api: PaneviewPanelApi;
-    containerApi: PaneviewApi;
-    title: string;
-}
-export interface IPaneviewReactProps {
-    onReady: (event: PaneviewReadyEvent) => void;
-    components: PanelCollection<IPaneviewPanelProps>;
-    headerComponents?: PanelCollection<IPaneviewPanelProps>;
-    className?: string;
-    disableAutoResizing?: boolean;
-    disableDnd?: boolean;
-    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
-    onDidDrop?(event: PaneviewDropEvent): void;
-}
-export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
+import * as React from 'react';
+import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface PaneviewReadyEvent {
+    api: PaneviewApi;
+}
+export interface IPaneviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: PaneviewPanelApi;
+    containerApi: PaneviewApi;
+    title: string;
+}
+export interface IPaneviewReactProps {
+    onReady: (event: PaneviewReadyEvent) => void;
+    components: PanelCollection<IPaneviewPanelProps>;
+    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    className?: string;
+    disableAutoResizing?: boolean;
+    disableDnd?: boolean;
+    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
+    onDidDrop?(event: PaneviewDropEvent): void;
+}
+export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=paneview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paneview.d.ts","sourceRoot":"","sources":["../../../src/paneview/paneview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACH,gBAAgB,EAGhB,uBAAuB,EACvB,WAAW,EACX,iBAAiB,EACpB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IAC/B,GAAG,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS;IAAE,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,YAAY,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACjD,gBAAgB,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,OAAO,CAAC;IAC7D,SAAS,CAAC,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,aAAa,4FAgHzB,CAAC"}

package/dist/esm/paneview/paneview.js

@@ -1,98 +1,85 @@
-import * as React from 'react';
-import { PaneviewComponent, PaneviewApi, watchElementResize, } from 'dockview-core';
-import { usePortalsLifecycle } from '../react';
-import { PanePanelSection } from './view';
-export const PaneviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const paneviewRef = React.useRef();
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    React.useEffect(() => {
-        if (props.disableAutoResizing) {
-            return () => {
-                //
-            };
-        }
-        const watcher = watchElementResize(domRef.current, (entry) => {
-            var _a;
-            const { width, height } = entry.contentRect;
-            (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-        });
-        return () => {
-            watcher.dispose();
-        };
-    }, [props.disableAutoResizing]);
-    React.useEffect(() => {
-        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
-            addPortal,
-        });
-        const paneview = new PaneviewComponent(domRef.current, {
-            frameworkComponents: props.components,
-            components: {},
-            headerComponents: {},
-            disableDnd: props.disableDnd,
-            headerframeworkComponents: props.headerComponents,
-            frameworkWrapper: {
-                header: {
-                    createComponent,
-                },
-                body: {
-                    createComponent,
-                },
-            },
-            showDndOverlay: props.showDndOverlay,
-        });
-        const api = new PaneviewApi(paneview);
-        const { clientWidth, clientHeight } = domRef.current;
-        paneview.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        paneviewRef.current = paneview;
-        return () => {
-            paneview.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            frameworkComponents: props.components,
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            headerframeworkComponents: props.headerComponents,
-        });
-    }, [props.headerComponents]);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return () => {
-                //
-            };
-        }
-        const paneview = paneviewRef.current;
-        const disposable = paneview.onDidDrop((event) => {
-            if (props.onDidDrop) {
-                props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
-            }
-        });
-        return () => {
-            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';
+import * as React from 'react';
+import { PaneviewComponent, PaneviewApi, } from 'dockview-core';
+import { usePortalsLifecycle } from '../react';
+import { PanePanelSection } from './view';
+export const PaneviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const paneviewRef = React.useRef();
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
+        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
+            addPortal,
+        });
+        const paneview = new PaneviewComponent({
+            parentElement: domRef.current,
+            frameworkComponents: props.components,
+            components: {},
+            headerComponents: {},
+            disableDnd: props.disableDnd,
+            headerframeworkComponents: props.headerComponents,
+            frameworkWrapper: {
+                header: {
+                    createComponent,
+                },
+                body: {
+                    createComponent,
+                },
+            },
+            showDndOverlay: props.showDndOverlay,
+        });
+        const api = new PaneviewApi(paneview);
+        const { clientWidth, clientHeight } = domRef.current;
+        paneview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api });
+        }
+        paneviewRef.current = paneview;
+        return () => {
+            paneview.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
+        }
+        paneviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
+        }
+        paneviewRef.current.updateOptions({
+            headerframeworkComponents: props.headerComponents,
+        });
+    }, [props.headerComponents]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return () => {
+                //
+            };
+        }
+        const paneview = paneviewRef.current;
+        const disposable = paneview.onDidDrop((event) => {
+            if (props.onDidDrop) {
+                props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
+            }
+        });
+        return () => {
+            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';
+//# sourceMappingURL=paneview.js.map

package/dist/esm/paneview/paneview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paneview.js","sourceRoot":"","sources":["../../../src/paneview/paneview.tsx"],"names":[],"mappings":"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"}

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

@@ -1,19 +1,20 @@
-import * as React from 'react';
-import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
-import { ReactPortalStore } from '../react';
-import { IPaneviewPanelProps } from './paneview';
-export declare class PanePanelSection implements IPaneBodyPart {
-    readonly id: string;
-    private readonly component;
-    private readonly reactPortalStore;
-    private _element;
-    private part?;
-    get element(): HTMLElement;
-    constructor(id: string, component: React.FunctionComponent<IPaneviewPanelProps>, reactPortalStore: ReactPortalStore);
-    init(parameters: PanePanelComponentInitParameter): void;
-    toJSON(): {
-        id: string;
-    };
-    update(params: PanelUpdateEvent): void;
-    dispose(): void;
-}
+import * as React from 'react';
+import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
+import { ReactPortalStore } from '../react';
+import { IPaneviewPanelProps } from './paneview';
+export declare class PanePanelSection implements IPaneBodyPart {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(id: string, component: React.FunctionComponent<IPaneviewPanelProps>, reactPortalStore: ReactPortalStore);
+    init(parameters: PanePanelComponentInitParameter): void;
+    toJSON(): {
+        id: string;
+    };
+    update(params: PanelUpdateEvent): void;
+    dispose(): void;
+}
+//# sourceMappingURL=view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/paneview/view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACH,gBAAgB,EAChB,aAAa,EACb,+BAA+B,EAClC,MAAM,eAAe,CAAC;AACvB,OAAO,EAAa,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBAAa,gBAAiB,YAAW,aAAa;aAS9B,EAAE,EAAE,MAAM;IAC1B,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,gBAAgB;IAVrC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,IAAI,CAAC,CAAiC;IAE9C,IAAI,OAAO,gBAEV;gBAGmB,EAAE,EAAE,MAAM,EACT,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,EACvD,gBAAgB,EAAE,gBAAgB;IAOhD,IAAI,CAAC,UAAU,EAAE,+BAA+B,GAAG,IAAI;IAcvD,MAAM;;;IAMN,MAAM,CAAC,MAAM,EAAE,gBAAgB;IAI/B,OAAO;CAGjB"}

package/dist/esm/paneview/view.js

@@ -1,35 +1,36 @@
-import { ReactPart } from '../react';
-export class PanePanelSection {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            title: parameters.title,
-            containerApi: parameters.containerApi,
-        });
-    }
-    toJSON() {
-        return {
-            id: this.id,
-        };
-    }
-    update(params) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}
+import { ReactPart } from '../react';
+export class PanePanelSection {
+    get element() {
+        return this._element;
+    }
+    constructor(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    init(parameters) {
+        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
+            params: parameters.params,
+            api: parameters.api,
+            title: parameters.title,
+            containerApi: parameters.containerApi,
+        });
+    }
+    toJSON() {
+        return {
+            id: this.id,
+        };
+    }
+    update(params) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
+    }
+    dispose() {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+}
+//# sourceMappingURL=view.js.map

package/dist/esm/paneview/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../../src/paneview/view.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAoB,MAAM,UAAU,CAAC;AAGvD,MAAM,OAAO,gBAAgB;IAIzB,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,YACoB,EAAU,EACT,SAAuD,EACvD,gBAAkC;QAFnC,OAAE,GAAF,EAAE,CAAQ;QACT,cAAS,GAAT,SAAS,CAA8C;QACvD,qBAAgB,GAAhB,gBAAgB,CAAkB;QAEnD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;IACvC,CAAC;IAEM,IAAI,CAAC,UAA2C;QACnD,IAAI,CAAC,IAAI,GAAG,IAAI,SAAS,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,SAAS,EACd;YACI,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,GAAG,EAAE,UAAU,CAAC,GAAG;YACnB,KAAK,EAAE,UAAU,CAAC,KAAK;YACvB,YAAY,EAAE,UAAU,CAAC,YAAY;SACxC,CACJ,CAAC;IACN,CAAC;IAEM,MAAM;QACT,OAAO;YACH,EAAE,EAAE,IAAI,CAAC,EAAE;SACd,CAAC;IACN,CAAC;IAEM,MAAM,CAAC,MAAwB;;QAClC,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAEM,OAAO;;QACV,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,CAAC;IACzB,CAAC;CACJ"}