dockview-react 6.6.0 → 7.0.2

package/dist/cjs/dockview/reactGroupDragGhostPart.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { IDockviewGroupPanel, IGroupDragGhostRenderer, DockviewApi } from 'dockview';
+export interface IDockviewGroupDragGhostProps {
+    group: IDockviewGroupPanel;
+    api: DockviewApi;
+}
+export declare class ReactGroupDragGhostPart implements IGroupDragGhostRenderer {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(component: React.FunctionComponent<IDockviewGroupDragGhostProps>, reactPortalStore: ReactPortalStore);
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactGroupDragGhostPart.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactGroupDragGhostPart = void 0;
+var react_1 = require("../react");
+var ReactGroupDragGhostPart = /** @class */ (function () {
+    function ReactGroupDragGhostPart(component, reactPortalStore) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.display = 'inline-flex';
+    }
+    Object.defineProperty(ReactGroupDragGhostPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactGroupDragGhostPart.prototype.init = function (params) {
+        this.part = new react_1.ReactPart(this._element, this.reactPortalStore, this.component, {
+            group: params.group,
+            api: params.api,
+        });
+    };
+    ReactGroupDragGhostPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactGroupDragGhostPart;
+}());
+exports.ReactGroupDragGhostPart = ReactGroupDragGhostPart;

package/dist/cjs/dockview/reactHeaderPart.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { PanelUpdateEvent, ITabRenderer, TabPartInitParameters, IDockviewPanelHeaderProps } from 'dockview';
+export declare class ReactPanelHeaderPart implements ITabRenderer {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(id: string, component: React.FunctionComponent<IDockviewPanelHeaderProps>, reactPortalStore: ReactPortalStore);
+    focus(): void;
+    init(parameters: TabPartInitParameters): void;
+    update(event: PanelUpdateEvent): void;
+    layout(_width: number, _height: number): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactHeaderPart.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactPanelHeaderPart = void 0;
+var react_1 = require("../react");
+var ReactPanelHeaderPart = /** @class */ (function () {
+    function ReactPanelHeaderPart(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    Object.defineProperty(ReactPanelHeaderPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactPanelHeaderPart.prototype.focus = function () {
+        //noop
+    };
+    ReactPanelHeaderPart.prototype.init = function (parameters) {
+        this.part = new react_1.ReactPart(this.element, this.reactPortalStore, this.component, {
+            params: parameters.params,
+            api: parameters.api,
+            containerApi: parameters.containerApi,
+            tabLocation: parameters.tabLocation,
+        });
+    };
+    ReactPanelHeaderPart.prototype.update = function (event) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
+    };
+    ReactPanelHeaderPart.prototype.layout = function (_width, _height) {
+        // noop - retrieval from api
+    };
+    ReactPanelHeaderPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactPanelHeaderPart;
+}());
+exports.ReactPanelHeaderPart = ReactPanelHeaderPart;

package/dist/cjs/dockview/reactTabGroupChipPart.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { ITabGroupChipRenderer, ITabGroup, DockviewApi } from 'dockview';
+export interface IDockviewTabGroupChipProps {
+    tabGroup: ITabGroup;
+    api: DockviewApi;
+}
+export declare class ReactTabGroupChipPart implements ITabGroupChipRenderer {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    get element(): HTMLElement;
+    constructor(component: React.FunctionComponent<IDockviewTabGroupChipProps>, reactPortalStore: ReactPortalStore);
+    init(params: {
+        tabGroup: ITabGroup;
+        api: DockviewApi;
+    }): void;
+    update(params: {
+        tabGroup: ITabGroup;
+    }): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactTabGroupChipPart.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactTabGroupChipPart = void 0;
+var react_1 = require("../react");
+var ReactTabGroupChipPart = /** @class */ (function () {
+    function ReactTabGroupChipPart(component, reactPortalStore) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.display = 'inline-flex';
+    }
+    Object.defineProperty(ReactTabGroupChipPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactTabGroupChipPart.prototype.init = function (params) {
+        this.part = new react_1.ReactPart(this._element, this.reactPortalStore, this.component, {
+            tabGroup: params.tabGroup,
+            api: params.api,
+        });
+    };
+    ReactTabGroupChipPart.prototype.update = function (params) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ tabGroup: params.tabGroup });
+    };
+    ReactTabGroupChipPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactTabGroupChipPart;
+}());
+exports.ReactTabGroupChipPart = ReactTabGroupChipPart;

package/dist/cjs/dockview/reactWatermarkPart.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { PanelUpdateEvent, IWatermarkRenderer, WatermarkRendererInitParameters, IWatermarkPanelProps } from 'dockview';
+export declare class ReactWatermarkPart implements IWatermarkRenderer {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _element;
+    private part?;
+    private readonly parameters;
+    get element(): HTMLElement;
+    constructor(id: string, component: React.FunctionComponent<IWatermarkPanelProps>, reactPortalStore: ReactPortalStore);
+    init(parameters: WatermarkRendererInitParameters): void;
+    focus(): void;
+    update(params: PanelUpdateEvent): void;
+    layout(_width: number, _height: number): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/reactWatermarkPart.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactWatermarkPart = void 0;
+var react_1 = require("../react");
+var ReactWatermarkPart = /** @class */ (function () {
+    function ReactWatermarkPart(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    Object.defineProperty(ReactWatermarkPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactWatermarkPart.prototype.init = function (parameters) {
+        this.part = new react_1.ReactPart(this.element, this.reactPortalStore, this.component, {
+            group: parameters.group,
+            containerApi: parameters.containerApi,
+        });
+    };
+    ReactWatermarkPart.prototype.focus = function () {
+        // noop
+    };
+    ReactWatermarkPart.prototype.update = function (params) {
+        var _a, _b, _c;
+        if (this.parameters) {
+            this.parameters.params = params.params;
+        }
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
+    };
+    ReactWatermarkPart.prototype.layout = function (_width, _height) {
+        // noop - retrieval from api
+    };
+    ReactWatermarkPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactWatermarkPart;
+}());
+exports.ReactWatermarkPart = ReactWatermarkPart;

package/dist/cjs/gridview/gridview.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { GridviewPanelApi, GridviewApi, GridviewOptions } from 'dockview';
+import { PanelParameters } from '../types';
+export interface GridviewReadyEvent {
+    api: GridviewApi;
+}
+export interface IGridviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: GridviewPanelApi;
+    containerApi: GridviewApi;
+}
+export interface IGridviewReactProps extends GridviewOptions {
+    onReady: (event: GridviewReadyEvent) => void;
+    components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
+}
+export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/gridview/gridview.js

@@ -0,0 +1,105 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridviewReact = void 0;
+var react_1 = __importDefault(require("react"));
+var dockview_1 = require("dockview");
+var view_1 = require("./view");
+var react_2 = require("../react");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_1.PROPERTY_KEYS_GRIDVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
+exports.GridviewReact = react_1.default.forwardRef(function (props, ref) {
+    var domRef = react_1.default.useRef(null);
+    var gridviewRef = react_1.default.useRef(undefined);
+    var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
+    react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
+    react_1.default.useEffect(function () {
+        var changes = {};
+        dockview_1.PROPERTY_KEYS_GRIDVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (gridviewRef.current) {
+            gridviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_1.PROPERTY_KEYS_GRIDVIEW.map(function (key) { return props[key]; }));
+    react_1.default.useEffect(function () {
+        if (!domRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var frameworkOptions = {
+            createComponent: function (options) {
+                return new view_1.ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
+        };
+        var api = (0, dockview_1.createGridview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        api.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: api });
+        }
+        gridviewRef.current = api;
+        return function () {
+            gridviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    react_1.default.useEffect(function () {
+        if (!gridviewRef.current) {
+            return;
+        }
+        gridviewRef.current.updateOptions({
+            createComponent: function (options) {
+                return new view_1.ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
+        });
+    }, [props.components]);
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.GridviewReact.displayName = 'GridviewComponent';

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

@@ -0,0 +1,9 @@
+import { GridviewPanel, IFrameworkPart } from 'dockview';
+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;
+}

package/dist/cjs/gridview/view.js

@@ -0,0 +1,41 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactGridPanelView = void 0;
+var dockview_1 = require("dockview");
+var react_1 = require("../react");
+var ReactGridPanelView = /** @class */ (function (_super) {
+    __extends(ReactGridPanelView, _super);
+    function ReactGridPanelView(id, component, reactComponent, reactPortalStore) {
+        var _this = _super.call(this, id, component) || this;
+        _this.reactComponent = reactComponent;
+        _this.reactPortalStore = reactPortalStore;
+        return _this;
+    }
+    ReactGridPanelView.prototype.getComponent = function () {
+        var _a, _b;
+        return new react_1.ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
+            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
+            api: this.api,
+            // TODO: fix casting hack
+            containerApi: new dockview_1.GridviewApi(this._params
+                .accessor),
+        });
+    };
+    return ReactGridPanelView;
+}(dockview_1.GridviewPanel));
+exports.ReactGridPanelView = ReactGridPanelView;

package/dist/cjs/index.d.ts

@@ -1 +1,10 @@
 export * from 'dockview';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export { IDockviewTabGroupChipProps } from './dockview/reactTabGroupChipPart';
+export { IDockviewGroupDragGhostProps } from './dockview/reactGroupDragGhostPart';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export * from './paneview/paneview';
+export * from './types';
+export * from './react';

package/dist/cjs/index.js

@@ -15,3 +15,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("dockview"), exports);
+__exportStar(require("./dockview/dockview"), exports);
+__exportStar(require("./dockview/defaultTab"), exports);
+__exportStar(require("./splitview/splitview"), exports);
+__exportStar(require("./gridview/gridview"), exports);
+__exportStar(require("./paneview/paneview"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./react"), exports);

package/dist/cjs/paneview/paneview.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PaneviewPanelApi, PaneviewApi, PaneviewDidDropEvent, PaneviewOptions } from 'dockview';
+import { 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 extends PaneviewOptions {
+    onReady: (event: PaneviewReadyEvent) => void;
+    components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    headerComponents?: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    onDidDrop?(event: PaneviewDidDropEvent): void;
+}
+export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/paneview/paneview.js

@@ -0,0 +1,137 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaneviewReact = void 0;
+var react_1 = __importDefault(require("react"));
+var dockview_1 = require("dockview");
+var react_2 = require("../react");
+var view_1 = require("./view");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_1.PROPERTY_KEYS_PANEVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
+exports.PaneviewReact = react_1.default.forwardRef(function (props, ref) {
+    var domRef = react_1.default.useRef(null);
+    var paneviewRef = react_1.default.useRef(undefined);
+    var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
+    react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
+    react_1.default.useEffect(function () {
+        var changes = {};
+        dockview_1.PROPERTY_KEYS_PANEVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (paneviewRef.current) {
+            paneviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_1.PROPERTY_KEYS_PANEVIEW.map(function (key) { return props[key]; }));
+    react_1.default.useEffect(function () {
+        var _a;
+        if (!domRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        var frameworkOptions = {
+            createComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, props.components[options.name], { addPortal: addPortal });
+            },
+            createHeaderComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, headerComponents[options.name], { addPortal: addPortal });
+            },
+        };
+        var api = (0, dockview_1.createPaneview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        api.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: api });
+        }
+        paneviewRef.current = api;
+        return function () {
+            paneviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    react_1.default.useEffect(function () {
+        if (!paneviewRef.current) {
+            return;
+        }
+        paneviewRef.current.updateOptions({
+            createComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, props.components[options.name], { addPortal: addPortal });
+            },
+        });
+    }, [props.components]);
+    react_1.default.useEffect(function () {
+        var _a;
+        if (!paneviewRef.current) {
+            return;
+        }
+        var headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        paneviewRef.current.updateOptions({
+            createHeaderComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, headerComponents[options.name], { addPortal: addPortal });
+            },
+        });
+    }, [props.headerComponents]);
+    react_1.default.useEffect(function () {
+        if (!paneviewRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var disposable = paneviewRef.current.onDidDrop(function (event) {
+            if (props.onDidDrop) {
+                props.onDidDrop(event);
+            }
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.PaneviewReact.displayName = 'PaneviewComponent';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PanelUpdateEvent, IPanePart, PanePanelComponentInitParameter } from 'dockview';
+import { ReactPortalStore } from '../react';
+import { IPaneviewPanelProps } from './paneview';
+export declare class PanePanelSection implements IPanePart {
+    readonly id: string;
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _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;
+}

package/dist/cjs/paneview/view.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanePanelSection = void 0;
+var react_1 = require("../react");
+var PanePanelSection = /** @class */ (function () {
+    function PanePanelSection(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%';
+    }
+    Object.defineProperty(PanePanelSection.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PanePanelSection.prototype.init = function (parameters) {
+        this.part = new react_1.ReactPart(this.element, this.reactPortalStore, this.component, {
+            params: parameters.params,
+            api: parameters.api,
+            title: parameters.title,
+            containerApi: parameters.containerApi,
+        });
+    };
+    PanePanelSection.prototype.toJSON = function () {
+        return {
+            id: this.id,
+        };
+    };
+    PanePanelSection.prototype.update = function (params) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
+    };
+    PanePanelSection.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return PanePanelSection;
+}());
+exports.PanePanelSection = PanePanelSection;